/* ALOKE — THE CONSOLE SHELL (2026-09-06).
   ═════════════════════════════════════════════════════════════════════════
   ONE app-shell for the two rooms that are run from a desk: the super
   console (/super) and the unified owner panel (/panel). Loaded LAST, after
   auth.css, loyalty.css and console-theme.css — so it inherits the Aloke
   brand (the deep purple of the card, the wallet and the POS rail) and only
   lays the page out:
     • a sidebar on the reading side (inline-start: right in Arabic, left in
       English) in the POS rail's own purple, carrying the brand, the grouped
       navigation and the session;
     • a sticky top bar naming where you are, with the one control that
       belongs to the whole page (the place picker, the quick links);
     • a content column of brand-tinted cards, tabular numbers, quiet tables.
   On a phone the sidebar becomes a drawer behind a menu button. Nothing in
   the panes changes: every id and every pane rule they carry still applies.
   Tokens only; the one gradient is the rail's, shared with the POS. */
:root {
  --cs-side: 280px;
  --cs-top: 64px;
  --cs-rail: linear-gradient(180deg, #4E2682 0%, #3A1A5E 100%);
  --cs-rail-ink: rgba(255, 255, 255, .82);
  --cs-rail-dim: rgba(255, 255, 255, .56);
  --cs-rail-line: rgba(255, 255, 255, .12);
  --cs-rail-on: rgba(255, 255, 255, .16);
}

/* ------------------------------------------------------------ the frame */
.cs-app { display: grid; grid-template-columns: var(--cs-side) minmax(0, 1fr); min-height: 100vh; }
.cs-app.hidden { display: none; }
.cs-side {
  background: var(--cs-rail); color: #fff;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
.cs-side::-webkit-scrollbar { width: 6px; }
.cs-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 3px; }
.cs-main { min-width: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------------------ the brand */
.cs-brand { display: flex; align-items: center; gap: var(--s3); padding: 20px 18px 12px; }
.cs-brand .logo { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; }
.cs-brand h1 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; }
.cs-brand .sub { margin: 0; font-size: 12px; color: var(--cs-rail-dim); }

/* -------------------------------------------------------------- the nav */
.cs-nav { flex: 1 1 auto; padding: 4px 10px 16px; }
.cs-group { margin-top: 10px; }
.cs-group-h {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px 4px; margin: 0;
  background: none; border: 0; color: var(--cs-rail-dim); text-align: start;
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
}
.cs-group-h .ic { width: 16px; height: 16px; opacity: .9; }
.cs-group-h:hover { color: #fff; }
.cs-group-h.on { color: #fff; }
.cs-group-h .cs-console { font-weight: 500; opacity: .75; }
.cs-tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 6px 12px; margin: 1px 0;
  border: 0; border-inline-start: 3px solid transparent; border-radius: 10px;
  background: transparent; color: var(--cs-rail-ink);
  font: inherit; text-align: start; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.cs-tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cs-tab.on, .cs-tab[aria-current="true"], .cs-tab[aria-selected="true"] {
  background: var(--cs-rail-on); color: #fff; border-inline-start-color: #fff;
}
.cs-tab .cs-t, .cs-tab .ptab-t, .cs-tab .t { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.cs-tab .cs-s, .cs-tab .ptab-s, .cs-tab .s { display: block; font-size: 11.5px; font-weight: 400; color: var(--cs-rail-dim); line-height: 1.4; }
.cs-tab.on .cs-s, .cs-tab.on .ptab-s, .cs-tab[aria-current="true"] .s { color: rgba(255, 255, 255, .78); }
.cs-tab > span:first-child { flex: 1 1 auto; min-width: 0; }
.cs-tab.pending { opacity: .7; }
.cs-tab .nav-b, .cs-group-h .nav-b {
  margin-inline-start: auto; flex: 0 0 auto;
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
  background: #fff; color: var(--accent-press);
  font-size: 11px; font-weight: 700; line-height: 20px; direction: ltr; text-align: center;
}
/* The super console's nav keeps its `.pgroup` / `.ptab` names for the one
   click-wiring every arrival runs through; the ID out-specifies the page's
   own strip rules, so the same names lay out as rows here. */
#superNav .pgroup-bar, #superNav .panel-tabs { display: block; border: 0; margin: 0; overflow: visible; }
#superNav .pgroup {
  border: 0; background: none; min-height: 0; justify-content: flex-start;
  flex-direction: row; gap: 8px; font-size: 11.5px; padding: 10px 12px 4px; border-radius: 0;
}
#superNav .pgroup.on { background: none; border: 0; }
#superNav .ptab { white-space: normal; border-bottom: 0; flex-direction: row; }
#superNav .ptab.on { border-bottom: 0; }
#superNav .ptab.on .ptab-s { color: rgba(255, 255, 255, .78); }
#superNav .pgroup.on .nav-b, #superNav .ptab.on .nav-b { background: #fff; color: var(--accent-press); }

/* ---------------------------------------------------------- the session */
.cs-side-foot { padding: 12px 14px 16px; border-top: 1px solid var(--cs-rail-line); display: flex; flex-direction: column; gap: 8px; }
.cs-side-foot .whoami { color: var(--cs-rail-ink); text-align: start; font-size: 12.5px; }
.cs-side-foot .whoami .who-phone { color: #fff; }
.cs-links { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border-radius: var(--r-btn); border: 1px solid var(--cs-rail-line);
  color: var(--cs-rail-ink); text-decoration: none; font-size: 12.5px; font-weight: 600;
  background: rgba(255, 255, 255, .05);
}
.cs-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cs-link .ic { width: 16px; height: 16px; }
.cs-side-foot .ghost, .cs-side-foot .cs-btn {
  color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06);
  min-height: 40px; height: auto; border-radius: var(--r-btn);
}
.cs-side-foot .ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.cs-side-foot-row { display: flex; gap: 8px; }
.cs-side-foot-row > * { flex: 1 1 auto; }

/* ------------------------------------------------------------ the top bar */
.cs-top {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--cs-top); display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s5); background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: none;
  justify-content: flex-start;
}
.cs-title { min-width: 0; }
.cs-title h2, .cs-title h1 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-title p { margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.cs-menu { display: none; width: 44px; height: 44px; padding: 0; flex: 0 0 auto; }
.cs-menu .ic { width: 22px; height: 22px; }
.cs-place { display: flex; align-items: center; gap: var(--s2); }
.cs-place label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cs-place select { min-width: 220px; max-width: 360px; min-height: 40px; }

/* -------------------------------------------------------------- content */
.cs-main > main.wrap, .cs-main > .cs-content { max-width: 1240px; width: 100%; margin: 0 auto; padding: var(--s5) var(--s5) var(--s6); }
.section { box-shadow: var(--card-shadow); }
.section > h2 { font-size: 19px; }
.stat { box-shadow: var(--card-shadow); border-color: transparent; }
.stat .stat-num, .stat .num, .bnum, .n { font-variant-numeric: tabular-nums; }
table.data thead th, .b2-t thead th, .bill-sched-t thead th, .pl-t thead th {
  background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.chip.ok { background: var(--accent-weak); color: var(--accent-press); }
.chip.warn { background: #FFF3E0; color: #8A4B00; }
.cs-scrim { display: none; }

/* ---------------------------------------------------- the phone drawer */
@media (max-width: 1023px) {
  .cs-app { grid-template-columns: 1fr; }
  .cs-side {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(86vw, var(--cs-side)); height: 100vh; z-index: 50;
    transform: translateX(100%); transition: transform .2s ease;
    box-shadow: var(--overlay-shadow);
  }
  html[dir="ltr"] .cs-side { transform: translateX(-100%); }
  body.nav-open .cs-side { transform: none; }
  .cs-menu { display: inline-flex; }
  .cs-scrim {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(36, 28, 51, .45); opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.nav-open .cs-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .cs-top { padding: 8px var(--s4); }
  .cs-main > main.wrap, .cs-main > .cs-content { padding: var(--s4); }
  .cs-place select { min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .cs-side, .cs-scrim { transition: none; } }

/* ------------------------------------------------------- the top-bar search */
.cs-search { position: relative; min-width: 260px; flex: 1 1 320px; max-width: 460px; }
.cs-search input { width: 100%; min-height: 40px; }
.cs-search-out {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--overlay-shadow); padding: var(--s2); max-height: 60vh; overflow-y: auto;
}
.cs-search-h { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: var(--s2) var(--s2) var(--s1); letter-spacing: .04em; }
.cs-search-it {
  display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: start;
  background: none; border: 0; border-radius: var(--r-btn); padding: var(--s2) var(--s3);
  font: inherit; color: var(--ink); cursor: pointer; min-height: 40px;
}
.cs-search-it:hover, .cs-search-it:focus-visible { background: var(--accent-weak); }
.cs-search-it .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.cs-search-it .s { font-size: 12px; color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.cs-search-none { font-size: 13px; color: var(--muted); padding: var(--s2) var(--s3); }
/* ------------------------------------------------------- the platform notice */
.cs-notice {
  margin: var(--s3) var(--s5) 0; padding: var(--s3) var(--s4); border-radius: var(--r-card);
  font-size: 14px; line-height: 1.8; unicode-bidi: plaintext;
  background: var(--accent-weak); color: var(--accent-press); border: 1px solid var(--line);
}
.cs-notice.warn { background: #FFF3E0; color: #8A4B00; border-color: #F0C98C; }
.cs-notice.danger { background: var(--danger-weak); color: var(--danger); }
.cs-notice:empty { display: none; }
@media (max-width: 1023px) { .cs-notice { margin: var(--s3) var(--s4) 0; } .cs-search { min-width: 0; } }