/* ════════════════════════════════════════════════════════════════════════════
   Pumo Cam — the Pumo look (Pumo design system V2.1, console/src/index.css in
   the Pumo repo). One family, one look: a warm paper ground with three soft
   colour blooms and film grain, calm glass cards (radius 40, a 1 px rim), pale
   trays inside them, black active pills, thin Urbanist numerals, Alexandria
   titles, IBM Plex Sans Arabic text. Colour only where it means something:
   attention (a queue, an alert), missed / failing, one trend, and lime for
   Pumo itself.

   This file sits in the `pumo` layer, after app.css's components and pages and
   before utilities / motion (see the @layer order at the top of app.css), so it
   re-skins the existing class names without touching page markup. The palette
   hexes stay (js/palette.js reads them for the video overlays and heat maps);
   they now hold Pumo's colours.
   ════════════════════════════════════════════════════════════════════════════ */
@layer pumo {
  :root {
    --sand: #8C8A84;        /* neutral marks */
    --terracotta: #F0553D;  /* Pumo coral: attention, the counting line, queues */
    --burgundy: #AB2821;    /* missed / failing */
    --olive: #1FA35C;       /* good: people, OK, live */
    --brass: #D7FE62;       /* Pumo lime: staff marks, Pumo itself */
    --cream: #F4F2EE;
    --charcoal: #151514;
    --paper: #F4F2EE;

    --font-ui: "IBM Plex Sans Arabic", "Urbanist", "Geeza Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
    --font-display: "Alexandria", "IBM Plex Sans Arabic", "Geeza Pro", sans-serif;
    --font-num: "Urbanist", "IBM Plex Sans Arabic", system-ui, sans-serif;

    --r-card: 40px; --r-in: 28px; --r-row: 16px;
    --pad: 24px;
    --lime: #D7FE62; --lime-ink: #171717;
    --coral: #F0553D;
    --rail-w: 236px;
    --rail-row: 44px;
    --rail-step: 46px;
    --brass-line: linear-gradient(90deg, transparent, transparent);
    --brass-edge: transparent;
  }

  :root, [data-theme="light"] {
    --bg: #F4F2EE;
    --rail-bg: rgb(255 255 255 / .72);
    --surface: #FFFFFF;
    --surface-2: #F5F4F1;
    --surface-3: #ECEBE7;
    --chip: #F1F0EC;
    --field: #F5F4F1;
    --line: rgb(21 21 20 / .12);
    --line-strong: rgb(21 21 20 / .18);
    --rim: rgb(21 21 20 / .07);
    --fg: #151514;
    --fg-2: #666664;
    --fg-3: rgb(21 21 20 / .42);
    --dot: #151514;
    --ink: #121212; --on-ink: #FFFFFF;
    --accent: #121212; --accent-top: #121212; --accent-deep: #121212;
    --accent-ink: #151514;
    --accent-soft: rgb(215 254 98 / .45);
    --on-accent: #FFFFFF;
    --ok: #1FA35C; --ok-ink: #0B5E2F; --ok-soft: rgb(31 163 92 / .13);
    --bad: #AB2821; --bad-ink: #AB2821; --bad-soft: rgb(171 40 33 / .1);
    --warn-ink: #8E4506; --warn-soft: rgb(240 140 40 / .16);
    --neutral-soft: rgb(21 21 20 / .06);
    --chart-a: rgb(21 21 20 / .9); --chart-b: rgb(21 21 20 / .16); --chart-line: #151514;
    --focus: #121212; --glint: rgb(18 18 18 / .12); --shade: rgb(60 40 20);
    --shadow-1: 0 1px 1px rgb(60 40 20 / .05), 0 10px 24px -18px rgb(60 40 20 / .3);
    --shadow-2: 0 1px 1px rgb(60 40 20 / .05), 0 16px 36px -22px rgb(60 40 20 / .13);
    --shadow-3: 0 2px 4px rgb(60 40 20 / .06), 0 30px 60px -28px rgb(60 40 20 / .3);
    --inner-hl: inset 0 1px 0 rgb(255 255 255 / .7);
    --backdrop: rgb(244 242 238 / .45);
    --bloom-1: rgb(255 226 194 / .95); --bloom-2: rgb(222 235 199 / .75); --bloom-3: rgb(222 229 255 / .7);
    --glass-fill: rgb(255 255 255 / .72);
    --glass-strong-fill: rgb(255 255 255 / .86);
    --glass-card-fill: rgb(255 255 255 / .9);
    --glass-rim: rgb(255 255 255 / .55);
    --glass-hi: rgb(255 255 255 / .7);
  }

  [data-theme="dark"] {
    --bg: #0F1012;
    --rail-bg: rgb(24 25 28 / .66);
    --surface: #18191C;
    --surface-2: #232428;
    --surface-3: #1D1E21;
    --chip: #28292D;
    --field: #232428;
    --line: rgb(242 242 236 / .12);
    --line-strong: rgb(242 242 236 / .18);
    --rim: rgb(255 255 255 / .07);
    --fg: #F2F2EC;
    --fg-2: #9E9E9C;
    --fg-3: rgb(242 242 236 / .4);
    --dot: #F2F2EC;
    --ink: #F2F2EC; --on-ink: #121212;
    --accent: #F2F2EC; --accent-top: #F2F2EC; --accent-deep: #F2F2EC;
    --accent-ink: #D7FE62;
    --accent-soft: rgb(215 254 98 / .16);
    --on-accent: #121212;
    --ok: #4CC989; --ok-ink: #6FD9A0; --ok-soft: rgb(76 201 137 / .16);
    --bad: #FF7A70; --bad-ink: #FF8F86; --bad-soft: rgb(255 122 112 / .14);
    --warn-ink: #F0A968; --warn-soft: rgb(240 169 104 / .14);
    --neutral-soft: rgb(242 242 236 / .06);
    --chart-a: rgb(242 242 236 / .62); --chart-b: rgb(242 242 236 / .16); --chart-line: #D7FE62;
    --focus: #D7FE62; --glint: rgb(215 254 98 / .2); --shade: rgb(0 0 0);
    --shadow-1: 0 1px 1px rgb(0 0 0 / .3), 0 10px 24px -16px rgb(0 0 0 / .55);
    --shadow-2: 0 1px 1px rgb(0 0 0 / .3), 0 16px 36px -22px rgb(0 0 0 / .55);
    --shadow-3: 0 2px 6px rgb(0 0 0 / .4), 0 40px 80px -30px rgb(0 0 0 / .8);
    --inner-hl: inset 0 1px 0 rgb(255 255 255 / .06);
    --backdrop: rgb(15 16 18 / .5);
    --bloom-1: rgb(58 45 24 / .9); --bloom-2: rgb(33 43 18 / .8); --bloom-3: rgb(23 28 50 / .8);
    --glass-fill: rgb(24 25 28 / .66);
    --glass-strong-fill: rgb(24 25 28 / .82);
    --glass-card-fill: rgb(24 25 28 / .88);
    --glass-rim: rgb(255 255 255 / .08);
    --glass-hi: rgb(255 255 255 / .06);
  }

  @media (max-width: 699px) {
    :root { --r-card: 32px; --r-in: 22px; --r-row: 12px; --pad: 18px; }
  }

  /* ── base: the ground (three fixed blooms + grain) ─────────────────────── */
  html { font-family: var(--font-ui); letter-spacing: 0; }
  html[lang="ar"] { line-height: 1.65; }
  body, [data-theme="dark"] body { background: var(--bg); position: relative; isolation: isolate; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(62% 58% at 88% 4%, var(--bloom-1), transparent 70%),
      radial-gradient(48% 46% at 8% 52%, var(--bloom-2), transparent 70%),
      radial-gradient(56% 50% at 70% 104%, var(--bloom-3), transparent 70%);
  }
  html[dir="ltr"] body::before {
    background:
      radial-gradient(62% 58% at 12% 4%, var(--bloom-1), transparent 70%),
      radial-gradient(48% 46% at 92% 52%, var(--bloom-2), transparent 70%),
      radial-gradient(56% 50% at 30% 104%, var(--bloom-3), transparent 70%);
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em; }
  ::selection { background: rgb(215 254 98 / .5); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg-2) 25%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
  * { scrollbar-color: color-mix(in srgb, var(--fg-2) 30%, transparent) transparent; }
  .num, .tabular, td.num { font-family: var(--font-num); font-feature-settings: "tnum" 1, "lnum" 1; }

  /* ── shell: a floating glass rail, glass bars ──────────────────────────── */
  .rail {
    margin: 10px; margin-inline-end: 0; padding: 16px 10px 12px;
    border: 0; border-radius: var(--r-card);
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 var(--glass-hi), 0 18px 40px -26px rgb(0 0 0 / .45);
    scrollbar-width: none;
  }
  .rail-brand { padding: 4px 8px 18px; margin-bottom: 4px; }
  .rail-brand::after { display: none; }
  .rail-brand img { width: 34px; height: 34px; border-radius: 50%; box-shadow: none; }
  .rail-brand-txt b { font: 500 17px/1.2 var(--font-display); }
  .rail-ind { border-radius: 999px; background: var(--ink); box-shadow: 0 10px 22px -14px rgb(0 0 0 / .45); }
  .rail-ind::before { display: none; }
  .rail-row { border-radius: 999px; font-size: 14px; font-weight: 400; color: color-mix(in srgb, var(--fg) 78%, transparent); padding-inline: 6px 12px; }
  .rail-row::before { background: color-mix(in srgb, var(--fg) 5%, transparent); }
  .rail-nav .rail-row[aria-current="page"] { color: var(--on-ink); }
  .rail-ic { width: 32px; height: 32px; border-radius: 50%; }
  .rail-ic svg { stroke-width: 1.6; }
  .rail-count { font: 600 11.5px/1 var(--font-num); color: var(--on-ink); background: var(--ink); box-shadow: none; }
  .rail-row[aria-current="page"] .rail-count:not(.bad) { color: var(--ink); background: var(--on-ink); }
  .rail-count.bad { color: #fff; background: var(--coral); box-shadow: none; }
  .rail-me { border-radius: 999px; background: color-mix(in srgb, var(--fg) 4%, transparent); box-shadow: inset 0 0 0 1px var(--rim); }
  .rail-me .avatar, [data-theme="dark"] .rail-me .avatar { color: var(--lime-ink); background: var(--lime); box-shadow: none; }

  .topbar { padding: 14px 28px 8px; }
  .topbar-title h1 { font: 400 17px/1.3 var(--font-display); letter-spacing: -.005em; }
  .topbar-sub { color: var(--fg-2); }
  .navpills { padding: 2px 28px 12px; border-bottom: 0; gap: 6px; }
  .navpill { height: 40px; padding-inline: 14px 16px; font-size: 13px; font-weight: 400; color: var(--fg-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  .navpill:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 3%, transparent); transform: none; }
  .navpill[aria-current="page"] { color: var(--on-ink); background: var(--ink); box-shadow: none; }
  .main { padding: 18px 32px 48px; }

  .mbar, [data-theme="dark"] .mbar {
    gap: 4px; padding: 6px; border-radius: 999px;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 var(--glass-hi), 0 18px 36px -18px rgb(0 0 0 / .45);
  }
  .mbar-btn { border-radius: 22px; font-size: 11.5px; color: color-mix(in srgb, var(--fg) 62%, transparent); }
  .mbar-btn:hover { color: var(--fg); }
  .mbar-btn[aria-current="page"] { color: var(--on-ink); background: var(--ink); box-shadow: none; }
  .mbar-btn[aria-current="page"]::after { display: none; }
  .mbar-btn .badge-dot { background: var(--coral); box-shadow: 0 0 0 2px var(--surface); }
  .mbar-btn[aria-current="page"] .badge-dot { background: var(--coral); box-shadow: 0 0 0 2px var(--ink); }

  /* ── pages ─────────────────────────────────────────────────────────────── */
  .pg { gap: 22px; max-width: 1320px; }
  .sec { gap: 12px; }
  .sec-head { padding-inline: 4px; align-items: baseline; }
  .sec-head h2, .sec-head h3 { font: 300 20px/1.3 var(--font-display); letter-spacing: -.005em; text-transform: none; color: var(--fg); }
  .sec-head h2::before, .sec-head h3::before { display: none; }
  .sec-head p, .sec-head small { color: var(--fg-2); }
  .dash-title { font: 300 clamp(26px, 3vw, 40px)/1.25 var(--font-display); letter-spacing: -.01em; }

  /* a calm card: 90 % white glass over the blooms; nested cards go solid */
  .card, [data-theme="dark"] .card {
    border-radius: var(--r-card); padding: var(--pad);
    background: var(--glass-card-fill);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--rim);
  }
  .card::after { display: none; }
  .card-tight { padding: 14px 16px; border-radius: var(--r-in); }
  :where(.card-tight, .card .card) { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .card h3 { font: 400 16px/1.35 var(--font-display); letter-spacing: -.005em; }
  .card h4 { font-family: var(--font-display); font-weight: 400; }
  .card-head { min-height: 44px; margin-bottom: 12px; }
  .card-sub { font-size: 13px; color: var(--fg-2); }
  h4.card-sub { font-family: var(--font-ui); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  .sep { height: 0; background: none; border-top: 1px dashed var(--line); }

  .tile { border-radius: var(--r-card); }
  .tile::before { display: none; }
  .tile-top { font-size: 13px; font-weight: 400; color: var(--fg-2); }
  .splitnum { font-family: var(--font-num); font-weight: 200; letter-spacing: -.02em; }
  .splitnum-unit::after, .tile-v > span::after { display: none; }
  .tiles-label { font-weight: 400; font-size: 12px; }
  .ttile { border-radius: var(--r-row); background: var(--surface-2); box-shadow: none; }
  .mini, button.mini { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--chip); box-shadow: none; color: var(--fg-2); }
  .mini b { font-family: var(--font-num); font-weight: 500; color: var(--fg); }
  button.mini:hover { transform: none; background: color-mix(in srgb, var(--fg) 7%, var(--chip)); box-shadow: none; }

  /* ── fields ────────────────────────────────────────────────────────────── */
  .fld-l { font-weight: 400; }
  .inp { min-height: 42px; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
  .inp:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
  .inp:focus { box-shadow: 0 0 0 2px var(--focus); }
  .inp-sm { min-height: 34px; border-radius: 12px; }
  input[type="checkbox"], input[type="radio"], .range { accent-color: var(--ink); }
  [data-theme="dark"] :is(input[type="checkbox"], input[type="radio"], .range) { accent-color: var(--lime); }
  input[type="file"].inp::file-selector-button { border-radius: 999px; background: var(--chip); box-shadow: none; }

  /* ── buttons: black pill · outlined · text · lime · deep red ───────────── */
  .btn {
    height: 40px; padding: 0 18px; border-radius: 999px;
    font-size: 13px; font-weight: 500; letter-spacing: 0;
    color: var(--on-ink); background: var(--ink);
    --btn-shadow: none; --btn-bloom: 0 10px 22px -12px rgb(0 0 0 / .5); --btn-edge: 0 0 0 0 transparent; --sheen: transparent;
    box-shadow: none;
  }
  .btn:hover { transform: none; box-shadow: var(--btn-bloom); }
  .btn:active { transform: scale(.98); box-shadow: none; }
  .btn::before { display: none; }
  .btn:disabled { opacity: .45; box-shadow: none; }
  .btn svg { stroke-width: 1.6; }
  .btn[aria-busy="true"]::after { border-color: color-mix(in srgb, var(--on-ink) 30%, transparent); border-top-color: var(--on-ink); }
  .btn.is-done::after { border-color: var(--on-ink); }
  .btn-soft { color: var(--fg); background: transparent; --btn-shadow: inset 0 0 0 1px var(--line); --btn-bloom: inset 0 0 0 1px var(--line-strong); box-shadow: inset 0 0 0 1px var(--line); }
  .btn-soft:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
  .btn-ghost { color: color-mix(in srgb, var(--fg) 72%, transparent); background: transparent; box-shadow: none; padding-inline: 12px; --btn-shadow: none; --btn-bloom: none; }
  .btn-ghost:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); box-shadow: none; }
  .btn-danger { color: #fff; background: var(--bad); --btn-shadow: none; box-shadow: none; }
  [data-theme="dark"] .btn-danger { color: #121212; }
  .btn-lime { color: var(--lime-ink); background: var(--lime); box-shadow: none; }
  .btn-sm { height: 34px; padding: 0 14px; }

  .ibtn { border-radius: 50%; color: var(--fg); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  .ibtn:hover { color: var(--on-ink); background: var(--ink); transform: none; box-shadow: none; }
  .ibtn:hover svg { transform: none; }
  .ibtn-sm { border-radius: 50%; }
  .ibtn[aria-pressed="true"] { color: var(--on-ink); background: var(--ink); box-shadow: none; }
  .ibtn-hud, .ibtn-hud:hover { box-shadow: none; }
  .pw .ibtn, .pw .ibtn:hover { color: var(--fg-2); background: transparent; box-shadow: none; }
  .pw .ibtn:hover { color: var(--fg); }

  /* ── chips, tabs, tables, rows ─────────────────────────────────────────── */
  .chip { border-radius: 999px; background: var(--chip); box-shadow: none; color: var(--fg-2); }
  .chip b { font-weight: 500; }
  .chip-ok, .chip-live { color: var(--ok-ink); background: var(--ok-soft); box-shadow: none; }
  .chip-warn { color: var(--warn-ink); background: var(--warn-soft); box-shadow: none; }
  .chip-bad { color: var(--bad-ink); background: var(--bad-soft); box-shadow: none; }
  .chip-ink { color: var(--on-ink); background: var(--ink); box-shadow: none; }
  .utabs { gap: 6px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .utab { height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 400; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
  .utab:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 3%, transparent); }
  .utab[aria-selected="true"] { color: var(--on-ink); background: var(--ink); box-shadow: none; }
  .utab[aria-selected="true"]::after { display: none; }
  .tbl th { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-2); border-bottom: 1px solid var(--line); }
  .tbl td { border-bottom: 1px dashed var(--line); }
  .tbl tbody tr:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
  .row { border-radius: var(--r-row); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rim); }
  .card .row { background: var(--surface-2); box-shadow: none; }
  .note { border-radius: var(--r-row); }

  /* ── overlays: strong glass dialogs, dark-glass toasts ─────────────────── */
  .modal {
    border-radius: var(--r-card); padding: var(--pad);
    background: var(--glass-strong-fill);
    -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
    box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 var(--glass-hi), 0 40px 80px -40px rgb(0 0 0 / .5);
  }
  .modal::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .modal-head h3 { font: 400 17px/1.3 var(--font-display); }
  .toast, [data-theme="dark"] .toast {
    border-radius: 999px; color: #F2F2EC; background: rgb(18 18 18 / .82);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .08);
  }
  .toast::before { display: none; }
  .apop, [data-theme="dark"] .apop {
    border-radius: var(--r-in);
    background: var(--glass-strong-fill);
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--glass-rim);
  }
  .apop::before { inset-block: 14px; width: 4px; border-radius: 4px; inset-inline-start: 6px; background: var(--coral); }
  .apop::after { display: none; }
  .apop-critical::before { background: var(--bad); }
  .avatar { font-family: var(--font-num); }

  /* phones and weak devices: no blur, a solid 96 % fill (Pumo's .lite rule) */
  @media (max-width: 699px), (prefers-reduced-transparency: reduce) {
    .card, .rail, .mbar, .modal, .apop { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .card, [data-theme="dark"] .card { background: color-mix(in srgb, var(--surface) 96%, transparent); }
  }
}

/* the tabs of the current section (shell.js renderSubnav) */
@layer pumo {
  .subnav { margin: 0 auto 18px; max-width: 1320px; }
  .subnav[hidden] { display: none; }
}
@layer pumo {
  .utab-more { color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); border: 1px dashed transparent; }
}
@layer pumo {
  .attn .list { gap: 8px; }
  .attn-row { width: 100%; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; gap: 12px; }
  .attn-row .row-main { flex: 1; }
  .attn-ok { cursor: default; }
}
@layer pumo {
  /* phones: six even dock buttons, and the sound switch as a round bell */
  @media (max-width: 699px) {
    .mbar { gap: 2px; }
    .mbar-btn { min-width: 0; flex: 1 1 0; padding-inline: 2px; font-size: 10.5px; }
    .mbar-btn > span { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
    .sound-unlock > span:last-child { display: none; }
    .sound-unlock { width: 40px; height: 40px; padding: 0; justify-content: center; }
  }
}