/* ===== Tokens ===== */
:root{
--bg:#f1f5f6;--surface:#fff;--surface-2:#f8fafb;--surface-3:#eff4f5;
--border:#e3eaec;--border-2:#eef3f4;
--text:#101f26;--text-2:#4c6068;--text-3:#7d9096;--text-4:#a8b9bf;
--accent:#1668d6;--accent-2:#3b86ea;--accent-soft:#e8f1fd;--accent-fg:#fff;
--good:#0f7a55;--good-soft:#e4f2ec;--warn:#a8620a;--warn-soft:#fbefdd;
--bad:#b0342c;--bad-soft:#fbeae8;--info:#25608f;--info-soft:#e7f0f8;
--ink:#101f26;
--r-sm:8px;--r-md:11px;--r-lg:16px;--r-xl:22px;
--sh-xs:0 1px 2px rgba(16,31,38,.05);
--sh-sm:0 1px 2px rgba(16,31,38,.05);
--sh-md:0 1px 2px rgba(16,31,38,.04),0 14px 30px -22px rgba(16,31,38,.24);
--sh-lg:0 24px 48px -20px rgba(16,31,38,.34);
--font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
--font-ar:'IBM Plex Sans Arabic','Plus Jakarta Sans',sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
--sidebar-w:236px;--header-h:56px;
}
[data-scheme="dark"]{
--bg:#08131a;--surface:#0f2028;--surface-2:#132831;--surface-3:#17303a;
--border:#1f373f;--border-2:#182f37;
--text:#e7eff1;--text-2:#a3b7bd;--text-3:#7d9399;--text-4:#5e777e;
--good:#3ec08d;--good-soft:#12332a;--warn:#e0a256;--warn-soft:#33271a;
--bad:#e88479;--bad-soft:#38211f;--info:#7cb2e0;--info-soft:#152a3a;--ink:#061319;
--sh-md:0 1px 2px rgba(0,0,0,.25),0 16px 32px -24px rgba(0,0,0,.7);
--sh-lg:0 24px 48px -20px rgba(0,0,0,.75);
}
/* ===== Per-system branding ===== */
[data-sys="mms"]{--accent:#b3282f;--accent-2:#cf3b42;--accent-soft:#fbebec}
[data-sys="gatee"]{--accent:#1668d6;--accent-2:#4aa3f0;--accent-soft:#e8f1fd}
[data-sys="einvoice"]{--accent:#2f9fdc;--accent-2:#5fbdea;--accent-soft:#e7f5fc}
[data-scheme="dark"][data-sys="mms"]{--accent:#e4737a;--accent-2:#f28f95;--accent-soft:#38201f;--accent-fg:#25090b}
[data-scheme="dark"][data-sys="gatee"]{--accent:#5da2f2;--accent-2:#8bc0f8;--accent-soft:#122942;--accent-fg:#04162c}
[data-scheme="dark"][data-sys="einvoice"]{--accent:#63c0ea;--accent-2:#8ed5f3;--accent-soft:#0f2c3b;--accent-fg:#04202c}

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
/* The host injects "html, body { background: transparent }" after this sheet, so the page
   background must be !important AND also painted on an element we own (.app / .portal). */
html{background:var(--bg) !important}
body{background:var(--bg) !important;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:13px}
[dir="rtl"] body,[data-lang="ar"] body{font-family:var(--font-ar)}
/* bilingual label pairs: only one language renders */
[data-ar]{display:none}
[data-lang="ar"] [data-ar]{display:revert}
[data-lang="ar"] [data-en]{display:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{margin:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-4);background-clip:content-box}

/* ===== Layout ===== */
.app{display:flex;min-height:100vh;background:var(--bg)}
.portal{min-height:100vh;background:var(--bg)}
.sidebar{width:var(--sidebar-w);flex:none;background:var(--surface);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;transition:width .2s ease}
.sidebar.collapsed{width:0;opacity:0}
.sidebar-brand{padding:15px 16px 12px;display:flex;align-items:center;gap:10px;cursor:pointer}
.sidebar-nav{flex:1;overflow-y:auto;padding:2px 9px 16px}
.sidebar-foot{padding:11px;border-top:1px solid var(--border)}
.nav-group{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);padding:12px 10px 5px}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none;margin-bottom:1px}
.nav-item:hover{background:var(--surface-3);text-decoration:none;color:var(--text-2)}
.nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--text-4);flex:none}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.nav-item.active:hover{color:var(--accent)}
.nav-item.active .dot{background:var(--accent)}
.nav-item .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.header{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;height:var(--header-h);display:flex;align-items:center;gap:11px;flex:none}
.content{flex:1;min-height:0;padding:18px;display:flex;flex-direction:column;gap:15px}
/* `backwards`, NEVER `both`. This one word was why a dropdown on the invoice
   sheet rendered underneath the bar at the bottom of the page.

   `both` keeps the animation's FORWARDS fill applied for the life of the
   element, and `rise` animates a transform - so .wrap held a permanent
   stacking context. Everything inside it, however high its z-index, was then
   painted at .wrap's level: an .f-ss-panel at 1250 could not clear a fixed
   element at the root, and no amount of raising it inside the form was ever
   going to. That is why raising the panel to 1450 changed nothing.

   `backwards` fills only BEFORE the animation starts, which is the half that
   was actually wanted - no flash of the un-animated state on load - and leaves
   nothing behind once it has run. */
.wrap{display:flex;flex-direction:column;gap:15px;max-width:1600px;width:100%;animation:rise .3s ease backwards}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* ===== Primitives ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.card-pad{padding:15px 16px}
.card-head{padding:13px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-2);flex-wrap:wrap}
.card-title{font-size:13px;font-weight:800;letter-spacing:-.01em}
.card-sub{font-size:11.5px;color:var(--text-3);margin-top:3px}
.grid{display:grid;gap:13px}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.g-2{grid-template-columns:minmax(0,2fr) minmax(272px,1fr);align-items:start}
.g-half{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.row{display:flex;align-items:center;gap:8px}
.row-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:13px}
.spacer{margin-inline-start:auto}
.mono{font-family:var(--mono);font-size:11.5px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.h1{font-size:20px;font-weight:800;letter-spacing:-.025em}
.sub{font-size:12.5px;color:var(--text-3);margin-top:4px}
.kpi-label{font-size:11.5px;font-weight:700;color:var(--text-3)}
.kpi-value{font-size:25px;font-weight:800;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums}
.kpi-foot{font-size:11.5px;color:var(--text-3);margin-top:9px;font-weight:600}

.btn{height:34px;padding:0 13px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{border:0;background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2);color:#fff}
.btn-soft{border:0;background:var(--accent-soft);color:var(--accent)}
.btn-danger{border-color:var(--bad);color:var(--bad)}
.btn-danger:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.btn-sm{height:28px;padding:0 10px;font-size:11px;border-radius:var(--r-sm)}
.btn-icon{width:34px;height:34px;padding:0}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--surface-3);border-color:transparent;color:var(--text)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.pill-good{background:var(--good-soft);color:var(--good)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-bad{background:var(--bad-soft);color:var(--bad)}
.pill-info{background:var(--info-soft);color:var(--info)}
.pill-neutral{background:var(--surface-3);color:var(--text-2)}
.pill-accent{background:var(--accent-soft);color:var(--accent)}
.tag{font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px;background:var(--surface-3);color:var(--text-3);white-space:nowrap}
.tag-accent{background:var(--accent-soft);color:var(--accent)}
.tag-info{background:var(--info-soft);color:var(--info)}

.field{display:flex;flex-direction:column;gap:5px}
.label{font-size:11.5px;font-weight:700;color:var(--text-2)}
.hint{font-size:11px;color:var(--text-3)}
.input,.select,.textarea{height:36px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:0 11px;font-size:12.5px;outline:none;width:100%}
.textarea{height:auto;padding:9px 11px;min-height:74px;resize:vertical;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input-err{border-color:var(--bad)}
.search{display:flex;align-items:center;gap:9px;background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-md);padding:0 12px;height:36px}
.search:focus-within{border-color:var(--accent);background:var(--surface)}
.search input{flex:1;border:0;background:transparent;outline:none;font-size:12.5px;min-width:0}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto}
.tab{border:0;background:transparent;padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);font-weight:800;border-bottom-color:var(--accent)}
.seg{display:flex;gap:3px;background:var(--surface-3);padding:3px;border-radius:var(--r-md)}
.seg button{border:0;background:transparent;color:var(--text-3);font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:var(--r-sm);cursor:pointer}
.seg button.active{background:var(--surface);color:var(--accent);box-shadow:var(--sh-xs)}

/* ===== Table ===== */
.tbl-wrap{overflow-x:auto}
.tbl{min-width:820px}
.tbl th{text-align:start;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);padding:9px 12px;background:var(--surface-2);white-space:nowrap;cursor:default}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--text)}
.tbl td{padding:10px 12px;font-size:12.5px;border-top:1px solid var(--border-2);vertical-align:middle}
.tbl td .mono,.tbl td.mono,.tbl td .pill,.tbl td .tag{white-space:nowrap}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .end{text-align:end}
.tbl.compact td{padding:6px 12px;font-size:12px}
.mark-bad{box-shadow:inset 3px 0 0 var(--bad)}
.mark-warn{box-shadow:inset 3px 0 0 var(--warn)}
[dir="rtl"] .mark-bad{box-shadow:inset -3px 0 0 var(--bad)}
[dir="rtl"] .mark-warn{box-shadow:inset -3px 0 0 var(--warn)}
.tbl-foot{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.pg{width:30px;height:30px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer}
.pg.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== Misc ===== */
.banner{display:flex;align-items:flex-start;gap:12px;padding:12px 15px;border:1px solid var(--border);border-radius:var(--r-lg)}
.banner-bad{background:var(--bad-soft);box-shadow:inset 3px 0 0 var(--bad)}
.banner-warn{background:var(--warn-soft);box-shadow:inset 3px 0 0 var(--warn)}
.banner-info{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
[dir="rtl"] .banner-bad{box-shadow:inset -3px 0 0 var(--bad)}
[dir="rtl"] .banner-warn{box-shadow:inset -3px 0 0 var(--warn)}
[dir="rtl"] .banner-info{box-shadow:inset -3px 0 0 var(--accent)}
.bar{height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.bar>span{display:block;height:6px;border-radius:4px;background:var(--accent)}
.avatar{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:11.5px;font-weight:800;flex:none}
.icon-box{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:46px 20px;text-align:center}
.drawer-mask{position:fixed;inset:0;background:rgba(16,31,38,.42);z-index:60;display:flex;justify-content:flex-end;animation:rise .16s ease both}
.drawer{width:min(520px,100%);background:var(--surface);height:100%;display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
.modal-mask{position:fixed;inset:0;background:rgba(16,31,38,.42);z-index:60;display:grid;place-items:center;padding:24px;animation:rise .16s ease both}
/* Scoped to .modal-mask on purpose. Unscoped, this rule also matched every
   bootstrap .modal in the portal - and bootstrap's .modal is the full-screen
   overlay, not the panel - so a width and a white background were applied to
   the overlay and every modal opened as a 560px box pinned to the left edge.
   The template's own mask/panel structure is unused in theme_v2; components.css
   owns modals. */
.modal-mask>.modal{width:min(560px,100%);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden}
.toast-host{position:fixed;bottom:20px;inset-inline-end:20px;z-index:80;display:flex;flex-direction:column;gap:9px}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:11px 14px;font-size:12.5px;font-weight:600;min-width:250px;animation:pop .18s ease both}
.dropdown{position:absolute;top:44px;inset-inline-start:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:8px;z-index:50;animation:pop .16s ease both}
.dd-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px;border:0;background:transparent;border-radius:var(--r-md);cursor:pointer;text-align:start}
.dd-item:hover{background:var(--surface-3)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--accent-soft);color:var(--accent);border-radius:999px;font-size:11.5px;font-weight:700}
.chip svg{cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.splash{display:grid;place-items:center;min-height:100vh;color:var(--text-4);font-size:12.5px;font-weight:600}