/* ===== Tokens ===== */
/* EuroMotors ePay brand. Values come from the design system in
   old_project/Design update_ old site to new/assets/css/global.css.
   Token NAMES are theme_v2's own, so re-pointing them here re-skins all 119
   templates - login, dashboard and admin included - without touching markup. */
:root{
--bg:#f7f4f0;--surface:#ffffff;--surface-2:#efe9e2;--surface-3:#f1eeea;
/* The band behind a card's heading (.f-sec-head). Its own token because
   --surface-2 is a working surface - chips, hover states, the pale side of a
   pill - and at #efe9e2 it is DARKER than the page itself, so using it for a
   heading turned every form section into a heavy stripe. This is a whisper
   above white: enough to show where a section starts, not enough to shout. */
--surface-head:#faf8f5;
--border:#e3dbd1;--border-2:#ede7df;
--text:#16161a;--text-2:#57534c;--text-3:#8b857c;--text-4:#a8a29a;
/* Euro Motors, from brand/brand-color.pdf: Pantone 447C #404040, Warm Gray
   5c #a69c94, Warm Gray 1c #bfb5ab, White. There is no vivid accent in the
   book, so the brand's DARK is the action colour - #a69c94 behind white
   text is 2.7:1 and fails AA, while #404040 is 10.4:1. The purple this
   replaces was Gate-E's, the gateway vendor's, never Euro Motors'. */
--accent:#404040;--accent-2:#5c5c5c;--accent-soft:#eeeae6;--accent-fg:#ffffff;
--good:#2e7d4f;--good-soft:#e6f1ea;--warn:#9a6212;--warn-soft:#f6ecdc;
--bad:#c0392b;--bad-soft:#f8e8e5;--info:#4e5a6e;--info-soft:#edeff3;
--ink:#16161a;
--r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:14px;--r-pill:999px;
--sh-xs:0 1px 2px rgba(64,60,55,.06);
--sh-sm:0 2px 8px rgba(64,60,55,.08);
--sh-md:0 12px 32px rgba(64,60,55,.12);
--sh-lg:0 24px 64px rgba(64,60,55,.16);
--font:'Figtree',system-ui,-apple-system,sans-serif;
--font-ar:'IBM Plex Sans Arabic','Figtree',system-ui,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
--sidebar-w:236px;--header-h:56px;
/* --- design-system tokens the public payment pages also use --- */
--warm:#a69c94;--warm-2:#bfb5ab;
--field:#ffffff;--field-b:#d9d0c6;
--sheet:#ffffff;--sheet-2:#f7f4f0;
--ok:#2e7d4f;--err:#c0392b;
/* The lockup PNG is white artwork. brightness(0) takes it to black and
   invert(25%) lifts it to rgb(64,64,64) - Pantone 447C exactly, rather
   than the pure black a plain invert(1) gave. */
--logo-filter:brightness(0) invert(25%);
--shadow-xs:var(--sh-xs);--shadow-sm:var(--sh-sm);
--shadow-md:var(--sh-md);--shadow-lg:var(--sh-lg);
--max:1560px;--gutter:40px;
/* --- Gate-E Admin Panel design aliases (boxs/*, assets/css/panel.css) ---
   The panel design names three soft tints and a second accent tint that the
   token set above spells differently or not at all. Declared as aliases so
   panel.css can quote the design's own vocabulary and still follow every
   re-skin of the base tokens. */
--ok-soft:var(--good-soft);--err-soft:var(--bad-soft);
--accent-soft2:rgba(64,64,64,.05);
}
[data-scheme="dark"]{
--bg:#0e0e10;--surface:#16161a;--surface-2:#1b1b20;--surface-3:#1b1b20;
/* Same idea inverted: a touch LIGHTER than --surface, so the heading reads as
   raised rather than as a hole. */
--surface-head:#1a1a20;
--border:#2b2b32;--border-2:#232329;
--text:#ffffff;--text-2:#b9b2aa;--text-3:#8b857c;--text-4:#6e6862;
/* 447C is the background here, so it cannot also be the accent. Warm Gray
   1c leads instead, with the brand dark as its foreground - 8.4:1. */
--accent:#bfb5ab;--accent-2:#d3ccc4;--accent-soft:#2b2724;--accent-fg:#1a1a1a;
--good:#3fa96a;--good-soft:#15301f;--warn:#d9a55c;--warn-soft:#332818;
--bad:#e4574c;--bad-soft:#361f1d;--info:#8f9bb3;--info-soft:#1d2029;
--ink:#0e0e10;
--field:#131317;--field-b:#34343d;
--sheet:#16161a;--sheet-2:#1b1b20;
--ok:#3fa96a;--err:#e4574c;
--logo-filter:none;
--sh-md:0 1px 2px rgba(0,0,0,.25),0 16px 32px -24px rgba(0,0,0,.7);
--sh-lg:0 24px 64px rgba(0,0,0,.5);
--accent-soft2:rgba(191,181,171,.12);
}
/* ===== Per-system branding ===== */
/* This project's system code is "app" (global_data.php). Its accent is the
   Euro Motors brand dark, which is already the :root default - the rule is here so
   the brand is stated explicitly rather than only implied by the absence of a
   match, and so it survives if another system is ever added alongside. */
[data-sys="app"]{--accent:#404040;--accent-2:#5c5c5c;--accent-soft:#eeeae6;--accent-fg:#ffffff}
[data-scheme="dark"][data-sys="app"]{--accent:#bfb5ab;--accent-2:#d3ccc4;--accent-soft:#2b2724;--accent-fg:#1a1a1a}
[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-sys="wallet"]{--accent:#6b4fd8;--accent-2:#8d75e6;--accent-soft:#efeafc}
[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}
[data-scheme="dark"][data-sys="wallet"]{--accent:#9d86ef;--accent-2:#bcabf5;--accent-soft:#241b45;--accent-fg:#160b33}

/* ===== 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}