/* ============================================================
   Black Glass v2 — refined dark theme
   Activate with: <html data-theme="glass">
   ============================================================ */

[data-theme="glass"] {
    /* Surface & background */
    --bg-app: #0B0D12;
    --bg-surface: rgba(22, 25, 33, 0.72);
    --bg-sunken: rgba(14, 16, 22, 0.55);
    --bg-tint: rgba(255, 255, 255, 0.04);
    --bg-overlay: rgba(4, 5, 8, 0.66);

    /* Foreground */
    --fg-primary: rgba(245, 246, 250, 0.96);
    --fg-secondary: rgba(225, 228, 236, 0.62);
    --fg-tertiary: rgba(225, 228, 236, 0.40);
    --fg-on-accent: #1A0F0B;
    --fg-inverse: #1A1714;

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-soft: rgba(255, 255, 255, 0.05);

    /* Accent */
    --accent: #FF8A6E;
    --accent-hover: #FF9F87;
    --accent-soft: rgba(255, 138, 110, 0.14);
    --accent-ring: rgba(255, 138, 110, 0.32);

    /* Semantic */
    --success: #5BD49E;
    --success-soft: rgba(91, 212, 158, 0.14);
    --warn: #F4B860;
    --warn-soft: rgba(244, 184, 96, 0.14);
    --danger: #FF7D78;
    --danger-soft: rgba(255, 125, 120, 0.14);
    --info: #6FB3FF;
    --info-soft: rgba(111, 179, 255, 0.14);
    --muted: rgba(225, 228, 236, 0.52);
    --muted-soft: rgba(255, 255, 255, 0.06);

    /* Grade colors */
    --grade-S: #5BD49E;
    --grade-S-soft: rgba(91, 212, 158, 0.16);
    --grade-R: #6FB3FF;
    --grade-R-soft: rgba(111, 179, 255, 0.16);
    --grade-U: #F4B860;
    --grade-U-soft: rgba(244, 184, 96, 0.16);
    --grade-N: rgba(225, 228, 236, 0.45);
    --grade-N-soft: rgba(255, 255, 255, 0.07);

    /* Sequential chart ramp (dark → light) — heatmap value-view; mirror of the daylight ramp,
       brightened toward the high end so cells read against the glass backdrop. */
    --chart-seq-1: #1B3A5C;
    --chart-seq-2: #2E5E8F;
    --chart-seq-3: #4E86BD;
    --chart-seq-4: #7FB0E0;
    --chart-seq-5: #B7D5F4;

    /* Shadows */
    --shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-focus: 0 0 0 4px var(--accent-ring);

    /* Sidebar */
    --sidebar-bg: rgba(10, 12, 17, 0.78);
    --sidebar-fg: rgba(245, 246, 250, 0.74);
    --sidebar-fg-active: #FFFFFF;
    --sidebar-active-bg: rgba(255, 138, 110, 0.16);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-divider: rgba(255, 255, 255, 0.06);
    --sidebar-accent: var(--accent);

    --grid-line: rgba(255, 255, 255, 0.04);

    color-scheme: dark;
}

[data-theme="glass"] body {
    background: radial-gradient(1200px 600px at 20% -10%, rgba(255, 138, 110, 0.08), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(111, 179, 255, 0.06), transparent 60%),
    linear-gradient(180deg, #0A0B10 0%, #0B0D12 100%);
    background-attachment: fixed;
}

/* Glass surface blur effect */
[data-theme="glass"] .sidebar,
[data-theme="glass"] .topbar,
[data-theme="glass"] .panel,
[data-theme="glass"] .card {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ============================================================
   Legacy Glass v1 classes — kept for backward compatibility
   ============================================================ */
:root {
    --ti-glass-tint: rgb(8 8 12 / 78%);
    --ti-glass-tint-strong: rgb(8 8 12 / 90%);
    --ti-glass-tint-primary: rgb(77 109 143);
    --ti-glass-border: rgb(255 255 255 / 8%);
    --ti-glass-highlight: rgb(255 255 255 / 6%);
    --ti-glass-shadow: rgb(0 0 0 / 60%);
    --ti-glass-blur: 14px;
    --ti-back-pane-bg: rgb(156 156 156 / 72%);
    --ti-sidebar-fg: rgb(240 242 248 / 92%);
    --ti-sidebar-fg-dim: rgb(240 242 248 / 65%);
    --ti-accent: #4da3ff;
    --ti-flyout-item-shadow: inset 6px 6px 12px rgb(0 0 0 / 65%), inset -6px -6px 12px rgb(255 255 255 / 4%);
    --ti-flyout-item-active-shadow: inset 8px 8px 16px rgb(0 0 0 / 75%), inset -8px -8px 16px rgb(255 255 255 / 3%);
    --ti-flyout-item-hover-bg: rgb(255 255 255 / 4%);
    --ti-flyout-sep-color: rgb(255 255 255 / 8%);
    --ti-tooltip-bg-color: rgb(69 69 69 / 90%);
    --ti-tooltip-fg-color: var(--ti-sidebar-fg);
    --ti-tooltip-font-size: 0.875rem;
    --ti-tooltip-line-height: 1.4;
    --ti-tooltip-border-radius: 6px;
    --ti-tooltip-padding: 8px 12px;
    --ti-tooltip-gap: 8px;
    --ti-tooltip-max-width: min(80vw, 360px);
    --ti-tooltip-arrow-size: 6px;
    --ti-tooltip-shadow: 0 12px 28px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 6%);
}

.ti-glass-panel-black {
    color: var(--ti-sidebar-fg);
    background-image: linear-gradient(0deg, var(--ti-glass-tint), var(--ti-glass-tint)),
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)),
    linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
    background-blend-mode: normal, overlay, soft-light;
    background-color: transparent;
    background-clip: padding-box;
    backdrop-filter: blur(var(--ti-glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ti-glass-blur)) saturate(140%);
    box-shadow: inset 0 1px 0 var(--ti-glass-highlight),
    0 20px 50px var(--ti-glass-shadow),
    0 4px 12px rgb(0 0 0 / 35%);
}

.ti-glass-btn-black {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    border: 0;
    background: transparent;
    padding-inline: 0;
    justify-content: center;
    color: var(--ti-sidebar-fg-dim);
    box-shadow: inset 2px 2px 6px rgb(0 0 0 / 65%),
    inset -2px -2px 6px rgb(255 255 255 / 4%),
    0 0 0 1px rgb(255 255 255 / 3%);
    transition: box-shadow 160ms ease, color 160ms ease, transform 120ms ease, background-color 160ms ease;
}

.ti-glass-btn-black.large {
    justify-content: flex-start;
    padding-inline: var(--ti-padding);
}

.ti-glass-btn-black.on-screen,
.ti-glass-btn-black.primary {
    background-blend-mode: normal, overlay, soft-light;
    background-color: transparent;
    background-clip: padding-box;
}

.ti-glass-btn-black.on-screen {
    background-image: linear-gradient(0deg, var(--ti-glass-tint), var(--ti-glass-tint)),
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)),
    linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
}

.ti-glass-btn-black.primary {
    background-image: linear-gradient(0deg, var(--ti-glass-tint-primary), var(--ti-glass-tint-primary)),
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)),
    linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
}

.ti-glass-btn-black:hover {
    color: var(--ti-sidebar-fg);
    box-shadow: inset 1px 1px 4px rgb(0 0 0 / 58%),
    inset -1px -1px 4px rgb(255 255 255 / 5%),
    0 0 0 1px rgb(255 255 255 / 4%);
}

.ti-glass-btn-black:active {
    transform: translateY(1px);
    box-shadow: inset 3px 3px 8px rgb(0 0 0 / 75%),
    inset -3px -3px 8px rgb(255 255 255 / 3%),
    0 0 0 1px rgb(255 255 255 / 2%);
}

.ti-glass-btn-black:focus-visible {
    outline: none;
    color: var(--ti-sidebar-fg);
    box-shadow: inset 1px 1px 4px rgb(0 0 0 / 60%),
    inset -1px -1px 4px rgb(255 255 255 / 5%),
    0 0 0 1px rgb(255 255 255 / 9%),
    0 0 0 3px color-mix(in oklab, var(--ti-accent) 40%, transparent);
}

.ti-glass-btn-black.is-active {
    color: var(--ti-sidebar-fg);
    background-color: rgb(255 255 255 / 2%);
    box-shadow: inset 3px 3px 8px rgb(0 0 0 / 75%),
    inset -3px -3px 8px rgb(255 255 255 / 3%),
    0 0 0 1px rgb(255 255 255 / 5%);
}

.ti-glass-back-pane {
    background-color: var(--ti-back-pane-bg, rgb(156 156 156 / 72%));
}