/* ==========================================================
   Optional Liquid Glass appearance
   Every visual override is scoped to html[data-ui-theme].
   Removing the attribute restores the original application.
   ========================================================== */

.ui-theme-switch {
    position: relative;
    display: inline-flex;
    width: 2.5rem;
    height: 1.45rem;
    flex: 0 0 auto;
    align-items: center;
    padding: 2px;
    border-radius: 999px;
    background: #d7dce1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .14);
    transition: background-color .25s ease, box-shadow .25s ease;
    direction: ltr;
}

.ui-theme-switch > span {
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .25);
    transform: translateX(0);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.ui-theme-toggle[aria-pressed="true"] .ui-theme-switch > span {
    transform: translateX(1.02rem);
}

.ui-theme-toggle[aria-pressed="true"] .ui-theme-switch {
    background: var(--color-primary, #f57c00);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #f57c00) 16%, transparent),
                inset 0 1px 2px rgba(15, 23, 42, .12);
}

html[data-ui-theme="liquid"] {
    --liquid-canvas: #eaf1f3;
    --liquid-canvas-warm: #fff4e8;
    --liquid-ink: #17212f;
    --liquid-muted: #59687a;
    --liquid-subtle: #718096;
    --liquid-glass-soft: rgba(255, 255, 255, .42);
    --liquid-glass: rgba(255, 255, 255, .64);
    --liquid-glass-strong: rgba(250, 253, 254, .82);
    --liquid-glass-floating: rgba(248, 252, 253, .9);
    --liquid-line: rgba(255, 255, 255, .8);
    --liquid-line-muted: rgba(91, 111, 128, .2);
    --liquid-shadow-1: 0 10px 30px rgba(34, 52, 67, .1), inset 0 1px 0 rgba(255, 255, 255, .7);
    --liquid-shadow: 0 20px 55px rgba(37, 55, 70, .14), 0 2px 10px rgba(37, 55, 70, .07), inset 0 1px 0 rgba(255,255,255,.68);
    --liquid-shadow-hover: 0 26px 70px rgba(37, 55, 70, .19), 0 4px 14px rgba(37, 55, 70, .09), inset 0 1px 0 rgba(255,255,255,.78);
    --liquid-blur: 20px;
    --liquid-blur-deep: 28px;
    --liquid-action: color-mix(in srgb, var(--color-primary, #f57c00) 70%, #17212f);
    --liquid-focus: color-mix(in srgb, var(--color-primary, #f57c00) 52%, #17212f);
    --priority-critical: #b42335;
    --priority-important: #a4520a;
    --priority-normal: #315f91;
    background: var(--liquid-canvas);
}

html[data-ui-theme="liquid"] body {
    color: var(--liquid-ink);
    background:
        radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--color-primary, #f57c00) 24%, transparent), transparent 30rem),
        radial-gradient(circle at 12% 22%, rgba(83, 181, 204, .22), transparent 34rem),
        radial-gradient(circle at 72% 86%, color-mix(in srgb, var(--color-primary, #f57c00) 12%, rgba(116, 208, 168, .15)), transparent 30rem),
        linear-gradient(145deg, #eef6f7 0%, #f8f6f1 52%, #edf2f5 100%);
    isolation: isolate;
}

html[data-ui-theme="liquid"] body::before,
html[data-ui-theme="liquid"] body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(12px);
    opacity: .75;
}

html[data-ui-theme="liquid"] body::before {
    width: min(44rem, 70vw);
    height: min(44rem, 70vw);
    inset: -18rem auto auto -15rem;
    background: linear-gradient(135deg, rgba(83, 189, 224, .4), color-mix(in srgb, var(--color-primary, #f57c00) 14%, transparent));
}

html[data-ui-theme="liquid"] body::after {
    width: min(38rem, 64vw);
    height: min(38rem, 64vw);
    inset: auto -13rem -17rem auto;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #f57c00) 30%, transparent), rgba(255, 221, 167, .12));
}

html[data-ui-theme="liquid"] :where(#login-view, #viewer-landing-view, #dashboard-view, #admin-view) {
    background: transparent !important;
}

/* Surface hierarchy: canvas -> content glass -> floating glass. */
html[data-ui-theme="liquid"] :where(
    [class~="bg-surface"],
    [class~="bg-surface/80"],
    [class~="bg-surface/95"]
) {
    background-color: var(--liquid-glass-strong) !important;
    border-color: var(--liquid-line-muted) !important;
}

html[data-ui-theme="liquid"] :where(
    [class~="bg-surface-container"],
    [class~="bg-surface-container/20"],
    [class~="bg-surface-container/30"],
    [class~="bg-surface-container/40"],
    [class~="bg-surface-container/50"],
    [class~="bg-surface-container/60"],
    [class~="bg-surface-container/70"]
) {
    background-color: var(--liquid-glass-soft) !important;
}

html[data-ui-theme="liquid"] :where(.dashboard-draggable-module.glass-panel, .admin-accordion, .module-card, .card, .vl-project-card, .editor-note-card, .public-request-card) {
    background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.49)) !important;
    border: 1px solid var(--liquid-line) !important;
    box-shadow: var(--liquid-shadow) !important;
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(145%);
    backdrop-filter: blur(var(--liquid-blur)) saturate(145%);
}

html[data-ui-theme="liquid"] :where(header.glass-panel, #dashboard-header) {
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)) !important;
    border-width: 0 0 1px !important;
    border-color: rgba(255,255,255,.82) !important;
    box-shadow: 0 8px 30px rgba(42, 61, 77, .09), inset 0 1px 0 rgba(255,255,255,.82) !important;
    -webkit-backdrop-filter: blur(var(--liquid-blur-deep)) saturate(150%);
    backdrop-filter: blur(var(--liquid-blur-deep)) saturate(150%);
}

html[data-ui-theme="liquid"] body > main.max-w-2xl {
    position: relative;
}

html[data-ui-theme="liquid"] body > main.max-w-2xl .card {
    background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.54)) !important;
}

html[data-ui-theme="liquid"] body > main.max-w-2xl header > div {
    background: rgba(255,255,255,.7) !important;
    border: 1px solid rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

html[data-ui-theme="liquid"] :where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel, #notif-panel, #gallery-style-menu, #vl-project-actions-menu, .image-source-popover, [id$="-menu"]:not(.material-symbols-rounded)) {
    background: var(--liquid-glass-floating) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    box-shadow: var(--liquid-shadow-hover) !important;
    -webkit-backdrop-filter: blur(var(--liquid-blur-deep)) saturate(165%);
    backdrop-filter: blur(var(--liquid-blur-deep)) saturate(165%);
    isolation: isolate;
}

html[data-ui-theme="liquid"] .image-source-popover::after {
    background: rgba(248, 252, 253, .96);
}

html[data-ui-theme="liquid"] :where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) {
    width: 17rem;
}

html[data-ui-theme="liquid"] :where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) button:hover {
    background: rgba(255,255,255,.68) !important;
}

html[data-ui-theme="liquid"] .ui-theme-toggle {
    border-top: 1px solid rgba(112,132,150,.12);
    border-bottom: 1px solid rgba(112,132,150,.12);
}

/* Cards, modules, tables, and generated content share the same restrained lift. */
html[data-ui-theme="liquid"] :where(.vl-project-card, .fin-exp-card, .ss-preset-card, .ss-card-btn, .admin-accordion, .dashboard-draggable-module) {
    border-color: var(--liquid-line) !important;
    box-shadow: var(--liquid-shadow) !important;
}

html[data-ui-theme="liquid"] :where(.vl-project-card, .fin-exp-card, .ss-preset-card, .admin-accordion, .module-card, .card) {
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}

html[data-ui-theme="liquid"] :where(.vl-project-card, .fin-exp-card, .ss-preset-card, .admin-accordion, .public-request-card):hover {
    border-color: rgba(255,255,255,.96) !important;
    box-shadow: var(--liquid-shadow-hover) !important;
    transform: translateY(-2px);
}

html[data-ui-theme="liquid"] :where(table, .table-container) {
    border-color: var(--liquid-line-muted) !important;
}

html[data-ui-theme="liquid"] thead {
    background: rgba(232, 241, 244, .64) !important;
}

html[data-ui-theme="liquid"] tbody tr {
    border-color: rgba(112,132,150,.12) !important;
}

html[data-ui-theme="liquid"] tbody tr:hover {
    background: rgba(255,255,255,.5) !important;
}

/* Inputs remain more opaque for legibility and predictable text entry. */
html[data-ui-theme="liquid"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
    color: var(--liquid-ink);
    background-color: rgba(255, 255, 255, .76) !important;
    border-color: rgba(91, 111, 128, .24) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 4px 16px rgba(48, 68, 82, .05);
}

html[data-ui-theme="liquid"] :where(input, textarea, select):focus {
    background-color: rgba(255,255,255,.88) !important;
    border-color: var(--liquid-focus) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--liquid-focus) 18%, transparent),
                0 8px 24px rgba(48,68,82,.08) !important;
}

html[data-ui-theme="liquid"] :where(input, textarea)::placeholder {
    color: #758296;
}

/* Actions get depth without changing click targets or semantic colors. */
html[data-ui-theme="liquid"] :where(button, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    html[data-ui-theme="liquid"] :where(button, [role="button"]):not(:disabled):active {
        transform: translateY(1px) scale(.985);
    }
}

html[data-ui-theme="liquid"] [class~="bg-primary"] {
    background-image: linear-gradient(135deg,
        var(--liquid-action),
        color-mix(in srgb, var(--liquid-action) 88%, #0f172a)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.42) !important;
    box-shadow: 0 9px 24px color-mix(in srgb, var(--liquid-action) 28%, transparent),
                inset 0 1px 0 rgba(255,255,255,.36) !important;
}

html[data-ui-theme="liquid"] :where(button, a, input, textarea, select):focus-visible {
    outline: 3px solid #7a3f14;
    outline-color: var(--liquid-focus);
    outline-offset: 3px;
}

/* Dialogs float above a softly frosted, desaturated scene. */
html[data-ui-theme="liquid"] .modal-overlay:not(#modal-gallery-lightbox):not(#modal-slider-player):not(#modal-slider) {
    background: rgba(28, 39, 50, .38) !important;
    -webkit-backdrop-filter: blur(12px) saturate(82%);
    backdrop-filter: blur(12px) saturate(82%);
}

html[data-ui-theme="liquid"] .modal-overlay:not(#modal-gallery-lightbox):not(#modal-slider-player):not(#modal-slider):not(#modal-weekly-weather) > :where(div, section, form) {
    background-color: var(--liquid-glass-floating) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.06)) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: 0 28px 90px rgba(12, 24, 34, .25), inset 0 1px 0 rgba(255,255,255,.7) !important;
    -webkit-backdrop-filter: blur(var(--liquid-blur-deep)) saturate(145%);
    backdrop-filter: blur(var(--liquid-blur-deep)) saturate(145%);
}

html[data-ui-theme="liquid"] .modal-overlay.active[data-modal-top="false"] {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-ui-theme="liquid"] :where(#modal-gallery-lightbox, #modal-slider-player, #modal-slider) {
    background: rgba(2, 6, 13, .94) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-ui-theme="liquid"] .modal-overlay.active[data-modal-top="true"]:not(#modal-gallery-lightbox):not(#modal-slider-player):not(#modal-slider) > :first-child {
    animation: liquid-dialog-enter .3s cubic-bezier(.2, .85, .2, 1) both;
}

@keyframes liquid-dialog-enter {
    from { opacity: 0; transform: translateY(12px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

html[data-ui-theme="liquid"] #notif-dim-backdrop {
    background: rgba(27, 40, 52, .24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Navigation pills and tabs read as a single floating control. */
html[data-ui-theme="liquid"] :where(#vl-tabs-bar, [role="tablist"], .segmented-control) {
    background: rgba(255,255,255,.5) !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: var(--liquid-shadow) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
}

html[data-ui-theme="liquid"] :where(#vl-tabs-bar, [role="tablist"]) button[aria-selected="true"],
html[data-ui-theme="liquid"] #vl-tabs-bar button.active {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 7px 18px rgba(42,61,77,.1);
}

/* Preserve the weather artwork while letting its surrounding modal belong to theme. */
html[data-ui-theme="liquid"] :where(.weather-alert-card, .weather-weekly-modal, #modal-weekly-weather) {
    border-color: rgba(255,255,255,.62) !important;
    box-shadow: 0 30px 95px rgba(14, 25, 38, .34), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

html[data-ui-theme="liquid"] :where(.leaflet-container, canvas, video, img) {
    isolation: isolate;
}

html[data-ui-theme="liquid"] .leaflet-control-zoom a {
    background: rgba(255,255,255,.85) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

html[data-ui-theme="liquid"] ::-webkit-scrollbar-thumb {
    background: rgba(92, 113, 130, .3);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

/* Browsers without backdrop-filter get a deliberately opaque, readable fallback. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html[data-ui-theme="liquid"] :where(.glass-panel, .admin-accordion, .module-card, .card, [class~="bg-surface"], [class*="bg-surface/"]) {
        background: rgba(248, 252, 253, .96) !important;
    }

    html[data-ui-theme="liquid"] :where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel, #notif-panel) {
        background: #f8fcfd !important;
    }
}

@media (max-width: 767px) {
    html[data-ui-theme="liquid"] {
        --liquid-blur: 16px;
        --liquid-blur-deep: 22px;
        --liquid-shadow: 0 12px 34px rgba(37,55,70,.12), 0 2px 7px rgba(37,55,70,.06);
    }

    html[data-ui-theme="liquid"] body::before,
    html[data-ui-theme="liquid"] body::after {
        opacity: .5;
    }

    html[data-ui-theme="liquid"] :where(.vl-project-card, .admin-accordion):hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-theme-switch,
    .ui-theme-switch > span,
    html[data-ui-theme="liquid"] :where(.vl-project-card, .admin-accordion, .module-card) {
        transition-duration: .01ms !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    html[data-ui-theme="liquid"] :where(.glass-panel, .admin-accordion, .module-card, .card, [class~="bg-surface"], [class*="bg-surface/"]) {
        background: rgba(249, 252, 253, .94) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (forced-colors: active) {
    .ui-theme-switch { border: 1px solid ButtonText; }
    html[data-ui-theme="liquid"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media print {
    html[data-ui-theme="liquid"],
    html[data-ui-theme="liquid"] body {
        background: #fff !important;
    }

    html[data-ui-theme="liquid"] body::before,
    html[data-ui-theme="liquid"] body::after { display: none !important; }

    html[data-ui-theme="liquid"] :where(.glass-panel, .admin-accordion, .module-card, .card, [class~="bg-surface"], [class*="bg-surface/"]) {
        background: #fff !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}