/*
 * theme.css — AydenAI shared BRAND theme (single source of truth)
 * ════════════════════════════════════════════════════════════════════════════
 * Owns the things that should be identical across every suite app:
 *   · accent colour + font family
 *   · the mango background (via the --glass-* vars that glass.css consumes)
 *   · the nav bar treatment
 *   · the logo mark behaviour
 *   · the primary / "Generate" button
 *
 * Each app's own App.css still owns its app-specific component styling and its
 * extra tokens (--surface3, --green, --chart-tick, etc.) — this file only sets
 * the shared brand layer, so importing it can't remove tokens an app relies on.
 *
 * USAGE — import in each app's App.css, AFTER glass.css:
 *     @import '../../shared/glass.css';
 *     @import '../../shared/theme.css';
 * And remove the app's local --accent / --font-* / --font overrides from its
 * :root so this file's values win.
 * ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — indigo is ACTION (buttons, links, focus, selected). Never the
     backdrop. See docs/BRAND.md. Kept in step with mobile theme.tsx `accent`. */
  --accent: #5b5bd6;
  --accent-dim:  rgba(91, 91, 214, 0.12);
  --accent-glow: rgba(91, 91, 214, 0.18);
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'Manrope', sans-serif;
  --font:      'Manrope', system-ui, sans-serif; /* haccp uses --font */

  /* Mango background — ATMOSPHERE, never action. Consumed by glass.css
     .bg-blob-* / .bg-canvas.
     The two themes are tuned independently — alpha is NOT comparable across
     them, because the substrate differs. Dark sits on near-black #07071a,
     where mango *emits*: it was cut to ~0.22 (from ~0.50) because the glow
     was reading as glare behind the glass. Light sits on sand #e6d5bd,
     where mango *stains* rather than glows, so it needs more alpha to
     register at all — hence light's numbers are still the higher pair, and
     it also shifts to paler, yellower stops (#fcd34d/#f97316/#fda4af).
     Ember is the darkest chip in the set and smudges here — lowest alpha of
     the four in light.
     Light's brightness lives in the BASE, not the blobs: #f4e8d8 → #e6d5bd is
     what actually darkened it. Cutting blob alpha alone makes light paler by
     exposing more bare ground. See docs/BRAND.md. */
  --glass-accent:    #5b5bd6;
  --glass-blob-1:    rgba(251, 146, 60, 0.25);
  --glass-blob-2:    rgba(251, 191, 36, 0.22);
  --glass-blob-3:    rgba(234, 88,  12, 0.22);
  --glass-blob-4:    rgba(251, 113, 133, 0.20);
  --glass-blob-base: #07071a;

  --glass-blob-1-light: rgba(251, 146, 60, 0.24);
  --glass-blob-2-light: rgba(252, 211, 77, 0.22);
  --glass-blob-3-light: rgba(249, 115, 22, 0.16);
  --glass-blob-4-light: rgba(253, 164, 175, 0.20);
  --glass-blob-base-light: #e6d5bd;
}

/* ── Nav bar: frosted glass over the mango backdrop ──────────────────────── */
.glass-app-nav {
  background: rgba(13, 16, 22, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 6px 24px -8px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .glass-app-nav {
  background: rgba(236, 240, 246, 0.66);
  border-bottom: 1px solid rgba(150, 165, 188, 0.40);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55), 0 6px 24px -10px rgba(40, 55, 80, 0.18);
}

/* Suite nav links + wordmark use the brand font (glass.css hardcodes Nunito) */
.suite-nav-link { font-family: 'Manrope', sans-serif; }
.app-wordmark   { font-family: 'Manrope', sans-serif; letter-spacing: -0.01em; }

/* Active suite-nav link — mango, and the ONE sanctioned exception to "mango is
   never a control" (docs/BRAND.md rule 3). This is a *selected* state, not an
   action: it marks where you already are, it isn't a thing you click to do
   something. It's the same distinction native draws with `accentBlue`.
   Indigo stays reserved for real actions. Every app inherits this — do not
   re-add per-app active colours (analytics/payroll/break each had their own). */
.suite-nav-link.active {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.32);
  background: rgba(251, 146, 60, 0.10);
}
/* The sand ground needs a darker mango: #fb923c on it is ~2:1 and unreadable. */
[data-theme="light"] .suite-nav-link.active {
  color: #c2410c;
  border-color: rgba(194, 65, 12, 0.30);
  background: rgba(251, 146, 60, 0.12);
}

/* ── Nav user chip: avatar + name, opens the account menu (shared NavUser.jsx) ─
   The menu folds together the avatar picker, the light/dark theme toggle and
   sign out, so app headers no longer carry their own theme / sign-out buttons. */
.nav-user {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px 0 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nav-user-trigger:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.nav-user-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(91, 91, 214, 0.3));
}
.nav-user-caret {
  color: var(--text-dim, rgba(255, 255, 255, 0.55));
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.nav-user-caret.open { transform: rotate(180deg); }
[data-theme="light"] .nav-user-trigger:hover { background: rgba(30, 41, 59, 0.05); border-color: rgba(120, 130, 170, 0.25); }
/* ── Store picker ──────────────────────────────────────────────────────────
   Header store switcher (shared/StorePicker.jsx). Only rendered when the user
   can see more than one store, so it is invisible for single-store staff. It
   borrows .nav-user-caret and the account menu's opaque .glass-modal surface so
   the two header chips read as one control. */
.store-picker { position: relative; display: flex; align-items: center; }
.store-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  max-width: 190px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: none;
  color: var(--text, #e4e4e7);
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.store-picker-trigger:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); }
.store-picker-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(91, 91, 214, 0.3));
}
[data-theme="light"] .store-picker-trigger { border-color: rgba(120, 130, 170, 0.28); }
[data-theme="light"] .store-picker-trigger:hover { background: rgba(30, 41, 59, 0.05); border-color: rgba(120, 130, 170, 0.45); }
.store-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-picker-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 244px;
  padding: 12px;
  border-radius: 14px;
}
.store-picker-menu.glass-modal {
  background: #14141f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="light"] .store-picker-menu.glass-modal { background: #fbf6ee; }
/* Same reason as .nav-user-menu below: stay a dropdown on phones instead of
   collapsing into glass.css's full-width bottom sheet. */
@media (max-width: 768px) {
  .store-picker-menu.glass-modal {
    width: min(244px, calc(100vw - 32px));
    max-width: none;
    max-height: none;
    border-radius: 14px;
    padding-top: 12px;
    overflow-y: visible;
  }
  .store-picker-menu.glass-modal::before { content: none; }
  .store-picker-name { display: none; }
  .store-picker-trigger { padding: 0 8px; }
}
.store-picker-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--text, #e4e4e7);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.store-picker-opt:hover { background: rgba(255, 255, 255, 0.07); }
[data-theme="light"] .store-picker-opt:hover { background: rgba(30, 41, 59, 0.06); }
.store-picker-opt.active { color: var(--accent, #5b5bd6); }
.store-picker-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Account menu (avatar picker + theme + sign out) */
.nav-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 268px;
  padding: 14px;
  border-radius: 14px;
}
/* Opaque account menu — override .glass-modal so nav content doesn't bleed through */
.nav-user-menu.glass-modal {
  background: #14141f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="light"] .nav-user-menu.glass-modal {
  background: #fbf6ee;
}
/* glass.css turns .glass-modal into a full-width bottom sheet under 768px. This
   menu only borrows .glass-modal for its surface — it stays an absolutely
   positioned dropdown, so width:100% resolves against the chip it is anchored
   in (~80px) rather than the viewport, crushing every label onto its own line.
   Keep it a dropdown on phones, and drop the sheet's drag-handle affordance. */
@media (max-width: 768px) {
  .nav-user-menu.glass-modal {
    width: min(268px, calc(100vw - 32px));
    max-width: none;
    max-height: none;
    border-radius: 14px;
    padding-top: 14px;
    overflow-y: visible;
  }
  .nav-user-menu.glass-modal::before { content: none; }
}
.nav-user-menu-title {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim, rgba(255, 255, 255, 0.6));
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Single horizontal strip — scrolls sideways so the picker stays one row tall
   instead of a tall 4x4 grid pushing the rest of the menu down. */
.nav-user-menu-grid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.nav-user-menu-grid::-webkit-scrollbar { height: 5px; }
.nav-user-menu-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
[data-theme="light"] .nav-user-menu-grid::-webkit-scrollbar-thumb { background: rgba(30, 41, 59, 0.18); }
.nav-user-menu-opt {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}
.nav-user-menu-opt:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.06);
}
.nav-user-menu-opt.active {
  border-color: var(--accent, #5b5bd6);
  background: var(--accent-dim, rgba(91, 91, 214, 0.12));
}
.nav-user-menu-initials {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 0;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text, rgba(255, 255, 255, 0.9));
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nav-user-menu-initials:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .nav-user-menu-opt:hover { background: rgba(30, 41, 59, 0.05); }
[data-theme="light"] .nav-user-menu-initials {
  border-color: rgba(30, 41, 59, 0.14);
  background: rgba(30, 41, 59, 0.04);
}
[data-theme="light"] .nav-user-menu-initials:hover { background: rgba(30, 41, 59, 0.09); }
.nav-user-name {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, rgba(255, 255, 255, 0.92));
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-menu-divider {
  height: 1px;
  margin: 12px -2px;
  background: rgba(255, 255, 255, 0.1);
}
/* Version line at the foot of the account menu. Deliberately quiet — it is a
   reference detail, not an action, so it sits below Sign out and recedes. */
.nav-user-menu-version {
  margin-top: 10px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.32);
  user-select: text;
}
.nav-user-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nav-user-menu-label {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, rgba(255, 255, 255, 0.9));
}
.nav-user-theme-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-user-theme-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text-dim, rgba(255, 255, 255, 0.55));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-user-theme-opt:hover { color: var(--text, rgba(255, 255, 255, 0.9)); }
.nav-user-theme-opt.active {
  background: var(--accent, #5b5bd6);
  color: #fff;
}
.nav-user-theme-opt:disabled { opacity: 0.45; cursor: default; }
/* The same segmented control carrying words instead of a 14px icon — the fixed
   34px above is sized for the sun/moon glyphs and clips "Off". */
.nav-user-theme-opt.is-text {
  width: auto;
  padding: 0 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
}
/* Explanatory line under a menu row. Quiet, but it has to be readable: this is
   where the two-step toggle says it locks you out of the mobile app. */
.nav-user-menu-hint {
  margin-top: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-dim, rgba(255, 255, 255, 0.55));
}
.nav-user-menu-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.nav-user-menu-signout:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.5);
}
.nav-user-menu-signout:active { transform: translateY(1px); }
[data-theme="light"] .nav-user { border-left-color: rgba(120, 130, 170, 0.25); }
[data-theme="light"] .nav-user-menu-divider { background: rgba(30, 41, 59, 0.1); }
[data-theme="light"] .nav-user-menu-version { color: rgba(30, 41, 59, 0.38); }
[data-theme="light"] .nav-user-theme-seg {
  background: rgba(30, 41, 59, 0.05);
  border-color: rgba(120, 130, 170, 0.28);
}
[data-theme="light"] .nav-user-menu-signout {
  border-color: rgba(220, 70, 70, 0.35);
  background: rgba(220, 70, 70, 0.08);
  color: #dc4646;
}
[data-theme="light"] .nav-user-menu-signout:hover {
  background: rgba(220, 70, 70, 0.15);
}

/* ── Header logo lockup (shared/HomeLink.jsx) ─────────────────────────────────
   Was hand-rolled in all eight app headers with the same five declarations and
   three small drifts (one gap:6px, two missing flex-shrink, three missing
   colour). One rule now; the per-app copies are gone. */
.app-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

/* ── Logo mark: soft glow + playful hover ─────────────────────────────────── */
.ayden-logo-mark { transition: transform 0.25s ease, filter 0.25s ease; }
.app-logo-link:hover .ayden-logo-mark,
a:hover > .ayden-logo-mark { transform: scale(1.08); }

/* ── Primary / "Generate" button — edit here to update every app's ───────────
   Apply class="btn-primary" to a suite app's primary action button. */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #7b7be6 0%, #5b5bd6 58%, #4646b8 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 11px;
  letter-spacing: 0.04em;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30),
    0 8px 32px rgba(91, 91, 214, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s, filter 0.15s;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30),
    0 12px 40px rgba(91, 91, 214, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.50);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.95); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

[data-theme="light"] .btn-primary {
  border: 1px solid rgba(60, 60, 160, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 6px 24px rgba(91, 91, 214, 0.50),
    0 2px 8px rgba(0, 0, 0, 0.22);
}