/* ============================================================
   33 Designs — ADMIN THEME (light · glass · 3D) — scoped to body.admin / body.staff
   Loaded after app.css; overrides component skins only.
   ============================================================ */
body.admin,body.authpage.staff{
  --org:#F7941D;--org-soft:#FFB454;--org-deep:#EE5A1E;--org-dark:#B4540F;--org-glow:rgba(247,148,29,.30);
  --ink:#0B0B0B;--ink-2:#17171B;--ink-3:#26262B;
  --text:#17161A;--text-dim:#6E6A63;--muted:#9A958D;--muted-2:#C4C0B8;
  --card:rgba(255,255,255,.68);--card-2:rgba(255,255,255,.5);--card-line:rgba(247,148,29,.22);--line:rgba(20,15,5,.09);--line-2:rgba(20,15,5,.06);--soft:rgba(20,15,5,.035);
  --ok:#15803D;--ok-bg:rgba(22,163,74,.12);--warn:#B45309;--warn-bg:rgba(217,119,6,.13);--danger:#B91C1C;--danger-bg:rgba(220,38,38,.10);--info:#1D4ED8;--info-bg:rgba(37,99,235,.10);
  --glass:blur(18px) saturate(160%);
  --shadow:0 20px 50px -18px rgba(60,35,10,.18),0 1px 2px rgba(60,35,10,.06);--shadow-org:0 18px 45px -12px rgba(247,148,29,.45);
  --font:'IBM Plex Sans Arabic','Cairo','Segoe UI',sans-serif;--en:'IBM Plex Sans','Segoe UI',sans-serif;
  --r:18px;--r-sm:13px;--side-w:256px;
  font-family:var(--font);color:var(--text);
  background:radial-gradient(1100px 700px at 88% -10%,rgba(247,148,29,.22) 0%,transparent 55%),radial-gradient(900px 600px at -10% 110%,rgba(238,90,30,.14) 0%,transparent 55%),linear-gradient(155deg,#FDFCFA 0%,#F6F4F0 50%,#F1EEE9 100%);
  background-attachment:fixed;
}
body.admin ::selection{background:var(--org);color:#000}
body.admin ::-webkit-scrollbar{width:10px;height:10px}body.admin ::-webkit-scrollbar-thumb{background:rgba(247,148,29,.35);border-radius:20px}body.admin ::-webkit-scrollbar-track{background:transparent}
body.admin .num,body.admin .mono,body.admin .countdown{font-family:var(--en)}

/* ── 3D scene ─────────────────────────────────────────────── */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;perspective:900px;pointer-events:none}
.scene .orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.30;will-change:transform;background:radial-gradient(circle at 35% 30%,#FFD08A,var(--org) 45%,var(--org-deep) 90%)}
.scene .slice{position:absolute;will-change:transform;opacity:.07;filter:blur(12px) drop-shadow(0 20px 40px rgba(120,60,0,.25))}
.scene .mesh{position:absolute;inset:-20%;background:conic-gradient(from 120deg at 50% 50%,rgba(255,255,255,0),rgba(247,148,29,.06),rgba(255,255,255,0));animation:spin 50s linear infinite}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float3d{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-26px,40px) rotate(12deg)}}
@keyframes viewIn{from{opacity:0;transform:translateY(18px)}}
@keyframes glowPulse{50%{opacity:.16}}
body.admin .sidebar{position:sticky;top:0;height:100vh;z-index:45}
body.admin .admin-body{position:relative;z-index:1}
@media (max-width:900px){body.admin .sidebar{position:fixed;top:0;bottom:0;height:auto;z-index:60}}

/* ── Glass primitive ──────────────────────────────────────── */
body.admin .card,body.admin .kpi,body.admin .menu,body.admin .modal .box,body.staff .auth-card{
  background:var(--card);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid rgba(255,255,255,.9);outline:1px solid var(--card-line);outline-offset:-1px;border-radius:var(--r);box-shadow:var(--shadow);color:var(--text)}
body.admin .card-head{border-bottom:1px solid var(--line-2);padding:1rem 1.35rem}
body.admin .card-head h2,body.admin .card-head h3,body.admin .card-body h3,body.admin .card-body h2{display:flex;align-items:center;gap:.55rem;font-size:15px}
body.admin .card-head h2::before,body.admin .card-head h3::before,body.admin .card-body > h3:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--org);box-shadow:0 0 10px var(--org);flex:none}
body.admin .card-body{padding:1.35rem}
body.admin .card-foot{background:rgba(255,255,255,.45);border-top:1px solid var(--line-2);border-radius:0 0 var(--r) var(--r)}
body.admin .muted{color:var(--text-dim)}
body.admin .brand-text{color:var(--org-deep)}
body.admin a.row-link{color:var(--text)}body.admin a.row-link:hover{color:var(--org-deep)}
body.admin .tbl .sub{color:var(--text-dim)}
body.admin h1,body.admin h2,body.admin h3{color:var(--text)}

/* ── Sidebar ──────────────────────────────────────────────── */
body.admin .sidebar{background:rgba(255,255,255,.62);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-left:1px solid var(--card-line);width:var(--side-w);padding:0;color:var(--text);box-shadow:-10px 0 40px -30px rgba(60,35,10,.25)}
body.admin .side-logo{padding:1.25rem 1.35rem 1rem;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:.6rem}
body.admin .side-logo img{height:32px;content:url("../img/logo-dark.svg")}
body.admin .side-logo::after{content:"B2B";font-family:var(--en);font-size:10.5px;font-weight:700;letter-spacing:.6px;color:#fff;background:linear-gradient(135deg,var(--org-soft),var(--org-deep));padding:3px 8px;border-radius:7px;box-shadow:0 6px 14px -6px var(--org-glow)}
body.admin .sidenav{padding:.9rem .85rem;gap:.25rem}
body.admin .sidenav a{color:var(--text-dim);font-weight:600;font-size:14px;padding:.68rem .85rem;border-radius:13px;border:1px solid transparent;transition:.2s;box-shadow:none}
body.admin .sidenav a i{display:inline-grid;place-items:center;width:20px;height:20px;opacity:.85}
body.admin .sidenav a i svg{width:18px;height:18px}
body.admin .sidenav a:hover{background:rgba(255,255,255,.8);color:var(--text);transform:translateX(-2px);border-color:var(--line-2)}
body.admin .sidenav a.on{background:linear-gradient(135deg,rgba(247,148,29,.22),rgba(247,148,29,.06));color:var(--org-dark);border-color:rgba(247,148,29,.4);box-shadow:inset 0 0 30px rgba(247,148,29,.08),0 10px 24px -16px var(--org-glow)}
body.admin .sidenav a.on i{opacity:1;color:var(--org-deep)}
body.admin .sidenav .pill{background:linear-gradient(135deg,var(--org-soft),var(--org-deep));color:#fff;box-shadow:0 4px 12px -4px var(--org-glow)}
body.admin .sidenav .pill.warn{background:var(--warn)}
body.admin .side-foot{border-top:1px solid var(--line-2);color:var(--text-dim);padding:1rem 1.35rem}
body.admin .side-foot a:hover{color:var(--org-deep)}

/* ── Topbar ───────────────────────────────────────────────── */
body.admin .adminbar{background:rgba(255,255,255,.55);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-bottom:1px solid var(--card-line);height:66px}
body.admin .adminbar-title{font-size:1.1rem;letter-spacing:-.2px}
body.admin .adminbar-title::before{content:"";display:inline-block;width:6px;height:22px;border-radius:4px;background:linear-gradient(180deg,var(--org-soft),var(--org-deep));margin-left:.7rem;vertical-align:-4px;box-shadow:0 0 12px var(--org-glow)}
body.admin .burger{background:rgba(255,255,255,.7);color:var(--text);border:1px solid var(--line)}
body.admin .search-mini input{background:rgba(255,255,255,.75);border:1px solid var(--line);color:var(--text);border-radius:13px;width:300px}
body.admin .search-mini input::placeholder{color:var(--muted)}
body.admin .search-mini input:focus{border-color:var(--org);box-shadow:0 0 0 4px rgba(247,148,29,.15);background:#fff}
body.admin .user-chip.dark{color:var(--text)}body.admin .user-chip.dark:hover{background:rgba(255,255,255,.8)}
body.admin .user-chip .avatar{border-radius:12px;box-shadow:0 8px 20px -8px var(--org-glow)}
body.admin .menu a{color:var(--text)}body.admin .menu a:hover{background:var(--soft)}body.admin .menu a.danger{color:var(--danger)}
body.admin .admin-main{animation:viewIn .5s cubic-bezier(.2,.7,.2,1);padding:1.75rem 1.75rem 3rem;max-width:1360px;width:100%}

/* ── Page head ────────────────────────────────────────────── */
body.admin .page-head h1{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.4px}
body.admin .page-head .sub{color:var(--text-dim)}

/* ── KPIs ─────────────────────────────────────────────────── */
body.admin .kpis{gap:1rem;margin-bottom:1.5rem}
body.admin .kpi{padding:1.2rem 1.3rem;position:relative;overflow:hidden;transition:.3s;transform-style:preserve-3d;text-decoration:none}
body.admin .kpi::after{content:"";position:absolute;inset:auto -30% -60% auto;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,var(--org),transparent 70%);opacity:.14;animation:glowPulse 6s ease-in-out infinite}
body.admin .kpi.danger::after{background:radial-gradient(circle,#ef4444,transparent 70%)}
body.admin .kpi.warn::after{background:radial-gradient(circle,#f59e0b,transparent 70%)}
body.admin .kpi.ok::after{background:radial-gradient(circle,#22c55e,transparent 70%)}
body.admin .kpi:hover{outline-color:rgba(247,148,29,.5);transform:translateY(-3px);box-shadow:0 28px 60px -22px rgba(60,35,10,.28)}
body.admin .kpi .k{color:var(--text-dim);font-size:12.5px;font-weight:600}
body.admin .kpi .v{font-family:var(--en);font-size:29px;font-weight:700;line-height:1.15;color:var(--text)}
body.admin .kpi .d{color:var(--muted);font-size:11.5px}
body.admin .kpi.accent{background:linear-gradient(135deg,#1c1b1f,#0b0b0b);border-color:#0b0b0b;outline-color:rgba(247,148,29,.5);color:#fff;box-shadow:0 26px 60px -20px rgba(11,11,11,.6)}
body.admin .kpi.accent::after{opacity:.28}
body.admin .kpi.accent .v{color:var(--org-soft);text-shadow:0 0 24px rgba(247,148,29,.45)}
body.admin .kpi.accent .k,body.admin .kpi.accent .d{color:rgba(255,255,255,.7)}
body.admin .kpi.warn .v{color:var(--warn)}body.admin .kpi.danger .v{color:var(--danger)}body.admin .kpi.ok .v{color:var(--ok)}

/* ── Buttons ──────────────────────────────────────────────── */
body.admin .btn{border-radius:12px;font-weight:700;transition:.22s}
body.admin .btn-primary{background:linear-gradient(135deg,var(--org-soft),var(--org-deep));color:#fff;box-shadow:var(--shadow-org)}
body.admin .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px -12px rgba(247,148,29,.6);filter:none}
body.admin .btn-dark{background:linear-gradient(135deg,#26262b,#0b0b0b);color:#fff;box-shadow:0 14px 30px -14px rgba(11,11,11,.6)}body.admin .btn-dark:hover{transform:translateY(-1px);background:#000}
body.admin .btn-ghost{background:rgba(255,255,255,.75);color:var(--text);border-color:var(--line)}
body.admin .btn-ghost:hover{background:#fff;border-color:var(--org)}
body.admin .btn-ok{background:linear-gradient(135deg,#34d399,#15803d);color:#fff;box-shadow:0 14px 34px -14px rgba(21,128,61,.6)}
body.admin .btn-warn{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff}
body.admin .btn-danger{background:linear-gradient(135deg,#f87171,#b91c1c);color:#fff}
body.admin .btn-danger-ghost{background:var(--danger-bg);color:var(--danger);border-color:rgba(220,38,38,.3)}
body.admin .btn-danger-ghost:hover{background:rgba(220,38,38,.18)}
body.admin .btn:active{transform:translateY(0) scale(.98)}

/* ── Forms ────────────────────────────────────────────────── */
body.admin label{color:var(--text-dim);font-size:12.5px}
body.admin .input,body.admin input:not([type]),body.admin input[type=text],body.admin input[type=email],body.admin input[type=password],body.admin input[type=number],body.admin input[type=search],body.admin input[type=tel],body.admin input[type=url],body.admin input[type=date],body.admin select,body.admin textarea{
  background:rgba(255,255,255,.8);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:.65rem .9rem;box-shadow:inset 0 1px 2px rgba(60,35,10,.04)}
body.admin input::placeholder,body.admin textarea::placeholder{color:var(--muted)}
body.admin input:focus,body.admin select:focus,body.admin textarea:focus{border-color:var(--org);box-shadow:0 0 0 4px rgba(247,148,29,.15);background:#fff}
body.admin input:disabled,body.admin fieldset:disabled input,body.admin fieldset:disabled select{opacity:.6;background:var(--soft)}
body.admin select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EE5A1E' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left .8rem center;padding-left:2rem}
body.admin .help{color:var(--muted)}
body.admin .check input{accent-color:var(--org-deep)}
body.admin .input-group .addon{background:rgba(255,255,255,.6);border-color:var(--line);color:var(--text-dim)}
body.admin .qty-ctrl{border-color:var(--line);background:#fff}
body.admin .dropzone{border-color:rgba(247,148,29,.35);background:rgba(255,255,255,.5);color:var(--text-dim)}
body.admin .dropzone:hover{border-color:var(--org);color:var(--org-dark);background:rgba(247,148,29,.08)}
body.admin fieldset{border:0;padding:0;margin:0}

/* ── Tags / chips / pills ─────────────────────────────────── */
body.admin .tag{border:1px solid transparent;font-family:var(--font)}
body.admin .tag.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(22,163,74,.25)}
body.admin .tag.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(217,119,6,.3)}
body.admin .tag.danger{background:var(--danger-bg);color:var(--danger);border-color:rgba(220,38,38,.25)}
body.admin .tag.info{background:var(--info-bg);color:var(--info);border-color:rgba(37,99,235,.25)}
body.admin .tag.muted{background:var(--soft);color:var(--text-dim);border-color:var(--line-2)}
body.admin .tag.brand{background:rgba(247,148,29,.16);color:var(--org-dark);border-color:rgba(247,148,29,.4)}
body.admin .chip{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--text-dim)}
body.admin .chip:hover{border-color:var(--org);color:var(--text);background:#fff}
body.admin .chip.on{background:linear-gradient(135deg,#26262b,#0b0b0b);color:#fff;border-color:#0b0b0b;box-shadow:0 10px 24px -12px rgba(11,11,11,.6)}
body.admin .pill{background:var(--org-deep);color:#fff}
body.admin .filters input,body.admin .filters select{min-width:200px}
body.admin .avatar-sm{background:linear-gradient(135deg,var(--org-soft),var(--org-deep));color:#fff;border-radius:9px}

/* ── Tables ───────────────────────────────────────────────── */
body.admin .tbl th{background:rgba(255,255,255,.45);color:var(--text-dim);border-bottom:1px solid var(--line);font-size:12px}
body.admin .tbl td{border-bottom:1px solid var(--line-2)}
body.admin .tbl tbody tr{transition:.15s}body.admin .tbl tbody tr:hover{background:rgba(247,148,29,.06)}
body.admin .tbl .thumb{background:#fff;border-color:var(--line-2);border-radius:10px}
body.admin .empty{color:var(--text-dim)}
body.admin .pager a,body.admin .pager span{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--text-dim);font-family:var(--en);font-weight:600;border-radius:10px}
body.admin .pager a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
body.admin .table-wrap{border-radius:0 0 var(--r) var(--r)}
body.admin .stock-cell small{color:var(--text-dim)}
body.admin code.k{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--org-dark)}
body.admin .specs th{background:rgba(255,255,255,.45);color:var(--text-dim);border-color:var(--line-2)}
body.admin .specs td{border-color:var(--line-2)}

/* ── Alerts / toasts ──────────────────────────────────────── */
body.admin .alert.info{background:var(--info-bg);border-color:rgba(37,99,235,.25);color:#1e3a8a}
body.admin .alert.warn{background:var(--warn-bg);border-color:rgba(217,119,6,.3);color:#7c2d12}
body.admin .alert.ok{background:var(--ok-bg);border-color:rgba(22,163,74,.25);color:#14532d}
body.admin .alert.danger{background:var(--danger-bg);border-color:rgba(220,38,38,.25);color:#7f1d1d}
body.admin .alert a{color:var(--org-dark)}
body.admin .toasts{top:auto;bottom:1.4rem}
body.admin .toast{background:rgba(17,17,20,.96);color:#fff;border:1px solid var(--org);border-right-width:1px;border-radius:14px;box-shadow:0 20px 50px -14px rgba(0,0,0,.5);backdrop-filter:var(--glass)}
body.admin .toast.success{border-color:#22c55e}body.admin .toast.error{border-color:#ef4444}body.admin .toast.warn{border-color:#f59e0b}body.admin .toast.info{border-color:#3b82f6}

/* ── Order page bits ──────────────────────────────────────── */
body.admin .hold-banner{background:linear-gradient(135deg,rgba(255,244,229,.9),rgba(255,255,255,.7));backdrop-filter:var(--glass);border:1px solid rgba(255,255,255,.9);outline:1px solid rgba(247,148,29,.45);outline-offset:-1px;border-radius:var(--r);box-shadow:var(--shadow),inset 0 0 50px rgba(247,148,29,.08);position:relative;overflow:hidden;color:var(--text)}
body.admin .hold-banner::after{content:"";position:absolute;left:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--org),transparent 70%);opacity:.22;pointer-events:none}
body.admin .hold-banner .lbl{color:var(--text-dim);opacity:1}
body.admin .hold-banner .countdown{color:var(--org-deep);text-shadow:0 0 22px rgba(247,148,29,.35)}
body.admin .hold-banner .countdown.urgent{color:var(--danger);text-shadow:0 0 22px rgba(220,38,38,.3)}
body.admin .countdown.urgent{color:var(--danger)}body.admin .countdown.soon{color:var(--warn)}
body.admin .stepper span{background:rgba(255,255,255,.6);border-color:var(--line);color:var(--text-dim)}
body.admin .stepper span.done{background:var(--ok-bg);color:var(--ok);border-color:rgba(22,163,74,.25)}
body.admin .stepper span.on{background:linear-gradient(135deg,#26262b,#0b0b0b);color:#fff;border-color:transparent;box-shadow:0 10px 30px -12px rgba(11,11,11,.6)}
body.admin .timeline::before{background:var(--line)}
body.admin .timeline li::before{background:#fff;border-color:var(--muted-2)}
body.admin .timeline li.created::before{border-color:var(--info);box-shadow:0 0 8px rgba(37,99,235,.5)}
body.admin .timeline li.confirmed::before,body.admin .timeline li.paid::before{border-color:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}
body.admin .timeline li.extended::before{border-color:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.5)}
body.admin .timeline li.expired::before,body.admin .timeline li.cancelled::before{border-color:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.5)}
body.admin .timeline .when{color:var(--muted)}
body.admin .dl dt{color:var(--text-dim)}
body.admin .list-plain li{border-color:var(--line-2)}
body.admin .action-list .card{transition:.25s}
body.admin .action-list .card:hover{outline-color:rgba(247,148,29,.5)}

/* ── Tabs / misc ──────────────────────────────────────────── */
body.admin .tabs{border-bottom:1px solid var(--line);padding-bottom:.6rem;gap:.35rem}
body.admin .tabs button{color:var(--text-dim);border-radius:12px;border-bottom:0;margin-bottom:0;padding:.55rem 1rem}
body.admin .tabs button.on{background:rgba(247,148,29,.16);color:var(--org-dark)}
body.admin .tabs button:hover{color:var(--text)}
body.admin .img-grid .im{background:#fff;border-color:var(--line);border-radius:12px}
body.admin .img-grid .im.main::after{background:rgba(238,90,30,.92);color:#fff}
body.admin .progress{background:var(--soft)}
body.admin .progress i{background:linear-gradient(90deg,var(--org-deep),var(--org-soft));box-shadow:0 0 14px var(--org-glow)}
body.admin .modal{background:rgba(40,30,20,.35);backdrop-filter:blur(8px)}
body.admin .kpi,body.admin .card{will-change:transform}
body.admin .tilt{transform-style:preserve-3d;transition:transform .25s}
body.admin .side-foot small{font-family:var(--en)}
body.admin .sidenav a .pill{margin-right:auto}

/* ── Staff login (light glass) ────────────────────────────── */
body.staff{color:var(--text)}
body.staff .auth-logo img{content:url("../img/logo-dark.svg")}
body.staff .auth-card{color:var(--text);position:relative;padding:2.4rem 2.2rem}
body.staff .auth-card::before{content:"";position:absolute;inset:-2px;border-radius:var(--r);background:linear-gradient(135deg,rgba(247,148,29,.55),transparent 40%,rgba(238,90,30,.35));z-index:-1;filter:blur(18px);opacity:.7}
body.staff .auth-card .lead{color:var(--text-dim)}
body.staff .auth-card label{color:var(--text-dim)}
body.staff .auth-card input{background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:.75rem .9rem}
body.staff .auth-card input:focus{border-color:var(--org);box-shadow:0 0 0 4px rgba(247,148,29,.15);background:#fff}
body.staff .btn-dark{background:linear-gradient(135deg,var(--org-soft),var(--org-deep));color:#fff;box-shadow:var(--shadow-org);border-radius:12px}
body.staff .btn-dark:hover{transform:translateY(-2px)}
body.staff .auth-links a{color:var(--org-deep)}
body.staff .auth-foot{color:var(--muted)}
body.staff .auth-card.center{text-align:center}
body.staff .toasts.static .toast{background:rgba(17,17,20,.96);color:#fff;border:1px solid var(--org)}

@media (max-width:900px){
  body.admin .sidebar{background:rgba(255,255,255,.94)}
  body.admin .admin-main{padding:1rem 1rem 2.5rem}
  body.admin .search-mini input{width:200px}
}
@media (prefers-reduced-motion:reduce){.scene .orb,.scene .slice,.scene .mesh{animation:none}}

/* ============================================================
   3D LAYER — sidebar tiles, collapse rail, card depth
   ============================================================ */
/* sidebar header + toggle */
body.admin .side-logo::after{content:none}
body.admin .side-logo{justify-content:space-between}
body.admin .side-toggle{margin-inline-start:auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));border:1px solid rgba(20,15,5,.1);box-shadow:inset 0 1px 0 #fff,0 5px 12px -6px rgba(60,35,10,.45);color:var(--text-dim);cursor:pointer;transition:.2s;flex:none}
body.admin .side-toggle svg{width:16px;height:16px;transition:transform .25s}
body.admin .side-toggle:hover{color:var(--org-deep);border-color:var(--org);transform:translateY(-1px)}
body.admin .sidebar{transition:width .28s cubic-bezier(.2,.7,.2,1)}

/* each tab = a raised 3D tile */
body.admin .sidenav{gap:.5rem;padding:1rem .85rem}
body.admin .sidenav a{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.62));border:1px solid rgba(255,255,255,.95);color:var(--text-dim);padding:.55rem .7rem;border-radius:14px;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(60,35,10,.06),0 1px 2px rgba(60,35,10,.06),0 4px 0 -2px rgba(255,255,255,.7),0 5px 0 -2px rgba(60,35,10,.07),0 12px 24px -14px rgba(60,35,10,.5);transition:.22s}
body.admin .sidenav a i{width:34px;height:34px;border-radius:11px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.72));border:1px solid rgba(20,15,5,.08);box-shadow:inset 0 1px 0 #fff,0 4px 10px -5px rgba(60,35,10,.4);color:var(--org-deep);opacity:1;flex:none}
body.admin .sidenav a i svg{width:17px;height:17px}
body.admin .sidenav a:hover{transform:translateY(-2px);color:var(--text);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(60,35,10,.06),0 6px 0 -2px rgba(255,255,255,.7),0 7px 0 -2px rgba(60,35,10,.07),0 22px 34px -16px rgba(60,35,10,.55)}
body.admin .sidenav a.on{background:linear-gradient(180deg,#FFB454 0%,#F7941D 55%,#EE5A1E 100%);color:#fff;border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,50,0,.25),0 5px 0 -1px #B4540F,0 6px 0 -1px rgba(0,0,0,.08),0 20px 34px -14px rgba(247,148,29,.7)}
body.admin .sidenav a.on:hover{transform:translateY(-1px)}
body.admin .sidenav a.on i{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
body.admin .sidenav a .pill{margin-right:auto;box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}
body.admin .sidenav a.on .pill{background:#fff;color:var(--org-deep)}

/* collapsed rail (icons only) */
html.side-collapsed body.admin{--side-w:92px}
html.side-collapsed body.admin .side-logo{justify-content:center;padding:1.1rem .6rem 1rem;flex-direction:column;gap:.6rem}
html.side-collapsed body.admin .side-logo img{content:url("../img/mark.svg");height:38px}
html.side-collapsed body.admin .side-toggle{margin:0}
html.side-collapsed body.admin .side-toggle svg{transform:rotate(180deg)}
html.side-collapsed body.admin .sidenav{padding:1rem .7rem}
html.side-collapsed body.admin .sidenav a{justify-content:center;padding:.5rem}
html.side-collapsed body.admin .sidenav a span:not(.pill){display:none}
html.side-collapsed body.admin .sidenav a .pill{position:absolute;top:-5px;left:-5px;margin:0;min-width:20px;height:20px;line-height:20px;font-size:.68em}
html.side-collapsed body.admin .side-foot{justify-content:center;padding:1rem .5rem}
html.side-collapsed body.admin .side-foot a{font-size:0}
html.side-collapsed body.admin .side-foot a::before{content:"↗";font-size:16px}
html.side-collapsed body.admin .side-foot small{display:none}
@media (max-width:900px){body.admin .side-toggle{display:none}html.side-collapsed body.admin{--side-w:256px}html.side-collapsed body.admin .sidenav a span:not(.pill){display:inline}html.side-collapsed body.admin .sidenav a{justify-content:flex-start;padding:.55rem .7rem}html.side-collapsed body.admin .side-logo img{content:url("../img/logo-dark.svg");height:32px}}

/* cards with real thickness */
body.admin .card,body.admin .kpi{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(60,35,10,.05),0 1px 2px rgba(60,35,10,.05),0 6px 0 -3px rgba(255,255,255,.8),0 7px 0 -3px rgba(60,35,10,.07),0 12px 0 -6px rgba(255,255,255,.6),0 13px 0 -6px rgba(60,35,10,.06),0 28px 50px -24px rgba(60,35,10,.35);
  transition:transform .25s,box-shadow .25s}
body.admin .kpi:hover,body.admin .action-list .card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(60,35,10,.05),0 8px 0 -3px rgba(255,255,255,.8),0 9px 0 -3px rgba(60,35,10,.07),0 16px 0 -6px rgba(255,255,255,.6),0 17px 0 -6px rgba(60,35,10,.06),0 40px 60px -26px rgba(60,35,10,.45)}
body.admin .kpi .v{text-shadow:0 1px 0 #fff,0 2px 6px rgba(60,35,10,.12)}
body.admin .kpi.accent{background:linear-gradient(180deg,#2a292e,#0b0b0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 0 -3px #3a393f,0 12px 0 -6px #26252a,0 30px 50px -22px rgba(11,11,11,.7)}
body.admin .kpi.accent .v{text-shadow:0 0 24px rgba(247,148,29,.5)}
body.admin .card-head{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));border-radius:var(--r) var(--r) 0 0}
body.admin .btn-primary,body.admin .btn-dark,body.admin .btn-ok{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 5px 0 -1px rgba(0,0,0,.25),0 16px 30px -12px rgba(60,35,10,.5)}
body.admin .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(120,50,0,.25),0 5px 0 -1px #B4540F,0 18px 34px -12px rgba(247,148,29,.65)}
body.admin .btn-primary:hover,body.admin .btn-dark:hover,body.admin .btn-ok:hover{transform:translateY(-2px)}
body.admin .btn-primary:active,body.admin .btn-dark:active,body.admin .btn-ok:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 0 rgba(0,0,0,.25)}
body.admin .btn-ghost{background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));box-shadow:inset 0 1px 0 #fff,0 3px 0 -1px rgba(255,255,255,.8),0 4px 0 -1px rgba(60,35,10,.08),0 8px 16px -10px rgba(60,35,10,.4)}
body.admin .chip{box-shadow:inset 0 1px 0 #fff,0 2px 6px -3px rgba(60,35,10,.35)}
body.admin .tbl .thumb{box-shadow:0 4px 10px -5px rgba(60,35,10,.4)}

/* ============================================================
   GLASS+ — more transparency (Lime-like)
   ============================================================ */
body.admin,body.authpage.staff{--glass:blur(22px) saturate(170%)}
.scene .orb{opacity:.42;filter:blur(34px)}
.scene .slice{opacity:.10}
body.admin .card,body.admin .kpi,body.admin .menu,body.admin .modal .box,body.staff .auth-card{
  background:linear-gradient(160deg,rgba(255,255,255,.46),rgba(255,255,255,.22));
  border:1px solid rgba(255,255,255,.75);outline:1px solid rgba(247,148,29,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25),0 22px 50px -24px rgba(60,35,10,.35),0 2px 6px rgba(60,35,10,.05)}
body.admin .kpi:hover,body.admin .action-list .card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 34px 60px -26px rgba(60,35,10,.45),0 2px 6px rgba(60,35,10,.06)}
body.admin .kpi.accent{background:linear-gradient(160deg,rgba(24,23,27,.92),rgba(11,11,11,.86));border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 50px -22px rgba(11,11,11,.7)}
body.admin .card-head{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0))}
body.admin .card-foot{background:rgba(255,255,255,.22)}
body.admin .tbl th{background:rgba(255,255,255,.28)}
body.admin .tbl tbody tr:hover{background:rgba(255,255,255,.35)}
body.admin .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.26));border-left:1px solid rgba(255,255,255,.7)}
body.admin .adminbar{background:rgba(255,255,255,.34);border-bottom:1px solid rgba(255,255,255,.7)}
body.admin .sidenav a{background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.25));border-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 22px -14px rgba(60,35,10,.45),0 1px 2px rgba(60,35,10,.05)}
body.admin .sidenav a i{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8)}
body.admin .sidenav a:hover{background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.4));box-shadow:inset 0 1px 0 #fff,0 18px 30px -16px rgba(60,35,10,.5)}
body.admin .sidenav a.on{background:linear-gradient(160deg,rgba(255,180,84,.92),rgba(238,90,30,.88));border-color:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(120,50,0,.2),0 4px 0 -1px rgba(180,84,15,.85),0 20px 34px -14px rgba(247,148,29,.6)}
body.admin .side-toggle,body.admin .btn-ghost,body.admin .chip,body.admin .burger{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.35));border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 8px 16px -10px rgba(60,35,10,.4)}
body.admin .search-mini input,body.admin .input,body.admin input:not([type]),body.admin input[type=text],body.admin input[type=email],body.admin input[type=password],body.admin input[type=number],body.admin input[type=search],body.admin input[type=tel],body.admin input[type=url],body.admin input[type=date],body.admin select,body.admin textarea{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 2px rgba(60,35,10,.05),0 1px 0 rgba(255,255,255,.8)}
body.admin input:focus,body.admin select:focus,body.admin textarea:focus{background:rgba(255,255,255,.85)}
body.admin .hold-banner{background:linear-gradient(135deg,rgba(255,236,214,.7),rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.8)}
body.admin .stepper span{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.75)}
body.admin .pager a,body.admin .pager span{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.8)}
body.admin .img-grid .im,body.admin .tbl .thumb{background:rgba(255,255,255,.5)}
body.admin .dropzone{background:rgba(255,255,255,.3)}
body.admin .menu{background:rgba(255,255,255,.75)}
@media (max-width:900px){body.admin .sidebar{background:rgba(255,255,255,.88)}}

/* ============================================================
   LTR overrides (admin)
   ============================================================ */
html[dir=ltr] body.admin,html[dir=ltr] body.authpage.staff{--font:'IBM Plex Sans','IBM Plex Sans Arabic','Segoe UI',sans-serif}
html[dir=ltr] body.admin .sidebar{border-left:0;border-right:1px solid rgba(255,255,255,.7);box-shadow:10px 0 40px -30px rgba(60,35,10,.25)}
html[dir=ltr] body.admin .sidenav a:hover{transform:translateX(2px)}
html[dir=ltr] body.admin .adminbar-title::before{margin-left:0;margin-right:.7rem}
html[dir=ltr] body.admin select{background-position:right .8rem center;padding-right:2rem;padding-left:.9rem}
html[dir=ltr] body.admin .hold-banner::after{left:auto;right:-60px}
html[dir=ltr] body.admin .side-toggle svg{transform:rotate(180deg)}
html[dir=ltr].side-collapsed body.admin .side-toggle svg{transform:rotate(0)}
html[dir=ltr].side-collapsed body.admin .sidenav a .pill{left:auto;right:-5px}
html[dir=ltr] body.admin .adminbar-actions{margin-right:0;margin-left:auto}
body.admin .icon-btn{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 8px 16px -10px rgba(60,35,10,.4);color:var(--text-dim)}
body.admin .icon-btn:hover{color:var(--org-deep);border-color:var(--org);transform:translateY(-1px)}
body.staff .auth-switch a{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.85);color:var(--text)}
body.staff .auth-switch a:hover{color:var(--org-deep);border-color:var(--org)}

/* ============================================================
   DARK MODE — admin (html[data-theme=dark])
   ============================================================ */
html[data-theme=dark] body.admin,html[data-theme=dark] body.authpage.staff{
  --text:#F4F1EC;--text-dim:#A9A49C;--muted:#7C776F;--muted-2:#4E4A44;
  --card:rgba(24,24,30,.55);--card-line:rgba(247,148,29,.18);--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.06);--soft:rgba(255,255,255,.05);
  --ok:#5BE38A;--ok-bg:rgba(91,227,138,.14);--warn:#FFB020;--warn-bg:rgba(255,176,32,.14);--danger:#FF6B6B;--danger-bg:rgba(255,107,107,.14);--info:#7CC4FF;--info-bg:rgba(124,196,255,.14);
  --org-dark:#FFB454;
  --shadow:0 24px 70px rgba(0,0,0,.45);
  background:radial-gradient(1100px 700px at 85% -10%,rgba(238,90,30,.28) 0%,transparent 55%),radial-gradient(900px 600px at -10% 110%,rgba(247,148,29,.16) 0%,transparent 55%),linear-gradient(155deg,#151517 0%,#0c0c0e 48%,#070708 100%);background-attachment:fixed}
html[data-theme=dark] .scene .orb{opacity:.24}
html[data-theme=dark] .grain{mix-blend-mode:overlay}
html[data-theme=dark] body.admin .card,html[data-theme=dark] body.admin .kpi,html[data-theme=dark] body.admin .menu,html[data-theme=dark] body.admin .modal .box,html[data-theme=dark] body.staff .auth-card{
  background:linear-gradient(160deg,rgba(30,30,36,.62),rgba(18,18,22,.42));border:1px solid rgba(255,255,255,.10);outline:1px solid rgba(247,148,29,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px -24px rgba(0,0,0,.7)}
html[data-theme=dark] body.admin .kpi:hover,html[data-theme=dark] body.admin .action-list .card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 70px -26px rgba(0,0,0,.8);outline-color:rgba(247,148,29,.45)}
html[data-theme=dark] body.admin .kpi .v{text-shadow:none}
html[data-theme=dark] body.admin .kpi.accent{background:linear-gradient(135deg,rgba(247,148,29,.22),rgba(238,90,30,.08)),rgba(20,20,24,.7);border-color:rgba(247,148,29,.45);box-shadow:inset 0 0 40px rgba(247,148,29,.06)}
html[data-theme=dark] body.admin .card-head{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0))}
html[data-theme=dark] body.admin .card-foot{background:rgba(0,0,0,.2)}
html[data-theme=dark] body.admin .sidebar{background:linear-gradient(180deg,rgba(14,14,18,.7),rgba(9,9,11,.55));border-color:rgba(255,255,255,.08);box-shadow:none}
html[data-theme=dark] body.admin .side-logo img{content:url("../img/logo.svg")}
html[data-theme=dark] body.admin .adminbar{background:rgba(12,12,15,.55);border-bottom-color:rgba(255,255,255,.08)}
html[data-theme=dark] body.admin .sidenav a{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border-color:rgba(255,255,255,.1);color:var(--text-dim);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 22px -14px rgba(0,0,0,.6)}
html[data-theme=dark] body.admin .sidenav a i{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--org);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme=dark] body.admin .sidenav a:hover{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.05));color:var(--text)}
html[data-theme=dark] body.admin .sidenav a.on{background:linear-gradient(160deg,rgba(255,180,84,.92),rgba(238,90,30,.88));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 -1px rgba(120,50,0,.8),0 20px 34px -14px rgba(247,148,29,.6)}
html[data-theme=dark] body.admin .side-toggle,html[data-theme=dark] body.admin .btn-ghost,html[data-theme=dark] body.admin .chip,html[data-theme=dark] body.admin .burger,html[data-theme=dark] body.admin .icon-btn,html[data-theme=dark] body.staff .auth-switch a{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border-color:rgba(255,255,255,.14);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 16px -10px rgba(0,0,0,.6)}
html[data-theme=dark] body.admin .btn-ghost:hover,html[data-theme=dark] body.admin .chip:hover{background:rgba(255,255,255,.14);border-color:var(--org)}
html[data-theme=dark] body.admin .chip.on{background:var(--org);color:#000;border-color:var(--org)}
html[data-theme=dark] body.admin .btn-dark{background:rgba(255,255,255,.92);color:#000;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 5px 0 -1px rgba(0,0,0,.3),0 16px 30px -12px rgba(0,0,0,.6)}
html[data-theme=dark] body.admin .btn-dark:hover{background:#fff}
html[data-theme=dark] body.admin .search-mini input,html[data-theme=dark] body.admin .input,html[data-theme=dark] body.admin input:not([type]),html[data-theme=dark] body.admin input[type=text],html[data-theme=dark] body.admin input[type=email],html[data-theme=dark] body.admin input[type=password],html[data-theme=dark] body.admin input[type=number],html[data-theme=dark] body.admin input[type=search],html[data-theme=dark] body.admin input[type=tel],html[data-theme=dark] body.admin input[type=url],html[data-theme=dark] body.admin input[type=date],html[data-theme=dark] body.admin select,html[data-theme=dark] body.admin textarea,html[data-theme=dark] body.staff .auth-card input{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.14);color:var(--text);box-shadow:none}
html[data-theme=dark] body.admin input:focus,html[data-theme=dark] body.admin select:focus,html[data-theme=dark] body.admin textarea:focus,html[data-theme=dark] body.staff .auth-card input:focus{background:rgba(0,0,0,.4);border-color:var(--org)}
html[data-theme=dark] body.admin select option{background:#141416;color:#fff}
html[data-theme=dark] body.admin select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F7941D' stroke-width='1.8' fill='none'/%3E%3C/svg%3E")}
html[data-theme=dark] body.admin input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}
html[data-theme=dark] body.admin .input-group .addon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
html[data-theme=dark] body.admin .qty-ctrl{background:rgba(0,0,0,.26);border-color:rgba(255,255,255,.14)}html[data-theme=dark] body.admin .qty-ctrl button{background:rgba(255,255,255,.06);color:var(--text)}
html[data-theme=dark] body.admin .dropzone{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.18)}
html[data-theme=dark] body.admin .tag.ok{color:#b8f5cc;border-color:rgba(91,227,138,.35)}html[data-theme=dark] body.admin .tag.warn{color:#ffce7a;border-color:rgba(255,176,32,.4)}html[data-theme=dark] body.admin .tag.danger{color:#ffb3b3;border-color:rgba(255,107,107,.4)}html[data-theme=dark] body.admin .tag.info{color:#bfe4ff;border-color:rgba(124,196,255,.4)}html[data-theme=dark] body.admin .tag.muted{background:rgba(255,255,255,.06);color:var(--text-dim)}html[data-theme=dark] body.admin .tag.brand{color:var(--org-soft)}
html[data-theme=dark] body.admin .tbl th{background:rgba(0,0,0,.22);border-color:var(--line)}
html[data-theme=dark] body.admin .tbl td{border-color:rgba(255,255,255,.05)}
html[data-theme=dark] body.admin .tbl tbody tr:hover{background:rgba(247,148,29,.06)}
html[data-theme=dark] body.admin .tbl .thumb,html[data-theme=dark] body.admin .img-grid .im{background:rgba(255,255,255,.06);border-color:var(--line)}
html[data-theme=dark] body.admin .pager a,html[data-theme=dark] body.admin .pager span{background:rgba(255,255,255,.05);border-color:var(--line)}
html[data-theme=dark] body.admin .pager a.on{background:var(--org);color:#000;border-color:var(--org)}
html[data-theme=dark] body.admin .alert.info{background:var(--info-bg);border-color:rgba(124,196,255,.35);color:#d6ecff}html[data-theme=dark] body.admin .alert.warn{background:var(--warn-bg);border-color:rgba(255,176,32,.35);color:#ffe2b3}html[data-theme=dark] body.admin .alert.ok{background:var(--ok-bg);border-color:rgba(91,227,138,.35);color:#cdf7db}html[data-theme=dark] body.admin .alert.danger{background:var(--danger-bg);border-color:rgba(255,107,107,.35);color:#ffd0d0}
html[data-theme=dark] body.admin .alert a,html[data-theme=dark] body.admin code.k,html[data-theme=dark] body.admin .brand-text{color:var(--org-soft)}
html[data-theme=dark] body.admin code.k{background:rgba(0,0,0,.3)}
html[data-theme=dark] body.admin .hold-banner{background:linear-gradient(135deg,rgba(247,148,29,.22),rgba(20,20,24,.5));border-color:rgba(255,255,255,.1);outline-color:rgba(247,148,29,.45);color:var(--text)}
html[data-theme=dark] body.admin .hold-banner .countdown{color:var(--org-soft)}
html[data-theme=dark] body.admin .stepper span{background:rgba(255,255,255,.04);border-color:var(--line)}
html[data-theme=dark] body.admin .stepper span.done{color:#b8f5cc;border-color:rgba(91,227,138,.3)}
html[data-theme=dark] body.admin .stepper span.on{background:linear-gradient(135deg,var(--org-soft),var(--org-deep));color:#000}
html[data-theme=dark] body.admin .timeline li::before{background:#17171b}
html[data-theme=dark] body.admin .tabs button.on{color:var(--org-soft)}
html[data-theme=dark] body.admin .specs th{background:rgba(0,0,0,.22)}
html[data-theme=dark] body.admin .side-foot,html[data-theme=dark] body.admin .empty{color:var(--text-dim)}
html[data-theme=dark] body.admin .avatar-sm{color:#000}
html[data-theme=dark] body.admin .user-chip.dark:hover{background:rgba(255,255,255,.06)}
html[data-theme=dark] body.admin .menu a:hover{background:rgba(255,255,255,.06)}
html[data-theme=dark] body.admin .progress{background:rgba(0,0,0,.3)}
html[data-theme=dark] body.admin .modal{background:rgba(2,2,3,.75)}
html[data-theme=dark] body.staff .auth-card::before{opacity:.5}
html[data-theme=dark] body.staff .auth-logo img{content:url("../img/logo.svg")}
html[data-theme=dark] body.staff .auth-links a{color:var(--org-soft)}
html[data-theme=dark] body.admin ::-webkit-scrollbar-thumb{background:rgba(247,148,29,.3)}
@media (max-width:900px){html[data-theme=dark] body.admin .sidebar{background:rgba(9,9,11,.94)}}

/* select arrow must never tile — re-assert after any `background:` shorthand */
body.admin select,html[data-theme=dark] body.admin select{background-repeat:no-repeat!important;background-position:left .8rem center;padding-left:2rem;padding-right:.9rem}
html[dir=ltr] body.admin select,html[dir=ltr][data-theme=dark] body.admin select{background-position:right .8rem center;padding-right:2rem;padding-left:.9rem}

/* ============================================================
   Reports
   ============================================================ */
.report-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.report-tabs .rtab{padding:.5rem 1rem;border-radius:12px;font-weight:700;font-size:.88em;border:1px solid rgba(255,255,255,.85);background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.35));color:var(--text-dim);box-shadow:inset 0 1px 0 #fff,0 8px 16px -12px rgba(60,35,10,.5);transition:.2s}
.report-tabs .rtab:hover{color:var(--text);border-color:var(--org);transform:translateY(-1px)}
.report-tabs .rtab.on{background:linear-gradient(160deg,var(--org-soft),var(--org-deep));color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 -1px var(--org-dark),0 16px 28px -14px rgba(247,148,29,.6)}
html[data-theme=dark] .report-tabs .rtab{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-color:rgba(255,255,255,.12);color:var(--text-dim);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
html[data-theme=dark] .report-tabs .rtab.on{color:#fff}
.report-filters{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.report-filters .field{margin:0;min-width:150px}
.report-filters .chips{width:100%;display:flex;gap:.35rem;flex-wrap:wrap;padding-top:.25rem}
.chart-box{position:relative;height:340px}
.chart-box.small{height:300px;max-width:620px;margin-inline:auto}
@media (max-width:700px){.chart-box{height:280px}.report-filters .field{min-width:130px;flex:1}}
@media print{.report-tabs,.report-filters,.chart-box{display:none}}

/* ── Dark-mode contrast fixes ─────────────────────────────── */
/* amber badge: white on #FFB020 is only 1.8:1 — use dark text on the amber */
body.admin .pill.warn,html[data-theme=dark] body.admin .pill.warn{background:var(--warn);color:#241a00}
/* KPI caption sat just under the AA threshold on the glass card */
html[data-theme=dark] body.admin .kpi .d,
html[data-theme=dark] body.admin .side-foot,
html[data-theme=dark] body.admin .help,
html[data-theme=dark] body.admin .muted.tiny{color:#B3AEA6}

/* The dark-mode `.sidenav a i` rule outranks `.sidenav a.on i`, so the active
   tab was drawing an orange icon on the orange gradient — invisible. Restate it
   at equal-or-higher specificity, and lift the resting icon a little. */
html[data-theme=dark] body.admin .sidenav a.on i{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);color:#fff}
html[data-theme=dark] body.admin .sidenav a.on i svg{stroke:#fff}
html[data-theme=dark] body.admin .sidenav a i{color:var(--org-soft)}
html[data-theme=dark] body.admin .sidenav a:hover i{color:#fff;background:rgba(255,255,255,.12)}

/* ── Reports: comparison deltas, dual charts, in-table bars ── */
.kpi .delta{display:inline-flex;align-items:baseline;gap:.35rem;font-size:.82em;font-weight:800;margin-top:.15rem}
.kpi .delta small{font-weight:500;font-size:.85em;opacity:.7}
.kpi .delta.up{color:#15803D}.kpi .delta.down{color:#B91C1C}.kpi .delta.flat{color:var(--muted)}
html[data-theme=dark] body.admin .kpi .delta.up{color:#5BE38A}
html[data-theme=dark] body.admin .kpi .delta.down{color:#FF8A8A}
body.admin .kpi.accent .delta.up{color:#7CFFA8}body.admin .kpi.accent .delta.down{color:#FFA8A8}
body.admin .kpi.accent .delta small{color:rgba(255,255,255,.6)}
.chart-row{display:grid;grid-template-columns:1.9fr 1fr;gap:1rem;align-items:start}
@media (max-width:1100px){.chart-row{grid-template-columns:1fr}}
.chart-box{position:relative;height:330px}
.chart-box.small{height:290px;max-width:none;margin:0}
/* proportion bar drawn inside the value cell so rows rank visually */
.tbl td.cell-bar{min-width:130px}
.cell-bar .cb-v{display:block;line-height:1.3}
.cell-bar .cb-track{display:block;height:4px;margin-top:4px;border-radius:99px;background:var(--line-2);overflow:hidden}
.cell-bar .cb-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--org-soft),var(--org-deep))}
html[data-theme=dark] body.admin .cell-bar .cb-track{background:rgba(255,255,255,.08)}