/*
 * themes.css — Pinball theme overlays.
 *
 * Every page embeds the default "Pinball" :root variables in its own
 * <style> block (dark charcoal + brass gold). When <html data-theme="X">
 * is set, the overrides below redefine those variables for theme X.
 *
 * Add a new theme by adding another :root[data-theme="…"] block and
 * registering it in auth.php's PB_THEMES list.
 */

/* MD3-only webfonts. Imported here (not in index.php's <head>) so the base
 * page doesn't pay the request cost when this theme isn't active. The two
 * fonts are loaded unconditionally because the browser still needs them
 * available the moment data-theme="md3" is applied. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Inconsolata:wght@400;500;600&display=swap');

/* ============================================================
 * GLOBAL — applies on every page and in every theme (not scoped to a
 * data-theme). themes.css is loaded by every page, so this is the one
 * place to enforce app-wide table behavior.
 *
 * Keep wide data tables INSIDE their card. DataTables wraps every result /
 * widget / log table in .dt-container; capping it at the parent width and
 * allowing horizontal scroll stops a many-column table (e.g. the customer
 * cadence report) from spilling past the card's right edge — the table
 * scrolls within its container instead of overrunning the layout.
 * ============================================================ */
.dt-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Live pinball-simulation background (login page). Sits behind the card
 * (.card is z-index 1), never intercepts clicks, only shown under Pinball. */
#pb-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
:root[data-theme="pinball"] #pb-bg { display: block; }

/* ============================================================
 * Pinball  (DEFAULT THEME)
 *   Neon arcade playfield: hot-magenta flippers, electric-cyan
 *   highlights and glowing bumper-lights on a deep-indigo cabinet.
 * ============================================================ */
:root[data-theme="pinball"] {
    /* Cards stay a deeper purple so white text keeps strong contrast,
     * while the body FIELD (below) is bright and lively. */
    --ink:         #34206e;
    --panel-a:     #412a88;
    --panel-b:     #35206f;
    --well:        #2f1c64;

    --gold:        #ff4fb2;   /* primary accent — flipper magenta */
    --gold-bright: #4cf0ff;   /* highlights / glow — electric cyan */
    --gold-deep:   #e23a98;
    --line:        rgba(76,240,255,.55);
    --line-soft:   rgba(255,79,178,.32);

    --cream:       #ffffff;   /* body text — white on deep cards */
    --muted:       #ddd2ff;   /* light lavender secondary text */
    --oxblood:     #ff8a52;   /* warn — neon orange ("TILT!") */
}

/* Playfield: a bright electric-purple field with vivid bumper glows. */
:root[data-theme="pinball"] body {
    background-color: #6a45d8;
    background-image:
        radial-gradient(circle at 12% 2%,   rgba(255,79,178,.60), transparent 50%),
        radial-gradient(circle at 88% 4%,   rgba(76,240,255,.55), transparent 52%),
        radial-gradient(circle at 50% 122%, rgba(190,120,255,.60), transparent 64%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--cream);
}

/* Faint blinking playfield lights — scattered bulbs that flicker. */
:root[data-theme="pinball"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(circle, rgba(52,236,255,.9)  0, rgba(52,236,255,.9)  1.6px, transparent 2.6px),
        radial-gradient(circle, rgba(255,58,166,.9)  0, rgba(255,58,166,.9)  1.6px, transparent 2.6px),
        radial-gradient(circle, rgba(255,214,90,.9)  0, rgba(255,214,90,.9)  1.6px, transparent 2.6px);
    background-size: 190px 170px, 250px 230px, 320px 300px;
    background-position: 24px 40px, 150px 110px, 80px 220px;
    animation: pb-twinkle 4.2s steps(1, end) infinite;
}
@keyframes pb-twinkle {
    0%, 100% { opacity: .10; }
    18% { opacity: .28; }
    34% { opacity: .05; }
    52% { opacity: .32; }
    70% { opacity: .12; }
    86% { opacity: .24; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="pinball"] body::before { animation: none; opacity: .14; }
}

/* Frosted login card: translucent so the live pinball game shows THROUGH it,
 * but blurred + tinted so the form text stays high-contrast and readable. */
:root[data-theme="pinball"] .card {
    background: rgba(34, 20, 74, .72);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    box-shadow: 0 30px 70px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(76,240,255,.18);
}

/* Wordmark + hero title glow like a backglass, with a gentle bumper pulse. */
:root[data-theme="pinball"] .pb-side-mark,
:root[data-theme="pinball"] .hero h1 {
    filter: drop-shadow(0 0 12px rgba(52,236,255,.75)) drop-shadow(0 0 24px rgba(255,58,166,.6));
    animation: pb-neon-pulse 2.6s ease-in-out infinite;
}
:root[data-theme="pinball"] h1 {
    filter: drop-shadow(0 0 11px rgba(52,236,255,.6)) drop-shadow(0 0 20px rgba(255,58,166,.45));
}
@keyframes pb-neon-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(52,236,255,.6))  drop-shadow(0 0 18px rgba(255,58,166,.5)); }
    50%      { filter: drop-shadow(0 0 20px rgba(52,236,255,.95)) drop-shadow(0 0 34px rgba(255,58,166,.8)); }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-theme="pinball"] .pb-side-mark,
    :root[data-theme="pinball"] .hero h1 { animation: none; }
}

/* Panels: bright cyan→magenta top rail and a soft inner neon wash. */
:root[data-theme="pinball"] .box::before,
:root[data-theme="pinball"] .panel::before {
    background: linear-gradient(90deg, transparent, var(--gold-bright), var(--gold), transparent);
}
:root[data-theme="pinball"] .box,
:root[data-theme="pinball"] details.accordion,
:root[data-theme="pinball"] .panel {
    box-shadow:
        0 22px 50px -22px rgba(0,0,0,.7),
        0 0 0 1px rgba(25,227,255,.06),
        inset 0 0 26px -12px rgba(255,46,154,.18);
}

/* Primary CTAs glow like lit bumpers. */
:root[data-theme="pinball"] .pb-newchat,
:root[data-theme="pinball"] .submit,
:root[data-theme="pinball"] .pb-pb-send {
    color: #190630 !important;
    text-shadow: none;
    box-shadow:
        0 0 26px rgba(255,58,166,.7),
        0 0 12px rgba(52,236,255,.6),
        inset 0 1px 0 rgba(255,255,255,.55);
}
:root[data-theme="pinball"] .pb-newchat:hover,
:root[data-theme="pinball"] .submit:hover,
:root[data-theme="pinball"] .pb-pb-send:hover {
    filter: brightness(1.06);
    box-shadow:
        0 0 38px rgba(255,58,166,.95),
        0 0 20px rgba(52,236,255,.85),
        inset 0 1px 0 rgba(255,255,255,.65);
}

/* Cyan hover tint on table rows; neon code blocks. */
:root[data-theme="pinball"] tbody tr:hover td { background: rgba(25,227,255,.07); }
:root[data-theme="pinball"] pre  { background: #0d0628; color: #d9ccff; }
:root[data-theme="pinball"] code { background: rgba(25,227,255,.12); color: #9bf0ff; }

/* ============================================================
 * Silver
 *   Bright silver background with charcoal accents (in place of
 *   gold) on white panels.
 * ============================================================ */

:root[data-theme="silver-pinstripe"] {
    --ink:         #d4d4d4;
    --panel-a:     #ffffff;
    --panel-b:     #f1f1f1;
    --well:        #fafafa;

    --gold:        #2a2a2a;   /* primary accent: charcoal */
    --gold-bright: #0d0d0d;   /* deepest accent */
    --gold-deep:   #555555;
    --line:        rgba(0, 0, 0, .28);
    --line-soft:   rgba(0, 0, 0, .12);

    --cream:       #1c1c1c;   /* primary text on light bg */
    --muted:       #5a5a5a;
    --oxblood:     #b3402f;
}

/* Body: solid silver field (vertical gradient only, no pinstripes). */
:root[data-theme="silver-pinstripe"] body {
    background-color: #c8c8c8;
    background-image: linear-gradient(180deg, #dcdcdc 0%, #b9b9b9 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--cream);
}

/* Drop the gold radial/sunburst pseudo-decorations on light pages. */
:root[data-theme="silver-pinstripe"] body::before,
:root[data-theme="silver-pinstripe"] body::after,
:root[data-theme="silver-pinstripe"] .glow {
    display: none !important;
}

/* Panels: white cards with a thin charcoal hairline + top accent.
 * Shadow is darker than a typical light-theme drop so the cards visibly
 * lift off the silver field. */
:root[data-theme="silver-pinstripe"] .box,
:root[data-theme="silver-pinstripe"] details.accordion,
:root[data-theme="silver-pinstripe"] .panel {
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
    box-shadow:
        0 22px 44px -14px rgba(0,0,0,.40),
        0 8px 18px -8px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.6);
}
:root[data-theme="silver-pinstripe"] .box::before,
:root[data-theme="silver-pinstripe"] .panel::before {
    background: linear-gradient(90deg, transparent, #2a2a2a, transparent);
}

/* Tabular hover row tint reads better with a darker tint on light bg. */
:root[data-theme="silver-pinstripe"] tbody tr:hover td {
    background: rgba(0,0,0,.04);
}

/* Sidebar inner panel — white with a darker right border for separation,
 * plus a pronounced rightward drop shadow so it visibly floats over the
 * silver field instead of bleeding into it. */
:root[data-theme="silver-pinstripe"] .pb-sidebar {
    background: linear-gradient(165deg, #ffffff 0%, #ececec 100%);
    border-right-color: rgba(0,0,0,.25);
    box-shadow:
        14px 0 38px -8px rgba(0,0,0,.32),
        4px 0 12px -4px rgba(0,0,0,.22);
}
/* Mobile + collapsed: fade out the silver-theme shadow too (matches the
 * base behavior in index.php — must be re-stated here because the theme
 * rule above out-specifies the base collapsed override). */
@media (max-width: 820px) {
    :root[data-theme="silver-pinstripe"].pb-collapsed .pb-sidebar {
        box-shadow:
            14px 0 38px -8px rgba(0,0,0,0),
            4px 0 12px -4px rgba(0,0,0,0);
    }
}

/* Mobile close button on light theme: the base rule paints it charcoal-on-
 * charcoal under silver. Flip to light glyph on charcoal field. */
@media (max-width: 820px) {
    :root[data-theme="silver-pinstripe"] .pb-side-close {
        color: #fafafa;
        background: linear-gradient(180deg, #2a2a2a, #0d0d0d);
        border-color: #0d0d0d;
        box-shadow: 0 6px 14px -4px rgba(0,0,0,.45);
    }
    :root[data-theme="silver-pinstripe"] .pb-side-close:hover {
        background: linear-gradient(180deg, #2a2a2a, #0d0d0d);
        border-color: #2a2a2a;
    }
}

/* Login pill input — light field. */
:root[data-theme="silver-pinstripe"] .input input,
:root[data-theme="silver-pinstripe"] textarea,
:root[data-theme="silver-pinstripe"] .limit-field input,
:root[data-theme="silver-pinstripe"] .pagination input.page-input,
:root[data-theme="silver-pinstripe"] select {
    background: #ffffff;
}

/* Pre/code: light card with subtle inset. */
:root[data-theme="silver-pinstripe"] pre {
    background: #f7f7f7;
    color: #2a2a2a;
}
:root[data-theme="silver-pinstripe"] code {
    background: rgba(0,0,0,.07);
    color: #1c1c1c;
}

/* The primary "gold gradient" button on this theme is a charcoal button.
 * Scoped to ONLY the primary CTAs — a previous blanket `button` selector
 * here was painting every ghost/tab button white, which then vanished on
 * the silver field. Anything that needs light text on its dark charcoal
 * background in silver mode should be added explicitly to this list. */
:root[data-theme="silver-pinstripe"] .pb-newchat,
:root[data-theme="silver-pinstripe"] .submit,
:root[data-theme="silver-pinstripe"] .pb-pb-send {
    color: #ffffff !important;
    text-shadow: none;
}

/* Ghost tab buttons on the login card: explicit dark colors so they're
 * legible against the white card under the silver theme. */
:root[data-theme="silver-pinstripe"] .tab {
    color: #6a6a6a;
}
:root[data-theme="silver-pinstripe"] .tab:hover {
    color: #1c1c1c;
}
:root[data-theme="silver-pinstripe"] #auth[data-mode="signin"] .tab[data-tab="signin"],
:root[data-theme="silver-pinstripe"] #auth[data-mode="signup"] .tab[data-tab="signup"] {
    color: #0d0d0d;
}

/* Inline link-style buttons on the login page ("Forgot password?",
 * "Create an account", "Sign in" — all <button class="link">). Base
 * sheet paints them gold; silver remaps gold to charcoal which is fine,
 * but the blanket-button rule (removed above) used to overwrite them.
 * Re-state explicitly so they stay charcoal on the white card. */
:root[data-theme="silver-pinstripe"] button.link {
    color: #1c1c1c !important;
}
:root[data-theme="silver-pinstripe"] button.link:hover {
    color: #000000 !important;
}

/* Subtle inner shadow for the chat-bar pill so it pops on white. */
:root[data-theme="silver-pinstripe"] .pb-promptbar {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* AUTO / DB / WWW routing pill — checked label's text was hard-coded to
   near-black in index.php, which becomes invisible against the charcoal
   gradient under this theme. Invert it to light text. */
:root[data-theme="silver-pinstripe"] .pb-route input:checked + label {
    color: #fafafa !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Theme picker active option: invert the text so it stays legible on the
   dark "pressed" accent under any future inverted accent treatments. */
:root[data-theme="silver-pinstripe"] .pb-theme-opt[aria-pressed="true"] {
    color: #0d0d0d;
    background: rgba(0,0,0,.08);
    box-shadow: inset 0 -2px 0 #0d0d0d;
}

/* ============================================================
 * MD3
 *   Material Design 3-inspired bright dashboard theme. Soft
 *   pastel surfaces (sky-blue primary, mint/lavender/peach
 *   secondaries) on near-white backgrounds, generous rounded
 *   corners, soft elevation shadows, Roboto body / Inconsolata
 *   table data. Primary text is #000000 throughout; hierarchy
 *   comes from weight and size rather than color. Designed
 *   for readers 55+ in glasses — generous spacing, no thin
 *   greys, no neon, no dark mode.
 * ============================================================ */

:root[data-theme="md3"] {
    /* Page + surface tokens */
    --ink:         #F4F6FB;   /* page bg (very pale lavender-white) */
    --panel-a:     #FFFFFF;   /* card top */
    --panel-b:     #FBFBFE;   /* card bottom */
    --well:        #F7F8FB;   /* input / well bg */

    /* Accent = MD3 primary (soft sky blue). "bright" = hover/active,
     * "deep" = pressed / hairline accents. Used everywhere the base
     * sheet says var(--gold). */
    --gold:        #7BB3F0;
    --gold-bright: #5A9DE8;
    --gold-deep:   #3F84CE;

    /* Hairlines: lavender-tinted, very soft. The base sheet uses
     * --line for visible borders, --line-soft for zebra/divider. */
    --line:        rgba(28, 32, 58, .14);
    --line-soft:   rgba(28, 32, 58, .07);

    /* Text: spec says everything is #000000. Muted goes to a true
     * black too — visual hierarchy is carried by font-size and
     * font-weight, not by greying out copy. */
    --cream:       #000000;
    --muted:       #000000;
    --oxblood:     #D87A5C;   /* error / sign-out accent (peach-coral) */
}

/* Body: ultra-pale lavender-white field, faint sky-blue glow at top
 * instead of the base theme's gold sunburst. Roboto for everything
 * by default; Inconsolata is scoped to table data below. */
:root[data-theme="md3"] body {
    background-color: var(--ink);
    background-image:
        radial-gradient(circle at 50% -14%, rgba(123,179,240,.18), transparent 58%),
        linear-gradient(180deg, #F7F9FE 0%, #EEF1F8 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #000000;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, system-ui, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0;
}

/* Drop the gold radial / sunburst pseudo-decorations. */
:root[data-theme="md3"] body::before,
:root[data-theme="md3"] body::after,
:root[data-theme="md3"] .glow {
    display: none !important;
}

/* Headings: keep Roboto, drop the Poiret One display face and the
 * uppercase tracked-out treatment used by the base sheet. Generous
 * sizes for older readers. */
:root[data-theme="md3"] h1,
:root[data-theme="md3"] h2,
:root[data-theme="md3"] h3,
:root[data-theme="md3"] h4 {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif !important;
    font-weight: 500;
    letter-spacing: -0.01em !important;
    color: #000000 !important;
    text-transform: none !important;
}
/* Headings use `margin-bottom` only (not the shorthand) so that page-level
 * base rules — e.g. dashboard.php's `h1 { margin: 0 auto 6px; max-width:
 * 1200px }` which centers the page title inside the 1200px content
 * column — survive this override. Setting `margin: 0 0 20px` here would
 * wipe out the auto horizontal margins and the title would jam against
 * the left body padding. */
:root[data-theme="md3"] h1 { font-size: 36px; line-height: 1.2; margin-bottom: 20px; }
:root[data-theme="md3"] h2 { font-size: 28px; line-height: 1.25; margin-bottom: 18px; }
:root[data-theme="md3"] h3 { font-size: 22px; line-height: 1.3; margin-bottom: 14px; }
:root[data-theme="md3"] h4 { font-size: 18px; line-height: 1.35; margin-bottom: 12px; }

/* Exception: the "Pinball" h1 lives inside `.header-row`, a flex row
 * with align-items:center that also contains the route pill and LIMIT
 * input (both ~38px tall). Match the h1 to that height so all three
 * items sit on the same visual band — smaller font, line-height equal
 * to control height, zero margin so the flex centering reads cleanly. */
:root[data-theme="md3"] .header-row h1 {
    font-size: 40px;
    line-height: 38px;
    margin: 0;
}

/* ---------- Cards / panels / accordions ----------
 * MD3 "elevated surface": white card with multi-layer soft shadow,
 * generous radius, hairline lavender border, no top-accent stripe. */
:root[data-theme="md3"] .box,
:root[data-theme="md3"] details.accordion,
:root[data-theme="md3"] .panel {
    background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow:
        0 1px 2px rgba(28, 32, 58, .04),
        0 8px 24px -10px rgba(28, 32, 58, .12),
        0 24px 48px -28px rgba(28, 32, 58, .14);
}
/* The base sheet draws a gold gradient bar across the top of every
 * .box / .panel via ::before. MD3 prefers clean surfaces, not
 * decorative bands — hide it. */
:root[data-theme="md3"] .box::before,
:root[data-theme="md3"] .panel::before {
    display: none !important;
}
:root[data-theme="md3"] details.accordion summary {
    border-radius: 16px 16px 0 0;
    padding: 18px 28px;
    font-family: 'Roboto', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: #000000;
}
:root[data-theme="md3"] details.accordion summary:hover {
    background: rgba(123, 179, 240, .08);
}
:root[data-theme="md3"] details[open].accordion summary {
    border-bottom: 1px solid var(--line-soft);
    border-radius: 16px 16px 0 0;
}
:root[data-theme="md3"] .box.error {
    border-color: rgba(216, 122, 92, .35);
    background: linear-gradient(180deg, #FFF7F4 0%, #FDEFE8 100%);
}
:root[data-theme="md3"] .box.error pre {
    color: #8B3A22;
    background: #FFF1EC;
    border: 1px solid rgba(216, 122, 92, .25);
}

/* ---------- Sidebar (light, soft, lifted) ---------- */
:root[data-theme="md3"] .pb-sidebar {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
    border-right: 1px solid var(--line-soft);
    box-shadow:
        14px 0 38px -14px rgba(28, 32, 58, .14),
        4px 0 12px -6px rgba(28, 32, 58, .08);
}
@media (max-width: 820px) {
    :root[data-theme="md3"].pb-collapsed .pb-sidebar {
        box-shadow:
            14px 0 38px -14px rgba(0, 0, 0, 0),
            4px 0 12px -6px rgba(0, 0, 0, 0);
    }
}
/* Base styles the side-mark and crest in gold-bright. On MD3 the
 * mark needs to read as black, and the gold crest sunburst becomes
 * a sky-blue accent. */
:root[data-theme="md3"] .pb-side-mark { color: #000000; }
:root[data-theme="md3"] .pb-hist-label,
:root[data-theme="md3"] .pb-hist-empty {
    color: #000000;
    opacity: .65;   /* visual softening without leaving #000 territory */
}
:root[data-theme="md3"] .pb-hist-link { color: #000000; }
:root[data-theme="md3"] .pb-hist-item.active .pb-hist-link {
    color: #1A4F8C;   /* darker variant of primary — keeps "active" feeling without going off-spec */
    font-weight: 600;
}
:root[data-theme="md3"] .pb-hist-item:hover {
    background: rgba(123, 179, 240, .08);
    border-color: var(--line-soft);
}
:root[data-theme="md3"] .pb-hist-item.active {
    background: rgba(123, 179, 240, .14);
    border-color: rgba(123, 179, 240, .35);
}
/* Sidebar utility buttons (new chat / history). Base hard-codes
 * dark text colors for the gold gradient — keep dark text on the
 * pastel gradient, but bump the radius. */
:root[data-theme="md3"] .pb-newchat {
    color: #000000;
    background: linear-gradient(180deg, #A8CBF2, #7BB3F0);
    border-radius: 12px;
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 600;
    font-size: 14px;
    padding: 12px;
}
/* Sidebar utility links (Dashboard / Search History / Search History Log).
 * MD3 "filled tonal" pattern — soft sky-blue tint background, no visible
 * border, dark text. Reads as clearly clickable without competing with
 * the primary "+ New Chat" CTA above. */
:root[data-theme="md3"] .pb-histbtn {
    color: #000000;
    background: rgba(123, 179, 240, .14);
    border: 1px solid transparent;
    border-radius: 12px;
    letter-spacing: .02em;
    text-transform: none;
    font-weight: 500;
    font-size: 14px;
    padding: 11px;
    box-shadow: 0 1px 2px rgba(28, 32, 58, .04);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
:root[data-theme="md3"] .pb-histbtn:hover {
    background: rgba(123, 179, 240, .24);
    border-color: rgba(123, 179, 240, .45);
}

/* Mobile side-close: base paints it gold-on-dark; here we want dark
 * glyph on a pale chip. */
@media (max-width: 820px) {
    :root[data-theme="md3"] .pb-side-close {
        color: #000000;
        background: rgba(123, 179, 240, .14);
        border-color: var(--line);
        box-shadow: 0 2px 6px -2px rgba(28, 32, 58, .18);
        border-radius: 10px;
    }
    :root[data-theme="md3"] .pb-side-close:hover {
        background: rgba(123, 179, 240, .24);
        border-color: var(--gold);
    }
}

/* Hamburger / "open sidebar" button. The blanket `button` rule applies
 * padding 12/22 which on a 46×46 button leaves 2px content width and
 * squashes the 22×22 SVG hamburger glyph out of sight — same trap as
 * the mic icon. Force padding:0 and fixed dimensions, and color the
 * SVG strokes in the deeper primary blue so the icon reads clearly. */
:root[data-theme="md3"] .pb-open-side {
    background: linear-gradient(180deg, #FFFFFF, #F1F4FA) !important;
    background-image: linear-gradient(180deg, #FFFFFF, #F1F4FA) !important;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--gold-deep) !important;   /* #3F84CE — deep sky-blue for the SVG stroke */
    padding: 0 !important;
    width: 46px;
    height: 46px;
    box-shadow: 0 4px 10px -4px rgba(28, 32, 58, .14);
}
:root[data-theme="md3"] .pb-open-side:hover {
    border-color: var(--gold);
    color: var(--gold-bright) !important;
}

/* ---------- Form fields ---------- */
:root[data-theme="md3"] .input input,
:root[data-theme="md3"] textarea,
:root[data-theme="md3"] .pagination input.page-input,
:root[data-theme="md3"] select {
    background: #FFFFFF;
    color: #000000;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
:root[data-theme="md3"] .input input:focus,
:root[data-theme="md3"] textarea:focus,
:root[data-theme="md3"] select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(123, 179, 240, .22);
}

/* Exception: the prompt-bar textarea lives INSIDE the styled .pb-promptbar
 * container, which carries its own focus halo via :focus-within. The
 * generic textarea rule above paints a second, redundant white field +
 * blue ring on the inner element — undo it so only the outer container
 * shows focus. Specificity (0,3,1) beats the generic textarea rule. */
:root[data-theme="md3"] .pb-pb-input,
:root[data-theme="md3"] .pb-pb-input:focus {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 9px 6px !important;
    box-shadow: none !important;
    color: #000000;
}

/* Prompt bar (the chat-style input pill). Base draws a heavy gold
 * focus glow; MD3 keeps it soft. */
:root[data-theme="md3"] .pb-promptbar {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(28, 32, 58, .04),
        0 6px 18px -10px rgba(28, 32, 58, .10);
}
:root[data-theme="md3"] .pb-promptbar:focus-within {
    border-color: var(--gold);
    box-shadow:
        0 0 0 3px rgba(123, 179, 240, .22),
        0 6px 22px -10px rgba(28, 32, 58, .14);
}
/* Mic + "new chat" plus glyph inside the prompt bar — ghost circles.
 * The blanket `button` rule below paints every <button> with the sky-blue
 * gradient AND applies `padding: 12px 22px`, which on a 40×40 mic button
 * pushes the 18×18 SVG out of the visible content box (40 - 44 = -4px
 * wide). We have to force `background: transparent` AND `padding: 0`
 * AND re-state `border-radius: 50%`, all !important, to fully undo the
 * gradient-pill treatment. */
:root[data-theme="md3"] .pb-pb-mic,
:root[data-theme="md3"] .pb-pb-plus {
    color: #000000 !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--line);
    border-radius: 50% !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 40px;
    height: 40px;
}
:root[data-theme="md3"] .pb-pb-mic:hover,
:root[data-theme="md3"] .pb-pb-plus:hover {
    border-color: var(--gold);
    background: rgba(123, 179, 240, .14) !important;
}

/* Send button: solid sky-blue primary circle (NOT rounded square — the
 * base sheet sets border-radius:50% and we have to preserve that against
 * our generic 12px button override). Black send icon via currentColor. */
:root[data-theme="md3"] .pb-pb-send {
    border-radius: 50% !important;
    padding: 0 !important;
    width: 40px;
    height: 40px;
}

/* Pre / code: soft mint-tinted card to differentiate from white panels. */
:root[data-theme="md3"] pre {
    background: #F1F7F3;
    color: #000000;
    border: 1px solid rgba(168, 216, 192, .55);
    border-radius: 12px;
    padding: 16px 20px;
    font-family: 'Inconsolata', 'SF Mono', Consolas, monospace;
    font-size: 14px;
}
:root[data-theme="md3"] code {
    background: rgba(168, 216, 192, .30);
    color: #000000;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: 'Inconsolata', 'SF Mono', Consolas, monospace;
}

/* ---------- Buttons ----------
 * Primary CTA = soft sky-blue gradient pill with BLACK label text
 * (spec: all text #000000). Tactile shadow, smooth hover. */
:root[data-theme="md3"] button,
:root[data-theme="md3"] .submit,
:root[data-theme="md3"] .pb-pb-send {
    color: #000000 !important;
    background: linear-gradient(180deg, #A8CBF2 0%, #7BB3F0 100%);
    border-radius: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: none;
    padding: 12px 22px;
    box-shadow:
        0 1px 2px rgba(28, 32, 58, .08),
        0 6px 16px -8px rgba(90, 157, 232, .55);
    text-shadow: none;
    transition: filter .15s, box-shadow .15s, transform .05s;
}
:root[data-theme="md3"] button:hover,
:root[data-theme="md3"] .submit:hover,
:root[data-theme="md3"] .pb-pb-send:hover {
    filter: brightness(1.02);
    box-shadow:
        0 2px 4px rgba(28, 32, 58, .10),
        0 10px 22px -10px rgba(90, 157, 232, .65);
}
:root[data-theme="md3"] button:active { transform: translateY(1px); }

/* Login tabs (Sign In / Create Account) — Material "primary tabs" style:
 * two equal-width text buttons, the active one carrying a single rounded
 * sky-blue underline. Three things had to be undone from the generic
 * `button` rule above: (1) border-radius:12px, which turned the browser
 * focus ring into a stray rounded box around the active tab; (2) the
 * gradient fill; (3) my own redundant inset box-shadow — the base sheet's
 * `.tab::after` already draws the active underline, so a second line was
 * doubling up. We keep a clean, scoped focus-visible ring for keyboard
 * users only (mouse clicks no longer show the messy default ring). */
:root[data-theme="md3"] .tab {
    color: #000000 !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: .5;
    font-weight: 600;
    letter-spacing: .14em;
    transition: opacity .2s;
}
:root[data-theme="md3"] .tab:hover {
    opacity: .85;
    background: transparent !important;
}
:root[data-theme="md3"] .tab:focus-visible {
    outline: 2px solid rgba(123, 179, 240, .55);
    outline-offset: -4px;
    border-radius: 8px !important;
}
/* Active-tab underline: solid sky-blue with rounded top corners,
 * replacing the base sheet's three-stop gradient for a cleaner edge. */
:root[data-theme="md3"] .tab::after {
    height: 3px !important;
    background: var(--gold) !important;
    border-radius: 3px 3px 0 0;
}
:root[data-theme="md3"] #auth[data-mode="signin"] .tab[data-tab="signin"],
:root[data-theme="md3"] #auth[data-mode="signup"] .tab[data-tab="signup"] {
    color: #000000 !important;
    opacity: 1;
    box-shadow: none !important;
}
:root[data-theme="md3"] button.link {
    color: #1A4F8C !important;       /* deep variant of primary — keeps "all dark" feel while signalling clickability */
    background: transparent !important;
    box-shadow: none !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    padding: 0;
}
:root[data-theme="md3"] button.link:hover {
    color: #000000 !important;
    text-decoration: underline;
}

/* Sign-out chip — keep peach-coral but soften */
:root[data-theme="md3"] .pb-signout {
    color: #8B3A22;
    border: 1px solid rgba(216, 122, 92, .45);
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
:root[data-theme="md3"] .pb-signout:hover {
    background: rgba(216, 122, 92, .10);
    border-color: var(--oxblood);
}

/* Download-CSV outline button on results */
:root[data-theme="md3"] .download-csv {
    color: #000000;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    box-shadow: none;
}
:root[data-theme="md3"] .download-csv:hover {
    border-color: var(--gold);
    background: rgba(123, 179, 240, .10);
}

/* ---------- AUTO / DB / WWW routing pill ----------
 * Base hard-codes near-black text on the checked label, which
 * already works on the pale primary — no inversion needed, but
 * round the corners and soften the unchecked state. */
:root[data-theme="md3"] .pb-route {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #FFFFFF;
    padding: 4px;
    gap: 2px;
}
:root[data-theme="md3"] .pb-route label {
    border-right: 0;
    border-radius: 8px;
    color: #000000;
    opacity: .55;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
:root[data-theme="md3"] .pb-route label:hover {
    color: #000000;
    opacity: 1;
}
:root[data-theme="md3"] .pb-route input:checked + label {
    color: #000000 !important;
    background: linear-gradient(180deg, #C6DCF6 0%, #A8CBF2 100%);
    opacity: 1;
    text-shadow: none;
    box-shadow: none;
}

/* ---------- Theme picker (the sidebar control that swaps themes) ----------
 * Ghost text-pills. The blanket `button` rule below paints these sky-blue
 * by default; force transparent and small text-button geometry so only the
 * active option carries a visible chip. */
:root[data-theme="md3"] .pb-theme-opt {
    color: #000000 !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 6px 10px !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: .55;
}
:root[data-theme="md3"] .pb-theme-opt:hover {
    color: #000000 !important;
    opacity: 1;
    background: rgba(123, 179, 240, .10) !important;
}
:root[data-theme="md3"] .pb-theme-opt[aria-pressed="true"] {
    color: #000000 !important;
    opacity: 1;
    background: rgba(123, 179, 240, .18) !important;
    box-shadow: inset 0 -2px 0 var(--gold) !important;
}

/* ---------- Tables ----------
 * Inconsolata for tabular data per spec — both numbers and text
 * align cleanly column-by-column. Soft mint zebra, sky-blue hover. */
:root[data-theme="md3"] table { font-size: 14.5px; }
:root[data-theme="md3"] table tbody td,
:root[data-theme="md3"] table tbody th {
    font-family: 'Inconsolata', 'SF Mono', Consolas, monospace;
    color: #000000;
    border: 1px solid var(--line-soft);
    padding: 12px 14px;
}
:root[data-theme="md3"] table thead th {
    background: #EEF3FA;
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    font-size: 13px;
    border-bottom: 2px solid var(--gold);
    padding: 14px 14px;
}
:root[data-theme="md3"] tbody tr:nth-child(odd) td {
    background: rgba(168, 216, 192, .10);   /* mint zebra */
}
:root[data-theme="md3"] tbody tr:hover td {
    background: rgba(123, 179, 240, .14);
}

/* DataTables paging: current page = solid primary pill, others = ghost. */
:root[data-theme="md3"] .dt-paging .dt-paging-button {
    color: #000000;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}
:root[data-theme="md3"] .dt-paging .dt-paging-button:hover {
    background: rgba(123, 179, 240, .10);
    border-color: var(--gold);
}
:root[data-theme="md3"] .dt-paging .dt-paging-button.current,
:root[data-theme="md3"] .dt-paging .dt-paging-button.current:hover {
    color: #000000;
    background: linear-gradient(180deg, #A8CBF2, #7BB3F0);
    border-color: var(--gold);
    text-shadow: none;
}
:root[data-theme="md3"] .dt-search input,
:root[data-theme="md3"] .dt-length select {
    font-family: 'Roboto', sans-serif;
    background: #FFFFFF;
    color: #000000;
    border-radius: 8px;
}

/* ---------- Popover menus (dashboard widget three-dot menu,
 * sidebar history-row three-dot menu).
 *
 * Without these overrides the blanket MD3 `button` rule paints every
 * menu row as a sky-blue gradient pill — four stacked CTAs instead of
 * a menu. Restore proper MD3 menu geometry: flat transparent rows on
 * a white elevated surface, tonal hover, red tint on Delete. */
:root[data-theme="md3"] .pb-widget-menu,
:root[data-theme="md3"] .pb-hist-menu {
    background: #FFFFFF;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 6px;
    min-width: 196px;
    box-shadow:
        0 1px 2px rgba(28, 32, 58, .06),
        0 12px 28px -10px rgba(28, 32, 58, .22),
        0 24px 48px -20px rgba(28, 32, 58, .18);
}
:root[data-theme="md3"] .pb-widget-menu button,
:root[data-theme="md3"] .pb-widget-menu form button,
:root[data-theme="md3"] .pb-hist-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #000000 !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: background .12s;
}
:root[data-theme="md3"] .pb-widget-menu button:hover,
:root[data-theme="md3"] .pb-widget-menu form button:hover,
:root[data-theme="md3"] .pb-hist-menu button:hover {
    background: rgba(123, 179, 240, .14) !important;
    color: #000000 !important;
    filter: none;
}
:root[data-theme="md3"] .pb-widget-menu .danger,
:root[data-theme="md3"] .pb-hist-menu .danger {
    color: #8B3A22 !important;   /* deep peach-coral text, reads as "destructive" without screaming */
}
:root[data-theme="md3"] .pb-widget-menu .danger:hover,
:root[data-theme="md3"] .pb-hist-menu .danger:hover {
    background: rgba(216, 122, 92, .14) !important;
    color: #6B2A14 !important;
}

/* ---------- Dashboard widget chrome (dashboard.php) ---------- */
:root[data-theme="md3"] .pb-widget {
    border-radius: 16px;
}
:root[data-theme="md3"] .pb-widget::before {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
:root[data-theme="md3"] .pb-widget-title {
    font-family: 'Roboto', sans-serif !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 16px;
    color: #000000;
}
:root[data-theme="md3"] .pb-widget-meta,
:root[data-theme="md3"] .pb-widget-route {
    color: #000000;
    opacity: .65;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 6px;
}

/* ---------- Chart.js color overrides ----------
 * The base chart script (index.php ~L3914) hard-codes warm gold
 * defaults via Chart.defaults.color / borderColor. CSS can't reach
 * those values, but we can repaint the gridline and tick text by
 * targeting the canvas wrapper background — and for the dataset
 * fill itself, we'd need a JS patch. Leaving that as a known
 * limitation: data series will still render in the base gold
 * until index.php's inline script is taught to read a CSS var
 * (e.g., via getComputedStyle on documentElement). */
:root[data-theme="md3"] .chart-wrap {
    background: #FFFFFF;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 20px;
    box-shadow:
        0 1px 2px rgba(28, 32, 58, .04),
        0 6px 18px -10px rgba(28, 32, 58, .10);
}

/* ---------- Globally force black text on all rendered copy.
 * Spec: "All text should be color #000000." The base sheet uses
 * --cream and --muted in dozens of places; resetting both vars
 * above handles most of them, but a handful of selectors paint
 * literal gold-bright (e.g., active history link, mark, side
 * close) — those are remapped individually above. This rule is
 * the safety net for any spot not enumerated. */
:root[data-theme="md3"] .pb-user,
:root[data-theme="md3"] .pb-answer-label,
:root[data-theme="md3"] .pb-answer-text,
:root[data-theme="md3"] .dt-info {
    color: #000000;
}
