/* ============================================================
 * theme-white-data.css
 *
 * Night-theme overlay that promotes informational copy / data
 * values to white, leaves chrome (labels, brackets, $ prefixes,
 * field-name dotted prefixes, dividers, links) on the green
 * accent. A short, hard-snap "digital glitch" animation can be
 * applied sparingly to a handful of data tokens for emphasis,
 * staggered so they never fire in sync.
 *
 * Drop into a test page that already uses the standard
 * day/night CSS-variable theme (--green, --green-dim, etc.) by
 * adding *after* the page's own <style> block and toggling night
 * mode via `html.night` as usual:
 *
 *   <link rel="stylesheet" href="/theme-white-data.css">
 *
 * Apply the glitch effect by adding `class="glitch-data gN"` to
 * a few key data spans (N = 1..5 for the staggered slots). Skip
 * multi-line emphasis spans — clip-path on wrapping inline text
 * shears mid-line and reads as broken rather than digital.
 * ============================================================ */

/* ── Tokens.
   --data:   white data values (no glow; emphasis comes from the
             staggered glitch animation below, not text-shadow).
   --accent: neon orange for action links + primary CTA in night
             mode. Replaces the green/yellow link palette wherever
             the .action-link / .accent class is applied. ── */
html.night {
  --data: #ffffff;
  --accent: #ff8c1a;
  --accent-dim: #cc6f14;
  --accent-glow: rgba(255,140,26,.35);
}

/* ── Logo: force the source PNG to pure white in night mode.
   brightness(0) flattens all RGB to 0; invert(1) flips to 1 (white)
   while alpha is preserved. The selector list covers every logo
   class/id pattern currently used across pages plus a generic
   src-suffix match so bare `<img src="logo.png">` tags (booking,
   comedian-portal) light up without per-page rules.
   Per-page rules in inline <style> blocks load after this overlay
   and can still override (same specificity → source order wins). */
html.night #logo-img,
html.night .portal-logo,
html.night .logo-block .logo,
html.night .qr-stage .logo,
html.night img[src$="logo.png"],
html.night img[src$="/logo.png"] {
  filter: brightness(0) invert(1);
}

/* ── Orange action-link.
   Drop-in replacement for the green/yellow underlined links
   used across the site. Covers explicit .action-link tagging
   plus the existing site-wide patterns (.logout-link, .back-link,
   #logout-btn) so most pages light up without per-page tagging.
   !important overrides per-page inline `color:var(--green)`
   styles on these elements. */
html.night .action-link,
html.night a.action-link,
html.night .logout-link,
html.night .back-link,
html.night #logout-btn,
html.night #back-to-login {
  color: var(--accent) !important;
  text-shadow: none;
}
html.night .action-link:hover,
html.night a.action-link:hover,
html.night .logout-link:hover,
html.night .back-link:hover,
html.night #logout-btn:hover,
html.night #back-to-login:hover {
  color: var(--accent) !important;
  text-shadow: 0 0 8px var(--accent-glow);
}

/* ── Sparse, hard-snap data-glitch ──
 * ~98.5% of every cycle is dead-still. The active window is ~1.5%
 * of the timeline: 3 instant clip-band cuts with binary 0/±2px
 * jumps, no skew, no easing. Snaps cleanly back to neutral every
 * frame so it reads as digital corruption, not waveform. */
@keyframes glitch-data {
   0%, 98.0% { clip-path: inset(0 0 0 0); transform: translate(0,0); opacity: 1; }
  98.10%     { clip-path: inset(35% 0 50% 0); transform: translate(-2px, 0); }
  98.20%     { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  98.50%     { clip-path: inset(65% 0 15% 0); transform: translate(2px, 0); opacity: .85; }
  98.60%     { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 1; }
  98.95%     { opacity: .25; }
  99.05%     { opacity: 1; }
  99.30%     { clip-path: inset(15% 0 70% 0); transform: translate(-2px, 0); }
  99.40%     { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
   100%      { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 1; }
}
html.night .glitch-data {
  display: inline-block;
  animation: glitch-data 11s linear infinite;
  will-change: clip-path, transform, opacity;
}
/* Stagger durations + delays: each slot's first glitch fires within
   ~0.4–2.5s of page load, then drifts apart on a unique cycle length. */
html.night .glitch-data.g1 { animation-duration: 11s; animation-delay: -10.4s; }
html.night .glitch-data.g2 { animation-duration: 13s; animation-delay: -11.6s; }
html.night .glitch-data.g3 { animation-duration: 17s; animation-delay: -16.0s; }
html.night .glitch-data.g4 { animation-duration: 19s; animation-delay: -16.8s; }
html.night .glitch-data.g5 { animation-duration: 23s; animation-delay: -20.0s; }
@media (prefers-reduced-motion: reduce) {
  html.night .glitch-data { animation: none; }
}

/* ── Night-mode white-text overrides for common surfaces ──
 * These map onto the class names already in use across
 * account.html / tickets.html / shows.html. Each rule strips any
 * pre-existing text-shadow / glow and switches the data-bearing
 * piece (em values, paragraph copy, empty-state lines) to white
 * while leaving labels and chrome on green-dim. */

/* Welcome line: paragraph copy white, $ prefix (.pfx) stays green-dim.
   If the existing markup doesn't have a .pfx wrapper around the "$",
   add one or skip the welcome rule. */
html.night .welcome-line { color: var(--data); text-shadow: none; }
/* Chrome green-dim: hex fallback so the rule works on pages that use the
   --salmon family of vars (index, fees) as well as the --green family. */
html.night .welcome-line .pfx { color: var(--green-dim, var(--salmon-dim, #00b32c)); }
html.night .welcome-line em {
  color: var(--data); font-style: normal; font-weight: bold; text-shadow: none;
}

/* Empty-state line e.g. "$ no shows scheduled near 95354 yet." */
html.night .no-shows { color: var(--data); text-shadow: none; }

/* Dashboard stats: numbers white, label stays green-dim. */
html.night .stat em {
  color: var(--data); font-style: normal; font-weight: bold; text-shadow: none;
}

/* Ticket-card data values: date / city / time / tickets etc. */
html.night .ticket-card .row em {
  color: var(--data); font-style: normal; text-shadow: none;
}

/* Show-card (account.html "shows in your area") — same pattern as
   ticket-card: row label stays green-dim, em-wrapped value goes
   white. The title row stays green as a card header (matches the
   index decision to keep big titles on the green CRT accent). */
html.night .show-card .row:not(.title) em {
  color: var(--data); font-style: normal; text-shadow: none;
}

/* Venue/location reveal block — keep yellow border as the alert
   frame; values themselves go white. */
html.night .venue-reveal .row em {
  color: var(--data); font-style: normal; text-shadow: none;
}

/* Comedian tags — names ARE data; chip border stays green. */
html.night .comedian-tag { color: var(--data); text-shadow: none; }

/* Venue-inquiry pitch paragraph (incl. its bold em). */
html.night .venue-cta .pitch { color: var(--data); text-shadow: none; }
html.night .venue-cta .pitch em {
  color: var(--data); font-style: normal; font-weight: bold; text-shadow: none;
}

/* ============================================================
 * USAGE NOTES
 * ------------------------------------------------------------
 * • This file is night-mode-only. Day mode is untouched.
 *
 * • If you add new data surfaces (new card types, new empty
 *   states, etc.), extend with the same pattern:
 *     html.night .my-new-thing  { color: var(--data); }
 *     html.night .my-new-thing em { color: var(--data); ... }
 *
 * • Glitch class (.glitch-data) targets to favor:
 *     - single-token numbers / values (counts, IDs, dates)
 *     - single-line empty-state messages
 *   Avoid:
 *     - multi-line wrapped emphasis (clip-path shears mid-wrap)
 *     - long paragraphs (reads as corruption rather than accent)
 *
 * • Keep the count of glitched elements small per page (3–6).
 *   The effect's value is in scarcity.
 * ============================================================ */