/* Local brand fonts (self-contained; no external CDN). @import must lead. */
@import url('../vendor/fonts/jetbrains-mono.css');
@import url('../vendor/fonts/montserrat.css');

/* Brand palettes, keyed off html[data-brand] (injected server-side via the
   {{BRAND_THEME}} placeholder and re-asserted by brand.js from /brand data).
   Default :root palette = sgc (SGC Meet gold/navy, alpha-omega logo).
   Loaded after landing.css/newcall.css so these rules win. */

:root {
    --brand-accent: #cfa13b;
    --brand-accent-bright: #e8c766;
    --brand-accent-dim: #8a6a1e;
    --brand-bg: #0a0c14;
    --brand-bg-elev: #141826;
    --brand-surface: #1e2334;
    --brand-border: #2c3247;
    --brand-text: #f2ecda;
    --brand-text-muted: #9c9176;
    --brand-bg-glow: #161a2b;
    --brand-logo-glow: rgba(207, 161, 59, 0.25);
    --brand-btn-text: #1a140a;
    --brand-font-mono: 'IBM Plex Sans', -apple-system, sans-serif;
    --brand-radius: 12px;
}

/* Smooje / Libations (cooey.club) — the "Cooey Terminal" retro-future console
   aesthetic (matches the pod.cooey.club PinePods theme): red phosphor on
   near-black, JetBrains Mono, scanlines + glow. */
html[data-brand='smooje'] {
    --brand-accent: #ff2129;
    --brand-accent-bright: #ff4650;
    --brand-accent-dim: #7a0e12;
    --brand-bg: #0e1013;
    --brand-bg-elev: #0b0b0e;
    --brand-surface: #050507;
    --brand-border: #7a0e12;
    --brand-text: #e6e7ea;
    --brand-text-muted: #9a9da3;
    --brand-bg-glow: #1a0406;
    --brand-logo-glow: rgba(255, 33, 41, 0.4);
    --brand-btn-text: #0e1013;
    --brand-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --brand-radius: 4px;

    /* Per-page var overrides so pages with their own palettes adopt the Cooey
       Terminal colors: customizeRoom.css (--cr-*) and activeRooms.css. */
    --cr-bg-color: #0e1013;
    --cr-card-bg: rgba(255, 33, 41, 0.05);
    --cr-card-border: #7a0e12;
    --cr-card-border-strong: #ff2129;
    --cr-text: #e6e7ea;
    --cr-text-muted: #9a9da3;
    --cr-input-bg: #050507;
    --cr-input-border: #7a0e12;
    --cr-input-border-focus: #ff2129;
    --cr-accent-green: #ff2129;
    --cr-accent-green-2: #c8161d;
    --primary-bg: #0e1013;
    --container-bg: #0b0b0e;
    --card-bg: #050507;
    --card-bg-hover: #15080a;
    --accent: #ff2129;
    --accent-hover: #ff4650;
    --accent-glow: rgba(255, 33, 41, 0.18);
    --text: #e6e7ea;
    --text-muted: #9a9da3;
    --border: #7a0e12;
}

/* CCISD Meet (meet.ccisd.me — Clear Creek ISD) — clean institutional look:
   Montserrat on dark-neutral surfaces derived from the district blue
   #002395, gold #fcc742 as the action/highlight accent and secondary blue
   #556cb8 for borders/muted accents. Deliberately NONE of the smooje
   CRT/scanline/phosphor effects. */
html[data-brand='ccisd'] {
    --brand-accent: #fcc742;
    --brand-accent-bright: #ffd76e;
    --brand-accent-dim: #556cb8;
    --brand-bg: #0a1128;
    --brand-bg-elev: #101a3c;
    --brand-surface: #16214a;
    --brand-border: #2a3766;
    --brand-text: #f2f5fc;
    --brand-text-muted: #93a0c4;
    --brand-bg-glow: #0e1d55;
    --brand-logo-glow: rgba(252, 199, 66, 0.35);
    --brand-btn-text: #0a1128;
    --brand-font-mono: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --brand-radius: 10px;

    /* Per-page var overrides so pages with their own palettes adopt the
       CCISD colors: customizeRoom.css (--cr-*) and activeRooms.css. */
    --cr-bg-color: #0a1128;
    --cr-card-bg: rgba(85, 108, 184, 0.08);
    --cr-card-border: #2a3766;
    --cr-card-border-strong: #fcc742;
    --cr-text: #f2f5fc;
    --cr-text-muted: #93a0c4;
    --cr-input-bg: #16214a;
    --cr-input-border: #2a3766;
    --cr-input-border-focus: #fcc742;
    --cr-accent-green: #fcc742;
    --cr-accent-green-2: #556cb8;
    --primary-bg: #0a1128;
    --container-bg: #101a3c;
    --card-bg: #16214a;
    --card-bg-hover: #1b2a5e;
    --accent: #fcc742;
    --accent-hover: #ffd76e;
    --accent-glow: rgba(252, 199, 66, 0.18);
    --text: #f2f5fc;
    --text-muted: #93a0c4;
    --border: #2a3766;
}

html,
body {
    background: radial-gradient(ellipse at 50% 35%, var(--brand-bg-glow) 0%, var(--brand-bg) 70%) fixed;
    color: var(--brand-text);
    min-height: 100vh;
}

/* Optional-OIDC sign-in status, top-right of the landing header. */
.site-header-inner {
    position: relative;
}
.auth-status {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-status .auth-user {
    color: var(--brand-accent);
    letter-spacing: 0.04em;
}
.auth-status .auth-link {
    color: var(--brand-text-muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--brand-border);
}
.auth-status .auth-link:hover {
    color: var(--brand-accent-bright);
}

/* Lay the page out as: logo header on top, room box centred in the rest. */
.body-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    padding-top: 32px;
}

.site-header-inner {
    justify-content: center;
}

.brand-logo {
    border-radius: 14px;
    box-shadow: 0 0 24px var(--brand-logo-glow);
    width: 72px;
    height: 72px;
}

.site-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Room-picker card */
.cta {
    width: 100%;
    max-width: 560px;
}

.cta-inner,
.cta-split {
    background: var(--brand-bg-elev) !important;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    flex-direction: column;
    gap: 20px;
    padding: 36px 32px;
}

.cta-slogan h3 {
    color: var(--brand-text);
    text-align: center;
}

/* Input + generate button */
.room-input-wrap {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
}

.form-input {
    background: transparent !important;
    color: var(--brand-text) !important;
    border: none !important;
}

.form-input::placeholder {
    color: var(--brand-text-muted);
}

.room-gen-btn {
    color: var(--brand-accent);
    background: transparent;
    border: none;
    cursor: pointer;
}

.room-gen-btn:hover {
    color: var(--brand-accent-bright);
}

/* Primary action */
.button-primary,
.button-primary:active {
    background: var(--brand-accent) !important;
    color: var(--brand-btn-text) !important;
    border: none !important;
    font-weight: 700;
}

.button-primary:hover {
    background: var(--brand-accent-bright) !important;
}

/* Secondary action */
.button-custom-room {
    background: transparent !important;
    color: var(--brand-accent) !important;
    border: 1px solid var(--brand-accent-dim) !important;
}

.button-custom-room:hover {
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent-bright) !important;
}

.last-room,
#appJoinLastRoom {
    color: var(--brand-text-muted);
}

.last-room a,
#lastRoom {
    color: var(--brand-accent);
}

/* Defensive: ensure stripped marketing chrome stays gone even if some
   legacy CSS tries to display it. */
#snow-container,
.site-footer,
#topSponsors,
#features,
#browsers,
#teams,
#tryEasier,
#poweredBy,
#sponsors,
#pastSponsors,
#advertisers,
#supportUs {
    display: none !important;
}

/* Live room list (landing) */
.rooms-section .rooms-inner {
    max-width: 560px;
    margin: 0 auto;
    gap: 14px;
}
.rooms-title {
    margin: 0 0 4px;
    font-size: 15px;
}
.room-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.room-list-empty {
    color: var(--brand-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
}
.room-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius, 8px);
    color: var(--brand-text);
    text-decoration: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.room-row:hover {
    border-color: var(--brand-accent);
    box-shadow: 0 0 14px rgba(255, 33, 41, 0.25);
}
.room-name {
    font-weight: 600;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--brand-text-muted);
    font-size: 12px;
    white-space: nowrap;
}
.room-state {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid;
}
.room-state-open {
    color: #8fe388;
    border-color: rgba(143, 227, 136, 0.4);
}
.room-state-locked {
    color: var(--brand-accent-bright);
    border-color: var(--brand-accent-dim);
}

/* ===================================================================== */
/* COOEY TERMINAL — retro-future console flourishes (smooje brand only)   */
/* ===================================================================== */

html[data-brand='smooje'],
html[data-brand='smooje'] body,
html[data-brand='smooje'] .form-input,
html[data-brand='smooje'] input,
html[data-brand='smooje'] button {
    font-family: var(--brand-font-mono);
}

/* CRT scanline + faint red vignette overlay across the whole screen. */
html[data-brand='smooje'] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    background:
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.22) 3px),
        radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(255, 33, 41, 0.06) 100%);
    mix-blend-mode: multiply;
}

/* Phosphor-glow headings + brand wordmark, uppercase + tracked out. */
html[data-brand='smooje'] .cta-slogan h3,
html[data-brand='smooje'] #newCallRoomTitle,
html[data-brand='smooje'] #appJoinDescription,
html[data-brand='smooje'] .term-title {
    color: var(--brand-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 0 0 6px rgba(230, 231, 234, 0.25);
}

html[data-brand='smooje'] .brand-logo {
    border-radius: 6px;
    border: 1px solid var(--brand-accent-dim);
    box-shadow:
        0 0 22px var(--brand-logo-glow),
        inset 0 0 12px rgba(255, 33, 41, 0.15);
}

/* The room name reads like a terminal prompt: a blinking red `>` before it.
   Absolute-positioned so it sits inside the field, vertically centred and in
   line with the room-name text; the input is padded to make room for it. */
html[data-brand='smooje'] .room-input-wrap {
    position: relative;
    box-shadow: inset 0 0 12px rgba(255, 33, 41, 0.08);
}
html[data-brand='smooje'] .room-input-wrap::before {
    content: '>';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-accent);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    animation: term-blink 1.1s steps(1) infinite;
}
html[data-brand='smooje'] .room-input-wrap .form-input {
    padding-left: 32px;
}
html[data-brand='smooje'] .form-input {
    caret-color: var(--brand-accent);
    letter-spacing: 0.04em;
}

@keyframes term-blink {
    0%,
    45% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0.15;
    }
}

/* Buttons as bracketed terminal commands. */
html[data-brand='smooje'] .button-primary,
html[data-brand='smooje'] .button-custom-room {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600 !important;
    border-radius: var(--brand-radius) !important;
}
html[data-brand='smooje'] .button-primary {
    box-shadow: 0 0 18px rgba(255, 33, 41, 0.35);
}
html[data-brand='smooje'] .button-primary:hover {
    box-shadow: 0 0 26px rgba(255, 70, 80, 0.55);
}

/* Corner brackets on the room-picker card — the console frame. */
html[data-brand='smooje'] .cta-inner {
    position: relative;
}
html[data-brand='smooje'] .cta-inner::before,
html[data-brand='smooje'] .cta-inner::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--brand-accent);
    opacity: 0.7;
}
html[data-brand='smooje'] .cta-inner::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}
html[data-brand='smooje'] .cta-inner::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

/* ===================================================================== */
/* CCISD — clean institutional styling (ccisd brand only). Montserrat,    */
/* district blue + gold; explicitly NO scanlines/CRT/glow flourishes.     */
/* ===================================================================== */

html[data-brand='ccisd'],
html[data-brand='ccisd'] body,
html[data-brand='ccisd'] .form-input,
html[data-brand='ccisd'] input,
html[data-brand='ccisd'] button {
    font-family: var(--brand-font-mono);
}

/* Card: soft navy shadow + a gold district ribbon across the top. */
html[data-brand='ccisd'] .cta-inner,
html[data-brand='ccisd'] .cta-split {
    border-top: 4px solid #fcc742;
    box-shadow: 0 12px 32px rgba(3, 8, 26, 0.5);
}

/* The district wordmark SVG is #002395-on-transparent; give it a white
   tile so it reads on the navy page, ringed in soft gold. */
html[data-brand='ccisd'] .brand-logo {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(252, 199, 66, 0.3);
    object-fit: contain;
    padding: 8px;
}

/* Headings: clean sentence case (no smooje uppercase/tracking/glow). */
html[data-brand='ccisd'] .cta-slogan h3,
html[data-brand='ccisd'] #newCallRoomTitle,
html[data-brand='ccisd'] #appJoinDescription {
    color: var(--brand-text);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: none;
}

html[data-brand='ccisd'] .form-input {
    caret-color: var(--brand-accent);
}

/* Buttons: solid gold primary / blue-outlined secondary, no glow. */
html[data-brand='ccisd'] .button-primary,
html[data-brand='ccisd'] .button-custom-room {
    letter-spacing: 0.06em;
    font-weight: 700 !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: none;
}

/* Replace the shared red-tinted room-row hover glow with a gold one. */
html[data-brand='ccisd'] .room-row:hover {
    box-shadow: 0 0 14px rgba(252, 199, 66, 0.25);
}