/* CrmHub24 — fon qatlami va sozlamalar paneli (crm-bg.js). Faqat CRM tokenlari: yorug'/tungi mavzuda o'zi moslashadi. */

/* ---- Fon qatlami ---- */
.bg-host{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg-host .bgl-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-host .bgl-s{position:absolute;inset:0}

/* ---- Sozlamalar paneli ---- */
.bgp-wrap{position:relative;display:inline-flex}
.bgp{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:420px;max-width:calc(100vw - 32px);max-height:min(680px, calc(100vh / 0.9 - 120px));overflow-y:auto;
  padding:18px;border-radius:16px;background:var(--bg-panel);border:1px solid var(--border-dark2);box-shadow:0 22px 60px rgba(0,0,0,.42);
  display:flex;flex-direction:column;gap:16px;text-align:left;font-size:13.5px;color:var(--text-main);scrollbar-width:thin;scrollbar-color:var(--border-dark2) transparent}
.bgp *{box-sizing:border-box}
.bgp>*{flex-shrink:0}
.bgp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bgp-title{font-size:15px;font-weight:700}
.bgp-m{font-size:12px;color:var(--text-dim);line-height:1.4}
.bgp-b{font-weight:600}
.bgp-x{width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.bgp-x:hover{background:var(--hover);color:var(--text-main)}
.bgp-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.bgp-prev{position:relative;height:132px;border-radius:12px;overflow:hidden;border:1px solid var(--border-dark2)}
.bgp-prev-s{position:absolute;inset:0}
.bgp-prev-tag{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:7px;background:rgba(8,16,22,.62);color:#fff;font-size:11.5px;font-weight:600}
.bgp-prev-msgs{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.bgp-pb{padding:6px 12px;font-size:12.5px}
.bgp-pb.in{align-self:flex-start;border-radius:12px 12px 12px 3px;background:var(--bg-panel);border:1px solid var(--border-dark);color:var(--text-main)}
.bgp-pb.out{align-self:flex-end;border-radius:12px 12px 3px 12px;background:var(--accent);color:#fff}

.bgp-tabs{display:flex;gap:2px}
.bgp-tabs button{height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--text-dim);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.bgp-tabs button:hover{color:var(--text-main)}
.bgp-tabs button.on{background:var(--hover);color:var(--text-main)}

.bgp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.bgp-tile{border:0;background:transparent;padding:0;display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:left;cursor:pointer;color:inherit;font:inherit}
.bgp-tp{position:relative;display:block;height:68px;border-radius:11px;border:1px solid var(--border-dark2);overflow:hidden}
.bgp-tile.on .bgp-tp{box-shadow:0 0 0 2px var(--bg-panel),0 0 0 4px var(--accent)}
.bgp-tile:hover .bgp-tp{border-color:var(--text-dim)}
.bgp-play{position:absolute;left:6px;bottom:6px;width:22px;height:22px;border-radius:50%;background:rgba(8,16,22,.65);display:inline-flex;align-items:center;justify-content:center}
.bgp-play svg{width:9px;height:9px;fill:#fff;margin-left:1px}
.bgp-ok{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.bgp-ok svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bgp-tl{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:500;color:var(--text-dim)}
.bgp-tile.on .bgp-tl{color:var(--text-main);font-weight:700}
.bgp-tl>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgp-tag{font-size:10px;font-weight:700;letter-spacing:.03em;padding:1px 6px;border-radius:5px;background:var(--hover);color:var(--text-dim);flex-shrink:0}

.bgp-sec{display:flex;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid var(--border-dark)}
.bgp-sl{display:flex;flex-direction:column;gap:6px}
.bgp-slh{display:flex;justify-content:space-between;align-items:baseline}
.bgp input[type=range]{width:100%;accent-color:var(--accent)}
.bgp input[type=range]:disabled{opacity:.4}
.bgp-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bgp-rl{display:flex;flex-direction:column;min-width:0}
.bgp-sw{width:40px;height:24px;border-radius:12px;border:0;padding:3px;display:inline-flex;align-items:center;justify-content:flex-start;background:var(--border-dark2);cursor:pointer;flex-shrink:0;transition:background .15s}
.bgp-sw span{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.bgp-sw.on{background:var(--accent)}
.bgp-sw.on span{transform:translateX(16px)}

.bgp-co{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;border:1px dashed var(--border-dark2)}
.bgp-cot{display:flex;align-items:center;gap:8px}
.bgp-adm{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:5px;background:var(--accent-soft);color:var(--accent-text)}
.bgp-cob{display:flex;flex-wrap:wrap;gap:8px}
.bgp-msg{font-size:12px;color:var(--green)}

.bgp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bgp-btn{height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--border-dark2);background:transparent;color:var(--text-main);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.bgp-btn:hover:not(:disabled){background:var(--hover)}
.bgp-btn:disabled{opacity:.5;cursor:default}
.bgp-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;padding:0 22px}
.bgp-btn.pri:hover{background:var(--accent-dark)}
.bgp button:focus-visible,.bgp input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:600px){.bgp{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:80vh}}

/* ---- Fon bor sahifalar: kartalar o'qilishi uchun yarim shaffof panel ---- */
/* Kanban: eski ko'rinish O'ZGARMAYDI — faqat orqa fon qatlami qo'shiladi (bg-host, absolyut, hamma narsa ostida) */
#page-kanban{position:relative}
#page-kanban.has-bg>*:not(.bg-host){position:relative;z-index:1}
/* Fon ichki tarkibdan biroz kengroq: yozuvlar rasm chetiga yopishmaydi, burchaklar yumaloq */
#kanban-bg{inset:-12px -14px -14px -14px;border-radius:14px}
/* "Список" (jadval) ko'rinishida jadvalning o'z foni bor — fon va uning yordamchi taglari butunlay o'chadi */
/* Faqat fon ostida matn o'qilishi uchun: filtr paneli va ustun sarlavhasi orqasiga yarim shaffof taglik (kartalar va joylashuv o'zgarmaydi) */
#page-kanban.has-bg .kanban-filter-bar{background:color-mix(in srgb,var(--bg-panel) 76%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:7px 12px}
#page-kanban.has-bg .kanban-col-header{background:color-mix(in srgb,var(--bg-panel) 76%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:9px 12px 10px;margin:0 8px 8px}

/* Fon sahifaning TO'LIQ balandligini qoplasin (kontent qisqa bo'lsa pastda ochiq joy qolmasin) */
.main-body>.page.has-bg{min-height:100%;box-sizing:border-box}
.main-body>.page.has-bg>.bg-host{bottom:-22px}

/* Sozlamalar -> Fon: panel sahifaning o'zida (popup emas) */
.bgp.bgp-inline{position:static;top:auto;right:auto;z-index:auto;width:100%;max-width:560px;max-height:none;overflow:visible;box-shadow:none;border:0;background:transparent;padding:0}

/* ---- Kontaktlar va Vazifalar: boshqa sahifalar bilan bir xil fon va shaffof bloklar (2026-10-19) ---- */
#page-contacts,#page-tasks{position:relative}
#page-contacts.has-bg>*:not(.bg-host),#page-tasks.has-bg>*:not(.bg-host){position:relative;z-index:1}
#contacts-bg,#tasks-bg{inset:-12px -14px -14px -14px;border-radius:14px}
#page-contacts.has-bg .data-table,#page-tasks.has-bg .data-table,#page-tasks.has-bg .panel,#page-contacts.has-bg .bulk-action-bar,#page-tasks.has-bg .bulk-action-bar,#page-contacts.has-bg .pagination-bar,#page-tasks.has-bg .pagination-bar,
#page-contacts.has-bg .task-tabs,#page-tasks.has-bg .task-tabs{background:color-mix(in srgb,var(--bg-panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#page-contacts.has-bg .task-tabs,#page-tasks.has-bg .task-tabs{border-radius:12px;padding:6px 12px}
#page-contacts.has-bg .pagination-bar{border-radius:12px;padding:8px 12px;margin-top:12px}

/* Sozlamalar -> Fon: sahifaning butun kengligida (chetga yig'ilib qolmasin) */
.bgp.bgp-inline{max-width:none;width:100%;gap:22px}
.bgp-inline .bgp-prev{height:220px}
.bgp-inline .bgp-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px 14px}
.bgp-inline .bgp-sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;align-items:start}
.bgp-inline .bgp-co{max-width:none}
@media (max-width:800px){.bgp-inline .bgp-sec{grid-template-columns:minmax(0,1fr)}}
.st-section[data-st="appearance"]{max-width:none}

/* ---- Qo'ng'iroqlar, Qarzdorlik (SAP) va eski Boshqaruv paneli (Mobicom): bir xil fon va shaffof bloklar (2026-10-19) ---- */
#page-calls,#page-sap{position:relative}
#page-calls.has-bg>*:not(.bg-host),#page-sap.has-bg>*:not(.bg-host),#page-dashboard:is(.hm-old,.hm-extra).has-bg>*:not(.bg-host){position:relative;z-index:1}
#calls-bg,#sap-bg{inset:-12px -14px -14px -14px;border-radius:14px}
.main-body>#page-calls.has-bg,.main-body>#page-sap.has-bg,.main-body>#page-dashboard:is(.hm-old,.hm-extra).has-bg{min-height:100%}
#page-calls.has-bg .data-table,#page-sap.has-bg .data-table,#page-dashboard:is(.hm-old,.hm-extra).has-bg .data-table,
#page-sap.has-bg .stat-card,#page-dashboard:is(.hm-old,.hm-extra).has-bg .stat-card,#page-dashboard:is(.hm-old,.hm-extra).has-bg .panel,#page-sap.has-bg .panel,#page-calls.has-bg .panel,
#page-calls.has-bg .task-tabs,#page-sap.has-bg .pagination-bar,#page-calls.has-bg .pagination-bar,#page-dashboard:is(.hm-old,.hm-extra).has-bg .analytics-toolbar{
  background:color-mix(in srgb,var(--bg-panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#page-calls.has-bg .task-tabs,#page-dashboard:is(.hm-old,.hm-extra).has-bg .analytics-toolbar{border-radius:12px;padding:8px 14px}
#page-sap.has-bg .pagination-bar,#page-calls.has-bg .pagination-bar{border-radius:12px;padding:8px 12px;margin-top:12px}
/* Qarzdorlik filtrlari: boshqa sahifalardagi kabi yumaloq maydonlar */
#page-sap input:not([type=checkbox]):not([type=radio]),#page-sap select,#page-calls .task-tabs select,#page-calls .task-tabs input{min-height:36px;border-radius:10px;border:1px solid var(--border-dark2);background:color-mix(in srgb,var(--text-main) 4%,transparent);color:var(--text-main);padding:0 12px;font:inherit;font-size:13px}
#page-sap select{padding-right:30px}
#page-sap input:focus,#page-sap select:focus,#page-calls .task-tabs select:focus,#page-calls .task-tabs input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
#page-sap.has-bg>div[style*="flex-wrap:wrap"],#page-sap.has-bg>div[style*="flex-wrap: wrap"]{background:color-mix(in srgb,var(--bg-panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:10px 14px}
#page-sap select{background:color-mix(in srgb,var(--text-main) 4%,transparent)!important}