/*
 * Glass look for the signed-in panel (committee, participants, coaches): frosted translucent surfaces over soft colour
 * glows, in Day (default) or Night, switched in the header (base.html) and remembered per device (<html data-theme>).
 * Loaded only on signed-in pages (body.glass-ui), after Tailwind and base.css. Tailwind's utilities live in a CSS
 * layer, so these plain rules win without !important; they recolour the existing markup, page by page unchanged.
 */

/* ---------- Colours ---------- */
:root {
    --g-bg: #EEF7FF;
    --g-text: #0A2A6B;
    --g-sub: #3E5276;
    --g-faint: #5B6E8E;
    --g-glass: rgba(255, 255, 255, 0.62);
    --g-glass-strong: rgba(255, 255, 255, 0.78);
    --g-edge: rgba(255, 255, 255, 0.9);
    --g-line: rgba(11, 69, 181, 0.1);
    --g-hi: rgba(255, 255, 255, 0.85);
    --g-shadow: 0 16px 40px rgba(14, 79, 122, 0.12);
    --g-chip: rgba(11, 69, 181, 0.08);
    --g-accent: #0B45B5;
    --g-accent-text: #ffffff;
    --g-field: rgba(255, 255, 255, 0.8);
    --g-glow-a: #3DB6F5; --g-glow-a-o: 0.5;
    --g-glow-b: #84D4C7; --g-glow-b-o: 0.55;
    --g-glow-c: #F7D61B; --g-glow-c-o: 0.38;
    --g-glow-d: #C9A7F2; --g-glow-d-o: 0.42;
}

:root[data-theme="night"] {
    color-scheme: dark;
    --g-bg: #071d4f;
    --g-text: #EAF2FF;
    --g-sub: rgba(234, 242, 255, 0.8);
    --g-faint: rgba(234, 242, 255, 0.66);
    --g-glass: rgba(255, 255, 255, 0.1);
    --g-glass-strong: rgba(12, 32, 84, 0.72);
    --g-edge: rgba(255, 255, 255, 0.2);
    --g-line: rgba(255, 255, 255, 0.12);
    --g-hi: rgba(255, 255, 255, 0.28);
    --g-shadow: 0 18px 44px rgba(3, 12, 40, 0.4);
    --g-chip: rgba(194, 236, 255, 0.12);
    --g-accent: #C2ECFF;
    --g-accent-text: #0A2A6B;
    --g-field: rgba(255, 255, 255, 0.08);
    --g-glow-a: #0B45B5; --g-glow-a-o: 0.8;
    --g-glow-b: #14A39A; --g-glow-b-o: 0.6;
    --g-glow-c: #F7D61B; --g-glow-c-o: 0.22;
    --g-glow-d: #822384; --g-glow-d-o: 0.45;
}

/* ---------- Page and glows ---------- */
body.glass-ui {
    background: var(--g-bg);
    color: var(--g-text);
    transition: background-color 0.4s, color 0.4s;
}

.glass-glows { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glass-glows span { position: absolute; border-radius: 50%; filter: blur(110px); transition: background-color 0.5s, opacity 0.5s; }
.glass-glows span:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: var(--g-glow-a); opacity: var(--g-glow-a-o); }
.glass-glows span:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; top: 12vh; background: var(--g-glow-b); opacity: var(--g-glow-b-o); }
.glass-glows span:nth-child(3) { width: 34vmax; height: 34vmax; left: 30vw; bottom: -18vmax; background: var(--g-glow-c); opacity: var(--g-glow-c-o); }
.glass-glows span:nth-child(4) { width: 30vmax; height: 30vmax; right: 14vw; bottom: 4vh; background: var(--g-glow-d); opacity: var(--g-glow-d-o); }

/* ---------- Glass surfaces: cards, dialogs, sheets ---------- */
.glass-ui .panel-main .bg-white,
.glass-ui .ytac-dialog,
.glass-ui .phone-sheet-panel {
    background-color: var(--g-glass);
    border-color: var(--g-edge);
    transition: background-color 0.4s, border-color 0.4s;
}

.glass-ui .panel-main :is(.rounded-2xl, .rounded-3xl).bg-white,
.glass-ui .ytac-dialog,
.glass-ui .phone-sheet-panel {
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow);
}

.glass-ui .ytac-dialog, .glass-ui .phone-sheet-panel { background-color: var(--g-glass-strong); color: var(--g-text); }
.glass-ui .glass-hero { background-color: var(--g-glass-strong); }

/* ---------- Header: a floating glass bar ---------- */
.glass-ui .panel-header {
    background-color: var(--g-glass);
    border-color: var(--g-edge);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    transition: background-color 0.4s;
}

@media (min-width: 1024px) {
    .glass-ui .panel-header {
        top: 12px;
        margin: 12px 24px 0 12px;
        border: 1px solid var(--g-edge);
        border-radius: 999px;
        box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow);
    }
}

.glass-search {
    align-items: center;
    gap: 8px;
    width: min(320px, 32vw);
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--g-field);
    border: 1px solid var(--g-line);
    color: var(--g-sub);
}

.glass-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--g-text); font: inherit; font-size: 14px; }
.glass-search:focus-within { border-color: var(--g-accent); }

/* Day / night switch */
.theme-switch {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--g-line);
    background: #C2ECFF;
    cursor: pointer;
    touch-action: pan-y;
    transition: background-color 0.3s;
}

.theme-switch i { position: absolute; top: 12px; font-size: 14px; transition: color 0.3s; }
.theme-switch-sun { left: 11px; color: #E0A800; }
.theme-switch-moon { right: 11px; color: rgba(10, 42, 107, 0.4); }
.theme-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(4, 16, 48, 0.28);
    transition: left 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
:root[data-theme="night"] .theme-switch { background: #0A2A6B; border-color: rgba(255, 255, 255, 0.28); }
:root[data-theme="night"] .theme-switch-sun { color: rgba(255, 255, 255, 0.45); }
:root[data-theme="night"] .theme-switch-moon { color: #F7D61B; }
:root[data-theme="night"] .theme-switch-knob { left: 35px; }
.theme-switch:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }

/* ---------- Side menu (computers): a floating glass panel ---------- */
.glass-ui #appSidebar {
    background-image: none;
    background-color: var(--g-glass-strong);
    color: var(--g-text);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-right: 1px solid var(--g-edge);
}

@media (min-width: 1024px) {
    .glass-ui #appSidebar {
        top: 12px;
        height: calc(100vh - 24px);
        margin: 12px 0 12px 12px;
        border: 1px solid var(--g-edge);
        border-radius: 28px;
        box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow);
        overflow: hidden;
    }
}

.glass-ui #appSidebar .border-white\/10 { border-color: var(--g-line); }
.glass-ui #appSidebar .text-white\/45 { color: var(--g-faint); }
.glass-ui #appSidebar .text-white\/60 { color: var(--g-sub); }
.glass-ui #appSidebar :is(.text-white\/75, .text-white\/70) { color: var(--g-text); }
.glass-ui #appSidebar .hover\:bg-white\/10:hover { background-color: var(--g-chip); }
.glass-ui #appSidebar .hover\:text-white:hover { color: var(--g-text); }
.glass-ui #appSidebar .bg-white\/10 { background-color: var(--g-chip); }
.glass-ui #appSidebar a[aria-current="page"] {
    background-color: var(--g-accent);
    color: var(--g-accent-text);
    box-shadow: 0 8px 22px rgba(11, 69, 181, 0.28);
}
.glass-ui #appSidebar nav { scrollbar-color: var(--g-line) transparent; }

/* ---------- Phone bar: a floating glass capsule ---------- */
@media (max-width: 1023px) {
    .glass-ui .phone-bar {
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        padding: 6px;
        border-radius: 20px;
        border: 1px solid var(--g-edge);
        background: var(--g-glass-strong);
        backdrop-filter: blur(26px) saturate(170%);
        -webkit-backdrop-filter: blur(26px) saturate(170%);
        box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow);
    }
    .glass-ui .phone-bar-button { border-radius: 14px; color: var(--g-sub); }   /* Inside the bar's 20px corners */
    .glass-ui .phone-bar-button[aria-current="page"] { background: var(--g-accent); color: var(--g-accent-text); }
    .glass-ui .panel-main { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
}
.glass-ui .phone-sheet-item { border-color: var(--g-line); color: var(--g-text); background: var(--g-field); }
.glass-ui .phone-sheet-item[aria-current="page"] { background: var(--g-chip); border-color: var(--g-accent); }

/* ---------- Night: the existing colours, remapped ---------- */
:root[data-theme="night"] .glass-ui :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--g-text); }
:root[data-theme="night"] .glass-ui :is(.text-gray-600, .text-gray-500) { color: var(--g-sub); }
:root[data-theme="night"] .glass-ui .text-gray-400 { color: var(--g-faint); }
:root[data-theme="night"] .glass-ui .text-gray-300 { color: rgba(234, 242, 255, 0.45); }
:root[data-theme="night"] .glass-ui .text-ytac-blue { color: #C2ECFF; }
:root[data-theme="night"] .glass-ui .text-ytac-purple { color: #E7BDF2; }
:root[data-theme="night"] .glass-ui .text-ytac-green { color: #6FE3CF; }
:root[data-theme="night"] .glass-ui :is(.bg-gray-50, .bg-gray-50\/60, .bg-\[\#F3F7F9\], .bg-\[\#EEF4F7\]) { background-color: rgba(255, 255, 255, 0.06); }
:root[data-theme="night"] .glass-ui .bg-gray-100 { background-color: rgba(255, 255, 255, 0.1); }
:root[data-theme="night"] .glass-ui :is(.bg-ytac-blue\/5, .bg-ytac-blue\/10) { background-color: rgba(194, 236, 255, 0.12); }
:root[data-theme="night"] .glass-ui .hover\:bg-gray-50:hover,
:root[data-theme="night"] .glass-ui .hover\:bg-gray-50\/80:hover { background-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="night"] .glass-ui :is(.border-gray-100, .border-gray-200, .border-ytac-blue\/15, .border-ytac-blue\/20) { border-color: rgba(255, 255, 255, 0.16); }
:root[data-theme="night"] .glass-ui .divide-gray-100 > :not(:last-child) { border-color: rgba(255, 255, 255, 0.1); }
:root[data-theme="night"] .glass-ui .panel-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    background-color: var(--g-field);
    color: var(--g-text);
    border-color: rgba(255, 255, 255, 0.2);
}
:root[data-theme="night"] .glass-ui option { background: #0d2a63; color: #ffffff; }
:root[data-theme="night"] .glass-ui ::placeholder { color: rgba(234, 242, 255, 0.5); }
:root[data-theme="night"] .glass-ui .status-message[data-tone="error"] { background: rgba(225, 29, 72, 0.16); border-color: rgba(251, 113, 133, 0.4); color: #FECDD3; }
:root[data-theme="night"] .glass-ui .status-message[data-tone="success"] { background: rgba(20, 163, 154, 0.18); border-color: rgba(94, 234, 212, 0.35); color: #A7F3D0; }
:root[data-theme="night"] .glass-ui .bg-amber-50 { background-color: rgba(245, 158, 11, 0.16); }
:root[data-theme="night"] .glass-ui .text-amber-700, :root[data-theme="night"] .glass-ui .text-amber-800 { color: #FCD34D; }
:root[data-theme="night"] .glass-ui .bg-red-50 { background-color: rgba(225, 29, 72, 0.16); }
:root[data-theme="night"] .glass-ui .text-red-600 { color: #FDA4AF; }
:root[data-theme="night"] .glass-ui .bg-white\/95 { background-color: var(--g-glass-strong); }
/* A white button / link (e.g. "New competition") stays readable */
:root[data-theme="night"] .glass-ui .panel-main :is(a, button).bg-white { background-color: rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-motion: reduce) {
    body.glass-ui, .glass-glows span, .theme-switch, .theme-switch-knob { transition: none; }
}

/* Phones: a compact switch so the header fits (avatar, title, search, bell, switch) */
@media (max-width: 639px) {
    .glass-ui .panel-header { gap: 8px; padding-left: 12px; padding-right: 12px; }
    .theme-switch { width: 58px; height: 34px; }
    .theme-switch i { top: 9px; font-size: 12px; }
    .theme-switch-sun { left: 8px; }
    .theme-switch-moon { right: 8px; }
    .theme-switch-knob { width: 28px; height: 28px; top: 2px; left: 2px; }
    :root[data-theme="night"] .theme-switch-knob { left: 26px; }
}

/* ---------- Glass lite: phones and tablets ----------
   Live blur (backdrop-filter) on every card plus four huge blurred glows made taps slow on phones: the graphics chip
   redraws the blur behind each layer. Touch devices get the same look the cheap way: no blur on cards, dialogs and
   the side menu (a more solid frosted colour instead), the glows as one plain gradient (no filter), smaller
   shadows, and a lighter blur only on the header and the bottom bar. Computers keep the full glass above. */
@media (hover: none), (pointer: coarse) {
    :root {
        --g-glass: rgba(255, 255, 255, 0.74);
        --g-glass-strong: rgba(255, 255, 255, 0.86);
        --g-shadow: 0 4px 14px rgba(14, 79, 122, 0.08);
    }
    :root[data-theme="night"] {
        --g-glass: rgba(255, 255, 255, 0.09);
        --g-glass-strong: rgba(13, 34, 88, 0.9);
        --g-shadow: 0 4px 14px rgba(3, 12, 40, 0.3);
    }

    /* Glows: one painted gradient instead of four blurred circles */
    .glass-glows span { display: none; }
    .glass-glows {
        background:
            radial-gradient(70vmax 70vmax at 0% 0%, rgba(61, 182, 245, 0.42), transparent 60%),
            radial-gradient(60vmax 60vmax at 100% 30%, rgba(132, 212, 199, 0.48), transparent 60%),
            radial-gradient(55vmax 55vmax at 40% 105%, rgba(247, 214, 27, 0.28), transparent 60%),
            radial-gradient(50vmax 50vmax at 90% 92%, rgba(201, 167, 242, 0.38), transparent 60%);
    }
    :root[data-theme="night"] .glass-glows {
        background:
            radial-gradient(70vmax 70vmax at 0% 0%, rgba(11, 69, 181, 0.75), transparent 60%),
            radial-gradient(60vmax 60vmax at 100% 30%, rgba(20, 163, 154, 0.5), transparent 60%),
            radial-gradient(55vmax 55vmax at 40% 105%, rgba(247, 214, 27, 0.16), transparent 60%),
            radial-gradient(50vmax 50vmax at 90% 92%, rgba(130, 35, 132, 0.45), transparent 60%);
    }

    /* No live blur on cards, dialogs, sheets and the side menu */
    .glass-ui .panel-main :is(.rounded-2xl, .rounded-3xl).bg-white,
    .glass-ui .ytac-dialog,
    .glass-ui .phone-sheet-panel,
    .glass-ui #appSidebar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* A light blur only where it shows most: the header and the bottom bar */
    .glass-ui .panel-header,
    .glass-ui .phone-bar {
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
    }
}

/* Sign-in page (auth/login.html): uses .panel-main for the glass cards, but has no phone bar to make room for */
.glass-ui .panel-main.auth-main { padding-bottom: 2rem; }
:root[data-theme="night"] .glass-ui .panel-main .bg-white\/80 { background-color: var(--g-field); }

/* ---------- Registration form (auth/register.html): the panel's glass + Day / Night, plus its own pieces ---------- */
:root[data-theme="night"] .glass-ui .status-message:not([data-tone]) { background: rgba(194, 236, 255, 0.1); border-color: rgba(194, 236, 255, 0.25); color: #C2ECFF; }
:root[data-theme="night"] .glass-ui .category-option input:checked + .category-option-card { background: rgba(194, 236, 255, 0.12); border-color: #C2ECFF; box-shadow: 0 0 0 2px #C2ECFF; }
:root[data-theme="night"] .glass-ui .bg-gray-200 { background-color: rgba(255, 255, 255, 0.18); }
:root[data-theme="night"] .glass-ui :is(.bg-white\/60, .bg-white\/70, .bg-white\/90) { background-color: var(--g-field); }
:root[data-theme="night"] .glass-ui .bg-green-50 { background-color: rgba(20, 163, 154, 0.16); }
:root[data-theme="night"] .glass-ui .border-green-200 { border-color: rgba(94, 234, 212, 0.35); }
:root[data-theme="night"] .glass-ui .bg-\[\#F0FAF8\] { background-color: var(--g-glass-strong); }
:root[data-theme="night"] .glass-ui :is(.border-ytac-blue\/10, .border-ytac-mint\/60) { border-color: rgba(255, 255, 255, 0.18); }
/* A frosted top bar (sign-in and registration pages) */
.glass-ui .glass-topbar { background: var(--g-glass); border-bottom: 1px solid var(--g-edge); }
.glass-ui footer.glass-footer { background: transparent; border-color: var(--g-line); }

/* ---------- Landing page (index.html): glass lite, always Day, in the page's own background tones ----------
   Light base and dot grid as before, with soft mint / teal / purple glows painted (no blur) behind see-through light
   sections; every card becomes frosted glass without live blur; only the navigation bar blurs. Dark sections (video,
   pathway, gallery, footer) keep their look. Loaded without the Day / Night script, so it's always Day. */
.glass-landing .landing-glows {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60vmax 60vmax at 0% 10%, rgba(132, 212, 199, 0.35), transparent 60%),
        radial-gradient(55vmax 55vmax at 100% 40%, rgba(0, 96, 122, 0.12), transparent 60%),
        radial-gradient(50vmax 50vmax at 30% 100%, rgba(130, 35, 132, 0.10), transparent 60%),
        radial-gradient(45vmax 45vmax at 85% 95%, rgba(61, 182, 245, 0.14), transparent 60%);
}

/* Light sections let the glows show through (the body keeps the light base tone and dot grid) */
.glass-landing :is(.category-section, .recognition, .reviews, .faq, .contact) { background-color: transparent; }

/* Frosted cards (no live blur: lite on every device) */
.glass-landing main :is(.rounded-2xl, .rounded-3xl):is(.bg-white, .bg-\[\#F9FBFC\]):not(.experience *):not(.gallery *),
.glass-landing .track-face,
.glass-landing .pathway-node,
.glass-landing .doc-card,
.glass-landing .ytac-logo-panel {
    background-color: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(14, 79, 122, 0.10);
}
.glass-landing .track-face { background-color: rgba(255, 255, 255, 0.82); }
.glass-landing .pathway-node { background-color: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.7); }   /* On the coloured pathway */

/* Fields: frosted too */
.glass-landing main :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):is(.bg-white, .bg-\[\#F9FBFC\]) {
    background-color: rgba(255, 255, 255, 0.78);
    border-color: rgba(11, 69, 181, 0.12);
}

/* Navigation bar: a frosted bar, the page's only blur */
.glass-landing #navbar {
    background-color: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(14, 79, 122, 0.08);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Error pages (partials/error_layout.html): the big code stays readable at night */
:root[data-theme="night"] .glass-ui .error-code { background-image: linear-gradient(135deg, #C2ECFF, #84D4C7); }