/* ============================================================
   base-tokens.css — house design tokens + the handful of base components
   (buttons, surface, table, tag, modal, banners) every page and the DataTable
   skin build on. Extracted from the reference project's admin.css (RoboPager: web-font import removed, see below).
   Rules: use the SEMANTIC tokens (--primary, --text-main, --border, --card-bg…);
   the short aliases (--ink, --line, --ember…) exist for legacy components.
   Dark mode = html.dark (token overrides only). RTL = [dir="rtl"] + logical props.
   Tablet-first (1180×820). Load this FIRST, before any page/feature CSS.
   ============================================================ */
/* No web fonts: the CSP allows nothing from other origins and a font host would see every page load (including ones whose URL
   fragment carries an invitation token). System stacks cover Latin and Arabic. Vendor a font under /resources/vendor/fonts later
   if the brand needs one. */

:root{
  /* House palette — semantic source of truth (swap per brand) */
  --primary:#5840EF;
  --primary-text:var(--primary);
  --primary-hover:#462DE6;
  --primary-active:#321AD1;
  --primary-rgb:88, 64, 239;
  --primary-soft:#ECE9FF;
  --accent-pink:#E46DCE;
  --accent-pink-soft:#F9E5F5;
  --accent-yellow:#ECE5A2;
  --accent-yellow-soft:#F8F5D8;
  --bg-soft:#E6ECF8;
  --bg-blue-soft:#BFD2FA;
  --page-gradient-start:#FDE7F3;
  --page-gradient-mid:#EAE9FF;
  --page-gradient-end:#DFFFEE;
  --page-gradient:linear-gradient(135deg, var(--page-gradient-start) 0%, var(--page-gradient-mid) 50%, var(--page-gradient-end) 100%);
  --text-main:#222222;
  --text-muted:#5B576A;
  --text-subtle:#706B7F;
  --border:#D8D9E7;
  --border-soft:#E7E8F0;
  --card-bg:#FFFFFF;
  --sidebar-bg:rgba(255,255,255,.94);
  --header-bg:rgba(255,255,255,.92);
  --input-bg:#FFFFFF;
  --secondary-action-bg:#F3F0FF;
  --secondary-action-hover:#E8E3FF;
  --focus-ring:rgba(var(--primary-rgb),.18);
  --disabled-bg:#EEF0F5;
  --disabled-text:#8B8798;
  --danger:#C8455B;
  --danger-soft:#F8DEE2;
  --success:#1F8A6D;
  --success-soft:#DCF1E9;
  --warning:#8A7114;
  --warning-soft:#F8F5D8;

  /* Backwards-compatible aliases consumed by existing portal components. */
  --ink:var(--text-main); --ink-2:var(--text-muted); --ink-3:var(--text-subtle); --ink-4:#9D98AA;
  --line:var(--border); --line-2:var(--border-soft); --line-3:#F3F4F8;
  --paper:#F5F7FC; --paper-2:var(--bg-soft); --paper-3:#DDE5F5; --card:var(--card-bg);
  --ember:var(--primary); --ember-deep:var(--primary-hover); --ember-soft:var(--primary-soft);
  --gold:var(--accent-yellow); --gold-deep:#716A19; --gold-soft:var(--accent-yellow-soft);
  --plum:#2F284F; --plum-2:#4A416E;
  --teal:#1F8A6D; --teal-soft:#DCF1E9; --teal-ink:#17705A; --sky-ink:#2B5493;
  --sky:#315C9E; --sky-soft:var(--bg-blue-soft);
  --rose:var(--danger); --rose-soft:var(--danger-soft);
  --violet:var(--primary); --violet-soft:var(--primary-soft);
  /* density-driven (changed by .density-compact/.density-spacious) */
  --pad-y:16px; --pad-x:18px;
  --row-h:48px;
  --gap:14px;
  /* radius / elevation */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --shadow-1:0 1px 2px rgba(34,34,34,.05), 0 2px 8px rgba(67,55,120,.05);
  --shadow-2:0 4px 14px rgba(49,42,82,.08), 0 12px 34px rgba(67,55,120,.07);
  --shadow-3:0 10px 30px rgba(49,42,82,.12), 0 30px 70px rgba(67,55,120,.12);
  --font-disp:ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, -apple-system, 'Geeza Pro', Tahoma, 'Noto Sans Arabic', sans-serif;
  --font-text:system-ui, -apple-system, 'Segoe UI', 'Geeza Pro', Tahoma, 'Noto Sans Arabic', Roboto, sans-serif;
}

/* density vars — actually consumed by .adm-body/.surface/.kpi-card/.tbl below */
.density-compact { --pad-y:10px; --pad-x:12px; --row-h:36px; --gap:10px; --surf-pad:13px; --row-pad-y:9px; --kpi-val:24px; --body-pad:14px; }
.density-cozy    { --pad-y:14px; --pad-x:18px; --row-h:48px; --gap:14px; --surf-pad:18px; --row-pad-y:12px; --kpi-val:32px; --body-pad:22px; }
.density-spacious{ --pad-y:20px; --pad-x:24px; --row-h:60px; --gap:20px; --surf-pad:24px; --row-pad-y:16px; --kpi-val:36px; --body-pad:28px; }


/* ===== dark mode (token overrides) ===== */
html.dark,
.dark-admin{
  --paper:#171622; --paper-2:#211F31; --paper-3:#29263C; --card:#222032;
  --text-main:#F3F1FA; --text-muted:#C2BED1; --text-subtle:#AAA4BA;
  --ink:var(--text-main); --ink-2:var(--text-muted); --ink-3:var(--text-subtle); --ink-4:#AAA4BA;
  --primary-text:#B9ADFF;
  --line:#3B3850; --line-2:#302D43; --line-3:#29263A;
  --ember-soft:rgba(var(--primary-rgb),.2); --gold-soft:rgba(236,229,162,.16);
  --teal-soft:rgba(31,138,109,.18); --sky-soft:rgba(45,108,192,.18);
  --rose-soft:rgba(200,69,91,.16); --violet-soft:rgba(107,78,158,.2);
  /* Tag text on the translucent dark tints: the light-mode inks measured 1.8-3:1 there, below the 4.5:1 minimum. */
  --gold-deep:#E8DF86; --sky:#93BBF2; --rose:#F08A9B; --teal-ink:var(--teal); --sky-ink:var(--sky);
}

/* ===== base ===== */
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font-text); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:11px; font-family:var(--font-text); font-weight:800; font-size:13.5px;
  border:1px solid #D7D1F8; background:var(--secondary-action-bg); color:var(--primary-active); cursor:pointer;
  white-space:nowrap; flex:none;
  transition:background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover{ background:var(--secondary-action-hover); border-color:#BEB4F5;}
.btn:active{ background:#DDD7FF; border-color:#A99DF1;}
.btn:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px;}
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 14px rgba(var(--primary-rgb),.26);}
.btn.primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover);}
.btn.primary:active{ background:var(--primary-active); border-color:var(--primary-active);}
.btn:disabled, .btn[disabled], .bigbtn:disabled, .bigbtn[disabled]{ background:var(--disabled-bg); border-color:var(--border); color:var(--disabled-text); box-shadow:none; cursor:not-allowed; opacity:.72;}
.btn.dark{ background:var(--ink); color:#fff; border-color:var(--ink);}
.btn.gold{ background:var(--gold); color:#3a2a10; border-color:var(--gold);}
/* Used by RCUI.confirm for destructive actions. */
.btn.danger{ background:var(--danger); color:#fff; border-color:var(--danger); box-shadow:0 6px 14px rgba(200,69,91,.22);}
.btn.danger:hover{ background:#B13A4E; border-color:#B13A4E;}
.btn.lg{ padding:12px 18px; font-size:14.5px; border-radius:13px;}
/* .sm was already used by Home's QR row and the readiness steps but had no rule,
   so those buttons rendered at full size. Defined once here rather than per page. */
.btn.sm{ padding:6px 11px; font-size:12px; border-radius:9px; gap:6px;}
.btn.sm svg{ width:14px; height:14px;}
.btn svg{ width:14px; height:14px; flex:none;}
.btn.lg svg{ width:16px; height:16px;}

.surface{ background:var(--card-bg); border:1px solid var(--line); border-radius:18px; padding:var(--surf-pad, 18px); display:flex; flex-direction:column; gap:calc(var(--gap, 14px) - 2px);  box-shadow:var(--shadow-1);}
.surface .head{ display:flex; align-items:center; justify-content:space-between;}
.surface .head h3{ font-family:var(--font-disp); font-weight:700; font-size:17px; letter-spacing:-.012em;}
.surface .head .sub{ font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}
.surface .head .right{ display:flex; gap:8px; align-items:center;}

.tbl{ width:100%; border-collapse:collapse; font-size:13.5px;}
.tbl thead th{
  text-align:left; padding:calc(var(--row-pad-y, 12px) - 2px) 12px; font-size:11px; font-weight:800; color:var(--ink-3);
  letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line-2);
  background:var(--paper);
  white-space:nowrap;
}
.tbl thead th:first-child{ border-top-left-radius:12px;}
.tbl thead th:last-child{ border-top-right-radius:12px;}
.tbl tbody td{ padding:var(--row-pad-y, 12px) 12px; border-bottom:1px solid var(--line-2); vertical-align:middle;}
.tbl tbody tr:hover td{ background:var(--primary-soft);}
.tbl tbody tr:last-child td{ border-bottom:none;}

.tag{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:999px; font-size:11px; font-weight:800;
  letter-spacing:.04em;
}
.tag .d{ width:6px; height:6px; border-radius:50%; background:currentColor;}
.tag.gold{ background:var(--gold-soft); color:var(--gold-deep);}
.tag.teal{ background:var(--teal-soft); color:var(--teal-ink);}
.tag.sky{ background:var(--sky-soft); color:var(--sky-ink);}
.tag.ember{ background:var(--ember-soft); color:var(--ember-deep);}
.tag.rose{ background:var(--rose-soft); color:var(--rose);}
.tag.violet{ background:var(--violet-soft); color:var(--primary-text);}
.tag.line{ background:var(--card-bg); border:1px solid var(--line); color:var(--ink-2);}
.tag.dark{ background:var(--ink); color:#fff;}

.errbanner{
  background:var(--rose-soft); border:1.5px solid #F0BFC8; border-radius:14px;
  padding:12px 14px; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#7A2535;
}
.errbanner b{ font-weight:800; display:block;}
.errbanner .ic{ width:22px; height:22px; border-radius:7px; background:var(--rose); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.errbanner .ic svg{ width:14px; height:14px;}

.scrim{
  position:absolute; inset:0; background:rgba(34,34,34,.46); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:40;
}
.modal{
  width:480px; max-width:92%; background:var(--card-bg); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-3); overflow:hidden;
}
.modal .mhead{ padding:20px 22px 0; display:flex; gap:14px; align-items:flex-start;}
.modal .mhead .mic{
  width:48px; height:48px; border-radius:14px; flex:none;
  background:var(--rose-soft); color:var(--rose); display:flex; align-items:center; justify-content:center;
}
.modal .mhead .mic svg{ width:22px; height:22px;}
.modal .mhead h3{ font-family:var(--font-disp); font-weight:700; font-size:20px; letter-spacing:-.018em;}
.modal .mhead .sub{ font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.5;}
.modal .mbody{ padding:14px 22px 4px; display:flex; flex-direction:column; gap:12px;}
.modal .mfoot{ padding:16px 22px 18px; display:flex; gap:10px; justify-content:flex-end;}

/* callouts */
.callout{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--rose-soft); border:1px solid #F0BFC8; border-radius:12px;
  padding:11px 13px; color:#7A2535; font-size:12.5px; font-weight:600; line-height:1.45;
}
.callout.warn{ background:var(--gold-soft); border-color:#F0DCAE; color:#6A4910;}
.callout.info{ background:var(--sky-soft); border-color:#CFE0F2; color:#1F4A86;}
.callout .ic{ width:22px; height:22px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;}

/* page states (RCUI.setState) — minimal; style richer per project */
.rc-empty, .rc-state{ padding:28px 16px; text-align:center; color:var(--ink-3); font-size:13.5px;}
.rc-skeleton{ background:linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%); background-size:200% 100%; animation:rc-shimmer 1.4s ease-in-out infinite; border-radius:10px;}
@keyframes rc-shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }

/* LTR islands inside RTL pages (phones, codes, ids) */
.rc-ltr{ direction:ltr; unicode-bidi:isolate; }

@media (prefers-reduced-motion: reduce){
  .rc-skeleton{ animation:none; }
  .btn{ transition:none; }
}

/* ===== page shell (base-layout.html) =====
   .adm-body is a viewport-height flex column. A page with several stacked sections must pin
   its children: .adm-body:has(.my-page) > * { flex-shrink: 0 } */
.app-main{ min-height:100vh; display:flex; flex-direction:column; }
.adm-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:var(--gap, 14px); padding:var(--body-pad, 22px); }
html.dark body{ background:var(--paper); color:var(--ink); }