/* ============================================================
   NEXORA Dashboard — "Titanium + Teal" design system
   Approved source: "Nexora - סקιצת אמת (מאושר - דשבורד F7i6)".
   Scoped hermetically under .nxd (lives on #v-dashboard) so it
   never collides with the existing styles.css (.kpi/.badge/.funnel…).
   Layout = Titanium (compact, radius 9px). Color default = Teal.
   Per-user overridable: --nx-brand/--nx-accent (palette),
   --nx-radius (corners), --nx-gap/--nx-pad (density), [data-theme] (light/dark).
   ============================================================ */

/* ----- tokens: Titanium layout + Teal color (light) ----- */
.nxd{
  --nx-radius:9px;--nx-gap:16px;--nx-pad:18px;
  --kpi-h:116px;--chart-h:270px;--ring:168px;
  --nx-ff:"Heebo","Inter",system-ui,sans-serif;
  --nx-ease:cubic-bezier(.22,1,.36,1);
  --ok:#1f9d63;--warn:#d9931f;--bad:#dd4b52;
  --nx-bg:#FAFBFC;--nx-surface:#ffffff;--nx-raised:#F4F6F8;
  --nx-text:#0E1316;--nx-muted:#5A6B74;--nx-border:#E5E7EB;
  --nx-brand:var(--primary,#009391);--nx-on-brand:#ffffff;--nx-accent:var(--secondary,#00D1C9);
  --nx-glow:rgba(0,209,201,.13);--nx-hi:rgba(255,255,255,.92);
  --nx-shadow:0 1px 2px rgba(14,19,22,.04),0 10px 28px rgba(14,19,22,.06);
  color:var(--nx-text);
  /* contained + centered, matching the F7i6 sketch .wrap{min(100%,1560px);margin-inline:auto}
     (the app's .main-content already supplies the 30px side gutter) */
  max-inline-size:1560px;margin-inline:auto;box-sizing:border-box;
}
/* dark mode — follows the system-wide [data-theme="dark"] */
[data-theme="dark"] .nxd{
  --nx-bg:#0E1316;--nx-surface:#161D22;--nx-raised:#1F2933;
  --nx-text:#EAF2F3;--nx-muted:#90A2A8;--nx-border:#2A353C;
  --nx-brand:#2AD8D0;--nx-on-brand:#06201F;--nx-accent:#00D1C9;
  --nx-glow:rgba(0,209,201,.12);--nx-hi:rgba(255,255,255,.07);
  --nx-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.4);
}

.nxd .num,.nxd .nx-number{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.025em}
.nxd button{font-family:inherit;cursor:pointer}
.nxd :where(button,a,[tabindex]):focus-visible{outline:2px solid var(--nx-brand);outline-offset:2px;border-radius:var(--radius-sm,8px)}

/* neutralize legacy .stats-grid layout on #statsGrid — the inner .grid now drives layout */
.nxd #statsGrid{display:block;grid-template-columns:none;gap:0}
#branchIncomeCubes{margin-top:18px;margin-bottom:22px}

/* ===================== GRID ===================== */
.nxd .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--nx-gap);align-items:stretch}
.nxd .grid+.grid{margin-top:var(--nx-gap)}
.nxd .grid>*{min-inline-size:0}
.nxd .s12{grid-column:span 12}.nxd .s8{grid-column:span 8}.nxd .s7{grid-column:span 7}.nxd .s6{grid-column:span 6}.nxd .s5{grid-column:span 5}.nxd .s4{grid-column:span 4}.nxd .s3{grid-column:span 3}.nxd .s2{grid-column:span 2}
@media(max-width:1180px){.nxd .s8,.nxd .s7,.nxd .s6,.nxd .s5,.nxd .s4{grid-column:span 12}.nxd .s3{grid-column:span 6}.nxd .s2{grid-column:span 4}}
@media(max-width:620px){.nxd .s3,.nxd .s2{grid-column:span 6}}
.nxd .sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--nx-gap)}

/* ===================== PANELS ===================== */
.nxd .panel{position:relative;padding:var(--nx-pad);border:1px solid var(--nx-border);border-radius:var(--nx-radius);background:var(--nx-surface);box-shadow:var(--nx-shadow);display:flex;flex-direction:column}
.nxd .panel.sig{background:radial-gradient(ellipse at 88% -10%,var(--nx-glow),transparent 60%),var(--nx-surface)}
.nxd .panel.sig::before{content:"";position:absolute;inset-block-start:0;inset-inline:20px;block-size:1px;background:linear-gradient(90deg,transparent,var(--nx-hi),transparent);pointer-events:none}
.nxd .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.nxd .ph h3{margin:0;font-size:1rem;font-weight:700;font-family:var(--nx-ff);display:flex;align-items:center;gap:8px;min-width:0}
.nxd .ph-ic{width:24px;height:24px;flex:none;display:inline-grid;place-items:center;border-radius:7px;color:var(--nx-brand);background:color-mix(in srgb,var(--nx-brand) 11%,transparent)}
.nxd .ph-ic svg{width:15px;height:15px}
.nxd .ph .mut{font-size:.74rem;color:var(--nx-muted);font-weight:600}
.nxd .ico{width:28px;height:28px;border-radius:var(--radius-sm,8px);display:grid;place-items:center;color:var(--nx-muted);flex:none;background:none;border:none}
.nxd .ico:hover{background:color-mix(in srgb,var(--nx-text) 6%,transparent);color:var(--nx-text)}
.nxd .ico svg{width:16px;height:16px}

/* ===================== KPI ===================== */
.nxd .kpigrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--nx-gap)}
@media(max-width:1100px){.nxd .kpigrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.nxd .kpigrid{grid-template-columns:1fr}}
.nxd .kpi{min-height:var(--kpi-h);justify-content:center;position:relative;overflow:hidden;transition:transform .2s var(--nx-ease),box-shadow .2s,border-color .2s}
.nxd .kpi:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--nx-brand) 45%,var(--nx-border));box-shadow:0 16px 36px rgba(14,19,22,.1)}
.nxd .kpi .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.nxd .kpi .lab{color:var(--nx-muted);font-size:.82rem;font-weight:600}
.nxd .kpi .ic{width:36px;height:36px;border-radius:var(--radius-sm,9px);display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--nx-brand) 12%,transparent);color:var(--nx-brand)}
.nxd .kpi .ic svg{width:19px;height:19px}
.nxd .kpi .val{font-size:1.55rem;font-weight:800;font-family:var(--nx-ff);line-height:1.1;margin-top:6px}
.nxd .kpi .foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.76rem}
.nxd .kpi .d{display:inline-flex;align-items:center;gap:3px;font-weight:700}
.nxd .kpi .d.up{color:var(--ok)}.nxd .kpi .d.down{color:var(--bad)}
.nxd .kpi .foot span{color:var(--nx-muted);font-weight:500}
.nxd .kpi .wm{position:absolute;inset-inline-end:-16px;bottom:-20px;color:var(--nx-brand);opacity:.06;pointer-events:none}
.nxd .kpi .wm svg{width:100px;height:100px}
.nxd .kpi>.top,.nxd .kpi>.val,.nxd .kpi>.ksub,.nxd .kpi>.spark,.nxd .kpi>.kbar,.nxd .kpi>.foot{position:relative;z-index:1}
.nxd .kpi .ksub{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:9px;padding-top:9px;border-top:1px solid var(--nx-border);font-size:.72rem;color:var(--nx-muted)}
.nxd .kpi .ksub b{color:var(--nx-text);font-weight:700}
.nxd .spark{margin-top:auto;padding-top:10px}
.nxd .spark svg{display:block;width:100%;height:34px;overflow:visible}
.nxd .kbar{margin-top:14px;height:7px;border-radius:30px;background:color-mix(in srgb,var(--nx-text) 9%,transparent);overflow:hidden}
.nxd .kbar i{display:block;height:100%;width:0;border-radius:30px;background:linear-gradient(90deg,var(--nx-brand),var(--nx-accent));transition:width 1s var(--nx-ease)}
/* split KPI */
.nxd .kpisplit{display:flex;flex-direction:row;align-items:stretch;padding:0;overflow:hidden}
.nxd .kpisplit .half{flex:1;padding:16px;display:flex;flex-direction:column;min-height:116px}
.nxd .kpisplit .hhead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:2.6em}
.nxd .kpisplit .hl{color:var(--nx-muted);font-size:.82rem;font-weight:600;line-height:1.2}
.nxd .kpisplit .half .ic{width:34px;height:34px;border-radius:var(--radius-sm,9px);flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--nx-brand) 12%,transparent);color:var(--nx-brand)}
.nxd .kpisplit .half .ic svg{width:18px;height:18px}
.nxd .kpisplit .hv{font-size:1.5rem;font-weight:800;margin-top:8px;font-family:var(--nx-ff)}
.nxd .kpisplit .kbar{margin-top:auto}
.nxd .kpisplit .hdiv{width:1px;background:var(--nx-border);margin:16px 0;flex:none}
@media(max-width:430px){.nxd .kpisplit{flex-direction:column}.nxd .kpisplit .half{min-height:0}.nxd .kpisplit .hdiv{width:auto;height:1px;margin:0 16px}}

/* ===================== CHART ===================== */
.nxd .chart svg{display:block;width:100%;height:auto;overflow:visible}
.nxd .legend{display:flex;gap:16px;font-size:.78rem;color:var(--nx-muted);flex-wrap:wrap}
.nxd .legend .li{display:flex;align-items:center;gap:7px}.nxd .legend .dot{width:10px;height:10px;border-radius:3px}
.nxd .axis{font-size:10px;fill:var(--nx-muted);font-family:var(--nx-ff)}
.nxd .gl{stroke:var(--nx-border);stroke-width:1}
.nxd .hp{cursor:pointer}
.nxd .segd{display:inline-flex;background:var(--nx-raised);border:1px solid var(--nx-border);border-radius:var(--radius-sm,10px);padding:3px}
.nxd .segd button{padding:6px 12px;border-radius:7px;font-size:.78rem;font-weight:600;color:var(--nx-muted);transition:.18s;background:none;border:none}
.nxd .segd button.on{background:var(--nx-surface);color:var(--nx-text);box-shadow:var(--nx-shadow)}

/* ===================== FOCUS LENS ===================== */
.nxd .lens{display:flex;flex-direction:column;gap:12px}
.nxd .lens .day{font-size:.8rem;color:var(--nx-muted);font-weight:600}
.nxd .lens .big{font-size:1.9rem;font-weight:800;font-family:var(--nx-ff)}
.nxd .lens .row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--nx-border);font-size:.85rem}
.nxd .lens .row:last-of-type{border-bottom:none}
.nxd .lens .row b{font-weight:700;font-family:var(--nx-ff)}
.nxd .lens .gap{color:var(--warn)}
.nxd .lens .cta{margin-top:4px;padding:10px;border-radius:var(--radius-sm,10px);text-align:center;font-weight:700;font-size:.84rem;background:color-mix(in srgb,var(--nx-brand) 10%,transparent);color:var(--nx-brand);border:1px solid color-mix(in srgb,var(--nx-brand) 22%,transparent);cursor:pointer}

/* ===================== RING ===================== */
.nxd .ring{display:flex;flex-direction:column;align-items:center;gap:8px}
.nxd .ring .lab{color:var(--nx-muted);font-size:.82rem;font-weight:600;text-align:center}
.nxd .ring .meta{font-size:.78rem;color:var(--nx-muted);text-align:center}

/* ===================== BARS ===================== */
.nxd .bars{display:flex;flex-direction:column;gap:14px}
.nxd .brow .t{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;margin-bottom:6px}
.nxd .brow .t b{font-weight:700;font-family:var(--nx-ff)}
.nxd .trk{height:9px;border-radius:30px;background:color-mix(in srgb,var(--nx-text) 7%,transparent);overflow:hidden}
.nxd .trk i{display:block;height:100%;border-radius:30px;width:0;background:linear-gradient(90deg,var(--nx-brand),color-mix(in srgb,var(--nx-brand) 55%,var(--nx-accent)));transition:width 1s var(--nx-ease)}
.nxd .colbars{display:flex;align-items:flex-end;gap:14px;height:190px;padding-top:22px}
.nxd .colbars .cb{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end;min-width:0}
.nxd .colbars .cb .pair{display:flex;gap:7px;align-items:flex-end;width:100%;justify-content:center;flex:1}
.nxd .colbars .colbar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.nxd .colbars .cbv{font-size:.7rem;font-weight:800;color:var(--nx-text);font-variant-numeric:tabular-nums;line-height:1;min-height:.7rem}
.nxd .colbars .cbv-b{color:var(--nx-muted);font-weight:700}
.nxd .colbars .pair i{width:18px;border-radius:6px 6px 0 0;transition:height .9s var(--nx-ease);height:0;min-height:2px}
.nxd .colbars .pair i.a{background:linear-gradient(180deg,var(--nx-brand),color-mix(in srgb,var(--nx-brand) 72%,var(--nx-accent)))}
.nxd .colbars .pair i.b{background:color-mix(in srgb,var(--nx-accent) 55%,transparent)}
.nxd .colbars .lab{font-size:.76rem;color:var(--nx-muted);font-weight:700}

/* ===================== TABLE ===================== */
.nxd .tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.nxd .tbl th{text-align:start;color:var(--nx-muted);font-weight:700;font-size:.7rem;letter-spacing:.03em;padding:0 14px 11px;border-bottom:1px solid var(--nx-border)}
.nxd .tbl td{padding:11px 14px;border-bottom:1px solid var(--nx-border)}
.nxd .tbl tr:last-child td{border-bottom:none}
.nxd .tbl tbody tr{transition:background .15s}
.nxd .tbl tbody tr:hover{background:color-mix(in srgb,var(--nx-brand) 4%,transparent)}
.nxd .av{width:32px;height:32px;border-radius:var(--radius-sm,9px);display:grid;place-items:center;font-weight:700;font-size:.76rem;color:#fff;background:linear-gradient(135deg,var(--nx-brand),var(--nx-accent));flex:none}
.nxd .tav{display:flex;align-items:center;gap:10px}
.nxd .badge{display:inline-block;font-size:.7rem;font-weight:700;padding:4px 11px;border-radius:30px;white-space:nowrap}
.nxd .b-new{background:color-mix(in srgb,var(--nx-brand) 14%,transparent);color:var(--nx-brand)}
.nxd .b-lead{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.nxd .b-won{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.nxd .b-lost{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.nxd .on-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--ok);margin-inline-end:5px}
.nxd .off-dot{background:var(--nx-muted)}

/* ===================== DONUT ===================== */
.nxd .donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nxd .donut-legend{flex:1;min-width:120px;display:flex;flex-direction:column;gap:9px}
.nxd .donut-legend .dl{display:flex;align-items:center;gap:8px;font-size:.85rem}
.nxd .donut-legend .dl .sw{width:10px;height:10px;border-radius:3px}
.nxd .donut-legend .dl b{margin-inline-start:auto;font-weight:700;font-family:var(--nx-ff)}

/* ===================== ACTIVITY ===================== */
.nxd .act{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--nx-border)}
.nxd .act:last-child{border-bottom:none}
.nxd .act .t{font-size:.74rem;color:var(--nx-muted);font-weight:700;min-width:42px;font-family:var(--nx-ff)}
.nxd .act .dot{width:10px;height:10px;border-radius:50%;margin-top:3px;flex:none}
.nxd .act b{font-size:.86rem;font-weight:600}.nxd .act .s{font-size:.78rem;color:var(--nx-muted)}

/* ===================== FUNNEL ===================== */
.nxd .funnel{display:flex;flex-direction:column;gap:7px}
.nxd .funnel .fr{position:relative;padding:11px 14px;border-radius:var(--radius-sm,9px);color:#fff;font-size:.84rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.nxd .funnel .fr b{font-family:var(--nx-ff);font-weight:800}

/* ===================== MINI STAT LIST ===================== */
.nxd .statlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.nxd .statlist .si{position:relative;padding:15px 14px 14px;border-radius:var(--radius,12px);background:var(--nx-raised);border:1px solid var(--nx-border);display:flex;flex-direction:column;min-height:96px;text-align:center;overflow:hidden;transition:transform .2s var(--nx-ease),border-color .2s}
.nxd .statlist .si::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--nx-brand),var(--nx-accent));opacity:.85}
.nxd .statlist .si:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--nx-brand) 35%,var(--nx-border))}
.nxd .statlist .si .l{font-size:.75rem;color:var(--nx-muted);font-weight:600;min-height:2.4em;line-height:1.2;display:flex;align-items:center;justify-content:center}
.nxd .statlist .si .v{font-size:1.35rem;font-weight:800;margin-top:auto}
.nxd .statlist .si .v small{font-size:.7rem;color:var(--nx-muted);font-weight:600}

/* ===================== GOALS ===================== */
.nxd .goal{padding:14px;border-radius:var(--radius,13px);background:var(--nx-raised);border:1px solid var(--nx-border)}
.nxd .goal .n{display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:10px;font-size:.9rem}
.nxd .goal .gl2{font-size:.76rem;color:var(--nx-muted);display:flex;justify-content:space-between;margin:7px 0 4px}

/* ===================== TOP ROWS ===================== */
.nxd .panel>.rowfill{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:6px}
.nxd .toprow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--nx-border)}
.nxd .toprow:last-child{border-bottom:none}
.nxd .toprow .rank{width:23px;height:23px;border-radius:50%;background:color-mix(in srgb,var(--nx-brand) 13%,transparent);color:var(--nx-brand);display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.nxd .toprow .tn{flex:1;min-width:0}
.nxd .toprow .tn b{display:block;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxd .toprow .tn small{font-size:.72rem;color:var(--nx-muted)}
.nxd .toprow .tv{font-weight:700;flex:none}

/* ===================== QUEUE + DIALER (agent) ===================== */
.nxd .queue .qi{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--nx-border)}
.nxd .queue .qi:last-child{border-bottom:none}
.nxd .queue .qi .meta{flex:1}.nxd .queue .qi .nm{font-weight:600;font-size:.88rem}.nxd .queue .qi .sb{font-size:.76rem;color:var(--nx-muted)}
.nxd .qbtn{width:34px;height:34px;border-radius:var(--radius-sm,9px);display:grid;place-items:center;background:color-mix(in srgb,var(--nx-brand) 12%,transparent);color:var(--nx-brand)}
.nxd .dialwrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.nxd .dstats{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
.nxd .ds{background:var(--nx-raised);border:1px solid var(--nx-border);border-radius:var(--radius-sm,11px);padding:12px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.nxd .ds .dl{font-size:.74rem;color:var(--nx-muted);font-weight:600}
.nxd .ds .dv{font-size:1.2rem;font-weight:800;margin-top:5px}
.nxd .dialer{text-align:center;max-width:none;margin:0}
.nxd .dialer .num{font-size:1.35rem;font-weight:800;font-family:var(--nx-ff);direction:ltr;margin:2px 0 4px}
.nxd .dialer .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.nxd .dialer .keys button{aspect-ratio:1.5;border-radius:var(--radius-sm,10px);background:var(--nx-raised);border:1px solid var(--nx-border);font-size:.98rem;font-weight:700;transition:.15s}
.nxd .dialer .keys button:hover{background:color-mix(in srgb,var(--nx-brand) 10%,transparent)}
.nxd .dialer .call{width:100%;padding:11px;border-radius:var(--radius-sm,11px);background:var(--ok);color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:8px;border:none}
.nxd .dialer .call svg{width:17px;height:17px}
@media(max-width:620px){.nxd .dialwrap{grid-template-columns:1fr}}

/* ===================== GREETING HERO ===================== */
.nxd .greet{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(120deg,var(--nx-brand),color-mix(in srgb,var(--nx-brand) 72%,#000));border:none;color:#fff;overflow:hidden;position:relative}
.nxd .greet::after{content:"";position:absolute;inset-inline-start:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07)}
.nxd .greet .greet-txt h2{font-size:1.6rem;font-weight:800;margin:0}
.nxd .greet .gd{font-size:.86rem;opacity:.85;margin-top:5px}
.nxd .greet .greet-stats{display:flex;align-items:center;gap:26px;position:relative}
.nxd .greet .gs{text-align:center}
.nxd .greet .gs .gv{font-size:1.9rem;font-weight:800;font-family:var(--nx-ff)}
.nxd .greet .gs .gl{font-size:.76rem;opacity:.85;margin-top:2px}
@media(max-width:560px){.nxd .greet{flex-direction:column;align-items:flex-start}}

/* ===================== ANIMATIONS ===================== */
@keyframes nxdFadeIn{to{opacity:1}}
.nxd [data-reveal]{opacity:1}
@media (prefers-reduced-motion:no-preference){.nxd.motion-on [data-reveal]{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.nxd *,.nxd *::before,.nxd *::after{animation:none!important;transition:none!important}}

/* ===================== SYMMETRY & POLISH ===================== */
/* statsGrid / dashboardContent are plain blocks — the inner .grid controls layout */
.nxd #statsGrid,.nxd #dashboardContent{display:block}
/* equal-height panels within a grid row */
.nxd .grid{align-items:stretch}
.nxd .grid>.panel{height:100%}
/* donut: centered, fixed, legend aligned */
.nxd .donut-wrap{justify-content:center;gap:16px}
.nxd .donut-wrap>svg{flex:none}
.nxd .donut-legend{gap:8px}
.nxd .donut-legend .dl{justify-content:flex-start;gap:8px}
.nxd .donut-legend .dl b{margin-inline-start:auto}
/* panel header stays single-row, extras pinned to the side */
.nxd .ph{min-height:30px;gap:10px}
.nxd .ph .mut{flex:none;white-space:nowrap}
.nxd .ph h3{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* KPI uniformity */
.nxd .kpi .val{min-height:1.9rem}
/* chips alignment */
.nxd .badge .on-dot{vertical-align:middle;margin-inline-end:5px}
/* icon-buttons (gear/target/eye) get a sensible small svg size */
.nxd button svg{width:16px;height:16px;vertical-align:middle}
.nxd .ph-ic svg{width:15px;height:15px}
.nxd .ico svg{width:16px;height:16px}
.nxd .dialer .call svg{width:17px;height:17px}

/* ===================== ADVANCED KPI WIDGET (kpi-widget-v2) → Titanium ===================== */
.nxd .kpi-widget-v2{background:var(--nx-surface)!important;border:1px solid var(--nx-border)!important;border-radius:var(--nx-radius)!important;box-shadow:var(--nx-shadow)!important;padding:var(--nx-pad)!important}
.nxd .kpi-widget-v2-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;border:none!important}
.nxd .kpi-widget-v2-icon{width:30px;height:30px;color:var(--nx-brand)!important;background:color-mix(in srgb,var(--nx-brand) 12%,transparent)!important;border-radius:var(--radius-sm,9px);display:grid;place-items:center}
.nxd .kpi-widget-v2-icon svg{width:18px;height:18px}
.nxd .kpi-widget-v2-title{font-size:1rem;font-weight:700;font-family:var(--nx-ff);color:var(--nx-text)!important}
.nxd .kpi-widget-v2-sub{font-size:.8rem;color:var(--nx-muted)!important;font-weight:600;margin-inline-start:auto}
.nxd .kpi-widget-v2-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.nxd .kpi-widget-v2-metric{position:relative;padding:16px 14px 14px!important;border-radius:var(--radius,12px)!important;background:var(--nx-raised)!important;border:1px solid var(--nx-border)!important;overflow:hidden;transition:transform .2s var(--nx-ease),border-color .2s}
.nxd .kpi-widget-v2-metric::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--nx-brand),var(--nx-accent));opacity:.9}
.nxd .kpi-widget-v2-metric:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--nx-brand) 35%,var(--nx-border))!important}
.nxd .kpi-widget-v2-metric-label{font-size:.75rem;color:var(--nx-muted)!important;font-weight:600;margin-bottom:6px}
.nxd .kpi-widget-v2-metric-value{font-size:1.35rem;font-weight:800;font-family:var(--nx-ff);color:var(--nx-text)!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nxd .kpi-widget-v2-unit{font-size:.7rem;color:var(--nx-muted)!important;font-weight:600}
.nxd .kpi-widget-v2-progress{height:6px;border-radius:30px;background:color-mix(in srgb,var(--nx-text) 9%,transparent)!important;overflow:hidden;margin-top:9px}
.nxd .kpi-widget-v2-progress-bar{height:100%;border-radius:30px;background:linear-gradient(90deg,var(--nx-brand),var(--nx-accent))!important}
.nxd .kpi-widget-v2-footer{margin-top:14px;border-top:1px solid var(--nx-border)!important;padding-top:12px;display:flex;align-items:center;justify-content:center}
.nxd .kpi-widget-v2-footer button,.nxd .kpi-widget-v2-footer a{background:color-mix(in srgb,var(--nx-brand) 10%,transparent)!important;color:var(--nx-brand)!important;border:1px solid color-mix(in srgb,var(--nx-brand) 22%,transparent)!important;border-radius:var(--radius-sm,10px)!important;font-weight:700}

/* dashboard page-header → F7i6 sketch: role title + subtitle + range control */
.nxd .page-header{flex-wrap:wrap;gap:14px;align-items:flex-end}
.nxd .page-title{align-items:center}
.nxd .page-title-text{display:flex;flex-direction:column;gap:2px}
.nxd .page-title-text h1{margin:0}
.nxd .page-subtitle{font-size:.82rem;color:var(--nx-muted);font-weight:500}
.nxd .page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nxd .dash-range{flex:none}
@media(max-width:620px){.nxd .dash-range{order:3}}

/* ============================================================
   FULL KPI — "Performance Brief" (ChatGPT Titanium design, scoped)
   ============================================================ */
.kpi-full-overlay{position:fixed!important;inset:0!important;z-index:9999!important;overflow:auto!important;background:rgba(8,18,22,.45)!important;padding:0!important;display:block!important}
.nx-kpi{--bg:#f2f6f6;--surface:#fff;--alt:#eaf1f1;--text:#162e35;--muted:#536b72;--line:#cbdadc;--action:#006b69;--good:#176940;--watch:#805500;--hero:#102f37;
  background:var(--bg);color:var(--text);font:15px/1.55 Arial,"Segoe UI",sans-serif;min-height:100vh}
.nx-kpi[data-theme="dark"]{--bg:#0d1b20;--surface:#14282e;--alt:#20383f;--text:#edf6f5;--muted:#abc3c8;--line:#425e67;--action:#00d1c9;--good:#77deb0;--watch:#f2c775;--hero:#163b42}
.nx-kpi .numeric{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.nx-kpi .nxk-head{position:sticky;top:0;z-index:3;padding:15px clamp(16px,3vw,28px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border-bottom:1px solid var(--line)}
.nx-kpi .nxk-head h1{font-size:21px;margin:4px 0;font-weight:800}
.nx-kpi .nxk-brand{letter-spacing:3px;font-size:11px;color:var(--action);font-weight:700}
/* true-center the title regardless of the (unequal-width) back button / controls on either side, in both LTR and RTL */
.nx-kpi .nxk-titlewrap{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none}
.nx-kpi .nxk-ctl{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.nx-kpi .nxk-ctl select,.nx-kpi .nxk-ctl button{font:inherit;padding:8px 13px;border-radius:var(--radius-sm,10px);border:1px solid var(--line);background:var(--surface);color:inherit;cursor:pointer;min-height:40px}
.nx-kpi .nxk-ctl button:hover,.nx-kpi .nxk-ctl select:hover{border-color:color-mix(in srgb,var(--action) 45%,var(--line))}
.nx-kpi main{max-width:1480px;margin:auto;padding:clamp(14px,2.5vw,28px)}
.nx-kpi .notice{color:var(--muted);font-size:13px;margin-bottom:18px;background:var(--alt);border:1px solid var(--line);border-radius:var(--radius,12px);padding:9px 14px}
.nx-kpi .hero{border-radius:24px;background:var(--hero);color:#f0f7f7;padding:30px;display:grid;grid-template-columns:1.7fr 1fr;gap:30px;position:relative;overflow:hidden;border:1px solid #32606a}
.nx-kpi .hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 5% 0,rgba(0,209,201,.14),transparent 60%);pointer-events:none}
.nx-kpi .hero>*{position:relative}
.nx-kpi .hero h2{font-size:28px;margin:10px 0;font-weight:800}
.nx-kpi .hero p{color:#c1d9dc;margin:8px 0}
.nx-kpi .pill{display:inline-block;background:#245058;color:#c1f3ec;border:1px solid #41717a;border-radius:30px;padding:5px 12px;font-size:12px;font-weight:600}
.nx-kpi .hero-num{font-size:clamp(40px,7vw,54px);line-height:1.2;font-weight:800;display:block;margin:8px 0}
.nx-kpi .hero-side{border-inline-start:1px solid #45666d;padding-inline-start:30px}
.nx-kpi .hero-side summary{color:#79e5da}
.nx-kpi .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0}
.nx-kpi .card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg,18px);padding:22px}
.nx-kpi .card h2{font-size:17px;margin:0 0 16px;font-weight:700}
.nx-kpi .label,.nx-kpi .muted{color:var(--muted)}
.nx-kpi .value{font-size:clamp(1.6rem,4vw,30px);font-weight:800;display:block;margin:10px 0 5px}
.nx-kpi .small{font-size:12px;color:var(--muted)}
.nx-kpi .two{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin:20px 0}
.nx-kpi .two.equal{grid-template-columns:1fr 1fr}
.nx-kpi .chart{width:100%;height:auto;display:block;color:var(--muted)}
.nx-kpi .chart text{fill:currentColor;font-size:12px}
.nx-kpi .chart .gridline{stroke:var(--line);stroke-dasharray:3 5}
.nx-kpi .chart .series{stroke:var(--action);stroke-width:3;fill:none;stroke-linecap:round}
.nx-kpi .chart .point{fill:var(--surface);stroke:var(--action);stroke-width:2}
.nx-kpi .ring-wrap{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.nx-kpi .ring{width:170px;max-width:60vw}
.nx-kpi .ring text{fill:var(--text);font-size:24px;font-weight:800}
.nx-kpi .track{stroke:var(--alt);fill:none;stroke-width:11}
.nx-kpi .progress{stroke:var(--action);fill:none;stroke-width:11;stroke-linecap:round;transform:rotate(-90deg);transform-origin:90px 90px;transition:stroke-dasharray .7s cubic-bezier(.22,1,.36,1)}
.nx-kpi .stat-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
.nx-kpi .bar-row{margin:18px 0}
.nx-kpi .bar-top{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.nx-kpi .bar-track{height:9px;background:var(--alt);border-radius:var(--radius-sm,8px);margin-top:9px;overflow:hidden}
.nx-kpi .bar-fill{height:100%;background:linear-gradient(90deg,var(--action),#00d1c9);border-radius:var(--radius-sm,8px);transition:width .7s cubic-bezier(.22,1,.36,1)}
.nx-kpi .daily{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.nx-kpi .day{text-align:center;min-width:0}
.nx-kpi .daybox{height:100px;background:var(--alt);border-radius:var(--radius-sm,8px);position:relative;margin:8px 0;overflow:hidden}
.nx-kpi .daybar{position:absolute;bottom:0;left:22%;width:56%;background:linear-gradient(var(--action),#00d1c9);border-radius:5px 5px 0 0;transition:height .7s cubic-bezier(.22,1,.36,1)}
.nx-kpi .daybar.hit{background:linear-gradient(var(--good),#2bb46e)}
.nx-kpi .goal-line{position:absolute;left:0;right:0;border-top:2px dashed var(--watch)}
.nx-kpi .table-wrap{overflow-x:auto}
.nx-kpi table{width:100%;border-collapse:collapse;font-size:14px}
.nx-kpi th{text-align:start;color:var(--muted);font-weight:600}
.nx-kpi th,.nx-kpi td{padding:13px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
/* numeric columns: right-align data so it lines up under the (RTL) headers */
.nx-kpi td.numeric{text-align:end}
.nx-kpi th.numeric{text-align:start}
.nx-kpi .table-wrap table{table-layout:auto}
.nx-kpi tbody tr:hover td{background:color-mix(in srgb,var(--action) 6%,transparent)}
.nx-kpi .av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary,#009391),var(--secondary,#00d1c9));color:#fff;font-weight:700;font-size:12px;margin-inline-end:8px;vertical-align:middle}
.nx-kpi .good{color:var(--good);font-weight:700}.nx-kpi .watch{color:var(--watch)}.nx-kpi .bad{color:#c0392f;font-weight:700}
.nx-kpi .sechd{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted);margin:22px 2px 2px}
.nx-kpi details{margin-top:12px;font-size:13px}
.nx-kpi summary{cursor:pointer;color:var(--action);padding:6px 0}
.nx-kpi footer{font-size:12px;color:var(--muted);padding:26px 0;text-align:center}
.nx-kpi .clk{cursor:pointer}.nx-kpi .clk:hover{border-color:color-mix(in srgb,var(--action) 45%,var(--line))}
.nx-kpi .hero-num,.nx-kpi .value{opacity:0;animation:nxkEnter .45s ease forwards}
@keyframes nxkEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:900px){.nx-kpi .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.nx-kpi .two,.nx-kpi .two.equal{grid-template-columns:1fr}.nx-kpi .hero{grid-template-columns:1fr}.nx-kpi .hero-side{border:0;padding:0}}
@media(max-width:540px){.nx-kpi .grid4{grid-template-columns:1fr}.nx-kpi .daily{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.nx-kpi *,.nx-kpi *:before{animation:none!important;transition:none!important}.nx-kpi .hero-num,.nx-kpi .value{opacity:1}}

/* KPI overlay header — prominent back + close (RTL-first) */
.nx-kpi .nxk-head{gap:12px}
.nx-kpi .nxk-titlewrap{flex:1;min-width:0;text-align:center}
.nx-kpi .nxk-back{display:inline-flex;align-items:center;gap:7px;background:var(--action);color:#fff!important;border:none;border-radius:var(--radius-sm,11px);padding:9px 16px;font:inherit;font-weight:800;cursor:pointer;min-height:42px;flex:none;box-shadow:0 4px 14px color-mix(in srgb,var(--action) 35%,transparent)}
.nx-kpi .nxk-back svg{width:18px;height:18px}
.nx-kpi .nxk-back:hover{filter:brightness(1.08)}
.nx-kpi .nxk-close{font-size:22px;line-height:1;width:42px;min-height:42px;padding:0;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:640px){
  .nx-kpi .nxk-titlewrap{display:none}
  .nx-kpi .nxk-head{justify-content:space-between}
}

/* Conversion funnel (sketch F7i6) */
.nxd .funnel{display:flex;flex-direction:column;gap:7px}
.nxd .funnel .fr{position:relative;padding:11px 14px;border-radius:var(--radius-sm,9px);color:#fff;font-size:.84rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;min-width:0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.nxd .funnel .fr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxd .funnel .fr b{font-weight:800;font-variant-numeric:tabular-nums;flex:none}

/* Agent goal cards — contained header, photo, circular gauge, symmetry (sketch F7i6) */
.nxd .goals-sub{grid-template-columns:repeat(auto-fill,minmax(198px,1fr))}
.nxd .goal{padding:13px;border-radius:var(--radius,14px);background:var(--nx-raised);border:1px solid var(--nx-border);display:flex;flex-direction:column;overflow:hidden;transition:transform .2s var(--nx-ease),border-color .2s,box-shadow .2s}
.nxd .goal:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--nx-brand) 35%,var(--nx-border));box-shadow:var(--nx-shadow)}
.nxd .goal .gtitle{font-size:.78rem;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-bottom:10px;letter-spacing:-.01em}
.nxd .goal .gtop2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.nxd .goal .gidt{display:flex;align-items:center;gap:8px;min-width:0}
.nxd .goal .gav{width:38px;height:38px;flex:none;overflow:hidden}
.nxd .goal .gav img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.nxd .goal .gteam{font-size:.68rem;color:var(--nx-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxd .goal .gact{display:flex;gap:2px;flex:none;align-items:center}
.nxd .gring-wrap{position:relative;width:76px;height:76px;margin:2px auto 12px}
.nxd .gring-wrap .gring{width:76px;height:76px;display:block}
.nxd .gring-trk{fill:none;stroke:color-mix(in srgb,var(--nx-text) 9%,transparent);stroke-width:8}
.nxd .gring-arc{fill:none;stroke:var(--nx-brand);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--nx-ease);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--nx-brand) 35%,transparent))}
.nxd .gring-ctr{position:absolute;inset:0;display:grid;place-items:center;flex-direction:column}
.nxd .gring-ctr b{font-size:1.05rem;font-weight:800;color:var(--nx-text);font-variant-numeric:tabular-nums}

/* Agent-goals: sort/group controls + grouping */
.nxd .ag-ctls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nxd .ag-ctl{font:inherit;font-size:.76rem;font-weight:600;padding:7px 11px;border-radius:var(--radius-sm,9px);border:1px solid var(--nx-border);background:var(--nx-surface);color:var(--nx-text);cursor:pointer;min-height:34px}
.nxd .ag-ctl:hover{border-color:color-mix(in srgb,var(--nx-brand) 40%,var(--nx-border))}
.nxd .ag-group+.ag-group{margin-top:20px}
.nxd .ag-ghead{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.86rem;color:var(--nx-text);margin:2px 2px 12px;padding-bottom:9px;border-bottom:1px solid var(--nx-border)}
.nxd .ag-gcount{font-size:.68rem;font-weight:800;color:var(--nx-brand);background:color-mix(in srgb,var(--nx-brand) 12%,transparent);border-radius:20px;padding:2px 10px}