/* theme-light.css — light theme component overrides (variables live in aura.css). */
html[data-theme="light"] .card,
html[data-theme="light"] .hero,
html[data-theme="light"] .section-card,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar{ background:var(--panel); color:var(--text); border-color:var(--stroke); }
html[data-theme="light"] .btn-line,
html[data-theme="light"] .hdr-btn.ghost-btn{ color:var(--text); border-color:var(--stroke2); background:transparent; }
html[data-theme="light"] .btn-grad{ color:#0B0B14; }
html[data-theme="light"] .nav-item{ color:var(--text2); }
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .nav-item:hover{ color:var(--text); background:var(--glass2); }
html[data-theme="light"] .h1, html[data-theme="light"] .h2,
html[data-theme="light"] .page-title, html[data-theme="light"] b, html[data-theme="light"] strong{ color:var(--text); }
html[data-theme="light"] .mono, html[data-theme="light"] .data-table td{ color:var(--text); }
html[data-theme="light"] .data-table th, html[data-theme="light"] .eyebrow,
html[data-theme="light"] .label, html[data-theme="light"] .muted{ color:var(--text3); }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{
  background:#FFFFFF; color:var(--text); border-color:rgba(0,0,0,.18); }
html[data-theme="light"] input::placeholder{ color:var(--text3); }
/* The ticker stays a DARK accent strip in light mode (terminal vibe), so its
   text must keep the dark-theme palette — recoloring it to light-mode ink made
   prices invisible (contrast 1.1). Densify the background so the strip reads
   as intentional over the light body instead of a muddy 70% overlay. */
html[data-theme="light"] .ticker{ background:rgba(7,7,13,.94); }
html[data-theme="light"] .ticker-sym{ color:#F2F1FA; }
html[data-theme="light"] .ticker-price{ color:#9C9AB5; }
html[data-theme="light"] .ticker-chg.up{ color:#4EE1C0; }
html[data-theme="light"] .ticker-chg.down{ color:#FF5C7A; }
html[data-theme="light"] .toggle{ background:rgba(0,0,0,.10); border-color:rgba(0,0,0,.14); }
html[data-theme="light"] .modal-overlay{ background:rgba(20,25,45,.35); }
html[data-theme="light"] .crm-dd-menu{ background:#FFFFFF; border-color:rgba(0,0,0,.14);
  box-shadow:0 16px 40px rgba(20,30,60,.16); }

/* ── Mobile gate ────────────────────────────────────────────────────────────
   On real phones there is no web version: the whole app is replaced by a single
   "install the app" screen. Gated on html.is-phone (set by JS from the user agent)
   so a narrow *desktop* window still shows the real platform. */
.mobile-gate{ display:none; }
html.is-phone .mobile-gate{
  display:flex; position:fixed; inset:0; z-index:10000;
  align-items:center; justify-content:center; padding:28px 22px;
  background:var(--bg); color:var(--text);
  background-image:radial-gradient(circle at 20% 15%, rgba(123,92,255,.18), transparent 45%),
                   radial-gradient(circle at 85% 80%, rgba(78,225,192,.14), transparent 45%);
}
html.is-phone #appShell,
html.is-phone #authScreen,
html.is-phone .menu-btn,
html.is-phone .cursor-glow{ display:none !important; }
html.is-phone body{ overflow:hidden; }
.mg-card{ width:100%; max-width:420px; text-align:center; }
.mg-logo{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fd);
  font-weight:800; font-size:22px; letter-spacing:-.5px; margin-bottom:26px; }
.mg-title{ font-family:var(--fd); font-size:clamp(26px,7vw,34px); font-weight:800;
  line-height:1.15; margin:0 0 12px; }
.mg-sub{ color:var(--text2); font-size:14.5px; line-height:1.5; margin:0 0 26px; }
.mg-actions{ display:flex; flex-direction:column; gap:10px; }
.mg-btn{ width:100%; padding:15px 18px; font-size:14.5px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; text-decoration:none; }
.mg-hint{ margin-top:22px; font-size:12.5px; color:var(--text3); }
/* Staff on a phone: the "clients use the app" rule is for clients — an admin
   must still be able to reach the CRM from a phone in a pinch. */
html.is-phone.staff-mobile .mobile-gate{ display:none; }
html.is-phone.staff-mobile #appShell,
html.is-phone.staff-mobile #authScreen,
html.is-phone.staff-mobile .menu-btn{ display:revert !important; }
html.is-phone.staff-mobile body{ overflow:auto; }

/* Secondary-text depth: light --text3 at #8A8CA0 measured ~3.3:1 on white for
   9–11px micro-labels; pull both muted tiers darker so every eyebrow, nav-num,
   table header and sub-caption clears readable contrast in one stroke. */
html[data-theme="light"]{ --text3:#71738C; --text2:#3F4156; }
/* Decorative pills whose hues are dark-theme literals */
html[data-theme="light"] .pill.vio{ color:#6B4FD8; background:rgba(107,79,216,.12); }
html[data-theme="light"] .pill.peach{ color:#B4652A; background:rgba(180,101,42,.12); }

/* Decorative accent variables: neon values tuned for the dark canvas measure
   1.5–2.6:1 on white. Same hues, light-legible depth — one block covers the
   timeframe pills, leverage readout, referral highlight, MA labels, blue table
   buttons and every other consumer of these tokens. */
html[data-theme="light"]{
  --cyan:#0C8A6C; --peach:#B4652A; --lav:#6B4FD8;
  --ref-green:#0C8A6C; --violet:#5F42E0;
}
html[data-theme="light"] .tbl-btn.blue{ color:#4A5BD4; background:rgba(74,91,212,.10); border-color:rgba(74,91,212,.28); }
html[data-theme="light"]{ --greend:#0B7A5B; }