/* =========================================================================
   Liquid Glass theme for the TimetablePlus Filament panel
   Injected via a panel render hook (PanelsRenderHook::STYLES_AFTER).
   A frosted-glass approximation of Apple's Liquid Glass aesthetic:
   translucent blurred surfaces, soft specular borders, layered depth.
   Reversible: remove the renderHook line + this file.
   ========================================================================= */

:root {
    --lg-blur: 22px;
    --lg-saturate: 180%;
    --lg-radius: 18px;
    --lg-surface: rgba(255, 255, 255, 0.55);
    --lg-surface-strong: rgba(255, 255, 255, 0.74);
    --lg-border: rgba(255, 255, 255, 0.65);
    --lg-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
    --lg-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.dark {
    --lg-surface: rgba(24, 27, 38, 0.55);
    --lg-surface-strong: rgba(28, 31, 44, 0.72);
    --lg-border: rgba(255, 255, 255, 0.10);
    --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --lg-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- Page backdrop: a soft gradient for the glass to refract over ------- */
.fi-body {
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(99, 102, 241, 0.28), transparent 60%),
        radial-gradient(1000px 700px at 100% 0%, rgba(168, 85, 247, 0.22), transparent 55%),
        radial-gradient(900px 800px at 50% 120%, rgba(56, 189, 248, 0.18), transparent 55%),
        linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%) !important;
    background-attachment: fixed !important;
}

.dark .fi-body {
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(99, 102, 241, 0.30), transparent 60%),
        radial-gradient(1000px 700px at 100% 0%, rgba(168, 85, 247, 0.20), transparent 55%),
        radial-gradient(900px 800px at 50% 120%, rgba(56, 189, 248, 0.14), transparent 55%),
        linear-gradient(180deg, #0b1020 0%, #0a0f1d 100%) !important;
    background-attachment: fixed !important;
}

/* ---- Shared frosted-glass surface -------------------------------------- */
.fi-topbar nav,
.fi-section,
.fi-ta-ctn,
.fi-wi > *,
.fi-dropdown-panel,
.fi-modal-window,
.fi-simple-main {
    background: var(--lg-surface) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border: 1px solid var(--lg-border) !important;
    box-shadow: var(--lg-shadow), var(--lg-highlight) !important;
}

/* ---- Top navigation bar ------------------------------------------------- */
.fi-topbar nav {
    border-radius: 0 0 var(--lg-radius) var(--lg-radius) !important;
}

/* ---- Cards / sections / tables / widgets -------------------------------- */
.fi-section,
.fi-ta-ctn,
.fi-wi > *,
.fi-simple-main {
    border-radius: var(--lg-radius) !important;
}

/* Dropdowns + modals: a touch more opaque so menus stay legible */
.fi-dropdown-panel,
.fi-modal-window {
    background: var(--lg-surface-strong) !important;
    border-radius: 16px !important;
}

/* ---- Keep tables readable: transparent rows over the glass container ---- */
.fi-ta-table,
.fi-ta-header,
.fi-ta-header-cell,
.fi-ta-row,
.fi-ta-cell {
    background: transparent !important;
}

.fi-ta-row:hover {
    background: rgba(99, 102, 241, 0.07) !important;
}

.dark .fi-ta-row:hover {
    background: rgba(129, 140, 248, 0.10) !important;
}

/* ---- Rounded, slightly glossy controls --------------------------------- */
.fi-btn {
    border-radius: 12px !important;
}

/* Primary button: subtle top-down gloss */
.fi-btn.fi-color-primary,
.fi-btn-color-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)) !important;
}

/* Inputs: faint glass tint */
.fi-input,
.fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.45) !important;
}

.dark .fi-input,
.dark .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ---- Brand wordmark colour (adapts to theme) --------------------------- */
.lg-brand-text {
    color: #0f172a;
}

.dark .lg-brand-text {
    color: #ffffff;
}