/* ===================================================================
   PinkSalt Design System v1 (Sprint 9)
   One shared stylesheet for all PinkSalt screens. Palette aligned to the
   Command Center. Dark + Light via [data-theme]. Touch targets ≥ 44px
   (Apple HIG) / comfortable for tablets (Toast-class). Tokens only — no
   page logic. Link with:  <link rel="stylesheet" href="assets/pinksalt-ui.css">
   =================================================================== */
:root, [data-theme="dark"] {
  /* Tell the browser which palette to paint NATIVE controls from — checkboxes, radios, scrollbars,
     select dropdowns, date pickers and autofill. Without it they render from the OS LIGHT palette,
     which is why a consent checkbox appeared as a white block on a dark sheet (owner-reported
     2026-08-09, pos.html). Declared on the theme selectors rather than forced, so the KDS light/dark
     toggle flips native controls with everything else instead of stranding them. */
  color-scheme: dark;
  --ps-bg:#0f0d15; --ps-panel:#1a1722; --ps-panel-2:#211d2c;
  --ps-ink:#f3f0fa; --ps-muted:#a79fb5; --ps-line:#2f2a3c;
  --ps-accent:#7c5cff; --ps-accent-ink:#ffffff; --ps-pink:#ff77a9;
  --ps-good:#3ec98a; --ps-warn:#ffb454; --ps-bad:#ef5a6f; --ps-info:#54b8f0;
  --ps-shadow:0 8px 28px rgba(0,0,0,.38);
  --ps-r:14px; --ps-r-sm:9px; --ps-gap:14px; --ps-touch:46px;
  --ps-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Kufi Arabic",sans-serif;
}
[data-theme="light"] {
  color-scheme: light;
  --ps-bg:#f6f4fb; --ps-panel:#ffffff; --ps-panel-2:#f0ecf9;
  --ps-ink:#14121a; --ps-muted:#6c6480; --ps-line:#e7e2f1;
  --ps-shadow:0 6px 22px rgba(60,40,120,.12);
}
* { box-sizing:border-box; }
body.ps {
  margin:0; background:var(--ps-bg); color:var(--ps-ink);
  font-family:var(--ps-font); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; padding:20px; max-width:1040px; margin-inline:auto;
}
@media (prefers-reduced-motion:no-preference){ .ps-pop{ animation:ps-pop .35s ease; } }
@keyframes ps-pop { from{ transform:scale(.96); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* Brand header */
.ps-appbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.ps-logo { width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,var(--ps-accent),var(--ps-pink)); box-shadow:var(--ps-shadow); }
.ps-appbar h1 { font-size:20px; margin:0; font-weight:700; letter-spacing:-.2px; }
.ps-appbar .ps-sub { color:var(--ps-muted); font-size:13px; }
.ps-spacer { flex:1; }

/* Cards & layout */
.ps-card { background:var(--ps-panel); border:1px solid var(--ps-line); border-radius:var(--ps-r);
  padding:18px 20px; margin:var(--ps-gap) 0; box-shadow:var(--ps-shadow); }
.ps-card h2 { font-size:15px; margin:0 0 12px; color:var(--ps-ink); }
.ps-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ps-grid { display:grid; gap:var(--ps-gap); grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

/* KPI */
.ps-kpi { display:inline-block; min-width:140px; margin:6px 16px 6px 0; }
.ps-kpi .v { font-size:26px; font-weight:750; letter-spacing:-.5px; }
.ps-kpi .l { color:var(--ps-muted); font-size:12px; }

/* Buttons — touch friendly */
.ps-btn { min-height:var(--ps-touch); padding:0 18px; border:0; border-radius:var(--ps-r-sm);
  background:var(--ps-accent); color:var(--ps-accent-ink); font:600 15px var(--ps-font);
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:filter .15s, transform .05s; }
.ps-btn:hover { filter:brightness(1.08); } .ps-btn:active { transform:translateY(1px); }
.ps-btn:disabled { opacity:.45; cursor:not-allowed; }
.ps-btn.ghost { background:transparent; color:var(--ps-ink); border:1px solid var(--ps-line); }
.ps-btn.good { background:var(--ps-good); } .ps-btn.warn { background:var(--ps-warn); color:#3a2600; }
.ps-btn.sm { min-height:36px; padding:0 12px; font-size:13px; }

/* Inputs */
.ps-input { min-height:var(--ps-touch); padding:0 12px; border-radius:var(--ps-r-sm);
  border:1px solid var(--ps-line); background:var(--ps-panel-2); color:var(--ps-ink); font-size:15px; }
.ps-input:focus { outline:2px solid var(--ps-accent); outline-offset:1px; }
.ps-label { color:var(--ps-muted); font-size:12px; display:block; margin-bottom:4px; }

/* Pills / status dots */
.ps-pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.ps-pill.good { background:color-mix(in srgb,var(--ps-good) 22%,transparent); color:var(--ps-good); }
.ps-pill.warn { background:color-mix(in srgb,var(--ps-warn) 22%,transparent); color:var(--ps-warn); }
.ps-pill.bad  { background:color-mix(in srgb,var(--ps-bad) 22%,transparent);  color:var(--ps-bad); }
.ps-dot { width:11px; height:11px; border-radius:50%; background:var(--ps-bad); display:inline-block; transition:background .3s; }
.ps-dot.on { background:var(--ps-good); }

/* Tables */
.ps-table { width:100%; border-collapse:collapse; font-size:13px; }
.ps-table th, .ps-table td { padding:8px 10px; border-bottom:1px solid var(--ps-line); text-align:left; }
.ps-table th { color:var(--ps-muted); font-weight:600; }
.ps-table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* Helpers */
.ps-muted { color:var(--ps-muted); font-size:12px; }
.ps-ok { color:var(--ps-good); } .ps-warnt { color:var(--ps-warn); } .ps-badt { color:var(--ps-bad); }
.ps-theme-toggle { cursor:pointer; }

/* ===================================================================
   Shared additions — design_666 handoff §1.3 (2026-08-09)
   Rules that were missing from BOTH the design screens and the shipped
   app, so no design->build sync would ever surface them. Selectors below
   are the ones this codebase actually uses (#aurora .a/.b/.c, .blob,
   .orb) — the handoff assumed a `.ps-orb` class that does not exist here.
   =================================================================== */

/* 1 — Visible keyboard focus.
   Before this, only admin/pos/waiter declared it privately; the other six
   screens had nothing. It matters most where you would least expect it: a
   cashier at a till with a USB keyboard, and an accountant tabbing thirty
   back-office fields. :focus-visible shows the ring for keyboard users
   only, so touch and mouse are unaffected. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ps-accent, #7c5cff);
  outline-offset: 2px;
}
/* On the dark operator screens the purple ring sits close to the surface
   colour — add a halo so it reads against POS/KDS panels. Keyed to the
   app's own [data-theme] rather than the OS, because the KDS toggle can
   put a dark board on a light-mode tablet. */
:root[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .25);
}

/* 2 — Reduced motion.
   Blurred aurora orbs loop 14-28s forever on login, pos, ai-advisor,
   admin and waiter with no guard (kds and waiter already guard their
   own). On a wall tablet that is a permanently compositing layer behind
   the one screen in the building that must never drop a frame; on a phone
   it is a battery cost across a whole shift. Glass is a material — it
   does not need to move to read as glass. This freezes the motion and
   keeps every blur, tint and border intact. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3 — Operator screens never animate the backdrop, reduced-motion or not.
   class="ps-still" on <body> of pos.html, kds.html, ops-console.html. */
.ps-still #aurora .a, .ps-still #aurora .b, .ps-still #aurora .c,
.ps-still #aurora .blob, .ps-still .blob, .ps-still .orb,
.ps-still [class*="orb"] {
  animation: none !important;
}

/* 4 — Touch floor, for controls that fall under the 44px the rest of the
   suite respects — on the screens where hands are wet or gloved. */
.ps-touch { min-width: 44px; min-height: 44px; }

/* ============================================================================
   5 — Loading skeletons and announced toasts.

   Adopted from the design's "Living Motion" direction (UI Optimization Options,
   turn 2b) — but only the two parts that close a VERIFIED defect, and in the
   shared sheet rather than per screen:

     · skeletons  — the suite had ZERO. docs/UIUX-AUDIT.md claimed they shipped
                    in July; a grep across assets/ and all 25 screens returned 0.
     · toasts     — the suite had ZERO aria-live regions across 25 screens, so
                    every async outcome (sale posted, refund approved, import
                    committed, ZATCA run) was announced to sighted users only.

   NOT adopted: the design's `glowpulse ... infinite` on the Charge button
   (turn 2a). An 8-hour till must not carry a permanently pulsing pay button,
   and rule 2 above exists precisely to stop forever-animation. Glow here is a
   static focus treatment, not a loop.

   Both inherit the reduced-motion guard in rule 2 — no separate handling needed:
   the global rule clamps animation-iteration-count to 1. */

.ps-skeleton {
  border-radius: var(--ps-r-sm);
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.04) 63%);
  background-size: 200% 100%;
  animation: ps-shimmer 1.4s linear infinite;
  min-height: 14px;
}
.ps-skeleton + .ps-skeleton { margin-top: 8px; }
.ps-skeleton.line-sm { max-width: 40%; }
.ps-skeleton.block   { min-height: 62px; }
@keyframes ps-shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }

/* Toast host. Fixed, above the rail (z 50) and the command bar (z 70). */
#ps-toasts {
  position: fixed; inset-block-end: 18px; inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 90; pointer-events: none; padding: 0 14px;
}
.ps-toast {
  pointer-events: auto; max-width: min(520px, 92vw);
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: var(--ps-r-sm);
  background: var(--ps-panel); border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow); color: var(--ps-ink);
  font: 600 13px var(--ps-font); animation: ps-toast-in .18s ease both;
}
.ps-toast.ok  { border-color: var(--ps-good); }
.ps-toast.err { border-color: var(--ps-bad); }
.ps-toast .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ps-muted); }
.ps-toast.ok  .dot { background: var(--ps-good); }
.ps-toast.err .dot { background: var(--ps-bad); }
@keyframes ps-toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }