/* ═══════════════════════════════════════════════════════════════════════════
   CONFERIENCE THEME — visual "skin" migrated from the reference landing site
   (https://conferience-landing-qjg4.vercel.app/).  PURE CSS, no logic/markup
   changes. Loaded AFTER css/styles.css so it overrides only presentation.

   Two layers:
   1) DESIGN LANGUAGE (theme-agnostic) — the airy/soft/clean "feel": Inter type,
      generous whitespace, large radii, borderless cards with soft shadows.
      Applied to ALL four themes so the whole app reads like the reference.
   2) PALETTE — the reference's exact sky-blue palette is mapped onto the
      ACADEMIC theme (the default) and the DARK theme. The LIGHT and GEOMETRIC
      themes keep their own distinct palettes, so the Settings theme switcher
      still visibly changes the look (that was the reported "theme toggle" issue:
      a previous pass had forced every theme to the same two palettes).

   TO REVERT: remove the <link> to this file in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   LAYER 2 — PALETTE. The app ships only two themes now: LIGHT and DARK, both
   painted with the reference site's exact sky-blue palette (light silver page +
   navy text, or near-black page + white text, sky accents in both).
   html[data-theme="x"] (0,1,1) outranks the original [data-theme="x"] (0,1,0).
   ─────────────────────────────────────────────────────────────────────────── */
/* LIGHT → Conferience LIGHT */
html[data-theme="light"] {
    --c-canvas:        #f6f8fb;   /* page bg — hsl(210 20% 98%) */
    --c-surface:       #ffffff;
    --c-surface-2:     #eef2f7;
    --c-surface-3:     #e7edf3;
    --c-surface-4:     #dbe3ec;
    --c-text:          #0f1729;   /* hsl(222 47% 11%) */
    --c-text-variant:  #64748b;   /* hsl(215 16% 47%) */
    --c-text-faint:    #94a3b8;
    --c-accent:        #0ea5e9;   /* hsl(199 89% 48%) sky */
    --c-accent-ring:   rgba(14, 165, 233, 0.25);
    --c-primary:       #0ea5e9;
    --c-on-primary:    #ffffff;
    --c-border:        #d7dee6;   /* hsl(214 20% 88%) */
    --c-border-strong: #c3ccd7;
    --c-error:         #ef4444;
    --c-tertiary:      #0284c7;
    --c-badge:         #e0f2fe;
    --c-badge-text:    #075985;
    --c-shadow:        0 1px 2px rgba(2,8,20,0.04), 0 10px 30px -14px rgba(2,8,20,0.14);
    --c-scrollbar:     #cbd5e1;
    --c-pattern:       none;
    /* minimalist light chrome (top bar + sidebar) */
    --c-chrome-bg:          #ffffff;
    --c-chrome-fg:          #0f1729;
    --c-chrome-accent:      #0ea5e9;
    --c-chrome-muted:       #64748b;
    --c-chrome-border:      #e6ebf1;
    --c-chrome-hover:       #f1f5f9;
    --c-chrome-active-bg:   #0ea5e9;
    --c-chrome-active-text: #ffffff;
}
/* DARK → Conferience DARK */
html[data-theme="dark"] {
    --c-canvas:        #060709;   /* hsl(225 15% 2%) */
    --c-surface:       #141416;   /* hsl(0 0% 8%) */
    --c-surface-2:     #1b1b1e;
    --c-surface-3:     #232327;
    --c-surface-4:     #2d2d32;
    --c-text:          #ffffff;
    --c-text-variant:  #9aa0a6;
    --c-text-faint:    #6b7177;
    --c-accent:        #0ea5e9;
    --c-accent-ring:   rgba(14, 165, 233, 0.30);
    --c-primary:       #0ea5e9;
    --c-on-primary:    #ffffff;
    --c-border:        #313135;
    --c-border-strong: #43434a;
    --c-error:         #ef4444;
    --c-tertiary:      #38bdf8;
    --c-badge:         rgba(14, 165, 233, 0.16);
    --c-badge-text:    #7dd3fc;
    --c-shadow:        0 1px 2px rgba(0,0,0,0.4), 0 14px 34px -18px rgba(0,0,0,0.7);
    --c-scrollbar:     #3a3a40;
    --c-pattern:       none;
    --c-chrome-bg:          #0b0c0e;
    --c-chrome-fg:          #ffffff;
    --c-chrome-accent:      #0ea5e9;
    --c-chrome-muted:       #9aa0a6;
    --c-chrome-border:      #1f2024;
    --c-chrome-hover:       #17181b;
    --c-chrome-active-bg:   #0ea5e9;
    --c-chrome-active-text: #ffffff;
}
/* ───────────────────────────────────────────────────────────────────────────
   LAYER 1 — DESIGN LANGUAGE (all four themes)
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. TYPOGRAPHY — one clean modern sans (Inter) everywhere. (Icons keep their
   Material Symbols font; only text elements are remapped.) */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[class*="font-headline"], [class*="font-body"], [class*="font-label"],
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* 2. SOFTEN — cards lose the hard border and rounded harder; depth comes from a
   soft shadow instead. (Dark themes keep a faint hairline so cards separate from
   the near-black canvas.) */
[data-theme] .widget-card {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--c-shadow);
    transition: box-shadow 0.2s ease;
}
[data-theme] .widget-card:hover {
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(2,8,20,0.06), 0 18px 44px -16px rgba(2,8,20,0.20);
}
html[data-theme="dark"] .widget-card {
    border: 1px solid var(--c-border);
}
/* Modals: rounder + lifted (they carry .widget-card). */
#app-modal > .relative,
#confirm-modal > .relative {
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(2,8,20,0.35);
}

/* 3. INPUTS + BUTTONS — rounded inputs; pill-shaped primary CTAs (the reference's
   signature). The sidebar nav items get a soft rounded highlight, never a pill. */
input, select, textarea, .rt-editor { border-radius: 12px; }
button.bg-primary:not(.nav-btn),
.interactive-btn.bg-primary:not(.nav-btn) { border-radius: 9999px; }
[data-theme] #app-sidebar .nav-btn { border-radius: 12px; }

/* 4. WHITESPACE — make the dashboard "airy". More room around each view's
   content and inside content cards. Scoped to the in-app content views; the
   full-bleed work surfaces (Grading/Schedule/Chat) and the login/modals are left
   alone so their layouts and drag-and-drop don't shift. */
@media (min-width: 769px) {
    #submissions-list, #candidate-home, #reviewer-queue, #reviewer-leaderboard,
    #analytics-view, #admin-candidates, #admin-reviewers, #admin-feedback {
        padding: 2.25rem 2rem !important;
    }
}
/* Generous, uniform padding inside in-app content cards (tables stay flush-bleed
   so their rounded corners frame the rows). High specificity beats the p-* utils. */
#app-main .widget-card:not(.overflow-x-auto):not(.overflow-hidden) {
    padding: 1.75rem;
}
/* A touch more breathing room under each page title. */
#app-main .spa-view > header { margin-bottom: 1.75rem; }
/* Airier table rows. */
#app-main .widget-card table th,
#app-main .widget-card table td { padding-top: 0.95rem; padding-bottom: 0.95rem; }

/* 5. FOOTER — simple + elegant: sits on the canvas with a single hairline rule,
   not a heavy slab. (Colours follow the active theme automatically.) */
.app-footer {
    background-color: var(--c-canvas) !important;
    border-top: 1px solid var(--c-border);
}
.footer-copyright { border-top-color: var(--c-border); }

/* ───────────────────────────────────────────────────────────────────────────
   6. HERO LANGUAGE — the reference's landing hero: heavy Inter display headings
   with tight tracking, and a soft ambient sky glow behind the login screen.
   ─────────────────────────────────────────────────────────────────────────── */
/* Bold, tightly-tracked display headings (page titles + gateway headline). */
.font-headline-xl, .text-headline-xl,
#gateway-view h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}
/* Make the gateway read like a hero: larger headline, and the wordmark logo a
   touch bigger, centred over an ambient glow. */
/* Login hero "Abstracts": sized to sit in proportion with the Conferience logo
   above it and the app's type scale (was clamp(2rem,5vw,2.9rem) — oversized). */
#gateway-view h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
#gateway-logo.brand-hero { height: 76px; width: 300px; }

/* Ambient sky glow (like the hero's radial light) behind the sign-in area. Purely
   decorative; sits below the content and never intercepts clicks. */
#gateway-view::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(760px 560px at 50% -12%, rgba(14, 165, 233, 0.20), transparent 60%),
        radial-gradient(700px 520px at 92% 8%,   rgba(14, 165, 233, 0.12), transparent 60%),
        radial-gradient(680px 560px at 4% 46%,   rgba(14, 165, 233, 0.10), transparent 58%);
    pointer-events: none;
    z-index: 0;
}
/* Keep the gateway's own content above the glow. */
#gateway-view > * { position: relative; z-index: 1; }

/* Ambient sky glow on the in-app work surface — soft blue radial light bleeding
   in from the corners, anchored to the viewport (like the reference's page
   background). Present in BOTH light and dark; just dialled softer on light so
   the content stays crisp. */
#app-main {
    background-repeat: no-repeat;
    background-attachment: fixed;
}
[data-theme="dark"] #app-main {
    background-image:
        radial-gradient(760px 520px at 92% -6%,  rgba(14, 165, 233, 0.16), transparent 62%),
        radial-gradient(680px 560px at 4% 40%,   rgba(14, 165, 233, 0.09), transparent 58%);
}
[data-theme="light"] #app-main {
    background-image:
        radial-gradient(760px 520px at 92% -6%,  rgba(14, 165, 233, 0.10), transparent 62%),
        radial-gradient(680px 560px at 4% 40%,   rgba(14, 165, 233, 0.06), transparent 58%);
}