/* Fanous ERP v2 — design system
   Layout: inverted-L shell (dim sidebar + content), 4px grid, 36px rows, one accent (gold) for action/focus/brand only. */
:root{
  --bg:#0E0D0B;            /* canvas */
  --s1:#14130F;            /* sidebar / sunken */
  --s2:#1A1813;            /* cards */
  --s3:#211E17;            /* raised, hover */
  --s4:#2A261D;            /* active, inputs */
  --line:rgba(244,237,224,.07);
  --line2:rgba(244,237,224,.13);
  --fg:#EEE7D9;            /* primary text */
  --fg2:#B5AC98;           /* secondary */
  --fg3:#7E7765;           /* tertiary / hints */
  --gold:#E3BE8C; --gold2:#C99B62; --gold-ink:#1B1407;
  --ok:#8FD0A4; --ok-bg:rgba(143,208,164,.12);
  --warn:#EBC87E; --warn-bg:rgba(235,200,126,.12);
  --err:#EE9B8B; --err-bg:rgba(238,155,139,.12);
  --info:#9FBCE0; --info-bg:rgba(159,188,224,.12);
  --display:'Cormorant Garamond','Noto Naskh Arabic',Georgia,serif;
  --ui:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:8px; --r-lg:12px; --side:236px;
  --ease:cubic-bezier(.23,1,.32,1);
}
html[dir=rtl]{--display:'Noto Naskh Arabic','Cormorant Garamond',serif;--ui:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:400 13.5px/1.5 var(--ui);-webkit-font-smoothing:antialiased;color-scheme:dark;font-variant-numeric:tabular-nums}
html[dir=rtl] body{font-size:14.5px;line-height:1.65}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:22px;line-height:1.25}
h2{font-size:17px}
h3{font-size:14px}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{letter-spacing:0}
.num,.amt,td.num,th.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:12.5px}
.muted{color:var(--fg2)}.dim{color:var(--fg3)}
.hidden,[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- boot ---------- */
.boot{min-height:100vh;display:grid;place-items:center}
.boot img{animation:glow 1.6s var(--ease) infinite alternate}
@keyframes glow{from{opacity:.55}to{opacity:1;filter:drop-shadow(0 0 16px rgba(227,190,140,.4))}}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:none;background:var(--s1);border-inline-end:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;padding:14px 10px 16px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px}
.brand img{width:28px;height:28px}
.brand b{font:600 20px/1 var(--display);color:var(--gold);letter-spacing:.08em}
.brand small{display:block;font:600 9.5px/1 var(--ui);letter-spacing:.22em;color:var(--fg3);margin-top:3px}
.navgrp{font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);padding:14px 10px 6px}
html[dir=rtl] .navgrp{letter-spacing:0;font-size:12px;text-transform:none}
.nav a{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:7px;color:var(--fg2);font-weight:500;transition:background .12s var(--ease),color .12s}
.nav a:hover{background:var(--s3);color:var(--fg)}
.nav a.on{background:var(--s4);color:var(--fg)}
.nav a.on svg{color:var(--gold)}
.nav svg{width:16px;height:16px;flex:none;opacity:.9}
.nav .badge{margin-inline-start:auto;background:var(--s4);color:var(--fg2);font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;min-width:20px;text-align:center}
.nav a.on .badge{background:var(--gold);color:var(--gold-ink)}
.nav .kbd{margin-inline-start:auto;opacity:0;transition:opacity .12s}
.nav a:hover .kbd{opacity:1}
.side .foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.who{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px}
.who:hover{background:var(--s3)}
.who .av{width:28px;height:28px;border-radius:50%;background:var(--s4);display:grid;place-items:center;color:var(--gold);font-weight:600;font-size:12px;flex:none}
.who div{min-width:0}.who b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who small{color:var(--fg3);font-size:11.5px}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px;background:rgba(14,13,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .crumbs{display:flex;align-items:center;gap:6px;color:var(--fg2);font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumbs b{color:var(--fg);font-weight:600}
.topbar .sp{flex:1}
.searchbtn{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 12px;border:1px solid var(--line2);background:var(--s2);border-radius:8px;color:var(--fg3);font-size:13px;cursor:text;min-width:220px;transition:border-color .12s}
.searchbtn:hover{border-color:var(--gold2);color:var(--fg2)}
.searchbtn svg{width:15px;height:15px}
.searchbtn .kbd{margin-inline-start:auto}
.kbd{display:inline-flex;align-items:center;gap:2px;font:500 10.5px/1 var(--mono);color:var(--fg3);border:1px solid var(--line2);border-radius:4px;padding:3px 5px;background:var(--s1)}
.main{padding:22px clamp(16px,2.6vw,36px) 90px;max-width:1440px;width:100%}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pagehead p{margin:3px 0 0;color:var(--fg2);font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line2);background:var(--s2);color:var(--fg);border-radius:8px;font-weight:500;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .12s var(--ease),border-color .12s,transform .1s}
.btn:hover{background:var(--s3);border-color:rgba(244,237,224,.2)}
.btn:active{transform:scale(.98)}
.btn.gold{background:var(--gold);color:var(--gold-ink);border-color:transparent;font-weight:600}
.btn.gold:hover{background:#ECCB9E}
.btn.ghost{background:transparent;border-color:transparent;color:var(--fg2)}
.btn.ghost:hover{background:var(--s3);color:var(--fg)}
.btn.danger{color:var(--err);border-color:rgba(238,155,139,.3);background:transparent}
.btn.danger:hover{background:var(--err-bg)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.btn.xs{height:24px;padding:0 8px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn svg{width:15px;height:15px}
.btn .kbd{margin-inline-start:4px}
.iconbtn{background:none;border:1px solid transparent;border-radius:7px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--fg2);position:relative;transition:background .12s}
.iconbtn:hover{background:var(--s3);color:var(--fg)}
.iconbtn svg{width:17px;height:17px}
.iconbtn .dot{position:absolute;top:6px;inset-inline-end:6px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
input,select,textarea{width:100%;height:34px;background:var(--s1);border:1px solid var(--line2);border-radius:7px;padding:0 10px;outline:none;transition:border-color .12s,box-shadow .12s}
textarea{height:auto;min-height:76px;padding:8px 10px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(227,190,140,.14)}
input::placeholder,textarea::placeholder{color:var(--fg3)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:30px}
html[dir=rtl] select{background-position:16px 55%,11px 55%}
input[type=checkbox]{width:16px;height:16px;height:16px;accent-color:var(--gold);padding:0;margin:0}
input[type=date],input[type=month]{color-scheme:dark}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--fg2);font-weight:500}
label.f .hint{font-weight:400;color:var(--fg3);font-size:11.5px}
label.chk{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--fg);cursor:pointer;height:34px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
.span2{grid-column:span 2}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto;min-width:150px;height:32px}
.toolbar .grow{flex:1;min-width:180px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;padding:2px;background:var(--s1);height:32px}
.seg button{border:0;background:none;color:var(--fg2);padding:0 11px;border-radius:6px;font-weight:500;font-size:12.5px;cursor:pointer;transition:background .12s}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--s4);color:var(--fg)}
.seg.sm{height:26px}.seg.sm button{padding:0 8px;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);background:var(--s2);color:var(--fg2);font-size:12.5px;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--fg);border-color:rgba(244,237,224,.22)}
.chip.on{background:var(--s4);color:var(--fg);border-color:var(--gold2)}
.chip .x{opacity:.6}
.chip .x:hover{opacity:1}

/* ---------- surfaces ---------- */
.card{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.card h3{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h3 a{font-weight:500;font-size:12.5px;color:var(--fg2)}
.card h3 a:hover{color:var(--gold)}
.card h3 svg{width:15px;height:15px;color:var(--fg2);flex:none}
.card h3 .ring{width:40px;height:40px}
.card+.card{margin-top:14px}
.stack{display:flex;flex-direction:column;gap:14px}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.note{background:var(--s1);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--fg2);font-size:12.5px}
.empty{padding:32px 16px;text-align:center;color:var(--fg3)}
.empty b{display:block;color:var(--fg2);font-weight:600;margin-bottom:4px}
.empty .btn{margin-top:12px}
.err{color:var(--err);font-size:13px}

/* KPI / cue tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:14px}
.kpi{display:block;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;position:relative;transition:border-color .12s,background .12s;min-width:0}
a.kpi:hover,.kpi.click:hover{border-color:rgba(244,237,224,.2);background:var(--s3);cursor:pointer}
.kpi small{color:var(--fg2);font-weight:500;font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{display:block;font-size:24px;line-height:1.2;font-weight:600;margin-top:4px;color:var(--fg);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b .cur{font-size:12px;color:var(--fg3);font-weight:500;margin-inline-start:4px;letter-spacing:0}
.kpi .sub{color:var(--fg3);font-size:12px;margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpi.hl{border-color:rgba(227,190,140,.3);background:linear-gradient(160deg,rgba(227,190,140,.1),transparent 55%),var(--s2)}
.kpi.hl b{color:var(--gold)}
.kpi .neg{color:var(--err)}
.kpi .spark{position:absolute;inset-inline-end:14px;bottom:14px;width:72px;height:24px;opacity:.9}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:999px}
.delta.up{color:var(--ok);background:var(--ok-bg)}.delta.down{color:var(--err);background:var(--err-bg)}.delta.flat{color:var(--fg3);background:var(--s3)}
.split{display:flex;gap:0;margin-top:8px;border-radius:6px;overflow:hidden;height:6px;background:var(--s4)}
.split i{display:block;height:100%}
.split i.a{background:var(--gold2)}.split i.b{background:var(--err)}
.headline{font:500 19px/1.4 var(--display);font-size:21px;color:var(--fg);margin:0 0 16px;max-width:70ch}
.headline em{font-style:normal;color:var(--gold)}
html[dir=rtl] .headline{font-size:22px}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s2)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:start;font-weight:500;color:var(--fg3);font-size:11.5px;letter-spacing:.04em;height:36px;padding:0 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--s2);position:sticky;top:0;z-index:1}
html[dir=rtl] th{letter-spacing:0;font-size:12.5px}
th.sort{cursor:pointer;user-select:none}th.sort:hover{color:var(--fg)}
th .arr{opacity:.6;font-size:10px;margin-inline-start:4px}
td{height:36px;padding:0 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
td.wrap{white-space:normal}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--s3)}
tbody tr.sel td{background:rgba(227,190,140,.07)}
td.num,th.num{text-align:end}
td .sub,td small{display:block;color:var(--fg3);font-size:11.5px;line-height:1.2;margin-top:1px}
td .cur{color:var(--fg3);font-size:11px;margin-inline-start:3px}
td.chk,th.chk{width:36px;padding:0 0 0 12px}
html[dir=rtl] td.chk,html[dir=rtl] th.chk{padding:0 12px 0 0}
.rowacts{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .12s}
tr:hover .rowacts,tr:focus-within .rowacts{opacity:1}
.rowacts .iconbtn{width:26px;height:26px}.rowacts .iconbtn svg{width:14px;height:14px}
tfoot td{background:var(--s1);font-weight:600;color:var(--fg)}
.bulkbar{position:sticky;bottom:16px;z-index:20;display:flex;align-items:center;gap:10px;margin:12px auto 0;width:max-content;max-width:100%;background:var(--s3);border:1px solid var(--line2);border-radius:10px;padding:8px 10px 8px 14px;box-shadow:0 16px 40px rgba(0,0,0,.5);animation:up .2s var(--ease)}
@keyframes up{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.pill{display:inline-flex;align-items:center;gap:5px;padding:0 8px;height:22px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--fg2);background:var(--s4);white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pill.ok{color:var(--ok);background:var(--ok-bg)}
.pill.warn{color:var(--warn);background:var(--warn-bg)}
.pill.err{color:var(--err);background:var(--err-bg)}
.pill.gold{color:var(--gold);background:rgba(227,190,140,.12)}
.pill.info{color:var(--info);background:var(--info-bg)}
.pill.plain::before{display:none}
.list{display:flex;flex-direction:column}
.list .row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);align-items:center;min-height:44px}
.list .row:last-child{border-bottom:0}
.list .row>div{min-width:0}
.list .row b{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .row small{display:block;color:var(--fg3);font-size:12px}
a.row:hover b{color:var(--gold)}
.skel{background:linear-gradient(90deg,var(--s2),var(--s3),var(--s2));background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:6px;height:14px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.skelrows .skel{height:36px;margin-bottom:1px;border-radius:0}

/* charts */
.chart{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--fg2);margin-top:8px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-end:5px;vertical-align:-1px}
.bars .bar{margin:8px 0}
.bars .bar div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--fg2);margin-bottom:4px;gap:8px}
.bars .bar div span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .bar span.t{display:block;height:6px;border-radius:99px;background:var(--s4);overflow:hidden}
.bars .bar span.t i{display:block;height:100%;background:var(--gold2);border-radius:99px;transition:width .5s var(--ease)}

/* situations / inbox cards */
.sit{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--s2);border-inline-start:3px solid var(--fg3)}
.sit.high{border-inline-start-color:var(--err)}.sit.medium{border-inline-start-color:var(--warn)}.sit.low{border-inline-start-color:var(--info)}
.sit>div{flex:1;min-width:0}
.sit>svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--fg2)}
svg[viewBox="0 0 24 24"]:not([width]){max-width:24px;max-height:24px}
.sit b{display:block;font-weight:600;font-size:13px}
.sit small{display:block;color:var(--fg2);font-size:12px;margin-top:2px}
.sit .actions{margin-top:8px}
.checklist{display:flex;flex-direction:column;gap:6px}
.checklist a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:7px;color:var(--fg2)}
.checklist a:hover{background:var(--s3);color:var(--fg)}
.checklist .tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none}
.checklist .done{color:var(--fg3);text-decoration:line-through}
.checklist .done .tick{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.ring{width:44px;height:44px}

/* ---------- modal / drawer / palette ---------- */
.overlay{position:fixed;inset:0;background:rgba(6,5,4,.66);backdrop-filter:blur(2px);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto;animation:fade .15s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--s2);border:1px solid var(--line2);border-radius:14px;width:min(700px,100%);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .18s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.modal.wide{width:min(980px,100%)}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.modal footer{display:flex;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center}
.modal footer .r{display:flex;gap:8px;margin-inline-start:auto}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(520px,100%);background:var(--s2);border-inline-start:1px solid var(--line2);z-index:55;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.45);animation:slide .22s var(--ease)}
html[dir=rtl] .drawer{box-shadow:20px 0 60px rgba(0,0,0,.45)}
@keyframes slide{from{transform:translateX(var(--sx,24px));opacity:0}to{transform:none;opacity:1}}
html[dir=rtl] .drawer{--sx:-24px}
.drawer header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.drawer header h2{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.drawer header h2 svg{width:16px;height:16px;color:var(--gold);flex:none}
.drawer .body{flex:1;overflow-y:auto;padding:16px}
.drawer footer{padding:12px 16px;border-top:1px solid var(--line)}
.scrim{position:fixed;inset:0;z-index:54;background:rgba(6,5,4,.4)}

.palette{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(6,5,4,.6);backdrop-filter:blur(3px);animation:fade .12s var(--ease)}
.palbox{width:min(640px,calc(100% - 32px));background:var(--s2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.65);overflow:hidden;animation:pop .16s var(--ease)}
.palbox .in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line);height:52px}
.palbox .in input{border:0;background:none;height:100%;font-size:15px;padding:0;box-shadow:none}
.palbox .in svg{width:18px;height:18px;color:var(--fg3)}
.palbox .res{max-height:min(60vh,520px);overflow-y:auto;padding:6px}
.palbox .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);padding:10px 10px 4px;font-weight:600}
html[dir=rtl] .palbox .grp{letter-spacing:0;text-transform:none;font-size:12px}
.palbox .it{display:flex;align-items:center;gap:10px;padding:0 10px;height:40px;border-radius:8px;cursor:pointer;color:var(--fg)}
.palbox .it.on{background:var(--s4)}
.palbox .it svg{width:16px;height:16px;color:var(--fg3);flex:none}
.palbox .it .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palbox .it .tt small{color:var(--fg3);margin-inline-start:8px;font-size:12px}
.palbox .it .amt{color:var(--fg2);font-size:12.5px}
.palbox .foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--fg3)}

/* ---------- toasts ---------- */
#toasts{position:fixed;bottom:18px;inset-inline-start:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
html[dir=rtl] #toasts{transform:translateX(50%)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--s3);border:1px solid var(--line2);padding:9px 10px 9px 16px;border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.5);font-weight:500;font-size:13px;animation:up .2s var(--ease)}
.toast.ok{border-color:rgba(143,208,164,.4)}.toast.err{border-color:rgba(238,155,139,.5);color:var(--err)}
.toast .btn{height:26px}

/* ---------- record (object) page ---------- */
.obj{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.obj>div{min-width:0}
.main>*{min-width:0}
.objhead{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.objhead .av{width:52px;height:52px;border-radius:14px;background:var(--s3);display:grid;place-items:center;font:600 20px var(--display);color:var(--gold);flex:none}
.objhead .ttl{flex:1;min-width:220px}
.objhead .ttl h1{font-size:24px}
.objhead .ttl p{margin:3px 0 0;color:var(--fg2);font-size:13px}
.pipe{display:flex;gap:2px;margin:12px 0 0;flex-wrap:wrap}
.pipe span{height:28px;display:inline-flex;align-items:center;padding:0 12px 0 18px;background:var(--s3);color:var(--fg3);font-size:12px;font-weight:500;position:relative;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.pipe span:first-child{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);padding-inline-start:12px;border-radius:6px 0 0 6px}
.pipe span:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%);border-radius:0 6px 6px 0}
html[dir=rtl] .pipe span{clip-path:polygon(100% 0,10px 0,0 50%,10px 100%,100% 100%,calc(100% - 10px) 50%);padding:0 18px 0 12px}
html[dir=rtl] .pipe span:first-child{clip-path:polygon(100% 0,10px 0,0 50%,10px 100%,100% 100%);padding-inline-start:12px}
html[dir=rtl] .pipe span:last-child{clip-path:polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - 10px) 50%)}
.pipe span.done{background:var(--s4);color:var(--fg2)}
.pipe span.on{background:var(--gold);color:var(--gold-ink);font-weight:600}
.pipe span.bad{background:var(--err-bg);color:var(--err)}
.smart{display:flex;gap:8px;flex-wrap:wrap}
.smart a{display:flex;flex-direction:column;gap:1px;min-width:96px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--s2);transition:border-color .12s}
.smart a:hover{border-color:var(--gold2)}
.smart a b{font-size:17px;font-weight:600;line-height:1.1}
.smart a small{color:var(--fg3);font-size:11.5px}
.smart a .warn{color:var(--err)}
.ribbon{position:absolute;top:14px;inset-inline-end:-30px;transform:rotate(35deg);background:var(--ok);color:#0b2414;font:700 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;padding:6px 40px;pointer-events:none}
html[dir=rtl] .ribbon{transform:rotate(-35deg)}
.ribbon.void{background:var(--err);color:#2a0d08}
.attrs{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:13px;align-items:center}
.attrs dt{color:var(--fg3);font-weight:500;margin:0}
.attrs dd{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.attrs dd.edit{cursor:text;border-radius:5px;padding:2px 6px;margin:-2px -6px}
.attrs dd.edit:hover{background:var(--s3)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:12px 0;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;height:36px;padding:0 12px;color:var(--fg2);font-weight:500;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);border-color:var(--gold)}
.tabs button .n{color:var(--fg3);margin-inline-start:4px;font-size:12px}

/* timeline / chatter */
.tl{display:flex;flex-direction:column;gap:0}
.composer{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.composer textarea{min-height:56px}
.composer .row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tli{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.tli:last-child{border-bottom:0}
.tli .ic{width:28px;height:28px;border-radius:50%;background:var(--s3);display:grid;place-items:center;color:var(--fg2)}
.tli .ic svg{width:14px;height:14px}
.tli .ic.note{background:rgba(227,190,140,.14);color:var(--gold)}
.tli .ic.act{background:var(--info-bg);color:var(--info)}
.tli .ic.done{background:var(--ok-bg);color:var(--ok)}
.tli .hd{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--fg3);flex-wrap:wrap}
.tli .hd b{color:var(--fg2);font-weight:600}
.tli .bd{margin-top:3px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.tli .bd.note{background:var(--s1);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.diff{display:flex;flex-direction:column;gap:3px;margin-top:4px;font-size:12.5px}
.diff span{display:flex;gap:6px;flex-wrap:wrap}
.diff .k{color:var(--fg3);min-width:90px}
.diff .o{color:var(--fg3);text-decoration:line-through}
.diff .n{color:var(--fg)}
.act{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--s1);margin-bottom:6px}
.act .clk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--s3);color:var(--fg2)}
.act .clk.green{background:var(--ok-bg);color:var(--ok)}.act .clk.orange{background:var(--warn-bg);color:var(--warn)}.act .clk.red{background:var(--err-bg);color:var(--err)}
.act .clk svg{width:13px;height:13px}
.act>div{flex:1;min-width:0}
.act b{font-weight:500;font-size:13px;display:block}
.act small{color:var(--fg3);font-size:11.5px;display:block}
.act .done b{text-decoration:line-through;color:var(--fg3)}

/* lines editor */
.lines{display:flex;flex-direction:column;gap:6px}
.line{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 76px 116px 104px 32px;gap:6px;align-items:center}
.line .amt{text-align:end;color:var(--fg2)}
.lines .head{font-size:11.5px;color:var(--fg3);font-weight:500}
.totals{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-top:6px}
.totals div{display:flex;gap:14px;align-items:center}
.totals b{font-size:20px;font-weight:600;color:var(--gold)}
.totals input{width:120px}

/* board */
.board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.lane{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;min-height:200px}
.lane h4{margin:0 0 8px;font-size:12px;color:var(--fg2);display:flex;justify-content:space-between;font-weight:600}
.jcard{background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .12s,transform .12s var(--ease)}
.jcard:hover{border-color:rgba(244,237,224,.22);transform:translateY(-1px)}
.jcard b{display:block;font-weight:500;font-size:13px}
.jcard small{display:block;color:var(--fg3);font-size:12px;margin-top:1px}
.jcard .mv{display:flex;justify-content:space-between;gap:6px;margin-top:8px}
.jcard .late{color:var(--err)}

/* doc (invoice / quote) */
.doc{position:relative;overflow:hidden;background:#FBF8F2;color:#1E1A13;border-radius:14px;padding:44px clamp(20px,5vw,56px);max-width:860px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.45);font-family:var(--ui)}
.doc .dh{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:2px solid #C99B62;padding-bottom:20px;flex-wrap:wrap}
.doc .dh img{height:56px}
.doc h1{font:600 38px/1.1 var(--display);color:#8A6234}
.doc .meta{text-align:end;font-size:13.5px;color:#5b5143}
.doc .meta b{color:#1E1A13}
.doc .parties{display:flex;justify-content:space-between;gap:20px;margin:22px 0;flex-wrap:wrap;font-size:13.5px}
.doc .parties small{display:block;text-transform:uppercase;letter-spacing:.12em;color:#8A7B62;font-weight:700;font-size:10.5px;margin-bottom:4px}
.doc table th{background:#F1EADC;color:#6b5d47;border-color:#E3D8C3;position:static;height:34px}
.doc table td{border-color:#ECE3D2;height:34px}
.doc .dt{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-top:16px;font-size:14px}
.doc .dt div{display:flex;gap:30px;min-width:260px;justify-content:space-between}
.doc .dt .grand{font:600 22px var(--display);color:#8A6234;border-top:1px solid #E3D8C3;padding-top:8px}
.doc .foot{margin-top:30px;padding-top:14px;border-top:1px solid #E3D8C3;font-size:12.5px;color:#6b5d47;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.doc .stamp{display:inline-block;border:2px solid;border-radius:6px;padding:3px 10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.docbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;max-width:860px;margin:0 auto 14px}

/* ask panel */
.askq{display:flex;flex-direction:column;gap:12px}
.askmsg{display:flex;flex-direction:column;gap:8px}
.askmsg .q{align-self:flex-end;background:var(--s4);border-radius:12px 12px 2px 12px;padding:8px 12px;max-width:85%;font-size:13.5px}
html[dir=rtl] .askmsg .q{border-radius:12px 12px 12px 2px}
.askmsg .a{background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.55}
.askmsg .a .tablewrap{margin-top:10px;border-radius:8px}
.askmsg .a table th,.askmsg .a table td{height:32px;padding:0 10px;font-size:12.5px}
.askmsg .a .links{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sugg{display:flex;gap:6px;flex-wrap:wrap}
.askin{display:flex;gap:8px;align-items:flex-end}
.askin textarea{min-height:42px;max-height:120px}
.typing{display:inline-flex;gap:4px;padding:6px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--fg3);animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 0%,rgba(227,190,140,.1),transparent 60%),var(--bg)}
.authbox{width:min(400px,100%);background:var(--s2);border:1px solid var(--line2);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px}
.authbox .logo{display:block;margin:0 auto 4px;width:min(240px,80%)}
.authbox h1{text-align:center;font:600 26px var(--display)}
.authbox p{color:var(--fg2);text-align:center;margin:0;font-size:13px}
.langsw{position:fixed;top:14px;inset-inline-end:14px}

.perm{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}
.inboxgrp{margin-bottom:18px}
.inboxgrp h3{margin-bottom:8px;display:flex;align-items:center;gap:8px}
.inboxgrp h3 .n{color:var(--fg3);font-weight:500;font-size:12px}

/* ---------- mobile ---------- */
.top{display:none}
@media (max-width:980px){
  .obj{grid-template-columns:1fr}
  .cols,.cols3{grid-template-columns:1fr}
}
@media (max-width:860px){
  .side{position:fixed;inset-block:0;inset-inline-start:0;z-index:60;transform:translateX(-105%);transition:transform .22s var(--ease);box-shadow:0 0 60px rgba(0,0,0,.6)}
  html[dir=rtl] .side{transform:translateX(105%)}
  .shell.open .side{transform:none}
  .shell.open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  .topbar{padding:0 12px;gap:6px}
  .searchbtn{min-width:0;flex:1}.searchbtn span.lbl,.searchbtn .kbd{display:none}
  .main{padding:16px 14px 90px}
  .grid3{grid-template-columns:1fr 1fr}
  h1{font-size:20px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:12px}.kpi b{font-size:20px}.kpi .spark{display:none}
  .line{grid-template-columns:1fr 1fr;padding:10px;border:1px solid var(--line);border-radius:10px}
  .line .desc{grid-column:span 2}
  .lines .head{display:none}
  .toolbar input,.toolbar select{min-width:0;flex:1}
  .drawer{width:100%}
  .hide-sm{display:none}
}
@media (max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .overlay{padding:0}
  .modal{border-radius:0;min-height:100vh;border:0}
  .modal footer{position:sticky;bottom:0;background:var(--s2)}
  .doc{padding:26px 18px;border-radius:10px}
  .doc h1{font-size:30px}
  .attrs{grid-template-columns:1fr}
  .attrs dt{margin-top:6px}
}
@media print{
  body{background:#fff}
  .side,.topbar,.docbar,#toasts,.top{display:none!important}
  .main{padding:0;max-width:none}
  .doc{box-shadow:none;border-radius:0;max-width:none;padding:0}
  @page{margin:16mm}
}

#askBtn .kbd{margin-inline-start:8px;font:500 10.5px var(--mono,monospace);opacity:.6;border:1px solid currentColor;border-radius:5px;padding:0 4px;line-height:16px}