/* ============================================================
   BD Pipeline — Mars & Co brand styles (v2 refresh)
   ============================================================ */
@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --red:#ca3832; --red-d:#a92c27; --red-soft:#fbeeed;
  --ink:#16110f; --ink-2:#4d5358; --gray:#8b9197; --line:#e8e9e6; --line-2:#f0f1ee;
  --bg:#f6f7f3; --card:#ffffff; --card-2:#f3f4ef; --input-bg:#ffffff; --col-bg:#eeefe9; --hover:#f3f4ef; --slate:#303c42;
  --topbar-bg:rgba(246,247,243,.85); --overlay:rgba(22,17,15,.45);
  --green:#33d34f; --green-d:#1ba94c; --orange:#ff9f43; --orange-d:#e07f1f; --purple:#bb69f9; --blue:#5b8def; --lost:#cb423c;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(22,17,15,.04), 0 2px 8px rgba(22,17,15,.04);
  --shadow-lg:0 6px 24px rgba(22,17,15,.09);
  --sidebar-w:256px;
  --font-head:'Manrope','Aeonik',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-body:'DM Sans','Aeonik',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
/* ---- dark theme: same variable contract, dark values ---- */
body[data-theme="dark"]{
  --red:#F04444; --red-d:#B91C2C; --red-soft:#2A1418;
  --ink:#F7F7F8; --ink-2:#C7CAD1; --gray:#8F929D; --line:#282A31; --line-2:#202229;
  --bg:#0B0C0F; --card:#121317; --card-2:#18191E; --input-bg:#15161B; --col-bg:#101116; --hover:#1B1C22; --slate:#2A2C33;
  --topbar-bg:rgba(13,14,17,.82); --overlay:rgba(0,0,0,.6);
  --green:#53C992; --green-d:#3DAE7B; --orange:#F0A53B; --orange-d:#D98A1F; --purple:#bb69f9; --blue:#6f9bff; --lost:#F0606A;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .2s,color .2s}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;font-family:var(--font-head)}
.tile .value,.kcard .kv,.period-label{font-family:var(--font-head)}
.muted{color:var(--gray)}
small{font-size:12px}
::selection{background:rgba(202,56,50,.18)}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;height:100vh;z-index:20}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 18px 18px;border-bottom:1px solid var(--line-2)}
.brand-logo{display:block;line-height:0}
.brand img{width:150px;max-width:100%;height:auto;display:block}
.brand-sub{display:block;width:160px;max-width:100%;box-sizing:border-box;text-align:center;white-space:nowrap;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700;background:var(--red-soft);padding:5px 0;border-radius:7px}
.nav{display:flex;flex-direction:column;gap:3px;padding:14px 12px;flex:1;overflow-y:auto}
.nav-link{position:relative;display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:13.5px;transition:.14s}
.nav-link svg{width:19px;height:19px;flex:none;opacity:.7;transition:.14s}
.nav-link:hover{background:var(--line-2);color:var(--ink)}
.nav-link:hover svg{opacity:1}
.nav-link.active{background:var(--red-soft);color:var(--red);font-weight:700}
.nav-link.active svg{opacity:1;color:var(--red)}
.nav-link.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--red);border-radius:0 4px 4px 0}
.nav-group{padding:15px 13px 5px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
.nav-group:first-child{padding-top:2px}
body[data-theme="dark"] .brand img{filter:brightness(0) invert(1) drop-shadow(0 0 1px var(--red)) drop-shadow(0 0 4px var(--red));opacity:.9}
.side-user{display:flex;align-items:center;gap:11px;padding:14px 16px;border-top:1px solid var(--line)}
.su-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.su-meta strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-meta small{color:var(--gray)}
.avatar{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none;box-shadow:var(--shadow)}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--gray);font-size:18px;padding:5px 7px;border-radius:8px;transition:.14s}
.icon-btn:hover{color:var(--red);background:var(--red-soft)}
.logout-form{margin:0}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 30px;background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}
.topbar h1{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.back-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:19px;line-height:1;cursor:pointer;transition:.14s;flex:none;text-decoration:none}
.back-btn:hover{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 28%,var(--card));color:var(--red)}
.hamburger{display:none;background:var(--card);border:1px solid var(--line);border-radius:9px;width:38px;height:38px;font-size:17px;line-height:1;cursor:pointer;color:var(--ink-2);flex:none}
.topbar-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.content{padding:26px 30px 70px;flex:1;max-width:1400px;width:100%}
body[data-page="board"] .content,body[data-page="calendar"] .content,body[data-page="receivables"] .content,body[data-page="forecast"] .content,body[data-page="transactions"] .content,body[data-page="sheet"] .content,body[data-page="vat"] .content,body[data-page="commissions"] .content,body[data-page="reports"] .content,body[data-page="ar_detail"] .content,body[data-page="month"] .content,body[data-page="projects"] .content{max-width:none}   /* wide kanban/matrices/tables use the full window (no dark void on the right) */
/* Transactions: pin the Amount column so the key figure stays visible while the rest scrolls (main ledger table only) */
.tx-tablewrap .tbl th:last-child,.tx-tablewrap .tbl td:last-child{position:sticky;right:0}
.tx-tablewrap .tbl tbody td:last-child{background:var(--card)}
.tx-tablewrap .tbl tbody tr:hover td:last-child{background:var(--hover)}
.tx-tablewrap .tbl tr.tx-grp td:last-child{background:var(--line-2)}
.tx-tablewrap .tbl tfoot td:last-child{background:var(--card-2)}
.tx-tablewrap .tbl thead th:last-child{background:var(--card-2);z-index:6}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.14s;white-space:nowrap}
.btn:hover{border-color:var(--line);background:var(--hover);box-shadow:var(--shadow)}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d);box-shadow:0 4px 14px rgba(202,56,50,.28)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--line-2)}
.btn-danger{color:var(--lost);border-color:color-mix(in srgb,var(--lost) 32%,var(--card));background:var(--card)}
.btn-danger:hover{background:var(--red-soft)}
.btn-success{background:var(--green-d);border-color:var(--green-d);color:#fff}
.btn-success:hover{background:#178b3f}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--bc) 13%,var(--card));color:var(--bc);border:1px solid color-mix(in srgb,var(--bc) 26%,var(--card))}
a.badge{text-decoration:none;cursor:pointer;transition:background .15s ease,transform .12s ease}
a.badge:hover{background:color-mix(in srgb,var(--bc) 24%,var(--card))}
a.badge:active{transform:scale(.96)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--bc)}
.tag{display:inline-block;padding:3px 9px;border-radius:7px;background:var(--line-2);color:var(--ink-2);font-size:11px;font-weight:600}
.tier{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10.5px;font-weight:700;background:color-mix(in srgb,var(--gray) 14%,var(--card));color:var(--ink-2);border:1px solid color-mix(in srgb,var(--gray) 30%,var(--card))}
.tier[data-t="1"]{background:color-mix(in srgb,var(--red) 15%,var(--card));color:var(--red-d);border-color:color-mix(in srgb,var(--red) 38%,var(--card))}
.tier[data-t="2"]{background:color-mix(in srgb,var(--orange) 20%,var(--card));color:var(--orange-d);border-color:color-mix(in srgb,var(--orange) 40%,var(--card))}
.tier[data-t="3"]{background:color-mix(in srgb,var(--blue) 15%,var(--card));color:var(--blue);border-color:color-mix(in srgb,var(--blue) 34%,var(--card))}
.tier[data-t="4"]{background:color-mix(in srgb,var(--gray) 14%,var(--card));color:var(--gray);border-color:color-mix(in srgb,var(--gray) 30%,var(--card))}

/* ---------- cards / tiles ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.grid{display:grid;gap:18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);overflow:hidden;transition:.16s}
.tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.tile .label{font-size:11.5px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tile .value{font-size:28px;font-weight:700;margin-top:8px;letter-spacing:-.025em;line-height:1.1}
.tile .sub{font-size:12px;color:var(--gray);margin-top:5px}
.tile::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gray);opacity:.85}
.tile.accent-red::after{background:var(--red)}
.tile.accent-green::after{background:var(--green-d)}
.tile.accent-orange::after{background:var(--orange)}
.tile.accent-slate::after{background:var(--slate)}
/* clickable toggle tiles (e.g. Reports → Bookings vs Collections) */
button.tile{font:inherit;text-align:left;width:100%;color:inherit;appearance:none;-webkit-appearance:none}
.tile.rtab{cursor:pointer;opacity:.55}
.tile.rtab:hover{opacity:.85}
.tile.rtab .rtab-cue{font-size:11px;opacity:.55;transition:.16s}
.tile.rtab.on{opacity:1;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ink) 20%,var(--card)),var(--shadow)}
.tile.rtab.on .rtab-cue{opacity:1;transform:translateX(3px)}

/* sales targets — ring gauges */
.tgt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.tgt-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.tgt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;width:100%}
.tgt-head > div{text-align:left}
.tgt-label{font-weight:700;font-size:15px;font-family:var(--font-head)}
.tgt-sub{font-size:11px;color:var(--gray);margin-top:1px}
.tgt-ring-wrap{margin:8px 0 2px}
.tgt-ring{width:132px;height:132px;display:block}
.tgt-ring-pct{font-family:var(--font-head);font-weight:800;font-size:27px;fill:var(--ink)}
.tgt-figs{font-size:14px;color:var(--ink-2)}
.tgt-figs strong{font-size:19px;font-family:var(--font-head);color:var(--ink)}
.tgt-meta{font-size:12.5px;color:var(--ink-2);min-height:18px}

/* compact secondary metric strip (BD dashboard head) */
.statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:14px}
.statbar .s{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.statbar .s .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray);font-weight:600}
.statbar .s .v{font-size:19px;font-weight:700;font-family:var(--font-head);letter-spacing:-.02em;line-height:1.15}
.statbar .s .d{font-size:11px;color:var(--gray)}
.statbar .s.warn .v{color:var(--lost)}
.statbar .s.warn{border-color:color-mix(in srgb,var(--lost) 35%,var(--line))}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:30px 0 14px}
.section-title h2{font-size:16px}

/* ---------- tables ---------- */
/* height-bounded scroll box: wide tables get a horizontal scrollbar that stays within the
   viewport (not stranded below a tall table), and tall tables scroll vertically with a sticky header */
.table-wrap{overflow:auto;max-height:calc(100vh - 170px);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.table-wrap .tbl thead th{position:sticky;top:0;z-index:4}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);font-weight:700;background:var(--card-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:.1s}
.tbl tbody tr:hover{background:var(--hover)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.row-total td{font-weight:700;background:var(--card-2);border-top:2px solid var(--line)}
.tbl tr.row-total:hover td{background:var(--card-2)}
/* legacy quick-action buttons (board cards + projects rows) */
.dc-legacy,.row-legacy{background:none;border:1px solid var(--line);color:var(--gray);font-size:10.5px;padding:1px 7px;border-radius:6px;cursor:pointer;line-height:1.6;white-space:nowrap}
.dc-legacy:hover,.row-legacy:hover{border-color:var(--slate,#7a8699);color:var(--ink)}
.row-legacy{margin-left:8px;opacity:.55}
tr:hover .row-legacy{opacity:1}
.dc-legacy{margin-left:auto}
/* Projects: freeze the column headers — the grouped list scrolls inside its own box */
body[data-page="projects"] .proj-freeze{overflow:auto;max-height:calc(100vh - 150px)}
body[data-page="projects"] .proj-freeze .table-wrap{overflow:visible;max-height:none}
body[data-page="projects"] .proj-freeze .tbl thead th{position:sticky;top:0;z-index:6;box-shadow:0 1px 0 var(--line-2)}
/* Projects page polish: section headers, modality sub-tables, collection bars */
.proj-head h2{display:flex;align-items:center;gap:9px;font-size:16px}
.proj-mod{margin:16px 0 8px}
.proj-mod h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);font-weight:700;display:flex;align-items:center;gap:8px}
.proj-count{background:var(--card-2);border:1px solid var(--line);color:var(--ink-2);font-size:11px;font-weight:700;padding:0 8px;border-radius:999px;line-height:18px}
.proj-empty{font-size:12.5px;padding:11px 14px;border:1px dashed var(--line);border-radius:var(--radius);margin-bottom:16px}
.proj-meta{display:flex;align-items:center;gap:8px;margin-top:5px}
.proj-tbl td{vertical-align:middle}
.tag.sm{font-size:10px;padding:1px 7px}
.collcell{min-width:160px}
.collbar-row{display:flex;align-items:center;gap:8px}
.collbar{flex:1;min-width:64px;height:6px;border-radius:999px;background:var(--line-2);overflow:hidden}
.collbar i{display:block;height:100%;border-radius:999px;background:var(--green-d)}
.nowrap{white-space:nowrap}
.right{text-align:right} .center{text-align:center}
.linklike{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.linklike:hover{color:var(--red);text-decoration:underline}
.tip-pop{position:fixed;z-index:200;display:none;max-width:300px;white-space:pre-line;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-lg);padding:8px 11px;font-size:12px;line-height:1.5;pointer-events:none}
.mtx td.cl[data-tip]{cursor:help}
.mtx-i{color:var(--gray);font-size:10px;vertical-align:top}

/* ---------- forms ---------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:13px;color:var(--ink-2)}
input,select,textarea{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg);color:var(--ink);margin-top:6px;transition:.14s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(202,56,50,.13)}
textarea{resize:vertical;min-height:78px}
.check{display:flex;align-items:center;gap:9px;font-weight:600;cursor:pointer}
.check input{width:auto;margin:0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}
.form-grid .full{grid-column:1/-1}
.help{font-size:12px;color:var(--gray);margin-top:-6px;margin-bottom:13px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 20px}
legend{font-weight:700;font-size:13px;padding:0 8px;color:var(--ink)}

/* ---------- alerts ---------- */
.alert{padding:12px 16px;border-radius:11px;font-size:13px;margin-bottom:18px;border:1px solid;font-weight:500}
.alert.ok{background:color-mix(in srgb,var(--green-d) 13%,var(--card));border-color:color-mix(in srgb,var(--green-d) 32%,var(--card));color:var(--green-d)}
.alert.err{background:color-mix(in srgb,var(--lost) 13%,var(--card));border-color:color-mix(in srgb,var(--lost) 32%,var(--card));color:var(--lost)}
.alert.warn{background:color-mix(in srgb,var(--orange) 14%,var(--card));border-color:color-mix(in srgb,var(--orange) 34%,var(--card));color:var(--orange-d)}

/* ---------- auth ---------- */
.auth-body{display:grid;place-items:center;min-height:100vh;background:radial-gradient(1200px 500px at 50% -10%, var(--card), var(--bg))}
.auth-card{width:380px;max-width:92vw;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:38px 34px;text-align:center}
.auth-logo{height:54px;margin-bottom:22px}
.auth-card h1{font-size:23px}
.auth-card p{margin:7px 0 22px}
.auth-card form{text-align:left}
.auth-card label{margin-bottom:15px}
.auth-card .alert{text-align:left}

/* ============================================================
   PIPELINE BOARD
   ============================================================ */
.board{display:flex;gap:15px;overflow-x:auto;padding-bottom:20px;align-items:flex-start}
.col{flex:0 0 282px;background:var(--col-bg);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;max-height:calc(100vh - 156px)}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 11px;border-top:3px solid var(--sc,var(--gray));border-radius:var(--radius) var(--radius) 0 0}
.col-head .ch-left{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.col-head .count{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:11px;color:var(--ink-2);font-weight:700}
.col-sum{font-size:11.5px;color:var(--gray);padding:0 15px 10px;font-weight:600}
.col-body{padding:11px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;min-height:60px}
.col.drop-target{outline:2px dashed var(--red);outline-offset:-3px}
.col.drop-target .col-body{background:rgba(202,56,50,.04);border-radius:10px}
.col.lost-col{background:var(--red-soft)}
.col.hold-col{background:color-mix(in srgb,var(--orange) 12%,var(--card))}

.deal-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;box-shadow:var(--shadow);cursor:grab;transition:.12s}
/* tier accent stripe on the left edge — instant priority read (T1 hot → T4 muted) */
.deal-card[data-tier]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:12px 0 0 12px;background:var(--gray)}
.deal-card[data-tier="1"]::before{background:var(--red)}
.deal-card[data-tier="2"]::before{background:var(--orange-d)}
.deal-card[data-tier="3"]::before{background:var(--blue)}
.deal-card[data-tier="4"]::before{background:var(--gray)}
/* tier filter chips (board toolbar) */
.tier-filter{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.tier-filter .tf-label{font-size:11.5px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.tchip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:8px;font-size:12px;font-weight:700;border:1px solid var(--line);color:var(--ink-2);background:var(--card);text-decoration:none;line-height:1;transition:.12s}
.tchip:hover{border-color:var(--gray)}
.tchip.big,.tchip.clear{font-weight:600}
.tchip.clear{color:var(--gray)}
.tchip.t1.on{background:color-mix(in srgb,var(--red) 15%,var(--card));color:var(--red-d);border-color:color-mix(in srgb,var(--red) 40%,var(--card))}
.tchip.t2.on{background:color-mix(in srgb,var(--orange) 20%,var(--card));color:var(--orange-d);border-color:color-mix(in srgb,var(--orange) 42%,var(--card))}
.tchip.t3.on{background:color-mix(in srgb,var(--blue) 15%,var(--card));color:var(--blue);border-color:color-mix(in srgb,var(--blue) 36%,var(--card))}
.tchip.t4.on{background:color-mix(in srgb,var(--gray) 16%,var(--card));color:var(--ink-2);border-color:color-mix(in srgb,var(--gray) 36%,var(--card))}
.tchip.big.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
/* board filter bar — moved out of the topbar so the page title is never squeezed */
.board-filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px}
/* deal priority flag (board cards + deal page) — only High/Urgent are shown */
.prio{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:6px;font-size:10px;font-weight:700;line-height:1.55;white-space:nowrap;flex:none}
.prio.normal{background:color-mix(in srgb,var(--gray) 14%,var(--card));color:var(--gray);border:1px solid color-mix(in srgb,var(--gray) 30%,var(--card))}
.prio.high{background:color-mix(in srgb,var(--orange) 18%,var(--card));color:var(--orange-d);border:1px solid color-mix(in srgb,var(--orange) 40%,var(--card))}
.prio.urgent{background:var(--red);color:#fff;border:1px solid var(--red-d)}
/* horizontal scroll slider — THE canonical left↔right scroll slider (board, lists, clients…).
   Reference style (from the Pipeline List page). Use class .pl-slide + data-target="…" (wired in app.js). */
.pl-slide{display:none;align-items:center;gap:10px;margin:0 0 10px}
.pl-slide.on{display:flex}
.pl-slide .ar{font-size:13px;color:var(--gray);user-select:none;line-height:1}
.pl-slide input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:7px;border-radius:7px;background:var(--line-2);border:1px solid var(--line);outline:none;cursor:pointer;margin:0}
.pl-slide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:46px;height:15px;border-radius:9px;background:var(--red);border:none;box-shadow:0 1px 3px rgba(0,0,0,.28);cursor:grab}
.pl-slide input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
.pl-slide input[type=range]::-moz-range-thumb{width:46px;height:15px;border-radius:9px;background:var(--red);border:none;box-shadow:0 1px 3px rgba(0,0,0,.28);cursor:grab}
.pl-slide input[type=range]::-moz-range-track{height:7px;border-radius:7px;background:var(--line-2)}
.deal-card:hover{border-color:var(--line);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.deal-card[draggable=true]{cursor:grab}
.deal-card.dragging{opacity:.45;transform:rotate(1.5deg);cursor:grabbing}
.dc-added{background:transparent;color:var(--gray);font-weight:500;padding-left:0;padding-right:0}
.deal-card .dc-title{font-weight:700;font-size:13px;line-height:1.3;letter-spacing:-.01em}
.deal-card .dc-client{font-size:12px;color:var(--gray);margin-top:3px}
.deal-card .dc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:11px;gap:6px}
.deal-card .dc-value{font-weight:700;font-size:14px}
.deal-card .dc-foot{display:flex;align-items:center;gap:6px;margin-top:11px;flex-wrap:wrap}
.mini-avatar{width:22px;height:22px;border-radius:7px;background:var(--slate);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700}
.deal-card.compact{padding:10px 12px}
.deal-card.compact .dc-title{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.board.is-compact .col{flex:0 0 228px}
.dc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--card-2);color:var(--ink-2);border:1px solid var(--line)}
.upsell-flag{font-size:10px;color:var(--green-d);font-weight:700}
/* ---- activity tracking: next action + red attention flag ---- */
.deal-card .dc-next{display:flex;align-items:center;gap:7px;width:100%;margin-top:10px;padding:6px 9px;font-size:12px;text-align:left;font-family:inherit;background:var(--card-2);border:1px solid var(--line);border-radius:8px;color:var(--ink-2);cursor:pointer;transition:.12s}
.deal-card .dc-next:hover{border-color:var(--red);color:var(--ink)}
.deal-card .dc-next .na-ico{color:var(--red);font-weight:800;line-height:1}
.deal-card .dc-next .na-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-card .dc-next .na-txt.na-set{font-weight:600}
.deal-card .dc-next .na-date{font-weight:700;color:var(--gray);white-space:nowrap}
.deal-card .dc-next.empty{background:transparent;border-style:dashed;color:var(--gray)}
.deal-card .dc-next.empty .na-ico{color:var(--gray)}
.deal-card .dc-next.over{background:color-mix(in srgb,var(--lost) 10%,transparent);border-color:color-mix(in srgb,var(--lost) 40%,var(--line))}
.deal-card .dc-next.over .na-ico,.deal-card .dc-next.over .na-date{color:var(--lost)}
.dc-stale{background:color-mix(in srgb,var(--lost) 12%,transparent)!important;color:var(--lost)!important;border-color:color-mix(in srgb,var(--lost) 35%,var(--line))!important;font-weight:600}
.deal-card.na-flag{border-color:color-mix(in srgb,var(--lost) 50%,var(--line))}
.deal-card.na-flag::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;border-radius:0 12px 12px 0;background:var(--lost)}
.deal-card.compact .na-dot{width:8px;height:8px;border-radius:50%;background:var(--lost);flex:0 0 auto;box-shadow:0 0 0 2px color-mix(in srgb,var(--lost) 22%,transparent)}
.na-lc-row{display:flex;gap:6px;align-items:center}
.na-lc-row input{flex:1}
/* ---- board List view (3rd toggle next to Detailed/Compact) ---- */
.bl tbody td{padding:5px 14px;vertical-align:middle;line-height:1.3}
.bl tbody td.bl-proj{max-width:520px;overflow:hidden;text-overflow:ellipsis}
.bl tbody td.bl-proj a.strong{font-size:13px}
.bl tbody td .bl-cl{margin-left:7px;font-size:11.5px}
.bl tbody tr.bl-row{cursor:pointer}
.bl tbody tr.bl-row:hover>td{background:color-mix(in srgb,var(--red) 6%,transparent)}
.bl tbody tr.bl-stage td{background:var(--line-2);font-size:12px;padding:7px 12px;border-top:1px solid var(--line)}
.bl tbody tr.bl-stage .dot{margin-right:5px}
.bl tbody tr.bl-flag>td:first-child{box-shadow:inset 3px 0 0 var(--lost)}
.bl-next{display:inline-flex;align-items:center;gap:6px;max-width:280px;font-family:inherit;font-size:12px;line-height:1.2;text-align:left;background:var(--card-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer;color:var(--ink-2);transition:.12s}
.bl-next:hover{border-color:var(--red);color:var(--ink)}
.bl-next .na-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-next .na-date{font-weight:700;color:var(--gray);white-space:nowrap}
.bl-next .na-set{color:var(--gray);font-weight:600}
.bl-next.empty{background:transparent;border-style:dashed;color:var(--gray)}
.bl-next.over{background:color-mix(in srgb,var(--lost) 10%,transparent);border-color:color-mix(in srgb,var(--lost) 40%,var(--line))}
.bl-next.over .na-date{color:var(--lost)}
.bl-stuck{color:var(--lost);font-weight:700}

/* ---------- progress / bars ---------- */
.progress{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--green-d),var(--green));border-radius:999px}
.bar-row{display:grid;grid-template-columns:130px 1fr 92px;align-items:center;gap:14px;padding:8px 0}
.bar-track{height:24px;background:var(--line-2);border-radius:7px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:7px;min-width:2px}
.bar-row .num{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}

/* ---------- deal detail ---------- */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.kv{display:grid;grid-template-columns:140px 1fr;gap:9px 16px;font-size:13px}
.kv dt{color:var(--gray)} .kv dd{margin:0;font-weight:600}
.pill-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.timeline{list-style:none;margin:0;padding:0;font-size:13px}
.timeline li{padding:9px 0 9px 20px;border-left:2px solid var(--line);position:relative}
.timeline li:before{content:'';position:absolute;left:-5px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.timeline small{color:var(--gray)}

/* ---------- seg control / filters ---------- */
.seg{display:inline-flex;gap:3px;background:var(--line-2);border:1px solid var(--line);border-radius:12px;padding:3px;box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 7%,transparent)}
.seg a{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}
.seg a:hover:not(.active){color:var(--ink);background:color-mix(in srgb,var(--card) 55%,transparent)}
.seg a.active{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 16%,transparent),0 2px 6px color-mix(in srgb,var(--ink) 9%,transparent)}
.seg a:active{transform:scale(.97)}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.filters select,.filters input{width:auto;margin:0}
/* dropdown popover (e.g. board Stages picker) */
.dropdown{position:relative;display:inline-block}
.dropdown > summary{list-style:none;cursor:pointer}
.dropdown > summary::-webkit-details-marker{display:none}
.dropdown-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:45;min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:13px}
.sf-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);font-weight:700;margin-bottom:8px}
.sf-list{display:flex;flex-direction:column;gap:1px;max-height:300px;overflow:auto}
.sf-item{padding:6px 8px;border-radius:8px;font-weight:600;font-size:13px;gap:8px}
.sf-item:hover{background:var(--line-2)}
.sf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.sf-hint{font-size:11px;color:var(--gray)}
#sfApply:disabled{opacity:.45;cursor:not-allowed}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.toolbar input,.toolbar select{width:auto;margin:0;font-size:13px;padding:7px 10px;max-width:160px}
.toolbar input{min-width:120px}

.empty{text-align:center;padding:54px 20px;color:var(--gray)}

/* period navigator + modal */
.period-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.period-label{font-size:18px;font-weight:700;min-width:150px;text-align:center;letter-spacing:-.01em}
.modal-overlay{position:fixed;inset:0;background:var(--overlay);display:none;place-items:center;z-index:60;padding:20px}
.modal-overlay.open{display:grid}
.modal{background:var(--card);border:1px solid var(--line);border-radius:18px;max-width:480px;width:100%;padding:26px 28px;box-shadow:var(--shadow-lg);max-height:90vh;overflow:auto;animation:pop .14s ease}
.modal h3{font-size:18px}
@keyframes pop{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}

/* calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cal-dow{background:var(--card-2);padding:8px;text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.cal-cell{position:relative;background:var(--card);min-height:108px;padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.cal-out{background:var(--card-2)}
.cal-out .cal-daynum{color:var(--gray)}
.cal-today{background:var(--red-soft)}
.cal-sel{box-shadow:inset 0 0 0 2px var(--red)}
.cal-top{display:flex;align-items:center;justify-content:space-between;min-height:16px}
.cal-daynum{font-size:12px;font-weight:700;color:var(--ink-2);text-decoration:none}
.cal-daynum:hover{color:var(--red);text-decoration:underline}
.cal-today .cal-daynum{color:var(--red)}
.cal-add{opacity:0;border:none;background:var(--card-2);color:var(--ink-2);width:18px;height:18px;line-height:1;border-radius:5px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.cal-cell:hover .cal-add{opacity:1}
.cal-add:hover{background:var(--red);color:#fff}
.cal-item{display:block;font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--ic) 14%,var(--card));color:color-mix(in srgb,var(--ic) 78%,var(--ink));border-left:3px solid var(--ic);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-decoration:none}
.cal-item:hover{filter:brightness(.97)}
.cal-more{font-size:10px;color:var(--gray);font-weight:600;padding-left:2px;text-decoration:none}
.cal-more:hover{color:var(--red);text-decoration:underline}
.day-panel{margin-bottom:16px}
.day-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.day-list li{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.day-dot{width:9px;height:9px;border-radius:3px;background:var(--ic,var(--gray));flex:none}
/* drag-to-reschedule */
.cal-item[draggable=true]{cursor:grab}
.cal-item.dragging{opacity:.45}
.cal-cell.drop-target{outline:2px dashed var(--red);outline-offset:-3px;background:var(--red-soft)}
/* follow-up badge (board cards) */
.tag.fu-tag,.tier.fu-tag{background:color-mix(in srgb,#0ea5a5 16%,var(--card));color:#0a8378;border-color:color-mix(in srgb,#0ea5a5 38%,var(--line))}
.tag.fu-tag.over,.tier.fu-tag.over{background:color-mix(in srgb,#d6453f 16%,var(--card));color:#c63b33;border-color:color-mix(in srgb,#d6453f 38%,var(--line))}
.tag.dc-stuck{background:color-mix(in srgb,#d6453f 18%,var(--card));color:#c2362f;border-color:color-mix(in srgb,#d6453f 45%,var(--line));font-weight:700}
@media(max-width:860px){.cal-cell{min-height:72px}.cal-item{font-size:10px}}

@media(max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .2s ease;z-index:70} .main{margin-left:0}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open::after{content:'';position:fixed;inset:0;background:rgba(22,17,15,.4);z-index:65}
  .hamburger{display:inline-grid;place-items:center}
  .detail-grid,.form-grid{grid-template-columns:1fr}
  .content{padding:18px 16px 60px}
  .topbar{padding:14px 16px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ===== Collections dashboard ===== */
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:4px 0 16px}
.kcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ac,var(--red));border-radius:14px;padding:15px 17px}
.kcard .kl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);font-weight:600}
.kcard .kv{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:4px 0 2px;color:var(--ink)}
.kcard .ks{font-size:12px;color:var(--ink-2)}
a.kcard{text-decoration:none;display:block;transition:.15s}
a.kcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
a.kcard::after{content:'›';float:right;color:var(--gray);font-size:18px;line-height:1;opacity:.55}

/* ============================================================
   LIQUID GLASS (preview) — frosted glass effect on KPI cards.
   To REVERT: delete this whole block (original .kcard styles above stay intact).
   ============================================================ */
:root{ --glass-bg:rgba(255,255,255,.55); --glass-bd:rgba(255,255,255,.7); --glass-hl:rgba(255,255,255,.85); --glass-sheen:rgba(255,255,255,.5); --glass-shadow:0 10px 34px rgba(31,38,55,.16) }
body[data-theme="dark"]{ --glass-bg:rgba(48,51,60,.42); --glass-bd:rgba(255,255,255,.14); --glass-hl:rgba(255,255,255,.18); --glass-sheen:rgba(255,255,255,.22); --glass-shadow:0 12px 38px rgba(0,0,0,.4) }
.kgrid .kcard{
  position:relative; overflow:hidden;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-bd); border-top:3px solid var(--ac,var(--red));
  border-radius:18px;
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hl), inset 0 0 18px rgba(255,255,255,.03);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* glossy top-left sheen (the "liquid" highlight) */
.kgrid .kcard::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--glass-sheen), rgba(255,255,255,0) 45%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
}
.kgrid .kcard > *{ position:relative; z-index:1 }
.kgrid a.kcard:hover{ transform:translateY(-2px); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hl), 0 0 0 1px var(--glass-bd) }
/* soft colour glow behind the row so the frosted glass has something to refract */
.kgrid{ position:relative; z-index:0 }
.kgrid::before{
  content:''; position:absolute; inset:-30px -10px; z-index:-1; pointer-events:none; filter:blur(14px);
  background:
    radial-gradient(36% 75% at 12% 50%, rgba(34,197,94,.16), transparent 70%),
    radial-gradient(36% 75% at 38% 50%, rgba(239,68,68,.16), transparent 70%),
    radial-gradient(36% 75% at 62% 50%, rgba(245,158,11,.16), transparent 70%),
    radial-gradient(36% 75% at 88% 50%, rgba(59,130,246,.16), transparent 70%);
}

.aging{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.aseg{flex:1;min-width:110px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ac,var(--gray));border-radius:10px;padding:9px 12px}
.aseg .al{font-size:11px;color:var(--gray);font-weight:600}
.aseg .av{font-size:17px;font-weight:700;color:var(--ink);margin-top:2px}
.aseg[data-tip]{cursor:help}
/* keep the currency sign on the same line as the amount (Taka sign allows a break after it) */
.kcard .kv,.aseg .av,.tile .value{white-space:nowrap}

.tbl.chase .row-over{background:var(--red-soft)}
.abadge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.abadge.ok{background:color-mix(in srgb,var(--green-d) 15%,var(--card));color:var(--green-d)}
.abadge.due{background:color-mix(in srgb,var(--orange) 18%,var(--card));color:var(--orange-d)}
.abadge.over{background:color-mix(in srgb,var(--orange) 22%,var(--card));color:var(--orange-d)}
.abadge.late{background:color-mix(in srgb,var(--lost) 16%,var(--card));color:var(--lost)}
.abadge.crit{background:var(--lost);color:#fff}
.abadge.nd{background:var(--line-2);color:var(--gray)}
.sm{font-size:11.5px}
.tbl .strong{font-weight:700}

.coll-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:6px}

.trend{display:flex;align-items:flex-end;gap:7px;height:150px;padding:8px 4px 0;border-bottom:1px solid var(--line);margin-bottom:6px}
.trend .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;text-decoration:none}
.trend .tb .tv{font-size:10px;color:var(--ink-2);font-weight:600;white-space:nowrap;margin-bottom:4px}
.trend .tb .bar{width:100%;max-width:46px;background:linear-gradient(var(--green),var(--green-d));border-radius:5px 5px 0 0;transition:.15s}
.trend .tb .tm{font-size:10px;color:var(--gray);text-align:center;line-height:1.15;margin-top:5px}
.trend .tb:hover .bar{filter:brightness(1.1)}
.trend .tb.on .bar{background:linear-gradient(var(--ink),var(--slate))}
.trend .tb.on .tm{color:var(--ink);font-weight:700}

@media(max-width:860px){
  .kgrid{grid-template-columns:repeat(2,1fr)}
  .coll-2col{grid-template-columns:1fr}
  .trend .tb .tv{display:none}
}

/* ===== Client accordion (Collections) ===== */
.cl-acc{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:9px 0;overflow:hidden}
.cl-acc[open]{border-color:var(--line);box-shadow:var(--shadow)}
.cl-acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;flex-wrap:wrap}
.cl-acc>summary::-webkit-details-marker{display:none}
.cl-acc>summary::before{content:'▸';color:var(--gray);font-size:12px;margin-right:8px;transition:.15s;display:inline-block}
.cl-acc[open]>summary::before{transform:rotate(90deg)}
.cl-acc[open]>summary{background:var(--card-2);border-bottom:1px solid var(--line)}
.cl-name{font-weight:700;font-size:15px;flex:1;min-width:160px}
.cl-chips{display:flex;gap:7px;flex-wrap:wrap}
.cl-chips .chip{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--line);background:var(--card-2);color:var(--ink-2)}
.cl-chips .chip.ok{background:color-mix(in srgb,var(--green-d) 14%,var(--card));border-color:color-mix(in srgb,var(--green-d) 32%,var(--card));color:var(--green-d)}
.cl-chips .chip.warn{background:color-mix(in srgb,var(--lost) 14%,var(--card));border-color:color-mix(in srgb,var(--lost) 32%,var(--card));color:var(--lost)}
.cl-chips .chip.chalan{background:color-mix(in srgb,var(--orange) 16%,var(--card));border-color:color-mix(in srgb,var(--orange) 34%,var(--card));color:var(--orange-d)}
.cl-body{padding:6px 14px 14px;overflow-x:auto}
.cl-body .tbl{border:none}
.cl-body .tbl th{background:transparent;border-bottom:1px solid var(--line)}
.inv-chk{font-size:16px;font-weight:700;line-height:1}
.inv-chk.ok{color:var(--green-d)}
.inv-chk.no{color:var(--lost)}
@media(max-width:720px){ .cl-acc>summary{align-items:flex-start} .cl-name{min-width:100%} }

/* ===== Client notes & documents ===== */
.docbox{padding:14px 16px}
.doctabs{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:14px}
.doctabs button{border:none;background:var(--card);padding:7px 15px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;border-right:1px solid var(--line)}
.doctabs button:last-child{border-right:none}
.doctabs button.active{background:var(--red);color:#fff}
.doctabs .tcount{display:inline-block;background:var(--line-2);color:var(--ink-2);border-radius:10px;padding:0 6px;font-size:11px;margin-left:2px}
.doctabs button.active .tcount{background:rgba(255,255,255,.25);color:#fff}
.rt-toolbar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.rt-toolbar button{min-width:32px;height:30px;padding:0 8px;border:1px solid var(--line);background:var(--card);border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.rt-toolbar button:hover{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 28%,var(--card))}
.rt-toolbar .rt-color{width:34px;height:30px;padding:2px;margin:0;border:1px solid var(--line);border-radius:7px;background:var(--card);cursor:pointer;flex:none}
.rt-toolbar .rt-color::-webkit-color-swatch-wrapper{padding:0}
.rt-toolbar .rt-color::-webkit-color-swatch{border:none;border-radius:4px}
.rt-toolbar .rt-size{width:auto;height:30px;margin:0;padding:0 6px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink-2);font-size:12px;cursor:pointer}
.rt-sep{width:1px;min-height:24px;align-self:stretch;background:var(--line);margin:0 4px;display:inline-block}
.rt-toolbar .rt-tbtn{font-size:11px;padding:0 7px;font-weight:700}
.rt-edit,.rt-view{border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:130px;background:var(--input-bg);font-size:14px;line-height:1.55}
.rt-edit:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.rt-edit:empty::before{content:attr(data-ph);color:var(--gray)}
.rt-edit table,.rt-view table{border-collapse:collapse;margin:8px 0}
.rt-edit td,.rt-edit th,.rt-view td,.rt-view th{border:1px solid var(--line);padding:5px 9px;font-size:13px}
.rt-edit th,.rt-view th{background:var(--card-2)}
/* table alignment (persisted via the align attribute) + float clearing */
.rt-edit table[align=center],.rt-view table[align=center]{margin-left:auto;margin-right:auto;float:none}
.rt-edit table[align=left],.rt-view table[align=left]{float:left;margin:4px 14px 8px 0}
.rt-edit table[align=right],.rt-view table[align=right]{float:right;margin:4px 0 8px 14px}
.rt-edit::after,.rt-view::after{content:'';display:block;clear:both}
/* black / white font colours follow the theme (stay readable in light AND dark) */
.rt-edit font[color="#000000"],.rt-view font[color="#000000"],.rt-edit font[color="#000"],.rt-view font[color="#000"],.rt-edit font[color="black"],.rt-view font[color="black"],.rt-edit font[color="#ffffff"],.rt-view font[color="#ffffff"],.rt-edit font[color="#fff"],.rt-view font[color="#fff"],.rt-edit font[color="white"],.rt-view font[color="white"]{color:var(--ink)}
.rt-edit h3,.rt-view h3{font-size:16px;margin:10px 0 4px}
.rt-edit ul,.rt-edit ol,.rt-view ul,.rt-view ol{margin:6px 0 6px 22px}
.doclist{list-style:none;margin:0 0 12px;padding:0}
.doclist li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;background:var(--card)}
.doclist a{font-weight:600;text-decoration:none;color:var(--ink)}
.doclist a:hover{color:var(--red)}
.doclist .meta{font-size:11.5px;color:var(--gray);display:flex;align-items:center;gap:8px;white-space:nowrap}
.docform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ===== Appearance / theme switcher ===== */
.theme-switch{display:flex;gap:14px;flex-wrap:wrap}
.theme-switch form{margin:0}
.theme-opt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink);transition:.14s;min-width:150px}
.theme-opt:hover{border-color:var(--red)}
.theme-opt.on{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.sw{width:126px;height:74px;border-radius:10px;border:1px solid var(--line);position:relative;overflow:hidden;display:block}
.sw.light{background:#f6f7f3}
.sw.dark{background:#0B0C0F}
.sw .sw-bar{position:absolute;left:0;top:0;bottom:0;width:34px}
.sw.light .sw-bar{background:#fff;border-right:1px solid #e8e9e6}
.sw.dark .sw-bar{background:#121317;border-right:1px solid #282A31}
.sw .sw-dot{position:absolute;left:44px;top:14px;width:64px;height:10px;border-radius:5px;background:#F04444}
.sw.light .sw-dot{box-shadow:0 18px 0 -3px #e3e4e0,0 34px 0 -3px #e3e4e0}
.sw.dark .sw-dot{box-shadow:0 18px 0 -3px #282A31,0 34px 0 -3px #282A31}

/* ===== Revenue & Collections — Overview dashboard ===== */
.ov-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ov-hero h2{font-size:21px;letter-spacing:-.02em}
.ov-hero .brief{font-size:13.5px;color:var(--ink-2);margin-top:6px;max-width:700px;line-height:1.55}
.ov-hero .brief b{color:var(--ink);font-weight:700}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ytick{fill:var(--gray);font-size:9px;text-anchor:end}
.chart .xtick{fill:var(--gray);font-size:9px;text-anchor:middle}
.chart .bar-inv{fill:var(--blue)}
.chart .bar-col{fill:var(--green-d)}
.chart rect{transition:opacity .12s}
.chart rect:hover{opacity:.78}
/* clickable bars → monthly drill-down */
.chart-link a.bar-link{cursor:pointer}
.chart-link a.bar-link:hover rect{opacity:.6}
.chart-link a.bar-link:focus-visible rect{stroke:var(--ink);stroke-width:1.5}
/* monthly breakdown page: metric toggle cards + grouped table */
.kgrid-2{grid-template-columns:repeat(2,1fr)}
a.kcard.mtoggle{text-decoration:none;display:block;transition:.15s;opacity:.66}
a.kcard.mtoggle:hover{opacity:.9}
a.kcard.mtoggle.on{opacity:1;box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--ac) 55%,var(--line))}
.tbl tr.grp td{background:var(--card-2);border-top:1px solid var(--line);font-weight:600}
.tbl tr.grp:hover td{background:var(--card-2)}
.tbl td.indent{padding-left:28px}
.legend{display:flex;gap:15px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-2);font-weight:600}
.legend .lk{display:inline-flex;align-items:center;gap:6px}
.sw2{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}
.donut{width:180px;height:180px;display:block;margin:2px auto 0}
.donut .d-val{fill:var(--ink);font-size:19px;font-weight:800;text-anchor:middle;font-family:var(--font-head)}
.donut .d-sub{fill:var(--gray);font-size:8.5px;text-anchor:middle;letter-spacing:.5px;text-transform:uppercase}
.dlegend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.dlegend li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.dlegend .dl-v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.fc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.fc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
.fc .fl{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray);font-weight:600}
.fc .fv{font-size:18px;font-weight:800;margin-top:4px;font-family:var(--font-head)}
.fc.exp{border-left:3px solid var(--green-d)}
.fc.opt{border-left:3px solid var(--blue)}
.fc.con{border-left:3px solid var(--orange)}
.ov-2{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:start;margin-bottom:6px}
.att-card{display:flex;flex-direction:column;gap:2px}
.att-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);margin:14px 0 5px}
.att-sec:first-of-type{margin-top:2px}
.att-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.att-list a{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);font-size:12.5px;color:var(--ink);transition:.12s}
.att-list a:hover{border-color:var(--red);background:var(--red-soft)}
.att-list .ai-main{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.att-list .ai-sub{color:var(--gray);font-weight:500}
.att-list .ai-amt{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.att-empty{font-size:12.5px;color:var(--gray);padding:5px 2px}
.mini-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px}
.mini-pill.up{background:color-mix(in srgb,var(--green-d) 16%,var(--card));color:var(--green-d)}
.mini-pill.down{background:color-mix(in srgb,var(--lost) 16%,var(--card));color:var(--lost)}
@media(max-width:900px){.ov-2{grid-template-columns:1fr}.fc-row{grid-template-columns:1fr}}

/* ===== Receivables recovery matrix ===== */
.mtx-wrap{overflow:auto;max-height:calc(100vh - 170px);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
table.mtx{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;min-width:640px;font-variant-numeric:tabular-nums}
.mtx th,.mtx td{padding:9px 13px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-2)}
.mtx thead th{position:sticky;top:0;background:var(--card-2);color:var(--gray);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;z-index:2}
.mtx th.cl,.mtx td.cl{position:sticky;left:0;text-align:left;font-weight:600;z-index:1;min-width:158px;box-shadow:1px 0 0 var(--line-2)}
.mtx td.cl{background:var(--card);color:var(--ink)}
.mtx thead th.cl{z-index:3}
.mtx tbody tr:hover td.cl{background:var(--hover)}
.mtx .tot{font-weight:800;color:var(--ink)}
.mtx td.out{color:var(--lost);font-weight:700}
.mtx .z{color:var(--gray)}
.mtx tfoot td{position:sticky;bottom:0;border-top:2px solid var(--line);border-bottom:none;font-weight:800;background:var(--card-2);color:var(--ink);z-index:2}
.mtx tfoot td.cl{z-index:3}

/* ===== Collection Sheet ===== */
.sheet td{vertical-align:top}
.sheet-top td{border-top:2px solid var(--line)}
.sheet input[type=checkbox]{width:auto;margin:0;cursor:pointer}
.sheet-note{min-width:240px}
.sheet-note textarea{width:100%;min-height:38px;border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-size:12px;line-height:1.45;background:var(--input-bg);color:var(--ink);resize:vertical;margin:0}

/* ===== Collection Forecast ===== */
.fc .fc-mon{text-align:center;font-size:10.5px;letter-spacing:.04em;border-left:1px solid var(--line)}
/* two-row sticky header (month groups + bucket labels), like the Recovery freeze */
.fc thead tr:first-child th{top:0;height:30px;padding-top:5px;padding-bottom:5px}
.fc thead tr:nth-child(2) th{top:30px}
.fc th.fc-edge,.fc td.fc-edge{border-left:1px solid var(--line)}
.fc td{text-align:right}
.fc td.cl{text-align:left;min-width:200px}
.fc td.z{color:var(--gray);text-align:center}
.fc td.fc-overdue{background:color-mix(in srgb,var(--lost) 30%,var(--card));font-weight:700}
.fc td.fc-upcoming{background:color-mix(in srgb,var(--blue) 22%,var(--card));font-weight:700}
.fc td.fc-collected{background:color-mix(in srgb,var(--green-d) 28%,var(--card));font-weight:700}

/* ===== Activity feed ===== */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line-2)}
.feed li:last-child{border-bottom:none}
.feed .fic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:14px;background:var(--card-2);border:1px solid var(--line)}
.feed .fic.pay{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green-d) 40%,var(--card))}
.feed .fic.chase{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 45%,var(--card))}
.feed .fbody{min-width:0;flex:1}
.feed .ftxt{font-size:13.5px;color:var(--ink);line-height:1.4}
.feed .ftxt a{font-weight:700;color:var(--ink)}
.feed .ftxt a:hover{color:var(--red)}
.feed .fmeta{font-size:11.5px;color:var(--gray);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.feed .fwhen{font-size:11.5px;color:var(--gray);white-space:nowrap;flex:none;padding-top:2px}

/* ===== Data Quality ===== */
.dq-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;margin:20px 0 4px;flex-wrap:wrap}
.dq-card{margin-top:14px}
.dq-head{display:flex;align-items:center;gap:10px}
.dq-head h2{font-size:15px;margin:0}
.dq-dot{width:10px;height:10px;border-radius:50%;flex:none}
.dq-dot.high{background:var(--lost)}.dq-dot.med{background:var(--orange)}.dq-dot.low{background:var(--gray)}
.dq-n{font-size:12px;font-weight:800;min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:inline-grid;place-items:center;color:#fff}
.dq-n.high{background:var(--lost)}.dq-n.med{background:var(--orange)}.dq-n.low{background:var(--gray)}
.dq-sev{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.dq-sev.high{color:var(--lost);background:color-mix(in srgb,var(--lost) 15%,transparent)}
.dq-sev.med{color:var(--orange);background:color-mix(in srgb,var(--orange) 16%,transparent)}
.dq-sev.low{color:var(--gray);background:color-mix(in srgb,var(--gray) 18%,transparent)}
.dq-fix{font-size:12.5px;color:var(--gray);margin:8px 0 12px}
.dq-clean{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 18px}
.dq-clean li{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:8px}
.dq-tick{color:var(--green-d);font-weight:800}
.dq-tick.sm{font-size:12px}
.dq-allclear{display:flex;align-items:center;gap:14px}
.dq-allclear .dq-tick{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--green-d) 16%,transparent);font-size:20px}

/* ===== Sales Overview extras ===== */
a.tile{display:block;cursor:pointer}
.statbar .s.good .v{color:var(--green-d)}
.statbar .s.good{border-color:color-mix(in srgb,var(--green-d) 32%,var(--line))}
.attn{list-style:none;margin:0;padding:0}
.attn li{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line-2)}
.attn li:last-child{border-bottom:none}
.attn .ttag{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:999px;flex:none}
.attn .ttag.red{color:var(--lost);background:color-mix(in srgb,var(--lost) 14%,var(--card))}
.attn .ttag.orange{color:var(--orange-d);background:color-mix(in srgb,var(--orange) 18%,var(--card))}
.attn .an{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;font-weight:600;color:var(--ink)}
.attn .an:hover .anm{color:var(--red)}
.attn .anm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn .am{font-size:11.5px;color:var(--gray);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn .av{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tg-hit{color:var(--green-d);font-weight:700}
.bar-row[data-tip]{cursor:help}

/* ===== Sources page ===== */
.src-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:20px 0 8px}
.src-cats{display:flex;gap:7px;flex-wrap:wrap}
.src-cats a{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;transition:.14s;white-space:nowrap}
.src-cats a:hover{background:var(--hover);color:var(--ink)}
.src-cats a.on{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 30%,var(--card));color:var(--red)}
.src-cats a .dot{width:8px;height:8px;border-radius:50%;flex:none}
.src-cats a .c{font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center;background:var(--line-2);color:var(--ink-2)}
.src-cats a.on .c{background:color-mix(in srgb,var(--red) 16%,var(--card));color:var(--red)}
.src-search{position:relative;margin:0;display:flex;align-items:center}
.src-search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--gray);pointer-events:none}
.src-search input{width:240px;max-width:48vw;padding:9px 28px 9px 33px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg);color:var(--ink);font:inherit;font-size:13px}
.src-search input:focus{outline:none;border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.src-clear{position:absolute;right:9px;color:var(--gray);font-size:13px;width:18px;height:18px;display:grid;place-items:center;border-radius:5px}
.src-clear:hover{background:var(--line-2);color:var(--ink)}
.src-name{display:flex;align-items:center;gap:11px;min-width:0}
.src-av{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;box-shadow:var(--shadow)}
.src-name .nm{font-weight:700;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-name .meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:11.5px;color:var(--gray);min-width:0}
.src-name .meta .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.src-tbl td{vertical-align:middle}
.tgt{min-width:140px}
.tgt-bar{height:7px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-bottom:5px}
.tgt-bar i{display:block;height:100%;border-radius:4px;background:var(--green-d)}
.tgt-bar i.hit{background:var(--green)}
.tgt-l{font-size:11.5px;color:var(--gray);font-variant-numeric:tabular-nums}

/* ===== Settings — section nav + content panes (ClickUp-style) ===== */
.set-shell{display:flex;gap:30px;align-items:flex-start}
.set-nav{width:216px;flex:none;position:sticky;top:90px}
.set-nav-h{font-size:13px;font-weight:800;color:var(--ink);padding:0 11px 8px}
.set-grp{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gray);padding:15px 11px 5px}
.set-link{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:.13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-link:hover{background:var(--hover);color:var(--ink)}
.set-link.active{background:var(--red-soft);color:var(--red);font-weight:700}
.set-link svg{width:18px;height:18px;flex:none;opacity:.62;transition:.13s}
.set-link:hover svg{opacity:.9}
.set-link.active svg{opacity:1;color:var(--red)}
.set-body{flex:1;min-width:0}
.set-sec{display:none}
.set-sec.on{display:block;animation:setfade .16s ease}
@keyframes setfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* big section header (title + description, optional right-side action) */
.set-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 18px}
.set-head h1{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.set-head p{font-size:13px;color:var(--gray);margin-top:6px;max-width:640px;line-height:1.5}
/* card with ClickUp-style setting rows (label+desc left, control right) */
.set-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:2px 22px;max-width:760px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 0;border-top:1px solid var(--line-2)}
.set-row:first-child{border-top:none}
.set-row .rl{min-width:0;flex:1}
.set-row .rl h4{font-size:14px;font-weight:700;color:var(--ink)}
.set-row .rl p{font-size:12.5px;color:var(--gray);margin-top:3px;line-height:1.45}
.set-row .rc{flex:none;display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:flex-end}
.set-foot{padding:16px 0;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;margin-top:2px}
.ws-logo-prev{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:54px;padding:5px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card-2)}
.ws-logo-prev img{max-height:26px;max-width:120px;object-fit:contain;display:block}
body[data-theme="dark"] .ws-logo-prev img:not(.custom){filter:brightness(0) invert(1);opacity:.9}
.ws-fn{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check.sm{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
/* custom uploaded logo: drop the wordmark border + dark-mode invert */
.brand img.custom{border:none;padding:0;border-radius:8px;width:auto;max-width:170px;max-height:54px;object-fit:contain}
body[data-theme="dark"] .brand img.custom{filter:none;opacity:1}
.auth-logo.custom{filter:none}
@media(max-width:780px){
  .set-shell{flex-direction:column;gap:14px}
  .set-nav{width:100%;position:static;display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .set-nav-h,.set-grp{display:none}
  .set-link{flex:none;border:1px solid var(--line)}
  .set-link.active{border-color:color-mix(in srgb,var(--red) 30%,var(--card))}
}