/* theme.css -- the app's DAY and NIGHT looks, laid over every page. Loaded LAST, after the page's
   own stylesheet, so it wins. Colours come from tokens.css by name; nothing raw lives here.

   DAY   (data-theme="light"): warm paper, brass gold. Oswald headings in capitals, number tiles
         with a thin brass bar along the top, soft shadows under panels. As the app's day theme.
   NIGHT (data-theme="dark"):  the app's "stage light" look. Navy ground lit by three soft
         coloured glows, panels you can half see through, violet-to-cyan on the active tab,
         the big numbers and the headings. Everything night-only is under :root[data-theme="dark"],
         so the day look is never touched by it.
   ui/theme.js decides which one is on and runs the Theme button. */

/* ================================ BOTH LOOKS ================================ */

/* Headings in the app's display face: Oswald, capitals, spaced out a little. */
h1, .panel h2, .drawer-head h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.panel h2 { display: flex; align-items: center; gap: 12px; flex: 1; }
/* The thin rule running out after a panel heading, as in the app. */
.panel h2::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.label, .tab-group, thead th { font-family: var(--font); font-weight: 600; letter-spacing: .08em; }

/* Panels sit on a soft shadow. */
.panel { box-shadow: var(--shadow); }

/* The lead numbers become the app's number tiles: a card each, a coloured bar along the top. */
.lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.lead .kpi { position: relative; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 17px; box-shadow: var(--shadow); min-width: 0; }
.lead .kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--bar); }
.kpi .v { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
.lead .kpi .v { font-size: var(--t-kpi); overflow-wrap: anywhere; }
.kpi .l { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.panel .lead .kpi { background: var(--bg); }

/* The active tab: a soft brass block with the underline, as the app's active menu item. */
.tab { border-radius: var(--radius-control) var(--radius-control) 0 0; padding: 0 10px; }   /* Inter runs wider than the system font; this keeps every tab on one line at 1400 wide */
.tab[aria-selected="true"] { background: var(--accent-soft); }

/* Small figures in the app's mono face. */
.stamp, .count, .barval, .gig-date { font-family: var(--mono); }

/* The Theme button, top right on every page that has one. */
.theme-btn::before { content: "\25D0"; margin-right: 6px; }   /* the half-filled circle, as in the app */

/* ================================ NIGHT ONLY ================================ */

/* The stage: navy lit by violet (top right), cyan (top left) and a touch of pink (bottom). */
:root[data-theme="dark"] body { background: var(--n-aurora); background-attachment: fixed; }

/* Glass: panels, tiles and the drawer let the glow show through. */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .lead .kpi,
:root[data-theme="dark"] .kpi-btn,
:root[data-theme="dark"] .table-wrap { background: var(--n-glass); border-color: var(--n-glass-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root[data-theme="dark"] .drawer { background: color-mix(in srgb, var(--n-head) 88%, transparent); border-color: var(--n-glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
:root[data-theme="dark"] thead th { background: var(--n-head); }
:root[data-theme="dark"] tbody tr:hover,
:root[data-theme="dark"] .gig-btn:hover,
:root[data-theme="dark"] .kpi-btn:hover { background: var(--n-hover); }

/* Big numbers: white fading to ice blue, with a faint violet glow. */
:root[data-theme="dark"] .kpi .v:not(.na) { background: var(--n-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: var(--n-num-glow); }

/* Headings: white through lilac to ice blue. */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .drawer-head h2 { background: var(--n-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root[data-theme="dark"] .panel h2::after { background: linear-gradient(90deg, var(--glow), transparent); }

/* The sign-in ticket is paper in both looks, so its heading stays plain ink at night. */
:root[data-theme="dark"] .ticket-main h1 { background: none; -webkit-text-fill-color: var(--paper-ink); }

/* The active tab glows violet to cyan. */
:root[data-theme="dark"] .tab[aria-selected="true"] { background: var(--n-tab); box-shadow: var(--n-tab-glow); color: var(--ink); border-bottom-color: var(--n-cyan); }

/* The bars on the Overview tab and the chips pick up the night colours. */
:root[data-theme="dark"] .bar-fill { fill: var(--n-cyan); }
:root[data-theme="dark"] .chip-btn[aria-pressed="true"] { background: var(--n-tab); box-shadow: var(--n-tab-glow); }

/* Buttons: a violet ring on hover and focus, as the app's. */
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] select:focus { box-shadow: 0 0 0 3px var(--accent-soft); }

/* The Admin / User switch lights up like the active tab. */
:root[data-theme="dark"] .view-switch { border-color: var(--n-glass-line); }
:root[data-theme="dark"] .view-switch button[aria-pressed="true"] { background: var(--n-tab); box-shadow: var(--n-tab-glow); color: var(--ink); }

/* The header strip's logo glows at night. */
:root[data-theme="dark"] .brand img { filter: drop-shadow(0 0 12px var(--glow)); }

@media (prefers-reduced-motion: reduce) { :root[data-theme="dark"] body { background-attachment: scroll; } }

/* ---- the How-to bubble (ui/howto.js): small, calm, above everything, gone on the next move ---- */
.howto-bubble { position: absolute; z-index: 100; max-width: 280px; padding: 8px 12px; border-radius: var(--radius-control);
  background: var(--ink); color: var(--bg); font: 500 var(--t-small)/1.4 var(--font); box-shadow: var(--shadow); pointer-events: none;
  animation: howto-in var(--dur-move) var(--ease); }
.howto-bubble[hidden] { display: none; }
@keyframes howto-in { from { opacity: 0; transform: translateY(-3px); } }
:root[data-theme="dark"] .howto-bubble { background: var(--n-head); color: var(--ink); border: 1px solid var(--n-glass-line); box-shadow: var(--n-tab-glow); }
.howto-btn[aria-pressed="false"] { color: var(--ink-faint); }