/* ============================================================
   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.
   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.
   ============================================================ */
/* Figtree (UI, display and text) per the approved shell prototype; Tajawal for Arabic (app.css).
   Drift from SYSTEM_DESIGN §8.9 recorded in docs/superpowers/specs/2026-10-06-workspace-shell-design.md. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  /* Robotack OS palette — semantic source of truth (shell prototype, 2026-10-06).
     White canvas, indigo ink, violet for actions, company yellow (#FABE11) as the
     brand/secondary colour: the global bar, the sign-in panel and the logo. */
  --brand:#FABE11;
  --brand-ink:#2A2000;      /* text/icons on --brand (9.6:1) */
  --brand-text:#8A6300;     /* brand-coloured text on white (5.4:1); never #FABE11 on white */
  --brand-soft:#FEF4D2;
  --primary:#5A3DF0;
  --primary-text:#4328D4;
  --primary-hover:#4A2FE0;
  --primary-active:#3A22C4;
  --primary-rgb:90, 61, 240;
  --primary-soft:#EBE9FF;
  --ink-strong:#15133A;
  --amber:var(--brand);
  --accent-pink:#E46DCE;
  --accent-pink-soft:#F9E5F5;
  --accent-yellow:var(--brand);
  --accent-yellow-soft:#FCF1DA;
  --bg-soft:#F0EFF8;
  --bg-blue-soft:#E3E8FB;
  /* The house gradient is neutralised: Robotack OS backgrounds are flat paper. */
  --page-gradient-start:#F4F4FA;
  --page-gradient-mid:#F4F4FA;
  --page-gradient-end:#F4F4FA;
  --page-gradient:#F4F4FA;
  /* The app canvas behind the panel/sidebar (and the active bar tab that joins it).
     --paper stays the faint tint used for hovers and inset areas inside cards. */
  --canvas:#FFFFFF;
  --text-main:#1B1A3A;
  --text-muted:#4A4970;
  --text-subtle:#6B6A86;
  --text-faint:#B5B4CC;
  --border:#E4E3EF;
  --border-soft:#EEEDF6;
  --border-strong:#D4D2E6;
  --input-border:#DCDAEC;
  --card-bg:#FFFFFF;
  --nav-hover:#E9E8F4;
  --input-bg:#FFFFFF;
  --secondary-action-bg:#FFFFFF;
  --secondary-action-hover:#F5F4FF;
  /* The global shell bar: company yellow, dark-on-light controls.
     --bar-overlay-rgb tints hovers/chips; --bar-field is the search box. */
  --shell-bar:var(--brand);
  --bar-fg:var(--brand-ink);
  --bar-fg-strong:#000000;
  --bar-muted:#5E4700;
  --bar-overlay-rgb:42, 32, 0;
  --bar-field:rgba(255,255,255,.55);
  --bar-field-hover:rgba(255,255,255,.75);
  --bar-ring-hover:var(--brand-ink);
  --shadow-pop:0 18px 48px rgba(21,19,58,.28);
  --focus-ring:rgba(var(--primary-rgb),.28);
  --disabled-bg:#F0F0F5;
  --disabled-text:#8D8BA3;
  --danger:#C23B54;
  --danger-soft:#FBE8EC;
  --success:#17805F;
  --success-soft:#E0F3EC;
  --warning:#8F6410;
  --warning-soft:#FCF1DA;
  --info:#2F5BD3;
  --info-soft:#E6EDFC;

  /* Backwards-compatible aliases consumed by existing components (DataTable skin). */
  --ink:var(--text-main); --ink-2:var(--text-muted); --ink-3:var(--text-subtle); --ink-4:#8A89A6;
  --line:var(--border); --line-2:var(--border-soft); --line-3:#F3F3F8;
  --paper:#F4F4FA; --paper-soft:#FBFBFE; --paper-2:var(--bg-soft); --paper-3:#E4E4EE; --card:var(--card-bg);
  --ember:var(--primary); --ember-deep:var(--primary-hover); --ember-soft:var(--primary-soft);
  --gold:var(--accent-yellow); --gold-deep:#7A560E; --gold-soft:var(--accent-yellow-soft);
  --plum:#1B1838; --plum-2:#2E2A55;
  --teal:var(--success); --teal-soft:var(--success-soft);
  --sky:var(--info); --sky-soft:var(--info-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:14px; --pad-x:16px;
  --row-h:44px;
  --gap:14px;
  /* radius / elevation: tight radii read as a tool, not a brochure */
  --r-xs:6px; --r-sm:9px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-panel:14px;
  --shadow-1:0 1px 2px rgba(21,19,58,.05);
  --shadow-2:0 2px 6px rgba(21,19,58,.06), 0 10px 24px rgba(21,19,58,.07);
  --shadow-3:0 12px 32px rgba(21,19,58,.14), 0 32px 72px rgba(21,19,58,.12);
  --font-disp:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* chrome sizes: read these, never hard-code them (§8.6) */
  --bar-h:48px;
  --sidebar-w:228px;
}

/* 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:#12111C; --paper-2:#1B1A29; --paper-3:#262438; --card:#1A1927; --card-bg:#1A1927;
  --page-gradient:#12111C;
  --paper-soft:#17162A; --nav-hover:#24233A; --input-bg:#1F1E2E; --input-border:#3A3853; --border-strong:#3A3853; --text-faint:#5E5C7A;
  --canvas:#12111C;
  /* Dark mode keeps a deep bar (a full-yellow bar glares on a dark UI); the brand shows in the logo and accents. */
  --shell-bar:#0B0A1A; --ink-strong:#2B2944;
  --bar-fg:#C9C7EE; --bar-fg-strong:#FFFFFF; --bar-muted:#A9A6D6; --bar-overlay-rgb:255, 255, 255;
  --bar-field:rgba(255,255,255,.09); --bar-field-hover:rgba(255,255,255,.15); --bar-ring-hover:var(--brand);
  --brand-text:#FAC93F; --brand-soft:rgba(250,190,17,.14);
  --shadow-pop:0 18px 48px rgba(0,0,0,.55);
  --secondary-action-bg:#201F30; --secondary-action-hover:#29283C;
  --text-main:#EDECF6; --text-muted:#BDBBD2; --text-subtle:#A4A2BC;
  --ink:var(--text-main); --ink-2:var(--text-muted); --ink-3:var(--text-subtle); --ink-4:#8E8CA6;
  --primary-text:#B8ACFF; --primary-soft:rgba(var(--primary-rgb),.2);
  --border:#2F2D44; --border-soft:#26243A;
  --line:var(--border); --line-2:var(--border-soft); --line-3:#212033;
  --disabled-bg:#24233A; --disabled-text:#7E7C97;
  --danger:#F07A8E; --danger-soft:rgba(240,122,142,.14);
  --success:#4CC79F; --success-soft:rgba(76,199,159,.14);
  --warning:#E6B04F; --warning-soft:rgba(230,176,79,.14);
  --info:#86A6FF; --info-soft:rgba(134,166,255,.14);
  --ember-soft:rgba(var(--primary-rgb),.2); --gold-soft:rgba(250,190,17,.14);
  --teal-soft:var(--success-soft); --sky-soft:var(--info-soft);
  --rose-soft:var(--danger-soft); --violet-soft:rgba(var(--primary-rgb),.2);
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 4px 14px rgba(0,0,0,.35);
  --shadow-3:0 16px 48px rgba(0,0,0,.5);
}

/* ===== 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; justify-content:center; gap:7px;
  height:34px; padding:0 14px; border-radius:var(--r-sm); font-family:var(--font-text); font-weight:700; font-size:13.5px; line-height:1;
  border:1px solid var(--input-border); background:var(--secondary-action-bg); color:var(--text-main); cursor:pointer;
  white-space:nowrap; flex:none; text-decoration:none;
  transition:background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
}
.btn:hover{ background:var(--secondary-action-hover); border-color:var(--border-strong); color:var(--text-main);}
.btn:active{ transform:translateY(1px);}
.btn:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:1px;}
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 1px 2px rgba(58,34,196,.25);}
.btn.primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:#fff;}
.btn.primary:active{ background:var(--primary-active); border-color:var(--primary-active);}
.btn.danger{ background:var(--danger); color:#fff; border-color:var(--danger);}
.btn.danger:hover{ filter:brightness(.94); color:#fff;}
.btn.ghost{ background:transparent; border-color:transparent; color:var(--text-muted);}
.btn.ghost:hover{ background:var(--paper-2); color:var(--text-main);}
.btn.danger-text{ color:var(--danger);}
.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; transform:none;}
.btn.dark{ background:var(--ink); color:#fff; border-color:var(--ink);}
.btn.gold{ background:var(--gold); color:#3a2a10; border-color:var(--gold);}
.btn.lg{ height:42px; padding:0 18px; font-size:14.5px; border-radius:var(--r-md);}
/* .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{ height:28px; padding:0 10px; font-size:12.5px; border-radius:var(--r-xs); gap:6px;}
.btn.sm svg{ width:14px; height:14px;}
.btn svg{ width:14px; height:14px; flex:none;}
.btn.lg svg{ width:16px; height:16px;}
/* Feature empty states also use .ic for their framed icon tile. Keep a button's
   direct SVG icon from inheriting that tile's size, background, and spacing. */
.btn > svg.ic{ display:block; width:14px; height:14px; margin:0; border-radius:0; background:transparent; color:inherit; vertical-align:middle; }
.btn.lg > svg.ic{ width:16px; height:16px; }

.surface{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-lg); 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:start; padding:calc(var(--row-pad-y, 12px) - 2px) 12px; font-size:11px; font-weight:800; color:var(--ink-3);
  letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--line);
  background:#F7F7FC;
  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:#F5F4FF;}
.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);}
.tag.sky{ background:var(--sky-soft); color:var(--sky);}
.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); }
html.dark .btn:hover{ border-color:#45435E; }
html.dark .tbl thead th{ background:var(--paper-2); }
html.dark .tbl tbody tr:hover td{ background:var(--paper-2); }