/* =====================================================================
   رنين / Pallet Drop — FLAT 2.0 PRODUCTION THEME
   Drop-in override for BOTH the worker PWA (css/styles.css) and the
   admin dashboard (admin/admin.css). Both base files are 100% token-
   driven, so this file re-maps the design tokens and neutralises the
   few gradient / glass-blur / glow rules that don't fit Flat 2.0.

   HOW TO INSTALL (load AFTER the existing stylesheet in each page):
     • Worker  index.html        →  <link rel="stylesheet" href="flat-theme.css">
     • Admin   admin/index.html   →  <link rel="stylesheet" href="../flat-theme.css">
   Put this file at the app root (next to index.html). Remove the two
   <link> tags to revert — nothing else changes.

   Signature: solid fills · hard "ledge" shadows on buttons/tiles ·
   NO gradients, NO backdrop-blur, NO colored glow. Cobalt primary,
   safety-amber accent, flat green/red status. Cairo type unchanged.
   ===================================================================== */

/* ============================ TOKENS ============================ */
/* ---- WORKER (css/styles.css vocabulary) + ADMIN (admin.css vocabulary),
        merged. Unused names on a given page are harmless. ---- */

:root {
  color-scheme: light;

  /* worker */
  --bg: #eef1f6;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #f3f5f9;
  --line: #e2e7ef;
  --txt: #17202e;
  --muted: #5a6b84;
  --primary: #2d5bff;
  --primary-d: #1e48d6;
  --primary-ink: #1e48d6;
  --accent: #ff8a00;
  --accent-ink: #c96b00;
  --danger: #f0453a;
  --warn: #d97a00;
  --warn-ink: #a9600a;
  --topbar-bg: #ffffff;
  --shadow-lg: 0 12px 28px -14px rgba(8, 12, 22, .3);
  --tab-active-bg: #e7edff;
  --tab-active-ring: rgba(45, 91, 255, .5);
  --radius: 16px;
  --on-primary: #ffffff;

  /* admin */
  --page: #eef1f6;
  --line-strong: #c2ccda;
  --ink: #17202e;
  --ink-2: #5a6b84;
  --ink-3: #8a97ac;
  --brand-g: #2d5bff;
  --brand-b: #2d5bff;
  --brand-ink: #1e48d6;
  --on-brand: #ffffff;
  --grad: #2d5bff;
  --good: #17a45c;
  --good-ink: #0f7d45;
  --info: #2d5bff;
  --info-ink: #1e48d6;
  --danger-ink: #cf3128;
  --good-bg: #ddf3e7;
  --warn-bg: #fff0db;
  --danger-bg: #fde4e2;
  --info-bg: #e7edff;
  --r-lg: 16px; --r-md: 12px; --r-sm: 10px;
  --shadow: 0 12px 28px -14px rgba(8, 12, 22, .3);
  --shadow-sm: 0 2px 8px -3px rgba(8, 12, 22, .3);
  --sheen: none;
  --glow-a: transparent;
  --glow-b: transparent;
  --bar-bg: #ffffff;
  --field-bg: #ffffff;
  --chart-bar: #2d5bff;
  --chart-grad-from: #2d5bff;
  --chart-grad-to: #2d5bff;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* worker */
  --bg: #0e1420;
  --bg-2: #182231;
  --card: #182231;
  --card-2: #212e42;
  --line: #2a374c;
  --txt: #eaf0f8;
  --muted: #9aa7bd;
  --primary: #5b82ff;
  --primary-d: #89a4ff;
  --primary-ink: #89a4ff;
  --accent: #ffb03a;
  --accent-ink: #ffc061;
  --danger: #ff5a4d;
  --warn: #ffb03a;
  --warn-ink: #ffc061;
  --topbar-bg: #182231;
  --shadow-lg: 0 14px 30px -14px rgba(2, 6, 23, .6);
  --tab-active-bg: rgba(91, 130, 255, .16);
  --tab-active-ring: rgba(91, 130, 255, .5);
  --on-primary: #0a1024;

  /* admin */
  --page: #0e1420;
  --line-strong: #3a4a63;
  --ink: #eaf0f8;
  --ink-2: #9aa7bd;
  --ink-3: #6c7a92;
  --brand-g: #5b82ff;
  --brand-b: #5b82ff;
  --brand-ink: #89a4ff;
  --on-brand: #0a1024;
  --grad: #5b82ff;
  --good: #2dc26e;
  --good-ink: #57d68d;
  --info: #5b82ff;
  --info-ink: #89a4ff;
  --danger-ink: #ff8177;
  --good-bg: rgba(45, 194, 110, .16);
  --warn-bg: rgba(255, 176, 58, .16);
  --danger-bg: rgba(255, 90, 77, .16);
  --info-bg: rgba(91, 130, 255, .16);
  --shadow: 0 14px 30px -14px rgba(2, 6, 23, .6);
  --shadow-sm: 0 2px 10px -4px rgba(2, 6, 23, .6);
  --bar-bg: #182231;
  --field-bg: #212e42;
  --chart-bar: #5b82ff;
  --chart-grad-from: #5b82ff;
  --chart-grad-to: #5b82ff;
}

/* ==================== WORKER PWA — flat overrides ==================== */

/* gradient wordmark → solid ink */
.logo-hero { background: none; -webkit-text-fill-color: currentColor; color: var(--primary); }

/* glassy sticky bar → solid, no blur */
#topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--topbar-bg); }

/* primary buttons: flat fill + hard ledge shadow, white ink (was dark-green) */
.btn-primary { color: var(--on-primary); box-shadow: 0 4px 0 var(--primary-ink); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-ink); }
.btn-primary:disabled { box-shadow: none; }

.take-img-btn { color: var(--on-primary); box-shadow: 0 3px 0 var(--primary-ink); }
.take-img-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-ink); }

/* swipe-to-confirm: flat fill + hard knob (was green gradient + glow) */
.swipe-fill { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.swipe-knob { color: var(--on-primary); box-shadow: 0 4px 0 var(--primary-ink); }
.swipe-confirm.cancel .swipe-fill { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.swipe-confirm.cancel .swipe-knob { box-shadow: 0 4px 0 var(--danger); }

.photo-preview.has-photo::after { background: var(--primary); color: var(--on-primary); }

/* account avatar: gradient → solid */
.acct-avatar { background: var(--primary); }

/* barcode / category chips: recolor off the hardcoded blue onto the token */
.chip { background: var(--tab-active-bg); color: var(--primary-ink); border-color: var(--tab-active-ring); }
.chip.color-chip { background: var(--tab-active-bg); color: var(--txt); border-color: var(--tab-active-ring); }

/* overlays: solid scrims, no glass-blur */
.img-modal { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 8, 18, .9); }
.modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 8, 18, .82); }
.facescan { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 8, 18, .9); }
.lock-overlay { background-image: none; }

/* ==================== ADMIN DASHBOARD — flat overrides ==================== */

/* kill the ambient brand glow + the card sheen (sheen token already none) */
.bg-glow { display: none; }

/* gradient wordmark → solid */
.brand-logo { background: none; -webkit-text-fill-color: currentColor; color: var(--brand-b); }

/* glassy top bar → solid, no blur */
.bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bar-bg); }

/* primary buttons: solid + hard ledge, white ink (was green gradient + glow) */
.btn.primary { background: var(--brand-b); color: var(--on-brand); box-shadow: 0 4px 0 var(--brand-ink); }
.btn.primary:hover { transform: none; box-shadow: 0 4px 0 var(--brand-ink); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--brand-ink); }
.btn.primary:disabled { box-shadow: none; }

/* completion ring: solid cobalt stroke instead of the SVG green→blue gradient */
.ring-fg { stroke: var(--brand-b); }

/* radio pills (checked): solid + hard ledge (was gradient + glow) */
.radio-pills input:checked + span { background: var(--brand-b); color: var(--on-brand); border-color: transparent; box-shadow: 0 3px 0 var(--brand-ink); }

/* progress fills → solid cobalt */
.bar-mini i { background: var(--brand-b); }
.dw-hist-row .bar i { background: var(--brand-b); }

/* store "health" bars: was an animated multi-hue gradient with sweep + glow.
   Flatten to a solid cobalt fill (green when complete), no motion. */
.sbar-track i { background: var(--brand-b); background-size: auto; box-shadow: none; animation: none; }
.sbar-track i::after { display: none; }
.sbar.done .sbar-track i { background: var(--good); box-shadow: none; }
.d-active { background: var(--brand-b); }

/* overlays: solid scrims, no glass-blur */
.modal { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 8, 18, .9); }
.drawer-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 8, 18, .7); }