/* dashboard-skin.css
 *
 * The premium skin for the backend. Loaded LAST in every dashboard page's
 * <head>, after that page's own inline <style>, so it wins on the cascade
 * without any page having to give up its layout.
 *
 * Why one file instead of 24 rewrites: every dashboard page already draws
 * itself out of the same dozen custom properties (--purple, --bg, --surface,
 * --border, --text, --text-muted, --danger, ...) copy-pasted into its own
 * :root. Redefining those here re-skins every rule in every page at once. The
 * component blocks below then only have to correct GEOMETRY and TYPE — the
 * colours already arrived through the tokens.
 *
 * Rule for anything added here: it must be safe on a page nobody re-checked.
 * Tokens, type, radius, borders, focus rings — yes. Layout (display, position,
 * width, flex) — no, that belongs to the page.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── the palette ──────────────────────────────────────── */
  --pu:#6B3FA0; --pu-l:#9A6BD0; --pu-d:#4A2F66;
  --em:#E8722C; --em-l:#F4995A;
  --ok-c:#22C55E; --wn:#F59E0B; --er:#EF4444; --in:#3B82F6;
  --pg:#F3F0F6; --cd:#ffffff; --cd2:#FAF8FC; --wl:#F5F2F8;
  --bd:#E3E0EA; --bd2:#EDE9F2;
  --tx:#1A1523; --tx2:#5C5470; --tx3:#9B93A8;
  --sd:#14101B; --sd2:#1B1226;
  --sh:0 1px 2px rgba(98,65,133,.06);
  --sh2:0 12px 32px rgba(98,65,133,.16);
  --sans:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:8px; --r2:12px; --rh:34px;

  /* ── the names the pages already use, repointed ───────── */
  --purple:var(--pu); --brand:var(--pu); --purple2:var(--pu-l);
  --purple-dim:rgba(107,63,160,.5);
  --accent:var(--em);
  --bg:var(--pg); --bg2:var(--cd); --card:var(--cd);
  --surface:var(--cd); --surface2:var(--wl);
  --border:var(--bd); --border2:var(--bd2); --border-lt:#D6D1E0;
  --text:var(--tx); --text-muted:var(--tx2); --muted:var(--tx2);
  --text-dim:var(--tx3); --dim:var(--tx3);
  --danger:var(--er); --ok:var(--ok-c); --amber:var(--wn);
}

/* ── type ────────────────────────────────────────────────── */
body {
  font-family:var(--sans);
  font-size:12.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection { background:rgba(232,114,44,.22); }
h1,h2,h3 { letter-spacing:-.02em; }
h1 { font-weight:300; }
h2,h3 { font-weight:500; }
b,strong { font-weight:500; }
/* The old sheets shout at 700/800. The system says weight is for hierarchy,
   not emphasis — one step, never three. */
.it-name, .card h3 { font-weight:500; }
/* The mono micro-label, but only on a label that IS one. ~38 labels in these
   pages wrap their own checkbox and carry a sentence ("Send confirmation email
   with QR ticket") — uppercase 9.5px mono would mangle every one of them.
   Written as :not(:has()) on purpose: a browser without :has() drops the whole
   rule and labels stay exactly as they are today, which is the harmless way
   for this to fail. */
label:not(:has(input)):not(:has(select)):not(:has(textarea)) {
  font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx3);
}
.sub, .note, .hint { color:var(--tx3); font-weight:400; }
.mono, code, pre { font-family:var(--mono); }

/* ── controls ────────────────────────────────────────────── */
input, select, textarea {
  font-family:inherit;
  border-radius:7px;
  border:1px solid var(--bd);
  background:var(--cd);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color:var(--pu);
  box-shadow:0 0 0 3px rgba(107,63,160,.18);
}
input[type=range] { box-shadow:none; accent-color:var(--pu); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:7px; border:1px solid var(--bd); background:var(--wl);
  color:var(--tx); font-weight:400; letter-spacing:0;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { background:var(--cd2); border-color:var(--pu-l); color:var(--pu); }
.btn:active { transform:scale(.98); }
.btn:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(107,63,160,.24); }
.btn-primary, .btn.primary {
  background:var(--pu); border-color:var(--pu); color:#fff; font-weight:500;
}
.btn-primary:hover, .btn.primary:hover { background:var(--pu-d); border-color:var(--pu-d); color:#fff; }
.btn-danger, .btn.danger { color:var(--er); }
.btn-danger:hover, .btn.danger:hover { background:rgba(239,68,68,.08); border-color:var(--er); color:var(--er); }
.btn:disabled, .btn[disabled] { opacity:.45; }
.btn:disabled:hover, .btn[disabled]:hover { background:var(--wl); border-color:var(--bd); color:var(--tx); }

/* ── the toggles ─────────────────────────────────────────── */
/* Every settings checkbox becomes a real switch. Checkboxes inside a table are
   row selection — those stay checkboxes, because a switch in a grid of rows
   reads as a setting per row rather than "this one is selected".
   !important on the box: a dozen pages carry inline style="width:auto" to
   escape the old global input rule, and an inline style beats a sheet. */
input[type=checkbox] {
  appearance:none; -webkit-appearance:none;
  width:32px !important; height:18px !important;
  min-width:32px; flex:none;
  border-radius:99px; border:0 !important; padding:0 !important;
  background:var(--bd);
  position:relative; cursor:pointer; vertical-align:middle;
  transition:background .18s var(--ease);
  box-shadow:none;
}
input[type=checkbox]::after {
  content:''; position:absolute; top:2px; inset-inline-start:2px;
  width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(20,16,27,.3);
  transition:transform .18s var(--ease);
}
input[type=checkbox]:checked { background:var(--pu); }
input[type=checkbox]:checked::after { transform:translateX(14px); }
html[dir=rtl] input[type=checkbox]:checked::after { transform:translateX(-14px); }
input[type=checkbox]:focus-visible {
  outline:0; box-shadow:0 0 0 3px rgba(107,63,160,.24);
}
input[type=checkbox]:disabled { opacity:.45; cursor:default; }
/* Row selection stays a checkbox: a switch in a grid of rows reads as a
   setting for that row, not as "this one is selected". Written as a plain
   descendant selector rather than :not(table input) — a complex :not() makes
   the WHOLE rule invalid on older Safari, and losing it would take the toggles
   with it. */
table input[type=checkbox] {
  appearance:auto; -webkit-appearance:auto;
  width:14px !important; height:14px !important; min-width:0;
  background:none; border-radius:3px; accent-color:var(--pu); cursor:pointer;
}
table input[type=checkbox]::after { display:none; }
input[type=radio] { accent-color:var(--pu); }

/* ── surfaces ────────────────────────────────────────────── */
.card, .modal, .drawer {
  border-radius:var(--r2);
  border:1px solid var(--bd);
  background:var(--cd);
  box-shadow:var(--sh);
}
.modal { box-shadow:var(--sh2); }
.drawer { border-radius:0; box-shadow:var(--sh2); }
.item, .row-item, .comm-row {
  border-radius:var(--r);
  border-color:var(--bd);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.item:hover { border-color:var(--border-lt); background:var(--cd2); }
.empty { color:var(--tx3); }

/* ── tables ──────────────────────────────────────────────── */
th {
  font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx3); background:var(--cd);
  border-bottom:1px solid var(--bd);
}
td { height:var(--rh); border-bottom:1px solid var(--bd2); }
tbody tr:hover td { background:var(--wl); }
tr.rowsel td, tr.is-sel td { background:rgba(107,63,160,.07); }
/* Figures line up in a column or they are not a column. */
td, .stat, .num, .count-pill { font-feature-settings:'tnum'; }

/* ── tabs ────────────────────────────────────────────────── */
.tabs { border-bottom:1px solid var(--bd); gap:2px; }
.tab {
  font-weight:400; color:var(--tx3);
  border-bottom:2px solid transparent;
  transition:color .15s var(--ease);
}
.tab:hover { color:var(--tx); }
.tab.on, .tab.is-on, .tab.active {
  color:var(--tx); font-weight:500;
  border-bottom-color:var(--em);
}

/* ── chips, tags, pills ──────────────────────────────────── */
.chip, .tag, .pill, .badge {
  border-radius:99px; font-weight:500; letter-spacing:0;
  border:1px solid var(--bd2); background:var(--wl); color:var(--tx2);
}
.chip.confirmed, .pill.ok, .tag.ok { background:rgba(34,197,94,.12); color:#1E7E3A; border-color:transparent; }
.chip.pending, .chip.waitlisted, .pill.warn { background:rgba(245,158,11,.14); color:#B3691B; border-color:transparent; }
.chip.rejected, .chip.cancelled, .pill.danger { background:rgba(239,68,68,.12); color:#B3261E; border-color:transparent; }

/* ── chrome ──────────────────────────────────────────────── */
.topbar, .filters, .pager { background:var(--cd); border-color:var(--bd); }
#toast, .toast {
  background:var(--sd); border:0; color:#F1EDF3;
  border-radius:var(--r); box-shadow:var(--sh2);
}
#toast.err, .toast.err { background:#4A1620; color:#FFD9DE; }
.progress { background:var(--wl); border-radius:99px; }
.progress > div { background:var(--pu); border-radius:99px; }

/* A scrollbar is chrome, not content. */
* { scrollbar-width:thin; scrollbar-color:var(--bd) transparent; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bd); border-radius:99px; border:2px solid var(--pg); }
::-webkit-scrollbar-thumb:hover { background:var(--border-lt); }

@media (max-width:760px) {
  /* iOS zooms a focused field under 16px, and the zoom never comes back. */
  input, select, textarea { font-size:16px; }
  input[type=checkbox] { width:38px !important; height:22px !important; }
  input[type=checkbox]::after { width:18px; height:18px; }
  input[type=checkbox]:checked::after { transform:translateX(16px); }
  html[dir=rtl] input[type=checkbox]:checked::after { transform:translateX(-16px); }
}
