/* ============================================================
   ExportDocs — app chrome
   One design system: petrol brand on soft paper, neutral greys,
   restrained amber / red, small gold accents for money.
   Every colour in the app comes from the tokens below.
   Type: Inter (UI) · IBM Plex Mono (serials and figures)
   ============================================================ */

:root{
  /* surfaces */
  --ground:#F6F9F8;          /* page background            */
  --sidebar:#FFFFFF;         /* sidebar                    */
  --surface:#FFFFFF;         /* cards, inputs, menus       */
  --surface-2:#F6F9F8;       /* soft neutral inside a card */
  --surface-3:#EFF2F1;       /* hover surface              */
  --line:#D5DDDB;            /* borders and dividers       */
  --line-strong:#AAC0BD;     /* hover border               */

  /* text */
  --ink:#18292C;             /* primary   */
  --ink-2:#3B5155;           /* secondary */
  --ink-3:#5C6F73;           /* muted — 4.5:1 on every surface it sits on */

  /* brand */
  --accent:#0E6E62;
  --accent-hi:#0B574D;
  --accent-deep:#12332E;
  --accent-soft:#E7F0EE;
  --accent-line:#9CCBC2;

  /* status */
  --ok:#2C6C61;              --ok-soft:#E7F0EE;
  --warn:#8A5A0B;            --warn-soft:#FAF0DB;
  --danger:#9C2222;          --danger-soft:#FAE8E8;   --danger-hi:#7D1B1B;
  --gold:#D9A94A;            --gold-soft:#FAF0DB;

  /* effects */
  --on-accent:#FFFFFF;
  --focus:0 0 0 3px rgba(14,110,98,.12);
  --shadow-sm:0 1px 2px rgba(24,41,44,.05), 0 1px 1px rgba(24,41,44,.03);
  --shadow-md:0 8px 24px -8px rgba(24,41,44,.16), 0 2px 6px -2px rgba(24,41,44,.06);

  /* shape and rhythm */
  --r:8px;
  --r-lg:12px;
  --r-sm:6px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px;

  /* type */
  --sans:"Inter","Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --disp:"Inter","Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  /* aliases used by newer code */
  --ed-primary:var(--accent);          --ed-primary-hover:var(--accent-hi);
  --ed-primary-soft:var(--accent-soft);
  --ed-bg:var(--ground);               --ed-surface:var(--surface);
  --ed-text:var(--ink);                --ed-text-secondary:var(--ink-2);
  --ed-text-muted:var(--ink-3);        --ed-border:var(--line);
  --ed-hover:var(--surface-3);
  --ed-success:var(--ok);              --ed-success-bg:var(--ok-soft);
  --ed-warning:var(--warn);            --ed-warning-bg:var(--warn-soft);
  --ed-danger:var(--danger);           --ed-danger-bg:var(--danger-soft);
  --ed-gold:var(--gold);
}

/* dark mode — same identity, never pure black */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1618;
    --sidebar:#142225;
    --surface:#18292C;
    --surface-2:#1E3134;
    --surface-3:#223A3E;
    --line:#27393D;
    --line-strong:#3B5155;
    --ink:#E7F0EE;
    --ink-2:#AAC0BD;
    --ink-3:#8CA6A2;   /* muted — 4.5:1 on every dark surface */
    --accent:#3EBFA9;
    --accent-hi:#63D3BE;
    --accent-deep:#12332E;
    --accent-soft:#12332E;
    --accent-line:#2C6C61;
    --ok:#3EBFA9;            --ok-soft:#12332E;
    --warn:#D9A94A;          --warn-soft:#2E2614;
    --danger:#E88080;        --danger-soft:#331919;   --danger-hi:#F0A0A0;
    --gold:#D9A94A;          --gold-soft:#2E2614;
    --on-accent:#0C1618;
    --focus:0 0 0 3px rgba(62,191,169,.16);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 24px -8px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0C1618;
  --sidebar:#142225;
  --surface:#18292C;
  --surface-2:#1E3134;
  --surface-3:#223A3E;
  --line:#27393D;
  --line-strong:#3B5155;
  --ink:#E7F0EE;
  --ink-2:#AAC0BD;
  --ink-3:#8CA6A2;   /* muted — 4.5:1 on every dark surface */
  --accent:#3EBFA9;
  --accent-hi:#63D3BE;
  --accent-deep:#12332E;
  --accent-soft:#12332E;
  --accent-line:#2C6C61;
  --ok:#3EBFA9;            --ok-soft:#12332E;
  --warn:#D9A94A;          --warn-soft:#2E2614;
  --danger:#E88080;        --danger-soft:#331919;   --danger-hi:#F0A0A0;
  --gold:#D9A94A;          --gold-soft:#2E2614;
  --on-accent:#0C1618;
  --focus:0 0 0 3px rgba(62,191,169,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp); margin:0; text-wrap:balance; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
input,select,textarea{
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:7px 9px;
}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=checkbox],input[type=radio]{
  accent-color:var(--accent); width:15px; height:15px; cursor:pointer;
  background:none; border:0; padding:0; box-shadow:none;
}
input[type=range]{background:none; border:0; padding:0; accent-color:var(--accent)}
input[type=color]{padding:2px; height:30px}
input[type=file]{border:0; background:none; padding:0}
::selection{background:var(--accent-soft); color:var(--accent-hi)}
/* calm, thin scrollbars */
*{scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line); border:3px solid transparent; background-clip:content-box; border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong); border:3px solid transparent; background-clip:content-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------------- shell ---------------- */
.shell{display:flex; min-height:100vh}
.side{
  width:236px; flex:0 0 236px; background:var(--sidebar); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{padding:18px 18px 15px; border-bottom:1px solid var(--line)}
.brand b{font-family:var(--disp); font-size:17px; font-weight:700; letter-spacing:-.02em; display:block; color:var(--ink)}
.brand span{font-size:11px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; font-family:var(--disp)}
.nav{padding:6px 8px 16px; display:flex; flex-direction:column; gap:1px}
/* Group ka heading. Upar zyada jagah, neeche kam — to heading apne
   neeche wale link se judta dikhta hai, upar wale group se nahi. */
.nav-lab{
  font-family:var(--disp); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding:18px 11px 5px; user-select:none;
}
.nav-lab:first-child{padding-top:8px}
.nav a{
  position:relative;
  display:flex; align-items:center; gap:11px; padding:0 11px; height:42px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:13.5px; font-weight:500;
  transition:background .16s ease, color .16s ease;
}
.nav a:hover{background:var(--surface-3); color:var(--ink)}
.nav a.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
/* Khuli screen ka nishaan rang ke alawa shakl se bhi — rang na dikhe
   (ya rang-andhepan me) to bhi ye patti dikh jati hai. */
.nav a.on::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--accent);
}
.nav a .ic{width:17px; height:17px; flex:0 0 17px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-3); transition:color .16s ease}
.nav a .ic svg{width:17px; height:17px; display:block}
.nav a:hover .ic{color:var(--ink-2)}
.nav a.on .ic{color:var(--accent)}
/* Keyboard se chalne wale ke liye focus saaf dikhna chahiye */
.nav a:focus-visible,.side-t:focus-visible,.thsw button:focus-visible,
.acct-b:focus-visible,.acct-ls a:focus-visible,.acct-ft button:focus-visible,
.tabs button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
/* Bahut chhoti oonchai par sidebar khud scroll kare, brand tika rahe */
.side{scrollbar-width:thin}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:8px}
.side::-webkit-scrollbar-track{background:transparent}
.brand{position:sticky; top:0; z-index:2; background:var(--sidebar)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.top h1{font-size:19px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
.top .sub{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.top .grow{flex:1}
.wrap{padding:20px; max-width:1240px; width:100%}
.burger{display:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); width:36px; height:36px; cursor:pointer; color:var(--ink-2)}
.burger:hover{background:var(--surface-3)}

@media (max-width:900px){
  .side{position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .18s; box-shadow:var(--shadow-md)}
  .side.open{transform:none}
  .burger{display:block}
  .wrap{padding:14px 16px}
  .top{padding:10px 16px}
}

/* ---------------- cards / sections ---------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.card + .card{margin-top:var(--s4)}
.card-h{padding:13px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card-h h3{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.card-h .grow{flex:1}
.card-b{padding:18px}
.hint{font-size:12.5px; color:var(--ink-3); line-height:1.5}
.sec-note{font-size:13px; color:var(--ink-3); margin:0 0 var(--s4); line-height:1.55; max-width:78ch}

/* section heading inside a form */
.mh{
  margin:var(--s6) 0 var(--s3); font-family:var(--disp); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.mh::after{content:""; flex:1; height:1px; background:var(--line)}
.mh:first-child{margin-top:0}

/* ---------------- forms ---------------- */
.grid{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.f{display:flex; flex-direction:column; gap:5px; min-width:0}
.f.span2{grid-column:span 2}
@media (max-width:620px){.f.span2{grid-column:span 1}}
.f label{
  font-size:12.5px; color:var(--ink-2); font-weight:500; letter-spacing:0; text-transform:none;
}
.f input,.f select,.f textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:8px 11px; width:100%; min-width:0; color:var(--ink); font-size:14px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.f input:not([type=checkbox]):not([type=radio]),.f select{height:38px; padding-top:0; padding-bottom:0}
.f select{padding-right:8px}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--line-strong)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus)}
.f textarea{resize:vertical; min-height:72px; line-height:1.55}
.f input[readonly],.f input:disabled,.f select:disabled,.f textarea[readonly]{
  background:var(--surface-3); color:var(--ink-2); border-color:var(--line); cursor:default;
}
.f input[type=checkbox]{height:auto; width:15px}
.f .mono,input.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.f .auto{
  font-size:11.5px; color:var(--ink-3); letter-spacing:0; text-transform:none;
  display:inline-flex; align-items:center; gap:5px;
}
.f .auto::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-line); flex:0 0 5px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  height:38px; padding:0 15px; border-radius:var(--r); cursor:pointer;
  font-size:13.5px; font-weight:500; white-space:nowrap; text-decoration:none;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{background:var(--surface-3); border-color:var(--line-strong); color:var(--ink)}
.btn.pri{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.btn.pri:hover{background:var(--accent-hi); border-color:var(--accent-hi); color:var(--on-accent)}
.btn.soft{background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:600}
.btn.soft:hover{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-hi)}
.btn.sm{height:30px; padding:0 11px; font-size:12.5px; border-radius:var(--r-sm)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3); border-color:transparent; color:var(--ink)}
.btn.dang{background:var(--surface); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 28%, var(--line))}
.btn.dang:hover{background:var(--danger-soft); border-color:var(--danger); color:var(--danger)}
.btn.dang.solid{background:var(--danger); border-color:var(--danger); color:var(--on-accent); font-weight:600}
.btn.dang.solid:hover{background:var(--danger-hi); border-color:var(--danger-hi); color:var(--on-accent)}
.btn[disabled]{opacity:.45; cursor:not-allowed; pointer-events:none}
.btnrow{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}

/* ---------------- tabs ---------------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; padding:0 6px}
.tabs button{
  background:none; border:0; border-bottom:2px solid transparent; padding:11px 14px; cursor:pointer;
  font-size:13.5px; font-weight:500; color:var(--ink-3); white-space:nowrap; margin-bottom:-1px;
  transition:color .16s ease, border-color .16s ease;
}
.tabs button:hover{color:var(--ink-2)}
.tabs button.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
/* Settings ki patti — nau tab (v5.65 me Export incentives juda).
   Chhoti chaudai par, aur 1440px par bhi, ye patti khud side me
   scroll hoti hai.

   Sirf scroll hona kaafi nahi tha: 1440px par aakhri tab "Users &
   activity" poora kat jata tha, aur dikhne me lagta tha ki wo tab hi
   gayab ho gaya. Ab jis taraf aur tab bache hai, us kinare par text
   dhundhla hoke gayab hota hai — ye saaf batata hai ki aage kuch aur
   hai. `ovf-l` / `ovf-r` class tabsFade() lagati hai, aur sirf tab
   lagti hai jab us taraf scroll karne ko kuch ho. */
.stabs{scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.stabs.ovf-r:not(.ovf-l){
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent);
}
.stabs.ovf-l:not(.ovf-r){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38px);
          mask-image:linear-gradient(90deg,transparent,#000 38px);
}
.stabs.ovf-l.ovf-r{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent);
}
.stabs::-webkit-scrollbar{height:6px}
.stabs::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:6px}
.stabs::-webkit-scrollbar-track{background:transparent}
.tabs .step{
  font-family:var(--mono); font-size:10.5px; margin-right:7px; color:var(--ink-3);
  background:var(--surface-3); border-radius:4px; padding:1px 5px;
}
.tabs button.on .step{background:var(--accent-soft); color:var(--accent)}

/* ---------------- tables ---------------- */
.tw{overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table.dt{width:100%; border-collapse:collapse; font-size:13.5px; color:var(--ink)}
table.dt th{
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--surface-2); white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
table.dt td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink-2)}
table.dt tbody tr:last-child td{border-bottom:0}
table.dt tbody tr{transition:background .16s ease}
table.dt tbody tr:hover{background:var(--surface-3)}
table.dt tbody tr.on td{background:var(--accent-soft)}
table.dt tbody tr.warn td{background:var(--warn-soft)}
table.dt tbody tr.bad td{background:var(--danger-soft)}
table.dt td.num,table.dt th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
table.dt td b{color:var(--ink); font-weight:600}
table.dt td a{font-weight:600}
table.dt td input,table.dt td select{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:6px 9px; width:100%; height:34px; color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease;
}
table.dt td textarea{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; width:100%}
table.dt td input:hover,table.dt td select:hover{border-color:var(--line-strong)}
table.dt td input:focus,table.dt td select:focus,table.dt td textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--focus);
}
table.dt td input[type=checkbox]{width:15px; height:15px}
table.dt tfoot td{
  font-weight:700; background:var(--surface-2); border-top:1px solid var(--line-strong); border-bottom:0;
  font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink);
  position:sticky; bottom:0;
}
table.dt tfoot td.lab{font-family:var(--sans); font-variant-numeric:normal; letter-spacing:.05em; text-transform:uppercase; font-size:11px; font-weight:600; color:var(--ink-3)}
.row-x{
  background:none; border:0; color:var(--ink-3); cursor:pointer; padding:4px 7px; border-radius:var(--r-sm);
  line-height:1; transition:background .16s ease, color .16s ease;
  /* it deletes a row, so it gets a real target — the glyph stays the same size */
  min-width:28px; min-height:28px; display:inline-flex; align-items:center; justify-content:center;
}
.row-x:hover{background:var(--danger-soft); color:var(--danger)}

/* ---------------- pills / chips ---------------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent);
}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--danger-soft); color:var(--danger)}
.pill.mut{background:var(--surface-3); color:var(--ink-3)}
.pill.gold{background:var(--gold-soft); color:var(--gold)}

/* ---------------- chips (multi-select values) ---------------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px}
.chips:empty{display:none}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 6px 3px 10px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent-hi);
  font-size:12.5px; font-weight:600; line-height:1.5; white-space:nowrap;
}
.chip small{font-weight:400; opacity:.72; font-size:11px}
.chip button{
  background:none; border:0; color:inherit; cursor:pointer;
  font-size:12px; line-height:1; padding:3px 5px; border-radius:99px; opacity:.6;
}
.chip button:hover{opacity:1; background:color-mix(in srgb, var(--accent) 18%, transparent)}
button.chip{
  border:1px solid var(--line); cursor:pointer; padding:5px 12px;
  background:var(--surface); color:var(--ink-2); font-family:inherit;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
button.chip:hover{background:var(--surface-3); color:var(--ink); border-color:var(--line-strong)}
button.chip.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); font-weight:600}
button.chip.on small{opacity:.85}

/* ---------------- combobox (searchable dropdown) ---------------- */
.cb{position:relative}
.cb input{padding-right:26px}
.cb .cb-caret{position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; font-size:10px}
/* fixed, not absolute: the items table sits in an overflow:auto wrapper and
   was cutting the list down to a 32px sliver. combo() measures the input and
   sets left/top/width/max-height, so these are only the starting values. */
.cb-list{
  position:fixed; z-index:350; left:0; width:440px; top:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-md); max-height:300px; overflow-y:auto; display:none; padding:4px;
}
.cb-list.open{display:block}
.cb-list div{padding:8px 10px; cursor:pointer; font-size:13.5px; border-radius:var(--r-sm); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cb-list div small{display:block; color:var(--ink-3); font-size:11.5px; margin-top:1px}
.cb-list div:hover{background:var(--surface-3)}
.cb-list div.sel{background:var(--accent-soft); color:var(--accent)}
.cb-list div.sel small{color:var(--accent)}
.cb-list .empty{color:var(--ink-3); cursor:default; white-space:normal}
.cb-list .empty:hover{background:transparent}
/* "Add this" — sirf tab dikhta hai jab kuch mila hi na ho. Ek lakeer se
   alag kiya gaya hai taki galti se na daba jaye. */
.cb-add{
  margin-top:4px; border-top:1px solid var(--line); padding-top:8px!important;
  color:var(--accent)!important; font-weight:600; cursor:pointer; white-space:normal!important;
}
.cb-add small{display:block; color:var(--ink-3); font-weight:400; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cb-add:hover{background:var(--accent-soft)}

/* quick add form (party / product from the search box) */
.qaf{display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:12px}
.qaf .w2{grid-column:1 / -1}
@media (max-width:520px){ .qaf{grid-template-columns:1fr} }

/* ---------------- stats ---------------- */
.stats{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat{padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--accent-line); background:var(--surface-2); border-radius:var(--r-sm)}
.stat b{display:block; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink)}
.stat span{font-size:11.5px; color:var(--ink-3)}

/* ---------------- alerts ---------------- */
.alert{
  padding:11px 14px; border-radius:var(--r); font-size:13px; display:flex; gap:9px; align-items:flex-start;
  line-height:1.5; border:1px solid transparent;
}
.alert.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 22%, transparent)}
.alert.ok{background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 18%, transparent)}
.alert.bad{background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 22%, transparent)}
.alert b{font-weight:600}
.alert + .alert{margin-top:8px}

/* ---------------- doc preview ---------------- */
.docbar{
  display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; margin-bottom:var(--s4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 12px;
}
.docstage{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; overflow-x:auto; display:block;
}
.docstage>#stage{display:block; width:100%}
.docstage .sheet{box-shadow:var(--shadow-md); background:#fff; flex:0 0 auto}
.empty-state{text-align:center; padding:48px 20px; color:var(--ink-3)}
.empty-state h3{font-size:16px; color:var(--ink); margin-bottom:6px; font-weight:600}
.empty-state p{font-size:13.5px; margin:0 0 var(--s4); color:var(--ink-3)}

/* toast */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:420;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  padding:11px 18px; border-radius:var(--r); font-size:13.5px; font-weight:500;
  box-shadow:var(--shadow-md); max-width:min(520px,90vw);
  animation:toastIn .18s ease both;
}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}

/* login */
.login{min-height:100vh; display:grid; place-items:center; padding:20px}
.login .card{width:100%; max-width:360px}

/* ============================================================
   ACCOUNT MENU — top right

   Band: sirf gola aur ek chhota teer. Naam header me jagah kha raha
   tha aur har screen par dobara wahi baat keh raha tha.
   Khula: 262px ka chhota card — kaun ho, do kaam, aur nikalna.
   Theme, Keyboard shortcuts aur Company yahan se hataye gaye hain;
   wo app me apni jagah par ji-ke-tiyon chal rahe hain.

   Card header me baith jata hai (60) — sidebar aur search ke saath,
   dialog se neeche. Header ko `overflow` mat dena, warna kat jayega.
   ============================================================ */
.acct{position:relative; flex:0 0 auto; margin-left:auto}
.acct-b{
  display:flex; align-items:center; gap:3px; cursor:pointer;
  border:1px solid transparent; background:transparent; border-radius:999px;
  padding:3px 5px 3px 3px; font-family:var(--sans); color:var(--ink);
  transition:border-color .16s ease, background .16s ease;
}
.acct-b:hover{border-color:var(--line); background:var(--surface-2)}
.acct-b[aria-expanded="true"]{border-color:var(--line-strong); background:var(--surface-2)}
/* --on-accent, na ki #fff. Dark theme me accent halka hara hai, to safed
   akshar par contrast sirf 2.28:1 nikla (chahiye 4.5:1). Ye token isi ke liye hai. */
.acct-av{
  flex:0 0 auto; width:30px; height:30px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); display:grid; place-items:center;
  font-family:var(--disp); font-size:11.5px; font-weight:700; letter-spacing:.04em;
}
/* Size yahan se, `.lg` class se NAHI — stylesheet me ek aam `.lg` pehle
   se hai jo border-radius:var(--r) lagati hai, aur wo jeet kar gole ko
   chaukor bana deti thi. Parent se target karne par wo takkar hoti hi nahi. */
.acct-hd .acct-av{width:34px; height:34px; font-size:12.5px}
.acct-ca{color:var(--ink-3); font-size:8px; flex:0 0 auto; line-height:1}
/* fixed, absolute nahi: har screen ka apna header hai aur avatar unme
   kahin bhi baith sakta hai. acctPlace() left/top/width naap kar bharta
   hai — neeche ki values sirf shuruaat hain. */
.acct-card{
  position:fixed; left:0; top:0; z-index:60; display:none;
  width:262px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-md); padding:5px;
}
.acct-card.open{display:block}
.acct-hd{display:flex; gap:10px; align-items:center; padding:9px 9px 11px}
.acct-who{min-width:0}
.acct-who b{
  display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct-who small{
  display:block; color:var(--ink-3); font-size:11.5px; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct-ls{border-top:1px solid var(--line); padding-top:5px}
.acct-ls a,.acct-ft button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 9px; border:0; background:transparent; border-radius:7px;
  color:var(--ink); text-decoration:none; font-size:13.5px; font-family:var(--sans);
  cursor:pointer; line-height:1.2;
}
.acct-ls a svg,.acct-ft button svg{width:16px; height:16px; flex:0 0 16px; color:var(--ink-3)}
.acct-ls a:hover{background:var(--surface-3)}
.acct-ls a:hover svg{color:var(--ink-2)}
.acct-ft{border-top:1px solid var(--line); margin-top:5px; padding-top:5px}
.acct-ft button{color:var(--danger); font-weight:500}
.acct-ft button svg{color:var(--danger)}
.acct-ft button:hover{background:var(--danger-soft)}

/* ============================================================
   ITEM ROWS — pakadne ka nishaan aur khiskaane ka ishaara
   ============================================================ */
.items th.grp,.items td.grp{width:34px; padding-left:0; padding-right:4px}
.items .ig{
  display:grid; place-items:center; width:26px; height:26px; padding:0;
  border:1px solid transparent; background:transparent; border-radius:var(--r-sm);
  color:var(--ink-3); cursor:grab; line-height:0;
}
.items .ig svg{width:16px; height:16px}
.items .ig:hover{background:var(--surface-3); color:var(--ink-2); border-color:var(--line)}
.items .ig:focus-visible{outline:none; box-shadow:var(--focus); border-color:var(--accent)}
.items .ig:active{cursor:grabbing}
.items tr.dragging{opacity:.45}
.items tr.dragging td{background:var(--surface-2)}
/* jahan chhodi jayegi wahi ek lakeer — upar ya neeche, cursor ke hisaab se */
.items tr.dropbefore > td{box-shadow:inset 0 2px 0 0 var(--accent)}
.items tr.dropafter > td{box-shadow:inset 0 -2px 0 0 var(--accent)}
/* chhapne par ye column kabhi nahi jata — ye sirf kaam karne ka aujaar hai */
@media print{ .items th.grp,.items td.grp{display:none} }

/* modal
   ------------------------------------------------------------------
   PARTON KI SEEDHI (ek hi jagah, taki dobara na uljhe):
       20-90    header, sidebar, dropdown, global search
                (60 = .acct-card, account menu ka card)
       220      .dgfs  — Zoom (full screen) ka poora parda
       300      .edship — page ka chip
       350      .cb-list — suggestion list. Ye `fixed` hai (items table ke
                overflow box se bahar nikalne ke liye), isliye ab page ke
                parton me seedha aata hai: Zoom (220) aur page chip (300)
                ke UPER, dialog (400) ke NEECHE. Dhyan: `.modal` ki khulne
                wali animation me transform hai, aur transform apne andar
                ke `fixed` ko apne saath baandh leta hai — to kisi dialog
                ke ANDAR combo daalna ho to pehle wo animation hataani
                padegi, warna list 0.18s ke liye galat jagah baithegi.
       400      .modal-bg — koi bhi dialog. Zoom ke UPER, kyunki dialog
                ka matlab hi yahi hai: jab tak band na ho, aur kuch nahi.
       420      .toast — jo sandesh dialog ke kaam ka nateeja batata hai,
                wo dialog ke bhi uper.
   USER NE YE BUG PAKDA THA: Zoom (220) me "Edit…" dabane par dialog
   khulta to tha, par 100 par hone ki wajah se parde ke PEECHE. Screen
   par kuch nahi dikhta tha, isliye lagta tha ki button hi kaam nahi
   kar raha. Toast (200) ka bhi wahi haal tha — Zoom me har sandesh
   chup chaap gayab ho jata tha.
   ------------------------------------------------------------------ */
.modal-bg{
  position:fixed; inset:0; background:rgba(12,22,24,.45); z-index:400;
  display:grid; place-items:center; padding:16px; animation:fadeIn .16s ease both;
}
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  animation:modalIn .18s ease both;
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes modalIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ============================================================
   DASHBOARD — operations command centre
   ============================================================ */
.dash{max-width:1560px}

/* collapsible sidebar */
.brand{position:relative}
.side-t{
  position:absolute; right:10px; top:16px; width:26px; height:26px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink-3); cursor:pointer;
  font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease;
}
.side-t:hover{color:var(--accent); border-color:var(--accent-line)}
.shell.tight .side{width:60px; flex:0 0 60px}
.shell.tight .brand b,.shell.tight .brand span{display:none}
/* Collapsed me heading ka text nahi dikhta — uski jagah ek patli lakeer,
   taki group ka batwara phir bhi dikhe. */
.shell.tight .nav-lab{
  height:1px; padding:0; margin:9px 12px; overflow:hidden; color:transparent;
  background:var(--line);
}
.shell.tight .nav-lab:first-child{margin-top:4px}
.shell.tight .brand{padding:14px 0 12px; min-height:52px}
.shell.tight .side-t{right:auto; left:50%; transform:translateX(-50%); top:14px}
.shell.tight .nav{padding:6px 7px 14px}
.shell.tight .nav a{justify-content:center; padding:0; height:42px}
.shell.tight .nav a.on::before{display:none}
.shell.tight .nav a .tx{display:none}
.shell.tight .nav a .ic{width:auto; font-size:15px}

/* the app chrome title bar is redundant on the dashboard */
.main.no-top>.top{display:none}
@media (max-width:900px){.main.no-top>.top{display:flex}}

/* header */
.dhead{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:18px}
.dhead h2{font-family:var(--disp); font-size:21px; font-weight:700; letter-spacing:-.015em}
.dhead p{font-size:13px; color:var(--ink-3); margin-top:3px}
.dhead-a{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:100%; min-width:0}
.srch-btn{
  display:flex; align-items:center; gap:10px; min-width:280px; height:38px; padding:0 10px 0 14px;
  border:1px solid var(--line); background:var(--surface-2); border-radius:var(--r);
  color:var(--ink-3); font-size:13px; cursor:pointer; font-family:var(--sans);
  transition:border-color .15s ease;
}
.srch-btn:hover{border-color:var(--line-strong); background:var(--surface)}
.srch-btn span{flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.srch-btn svg{width:16px; height:16px; flex:0 0 16px; color:var(--ink-3)}
.icon-btn svg{width:17px; height:17px; display:block; margin:0 auto}
.icon-btn:hover{border-color:var(--line-strong); background:var(--surface-3); color:var(--ink-2)}
.srch-btn kbd{
  font-family:var(--mono); font-size:10.5px; border:1px solid var(--line); border-radius:4px;
  padding:2px 5px; color:var(--ink-3); background:var(--surface);
}
.srch-btn:focus-visible{border-color:var(--accent); box-shadow:var(--focus); outline:none}
.icon-btn{
  position:relative; width:38px; height:38px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r); cursor:pointer; font-size:15px; line-height:1; color:var(--ink-3);
  transition:border-color .16s ease, background .16s ease;
}
.icon-btn:hover{border-color:var(--line-strong)}
.icon-btn .dot{position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--danger)}

/* period selector */
.prow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.period{display:flex; gap:2px; flex-wrap:wrap; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px}
.period button{
  border:0; background:transparent; color:var(--ink-3); cursor:pointer; border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-family:var(--disp); font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.period button:hover{color:var(--ink)}
.period button.on{background:var(--accent); color:var(--on-accent)}
.period button:focus-visible{outline:none; box-shadow:var(--focus)}
.prow-n{font-size:12px; color:var(--ink-3); font-family:var(--mono)}
.crange{display:flex; gap:8px; align-items:center; margin:-4px 0 12px}
.crange input{width:auto}

/* KPI */
.kgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(166px,1fr))}
.kpi{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent-line);
  border-radius:var(--r-lg); padding:14px 16px 13px; cursor:pointer; font-family:var(--sans);
  display:flex; flex-direction:column; gap:2px; transition:border-color .15s ease, box-shadow .15s ease;
}
.kpi:hover{border-color:var(--line-strong); border-left-color:var(--accent); box-shadow:var(--shadow-sm)}
.kpi.warn{border-left-color:var(--warn)}
.kpi.bad{border-left-color:var(--danger)}
.kpi.good{border-left-color:var(--accent)}
.kpi.gold{border-left-color:var(--gold)}
.kpi.gold b{color:var(--ink)}
.kpi-l{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.kpi b{font-size:26px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.15; color:var(--ink);
  min-width:0; overflow-wrap:anywhere}
/* a long figure steps down rather than being cut off — see bigCls() in dashboard.js */
.kpi b.k9{font-size:22px; letter-spacing:-.03em}
.kpi b.k12{font-size:19px; letter-spacing:-.03em}
.kpi b.k15{font-size:16px; letter-spacing:-.02em; line-height:1.25}
.kpi-s{font-size:11.5px; color:var(--ink-3)}
.kpi-s i{font-style:normal}
.kpi-s i.up{color:var(--accent)}
.kpi-s i.down{color:var(--danger)}

/* panels */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); margin-top:var(--s4); box-shadow:var(--shadow-sm)}
.panel-h{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
.panel-h h3{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.panel-h .grow{flex:1}
.panel-b{padding:14px 16px}
.panel.sk,.kpi.sk{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); border-color:transparent; min-height:86px}
.sec-h{
  display:flex; align-items:baseline; gap:10px; margin:var(--s7) 0 0;
  font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.sec-h span{font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--ink-3); font-family:var(--mono)}
.lnk{font-size:12.5px; color:var(--accent); font-weight:600}
.empty-box{
  padding:16px; border:1px dashed var(--line); border-radius:var(--r);
  color:var(--ink-3); font-size:13px; text-align:center; background:var(--surface-2);
}
.empty-box.big{padding:26px 14px}

/* two column body */
.dcols{display:grid; gap:16px; grid-template-columns:minmax(0,1fr) 340px; align-items:start}
.dcol-main,.dcol-side{min-width:0}

/* needs attention */
.attn{display:flex; flex-direction:column}
.attn-r{
  display:flex; align-items:center; gap:11px; padding:9px 6px; border-radius:var(--r-sm);
  border-bottom:1px solid var(--line); color:var(--ink-2); font-size:13px;
  transition:background .15s ease;
}
.attn-r:last-child{border-bottom:0}
.attn-r:hover{background:var(--surface-2)}
.lv{width:8px; height:8px; border-radius:50%; flex:0 0 8px}
.lv3{background:var(--danger)} .lv2{background:var(--warn)} .lv1{background:var(--accent-line)} .lv0{background:var(--accent)}
.attn-n{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink); flex:0 0 auto; min-width:96px}
.attn-m{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.attn-m em{font-style:normal; color:var(--ink-3); font-size:12px}
.attn-b{color:var(--ink-3); font-size:12px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.attn-go{color:var(--accent); font-size:12px; font-weight:600; flex:0 0 auto; opacity:0; transition:opacity .15s ease}
.attn-r:hover .attn-go{opacity:1}
.attn.small .attn-r{font-size:12.5px; padding:7px 6px}

/* today's work */
.todos{display:flex; flex-direction:column; gap:1px}
.todo{display:flex; gap:10px; align-items:flex-start; padding:8px 6px; border-radius:var(--r-sm); color:var(--ink-2); font-size:13px}
.todo:hover{background:var(--surface-2)}
.todo-b{width:13px; height:13px; border:1.5px solid var(--line-strong); border-radius:3px; margin-top:2px; flex:0 0 13px}
.todo:hover .todo-b{border-color:var(--accent)}
.todo-t{display:flex; flex-direction:column; min-width:0}
.todo-t em{font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}

/* readiness */
.rds{display:flex; flex-direction:column; gap:9px}
.rd{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2)}
.rd-n{font-family:var(--mono); font-size:12px; flex:0 0 84px; overflow:hidden; text-overflow:ellipsis}
.rd-t{flex:1; height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.rd-t i{display:block; height:100%; border-radius:99px; background:var(--accent)}
.rd-t i.mid{background:var(--warn)} .rd-t i.low{background:var(--danger)}
.rd-p{font-variant-numeric:tabular-nums; font-size:12px; color:var(--ink-3); flex:0 0 34px; text-align:right}

/* quick actions */
.qa{display:flex; flex-wrap:wrap; gap:8px}
.qa .btn{flex:1 1 auto; justify-content:center}

/* shipment table */
.tbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.tbar .tq{flex:1 1 260px; min-width:180px}
.tbar select{width:auto; flex:0 0 auto; min-width:130px; max-width:210px}
table.dt.ships td{font-size:13px; padding-left:9px; padding-right:9px}
table.dt.ships th{padding-left:9px; padding-right:9px}
table.dt.ships tbody tr{cursor:pointer; transition:background .15s ease}
table.dt.ships tbody tr:hover{background:var(--surface-2)}
table.dt.ships th[data-sort]{cursor:pointer; user-select:none; white-space:nowrap}
table.dt.ships th[data-sort] i{font-style:normal; font-size:9px; margin-left:3px; color:var(--accent)}
/* ---- v6.04: kaam ke button hamesha pahunch me ----
   Teen button ek "⋯" me aa gaye, jisse table 1440px par poori fit
   ho gayi. Chhoti screen par table phir bhi apne dabbe me khisakti
   hai -- aur us haalat me button daayein bahar nikal jaate the.
   Isliye aakhri khaana daayein CHIPKA diya gaya: table khisakti
   rahe, button nazar me rahe. Apna background zaroori hai, warna
   neeche ki rows iske aar-paar dikhti hai. */
table.dt.ships thead th:last-child,
table.dt.ships tbody td:last-child{position:sticky; right:0; z-index:3}
table.dt.ships thead th:last-child{background:var(--surface-2); z-index:4}
table.dt.ships tbody td:last-child{background:var(--surface)}
table.dt.ships tbody tr:hover td:last-child{background:var(--surface-2)}
/* Chipke khaane ke baayein ek halki lakeer -- pata chale ki uske
   aage aur khaane hai. */
table.dt.ships thead th:last-child::before,
table.dt.ships tbody td:last-child::before{content:''; position:absolute; top:0; bottom:0;
  left:0; width:1px; background:var(--line)}
table.dt .nw{white-space:nowrap}
table.dt .ell{max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.dt .docs{font-family:var(--mono); color:var(--ink-3)}
table.dt .docs.ok{color:var(--accent); font-weight:600}
.stt{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.05em;
  padding:3px 9px; border-radius:99px; white-space:nowrap; border:1px solid transparent;
}
.st-draft{background:var(--surface-3); color:var(--ink-3)}
.st-prog{background:var(--accent-soft); color:var(--accent)}
.st-att{background:var(--warn-soft); color:var(--warn)}
.st-ready{background:var(--ok-soft); color:var(--ok); font-weight:700}
.st-done{background:var(--ok-soft); color:var(--ok); border-color:var(--accent-line)}
.pager{display:flex; align-items:center; gap:12px; justify-content:flex-end; margin-top:12px; font-size:12px; color:var(--ink-3)}

/* analytics */
.agrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start}
.agrid.two{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.chart{display:flex; flex-direction:column; gap:6px}
.chart svg{width:100%; height:104px; display:block}
.chart-x{display:flex; font-size:10.5px; color:var(--ink-3); font-family:var(--mono)}
.rank{display:flex; flex-direction:column; gap:9px}
.rank-r{display:flex; align-items:center; gap:10px; font-size:12.5px}
.rank-l{flex:0 0 124px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.rank-t{flex:1; height:8px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.rank-t i{display:block; height:100%; background:var(--accent); opacity:.8; border-radius:99px}
.rank-v{flex:0 0 auto; font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; min-width:62px}
.docs-a{display:flex; flex-direction:column; gap:10px}
.docr{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2)}
.docr span:first-child{flex:0 0 156px}
.docb{flex:1; height:7px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.docb i{display:block; height:100%; background:var(--accent); border-radius:99px}
.docb i.mid{background:var(--warn)} .docb i.low{background:var(--danger)}
.docr b{font-family:var(--mono); font-size:12px; flex:0 0 38px; text-align:right}
.mini{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.mini.wide{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.mini div{display:flex; flex-direction:column; gap:2px; padding:9px 11px; background:var(--surface-2); border-radius:var(--r-sm)}
.mini span{font-size:11px; color:var(--ink-3); font-family:var(--disp); letter-spacing:.04em}
.mini b{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}

/* notifications */
.note{
  position:absolute; right:0; top:44px; width:330px; z-index:60; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-md); overflow:hidden;
}
.dhead-a{position:relative}
.note-h{padding:10px 14px; border-bottom:1px solid var(--line); font-family:var(--disp); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.note a{display:flex; gap:10px; align-items:flex-start; padding:9px 14px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2)}
.note a:last-child{border-bottom:0}
.note a:hover{background:var(--surface-2)}
.note a .lv{margin-top:5px}
.note a span span{display:block}
.note a b{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink)}

/* global search */
.gsw{position:fixed; inset:0; background:rgba(17,34,42,.34); z-index:90; display:flex; justify-content:center; padding-top:11vh}
.gsb{width:min(620px,92vw); height:max-content; max-height:74vh; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-md); display:flex; flex-direction:column; overflow:hidden}
.gsb input{border:0; border-bottom:1px solid var(--line); border-radius:0; padding:15px 18px; font-size:15px}
.gsb input:focus{outline:0; box-shadow:none}
.gsr{overflow-y:auto; padding:6px 0}
.gsg{padding:9px 18px 4px; font-family:var(--disp); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.gsi{padding:8px 18px; cursor:pointer; display:flex; gap:12px; align-items:baseline; font-size:13.5px}
.gsi:hover,.gsi.on{background:var(--accent-soft)}
.gsi b{font-weight:600; color:var(--ink)}
.gsi span{color:var(--ink-3); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gse{padding:22px 18px; color:var(--ink-3); font-size:13px; text-align:center}
.gsf{padding:9px 18px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-3); font-family:var(--mono)}

@media (max-width:1180px){
  .dcols{grid-template-columns:minmax(0,1fr)}
  .agrid.two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .dhead-a{margin-left:0; width:100%}
  .srch-btn{min-width:0; flex:1 1 100%}
  .agrid{grid-template-columns:minmax(0,1fr)}
  .kgrid{grid-template-columns:repeat(auto-fit,minmax(142px,1fr))}
  .tbar select,.tbar .tq{flex:1 1 100%; min-width:0; width:100%}
  .rank-l{flex:0 0 92px}
  .docr span:first-child{flex:0 0 108px}
  .mini{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
  .note{width:min(330px,92vw)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
}

/* ============================================================
   DOCUMENT FORMAT settings
   ============================================================ */
.tabs.sub{margin:-18px -18px 0; border-bottom:1px solid var(--line); background:var(--surface-2); border-radius:var(--r-lg) var(--r-lg) 0 0}
/* apne banaye hue document: patti ke aakhir me "+ New document",
   aur us document ke liye ek chhoti patti */
.tabs .tab-add{color:var(--accent); font-weight:600; margin-left:auto; border-bottom-color:transparent}
.tabs .tab-add:hover{color:var(--accent); border-bottom-color:var(--accent)}
.tpl-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 -18px; padding:9px 18px; background:var(--accent-soft);
  border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2);
}
.tpl-bar b{color:var(--accent); font-weight:600}
.tpl-bar span{flex:1 1 auto; min-width:0; color:var(--ink-3)}
.tpl-bar .btn{flex:0 0 auto}

/* apne banaye document ka editor.
   Khaana chunne ke liye asli <td> par click lagta hai, isliye yahan sirf
   rang badalta hai — koi aisi cheez nahi jo layout hilaye. */
.tplw td{transition:background .12s ease}
.tplw td:hover{background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.tplw td.tplsel{background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent)}
.dgbar.tplbar{row-gap:8px}
.tplg{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding-left:10px; border-left:1px solid var(--line); min-width:0}
.tplg.first{padding-left:0; border-left:0}
.tpltb [data-tb="undo"], .tpltb [data-tb="redo"]{font-size:15px; line-height:1; padding:0 9px; min-width:30px}
.tplg i{
  font-style:normal; font-family:var(--disp); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-right:2px;
}
.tplbar .btn.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.tplbar .btn[disabled]{opacity:.42; cursor:default}
.tplal{padding-left:7px; padding-right:7px}

/* "Start from" ke do card */
.tplst{display:grid; gap:8px}
.tplsc{
  display:grid; grid-template-columns:auto 1fr; gap:2px 9px; align-items:start;
  border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.tplsc:hover{border-color:var(--line-strong)}
.tplsc input{margin:2px 0 0; grid-row:1 / span 2}
.tplsc b{font-size:13px; color:var(--ink)}
.tplsc span{font-size:11.5px; color:var(--ink-3); line-height:1.55}
.tplsc:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

/* {token} wale khaane par nishaan — page par unki bhari hui value dikhti
   hai, isliye warna pata hi nahi chalta ki kaun juda hua hai */
.tplw td.tpltok{box-shadow:inset 0 0 0 1px var(--ok), inset 0 -2px 0 var(--ok)}
/* ------------------------------------------------------------------
   FRAME — khaane ke ANDAR ka apna grid (nested <table>)

   Do baat jaan bujh kar aisi hai:

   1. Bahar wala <td> apni padding chhod deta hai, taki andar ka grid
      uske kinare tak jaye. Warna frame ke chaaro taraf ek patli khali
      patti reh jati — aur wo chhapai me bhi jati.

   2. Frame ke khaane ki apni lakeer aur padding KAHIN NAHI likhi —
      wo `.sheet td` se apne aap milti hai, yaani Document format ki
      wahi setting jo baaki poore page par lagti hai. Isliye frame ke
      andar ka grid bahar jaisa hi dikhta hai, aur theme badalne par
      saath me badalta hai.

   Sirf frame ke BAAHRI kinare hatate hai: wo lakeer bahar wale <td> ne
   pehle hi kheench di hai, dobara kheenchne se wahan 2 lakeer ho jati.
   Aur nested table par page ka outer border (fmtRule ka `.sheet table`)
   nahi lagna chahiye — `.sheet table.tplfr` uska specificity jeet leta.
   ------------------------------------------------------------------ */
.sheet td.hasfr{padding:0!important; vertical-align:top}
.sheet table.tplfr{width:100%; border-collapse:collapse; table-layout:fixed; margin:0; border:0}
.sheet table.tplfr > tbody > tr:first-child > td{border-top:0}
.sheet table.tplfr > tbody > tr:last-child > td{border-bottom:0}
.sheet table.tplfr > tbody > tr > td:first-child{border-left:0}
.sheet table.tplfr > tbody > tr > td:last-child{border-right:0}
/* editor me: kis khaane me frame hai, aur frame ke andar ka chunaav */
.tplw table.tplfr td{transition:background .12s ease; cursor:pointer}
.tplw table.tplfr td:hover{background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.tplw table.tplfr td.tplsel{background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent)}
.tplw table.tplfr td.tpltok{box-shadow:inset 0 0 0 1px var(--ok), inset 0 -2px 0 var(--ok)}
.tplw table.tplfr tr[data-rep] td{background:color-mix(in srgb, var(--gold-soft) 60%, transparent)}
.dg-col.fr{width:7px}
.dg-col.fr b{background:var(--gold)}

/* repeat row: editor me ek hi dikhti hai, isliye saaf nishaan chahiye */
.tplw tr[data-rep] td{background:color-mix(in srgb, var(--gold-soft) 60%, transparent)}
.tplw td.tplrep{box-shadow:inset 0 0 0 1px var(--gold), inset 3px 0 0 var(--gold)}
.tplw tr[data-rep] td.tplsel, .tplw td.tplrep.tplsel{box-shadow:inset 0 0 0 2px var(--accent)}
.tplw td.tpltok:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.tplw td.tplsel.tpltok{box-shadow:inset 0 0 0 2px var(--accent)}

/* label + token picker ka modal */
.modal.tplm{max-width:620px}
.tplpv{margin-top:10px}
.tplpv:not(:empty){
  display:grid; gap:3px; border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r-sm); padding:9px 11px; background:var(--surface-2);
}
.tplpv.warn:not(:empty){border-left-color:var(--warn)}
.tplpv b{
  font-family:var(--disp); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.tplpv span{font-size:12.5px; color:var(--ink); line-height:1.55; white-space:pre-wrap}
.tplpv span i{color:var(--ink-3)}
.tplpv u{text-decoration:none; font-size:11.5px; color:var(--warn); font-family:var(--mono)}
.tpltl{
  max-height:260px; overflow-y:auto; margin-top:8px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2); scrollbar-gutter:stable;
}
.tpltg{
  position:sticky; top:0; z-index:1; background:var(--surface-2); padding:7px 11px 3px;
  font-family:var(--disp); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.tpltk{
  display:grid; grid-template-columns:minmax(0,132px) minmax(0,1fr) minmax(0,150px);
  gap:10px; align-items:baseline; width:100%; text-align:left; background:none; border:0;
  border-top:1px solid var(--line); padding:6px 11px; cursor:pointer; font:inherit;
}
.tpltg + .tpltk{border-top:0}
.tpltg.rep{color:var(--gold); background:var(--surface-2)}
.tpltk:hover{background:var(--accent-soft)}
.tpltk code{font-family:var(--mono); font-size:11.5px; color:var(--accent)}
.tpltk i{font-style:normal; font-size:12px; color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tpltk em{
  font-style:normal; font-size:11.5px; color:var(--ink); font-family:var(--mono);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;
}
.tpltk em.no{color:var(--ink-3); font-family:var(--sans); font-size:11px}
@media (max-width:620px){
  .tpltk{grid-template-columns:1fr; gap:1px}
  .tpltk em{text-align:left}
}

/* ---- editing toolbar ----
   Ye page ke BAHAR rehta hai, kyunki (a) #fmPrev par app ki aam `.grid`
   utility lagi hai to uske andar do bachche bagal-bagal chale jate hai,
   aur (b) scroll karne wale dabbe ke andar sticky toolbar page ke khaano
   ko dhak leta hai. Panel me ye docGridBar se aata hai, Zoom me .dgfs ki
   apni patti ban kar. */
.tpltb{
  flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:5px;
  padding:8px 12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); row-gap:7px; margin:0 0 10px; min-width:0;
}
.dgfs > .tpltb{border-radius:0; border-width:0 0 1px; margin:0}
/* Count ki apni poori line. Warna uska lamba-chhota hona toolbar ki
   lipatne wali unchai badal deta hai, page khisak jata hai, aur cursor
   ke neeche doosra khaana aa jata hai — wahi bug jo test ne pakda. */
.tplcount{
  flex:0 0 100%; font-size:11px; color:var(--ink-3); font-family:var(--mono);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tpltb .btn{flex:0 0 auto}
.tpltb .btn.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.tpltb .btn[disabled], .tpltb select[disabled], .tpltb input[disabled]{opacity:.42; cursor:default}
.tpltb .tplal{padding-left:7px; padding-right:7px}
.tpltip{
  flex:0 0 100%; font-size:11px; color:var(--ink-3); line-height:1.5;
  font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Toolbar ka dropdown. NAAM JAAN BUJH KAR `tpldd` hai, `tplsel` nahi:
   `tplsel` ka matlab "chuna hua khaana" hai, aur do cheezon ka ek naam
   rakhna mahenga padta hai — mera apna test `.tplsel` gin kar 1 ki jagah
   4 bata raha tha (3 dropdown + 1 khaana), aur wo galat ginti kal kisi
   asli bug ko chhupa sakti thi. */
select.tpldd.wide{max-width:230px}
select.tpldd{
  flex:0 0 auto; height:28px; padding:0 22px 0 7px; font-size:11.5px; min-width:0; width:auto;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
}
input.tplnum{
  flex:0 0 auto; width:56px; height:28px; padding:0 6px; font-size:11.5px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
}
/* rang chunne wala chhota button: andar asli input chhupa hua */
.tplcol{
  flex:0 0 auto; position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:28px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); cursor:pointer; overflow:hidden;
}
.tplcol:hover{border-color:var(--line-strong)}
.tplcol > span{font-size:12px; font-weight:700; line-height:1; color:var(--ink-2); pointer-events:none}
.tplcol::after{
  content:''; position:absolute; left:3px; right:3px; bottom:2px; height:3px; border-radius:2px;
  background:var(--sw,transparent);
}
.tplcol.set::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.tplcol input{position:absolute; inset:0; opacity:0; width:100%; height:100%; padding:0; border:0; cursor:pointer}
.tplcol input[disabled]{cursor:default}


@media (max-width:760px){
  .tpltb{gap:4px}
  .tplg{padding-left:6px}
}
.fmt-top{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:nowrap}
.fmt-top .sec-note{margin:0; flex:1 1 auto; min-width:0; max-width:none}
.fmt-top #fmSave{flex:0 0 auto; margin-left:auto}
.fmt-top .fmt-dirty{margin-left:auto}
.fmt-top .fmt-dirty + #fmSave{margin-left:0}
.fmt-dirty{
  flex:0 0 auto; font-size:11.5px; font-weight:600; color:var(--warn); background:var(--warn-soft);
  border:1px solid var(--warn); border-radius:999px; padding:3px 10px; white-space:nowrap;
}
@media (max-width:820px){ .fmt-top{flex-wrap:wrap} }
.fmt{
  display:grid; gap:20px; grid-template-columns:minmax(0,390px) minmax(0,1fr);
  align-items:stretch; overflow:hidden;
}
/* settings apne andar scroll karti hain, page bahar se nahi */
.fmt-l{min-width:0; overflow-y:auto; overflow-x:hidden; padding-right:10px; scrollbar-gutter:stable}
.fmt-g{margin-bottom:20px}
.fmt-g h4{
  display:flex; align-items:center; font-family:var(--disp); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:9px;
}
.fmt-f{display:flex; align-items:center; gap:10px; padding:5px 0; min-height:32px}
.fmt-f>label{flex:0 0 152px; font-size:12.5px; color:var(--ink-2); text-transform:none; letter-spacing:0}
.fmt-f.own>label{color:var(--accent); font-weight:600}
.fmt-f select{flex:1; min-width:0}
.fmt-s{flex:1; display:flex; align-items:center; gap:8px; min-width:0}
.fmt-s input[type=range]{flex:1; min-width:60px; accent-color:var(--accent); height:18px; padding:0}
.fmt-s b{font-family:var(--mono); font-size:12px; min-width:34px; text-align:right; font-variant-numeric:tabular-nums}
.fmt-s i{font-style:normal; font-size:11px; color:var(--ink-3); min-width:22px}
.fmt-c input[type=color]{width:40px; height:26px; padding:2px; border-radius:var(--r-sm); cursor:pointer}
/* one row per typography role: size · weight · colour */
/* style row do line me: naam + uski line upar, controls niche —
   meta ko poori chaudai milti hai aur tap target bhi bade rehte hain */
.fmt-f.role{flex-wrap:wrap; row-gap:3px; padding:7px 0}
.fmt-f.role>label{flex:1 1 100%; font-size:12.5px}
.fmt-f.role .fmt-s{flex:1 1 130px}

/* Document text: har line ke naam ke saath Bold ka tick */
.f > label .txbold{float:right; display:inline-flex; align-items:center; gap:5px;
  font-weight:400; text-transform:none; letter-spacing:0}
.f > label .txbold input{width:auto; height:auto; margin:0; cursor:pointer}
.f > label .txbold i{font-style:normal; font-size:11px; color:var(--ink-3)}
.f > label .txbold:hover i{color:var(--ink-2)}
.fmt-f.role .fmt-s{gap:6px}
.fmt-f.role .fmt-s input[type=range]{min-width:48px}
.fmt-f.role .fmt-s b{min-width:28px}
.fmt-w{flex:0 0 74px; height:26px; padding:0 4px; font-size:11.5px; min-width:0}
.fmt-f.role .fmt-c input[type=color]{width:26px; height:26px}
.fmt-x{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-3); cursor:pointer;
  width:24px; height:24px; border-radius:var(--r-sm); font-size:12px; line-height:1; flex:0 0 24px;
}
.fmt-x:hover{color:var(--accent); border-color:var(--accent-line)}
.fmt-th{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.fmt-th button{
  text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
  padding:9px 11px; cursor:pointer; font-family:var(--sans); transition:border-color .15s ease;
}
.fmt-th button:hover{border-color:var(--line-strong)}
.fmt-th button.on{border-color:var(--accent); background:var(--accent-soft)}
.fmt-th b{display:block; font-size:12.5px; color:var(--ink)}
.fmt-th span{display:block; font-size:11px; color:var(--ink-3); margin-top:2px}
/* layout section list — Settings › Document format › (each document) */
.lay{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.lay-r{
  display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-bottom:1px solid var(--line); transition:background .15s ease;
}
.lay-r:last-child{border-bottom:0}
.lay-r:hover{background:var(--surface-2)}
.lay-r.off{background:var(--surface-2)}
.lay-r.off .lay-ck span{color:var(--ink-3); text-decoration:line-through}
.lay-ck{display:flex; align-items:center; gap:9px; flex:1; min-width:0; cursor:pointer; margin:0}
.lay-ck input{accent-color:var(--accent); width:15px; height:15px; flex:0 0 15px; cursor:pointer}
.lay-ck input:disabled{cursor:default; opacity:.75}
.lay-ck span{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lay-mv{display:flex; gap:4px; flex:0 0 auto}
.lay-mv button{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer;
  width:24px; height:24px; border-radius:var(--r-sm); font-size:12px; line-height:1;
}
.lay-mv button:hover:not(:disabled){color:var(--accent); border-color:var(--accent-line)}
.lay-mv button:disabled{opacity:.3; cursor:default}
.lay-pin{
  flex:0 0 auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:3px 7px;
}
.fmt-r{min-width:0; display:flex; flex-direction:column; overflow:hidden}
.fmt-prev-h{
  display:flex; justify-content:space-between; font-family:var(--disp); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:8px;
}
.fmt-prev{
  flex:1; min-height:0; background:var(--surface-3); border:1px solid var(--line);
  border-radius:var(--r); padding:4px; overflow:auto;
}
.fmt-prev .sheet{box-shadow:var(--shadow-sm)}
@media (max-width:1100px){
  .fmt{grid-template-columns:minmax(0,1fr); height:auto!important; overflow:visible}
  .fmt-l,.fmt-r{overflow:visible}
  .fmt-prev{max-height:70vh}
}

/* ============================================================
   THEME SWITCH
   ============================================================ */
/* Sidebar ke neeche wala theme button hata diya gaya — wo control ab
   account menu me hai (.acct-ap). Uske .side-th / .side-foot rule bhi
   saath hi hata diye, taki mara hua CSS pada na rahe. */

/* Account menu ka Appearance — Settings ke upar */
.acct-ap{border-top:1px solid var(--line); padding:9px 9px 10px}
.acct-ap-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:0 2px 7px; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-family:var(--disp);
}
.acct-ap-h b{font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--ink-2); font-weight:600}
.thsw.acct{display:flex; width:100%; padding:2px}
.thsw.acct button{flex:1 1 0; min-width:0; justify-content:center; gap:5px; padding:7px 4px; font-size:12px}
.thsw.acct button svg{width:14px; height:14px; flex:0 0 14px}
/* 262px ke card me teen naam — bahut tang jagah par sirf icon reh jate hai,
   par aria-label aur title har button par hai, to matlab kho-ta nahi. */
@media (max-width:360px){ .thsw.acct button span{display:none} }

.thsw{display:inline-flex; gap:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:3px}
.thsw button{
  display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; cursor:pointer;
  color:var(--ink-3); font:inherit; font-size:12.5px; font-weight:500;
  padding:7px 13px; border-radius:var(--r-sm);
  transition:background .16s ease, color .16s ease;
}
.thsw button svg{width:15px; height:15px; flex:0 0 15px}
.thsw button:hover{color:var(--ink)}
.thsw button.on{background:var(--surface); color:var(--accent); font-weight:600; box-shadow:var(--shadow-sm)}
.thsw.big button{padding:9px 16px; font-size:13.5px}

/* ============================================================
   SHIPMENT WORKSPACE
   One coherent workspace for the five steps of a shipment.
   Layout and colour only — every value comes from the tokens
   at the top of this file.
   ============================================================ */
.wsp{width:100%; max-width:100%; padding:0}
.wsb{padding:18px 20px 4px; width:100%; max-width:1320px}
.wsp.wide .wsb{max-width:1780px}

/* sticky top block: identity + steps */
.wstop{position:sticky; top:0; z-index:24; background:var(--surface); border-bottom:1px solid var(--line)}
.wshead{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:11px 20px 10px}
/* Pichhli / agli shipment ke teer. Ginti beech me, taki pata rahe ki
   list me kahan khade ho. */
.wsh-hop{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.wsh-hop i{
  font-style:normal; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  min-width:3.2em; text-align:center; font-variant-numeric:tabular-nums; user-select:none;
}
.wsh-hop .icon-btn[disabled]{opacity:.32; cursor:default}
.wsh-hop .icon-btn[disabled]:hover{background:none; border-color:var(--line)}
/* Filter laga ho to ginti ke saath ek chhota nishaan -- warna "3/32"
   dekh kar lagta hai ki shipment gayab ho gayi. (v5.69) */
.wsh-hop i.filt{color:var(--accent)}
.wsh-hop i u{text-decoration:none; font-size:9px; vertical-align:top; margin-left:1px}
@media (max-width:760px){ .wsh-hop i{display:none} }

/* Shipment khulte waqt halka sa uper aana. Sirf dikhawa. */
/* DIKHAWE KI CHEEZ KABHI CONTENT CHHUPA NA SAKE. (v5.71)
   Pehle yahan `.wsp` ko SEEDHA opacity:0 kar diya jata tha aur use
   dikhane ka kaam JS ke zimme tha (`.in` class). Documents page apni
   `.wsp` banata hai par `.in` kabhi nahi lagata tha -- yaani poora
   documents page (header, tab patti aur preview, sab) ban to jata tha
   par opacity:0 par ANDEKHA reh jata tha. Safed page, aur link phir bhi
   hover hote the -- kyunki wo the, bas dikhte nahi the.
   Ab chhupne ke liye `.fade` maangna padta hai. Jo page `.fade` nahi
   lagata wo hamesha dikhta hai; `.in` bhoolne ka sabse bura anjaam ab
   "animation nahi chali" hai, "page gayab" nahi. */
.wsp{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .wsp.fade{opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease}
  .wsp.fade.in{opacity:1; transform:none}
}

.wsh-id{display:flex; flex-direction:column; min-width:0; gap:1px}
.wsh-id b{font-family:var(--mono); font-size:16.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); line-height:1.2}
.wsh-id span{font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52ch}
.wsh-id span i{font-style:normal; color:var(--ink-2); font-weight:500}
.wsh-id span u{text-decoration:none; color:var(--accent-line); padding:0 4px}
.wsh-a{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rdy{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-3); font-family:var(--mono); white-space:nowrap}
.rdy i{display:block; width:60px; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.rdy i u{display:block; height:100%; background:var(--accent); border-radius:99px; text-decoration:none}
.rdy i u.mid{background:var(--warn)}
.rdy i u.low{background:var(--danger)}
.sv{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); white-space:nowrap; padding:0 2px}
.sv::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 7px}
.sv.busy::before{background:var(--warn)}

/* step navigation */
.steps{display:flex; align-items:stretch; overflow-x:auto; padding:0 12px; scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.steps button{
  display:flex; align-items:center; gap:9px; background:none; border:0; border-bottom:2px solid transparent;
  padding:10px 15px 11px; cursor:pointer; font-size:13.5px; font-weight:500; color:var(--ink-3);
  white-space:nowrap; margin-bottom:-1px; font-family:var(--sans);
  transition:color .16s ease, border-color .16s ease;
}
.steps button:hover{color:var(--ink-2)}
.steps button.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.steps .n{
  width:21px; height:21px; flex:0 0 21px; border-radius:50%; border:1.5px solid var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10.5px;
  font-style:normal; color:var(--ink-3); line-height:1;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.steps button:hover .n{border-color:var(--accent-line)}
.steps button.done .n{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.steps button.on .n{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.steps .w{width:6px; height:6px; border-radius:50%; flex:0 0 6px; background:var(--warn); margin-left:1px}
.steps .w.bad{background:var(--danger)}

/* footer: previous / next */
.wsfoot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 20px 26px; width:100%; max-width:1320px;
}
.wsp.wide .wsfoot{max-width:1780px}
.wsfoot .grow{flex:1}

@media (max-width:900px){
  .wstop{position:static}
  .wshead{padding:10px 16px}
  .wsb{padding:14px 16px 4px}
  .wsfoot{padding:12px 16px 22px}
  .wsh-a{margin-left:0; width:100%}
}

/* ---------------- form rhythm inside the workspace ---------------- */
.mh em{
  font-style:normal; font-size:11.5px; letter-spacing:0; text-transform:none;
  color:var(--ink-3); font-weight:400;
}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.f.w2{grid-column:span 2}
@media (max-width:1180px){
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:660px){
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}
  .f.w2{grid-column:span 1}
}

/* calculated / auto-filled output field — figures keep mono, text does not */
.f.out input{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); font-weight:500;
}
.f.out input.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600}
.f.out.big input{height:46px; font-size:17px; letter-spacing:-.01em}
.f.out input:hover{border-color:var(--accent-line)}

/* small checkbox line under a field */
.ck{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--ink-3);
}
.ck:hover{color:var(--ink-2)}
.ck input{width:auto}

/* party preview */
.pty{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); margin-top:12px}
.pty-c{border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); padding:12px 14px; min-width:0}
.pty-c h5{
  font-family:var(--disp); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0 0 6px;
}
.pty-c b{display:block; font-size:14px; color:var(--ink); font-weight:600; line-height:1.35}
.pty-c p{margin:5px 0 0; font-size:12.5px; color:var(--ink-2); white-space:pre-line; line-height:1.5}

/* route flow */
.flow{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px;
  padding:11px 15px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.flow div{min-width:0}
.flow span{
  display:block; font-family:var(--disp); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}
.flow b{display:block; font-size:13px; color:var(--ink); font-weight:600; margin-top:2px}
.flow .ar{color:var(--accent-line); font-size:14px; flex:0 0 auto}

/* ---------------- items ---------------- */
.card.blk>.card-h{background:var(--surface-2); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 16px}
.card.blk>.card-h h3{
  font-size:14.5px; text-transform:none; letter-spacing:-.01em; color:var(--ink); font-weight:600;
}
.blk-n{
  width:26px; height:26px; flex:0 0 26px; border-radius:var(--r-sm); background:var(--accent-soft);
  color:var(--accent); font-family:var(--mono); font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}
.blk-s{font-size:12px; color:var(--ink-3); font-family:var(--mono)}
table.dt.items td{padding:5px 9px}
table.dt.items th{padding:9px 9px; background:var(--surface-2)}
table.dt.items td.num input{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
table.dt.items td.num{color:var(--ink); font-weight:500}
/* ---- Items: line ka number, aur product se aane waale teen khaane ----
   Number sirf dekhne ke liye hai (is block ke andar 1, 2, 3…).
   Size / Pcs-Box / Sq.Mtr-Box product master se aate hai; ye input nahi
   hai, isliye inhe input jaisa dikhna bhi nahi chahiye -- warna log usme
   type karne ki koshish karte rehte hai. (v5.62) */
/* width:1% -- table auto-layout me yahi asli "content jitni chaudai" hai.
   Sirf px dene se baaki bachi jagah isi khaane me chali jaati thi aur
   number, PRODUCT se bahut door ja kar baith jata tha. */
table.dt.items th.sr,table.dt.items td.sr{
  width:1%; white-space:nowrap; text-align:right; padding-left:12px; padding-right:4px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink-3); font-weight:500; user-select:none;
}
/* Size / Pcs-Box / Sq.Mtr-Box: ek hi lakeer me rahe. Input ki jagah saada
   text aane se "600mm x 1200mm" teen lakeeron me toot raha tha. */
table.dt.items td.rov{color:var(--ink-2); font-weight:500; white-space:nowrap}
table.dt.items td.rov:empty::after{content:"\2014"; color:var(--ink-3)}
table.dt.items tfoot td{font-size:13px}
/* the product and size cells grow into the free width instead of truncating */
/* Pehle ye chaar rule nth-child se chalte the: (1) = Product, (3) = Size.
   Items me "#" ka naya khaana jodte hi saari ginti ek se khisak gayi aur
   250px Product ki jagah "#" par chala gaya. Isliye ab class se -- khaane
   aage-peeche hone par bhi apni jagah par rahenge. (v5.62) */
table.dt.items th.pc{min-width:250px}
table.dt.items td.pc input{width:100%; min-width:0}
table.dt.items th.szc,table.dt.items td.szc{min-width:150px}

/* ---------------- containers ---------------- */
.cmet{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.cm{
  padding:10px 13px; border:1px solid var(--line); border-left:3px solid var(--accent-line);
  border-radius:var(--r-sm); background:var(--surface); min-width:0;
}
.cm b{
  display:block; font-family:var(--mono); font-size:18px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); line-height:1.25;
}
.cm span{display:block; font-size:11px; color:var(--ink-3); margin-top:2px}
.cm.warn{border-left-color:var(--warn); background:var(--warn-soft)}
.cm.warn b,.cm.warn span{color:var(--warn)}
.cm.bad{border-left-color:var(--danger); background:var(--danger-soft)}
.cm.bad b,.cm.bad span{color:var(--danger)}

.qc{margin-top:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.qc.warn{border-color:color-mix(in srgb,var(--warn) 34%, var(--line))}
.qc>summary{
  list-style:none; cursor:pointer; padding:10px 14px; display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--ink-2);
}
.qc>summary::-webkit-details-marker{display:none}
.qc>summary::after{content:"▾"; margin-left:auto; color:var(--ink-3); font-size:10px}
.qc[open]>summary::after{content:"▴"}
.qc>summary:hover{background:var(--surface-2)}
.qc>summary b{color:var(--ink); font-weight:600}
.qc.warn>summary b{color:var(--warn)}
.qc-b{padding:2px 14px 14px}
.qc-b .mtb{margin-top:0}

.ctb{
  position:sticky; top:var(--ws-top,0); z-index:14; background:var(--ground);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 0 10px; margin-top:6px;
}
.ctb .sep{width:1px; height:22px; background:var(--line); flex:0 0 1px; margin:0 2px}
/* containers: give the grid the height — the band above it stays one compact strip */
.cmet.slim{display:flex; flex-wrap:wrap; gap:6px; grid-template-columns:none}
.cmet.slim .cm{
  display:inline-flex; align-items:baseline; gap:7px; padding:5px 12px 5px 10px;
  border-left-width:3px; border-radius:var(--r-sm); min-width:0;
}
.cmet.slim .cm b{display:inline; font-size:14.5px; line-height:1.3}
.cmet.slim .cm span{display:inline; margin:0; font-size:11.5px; white-space:nowrap}
/* narrow desktops: the toolbar and the header must stay on one line
   so the grid keeps the height */
@media (max-width:1520px){
  .ctb .lab{display:none}
  .cded .lab{display:inline}          /* "Gross −" must stay: it is what the field means */
  .cded .n{width:66px; height:32px}
  .ctb .cvw button{padding:5px 10px; font-size:12px}
  .ctb .btn{height:32px; padding:0 11px; font-size:12.5px}
  .ctb .n{height:32px}
  .wsp.fill .ctb{padding-bottom:6px; margin-top:7px}
  .wsh-a .rdy{display:none}
}
/* nothing to report: the quantity check takes one quiet line */
.qc.slim>summary{padding:6px 13px; font-size:12px}
.qc.slim{border-color:var(--line)}
.conote{
  margin:0 0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px;
}
.ctb .lab{
  font-family:var(--disp); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}
.ctb .n{width:62px; height:34px; padding:0 8px; text-align:right}
/* gross minus packing weight = net: the field and its button read as one
   control, so it is clear the number belongs to the button next to it */
.cded{display:flex; align-items:center; gap:6px; margin:0}
.cded .lab{
  font-family:var(--disp); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; white-space:nowrap;
}
.cded .n{width:74px; height:34px; padding:0 8px; text-align:right}
.cvw{display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin:0}
.cvw button{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px;
  padding:6px 13px; font-size:12.5px; font-weight:500; cursor:pointer; font-family:var(--sans);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.cvw button:hover{border-color:var(--line-strong); color:var(--ink)}
.cvw button.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600}

/* ---------------- documents ---------------- */
.dks{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); margin-bottom:14px}
.dk{
  display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); color:var(--ink-2); cursor:pointer;
  text-align:left; font-family:var(--sans); min-width:0;
  transition:border-color .16s ease, background .16s ease;
}
.dk:hover{border-color:var(--line-strong)}
.dk.on{border-color:var(--accent); background:var(--accent-soft)}
.dk .dot{width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:var(--warn)}
.dk .dot.ok{background:var(--ok)}
.dk i{font-style:normal; min-width:0}
.dk b{display:block; font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dk.on b{color:var(--accent)}
.dk span{display:block; font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dkmiss{font-size:12.5px; color:var(--warn); background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 22%, transparent);
  border-radius:var(--r); padding:9px 13px; margin-bottom:12px; line-height:1.5;
  display:flex; gap:7px; align-items:baseline; flex-wrap:wrap}
.dkmiss b{font-weight:600; white-space:nowrap}
/* each missing field is a button that opens the step and lands on it */
.dkm{border:1px solid color-mix(in srgb,var(--warn) 34%, transparent); background:transparent;
  color:inherit; font:inherit; font-size:12px; padding:2px 9px; border-radius:999px;
  cursor:pointer; line-height:1.7; text-align:left}
.dkm:hover{background:color-mix(in srgb,var(--warn) 14%, transparent)}
.dkm:focus-visible{outline:2px solid var(--warn); outline-offset:1px}
.dkmiss.warn2 .dkm{border-color:color-mix(in srgb,var(--danger) 34%, transparent)}
.dkmiss.warn2 .dkm:hover{background:color-mix(in srgb,var(--danger) 14%, transparent)}
/* is document ko do page chahiye — ye wahi cheez hai jo turant dikhni chahiye */
.dkmiss.warn2{color:var(--danger); background:var(--danger-soft);
  border-color:color-mix(in srgb,var(--danger) 30%, transparent)}
.dkmiss.ok2{color:var(--accent-hi); background:var(--accent-soft); border-color:var(--accent-line)}

/* page count har card par */
.dk{position:relative}
.dk .dkpg{
  font-style:normal; margin-left:auto; flex:0 0 auto; font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  padding:2px 7px; border-radius:999px; color:var(--ink-3); background:var(--surface-2);
  border:1px solid var(--line);
}
.dk .dkpg:empty{display:none}
.dk .dkpg.ok{color:var(--ink-3)}
.dk .dkpg.fit{color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line)}
.dk .dkpg.over{color:var(--danger); background:var(--danger-soft);
  border-color:color-mix(in srgb,var(--danger) 34%, transparent)}

/* page fit bar — is document ka apna, doosron par asar nahi */
.pgbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;
  padding:8px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.pgbar .grow{flex:1 1 auto}
/* ---- Advanced settings > Quick formatting, preview page par ---- */
.pgb-adv{display:inline-flex; align-items:center; gap:7px}
.pgb-adv svg{width:15px; height:15px}
.pgb-adv .ca{font-size:9px; color:var(--ink-3); font-style:normal}
.pgb-adv.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.pgadv{
  margin:-4px 0 12px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); overflow:hidden;
}
.pgadv-h{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.pgadv-h b{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink)}
.pgadv-h > span{font-size:12px; color:var(--ink-3)}
.pgadv-h .grow{flex:1 1 auto}
.pgadv-b{display:flex; flex-direction:column; gap:10px; padding:12px}
.pgq{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pgq > label{
  flex:0 0 96px; font-family:var(--disp); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700;
}
/* rotate — dono jagah ek jaisa: preview ka panel aur Document format */
.fmt-rot{
  display:grid; place-items:center; width:30px; height:28px; padding:0; line-height:0;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:var(--r-sm); cursor:pointer;
}
.fmt-rot svg{width:16px; height:16px}
.fmt-rot:hover{border-color:var(--line-strong); color:var(--ink); background:var(--surface-2)}
.fmt-rot:focus-visible{outline:none; box-shadow:var(--focus); border-color:var(--accent)}
.fmt-or{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap}
/* row ke niche ek line samjhane ke liye -- poori chaudai le leti hai */
.pgq-h{flex:1 1 100%; font-size:11.5px; line-height:1.45; color:var(--ink-3)}
@media (max-width:720px){
  .pgq > label{flex:1 1 100%}
  .pgadv-h > span{flex:1 1 100%}
}
.pgb-l{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.segs{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.segs button{
  border:0; border-right:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-family:var(--sans); font-size:12px; padding:0 11px; height:28px; cursor:pointer; white-space:nowrap;
}
.segs button:last-child{border-right:0}
.segs button:hover{background:var(--surface-3)}
.segs button.on{background:var(--accent); color:var(--on-accent); font-weight:600}
.pgb-s{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2)}
.pgb-s.off{opacity:.45}
.pgb-s input{width:62px; height:28px; padding:0 7px; text-align:right; font-size:12px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface)}
.pgb-s i{font-style:normal; color:var(--ink-3)}
.pgb-t{font-size:12px; color:var(--ink-3)}
.pgb-t b{color:var(--ink); font-family:var(--mono); font-size:11.5px}
.pgb-n{font-family:var(--mono); font-size:11px; color:var(--ink-3); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; white-space:nowrap}
.pgb-n.multi{color:var(--warn); background:var(--warn-soft); border-color:var(--warn)}
.pgb-w{font-size:11.5px; color:var(--danger); background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 30%, transparent); border-radius:999px; padding:3px 10px}
@media (max-width:820px){ .pgb-t,.pgb-l{display:none}
  /* panel ki rows apni line par hain, wahan jagah hai */
  .pgadv .pgb-t{display:block; width:100%} }

/* band kiya gaya built-in document (v5.56) */
.tabs.sub .tab-off{
  margin-left:auto; border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; color:var(--ink-3);
  padding:0 10px; text-decoration:underline; text-underline-offset:2px;
}
.tabs.sub .tab-off:hover{color:var(--ink-2)}
.tabs.sub button.doc-off{opacity:.55}
.tabs.sub button .offd{
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-strong);
  border-radius:999px; padding:0 5px; margin-left:5px; vertical-align:1px;
}
.tpl-bar.doc-bar{background:var(--surface-2)}

/* ============================================================
   REQUIRED FIELDS (v5.54)
   Label par laal *, aur khali khaane par halki laal lakeer. Rang
   hi kaafi nahi hai (koi dekh na paye), isliye * hamesha saath.
   ============================================================ */
.req-s{color:var(--danger); font-weight:700; margin-left:3px; font-style:normal}
label .req-s{font-size:1.05em; line-height:1}
th .req-s{margin-left:2px}
.req-f.req-empty{
  border-color:color-mix(in srgb,var(--danger) 55%, var(--line-strong))!important;
  background:color-mix(in srgb,var(--danger) 6%, var(--surface));
}
.req-f.req-empty:focus{border-color:var(--danger)!important}
.dt .req-f.req-empty{background:color-mix(in srgb,var(--danger) 9%, transparent)}
th .thl{display:inline}

/* Setup > Required fields */
.reqn{font-size:12px; color:var(--ink-3); margin-left:auto; margin-right:10px; white-space:nowrap}
.reqg{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; margin-bottom:6px}
.reqr{
  display:grid; grid-template-columns:auto 1fr; gap:2px 9px; align-items:start;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); cursor:pointer;
}
.reqr:hover{border-color:var(--line-strong)}
.reqr.on{border-color:color-mix(in srgb,var(--accent) 40%, var(--line)); background:var(--accent-soft)}
.reqr input{width:16px; height:16px; margin:2px 0 0; grid-row:1/span 2; cursor:pointer}
.reql{font-size:13.5px; color:var(--ink); font-weight:500}
.reqh{font-size:11.5px; color:var(--ink-3); line-height:1.4}
@media (max-width:560px){ .reqg{grid-template-columns:1fr} }

/* asli A4 page, ek ke neeche ek — jahan page badalta hai wo saaf dikhta hai */
.pgprev{display:flex; flex-direction:column; align-items:center; gap:22px; padding:4px 0 8px}
.pgv{margin:0; display:flex; flex-direction:column; align-items:center; gap:6px}
.pgv figcaption{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  font-family:var(--mono); align-self:flex-start;
}
.pgvb{position:relative; overflow:hidden; background:#fff; box-shadow:var(--shadow-md);
  border:1px solid var(--line); flex:0 0 auto}
.pgvs{position:absolute; top:0; left:0; transform-origin:top left}
.pgvs .pgpage{box-shadow:none}

/* ---------------- containers: one screen, only the grid scrolls ----------------
   The grid is the work surface, so the step fills the viewport and the page
   itself does not scroll: summary, toolbar and column presets stay put while
   the rows scroll under a sticky header. Below 900px it falls back to the
   normal page flow. */
.wsp.fill{height:100vh; display:flex; flex-direction:column; overflow:hidden}
.wsp.fill .wstop{position:static; flex:0 0 auto}
.wsp.fill .wsb{
  flex:1; min-height:0; max-width:none; display:flex; flex-direction:column;
  overflow:hidden; padding:14px 20px 0;
}
.wsp.fill .ctb{position:static; margin-top:9px; padding:0 0 8px}
.wsp.fill .wsfoot{padding:7px 20px}
.wsp.fill .copane{flex:0 0 auto; margin-bottom:10px; max-height:40vh; overflow:auto}
.wsp.fill #coMatch .qc{max-height:38vh; overflow:auto}
.wsp.fill .cgrid{flex:1; min-height:150px; overflow:auto; margin-bottom:0}
.wsp.fill .wsfoot{
  flex:0 0 auto; max-width:none; padding:9px 20px;
  border-top:1px solid var(--line); background:var(--surface);
}
.cgrid{overflow:auto}

/* Containers in fullscreen: nothing above the toolbar. The action bar and the
   grid take the whole screen; the quantity check stays only when it is warning
   about something, and the step bar comes back the moment fullscreen is left. */
body.fs .wsp.fill .wstop{display:none}
body.fs .wsp.fill #coStats{display:none}
body.fs .wsp.fill .conote{display:none}
body.fs .wsp.fill #coMatch .qc.slim{display:none}
body.fs .wsp.fill .wsb{padding-top:10px}
body.fs .wsp.fill .ctb{margin-top:0}
@media (max-width:900px){
  .wsp.fill{height:auto; overflow:visible; display:block}
  .wsp.fill .wsb{display:block; overflow:visible; padding:14px 16px 4px}
  .wsp.fill .cgrid{max-height:72vh}
  .wsp.fill .wsfoot{padding:12px 16px 22px; border-top:0; background:none}
}

/* ============================================================
   DRAFT / SAVED / BLOCKED / LOCKED
   ============================================================ */
.sv.ok::before{background:var(--ok)}
.sv.ok{color:var(--ok)}
.sv.bad::before{background:var(--danger)}
.sv.bad{color:var(--danger)}
.sv.lock::before{background:var(--gold)}
.sv.lock{color:var(--ink-2)}
.stt.st-lock{background:var(--gold-soft); color:var(--warn); border-color:color-mix(in srgb,var(--gold) 45%, transparent); font-weight:700}
.alert.lockbar{margin-bottom:16px}
.f input.ro,.f select:disabled,.f textarea.ro{background:var(--surface-3); color:var(--ink-2); cursor:default}

/* issue list in the save / finalise dialog */
.isul{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:1px}
.isu{
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  padding:10px 8px; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink);
}
.isu:last-child{border-bottom:0}
.isu.mut{color:var(--ink-2)}
.isu-m{flex:1 1 220px; min-width:0; font-weight:600}
.isu.mut .isu-m{font-weight:500}
.isu .btn{flex:0 0 auto; white-space:nowrap}
/* what to do about it, in plain words — the whole point of the list */
.isu-why{flex:1 1 100%; margin:1px 0 0 18px; color:var(--ink-3); font-size:12.5px; line-height:1.55}
.modal .card-h h3{font-size:12px}

/* ============================================================
   FULLSCREEN — same DOM, less chrome
   ============================================================ */
body.fs .side{display:none}
body.fs .main>.top{display:none}
body.fs .wsb{max-width:none}
body.fs .wsfoot,
body.fs .wsp .wsfoot,
body.fs .wsp.fill .wsfoot{max-width:none; padding-right:158px}   /* keep clear of the floating Close */
body.fs .docstage{padding:12px}
.fs-x{
  position:fixed; right:16px; bottom:16px; z-index:120;
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 16px; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--ground); border:1px solid var(--ink);
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-md);
  transition:background .16s ease, transform .16s ease;
}
.fs-x:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.fs-x svg{width:15px; height:15px}
.fs-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:900px){
  body.fs .main>.top{display:flex}
  .fs-x{right:12px; bottom:12px}
}

/* ============================================================
   KEYBOARD SHORTCUTS GUIDE
   ============================================================ */
.kgrp{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); align-items:start}
.kcard{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:14px 16px 6px}
.kcard h4{
  font-family:var(--disp); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0 0 8px;
}
.krow{display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--line)}
.kcard .krow:first-of-type{border-top:0}
.kk{display:inline-flex; align-items:center; gap:4px; flex:0 0 118px}
.kk i{font-style:normal; color:var(--ink-3); font-size:11px}
.kn{font-size:13px; color:var(--ink-2); min-width:0}
kbd{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 7px;
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--r-sm);
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--ink); line-height:1;
}

/* delete confirmation */
.delrow{display:flex; align-items:baseline; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px}
.delrow:last-of-type{border-bottom:0}
.delrow span{flex:0 0 92px; color:var(--ink-3); font-size:12px}
.delrow b{color:var(--ink); font-weight:600}

/* masters: count + primary action above the table */
.mbar{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.mcount{
  font-family:var(--disp); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.mbar .grow{flex:1}

/* ============================================================
   INVOICE LAYOUT EDITOR  —  Settings › Document format › Invoice
   ============================================================ */
.dgbar{
  flex:0 0 auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:8px;
  padding:7px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.dgck{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); cursor:pointer; margin:0}
.dgck input{accent-color:var(--accent); width:14px; height:14px; cursor:pointer}
.dgz{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-left:auto}
.dgtip{flex:0 0 100%; font-size:11px; color:var(--ink-3); line-height:1.5}
.dghid{flex:0 0 100%; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11.5px; color:var(--ink-3)}
.dghid button{
  border:1px dashed var(--line-strong); background:var(--surface); color:var(--ink-2); cursor:pointer;
  border-radius:var(--r-sm); padding:2px 7px; font-size:11.5px; font-family:var(--sans);
}
.dghid button:hover{border-color:var(--accent); color:var(--accent)}
.dghid b{color:var(--accent)}

.fmt-prev.grid{background:var(--surface-3); padding:6px}
.dgsz{font-size:11px; color:var(--ink-3); letter-spacing:.02em}
#dgZoom{display:inline-flex; align-items:center; gap:5px}

/* full-screen preview */
body.dgfs-on{overflow:hidden}
.dgfs{
  position:fixed; inset:0; z-index:220; background:var(--ground);
  display:flex; flex-direction:column;
}
.dgfs-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:9px 14px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.dgfs-bar>b{font-size:13.5px; color:var(--ink)}
.dgfs-bar .dgfs-dirty{margin-left:auto}
.dgfs-bar #dgfsSave{flex:0 0 auto}
.dgfs-bar #dgfsX{flex:0 0 auto}
.dgfs-z{display:flex; align-items:center; gap:4px}
.dgfs-z button{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer;
  height:26px; min-width:26px; padding:0 8px; border-radius:var(--r-sm); font-size:12px; font-family:var(--sans);
}
.dgfs-z button:hover{border-color:var(--accent); color:var(--accent)}
.dgfs-z b{font-family:var(--mono); font-size:12px; min-width:44px; text-align:center; color:var(--ink-3)}
.dgfs-body{flex:1; min-height:0; display:flex; align-items:stretch; overflow:hidden}
.dgfs-stage{flex:1; min-width:0; overflow:auto; padding:20px; display:flex; justify-content:center}
.dgfs-host{margin:0 auto}
/* full screen ka settings panel — wahi controls jo Document format par hain */
.dgfs-side{
  flex:0 0 360px; width:360px; min-width:0; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--line); overflow:hidden;
}
.dgfs.nosd .dgfs-side{display:none}
.dgfs-side-h{
  flex:0 0 auto; padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line);
}
.dgfs-side-b{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px; scrollbar-gutter:stable}
@media (max-width:1100px){ .dgfs-side{flex-basis:300px; width:300px} }
@media (max-width:820px){ .dgfs-side{display:none} }
.dgwrap{position:relative; overflow:hidden}
.dgs{position:absolute; top:0; transform-origin:top left}
.dgo{position:absolute; inset:0; pointer-events:none}
.dgo>*{position:absolute; pointer-events:auto}

/* the ruling and the outer page frame */
.dg-grid{pointer-events:none; background-image:repeating-linear-gradient(to right, rgba(37,99,235,.20) 0 1px, transparent 1px 100%)}
.dg-frame{pointer-events:none; outline:2px double #E2761B; outline-offset:1px; z-index:1}
.dg-frame.soft{outline:1px dashed rgba(226,118,27,.55)}
/* clean mode (packing list): plain white page, handles only */
.fmt-prev.grid .dgwrap.clean{background:transparent}
.dgwrap.clean .dg-row::after, .dgwrap.clean .dg-col::after{top:3px; left:3px}

/* horizontal line — drag up / down */
.dg-row{height:7px; cursor:ns-resize; z-index:4}
.dg-row::after{content:''; position:absolute; left:0; right:0; top:2px; height:3px; border-radius:2px; background:transparent}
.dg-row:hover::after, .dg-row.on::after{background:var(--accent)}
/* vertical line — drag left / right */
.dg-col{width:9px; cursor:ew-resize; z-index:5}
.dg-col::after{content:''; position:absolute; top:0; bottom:0; left:3px; width:3px; border-radius:2px; background:transparent}
.dg-col:hover::after, .dg-col.on::after{background:var(--accent)}
.dg-col b{
  position:absolute; top:-1px; left:8px; white-space:nowrap; font-size:10px; font-weight:600;
  color:#fff; background:var(--accent); padding:1px 6px; border-radius:3px;
  opacity:0; transition:opacity .12s ease; pointer-events:none;
}
.dg-col:hover b, .dg-col.on b{opacity:1}
/* orange frame — page margins */
.dg-mg{z-index:6}
.dg-mg.v{cursor:ew-resize}
.dg-mg.h{cursor:ns-resize}
.dg-mg:hover, .dg-mg.on{background:rgba(226,118,27,.4)}

/* green blocks — the real document cells */
.dg-cell{
  border:1.5px solid rgba(22,130,93,.5); background:rgba(34,170,120,.09);
  border-radius:3px; cursor:grab; z-index:3; transition:background .12s ease, border-color .12s ease;
}
.dgwrap:not(.blk) .dg-cell{display:none}
.dg-cell:hover{background:rgba(34,170,120,.20); border-color:var(--accent)}
.dg-cell.drag{cursor:grabbing; background:rgba(34,170,120,.32); border-style:dashed; z-index:7}
.dg-cell.over{background:rgba(14,110,98,.30); border-color:var(--accent); border-width:2px}
.dg-cell.lock{border-color:rgba(120,130,130,.45); background:rgba(140,150,150,.07); cursor:not-allowed}
.dg-tag{
  position:absolute; left:3px; top:2px; font-size:9.5px; font-weight:700; letter-spacing:.02em;
  color:#0B574D; background:rgba(255,255,255,.92); padding:0 5px; border-radius:3px; white-space:nowrap;
  opacity:0; transition:opacity .12s ease; pointer-events:none;
}
.dg-cell:hover .dg-tag, .dg-cell.drag .dg-tag{opacity:1}
.dg-cell.lock .dg-tag{color:#5A6B6D}

/* left rail — one tab per document section */
.dgrail{position:absolute; left:0; top:0; width:126px; height:100%}
.dg-sec{
  position:absolute; left:0; width:120px; box-sizing:border-box;
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-sm);
  background:var(--surface); cursor:grab; overflow:hidden; padding:3px 6px;
  display:flex; align-items:flex-start; transition:border-color .12s ease, background .12s ease;
}
.dgwrap:not(.blk) .dgrail{display:none}
.dg-sec span{font-size:10.5px; line-height:1.25; color:var(--ink-2); font-weight:600}
.dg-sec:hover{background:var(--accent-soft); border-color:var(--accent)}
.dg-sec.drag{cursor:grabbing; opacity:.75; border-style:dashed}
.dg-sec.over{background:var(--accent-soft); border-color:var(--accent); border-width:2px}
.dg-sec.lock{border-left-color:var(--line-strong); cursor:not-allowed}
.dg-sec.lock span{color:var(--ink-3)}
.dg-sec .dg-off{
  position:absolute; right:2px; top:2px; width:16px; height:16px; line-height:1; font-size:12px;
  border:0; border-radius:3px; background:transparent; color:var(--danger); cursor:pointer;
  opacity:0; transition:opacity .12s ease;
}
.dg-sec:hover .dg-off{opacity:1}
body.dg-dragging{user-select:none}


/* ---------------- CIF calculation ----------------
   Ek operational calculation page: source columns dabi hui, adjustment
   khula hua, final values ubhri hui — taaki ek nazar me pata chale ki
   kaunsa number kahan se aaya hai. */
.cmet.cif8{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cm.cifd b{font-variant-numeric:tabular-nums}
.cm.cifd.ok b{color:var(--ok)}
.cm.cifd.hi b{color:var(--warn)}
.cm.cifd.lo b{color:var(--danger)}

.cifb{margin:6px 0 0; padding-left:18px; line-height:1.9}
.cifb .btn.sm{margin-left:6px}

.cifsw{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px;
  padding:11px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
}
.cifsw.on{border-color:var(--accent); background:var(--accent-soft)}
.cifsw .ck{margin:0; flex:0 0 auto}
.cifsw .ck b{font-size:12.5px; color:var(--ink)}
.cifsw.on .ck b{color:var(--accent-hi)}
.cifsw>span{flex:1 1 320px; min-width:0; font-size:12px; color:var(--ink-3); line-height:1.5}

.cifrt{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3)}
.cifrt .btn.sm{margin-left:0}

table.cift th{white-space:nowrap; line-height:1.3}
table.cift td{vertical-align:middle}
/* bara table hai — har column ka apna kaam hai, isliye padding kasi hui */
table.cift th,table.cift td{padding-left:9px; padding-right:9px}
table.cift td.mono,table.cift th.num{white-space:nowrap}
table.cift td b{display:block; font-size:12.5px; color:var(--ink); font-weight:600}
table.cift td i{display:block; font-style:normal; font-size:11px; color:var(--ink-3)}
/* source: Items / Shipment se aaya hua — chhua nahi ja sakta */
table.cift td.src{color:var(--ink-3); background:var(--surface-2)}
table.cift td.fin{color:var(--ink); font-weight:600; background:var(--accent-soft)}
table.cift tfoot td.fin{background:var(--accent-soft)}
table.cift tr.focr td{color:var(--ink-3)}
table.cift td.focn{font-size:11.5px; color:var(--ink-3); font-style:italic}
table.cift td.cifempty{text-align:center; padding:22px; color:var(--ink-3)}
table.cift th.adjh{text-align:center; min-width:172px; width:172px}
table.cift td.adjc{padding:3px 8px}
.adj{display:flex; align-items:center; gap:3px; justify-content:center}
.adj input{flex:1 1 auto}
.adj input{
  width:100%; min-width:0; height:30px; padding:0 6px; text-align:right; font-size:11.5px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface);
}
.adj input:focus{border-color:var(--accent); outline:2px solid var(--focus); outline-offset:-1px}
.adj input::-webkit-outer-spin-button,.adj input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.adj input[type=number]{-moz-appearance:textfield}
.adj .stp{
  width:22px; height:30px; flex:0 0 22px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); border-radius:var(--r-sm); cursor:pointer; font-size:13px; line-height:1;
  font-family:var(--sans);
}
.adj .stp:hover{border-color:var(--accent); color:var(--accent)}
.adj .stp.x{font-size:12px; color:var(--ink-3)}

.rcn{
  display:inline-block; min-width:330px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); padding:6px 0; position:relative;
}
.rcr{display:flex; align-items:baseline; gap:18px; padding:7px 16px; font-size:12.5px; color:var(--ink-2)}
.rcr>span{flex:1 1 auto}
.rcr>span i{font-style:normal; font-size:11px; color:var(--ink-3)}
.rcr>b{flex:0 0 auto; font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums}
.rcr.sum{border-top:1px solid var(--line); margin-top:2px; padding-top:9px}
.rcr.sum>span,.rcr.sum>b{font-weight:600; color:var(--ink)}
.rcr.diff{border-top:1px solid var(--line); margin-top:2px; padding-top:9px; font-weight:600}
.rcr.diff.ok>b{color:var(--ok)}
.rcr.diff.hi>b{color:var(--warn)}
.rcr.diff.lo>b{color:var(--danger)}
.rch{padding:4px 16px 6px; font-size:10px; letter-spacing:.06em; color:var(--ink-3);
  text-transform:uppercase; border-bottom:1px solid var(--line); margin-bottom:3px}
@media (max-width:640px){ .rcn{min-width:0; width:100%; display:block} }

/* page fit control, Document format panel me */
.fmt-f.fitrow{display:block; padding:2px 0}
.fmt-fit{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fmt-fit .segs button{font-size:11.5px; padding:0 9px; height:27px}
.fmt-fit .pgb-s input{width:58px; height:27px}

/* sample / FOC allocation (Items tab) */
.smpc{margin-top:16px}
.smpl{margin:8px 0 0; padding-left:18px; line-height:2.2}
.smpl select{height:30px; margin:0 6px; max-width:240px}
table.smpt th{white-space:nowrap}
table.smpt td{vertical-align:middle}
table.smpt td b{display:block; font-size:12.5px; color:var(--ink); font-weight:600}
table.smpt td i{display:block; font-style:normal; font-size:11px; color:var(--ink-3)}
table.smpt td.src{color:var(--ink-3); background:var(--surface-2)}
table.smpt td.fin{color:var(--ink); font-weight:600; background:var(--accent-soft); font-family:var(--mono)}
table.smpt input{width:82px; height:30px; padding:0 7px; text-align:right; font-size:12px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface)}
table.smpt input.smpbx{width:66px}
table.smpt th,table.smpt td{padding-left:9px; padding-right:9px}
td.smpsz select{width:100%; min-width:180px; height:30px; font-size:12px}
td.smpsz i{margin-top:3px}
em.smpcut{font-style:normal; color:var(--accent); font-family:var(--mono); font-size:10.5px}
tr.cgh em.smpcut{display:block; margin-top:2px}
.segs.smpm button{font-size:11.5px; padding:0 9px; height:28px}
table.smpt input:focus{border-color:var(--accent); outline:2px solid var(--focus); outline-offset:-1px}
td.smpw{font-size:11px; color:var(--danger); white-space:nowrap; max-width:150px}
.segs.smpk button{font-size:11.5px; padding:0 9px; height:28px}
/* container ka apna group — sar, bacha hua row aur jod */
table.smpt tbody.cg + tbody.cg tr.cgh td{border-top:2px solid var(--line-strong)}
tr.cgh td{background:var(--surface-2)!important; padding:7px 9px!important}
tr.cgh b{display:inline-block; font-family:var(--disp); font-size:12.5px; letter-spacing:.02em}
tr.cgh i{display:inline-block; font-style:normal; font-size:11px; color:var(--ink-3); margin-left:10px}
tr.cgo td{background:var(--surface-2)}
tr.cgo td.fin{background:var(--accent-soft)}
tr.cgo .ownt{font-size:11px; color:var(--ink-3)}
tr.cgf td{background:var(--surface-2); font-size:11px; color:var(--ink-3);
  border-top:1px dashed var(--line-strong); padding-top:6px!important; padding-bottom:6px!important}
tr.cgf td.mono{font-family:var(--mono); color:var(--ink-2)}
/* containers grid: ＋ SIZE / ＋ SAMPLE saath me */
td.exadd{white-space:nowrap}
td.exadd .xbtn + .xbtn{margin-left:5px}
.segs.exk button{font-size:11px; padding:0 8px; height:26px}
/* Items tab: "Own wt." tick (sirf FOC row par) */
th.owt{white-space:nowrap}
td.owt{text-align:center; white-space:nowrap}
td.owt i.owta{display:inline-block; margin-left:5px; font-style:normal; font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:0 4px; vertical-align:middle}
/* allocation card: wazan kahan chhapega */
td.smpsz i.lands{display:block; margin-top:3px; font-style:normal; font-size:10.5px; color:var(--accent)}
/* CIF reconciliation: farak kyu hai, ek line me */
.rcn .rcn-n{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:11.5px; line-height:1.6; color:var(--ink-3)}
.rcn .rcn-n b{color:var(--ink-2); font-family:var(--mono)}
.cifrt #cifFit{font-weight:600}

/* ===== Document format panel — sections, presets, style rows ===== */
.fmt-l .fmt-sect{display:flex; align-items:center; gap:10px; margin:18px 0 8px}
.fmt-l .fmt-sect:first-child{margin-top:2px}
.fmt-l .fmt-sect span{font-family:var(--disp); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600; color:var(--ink-3)}
.fmt-l .fmt-sect::after{content:""; flex:1; height:1px; background:var(--line); order:1}
.fmt-l .fmt-sect .btn{order:2; margin-left:0}

/* Quick formatting */
.preset-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.preset-row .preset{display:block; text-align:left; padding:10px 11px; min-height:44px;
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface);
  color:var(--ink-2); font:inherit; cursor:pointer}
.preset-row .preset:hover{background:var(--surface-3)}
.preset-row .preset:focus-visible{outline:2px solid var(--focus); outline-offset:1px}
.preset-row .preset b{display:block; font-size:12.5px; color:var(--ink); font-weight:600}
.preset-row .preset i{display:block; margin-top:3px; font-style:normal; font-size:10.5px;
  line-height:1.45; color:var(--ink-3)}
.preset-row .preset.on{border-color:var(--accent); background:var(--accent-soft)}
.preset-row .preset.on b{color:var(--accent-hi)}
@media (max-width:820px){ .preset-row{grid-template-columns:1fr} }

/* style row: naam ke niche "10 pt · Semi-bold · used by 16 elements" */
.fmt-f.role > label{line-height:1.3}
.fmt-f .role-m{display:block; margin-top:2px; font-style:normal; font-size:10.5px;
  color:var(--ink-3); font-family:var(--mono); letter-spacing:-.01em}
.fmt-f.role:hover{background:var(--surface-2); border-radius:var(--r-sm)}

/* advanced text styles */
details.fmt-adv{margin-top:6px; border-top:1px dashed var(--line); padding-top:6px}
details.fmt-adv > summary{display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 2px; min-height:38px; font-size:12px; color:var(--ink-2); list-style:none}
details.fmt-adv > summary::-webkit-details-marker{display:none}
details.fmt-adv > summary::before{content:"\25B8"; color:var(--ink-3); transition:transform .12s}
details.fmt-adv[open] > summary::before{transform:rotate(90deg)}
details.fmt-adv > summary:focus-visible{outline:2px solid var(--focus); outline-offset:1px; border-radius:var(--r-sm)}
details.fmt-adv > summary i{font-style:normal; font-size:10px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:999px; padding:1px 7px}
details.fmt-adv > summary .advw{font-size:10.5px; color:var(--ink-3); margin-left:auto; padding-right:8px}

/* reset (\21ba) ka tap target chhota tha */
.fmt-x{min-width:28px; min-height:28px; display:inline-flex; align-items:center; justify-content:center}
.fmt-x:focus-visible{outline:2px solid var(--focus); outline-offset:1px; border-radius:var(--r-sm)}

/* ============================================================
   LOGIN — hero vessel + wahi halka card
   Do hisse: baayin taraf jahaz ka drishya, daayin taraf form. Rang wahi
   app ke tokens hain (--ground / --surface / --line / --accent) — koi
   alag design system nahi. Sirf ye screen, baaki site chhui nahi.
   ============================================================ */
body.lgbody{
  margin:0; min-height:100vh; background:var(--ground); color:var(--ink);
  font-family:Inter,system-ui,"Segoe UI",Arial,sans-serif;
}
.lgwrap{min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr}

/* ---- hero ---- */
.lghero{position:relative; overflow:hidden; background:#DCE9E7}
.lgsvg{position:absolute; inset:0; width:100%; height:100%; display:block}
.lghcap{position:absolute; left:44px; bottom:38px; margin:0; max-width:340px;
  font-size:15px; line-height:1.5; color:var(--accent-deep); opacity:.78;
  text-shadow:0 1px 0 rgba(255,255,255,.55)}

/* ---- form side ---- */
.lgpane{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:40px 32px; background:var(--ground)}
.lgcard{width:100%; max-width:372px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 26px 22px;
  box-shadow:var(--shadow-sm)}
.lgbrand{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.lgmark{width:30px; height:30px; display:grid; place-items:center; flex:none;
  border:1px solid var(--accent-line); border-radius:var(--r-sm);
  color:var(--accent); background:var(--accent-soft)}
.lgmark svg{width:17px; height:17px}
.lgbrand h1{margin:0; font-size:14px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2)}
.lgsub{margin:0; width:100%; font-size:12px; color:var(--ink-3)}
.lgwel{margin:0 0 16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.lgform{display:block}
.lgf{margin-bottom:14px}
.lgf label{display:block; margin-bottom:5px; font-size:13px; color:var(--ink-2)}
.lgf input{width:100%; box-sizing:border-box; height:38px; padding:0 11px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); font:inherit; font-size:14px; transition:border-color .12s, box-shadow .12s}
.lgf input:hover{border-color:var(--line-strong)}
.lgf input:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus)}
.lgpw{position:relative}
.lgpw input{padding-right:62px}
.lgpw button{position:absolute; right:4px; top:4px; height:30px; min-width:52px; padding:0 9px;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  color:var(--ink-3); font:inherit; font-size:12px; font-weight:600}
.lgpw button:hover{color:var(--accent); background:var(--surface-3)}
.lgpw button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.lgbtn{width:100%; height:40px; margin-top:4px; border:1px solid var(--accent);
  border-radius:var(--r); background:var(--accent); color:var(--on-accent);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .12s}
.lgbtn:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.lgbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lgbtn:disabled{opacity:.6; cursor:default}
#lgErr:empty{display:none}
.lgmsg{margin-bottom:14px; padding:9px 11px; border-radius:var(--r); font-size:13px; line-height:1.5;
  background:var(--danger-soft); border:1px solid var(--danger-soft); color:var(--danger)}
.lgfoot{margin:16px 0 0; text-align:center; font-size:12px; color:var(--ink-3)}
.lgtag{margin:0; text-align:center; font-size:11.5px; color:var(--ink-3)}

/* ---- chhoti screen: jahaz upar ek patti ban jata hai, form poora rehta hai ---- */
@media (max-width:980px){
  /* Patti ki unchai chaudai ke saath badalti hai, taki jahaz ki
     waterline kabhi crop na ho — fixed px par 820 jaisi chaudai par
     hull ka neeche ka hissa kat jata tha. */
  .lgwrap{grid-template-columns:1fr; grid-template-rows:240px 1fr}
  .lghcap{display:none}                 /* patti par likha hull ke uper pad jata hai */
  .lgpane{padding:28px 20px 34px; justify-content:flex-start}
}
@media (max-width:560px){
  .lgwrap{grid-template-rows:150px 1fr}
  .lgcard{padding:22px 18px 20px}
  .lgpane{padding:22px 16px 28px}
}
@media (max-height:640px) and (max-width:980px){
  .lgwrap{grid-template-rows:140px 1fr}
}

/* ============================================================
   v5.21 — internal notes, version history, loading lakeer
   ============================================================ */

/* --- loading: ek nanha container jahaz ---
   Ek hi track do jagah chalta hai — page ka chip aur Sign in button.
   .shipx = paani ka tukda, uske andar jahaz baayen se daayen. */
.shipx{
  position:relative; display:inline-block; width:56px; height:16px;
  flex:none; overflow:hidden; color:var(--accent);
}
.shipx .shp{
  position:absolute; top:0; left:0; width:22px; height:13px;
  animation:shSail 1.8s linear infinite, shBob 1.1s ease-in-out infinite;
}
.shipx .wv{                      /* paani ki patli lakeer */
  position:absolute; left:0; right:0; bottom:1px; height:1px;
  background:currentColor; opacity:.28; border-radius:1px;
}
@keyframes shSail{ from{transform:translateX(-24px)} to{transform:translateX(56px)} }
@keyframes shBob{ 0%,100%{margin-top:0} 50%{margin-top:1px} }

/* button ke andar — track chhota, par jahaz utna hi bada, warna 17px par
   containers aapas me ghul kar dhabba ban jate hai */
.shipx.sm{width:46px; height:14px}
.shipx.sm .shp{width:20px; height:12px; animation:shSailSm 1.6s linear infinite, shBob 1.1s ease-in-out infinite}
@keyframes shSailSm{ from{transform:translateX(-22px)} to{transform:translateX(46px)} }

/* Login preloader ki CSS ab index.php ke head me inline hai — wo wahi
   cheez hai jo style.css ke bina bhi dikhni chahiye (purani cached copy,
   adhoora upload). Yahan sirf login card ka halka aana bacha hai. */
.lgwrap{animation:lgIn .28s ease both}
@keyframes lgIn{ from{opacity:0} to{opacity:1} }

/* page ka chip — upar beech me, chhota aur shaant */
.edship{
  position:fixed; top:14px; left:50%; z-index:300;
  display:flex; align-items:center; gap:10px;
  padding:7px 14px 7px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md);
  opacity:0; transform:translate(-50%,-8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.edship.on{opacity:1; transform:translate(-50%,0)}
.edship.off .shp{animation:none}      /* chhup gaya to CPU par kuch na chale */
.edship .shtx{font-size:12.5px; color:var(--ink-2); letter-spacing:.01em}

/* Sign in button ke andar jahaz + text */
.lgbtn{display:flex; align-items:center; justify-content:center; gap:8px}
.lgbtn .shipx{color:var(--on-accent)}
.lgbtn .shipx .wv{opacity:.45}

@media (prefers-reduced-motion:reduce){
  .shipx .shp{animation:none; left:50%; margin-left:-11px}
  .shipx.sm .shp{margin-left:-8px}
  .edship{transition:opacity .2s ease}
  .edpre-b,.edpre .shipx,.edpre-t,.lgwrap{animation:none}
}

/* --- header ka notes button + ginti --- */
.icon-btn.nt-b{position:relative}
.icon-btn.nt-b i{
  position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px;
  display:grid; place-items:center; border-radius:8px; font-style:normal;
  font-size:10px; font-weight:700; line-height:1;
  background:var(--accent); color:var(--on-accent);
}
/* Notes aur Modified — do naye column. Table pehle se hi chaudi hai,
   isliye dono ko jitna ho sake patla rakha hai: Notes ek text link hai,
   button nahi, aur dono cells ki padding kam. */
.dt td.nt-c,.dt th.nt-c{padding-left:6px; padding-right:6px}
.nt-l{
  background:none; border:0; padding:5px 0; cursor:pointer; font:inherit; font-size:11.5px;
  color:var(--ink-3); white-space:nowrap; border-bottom:1px dashed transparent;
  min-height:26px;            /* was a 22px-tall tap target on a phone */
}
.nt-l:hover{color:var(--accent); border-bottom-color:var(--accent-line)}
.nt-l:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
.nt-l.has-nt{color:var(--accent); font-weight:600}
.dt td.mod{color:var(--ink-2); font-size:11.5px; padding-left:8px; padding-right:8px; text-align:right; line-height:1.3}
.dt td.mod b{display:block; font-weight:500; color:var(--ink-2)}
.dt td.mod i{display:block; font-style:normal; color:var(--ink-3); font-size:11px}

/* --- notes panel --- */
.modal.nt-m{max-width:600px}
.nt-m .card-h{display:flex; align-items:center; gap:8px}
.nt-m textarea{
  width:100%; box-sizing:border-box; padding:9px 11px; font:inherit; font-size:13.5px;
  line-height:1.5; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); resize:vertical;
}
.nt-m textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus)}
.nt-e{padding:14px 0; text-align:center}
.nt-i{
  padding:11px 12px; margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.nt-i .nt-t{font-size:13.5px; line-height:1.55; color:var(--ink); white-space:pre-wrap; word-break:break-word}
.nt-i .nt-f{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:9px; padding-top:8px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3);
}

/* ============================================================
   v5.27 — users & permissions
   ============================================================ */
.modal.um{max-width:820px}
.grid.c4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
details.pg{
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px; background:var(--surface);
}
details.pg > summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:9px 12px; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2);
}
details.pg > summary::-webkit-details-marker{display:none}
details.pg > summary::before{content:'▸'; font-size:10px; color:var(--ink-3); transition:transform .12s}
details.pg[open] > summary::before{transform:rotate(90deg)}
details.pg > summary i{
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:0;
  color:var(--ink-3); background:var(--surface-2); border-radius:999px; padding:1px 8px;
}
details.pg > summary .btn{margin-left:auto; text-transform:none; letter-spacing:0}
.pg-b{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px 14px;
  padding:4px 12px 12px;
}
label.ck.pk{
  display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:var(--r-sm);
  font-size:13px; color:var(--ink); cursor:pointer;
}
label.ck.pk:hover{background:var(--surface-2)}
label.ck.pk input{width:auto; flex:none; margin:0}
@media (max-width:900px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .pg-b{grid-template-columns:1fr}
}
@media (max-width:560px){ .grid.c4{grid-template-columns:1fr} }

/* ============================================================
   GO TO THE FIELD
   A clicked error opens the step and lands on the exact input.
   The ring has to be visible for a moment without moving
   anything, so it is an outline, never a border or padding —
   the container grid measures its own column widths and a
   single pixel of layout shift there is visible.
   ============================================================ */
.jumped{
  outline:2px solid var(--accent);
  outline-offset:-2px;
  border-radius:4px;
  background:var(--accent-soft)!important;
  animation:jumpFlash 2.2s ease-out 1;
}
@keyframes jumpFlash{
  0%,18%   { outline-color:var(--accent);  background-color:var(--accent-soft) }
  9%       { outline-color:transparent }
  100%     { outline-color:transparent;    background-color:transparent }
}
@media (prefers-reduced-motion:reduce){ .jumped{ animation:none } }

/* "Docs 3/5" in the shipments list: a link to the first missing field */
.docs-go{color:inherit; text-decoration:none; border-bottom:1px dashed currentColor; cursor:pointer}
.docs-go:hover{color:var(--accent)}

/* quantity check: every line goes to the container it came from */
.qc-b table.mtb tbody tr:hover{background:var(--surface-2)}
.qc-b table.mtb tbody tr.bad:hover{background:color-mix(in srgb,var(--warn) 12%, transparent)}

/* ============================================================
   TOUCH TARGETS
   Measured on a 390px screen: a control the finger has to find
   needs about 24px of height. These are the ones that were under
   it — the size on screen does not change, only the area that
   answers to a tap.
   ============================================================ */
@media (pointer:coarse), (max-width:640px){
  .ck{min-height:26px}                                 /* tick rows were 19px tall */
  .fmt-s input[type=range]{height:26px}                /* sliders were 18px */
  .segs button{min-height:28px}
  .chip{min-height:26px}
}

/* ============================================================
   REPORTS
   Built out of the pieces the rest of the app already uses:
   .panel for the frame, .dt for the table, .btn.sm for the
   controls, .ck for the tick rows. What is new here is only
   what the report table needs — a pinned column, a drag
   indicator, a resize grip and the remove target.
   ============================================================ */
.rep .dhead-a{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rep .dhead-a select{max-width:210px}

/* ---- filter row ---- */
.rep-c .panel-b{padding:12px 14px}
.rep-f{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.rep-l{display:flex; flex-direction:column; gap:4px; min-width:0;
  font-family:var(--disp); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600}
.rep-l.grow{flex:1 1 190px}
.rep-l > span{font-family:var(--sans); font-size:11px; letter-spacing:0; text-transform:none;
  font-weight:400; color:var(--ink-3); max-width:280px; line-height:1.45}
.rep-l select,.rep-l input{min-width:118px}
.rep-l.grow input{width:100%}

/* ---- the line that says which period is in force ---- */
.rep-b{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;
  padding-top:11px; border-top:1px solid var(--line)}
.rep-per{display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:99px; padding:4px 13px; font-size:12px; color:var(--accent-hi)}
.rep-per b{font-weight:700}
.rep-per i{font-style:normal; color:var(--ink-2); font-size:11.5px}
.rep-per u{text-decoration:none; font-family:var(--disp); font-size:9.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3)}
.rep-n{font-style:normal; display:inline-block; min-width:16px; padding:0 4px; margin-left:3px;
  border-radius:99px; background:var(--accent); color:var(--on-accent);
  font-size:10.5px; font-weight:700; text-align:center; line-height:16px}

/* ---- advanced filters ---- */
.rep-adv{margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
.rep-advg{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}

/* ---- the table ---- */
.rep-t{position:relative}
.rep-cnt{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.rep-t .panel-b.rep-tb{padding:0}
.rep-w{max-height:min(62vh,620px); overflow:auto}
table.rpt{border-collapse:separate; border-spacing:0; font-size:13px; table-layout:fixed; width:auto}
table.rpt th{position:sticky; top:0; z-index:3; background:var(--surface-2)!important;
  padding:0; border-bottom:1px solid var(--line); white-space:nowrap}
table.rpt th .rp-h{display:flex; align-items:center; gap:5px; cursor:pointer;
  padding:9px 10px; font-family:var(--disp); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; user-select:none}
table.rpt th .rp-h:hover{color:var(--accent)}
table.rpt th .rp-s{text-decoration:none; color:var(--accent); font-size:11px}
table.rpt td{padding:6px 10px; border-top:1px solid var(--line); background:var(--surface);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.rpt td+td,table.rpt th+th{border-left:1px solid color-mix(in srgb,var(--line) 55%, transparent)}
table.rpt td.num{text-align:right; font-variant-numeric:tabular-nums}
table.rpt tbody tr:hover td{background:var(--surface-2)}
table.rpt tr.grp td{font-weight:600}
table.rpt tfoot td{position:sticky; bottom:0; z-index:2;
  background:var(--surface-2)!important; border-top:1.5px solid var(--ink-3); font-weight:700}
/* pinned columns stay put while the rest scrolls sideways */
table.rpt th.pin,table.rpt td.pin{position:sticky; left:0; z-index:4; background:var(--surface-3)!important}
table.rpt th.pin{z-index:5}
table.rpt tfoot td.pin{z-index:5}

/* The grip that resizes a column. It has to sit on the header's edge, so the
   header is a positioning context — but a sticky header cannot also be
   relative, so the grip is placed against the header cell itself. */
/* Measured: at right:-4px only a 5px band was hittable and the grip's own
   centre landed on the cell boundary, where the <th> won the hit test and
   the drag never started. It sits fully inside the cell now. */
.rp-rz{position:absolute; top:0; right:0; width:11px; height:100%; cursor:col-resize;
  z-index:6; touch-action:none}
.rp-rz:hover{background:color-mix(in srgb,var(--accent) 45%, transparent)}
table.rpt th{overflow:visible}

/* dragging a column: where it will land */
table.rpt th.dragging .rp-h{opacity:.4}
table.rpt th.dropL{box-shadow:inset 3px 0 0 var(--accent)}
table.rpt th.dropR{box-shadow:inset -3px 0 0 var(--accent)}

/* ---- drop-to-remove: only while a column is in the air ---- */
.rep-drop{
  display:none; margin:0 14px 14px; padding:14px; border-radius:var(--r);
  border:1.5px dashed var(--line-strong); text-align:center;
  font-family:var(--disp); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.rep-drop.on{display:block}
.rep-drop.hot{border-color:var(--danger); border-style:solid;
  background:var(--danger-soft); color:var(--danger)}

/* ---- right-click menu ---- */
.rp-menu{position:fixed; z-index:430; min-width:196px; padding:5px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); box-shadow:var(--shadow-md)}
.rp-menu-h{padding:6px 9px 7px; font-family:var(--disp); font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700;
  border-bottom:1px solid var(--line); margin-bottom:4px}
.rp-menu button{display:block; width:100%; text-align:left; border:0; background:none;
  font:inherit; font-size:12.5px; color:var(--ink); padding:7px 9px;
  border-radius:var(--r-sm); cursor:pointer}
.rp-menu button:hover{background:var(--accent-soft); color:var(--accent-hi)}
/* v6.04: is menu me ek item seedha LINK hai (Docs) -- button jaisa hi
   dikhna chahiye, warna wo alag-thalag lagta hai. */
.rp-menu a{display:block; width:100%; text-align:left; border:0; background:none;
  font:inherit; font-size:12.5px; color:var(--ink); padding:7px 9px;
  border-radius:var(--r-sm); cursor:pointer; text-decoration:none}
.rp-menu a:hover{background:var(--accent-soft); color:var(--accent-hi)}
.rp-menu button.dang{color:var(--danger)}
.rp-menu button.dang:hover{background:var(--danger-soft); color:var(--danger)}

/* ---- column chooser / preview sheet ---- */
.rp-sheet{position:fixed; inset:0; z-index:400; background:rgba(18,41,44,.34);
  display:flex; align-items:center; justify-content:center; padding:20px}
.rp-sheet-b{background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  width:min(820px,100%); max-height:86vh; display:flex; flex-direction:column}
.rp-sheet-b.narrow{width:min(520px,100%)}
.rp-sheet-h{display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.rp-sheet-h h3{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600}
.rp-sheet-c{padding:14px; overflow:auto}
.rp-cg{margin-bottom:14px}
.rp-cg h5{font-family:var(--disp); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0 0 6px}
.rp-cg{display:grid; gap:2px 14px; grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.rp-cg h5{grid-column:1/-1}
.rp-ck{font-size:12.5px; color:var(--ink-2)}
table.rp-prev{width:100%; border-collapse:collapse; font-size:13px}
table.rp-prev th{text-align:left; width:108px; padding:6px 0; color:var(--ink-3);
  font-family:var(--disp); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  vertical-align:top; font-weight:600}
table.rp-prev td{padding:6px 0; border-bottom:1px solid var(--line); color:var(--ink)}

/* ---- phone: the chooser comes up from the bottom, the table scrolls ---- */
@media (max-width:760px){
  .rep-f{gap:8px}
  .rep-l{flex:1 1 140px}
  .rep-l select,.rep-l input{min-width:0; width:100%}
  .rep-l > span{display:none}
  .rep-b{gap:6px}
  .rep-b .btn.sm{flex:1 1 auto}
  .rep-w{max-height:none}
  .rp-sheet{align-items:flex-end; padding:0}
  .rp-sheet-b,.rp-sheet-b.narrow{width:100%; max-height:82vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0}
  .rp-cg{grid-template-columns:1fr 1fr}
  .rep-drop{margin:0 10px 10px}
}

/* ============================================================
   GENERATE  (All shipments)
   The layouts kept out of the Documents step. Present but greyed
   until the shipment is complete, so it never looks missing.
   ============================================================ */
.btn.sm.gen{border-color:var(--accent-line); color:var(--accent-hi)}
.btn.sm.gen:hover{background:var(--accent-soft); border-color:var(--accent)}
.btn.sm.gen.off{border-color:var(--line); color:var(--ink-3); cursor:not-allowed; opacity:.75}
.btn.sm.gen.off:hover{background:transparent}

/* the tick on Setup › Document format that moves a layout here */
.tpl-bar .tpl-gen{flex:1 1 100%; margin:6px 0 0; font-size:12px; color:var(--ink-2)}
@media (min-width:920px){ .tpl-bar .tpl-gen{flex:0 1 auto; margin:0 4px 0 auto} }

/* ============================================================
   COMMAND CENTRE  (Dashboard)
   Built from the pieces already here — .panel, .dt, .kpi, .stt,
   .segs, .pill. What is new is only what the new sections need.
   ============================================================ */
/* Wahi ehtiyat jo .wsp par -- chhupna opt-in hai. (v5.71) */
.wrap.cc{opacity:1}
.wrap.cc.fade{opacity:0; transition:opacity .22s ease}
.wrap.cc.fade.in{opacity:1}
@media (prefers-reduced-motion:reduce){ .wrap.cc.fade{opacity:1; transition:none} }

/* ---- header: period sits on its own line so it never squeezes ---- */
.cc .dhead{flex-wrap:wrap}
.cc .dper{flex:1 1 100%; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}
.cc .dper .period{flex:0 1 auto}

/* ---- KPI strip: 8 cards, and never squeezed below readable ---- */
.kstrip{display:grid; gap:10px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--s4)}
@media (max-width:1180px){ .kstrip{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .kstrip{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* below that, a swipeable strip rather than cards too small to read */
@media (max-width:520px){
  /* A swipeable strip, but inside the page's own gutter — bleeding it out
     with a negative margin made the document itself scroll sideways. */
  .kstrip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:4px; gap:8px; max-width:100%}
  .kstrip .kpi{flex:0 0 68%; scroll-snap-align:start}
}
.kstrip .kpi{padding:12px 14px 11px; gap:1px; min-width:0}
.kstrip .kpi b{font-size:22px; line-height:1.2}
.kstrip .kpi b.k9{font-size:19px} .kstrip .kpi b.k12{font-size:17px} .kstrip .kpi b.k15{font-size:15px}
.kstrip .kpi-s{font-size:11px; line-height:1.45; min-height:1.45em}
.kpi-s i.flat{color:var(--ink-3)}
.kpi-s i.up{color:var(--ok)} .kpi-s i.down{color:var(--danger)}

/* ---- two-up grid, collapsing to one ---- */
.dg2{display:grid; gap:var(--s4); grid-template-columns:1fr 1fr; margin-top:var(--s4)}
/* Measured: without this a wide table forced its grid column past the page
   and the whole document scrolled sideways. A track is minmax(auto,1fr), so
   it will not shrink below its content unless told it may. */
.dg2 > *{min-width:0}
.dg2 .tw{max-width:100%}
@media (max-width:1000px){ .dg2{grid-template-columns:1fr} }

/* ---- export performance ---- */
.perf-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.perf-h b{font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.perf-h span{font-size:12.5px; color:var(--ink-3)}
.perf-h em{flex:1 1 100%; font-style:normal; font-size:11.5px; color:var(--warn)}
.perf{position:relative}
.perf-svg{display:block; width:100%; height:190px}
.perf-base{stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke}
.pb-hit{fill:transparent}
.pb-bar{fill:var(--accent); transition:fill .12s ease}
.pb.on .pb-bar{fill:var(--accent-hi)}
.pb.on .pb-hit{fill:color-mix(in srgb,var(--accent) 7%, transparent)}
.perf-x{display:grid; margin-top:6px; font-size:10.5px; color:var(--ink-3);
  font-family:var(--disp); letter-spacing:.04em; text-transform:uppercase}
.perf-x div{text-align:center; overflow:hidden; white-space:nowrap}
.perf-x div.hid{visibility:hidden}
.perf-tip{position:absolute; top:4px; z-index:5; pointer-events:none;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  box-shadow:var(--shadow-md); padding:8px 11px; min-width:132px}
.perf-tip b{display:block; font-size:12px; margin-bottom:3px}
.perf-tip span{display:block; font-size:11.5px; color:var(--ink-2);
  font-variant-numeric:tabular-nums; line-height:1.55}
.perf-tbl{margin-top:12px}
.perf-tbl summary{cursor:pointer}

/* ---- top-N tables: a bar behind the name, so rank reads at a glance ---- */
table.topt td,table.topt th{padding:7px 10px}
table.topt tbody tr{cursor:pointer}
table.topt tbody tr:hover td{background:var(--surface-2)}
table.topt td:first-child{position:relative; max-width:210px}
.topbar{position:absolute; left:0; top:3px; bottom:3px; width:var(--w);
  background:color-mix(in srgb,var(--accent) 13%, transparent);
  border-left:2px solid var(--accent); border-radius:0 3px 3px 0; pointer-events:none}
.topnm{position:relative; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.mont td:first-child{max-width:150px}

/* ---- action centre ---- */
.act-sum{font-size:13px; color:var(--ink-2); padding-bottom:10px; margin-bottom:4px;
  border-bottom:1px solid var(--line)}
.act-sum b{font-weight:700; color:var(--ink)}
.acts{display:flex; flex-direction:column}
.act{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line); padding:9px 4px;
  font:inherit; cursor:pointer; min-height:44px; border-radius:var(--r-sm)}
.act:last-child{border-bottom:0}
.act:hover{background:var(--surface-2)}
.act-n{font-family:var(--mono); font-size:13px; font-weight:700; min-width:26px;
  text-align:right; color:var(--ink); font-variant-numeric:tabular-nums}
.act-t{flex:1; min-width:0; font-size:12.5px; color:var(--ink); line-height:1.4}
.act-t em{display:block; font-style:normal; font-size:11px; color:var(--ink-3); margin-top:1px}
.act-go{font-size:11.5px; color:var(--accent); white-space:nowrap; opacity:0; transition:opacity .14s ease}
.act:hover .act-go{opacity:1}
.act.ok{border-top:1px solid var(--line); margin-top:4px}

/* ---- readiness ---- */
.rdybar{display:flex; gap:2px; height:8px; border-radius:99px; overflow:hidden; margin-bottom:14px}
.rdybar i{display:block; min-width:3px}
.rdybar i.st-draft{background:var(--ink-3)} .rdybar i.st-prog{background:var(--accent-line)}
.rdybar i.st-att{background:var(--warn)} .rdybar i.st-ready{background:var(--accent)}
.rdybar i.st-done{background:var(--accent-deep)}
.rdys{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.rdy{display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  background:none; border:1px solid var(--line); border-radius:var(--r); padding:9px 10px;
  font:inherit; cursor:pointer; min-height:44px; transition:border-color .14s ease}
.rdy:hover:not([disabled]){border-color:var(--accent-line); background:var(--surface-2)}
.rdy[disabled]{opacity:.5; cursor:default}
.rdy b{font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
.rdy em{font-style:normal; font-size:11px; color:var(--ink-3)}

/* ---- logistics ---- */
.lgs{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.lg{border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; min-width:0}
.lg span{display:block; font-family:var(--disp); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600}
.lg b{display:block; font-size:17px; font-weight:600; margin-top:3px;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.lg em{display:block; font-style:normal; font-size:11px; color:var(--ink-3); margin-top:2px}

/* ---- insights ---- */
.inss{display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.ins{display:block; text-align:left; background:none; border:1px solid var(--line);
  border-radius:var(--r); padding:9px 11px; font:inherit; min-width:0; min-height:44px}
.ins.go{cursor:pointer; transition:border-color .14s ease, background .14s ease}
.ins.go:hover{border-color:var(--accent-line); background:var(--surface-2)}
.ins span{display:block; font-family:var(--disp); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600}
.ins b{display:block; font-size:13.5px; font-weight:600; margin-top:3px; color:var(--ink)}
.ins em{display:block; font-style:normal; font-size:11.5px; color:var(--ink-3);
  margin-top:1px; font-variant-numeric:tabular-nums}

/* ---- explore reports ---- */
.expl{display:flex; gap:8px; flex-wrap:wrap}
.exp{background:var(--surface-2); border:1px solid var(--line); border-radius:99px;
  padding:7px 14px; font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer;
  min-height:34px; transition:border-color .14s ease, color .14s ease, background .14s ease}
.exp:hover{border-color:var(--accent-line); color:var(--accent-hi); background:var(--accent-soft)}

/* the "See all" / "Open" links in a panel header */
.panel-h .lnk{background:none; border:0; font:inherit; font-size:12px; color:var(--accent);
  cursor:pointer; padding:4px 0; white-space:nowrap;
  min-height:26px; display:inline-flex; align-items:center}
.panel-h .lnk:hover{text-decoration:underline}

@media (max-width:640px){
  .cc .dper .period{overflow-x:auto; max-width:100%}
  .perf-svg{height:160px}
  .act-go{opacity:1}
}

/* Finance ke filter: har dabbe par chhota sirnaama. Khaali date input
   "dd----yyyy" dikhata hai aur bina sirnaame ke pata hi nahi chalta ki
   wo From hai ya To. */
.tbar .tbf{display:flex; flex-direction:column; gap:3px; min-width:0}
.tbar .tbf > span{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding-left:1px;
}
/* .tbar .tq par `flex:1 1 260px` laga hua hai. Wo pehle seedha .tbar ka
   bachcha tha (row), to chaudai badhti thi. Ab .tbf ke andar hai jo
   COLUMN hai -- wahan wahi flex OONCHAI badha deta tha aur search ka
   dabba poora block ban jata tha. Isliye yahan wapas natural height. */
.tbar .tbf > input,.tbar .tbf > select,.tbar .tbf .tq{flex:0 0 auto; width:100%; min-width:120px}
.tbar .tbf.grow1{flex:1 1 240px}
.tbar .tbf.grow1 input{min-width:0}
@media (max-width:860px){ .tbar .tbf{flex:1 1 46%} .tbar .tbf.grow1{flex:1 1 100%} }

/* Ek line ka ishara -- alert ka poora dabba iske liye bahut bhaari tha */
.fin-note{
  margin:0 0 12px; padding:8px 11px; border-radius:var(--r-sm);
  background:var(--surface-2); border-left:2px solid var(--line-strong); line-height:1.5;
}
.fin-note.warn{background:var(--warn-soft); border-left-color:var(--warn); color:var(--ink-2)}

/* Rate revisions ki patti bagal me, baaki setting dayein */
.dcols2{display:grid; gap:18px; grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:start}
@media (max-width:900px){ .dcols2{grid-template-columns:minmax(0,1fr)} }
.dcols2 .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
table.dt.fin tbody tr.on td{background:var(--accent-soft)}
table.dt.fin td .sub{display:block; font-size:10.5px; color:var(--ink-3); font-weight:400}
/* v6.05: Payments ki table `table-layout:fixed` hai aur uske khaane `nowrap`
   -- usme doosri line (jaise "\2212 US$ 3,984.00 opening") 124px me kat kar
   "..." ban jaati thi. Raqam kabhi kat kar nahi dikhni chahiye, isliye ye
   chhoti line wahin wrap hoti hai. Sirf `.sub` par -- khaane ka apna text
   jyon ka tyon ek line me rehta hai. */
table.rpt td .sub{white-space:normal; line-height:1.3}
/* Incentive ki tables bohot chaudi hai -- thoda kas do */
table.dt.fin td,table.dt.fin th{padding-left:9px; padding-right:9px}

/* ============================================================
   EK SAATH KAI SHIPMENT  (v5.68)
   All shipments page par tick ka khaana aur uper ki patti.
   ============================================================ */
table.dt.ships th.selc,table.dt.ships td.selc{
  width:1%; white-space:nowrap; padding-left:12px; padding-right:4px; text-align:center;
}
table.dt.ships td.selc{cursor:default}
table.dt.ships .selc input{width:auto; height:auto; margin:0; cursor:pointer; accent-color:var(--accent)}
table.dt.ships.pickable tbody tr.on td{background:var(--accent-soft)}
table.dt.ships.pickable tbody tr.on:hover td{background:var(--accent-soft)}
.bulkbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
  padding:8px 12px; border:1px solid var(--accent-line); border-radius:var(--r);
  background:var(--accent-soft);
}
.bulkbar b{font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums}
.bulkbar .hint{font-size:12px}
.bulkbar .grow{flex:1}
@media (max-width:640px){
  .bulkbar{gap:8px}
  .bulkbar .grow{flex:1 1 100%; height:0}
  .bulkbar .btn{flex:1 1 auto}
}

/* ============================================================
   KHULNE-BAND HONE WALE SECTION  (v5.68)
   Users & activity page par paanch section the aur sab khule rehte
   the -- neeche wale tak pahunchne me bohot scroll lagta tha. Ab
   sirnaama khud ek button hai. Band haalat me sirf patti dikhti hai.
   ============================================================ */
.card.fold > .card-h{padding:9px 14px 9px 10px; gap:8px}
.fold-t{
  display:flex; align-items:center; gap:8px; background:none; border:0; padding:4px 4px;
  cursor:pointer; font:inherit; text-align:left; min-width:0; border-radius:var(--r-sm);
}
.fold-t:hover{background:var(--surface-2)}
.fold-t:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.fold-t h3{
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; white-space:nowrap;
}
.fold-t:hover h3{color:var(--ink-2)}
.card.fold:not(.shut) .fold-t h3{color:var(--ink-2)}
.fold-s{
  font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-variant-numeric:tabular-nums;
}
/* Teer: band me daayein, khule me neeche */
.fold-c{
  width:14px; height:14px; flex:0 0 14px; position:relative; display:block;
  transition:transform .16s ease;
}
.fold-c::before{
  content:""; position:absolute; left:3px; top:1px; width:6px; height:6px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg); color:var(--ink-3);
}
.card.fold:not(.shut) .fold-c{transform:rotate(90deg)}
.card.fold.shut > .card-b{display:none}
.card.fold.shut{background:var(--surface)}
/* Page ke section ek doosre se saate rahe */
.usr-page .card.fold + .card.fold,.usr-page #uAct .card.fold,
.usr-page #uVer .card.fold{margin-top:10px}
.usr-page #uAct,.usr-page #uVer{display:block}
.usr-page .card.fold > .card-b{padding:12px 14px}
/* Khula ho to bhi page chhota rahe -- lambi list apne andar scroll kare */
.usr-page #acList{max-height:420px; overflow:auto}
.usr-page #uVer .tw{max-height:420px}
@media (max-width:620px){ .fold-s{display:none} }

/* ============================================================
   FINANCE  (v5.65)
   Kuch naya nahi banaya — .panel, .kpi, .dt, .pill, .tbar wahi hai.
   Sirf ek cheez yahan chahiye thi: total wali pankti alag dikhe. Aur
   wo bhi table.dt.fin par hi, taki Reports ka total row — jo aaj
   jaisa hai waisa hi rehna chahiye — na hile.
   ============================================================ */
/* ROW ME HI BHARNE WALE KHAANE  (Export incentives)
   Do input ek hi khaane me -- upar raqam, neeche tareekh -- theek
   wahin jahan pehle chhapa hua aankda aur uski date thi. Column ka
   naap wahi rehta hai, table ka dhaancha nahi hila. */
.inl{display:flex; flex-direction:column; gap:3px; align-items:flex-end}
.incin{
  width:130px; max-width:100%; padding:3px 7px; text-align:right;
  border:1px solid var(--line); border-radius:6px; background:var(--bg);
  color:var(--ink); font:inherit; font-size:12.5px; line-height:1.35;
}
.incin.dt{font-size:11.5px; color:var(--ink-2); padding:2px 6px}
.incin:hover{border-color:var(--line-strong)}
.incin:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus)}
/* Save chal raha hai / ho gaya -- chhota sa ishara, table hilti nahi */
.incin.busy{opacity:.55}
.incin.ok{border-color:var(--ok); background:var(--ok-soft)}
@media (max-width:760px){ .incin{width:108px} }

table.dt.fin tr.tot td{
  background:var(--surface-2); font-weight:600; color:var(--ink);
  border-top:1px solid var(--line-strong);
}
table.dt.fin tr.tot td b{font-weight:700}
table.dt.fin tr.tot:hover td{background:var(--surface-2)}
table.dt.fin .mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ---- Party ledger ka "All parties"  (v5.99 §5/§6) ----
   Ye button pehle date wale khaano ke beech me pada tha, jahan uska
   koi matlab nahi banta tha. Ab wo PARTY ke khaane ke saath hai --
   wahi jagah jahan aadmi party badalne jaata hai.

   Roop jaan boojh kar halka hai: na border, na dabba, na bhara hua
   rang -- sirf app ka apna accent. Par dabane ki jagah poori, taaki
   phone par bhi asaani se lage. */
.tbar .tbf.ldpick{flex:1 1 320px}
.ldpick-r{display:flex; align-items:center; gap:8px; min-width:0}
.ldpick-r > select{flex:1 1 auto; width:auto; min-width:140px}
.ldall{
  flex:0 0 auto; background:none; border:0; cursor:pointer;
  font:inherit; font-weight:600; color:var(--accent);
  padding:8px 10px; min-height:36px; border-radius:var(--r);
  white-space:nowrap; line-height:1;
}
.ldall:hover,.ldall:focus-visible{background:var(--accent-soft)}

/* ---- v6.01: Export incentives ki tarteeb + rows-per-page ----
   Header ka khaana ek button ban gaya (keyboard se bhi chalta hai),
   par dikhne me bilkul pehle jaisa hi -- wahi chhota uppercase
   header. Sirf hover par accent aata hai aur ek chhota teer, taki
   saaf pata chale kis khaane par tarteeb lagi hai. */
table.dt th .thsort{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
table.dt th .thsort:hover{color:var(--accent)}
table.dt th .thsort:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
table.dt th .sarr{color:var(--accent); font-size:11px}
/* Rows ka chunav pager ki hi patti me, Next ke baad. */
/* Chhoti screen par patti me chaar cheez ho jaati hai, isliye wo
   neeche lipat jaati hai -- dab kar kategi nahi. */
.pager{flex-wrap:wrap; row-gap:8px}
.pager .perpick{display:inline-flex; align-items:center; gap:6px; margin-left:4px}
.pager .perpick > span{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.pager .perpick select{padding:3px 6px; font-size:12px; min-width:64px}

/* ---- v6.03: BRC ke kai record ----
   Row ke neeche khulne wala dabba hata diya gaya (unhe pasand nahi
   aaya). Ab do hi cheezein chahiye: table ke khaane me kai number
   ek ke neeche ek, aur parde ke andar pehle se add ki hui list. */
.brcnos{display:flex; flex-direction:column; gap:2px; line-height:1.35}
/* Number poora dikhna chahiye -- kat kar aadha number kisi kaam ka
   nahi. Jagah kam pade to khaana kheench lo (Columns se resize). */
.brcnos > span{white-space:nowrap; overflow:visible}
.brclist{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.brclist-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:8px;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.brclist-h .kpi-s{text-transform:none; letter-spacing:0; font-size:12px}
.brclist table.dt th{background:var(--surface-2); position:static}
.brclist .tw{max-height:280px; overflow:auto}
/* Kisne joda -- tareekh, waqt aur naam teen line me, taaki khaana
   chauda na ho aur Edit/Delete nazar me rahe. */
.brclist .dt td.mod{font-size:11px; text-align:left; min-width:96px}
.brclist .brcby{display:block; font-size:11px; color:var(--ink-3)}
.bad-t{color:var(--danger)}