/* Operations console chrome — the shell every ops-console page shares.
 *
 * Extracted from templates/admin_bookings.html's inline <style> block so the
 * palette, topbar, theme glyph and shell layout have ONE source: the bookings
 * console links this file and keeps only its data-specific rules inline, and
 * any other console page (manual booking form, …) links it to inherit the
 * same chrome verbatim.
 *
 * Structure:
 *   1. palette   — --ops-* custom properties, dark default + light override.
 *   2. shell     — body/#ops-app canvas, topbar, icon buttons, theme glyph.
 *   3. primitives— ops-themed panel/input/button classes for console pages
 *                  that render forms (the bookings board itself keeps its own
 *                  inline data styles and does not use these).
 *
 * The theme toggle script is static/js/admin_bookings_theme.js: it keys off
 * #ops-app + #theme-toggle, both part of the shell contract below. The palette
 * is declared on :root as well as #ops-app so the page canvas behind the
 * console matches and native widgets (date pickers, scrollbars) follow the
 * theme via color-scheme.
 */

/* --- palette ------------------------------------------------------------- */
:root {
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Dark is the console default, so native widgets (date pickers, the
       calendar glyph, scrollbars) render dark too — otherwise a date input
       reads as a washed-out light control on the sheet. The theme script
       mirrors data-theme onto <html> as well as #ops-app, so the override
       below flips the native widgets with the palette. */
    color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

:root, #ops-app {
    --ops-bg: #1c1c1f;
    --ops-surface: #292930;
    --ops-surface-2: #232328;
    --ops-surface-3: #232328;
    --ops-border: #34343c;
    --ops-border-strong: #45454f;
    --ops-text: #e9e9ee;
    --ops-text-dim: #a6a6b2;
    --ops-text-faint: #74747f;
    --ops-accent: #6f66d6;
    --ops-accent-hover: #7e76e3;
    --ops-accent-text: #fff;
    --ops-accent-soft: #2b2d55;
    --ops-accent-soft-text: #bcb9f7;
    --ops-accent-wash: rgba(111, 102, 214, 0.06);
    --ops-accent-glow: rgba(111, 102, 214, 0.25);
    --ops-accent-glow-wide: rgba(111, 102, 214, 0.12);
    --ops-focus-ring: rgba(111, 102, 214, 0.28);
    --ops-ok: #6ed6a4;
    --ops-ok-soft: #163729;
    --ops-warn: #e6bd78;
    --ops-warn-soft: #382c1a;
    --ops-danger: #ef9a9a;
    --ops-danger-soft: #3a2323;
    --ops-shadow: rgba(0, 0, 0, 0.45);
    --ops-shadow-soft: rgba(0, 0, 0, 0.18);
    --ops-overlay: rgba(0,0,0,0.55);
    --ops-inset-tint: rgba(255, 255, 255, 0.14);
    --ops-hatch-ink: rgba(255, 255, 255, 0.34);
}
html[data-theme="light"], #ops-app[data-theme="light"] {
    --ops-bg: #ffffff;
    --ops-surface: #f4f5f8;
    --ops-surface-2: #eceef3;
    --ops-surface-3: #ffffff;
    --ops-border: #e3e5ec;
    --ops-border-strong: #c9cdd8;
    --ops-text: #17181c;
    --ops-text-dim: #55596a;
    --ops-text-faint: #676c7a;
    --ops-accent: #574ec4;
    --ops-accent-hover: #453cae;
    --ops-accent-text: #fff;
    --ops-accent-soft: #ecebfb;
    --ops-accent-soft-text: #3a3193;
    --ops-accent-wash: rgba(87, 78, 196, 0.07);
    --ops-accent-glow: rgba(87,78,196,0.22);
    --ops-accent-glow-wide: rgba(87,78,196,0.10);
    --ops-focus-ring: rgba(87, 78, 196, 0.25);
    --ops-ok: #10693f;
    --ops-ok-soft: #e3f6ea;
    --ops-warn: #8a5300;
    --ops-warn-soft: #fdf1dd;
    --ops-danger: #b3261e;
    --ops-danger-soft: #fdeceb;
    --ops-shadow: rgba(23, 24, 28, 0.18);
    --ops-shadow-soft: rgba(23, 24, 28, 0.08);
    --ops-hatch-ink: rgba(23, 24, 28, 0.22);
    --ops-overlay: rgba(28,30,38,0.42);
    --ops-inset-tint: rgba(0, 0, 0, 0.08);
}

/* --- shell --------------------------------------------------------------- */
#ops-app { background: var(--ops-bg); color: var(--ops-text); color-scheme: dark; }
#ops-app[data-theme="light"] { color-scheme: light; }
html, body { height: 100%; }
body { background: var(--ops-bg); color: var(--ops-text); font-family: var(--font-sans); margin: 0; padding: 0; }
.icon { display: inline-flex; vertical-align: middle; }
input, textarea, select { color: var(--ops-text); }
input[type=checkbox] { accent-color: var(--ops-accent); }
::placeholder { color: var(--ops-text-faint); }

.hidden { display: none !important; }

.ops-app { display: flex; flex-direction: column; height: 100vh; }
.ops-body { flex: 1 1 auto; display: flex; min-height: 0; }
.ops-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-bottom: 0; padding: 9px 16px; border-bottom: 1px solid var(--ops-border); }
.ops-logo { color: var(--ops-text-dim); }
.ops-venue { font-size: 14px; font-weight: 500; white-space: nowrap; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--ops-text-dim); border-radius: var(--radius-md); padding: 5px; display: inline-flex; }
.icon-btn:hover { background: var(--ops-surface); }

/* A text link that sits in the topbar where the bookings console puts its
   accent buttons — same size and weight, but quiet, for navigation back to
   the board rather than an attention-seeking action. */
.ops-toplink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ops-text-dim); text-decoration: none; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ops-border-strong); }
.ops-toplink:hover { background: var(--ops-surface); color: var(--ops-text); }

/* Theme toggle glyph: moon while dark, sun while light. */
#ops-app .theme-sun { display: none; }
#ops-app[data-theme="light"] .theme-sun { display: inline; }
#ops-app[data-theme="light"] .theme-moon { display: none; }

/* --- form primitives -----------------------------------------------------
   For console pages whose body is a form rather than the board. All colours
   read from --ops-*, so a page built from these flips theme with the rest of
   the console and never carries its own palette. */

/* Scroll region under the topbar; the bookings console uses .ops-body with
   sidebar+main panes instead — a form page centres a single column here. */
.ops-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 26px 16px 72px; }
.ops-content-col { max-width: 880px; margin: 0 auto; }

.ops-panel { background: var(--ops-surface-3); border: 1px solid var(--ops-border); border-radius: var(--radius-lg); padding: 22px 24px; }
.ops-panel-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; color: var(--ops-text); }
.ops-panel-desc { font-size: 0.83rem; color: var(--ops-text-dim); margin: 0 0 18px; line-height: 1.55; }

.ops-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 8px 11px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--ops-text);
    background: var(--ops-bg);
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--radius-md);
    outline: none;
}
.ops-input:focus { border-color: var(--ops-accent); box-shadow: 0 0 0 3px var(--ops-focus-ring); }
.ops-input:disabled { opacity: 0.55; cursor: not-allowed; }
select.ops-input { appearance: auto; }
textarea.ops-input { resize: vertical; }

.ops-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 0.88rem; font-weight: 600; border-radius: var(--radius-md); padding: 9px 18px; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.ops-btn-primary { background: var(--ops-accent); color: var(--ops-accent-text); }
.ops-btn-primary:hover { background: var(--ops-accent-hover); }
.ops-btn-primary:disabled { opacity: 0.6; cursor: default; }
.ops-btn-secondary { background: transparent; color: var(--ops-text-dim); border-color: var(--ops-border-strong); }
.ops-btn-secondary:hover { background: var(--ops-surface); color: var(--ops-text); }

/* Form result line — the manual-booking JS toggles the modifier classes
   (admin-payment-result--error / is-success), so those names are the JS
   contract and are kept verbatim even though they predate this file. */
.admin-payment-result-wrap { margin-top: 12px; }
.admin-payment-result { font-size: 0.85rem; margin: 0; line-height: 1.5; color: var(--ops-text); }
.admin-payment-result:empty { display: none; }
/* ...except the manual-booking form's, which is a role="status" live region and
   the form's ONLY feedback channel (the form is novalidate and its submit
   handler preventDefault()s, so no validation bubble ever fires). A live region
   that is display:none until it has text is added to the accessibility tree at
   the same instant its content changes, which suppresses the announcement in
   several screen readers exactly the way toggling `hidden` does. It stays
   rendered and registered, with no footprint, until it has something to say. */
#manual-booking-result:empty { display: block; height: 0; margin: 0; padding: 0; overflow: hidden; }
.admin-payment-result--error { color: var(--ops-danger); }
.admin-payment-result.is-success { color: var(--ops-ok); }
.admin-payment-result.is-success a { color: var(--ops-ok); font-weight: 600; }
