/* ============================================================
   Go Capitals — Admin Portal (RTL) styles.
   Loaded with core.css + style-ar.css. Matches the dashboard PDFs.
   ============================================================ */
:root{
  --admin-bg:#F4F3F6;
  --side-w:268px;
  --topbar-h:74px;
}
body.admin{ background:var(--admin-bg); color:var(--brown-soft); }

/* ---------- Shell ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---------- Sidebar ---------- */
.side{
  width:var(--side-w); flex-shrink:0; background:#fff; border-inline-start:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; inset-block-start:0; height:100vh;
  box-shadow:-2px 0 24px rgba(76,57,46,.04);
}
.side-logo{ padding:22px 24px; border-block-end:1px solid var(--line); }
.side-logo img{ height:46px; }
.side-nav{ flex:1; padding:12px 12px; display:grid; gap:2px; align-content:start; overflow-y:auto; }
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:.55em 1em; border-radius:10px;
  color:var(--brown-soft); font-weight:600; font-size:.95rem; position:relative; transition:.25s var(--ease);
}
.side-nav a svg{ width:20px; height:20px; flex-shrink:0; }
.side-nav a:hover{ background:var(--cream-2); color:var(--gold-dark); }
.side-nav a.active{ background:var(--gold-tint); color:var(--gold-dark); }
.side-nav a.active::before{ content:""; position:absolute; inset-inline-end:-14px; inset-block:18%; width:4px; border-radius:4px; background:var(--gold); }
.side-nav .sep{ height:1px; background:var(--line); margin:10px 8px; }
.side-nav a.logout{ color:#C0492F; }
.side-nav a.logout:hover{ background:#FBE9E5; }
.side-user{ padding:16px 20px; border-block-start:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.side-user img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.side-user .nm{ font-weight:700; color:var(--ink); font-size:.92rem; }
.side-user .rl{ font-size:.78rem; color:var(--muted); }
/* Profile-shortcut identity: name, client code, email, portal label — all ONE font size inside a light frame. */
.pid-box{ border:1px solid var(--line); border-radius:12px; padding:10px 13px; background:var(--admin-bg,#faf7f3); min-width:0; width:100%; text-align:start; }
.pid-box .pid-line{ font-size:.78rem; line-height:1.55; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pid-box .pid-name{ font-size:.95rem; font-weight:800; color:var(--ink); margin-block-end:3px; }
.pid-box .pid-portal{ font-size:.72rem; color:var(--gold-dark); font-weight:700; margin-block-start:2px; }
/* Topbar chip: COMPACT so it never overflows the fixed-height topbar — name + client code only, tight lines.
   Email + portal are hidden here (they stay in the full sidebar box). No border/bg: it's an inline chip. */
.tb-menu .pid-box{ max-width:200px; width:auto; border:0; background:transparent; padding:0; }
.tb-menu .pid-box .pid-line{ line-height:1.3; }
.tb-menu .pid-box .pid-name{ font-size:.9rem; margin-block-end:0; }
.tb-menu .pid-box .pid-email,
.tb-menu .pid-box .pid-portal{ display:none; }
@media (max-width:560px){ .tb-user .pid-box{ display:none; } }
/* Order-completion progress bar: a GREEN fill (not the theme navy) so «نسبة إنجاز الطلب» reads as progress.
   Overrides the inline background:var(--gold) (which the B2B/customer theme remaps to navy). */
.op-fill{ background:#2E9F5B !important; }
.op-pct{ color:#1E8A4C !important; }

/* ---------- Topbar ---------- */
.topbar{
  height:var(--topbar-h); background:#fff; border-block-end:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding-inline:24px; position:sticky; inset-block-start:0; z-index:20;
}
.topbar .date{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.88rem; font-weight:600; white-space:nowrap; }
.topbar .date svg{ width:18px; height:18px; color:var(--gold-dark); }
.topbar-search{ flex:1; max-width:520px; position:relative; }
.topbar-search input{
  width:100%; padding:.7em 2.7em .7em 1.1em; border:1.5px solid var(--line); border-radius:var(--radius-pill);
  background:var(--admin-bg); font-size:.9rem; transition:.25s var(--ease);
}
.topbar-search input:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(181,118,57,.1); }
.topbar-search svg{ position:absolute; inset-block-start:50%; inset-inline-end:14px; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); }
.topbar-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.icon-pill{ position:relative; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--brown); background:var(--admin-bg); transition:.25s var(--ease); }
.icon-pill:hover{ background:var(--gold-tint); color:var(--gold-dark); }
.icon-pill .dot{ position:absolute; inset-block-start:9px; inset-inline-end:10px; width:8px; height:8px; border-radius:50%; background:#E0533B; border:2px solid #fff; }
.menu-btn{ display:none; }

/* ---------- Content ---------- */
.admin-content{ padding:28px 24px 40px; }
.page-title{ margin-block-end:22px; }
.page-title h1{ font-size:1.6rem; color:var(--ink); }
.page-title p{ color:var(--muted); font-size:.92rem; margin-block-start:4px; }
.title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- Stat cards ---------- */
.stat-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-block-end:22px; }
.stat-card{ background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); display:flex; align-items:flex-start; gap:14px; transition:.3s var(--ease); }
.stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.stat-card .si{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; flex-shrink:0; color:#fff; }
.stat-card .si svg{ width:24px; height:24px; }
.stat-card .sv{ font-size:1.7rem; font-weight:800; color:var(--ink); line-height:1.1; }
.stat-card .sl{ font-size:.84rem; color:var(--muted); margin-block-start:3px; }
.stat-card .sc{ font-size:.78rem; font-weight:700; margin-block-start:6px; display:inline-flex; gap:3px; align-items:center; }
.sc.up{ color:#1F9D55; } .sc.down{ color:#D9534F; }
.bg-orange{ background:#F2913D; } .bg-purple{ background:#8B5CF6; } .bg-green{ background:#27AE60; }
.bg-slate{ background:#64748B; } .bg-teal{ background:#2BB3A3; } .bg-amber{ background:#E0A93B; } .bg-red{ background:#E0533B; }

/* ---------- Panels / charts ---------- */
.panel-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:16px; }
.panel{ background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-block-end:18px; }
.panel-head h3{ font-size:1.05rem; color:var(--ink); }
.panel-head a{ font-size:.82rem; color:var(--gold-dark); font-weight:700; }
.donut-wrap{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; justify-content:center; padding:6px 0 4px; }
.donut-chart{ flex:none; width:210px; height:210px; }
.donut-chart svg{ width:210px !important; height:210px !important; max-width:none; display:block; overflow:visible; }
.donut-chart svg circle{ transition:stroke-dasharray .6s var(--ease); }
.donut-num{ font-size:22px; font-weight:800; fill:var(--ink); }
.donut-cap{ font-size:7.5px; font-weight:600; fill:var(--muted); letter-spacing:.02em; }
.legend{ display:grid; gap:14px; flex:1; min-width:190px; align-content:center; }
.legend li{ display:flex; align-items:center; gap:10px; font-size:.95rem; color:var(--brown-soft); }
.legend .sw{ width:14px; height:14px; border-radius:4px; flex-shrink:0; }
.legend .vv{ margin-inline-start:auto; font-weight:800; color:var(--ink); }
.area-chart{ width:100%; height:230px; }

/* ---------- Filters ---------- */
.filters{ background:#fff; border-radius:16px; padding:18px; box-shadow:var(--shadow-sm); margin-block-end:18px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:12px; align-items:end; }
.filters .fld{ display:grid; gap:6px; }
.filters label{ font-size:.78rem; font-weight:700; color:var(--muted); }
.filters input,.filters select{ padding:.7em 1em; border:1.5px solid var(--line); border-radius:10px; background:var(--admin-bg); font-size:.88rem; }
.filters input:focus,.filters select:focus{ outline:none; border-color:var(--gold); background:#fff; }

/* ---------- Table ---------- */
.table-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden; }
/* Horizontal scroll wrapper: keeps wide tables (e.g. the merged agents table with its
   Status + Action columns) fully visible inside the card instead of clipping the last
   column. The pager (.tbl-foot) is appended to .table-card, OUTSIDE this wrapper, so it
   never scrolls away. RTL-safe (overflow-x works in both directions). */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
/* Agents tab table: trimmed to the identity columns so it fits the full-width in-tab
   card and WRAPS long content instead of forcing horizontal scroll. No forced min-width
   and no blanket nowrap — long cells (company name AR+EN, email) wrap naturally. The
   .tbl-scroll wrapper stays as a graceful fallback only for unusually narrow widths. */
.tbl-agents tbody td:nth-child(3){ min-width:150px; } /* Company (AR + EN) may wrap */
.tbl thead th{ text-align:start; padding:5px 18px; background:var(--cream-2); color:var(--muted); font-weight:700; font-size:.82rem; white-space:nowrap; }
.tbl tbody td{ padding:6px 18px; border-block-start:1px solid var(--line); color:var(--brown-soft); vertical-align:middle; line-height:1.45; }
.tbl tbody tr{ transition:.2s var(--ease); }
.tbl tbody tr:hover{ background:var(--cream); }
.tbl .oid{ font-weight:700; color:var(--ink); }
.tbl .sub{ font-size:.78rem; color:var(--muted); }
.badge{ display:inline-block; padding:.32em 1em; border-radius:var(--radius-pill); font-size:.76rem; font-weight:700; white-space:nowrap; }
.b-new{ background:#E6F6EC; color:#1F9D55; }
.b-review{ background:#FCF3DD; color:#B98112; }
.b-pay{ background:#FDECE7; color:#C2410C; }
.b-approved{ background:#E6F2FB; color:#2E78C7; }
.b-done{ background:#E8F7EF; color:#1F9D55; }
.b-hold{ background:#F1ECFB; color:#7C5CD6; }
.b-rejected{ background:#FBE9E5; color:#D14C32; }
.tbl-actions{ display:flex; gap:8px; }
.tbl-actions a{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--admin-bg); color:var(--brown); transition:.2s var(--ease); }
.tbl-actions a:hover{ background:var(--gold); color:#fff; }
.tbl-foot{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; flex-wrap:wrap; gap:12px; }
.tbl-foot .info{ font-size:.85rem; color:var(--muted); }
.pager2{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.pager2 a{ min-width:36px; height:36px; padding-inline:6px; display:grid; place-items:center; border-radius:9px; background:var(--admin-bg); font-weight:700; font-size:.85rem; color:var(--brown); transition:.2s var(--ease); white-space:nowrap; }
.pager2 a:hover{ background:var(--gold-tint); }
.pager2 a.active{ background:var(--gold); color:#fff; }
.pager2 a.disabled{ opacity:.4; pointer-events:none; }
.pager2 .pg-ind{ margin-inline-start:6px; font-size:.82rem; color:var(--muted); font-weight:700; }

/* buttons in admin */
.btn-admin{ display:inline-flex; align-items:center; gap:.5em; padding:.7em 1.4em; border-radius:11px; font-weight:700; font-size:.9rem; background:var(--brown); color:#fff; transition:.25s var(--ease); }
.btn-admin:hover{ background:var(--ink); transform:translateY(-2px); }
.btn-admin.gold{ background:var(--gold); } .btn-admin.gold:hover{ background:var(--gold-dark); }
.btn-admin.ghost{ background:var(--admin-bg); color:var(--brown); } .btn-admin.ghost:hover{ background:var(--gold-tint); }
.btn-admin svg{ width:18px; height:18px; }

/* ---------- Order detail ---------- */
.detail-head{ background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); margin-block-end:18px; }
.detail-head .dh-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.detail-head h1{ font-size:1.4rem; color:var(--ink); }
.detail-head .dh-sub{ color:var(--muted); font-size:.9rem; margin-block-start:4px; }
.detail-head .dh-handler{ color:var(--muted); font-size:.82rem; margin-block-start:3px; }
.detail-head .dh-handler strong{ color:var(--ink); font-weight:700; }
/* order-details compact top toolbar + toggle panels */
.od-toolbar{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.od-toolbar .btn-admin.sm{ padding:.42em .85em; font-size:.8rem; }
.od-toolbar .btn-admin.sm.is-on{ background:var(--brown); color:#fff; border-color:var(--brown); }
/* Opacity-only reveal (NOT the shared fadeUp, which translateY(20px) → the panel paints 20px lower during the
   anim and its lower edge transiently overlaps the card/tabs below → the reported "assign" overlap). */
@keyframes odPanelIn{ from{ opacity:0 } to{ opacity:1 } }
.od-panel{ margin-block-start:14px; padding:16px 18px; border:1.5px solid var(--line); border-radius:14px; background:var(--cream,#faf7f2); animation:odPanelIn .25s var(--ease) both; }
.od-panel[hidden]{ display:none; }
.od-panel h3{ font-size:1rem; color:var(--ink); }
/* stage progress */
.stages{ display:flex; gap:0; margin-block-start:24px; }
.stage{ flex:1; text-align:center; position:relative; }
.stage .sdot{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin-inline:auto; background:var(--cream-2); color:var(--muted); font-weight:800; position:relative; z-index:2; }
.stage.done .sdot{ background:var(--gold); color:#fff; }
.stage.current .sdot{ background:var(--brown); color:#fff; box-shadow:0 0 0 5px var(--gold-tint); }
.stage .slab{ margin-block-start:8px; font-size:.82rem; font-weight:600; color:var(--brown-soft); }
.stage::before{ content:""; position:absolute; inset-block-start:19px; inset-inline-end:50%; width:100%; height:3px; background:var(--line); z-index:1; }
.stage:first-child::before{ display:none; }
.stage.done::before,.stage.current::before{ background:var(--gold); }

.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
.detail-stack{ display:block; }
.tabs-bar{ display:flex; gap:8px; background:#fff; border-radius:12px; padding:7px; box-shadow:var(--shadow-sm); margin-block-end:16px; flex-wrap:wrap; }
.tabs-bar button{ padding:.65em 1.3em; border-radius:9px; font-weight:700; font-size:.88rem; color:var(--brown-soft); transition:.2s var(--ease); }
.tabs-bar button.is-active{ background:var(--gold); color:#fff; }
.tab-block{ display:none; animation:fadeUp .4s var(--ease) both; }
.tab-block.is-active{ display:block; }
/* Order-preparation wizard: numbered, sequentially-unlocked stages + per-stage Back/Next footer. */
.tabs-bar .wz-num{ display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:var(--cream-2); color:var(--muted); font-size:.72rem; font-weight:800; line-height:1; margin-inline-end:7px; }
.tabs-bar button.is-active .wz-num{ background:rgba(255,255,255,.28); color:#fff; }
.tabs-bar button.is-locked{ opacity:.45; cursor:not-allowed; }
.tabs-bar button.is-locked .wz-num{ background:transparent; border:1px dashed var(--line); }
.wz-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-block-start:20px; padding-block-start:16px; border-block-start:1px solid var(--line); }
.info-card{ background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); margin-block-end:16px; }
.info-card h3{ font-size:1.05rem; color:var(--ink); margin-block-end:16px; padding-block-end:12px; border-block-end:1px solid var(--line); }
.kv{ display:grid; grid-template-columns:repeat(auto-fit, minmax(175px,1fr)); gap:8px 18px; align-items:start; }
.kv .k{ font-size:.84rem; color:var(--brown-soft); font-weight:600; margin-block-end:4px; }
.kv .v{ font-weight:700; color:var(--ink); font-size:.97rem; }
.kv .full{ grid-column:1 / -1; }
/* Grid items default to min-width:auto, so a long unbroken value (URL, long number) forces the track wider
   than the viewport and overflows the screen. Let items shrink and break long tokens so values always wrap. */
.kv > div{ min-width:0; }
.kv .v{ overflow-wrap:anywhere; }
/* Free-text notes shown as a tidy, self-contained box: preserves the writer's line breaks, wraps long text,
   and never exceeds its card. Pair with .full so the box spans the whole row. */
.notes-box{ font-weight:500; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; line-height:1.7;
  background:var(--cream-2, #F5EFE8); border:1px solid var(--line); border-radius:10px; padding:10px 12px; max-width:100%; margin-block-start:2px; }
.mini-tbl{ width:100%; border-collapse:collapse; font-size:.88rem; }
.mini-tbl th{ text-align:start; padding:10px 12px; background:var(--cream-2); color:var(--muted); font-weight:700; font-size:.78rem; }
.mini-tbl td{ padding:11px 12px; border-block-start:1px solid var(--line); color:var(--brown-soft); }
.mini-tbl .tot{ font-weight:800; color:var(--ink); }
.sum-row{ display:flex; justify-content:space-between; padding:9px 0; color:var(--brown-soft); font-size:.9rem; }
.sum-row.grand{ border-block-start:2px solid var(--line); margin-block-start:6px; padding-block-start:14px; font-weight:800; color:var(--ink); font-size:1.05rem; }
.sum-row .amt{ font-weight:700; color:var(--ink); }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.login-brand{ position:relative; overflow:hidden; display:grid; place-items:center; isolation:isolate; padding:40px; }
.login-brand img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.login-brand::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(150deg, rgba(154,94,42,.92), rgba(40,28,20,.9)); }
.login-brand .lb-inner{ color:#fff; max-width:420px; text-align:center; }
/* Logo shown in its ORIGINAL colours (no recolour filter); a soft white plate keeps it legible on the dark panel. */
.login-brand .lb-inner img.lg{ height:96px; margin-inline:auto; margin-block-end:22px; background:rgba(255,255,255,.96); border-radius:16px; padding:14px 20px; box-shadow:0 8px 24px rgba(0,0,0,.22); }
.login-brand h2{ color:#fff; font-size:1.8rem; margin-block-end:14px; }
.login-brand p{ color:rgba(255,255,255,.85); }
.login-form-side{ display:grid; place-items:center; padding:40px; background:#fff; }
.login-card{ width:100%; max-width:400px; }
.login-card .lc-logo{ display:none; }
/* Auth-form hints: smaller font so the full message shows without clipping (incl. the main-phone hint .phone-err). */
.auth-card .field-hint,
.auth-card .phone-err{ font-size:.8rem; line-height:1.55; display:block; margin-block-start:5px; }
.auth-card .field-hint{ color:var(--brown,#6b5a4c); }
.login-card h1{ font-size:1.85rem; color:var(--ink); margin-block-end:8px; font-weight:800; }
.login-card .sub{ color:var(--ink); font-size:1.02rem; line-height:1.65; font-weight:500; margin-block-end:26px; }
.login-card .field{ margin-block-end:18px; }
.login-card label{ font-weight:700; font-size:.98rem; color:var(--ink); display:block; margin-block-end:8px; }
.login-card .inp{ position:relative; direction:ltr; }
/* Register sub-panes (reg-tight): slightly shorter fields per request. */
.reg-tight .field input, .reg-tight .field select, .reg-tight .field .form-select, .reg-tight .field textarea{ padding-block:.6em; }
/* flatpickr header fix: the app's global `font:inherit` (core.css) bleeds a tall line-height into the
   calendar's month/year caption and clips it. Normalise sizing INSIDE the calendar only. */
.flatpickr-calendar, .flatpickr-calendar *{ line-height:normal; }
.flatpickr-calendar .flatpickr-months{ height:auto; padding-block:4px; }
.flatpickr-calendar .flatpickr-current-month{ font-size:1rem; padding:0 0 4px; height:auto; }
.flatpickr-calendar .flatpickr-current-month .cur-month{ font-weight:700; }
.flatpickr-calendar .flatpickr-current-month input.cur-year{ font-size:1rem; height:auto; padding:0 2px; }
.flatpickr-calendar .flatpickr-weekdays{ height:auto; }
.login-card .inp svg{ position:absolute; inset-block-start:50%; inset-inline-end:14px; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); }
.login-card input{ width:100%; padding:.9em 2.7em .9em 1.1em; border:1.5px solid var(--line); border-radius:12px; background:var(--cream); transition:.25s var(--ease); }
.login-card input:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(181,118,57,.12); }
.login-row{ display:flex; align-items:center; justify-content:space-between; margin-block-end:24px; font-size:.86rem; }
.login-row label{ display:inline-flex; gap:8px; align-items:center; font-weight:500; color:var(--brown-soft); margin:0; }
.login-row a{ color:var(--gold-dark); font-weight:700; }
.btn-login-full{ width:100%; justify-content:center; padding:.95em; }
.login-back{ margin-block-start:24px; text-align:center; font-size:.88rem; color:var(--muted); }
.login-back a{ color:var(--gold-dark); font-weight:700; }

/* Auth screens (login + register): NAVY (كحلي) brand palette — matches the portal theme (#1E3A5F). Scoped to
   .login-wrap so the rest of the site keeps its gold identity; overriding the CSS variables cascades to every
   auth element (inputs/focus, buttons, tabs, sub-tabs, links, terms). */
.login-wrap{ --gold:#1E3A5F; --gold-dark:#14304F; --gold-soft:#3A5A7F; --gold-tint:#E7EEF6; --brown:#27384D; }
.login-wrap .login-card input:focus{ box-shadow:0 0 0 4px rgba(30,58,95,.14); }
.login-wrap .login-brand::after{ background:linear-gradient(150deg, rgba(30,58,95,.92), rgba(15,26,44,.92)); }

/* ---------- Mobile sidebar ---------- */
.side-overlay{ position:fixed; inset:0; background:rgba(40,28,20,.5); opacity:0; visibility:hidden; transition:.3s var(--ease); z-index:40; }
@media (max-width:1100px){
  .stat-cards{ grid-template-columns:repeat(2,1fr); }
  .panel-grid{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:1fr; }
  .filters{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .side{ position:fixed; inset-block:0; inset-inline-start:0; transform:translateX(105%); transition:transform .4s var(--ease); z-index:50; }
  [dir=ltr] .side{ transform:translateX(-105%); }
  body.side-open .side{ transform:translateX(0) !important; }
  body.side-open .side-overlay{ opacity:1; visibility:visible; }
  .menu-btn{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--admin-bg); color:var(--brown); }
  .topbar .date{ display:none; }
}
@media (max-width:560px){
  .stat-cards{ grid-template-columns:1fr; }
  .filters{ grid-template-columns:1fr; }
  .kv{ grid-template-columns:1fr; }
  .login-wrap{ grid-template-columns:1fr; }
  .login-brand{ display:none; }
  .login-card .lc-logo{ display:block; height:56px; margin-block-end:24px; }
  .admin-content{ padding:18px 14px 30px; }
  .tbl thead{ display:none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td{ display:block; width:100%; }
  .tbl tr{ border:1px solid var(--line); border-radius:12px; margin-block-end:12px; padding:6px; }
  .tbl td{ border:0; display:flex; justify-content:space-between; gap:12px; padding:8px 12px; }
  .tbl td::before{ content:attr(data-l); font-weight:700; color:var(--muted); font-size:.8rem; }
  /* On phones every table stacks into cards; drop any agents min-width so it doesn't
     force horizontal scrolling. */
  .tbl-scroll{ overflow-x:visible; }
  .tbl-agents tbody td:nth-child(3){ min-width:0; }
}

/* svg-size-guard */
.login-back a{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.login-back a svg{width:16px;height:16px;flex-shrink:0}
.btn-login-full svg{width:18px;height:18px}

/* portal-extras */
.lang-pill{ font-weight:800; font-size:.8rem; min-width:42px; }
/* toggle switch */
.switch{ position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .sl{ position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.3s; cursor:pointer; }
.switch .sl::before{ content:""; position:absolute; width:20px; height:20px; inset-block-start:3px; inset-inline-start:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .sl{ background:var(--gold); }
.switch input:checked + .sl::before{ transform:translateX(20px); }
[dir=rtl] .switch input:checked + .sl::before{ transform:translateX(-20px); }
/* notifications */
.notif-group{ margin-block-end:22px; }
.notif-group h4{ font-size:.82rem; color:var(--muted); font-weight:700; margin-block-end:12px; }
.notif-item{ display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-sm); margin-block-end:10px; position:relative; transition:.25s var(--ease); }
.notif-item:hover{ box-shadow:var(--shadow); }
.notif-item.unread{ border-inline-start:3px solid var(--gold); }
.notif-item .ni{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; color:#fff; }
.notif-item .nt{ font-weight:700; color:var(--ink); font-size:.95rem; }
.notif-item .nx{ color:var(--muted); font-size:.86rem; margin-block-start:2px; }
.notif-item .ntime{ margin-inline-start:auto; font-size:.78rem; color:var(--muted); white-space:nowrap; }
/* employees */
.emp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.emp-card{ background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); text-align:center; transition:.3s var(--ease); }
.emp-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.emp-card img{ width:74px; height:74px; border-radius:50%; object-fit:cover; margin-inline:auto; border:3px solid var(--gold-tint); }
.emp-card .en{ font-weight:800; color:var(--ink); margin-block-start:12px; }
.emp-card .er{ font-size:.85rem; color:var(--gold-dark); }
.emp-card .ed{ font-size:.82rem; color:var(--muted); margin-block-start:6px; display:flex; gap:6px; align-items:center; justify-content:center; }
.emp-meta{ display:flex; justify-content:center; gap:18px; margin-block-start:14px; padding-block-start:14px; border-block-start:1px solid var(--line); }
.emp-meta .v{ font-weight:800; color:var(--ink); } .emp-meta .l{ font-size:.74rem; color:var(--muted); }
/* bar chart */
.bars{ display:flex; align-items:flex-end; gap:14px; height:230px; padding-block:10px; }
.bars .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bars .bar{ width:60%; max-width:44px; border-radius:8px 8px 0 0; background:linear-gradient(var(--gold-soft),var(--gold)); transition:height .8s var(--ease); }
.bars .bar-col:nth-child(even) .bar{ background:linear-gradient(var(--brown-700),var(--brown)); }
.bars .bl{ font-size:.74rem; color:var(--muted); }
/* settings */
.settings-grid{ display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:start; }
.settings-nav{ background:#fff; border-radius:16px; padding:10px; box-shadow:var(--shadow-sm); display:grid; gap:2px; position:sticky; inset-block-start:90px; }
.settings-nav button{ display:flex; gap:10px; align-items:center; padding:.75em 1em; border-radius:10px; font-weight:600; color:var(--brown-soft); font-size:.9rem; text-align:start; transition:.2s; }
.settings-nav button svg{ width:18px; height:18px; }
.settings-nav button.is-active{ background:var(--gold-tint); color:var(--gold-dark); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-block-end:1px solid var(--line); }
.set-row:last-child{ border-block-end:0; }
.set-row .sr-t{ font-weight:700; color:var(--ink); font-size:.92rem; }
.set-row .sr-d{ font-size:.82rem; color:var(--muted); }
.avatar-row{ display:flex; gap:16px; align-items:center; margin-block-end:20px; }
.avatar-row img{ width:72px; height:72px; border-radius:50%; object-fit:cover; }
@media (max-width:860px){ .emp-grid{ grid-template-columns:repeat(2,1fr); } .settings-grid{ grid-template-columns:1fr; } .settings-nav{ position:static; display:flex; flex-wrap:wrap; } }
@media (max-width:560px){ .emp-grid{ grid-template-columns:1fr; } }

/* admin-icon-guard */
.emp-card .ed svg{ width:16px; height:16px; flex-shrink:0; }
.badge svg{ width:14px; height:14px; vertical-align:-2px; }
.icon-pill svg{ width:20px; height:20px; }
.menu-btn svg{ width:22px; height:22px; }
.notif-item .ni svg{ width:20px; height:20px; }
.tbl-actions a svg{ width:18px; height:18px; }
.stage .sdot svg{ width:18px; height:18px; }

/* RTL fix: LTR values (phones, emails, passport/visa numbers) must align to the
   start (right) so they sit under their label instead of drifting left of the cell. */
[dir="rtl"] .v[dir="ltr"],
[dir="rtl"] td[dir="ltr"],
[dir="rtl"] .sub[dir="ltr"]{ text-align:right; unicode-bidi:plaintext; }

/* ============================================================
   Phase 1 — Foundation layer (shared portal components).
   Additive + styles moved out of the layout <style> blocks.
   ============================================================ */

/* shared alerts / validation (moved from _AdminLayout & _CustomerLayout) */
.auth-alert{ background:var(--gold-tint); color:var(--gold-dark); border-radius:12px; padding:14px 18px; margin-block-end:18px; font-weight:600; display:flex; gap:10px; align-items:center; }
.auth-alert svg{ width:18px; height:18px; flex-shrink:0; }
.auth-alert .alert-x{ margin-inline-start:auto; background:none; border:0; font-size:1.35rem; line-height:1; color:var(--gold-dark); cursor:pointer; padding:0 4px; opacity:.7; }
.auth-alert .alert-x:hover{ opacity:1; }
.field-validation-error{ color:var(--red); font-size:.82rem; margin-block-start:4px; display:block; }
.input-validation-error{ border-color:var(--red) !important; }
.validation-summary-errors{ background:#FBE9E5; color:var(--red); border:1.5px solid var(--red); border-radius:12px; padding:12px 16px; margin-block-end:18px; font-size:.88rem; }
/* Client-side "complete the following fields" box on the B2B create-order forms is an ERROR — red frame + tint
   (it reuses .auth-alert for layout, but must NOT read as a neutral notice). Id beats the .auth-alert class. */
#clientErrors{ background:#FBE9E5 !important; color:var(--red) !important; border:1.5px solid var(--red) !important; }
/* Invalid fields get a clear red frame so the mistake is obvious at a glance. */
.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error{ border:1.5px solid var(--red) !important; box-shadow:0 0 0 3px rgba(192,73,47,.12); }
.validation-summary-errors ul{ margin:0; padding-inline-start:18px; }
.side-label{ font-size:.72rem; color:var(--muted); font-weight:700; padding:14px 12px 4px; letter-spacing:.02em; }
.side-nav form{ margin:0; }
.side-nav .logout{ width:100%; display:flex; align-items:center; gap:12px; padding:.8em 1em; border-radius:12px; color:#C0492F; font-weight:600; font-size:.95rem; background:none; text-align:start; cursor:pointer; }
.side-nav .logout:hover{ background:#FBE9E5; }
.side-nav .logout svg{ width:20px; height:20px; }

/* topbar: user chip + dropdown menu */
.tb-menu{ position:relative; }
.tb-user{ display:flex; align-items:center; gap:10px; padding:5px 12px 5px 6px; border-radius:var(--radius-pill); background:var(--admin-bg); cursor:pointer; transition:.2s var(--ease); border:1px solid transparent; }
.tb-user:hover{ background:var(--gold-tint); }
.tb-user .av{ width:34px; height:34px; border-radius:50%; background:var(--brown); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem; flex-shrink:0; }
.tb-user .nm{ font-size:.85rem; font-weight:700; color:var(--ink); line-height:1.15; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-user .rl{ font-size:.72rem; color:var(--muted); }
/* Orders-list name cell: keep long agent/company/traveler names on one line with an ellipsis. */
.tbl-name-cell{ display:inline-block; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.tb-user .cv{ width:16px; height:16px; color:var(--muted); }
.tb-dd{ position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; min-width:210px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s var(--ease); z-index:60; }
.tb-menu.open .tb-dd{ opacity:1; visibility:visible; transform:none; }
.tb-dd a,.tb-dd button{ display:flex; align-items:center; gap:10px; width:100%; padding:.62em .8em; border-radius:9px; font-size:.88rem; color:var(--brown-soft); font-weight:600; text-align:start; transition:.15s var(--ease); }
.tb-dd a:hover,.tb-dd button:hover{ background:var(--cream-2); color:var(--gold-dark); }
.tb-dd a svg,.tb-dd button svg{ width:18px; height:18px; }
.tb-dd .danger{ color:#C0492F; } .tb-dd .danger:hover{ background:#FBE9E5; color:#C0492F; }
.tb-dd .sep{ height:1px; background:var(--line); margin:6px 4px; }
@media (max-width:560px){ .tb-user .nm,.tb-user .rl,.tb-user .cv{ display:none; } .tb-user{ padding:4px; } }

/* unified form system (opt-in via .form-grid — existing pages unaffected) */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.form-grid .full{ grid-column:1 / -1; }
.form-grid .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.form-grid .field > label{ font-weight:700; font-size:.85rem; color:var(--ink); }
.form-grid .field .req{ color:var(--red); }
.form-grid .field input:not([type=checkbox]):not([type=radio]),
.form-grid .field select,
.form-grid .field textarea{ width:100%; padding:.72em 1em; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--cream); font-size:.92rem; transition:.2s var(--ease); }
.form-grid .field input:focus,.form-grid .field select:focus,.form-grid .field textarea:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(181,118,57,.12); }
.form-grid .field .help{ font-size:.78rem; color:var(--muted); }
.form-grid .field.check{ flex-direction:row; align-items:center; gap:8px; }
.form-grid .field.check label{ font-weight:500; }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-block-start:18px; align-items:center; }

/* button states */
.btn-admin:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(181,118,57,.28); }
.btn-admin[disabled],.btn-admin.is-loading{ opacity:.55; pointer-events:none; }
.btn-admin.sm{ padding:.5em 1em; font-size:.82rem; border-radius:9px; }
.btn-admin.danger{ background:#C0492F; } .btn-admin.danger:hover{ background:#9e3a24; }

/* empty state */
.empty-state{ text-align:center; padding:48px 20px; color:var(--muted); }
.empty-state .ei{ width:62px; height:62px; border-radius:18px; background:var(--cream-2); color:var(--gold-dark); display:grid; place-items:center; margin:0 auto 14px; }
.empty-state .ei svg{ width:28px; height:28px; }
.empty-state h4{ color:var(--ink); font-size:1.02rem; margin-block-end:4px; }
.empty-state p{ font-size:.88rem; }

/* toast notifications */
.toasts{ position:fixed; inset-block-start:18px; inset-inline-end:18px; display:flex; flex-direction:column; gap:10px; z-index:120; pointer-events:none; }
.toast{ background:#fff; border:1px solid var(--line); border-inline-start:4px solid var(--gold); border-radius:12px; padding:13px 18px; box-shadow:var(--shadow); font-size:.9rem; color:var(--ink); font-weight:600; max-width:380px; animation:toastIn .35s var(--ease) both; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }

/* confirm modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(40,28,20,.5); display:grid; place-items:center; z-index:130; padding:20px; opacity:0; visibility:hidden; transition:.2s var(--ease); }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-card{ background:#fff; border-radius:18px; padding:24px; max-width:420px; width:100%; box-shadow:var(--shadow-lg); transform:translateY(10px); transition:.2s var(--ease); }
.modal-overlay.open .modal-card{ transform:none; }
.modal-card h3{ font-size:1.1rem; color:var(--ink); margin-block-end:8px; }
.modal-card p{ color:var(--brown-soft); font-size:.92rem; margin-block-end:20px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* dashboards (phase 2) */
.quick-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-block-end:18px; }
.quick-actions .qa{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 16px; font-size:.9rem; font-weight:700; color:var(--brown); transition:.2s var(--ease); }
.quick-actions .qa:hover{ border-color:var(--gold); color:var(--gold-dark); transform:translateY(-2px); }
.quick-actions .qa svg{ width:18px; height:18px; color:var(--gold-dark); }
.dash-hero{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; margin-block-end:16px; box-shadow:var(--shadow-sm); }
.dash-hero .dh-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.dash-hero .dh-label{ font-size:.74rem; color:var(--muted); font-weight:700; }
.dash-hero .dh-num{ font-size:1.2rem; color:var(--ink); font-weight:800; margin-block:4px 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-hero .dh-meta{ font-size:.86rem; color:var(--muted); }
.dash-hero .dh-cta{ flex-shrink:0; }
.mini-steps{ display:flex; align-items:center; gap:6px; margin-block-start:16px; }
.mini-steps .ms-dot{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--cream-3); color:var(--muted); }
.mini-steps .ms-dot svg{ width:13px; height:13px; }
.mini-steps .ms-dot.done{ background:var(--gold); color:#fff; }
.mini-steps .ms-dot.current{ background:var(--brown); color:#fff; box-shadow:0 0 0 3px var(--gold-tint); }
.mini-steps .ms-line{ flex:1; height:3px; border-radius:3px; background:var(--line); }
.mini-steps .ms-line.done{ background:var(--gold); }
.dash-hero .hero-stages{ margin-block-start:18px; }
@media (max-width:600px){ .dash-hero .hero-stages{ overflow-x:auto; } .dash-hero .hero-stages .stage{ min-width:84px; } .dash-hero .hero-stages .slab{ font-size:.72rem; } }
.recent-list{ display:flex; flex-direction:column; }
.recent-list .ri{ display:flex; align-items:center; gap:10px; padding:11px 0; border-block-start:1px solid var(--line); font-size:.88rem; }
.recent-list .ri:first-child{ border-block-start:0; }
.recent-list .ri .rn{ font-weight:700; color:var(--ink); }
.recent-list .ri .rc{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-list .ri .badge{ margin-inline-start:auto; }

/* Key-value detail list (client / record details) — single column, label at the
   start (right in RTL), value at the end (left). Scoped to .kv-rows so it does not
   affect the original two-column .kv used on the order screens. */
.kv-rows{ display:flex; flex-direction:column; gap:0; margin:0; }
.kv-rows > div{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:13px 2px; border-block-start:1px solid var(--line); }
.kv-rows > div:first-child{ border-block-start:0; }
.kv-rows dt{ order:1; color:var(--muted); font-size:.85rem; font-weight:600; margin:0; text-align:start; flex:none; }
.kv-rows dd{ order:2; color:var(--ink); font-weight:700; font-size:.95rem; margin:0; text-align:end; word-break:break-word; min-width:0; }
/* Activation toggle row */
.status-toggle{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-block-start:18px; padding-block-start:16px; border-block-start:1px solid var(--line); }

/* All-or-nothing service package card (e.g. "معاك حتى الإقلاع") */
.pkg-card{ border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; margin-block:18px 4px; background:var(--cream); transition:.2s var(--ease); }
.pkg-card.on{ border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(181,118,57,.12); }
.pkg-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pkg-pick{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); font-size:1.02rem; cursor:pointer; }
.pkg-pick input[type=checkbox]{ width:18px; height:18px; accent-color:var(--gold); }
.pkg-price{ font-weight:800; color:var(--gold-dark); font-size:1.05rem; white-space:nowrap; }
.pkg-state{ font-size:.82rem; color:var(--muted); margin-block-start:4px; }
.pkg-perks{ margin:12px 0 0; padding-inline-start:20px; columns:2; gap:18px; }
.pkg-perks li{ color:var(--brown-soft); font-size:.86rem; margin-block-end:5px; break-inside:avoid; }
@media (max-width:640px){ .pkg-perks{ columns:1; } }

/* Special-discount request + results + final total */
.disc-box{ margin-block:6px 14px; }
.disc-box > summary{ cursor:pointer; list-style:none; }
.disc-box > summary::-webkit-details-marker{ display:none; }
.disc-reason{ padding:10px 0; border-block-start:1px solid var(--line); }
.disc-pick{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); cursor:pointer; }
.disc-pick input[type=checkbox]{ width:17px; height:17px; accent-color:var(--gold); flex:none; }
.disc-pct{ margin-inline-start:auto; font-weight:800; color:var(--gold-dark); }
.disc-inputs{ display:flex; gap:10px; flex-wrap:wrap; margin-block-start:8px; padding-inline-start:27px; }
.disc-inputs input{ padding:.55em .9em; border:1.5px solid var(--line); border-radius:9px; background:var(--cream); font-size:.88rem; min-width:180px; }
.disc-results{ margin-block:8px 6px; }
.disc-line{ display:flex; align-items:center; gap:10px; padding:8px 0; border-block-start:1px solid var(--line); font-size:.88rem; flex-wrap:wrap; }
.disc-line .dl-label{ font-weight:700; color:var(--ink); }
.disc-line .dl-msg{ color:var(--muted); }
.fin-tot{ margin-block-start:16px; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; }
.fin-tot > div{ display:flex; justify-content:space-between; align-items:center; padding:11px 16px; font-size:.92rem; color:var(--brown-soft); border-block-start:1px solid var(--line); }
.fin-tot > div:first-child{ border-block-start:0; }
.fin-tot .fin-disc{ color:#1F9D55; font-weight:700; }
.fin-tot .fin-grand{ background:var(--gold-tint); color:var(--ink); font-weight:800; font-size:1.05rem; }
.pm-card{ display:flex; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:12px; padding:10px 16px; cursor:pointer; font-weight:700; color:var(--ink); }
.pm-card input{ accent-color:var(--gold); }

/* password show/hide toggle (auth) */
.login-card .inp .pw-toggle{ position:absolute; inset-block-start:50%; inset-inline-end:12px; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center; color:var(--muted); background:none; border:0; cursor:pointer; border-radius:8px; }
.login-card .inp .pw-toggle:hover{ color:var(--gold-dark); }
.login-card .inp .pw-toggle.on{ color:var(--gold); }
.login-card .inp .pw-toggle svg{ width:18px; height:18px; position:static; }
/* icon swap: crossed eye (eye-off) while the password is HIDDEN, open eye once shown (.on) */
.login-card .inp .pw-toggle .pw-eye{ display:none; }
.login-card .inp .pw-toggle .pw-eyeoff{ display:block; }
.login-card .inp .pw-toggle.on .pw-eye{ display:block; }
.login-card .inp .pw-toggle.on .pw-eyeoff{ display:none; }