/* Ave Mujika — Liquid Glass visual layer
 * Inspired by rdev/liquid-glass-react's material language.
 * Implemented natively for Dash so the application keeps its existing runtime.
 */

:root {
    --glass-image: url("/assets/images/desktop-backgrounds/IMG_20260804_122401.webp");
    --glass-ink: #10233f;
    --glass-muted: #52657f;
    --glass-accent: #1769d2;
    --glass-surface: rgba(255, 255, 255, 0.56);
    --glass-surface-strong: rgba(255, 255, 255, 0.78);
    --glass-surface-soft: rgba(244, 250, 255, 0.42);
    --glass-line: rgba(255, 255, 255, 0.82);
    --glass-line-muted: rgba(113, 149, 192, 0.26);
    --glass-shadow: 0 18px 50px rgba(41, 79, 129, 0.13),
                    0 2px 8px rgba(41, 79, 129, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.94),
                    inset 0 -1px 0 rgba(125, 164, 211, 0.12);
    --glass-shadow-small: 0 8px 24px rgba(41, 79, 129, 0.10),
                          inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --glass-blur: 22px;
    --glass-x: 50%;
    --glass-y: 0%;
}

html {
    min-height: 100%;
    background: #eaf4ff;
}

body {
    min-height: 100vh;
    color: var(--glass-ink);
    background-color: #eaf4ff !important;
    background-image:
        linear-gradient(135deg, rgba(242, 249, 255, 0.18), rgba(230, 242, 255, 0.08)),
        var(--glass-image) !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(180deg, rgba(242, 249, 255, 0.08), rgba(225, 240, 255, 0.18));
}

#main-content {
    background: transparent !important;
}

#page-content {
    isolation: isolate;
}

.page-content {
    color: var(--glass-ink);
    background:
        radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.55), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(242, 248, 255, 0.48)) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(148%) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(148%) !important;
}

.page-title,
.section-title,
.trace-section-title,
.filter-label {
    color: var(--glass-ink) !important;
}

.page-desc,
.selector-help,
.geo-selector small {
    color: var(--glass-muted) !important;
}

/* Sidebar becomes one continuous glass sheet. */
#sidebar-container.sidebar {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.76), rgba(239, 247, 255, 0.54)) !important;
    border-right: 1px solid var(--glass-line) !important;
    box-shadow: 10px 0 34px rgba(41, 79, 129, 0.10), inset -1px 0 rgba(104, 146, 198, 0.10) !important;
    backdrop-filter: blur(26px) saturate(152%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(152%) !important;
}

.sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.72) !important;
}

.sidebar-logo {
    color: var(--glass-ink) !important;
}

.sidebar-subtitle,
.sidebar-version,
.sidebar-tech {
    color: var(--glass-muted) !important;
}

.sidebar-toggle-btn,
.nav-item,
.nav-subitem {
    border-color: transparent !important;
    border-radius: 12px !important;
}

.sidebar-toggle-btn,
.nav-item:hover,
.nav-subitem:hover {
    color: var(--glass-ink) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(255, 255, 255, 0.76) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.86), 0 5px 16px rgba(56, 91, 136, 0.08) !important;
}

.nav-item.active,
.nav-item.active + .sidebar-submenu .nav-subitem.active {
    color: #075bbd !important;
    background:
        radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.78), transparent 54%),
        rgba(220, 239, 255, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.90) !important;
    box-shadow: 0 7px 18px rgba(37, 103, 174, 0.12),
                inset 0 1px rgba(255, 255, 255, 0.98),
                inset 3px 0 rgba(23, 105, 210, 0.62) !important;
}

.sidebar-submenu,
.sidebar-divider {
    border-color: rgba(101, 143, 192, 0.22) !important;
}

/* Reusable inner glass surfaces. */
.filter-toolbar,
.result-area,
.corr-display-box,
.result-table-container,
.chart-toolbar,
details,
.hierarchy-visual-panel,
.region-visual-panel,
.area-visual-panel {
    background:
        radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.56), transparent 42%),
        var(--glass-surface-soft) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--glass-shadow-small) !important;
    backdrop-filter: blur(13px) saturate(138%) !important;
    -webkit-backdrop-filter: blur(13px) saturate(138%) !important;
}

.hierarchy-visual-panel,
.region-visual-panel,
.area-visual-panel {
    padding: 8px;
    overflow: hidden;
}

.filter-toolbar-secondary {
    background:
        radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.48), transparent 44%),
        rgba(235, 246, 255, 0.38) !important;
}

/* Inputs remain clear and readable while retaining the material. */
.Select-control,
.filter-input,
.filter-input-n,
.chart-toolbar select,
.Select-menu-outer {
    color: var(--glass-ink) !important;
    background: var(--glass-surface-strong) !important;
    border: 1px solid rgba(118, 151, 190, 0.30) !important;
    border-radius: 11px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 4px 12px rgba(48, 82, 124, 0.06) !important;
    backdrop-filter: blur(16px) saturate(142%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(142%) !important;
}

.Select-control:hover,
.filter-input:hover,
.filter-input-n:hover,
.Select.is-open > .Select-control,
.Select-control:focus-within {
    border-color: rgba(23, 105, 210, 0.48) !important;
    box-shadow: 0 0 0 3px rgba(23, 105, 210, 0.10),
                inset 0 1px rgba(255, 255, 255, 0.98) !important;
}

.Select-menu-outer,
.Select-menu-outer .VirtualizedSelectOption {
    background: rgba(247, 251, 255, 0.92) !important;
}

.Select-option.is-focused,
.Select-menu-outer .VirtualizedSelectFocusedOption {
    background: rgba(218, 238, 255, 0.82) !important;
}

.Select-option.is-selected,
.Select-menu-outer .VirtualizedSelectSelectedOption,
.Select-menu-outer .VirtualizedSelectFocusedOption.VirtualizedSelectSelectedOption {
    color: #075bbd !important;
    background: rgba(203, 229, 255, 0.86) !important;
}

/* Buttons are compact liquid-glass capsules. */
.btn-primary,
.btn-secondary,
.btn-export,
.filter-btn-add,
.col-config-btn,
.chart-toolbar .btn {
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 999px !important;
    box-shadow: 0 7px 16px rgba(43, 86, 137, 0.11),
                inset 0 1px rgba(255, 255, 255, 0.98),
                inset 0 -1px rgba(65, 115, 175, 0.10) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.btn-primary,
.filter-btn-add {
    color: #075bbd !important;
    background: rgba(211, 235, 255, 0.72) !important;
}

.btn-secondary,
.col-config-btn,
.chart-toolbar .btn {
    color: var(--glass-ink) !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

.btn-export {
    color: #15673a !important;
    background: rgba(221, 248, 232, 0.70) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-export:hover,
.filter-btn-add:hover,
.col-config-btn:hover,
.chart-toolbar .btn:hover {
    transform: translateY(-1px) scale(1.012);
    box-shadow: 0 11px 22px rgba(43, 86, 137, 0.15),
                inset 0 1px rgba(255, 255, 255, 1) !important;
}

.btn-primary:active,
.btn-secondary:active,
.btn-export:active,
.filter-btn-add:active,
.col-config-btn:active,
.chart-toolbar .btn:active {
    transform: translateY(1px) scale(0.985);
}

/* Tabs use distinct glass tiles instead of flat underlines. */
.custom-tabs {
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    border-radius: 15px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(12px) saturate(138%);
    -webkit-backdrop-filter: blur(12px) saturate(138%);
}

.custom-tabs .tab {
    margin: 0 !important;
    border-radius: 11px !important;
}

.custom-tabs .tab:hover {
    background: rgba(255, 255, 255, 0.50) !important;
}

.custom-tabs .tab--selected {
    color: #075bbd !important;
    background: rgba(225, 242, 255, 0.76) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 6px 16px rgba(37, 103, 174, 0.11), inset 0 1px #fff !important;
}

.condition-chip,
.Select--multi .Select-value {
    color: #075bbd !important;
    background: rgba(217, 238, 255, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.86) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.94);
}

/* Data-heavy surfaces use stronger frost to preserve contrast. */
table,
td,
.table > tbody > tr > td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background: rgba(255, 255, 255, 0.66) !important;
}

th,
.table > thead > tr > th,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background: rgba(232, 244, 255, 0.78) !important;
}

tr:hover td,
.table-hover > tbody > tr:hover > * {
    background: rgba(216, 238, 255, 0.82) !important;
}

iframe,
.js-plotly-plot,
.dash-graph {
    border-color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(41, 79, 129, 0.10), inset 0 1px #fff !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .page-content,
    #sidebar-container.sidebar,
    .filter-toolbar,
    .result-area,
    .corr-display-box,
    .result-table-container,
    .chart-toolbar,
    details {
        background: rgba(247, 251, 255, 0.93) !important;
    }
}

/* Desktop pages grow with their content and use only the browser scrollbar. */
@media (min-width: 769px) {
    #page-content,
    .page-content {
        width: 100%;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Plotly initializes after the tab shell. Reserve the full chart column so
       the glass panel never ends above a late-rendered correlation chart. */
    .correlation-page-content {
        min-height: 930px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --glass-image: url("/assets/images/mobile-backgrounds/IMG_20260804_121848.webp");
        --glass-blur: 13px;
    }

    body {
        background-position: center top !important;
        background-size: cover !important;
        background-attachment: scroll !important;
    }

    #sidebar-container.sidebar {
        background: rgba(247, 251, 255, 0.72) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.90) !important;
        box-shadow: 0 8px 26px rgba(41, 79, 129, 0.12), inset 0 -1px rgba(99, 144, 197, 0.12) !important;
        backdrop-filter: blur(18px) saturate(148%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(148%) !important;
    }

    #sidebar-container .nav-item {
        border-radius: 10px !important;
    }

    #sidebar-container .nav-item.active {
        border: 1px solid rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 5px 14px rgba(37, 103, 174, 0.11), inset 0 1px #fff !important;
    }

    .page-content {
        border-radius: 17px !important;
        background: rgba(247, 251, 255, 0.66) !important;
    }

    .filter-toolbar,
    .result-area,
    .corr-display-box,
    .result-table-container,
    .chart-toolbar,
    details,
    .hierarchy-visual-panel,
    .region-visual-panel,
    .area-visual-panel {
        border-radius: 13px !important;
        background: rgba(248, 252, 255, 0.62) !important;
        backdrop-filter: blur(8px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
    }

    .custom-tabs {
        padding: 4px;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.48) !important;
    }

    .custom-tabs .tab {
        border-radius: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}