@import 'partials/variables.css';
@import 'partials/utilities.css';
@import 'partials/base.css';
@import 'partials/layout.css';

/* Layout and base styles moved to partials (partials/*.css) */

/* Global typography rules: more visible, modern sans-serif across the app.
   Uses !important to override inline styles when necessary; keep monospace for code blocks. */
html {
    font-size: var(--base-font-size);
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-sans) !important;
    font-size: 1rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
body * {
    font-family: var(--font-sans) !important;
}

/* Preserve monospace where it's semantically required */
code,
pre,
kbd,
samp,
.mono,
.monospace {
    font-family: var(--font-mono) !important;
}

/* Tweak common UI elements for improved readability */
.btn,
.badge,
.form-control,
.nav-link,
.small,
.text-small {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
}

/* Adjust heading scales for better hierarchy with base 16px */
h1 {
    font-size: 2.1rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.25rem;
}

.page-content {
    display: block;
}

@import 'pages/home.css';

@import 'components/cards.css';

/* Data Viewer layout tweaks moved to data_viewer.css */

/* Navbar styles moved to dedicated file: navbar.css */
/* Keep detailed navbar rules in 'navbar.css' which is already imported below */

/* Slightly reduce intensity on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .glass-nav .nav-logout {
        animation: none !important;
    }
}

/* ensure the nav inner container doesn't draw horizontal lines beyond the pill */
.glass-nav .layout-container {
    background: transparent;
}

@media (max-width: 720px) {
    .glass-nav {
        top: 8px;
        width: calc(100% - 20px);
        padding: 6px 10px;
    }

    .glass-nav .layout-container {
        gap: 0.5rem;
    }
}

.glass-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.glass-nav .navbar-toggler {
    padding: 0.2rem 0.5rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Responsive: desktop shows inline menu, mobile uses offcanvas */
.desktop-nav .nav-link {
    color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 767.98px) {

    /* Make navbar compact on small screens */
    .glass-nav {
        padding: 0.35rem 0.6rem;
    }

    .glass-nav .brand-pill {
        font-size: 0.9rem;
    }

    .glass-nav .brand-pill+.fw-semibold {
        display: none;
    }

    /* Make offcanvas nav items clearer */
    .offcanvas .nav-link {
        padding: 0.75rem 0.5rem;
        border-radius: 8px;
    }
}

@media (min-width: 768px) {

    /* Ensure the default Bootstrap toggler is hidden on larger screens */
    .navbar-toggler {
        display: none !important;
    }
}

/* Desktop tweaks: slightly larger clickable areas and spacing */
@media (min-width: 992px) {
    .glass-nav .layout-container {
        gap: 1.25rem;
    }

    .glass-nav .desktop-nav .btn,
    .glass-nav .desktop-nav .nav-link {
        padding: 0.4rem 0.9rem;
    }
}

@import 'navbar.css';
@import 'components/nav-static.css';
@import 'components/footer.css';
@import 'components/badges.css';

/* Footer styles moved to components/footer.css */

/* Desktop-specific nav-static rules moved to components/nav-static.css */

/* Badge and dataset-pill styles moved to components/badges.css */

/* Make the whole Dataset & Scope card more colorful with a left accent */
.data-viewer__card--dataset {
    position: relative;
    overflow: visible;
}

.data-viewer__card--dataset::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #25a0e2, #7c3aed);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.14);
    pointer-events: none;
}

/* Layer grid: make each layer occupy a large card-like pill that stretches the card */
.layer-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    align-items: stretch;
}

@media (min-width: 768px) {
    .layer-grid {
        /* two columns on medium screens */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {

    /* three columns on wide screens so the three layers occupy full card width */
    .data-viewer__card .layer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Scoped styling for the Layers card to improve visual hierarchy */
.data-viewer__card .layer-grid-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    padding: 1rem 0.9rem;
    transition: transform 160ms ease, box-shadow 200ms ease;
}

.data-viewer__card .layer-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.16);
}

/* Layout inside tile: content on left, badges column on right with separator */
.data-viewer__card .layer-grid-item__inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 100%;
}

.data-viewer__card .layer-grid-item__content {
    flex: 1 1 auto;
    min-width: 0;
}

.data-viewer__card .layer-grid-item__inner>.ms-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    justify-content: center;
    flex: 0 0 auto;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.03);
    margin-left: 0.6rem;
}

/* Slightly larger icons and tighter title spacing */
.data-viewer__card .layer-grid-item__icon {
    width: 3.6rem;
    height: 3.6rem;
}

.data-viewer__card .layer-grid-item__content .fw-bold {
    font-size: 1.02rem;
    margin-bottom: 0.12rem;
}

.data-viewer__card .layer-grid-item__content .small {
    color: rgba(255, 255, 255, 0.66);
}

/* Compact badge appearance inside the right column */
.data-viewer__card .layer-badge,
.data-viewer__card .layer-active-badge,
.data-viewer__card .layer-coming-soon {
    padding: 0.22rem 0.5rem;
    font-size: 0.82rem;
}

/* Make gold stand out slightly when present */
.data-viewer__card .layer-grid-item--gold {
    background: linear-gradient(180deg, rgba(255, 244, 224, 0.03), rgba(255, 244, 224, 0.01));
}

.layer-grid-item {
    padding: 1.15rem 1rem;
    /* keep relative for any positioned children; no extra right padding needed when badges occupy their own column */
    position: relative;
    border-radius: 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    display: flex !important;
    align-items: center;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
    height: 100%;
}

/* Prevent overflow: allow flex items inside grid to shrink properly */
.layer-grid-item {
    min-width: 0;
    /* allow badges and small inline elements to overflow the tile so their text isn't clipped */
    overflow: visible;
}

.layer-grid-item__content {
    min-width: 0;
}

/* Allow subtitles to wrap on small screens instead of forcing a single line */
.layer-grid-item__content .small {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive adjustments: reduce padding/icon size on narrow screens */
@media (max-width: 767.98px) {
    .layer-grid-item {
        padding: 0.9rem 0.9rem;
    }

    .layer-grid-item .layer-grid-item__icon {
        width: 3rem;
        height: 3rem;
    }

    .layer-grid-item .layer-grid-item__content .fw-bold {
        font-size: 1rem;
    }
}

/* Right column inside the tile for stacked badges */
.layer-grid-item__inner>.ms-3 {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
    justify-content: center;
    flex: 0 0 auto;
}

/* Ensure svg icons scale within their container */
.layer-grid-item__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Ensure tile content always fits */
.layer-grid-item,
.layer-grid-item * {
    box-sizing: border-box;
}

/* Tile variants: base matte tones */
.layer-grid-item--bronze {
    background: linear-gradient(180deg, rgba(115, 82, 38, 0.12), rgba(86, 60, 32, 0.08));
    border-color: rgba(115, 82, 38, 0.18);
    color: #e6c7a3;
}

.layer-grid-item--silver {
    background: linear-gradient(180deg, rgba(156, 163, 175, 0.10), rgba(120, 124, 132, 0.06));
    border-color: rgba(156, 163, 175, 0.16);
    color: #eef2f7;
}

.layer-grid-item--gold {
    background: linear-gradient(180deg, rgba(255, 209, 102, 0.10), rgba(210, 170, 60, 0.06));
    border-color: rgba(255, 209, 102, 0.18);
    color: #fff7e6;
}

/* Per-variant icon and title contrast improvements */
.layer-grid-item--bronze .layer-grid-item__icon {
    color: #b87333;
}

.layer-grid-item--bronze .fw-bold {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.layer-grid-item--bronze .layer-grid-item__content .small {
    color: rgba(255, 255, 255, 0.88);
}

.layer-grid-item--silver .layer-grid-item__icon {
    color: #9aa0a6;
}

.layer-grid-item--silver .fw-bold {
    color: var(--text-strong);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.layer-grid-item--silver .layer-grid-item__content .small {
    color: rgba(229, 231, 235, 0.9);
}

.layer-grid-item--gold .layer-grid-item__icon {
    color: #d4af37;
}

.layer-grid-item--gold .fw-bold {
    color: #241406;
}

.layer-grid-item--gold .layer-grid-item__content .small {
    color: rgba(36, 20, 6, 0.7);
}

/* When gold is marked as disabled (not available), keep the title readable
    but still indicate 'coming soon' via the badge. Override the generic
    disabled opacity for gold specifically so it remains visible. */
.layer-grid-item--gold.disabled {
    opacity: 1;
    cursor: not-allowed;
}

.layer-grid-item--gold.disabled .fw-bold {
    color: var(--text-strong);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.layer-grid-item--gold.disabled .layer-grid-item__content .small {
    color: var(--text-soft);
}

/* Icon base: outline by default (stroke), filled for gold via override */
.layer-icon {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 0.95;
}

.layer-grid-item__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Gold icons are filled for stronger emphasis */
.layer-grid-item--gold .layer-icon {
    fill: currentColor;
    stroke: none;
    opacity: 1;
}

/* Slight title emphasis */
.layer-grid-item .fw-bold {
    font-weight: 700;
}

/* Selected / active (phosphorescent) states — supports both checkbox sibling selector and manual active class */
.btn-check:checked+.layer-grid-item--bronze,
.layer-grid-item--bronze.modern-toggle--active {
    background: rgba(255, 160, 64, 0.1);
    border-color: rgba(255, 200, 120, 0.9);
    box-shadow: 0 0 16px rgba(255, 176, 64, 0.15);
}

.btn-check:checked+.layer-grid-item--silver,
.layer-grid-item--silver.modern-toggle--active {
    background: var(--accent-primary-soft);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.btn-check:checked+.layer-grid-item--gold,
.layer-grid-item--gold.modern-toggle--active {
    background: rgba(255, 200, 64, 0.1);
    border-color: rgba(255, 230, 120, 0.95);
    box-shadow: 0 0 16px rgba(255, 200, 64, 0.15);
}

/* Reduce internal gaps to avoid overflow on narrow containers */
.layer-grid-item__inner {
    gap: 0.9rem;
}

.layer-grid-item__content .small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    background: var(--bg-card-hover);
}

/* ---------- Force Layers as Rows (stacked) ---------- */
/* The user requested the Layers card show each layer as a full-width row.
   These rules override the earlier responsive multi-column behavior only
   within the Layers card scope. */
.data-viewer__card .layer-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
}

.data-viewer__card .layer-grid-item {
    width: 100%;
    display: block;
    /* ensure full-width stacking */
    padding-left: 1rem;
    padding-right: 1rem;
}

.data-viewer__card .layer-grid-item__inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 100%;
}

/* Make the right badges column vertically centered and separated */
.data-viewer__card .layer-grid-item__inner>.ms-3 {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
    justify-content: center;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.03);
    margin-left: 0.6rem;
    min-width: 6.5rem;
    /* ensure column has room for badges */
}

/* Slight vertical breathing for stacked rows */
.data-viewer__card .layer-grid {
    row-gap: 0.85rem;
}

@media (max-width: 540px) {

    /* On very small screens collapse the badges column below the title for space */
    .data-viewer__card .layer-grid-item__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .data-viewer__card .layer-grid-item__inner>.ms-3 {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
        min-width: unset;
        align-self: stretch;
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* End rows override */

.layer-grid-item .layer-grid-item__icon {
    width: 3.6rem;
    height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(59, 130, 246, 0.98);
}

/* Series summary cards accent colors by layer */
.series-card {
    position: relative;
    overflow: hidden;
}

.series-card::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 6px;
    border-radius: 6px;
}

.series-card--bronze::before {
    background: linear-gradient(180deg, rgba(255, 160, 64, 0.98), rgba(255, 200, 120, 0.9));
}

.series-card--silver::before {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.92), rgba(125, 211, 252, 0.14));
}

.series-card--gold::before {
    background: linear-gradient(180deg, rgba(163, 230, 53, 0.9), rgba(250, 215, 120, 0.18));
}

.layer-grid-item .layer-grid-item__content .fw-bold {
    font-size: 1.05rem;
}

.layer-grid-item .layer-grid-item__content .small {
    margin-top: 0.25rem;
}

.layer-grid-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Make badges inside grid more prominent */
.layer-coming-soon,
.layer-active-badge {
    padding: 0.35rem 0.6rem;
}

/* Ensure the existing modern-toggle styles do not conflict when used as grid-item */
.layer-grid .modern-toggle {
    width: 100%;
    text-align: left;
}

/* Make gold span both columns (put it on its own row) */
.layer-grid-item--gold {
    grid-column: 1 / -1;
}

/* OVERRIDES: Replace residual green accents with blue tones to ensure consistency.
   These rules intentionally use higher specificity / !important where necessary
   so we don't have to modify many legacy declarations scattered through the file. */
.glass-nav::before {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: var(--shadow-sm) !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--accent-primary) !important;
    text-shadow: 0 0 14px rgba(59, 130, 246, 0.85) !important;
}

.glass-footer::before {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--border-glass) !important;
}

.brand-pill {
    background: rgba(59, 130, 246, 0.18) !important;
    color: var(--accent-primary) !important;
}

.bg-body-dark-20 {
    border-color: rgba(59, 130, 246, 0.22) !important;
}

.bg-body-dark-30 {
    border-color: rgba(59, 130, 246, 0.28) !important;
}

.glass-card:hover {
    border-color: var(--border-accent) !important;
    box-shadow: var(--shadow-glow) !important;
}

.dataset-pill {
    border-color: rgba(148, 163, 184, 0.7) !important;
}

/* Footer and decorative glows */
.glass-footer,
.login-glow,
.login-building::before,
.login-building::after {
    box-shadow: none !important;
}

/* Misc overrides for other residual green gradients */
[class*="bg-"] {
    --legacy-accent: rgba(59, 130, 246, 0.12);
}

.data-viewer__card .form-label,
.data-viewer__card .text-light-75,
.data-viewer__card .text-light-50 {
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .data-viewer__form .data-viewer__card {
        padding: 1rem;
    }
}

@media (max-width: 991.98px) {
    .glass-nav-static .layout-container {
        flex-wrap: wrap;
        padding: 0.35rem 0.85rem;
    }

    .glass-nav-static .navbar-collapse {
        width: 100%;
        margin-top: 0.35rem;
    }

    .glass-nav-static .navbar-nav {
        gap: 0.25rem;
    }

    .glass-nav-static .d-flex {
        margin-top: 0.5rem;
    }
}

/* Remove neonWave animation and blur as glass-nav is solid blur now */
.glass-nav::before,
.glass-nav::after {
    display: none;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s ease, text-shadow 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--accent-primary);
    text-shadow: 0 0 14px rgba(59, 130, 246, 0.85);
}

.glass-nav .btn-outline-light {
    border-color: rgba(148, 163, 184, 0.6);
    color: var(--text-soft);
}

.glass-nav .btn-outline-light:hover {
    background: var(--accent-primary-soft);
    color: #ffffff;
}

.page-content {
    padding-top: 1rem !important;
}

body.login-bg .page-content {
    padding-top: 0 !important;
}

body.login-bg {
    background:
        radial-gradient(circle at 10% -8%, rgba(59, 130, 246, 0.22), transparent 55%),
        radial-gradient(circle at 85% -10%, rgba(59, 130, 246, 0.18), transparent 58%),
        linear-gradient(200deg, #000809 0%, #00110d 55%, #021a13 95%);
    overflow-x: hidden;
}

/* Dark overlay for login over the full-bleed background carousel */
body.login-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(200deg, rgba(3, 7, 18, 0.90), rgba(3, 7, 18, 0.96));
    opacity: 0.95;
    z-index: -1;
    /* above carousel, below content */
}

.login-page {
    position: relative;
    min-height: 100vh;
    padding: 4.5rem 1.5rem;
    isolation: isolate;
}

/* Background Glowing Orbs for Main Login */
.login-page::before,
.login-page::after {
    content: '';
    position: absolute;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.15;
    animation: authDrift 15s ease-in-out infinite alternate;
}

.login-page::before {
    background: radial-gradient(circle, var(--accent-primary), transparent 70%);
    top: 5%;
    left: 10%;
}

.login-page::after {
    background: radial-gradient(circle, var(--accent-secondary), transparent 70%);
    bottom: 5%;
    right: 10%;
    animation-delay: -7s;
}

@keyframes authDrift {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.1) translate(40px, -40px);
    }
}

/* When we remove the fixed navbar (login / special pages), center the login shell vertically */
body.login-bg.nav-no-fixed .login-page {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-shell {
    position: relative;
    z-index: 1;
    /* above background carousel and overlay */
    display: flex;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
}

.login-carousel {
    position: fixed;
    inset: 0;
    z-index: -2;
    /* sits behind everything, under dark overlay */
    max-width: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
    background: #020617;
}

.login-carousel-img {
    height: 100vh;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.08);
}

.login-carousel .carousel-indicators [data-bs-target] {
    width: 28px;
    height: 4px;
    border-radius: 999px;
    background-color: rgba(148, 163, 184, 0.6);
}

.login-carousel .carousel-indicators .active {
    background-color: rgba(248, 250, 252, 0.95);
}

.login-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-glow {
    position: absolute;
    width: 58vw;
    height: 58vw;
    min-width: 420px;
    min-height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(0.6px);
    animation: skylinePulse 12s ease-in-out infinite;
}

.login-building {
    position: absolute;
    bottom: -12%;
    width: 18vw;
    min-width: 140px;
    max-width: 220px;
    height: 46vh;
    max-height: 420px;
    border-radius: 28px 28px 12px 12px;
    background:
        linear-gradient(180deg, rgba(8, 42, 28, 0.95) 0%, rgba(5, 24, 16, 0.92) 55%, rgba(4, 18, 13, 0.88) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 30px 80px rgba(59, 130, 246, 0.14);
    overflow: hidden;
    animation: skylineFloat 14s ease-in-out infinite alternate;
}

.login-building::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.2), transparent 75%);
    opacity: 0.4;
}

.login-building::after {
    content: "";
    position: absolute;
    inset: 14% 18% 12%;
    background:
        repeating-linear-gradient(to top,
            rgba(59, 130, 246, 0.18),
            rgba(59, 130, 246, 0.18) 8px,
            transparent 8px,
            transparent 18px),
        repeating-linear-gradient(to right,
            rgba(59, 130, 246, 0.28),
            rgba(59, 130, 246, 0.28) 6px,
            transparent 6px,
            transparent 16px);
    opacity: 0.55;
    filter: blur(0.2px);
    animation: windowPulse 6s ease-in-out infinite;
}

.login-building--primary {
    left: 8%;
    height: 50vh;
    animation-duration: 17s;
}

.login-building--secondary {
    left: 26%;
    height: 42vh;
    animation-delay: 1.6s;
}

.login-building--tertiary {
    right: 24%;
    height: 38vh;
    animation-delay: 2.4s;
}

.login-building--quaternary {
    right: 6%;
    height: 44vh;
    animation-duration: 19s;
    animation-delay: 0.8s;
}

.login-card {
    position: relative;
    width: min(440px, 100%);
    border-radius: 1.5rem;
    padding: 3.5rem 3rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    z-index: 1;
    overflow: hidden;
}

/* Top accent gradient line */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.login-card__header .brand-pill {
    margin-bottom: 0.75rem;
    box-shadow: none;
}

.login-card__header h1 {
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.login-card__header p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.login-card form {
    display: grid;
    gap: 1.2rem;
    margin-top: 1.75rem;
}

.login-card label {
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    color: var(--text-soft);
    margin-bottom: 0.4rem;
}

.login-card .form-control {
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-strong) !important;
    padding: 0.85rem 1.1rem;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.login-card .form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-primary-soft);
    background: rgba(2, 6, 23, 0.8);
    outline: none;
}

.login-card__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.login-link-soft {
    color: rgba(59, 130, 246, 0.75);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.3s ease;
}

.login-link-soft:hover {
    color: var(--accent-primary);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.45);
}

.login-card button[type="submit"] {
    margin-top: 0.85rem;
    padding: 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    color: #fff;
    transition: all 0.3s ease;
}

.login-card button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(59, 130, 246, 0.45);
}

.login-card__meta {
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.58);
    text-align: center;
}

.site-footer {
    display: flex;
    justify-content: center;
    padding-bottom: 2.5rem;
}

.glass-footer {
    width: 100%;
    max-width: var(--layout-max);
    background: rgba(4, 20, 12, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 999px;
    box-shadow: 0 24px 70px rgba(59, 130, 246, 0.14);
    backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
}

.glass-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, transparent 18%, rgba(59, 130, 246, 0.14) 48%, rgba(59, 130, 246, 0.2) 65%, transparent 90%);
    mix-blend-mode: screen;
    opacity: 0.38;
    animation: neonWave 12s ease-in-out infinite;
}

.glass-footer__inner {
    position: relative;
    z-index: 1;
    padding: 0.85rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.glass-footer__links {
    display: inline-flex;
    gap: 1.25rem;
}

.glass-footer__links a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.3s ease;
}

.glass-footer__links a:hover {
    color: var(--accent-primary);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

@media (max-width: 991.98px) {
    .glass-nav {
        top: 0.85rem;
        border-radius: 28px;
    }

    .page-content {
        padding-top: 1rem !important;
    }

    .glass-nav-static {
        margin: 0 auto 2rem;
    }

    .login-page {
        padding: 3.5rem 1.25rem;
    }

    .login-shell {
        flex-direction: column;
        gap: 1.75rem;
    }

    .login-card {
        width: min(400px, 100%);
        padding: 2.5rem 2.25rem;
    }

    .login-card__actions {
        justify-content: center;
    }

    .login-building {
        opacity: 0.6;
    }

    .login-building--quaternary {
        display: none;
    }

    .glass-footer__inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .glass-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.85rem 1.25rem;
    }

    .glass-nav .layout-container {
        flex-wrap: wrap;
        padding: 0.4rem 0.9rem;
    }

    .glass-nav .navbar-collapse {
        width: 100%;
        margin-top: 0.35rem;
    }

    .glass-nav .navbar-nav {
        gap: 0.3rem;
    }

    .glass-nav .d-flex {
        margin-top: 0.45rem;
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .glass-nav {
        padding: 0;
    }

    .page-content {
        padding-top: 1rem !important;
    }

    .glass-nav-static {
        margin: 0 auto 1.75rem;
    }

    .glass-footer__inner {
        padding: 1rem;
    }

    .glass-nav .layout-container {
        padding: 0.48rem 0.7rem;
    }

    .glass-nav .d-flex {
        flex-direction: column;
        gap: 0.45rem;
    }

    .glass-nav-static .layout-container {
        padding: 0.4rem 0.7rem;
    }

    .login-page {
        padding: 3.25rem 0.85rem;
    }

    .login-shell {
        gap: 1.5rem;
    }

    .login-card {
        padding: 2.25rem 1.6rem;
        width: 100%;
    }

    .login-card__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .login-building--secondary,
    .login-building--tertiary {
        display: none;
    }

    .login-building--primary {
        left: -18%;
        width: 70vw;
    }

    .login-building--quaternary {
        right: -18%;
        width: 65vw;
    }
}

@media (min-width: 992px) {
    .glass-nav .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 1.45rem;
        width: auto;
    }

    .glass-nav .navbar-nav {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .glass-nav .d-flex {
        margin-left: 0;
    }
}

.brand-pill {
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.18);
    color: var(--accent-primary);
    font-size: 0.75rem;
    letter-spacing: 0.08rem;
    animation: neonPulse 3.5s ease-in-out infinite;
}

.text-light-50 {
    color: rgba(255, 255, 255, 0.68) !important;
}

.text-light-75 {
    color: rgba(255, 255, 255, 0.88) !important;
}

.bg-body-dark-20 {
    background: rgba(6, 28, 18, 0.75);
    border: 1px solid rgba(59, 130, 246, 0.22);
    backdrop-filter: blur(16px);
}

.bg-body-dark-30 {
    background: rgba(6, 32, 20, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.28);
    backdrop-filter: blur(20px);
}

.glass-card {
    background: rgba(15, 23, 42, 0.98);
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.6);
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.9);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.glass-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-primary);
    box-shadow: 0 30px 80px rgba(59, 130, 246, 0.32);
}

.dataset-pill {
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.7);
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.98rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.dataset-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-strong);
    font-size: 1.05rem;
}

.dataset-pill--active {
    border-color: var(--accent-primary);

    .timeseries-card .layer-badge {
        background: linear-gradient(135deg, rgba(23, 198, 113, 0.12), rgba(59, 130, 246, 0.12));
        color: var(--text-strong);
        font-weight: 600;
    }

    /* Series summary card tweaks */
    #series-summary .fw-semibold {
        color: var(--text-strong);
    }

    #series-summary p {
        color: var(--text-muted);
    }
}

.dataset-pill:not(.dataset-pill--active):hover {
    transform: translateY(-1px);
    border-color: rgba(148, 163, 184, 0.9);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.7);
}

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card:hover::after {
    opacity: 1;
}

.service-card__badge {
    position: absolute;
    top: 1.35rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(140deg, rgba(59, 130, 246, 0.32), rgba(59, 130, 246, 0.28), rgba(184, 84, 255, 0.22));
    color: #071a14;
    box-shadow: 0 14px 30px rgba(59, 130, 246, 0.18), 0 0 26px rgba(184, 84, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform: translate(-50%, 0);
    z-index: 2;
}

.service-card__badge svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.home-hero {
    background: radial-gradient(circle at -10% -20%, rgba(59, 130, 246, 0.18), transparent 55%),
        radial-gradient(circle at 120% 30%, rgba(59, 130, 246, 0.22), transparent 65%),
        radial-gradient(circle at 30% 120%, rgba(184, 84, 255, 0.16), transparent 65%),
        linear-gradient(140deg, rgba(3, 32, 22, 0.92), rgba(12, 25, 40, 0.82));
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.home-hero__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.home-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(0.4px);
    mix-blend-mode: screen;
    opacity: 0.55;
}

.home-hero__orb--primary {
    width: 40vw;
    height: 40vw;
    min-width: 320px;
    min-height: 320px;
    top: -18%;
    right: -8%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, rgba(59, 130, 246, 0.18) 55%, transparent 100%);
    animation: heroOrbDrift 18s ease-in-out infinite;
}

.home-hero__orb--secondary {
    width: 28vw;
    height: 28vw;
    min-width: 240px;
    min-height: 240px;
    bottom: -12%;
    left: -10%;
    background: radial-gradient(circle, rgba(184, 84, 255, 0.28) 0%, rgba(59, 130, 246, 0.12) 60%, transparent 100%);
    animation: heroOrbDrift 22s ease-in-out infinite reverse;
}

.home-hero__grid {
    position: absolute;
    inset: 12% 8%;
    border-radius: 32px;
    background:
        linear-gradient(120deg, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.16) 40%, rgba(184, 84, 255, 0.12) 70%, transparent 95%),
        repeating-linear-gradient(to right, rgba(59, 130, 246, 0.08) 0, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 24px),
        repeating-linear-gradient(to top, rgba(59, 130, 246, 0.08) 0, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 24px);
    opacity: 0.38;
    animation: heroGridPulse 14s ease-in-out infinite;
}

.home-hero .row {
    position: relative;
    z-index: 1;
}

.home-hero__account {
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: linear-gradient(140deg, rgba(4, 22, 14, 0.92), rgba(4, 16, 12, 0.85));
    box-shadow: inset 0 0 35px rgba(59, 130, 246, 0.12);
}

.home-hero__account::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(59, 130, 246, 0.28);
    opacity: 0.4;
    pointer-events: none;
}

.home-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.24);
}


.home-hero__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.65);
    animation: statusPulse 2.6s ease-in-out infinite;
}

.services-grid {
    padding-bottom: 1.5rem;
}

.services-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.16), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.14), transparent 65%),
        radial-gradient(circle at 50% 100%, rgba(184, 84, 255, 0.12), transparent 70%);
    opacity: 0.35;
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
    animation: serviceHalo 16s ease-in-out infinite;
}

/* .service-card--pulse styles removed: modifier not referenced in templates */

service-card--data::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.28));
}

.service-card--ai::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.58), rgba(184, 84, 255, 0.32));
}

service-card--config::before {
    background: linear-gradient(135deg, rgba(184, 84, 255, 0.55), rgba(59, 130, 246, 0.28));
}


.neon-link {
    border-color: rgba(59, 130, 246, 0.35);
    color: var(--accent-primary);
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.06));
}


.data-viewer__card {
    background: linear-gradient(180deg, rgba(6, 10, 20, 0.56), rgba(4, 6, 10, 0.48));
    border: 1px solid rgba(59, 130, 246, 0.06);
    backdrop-filter: blur(12px) saturate(110%);
    height: 100%;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.55);
}

.modern-select {
    background: rgba(12, 24, 40, 0.6);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(59, 130, 246, 0.12);
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.06);
}

.modern-select:focus {
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.08);
}

.modern-toggle {
    border-radius: 1rem;
    text-align: left;
    padding: 0.9rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 20, 14, 0.55);
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    display: block;
}

.modern-toggle--active,
.modern-toggle:hover,
.modern-toggle:focus,
.btn-check:checked+.modern-toggle {
    border-color: rgba(59, 130, 246, 0.55);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.18));
    box-shadow: 0 16px 34px rgba(59, 130, 246, 0.18);
    color: #04160b;
}

.modern-toggle.disabled {
    opacity: 0.45;
    pointer-events: none;
    border-style: dashed;
}

.btn-group-vertical .modern-toggle:last-child {
    margin-bottom: 0;
}

.layer-badge {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0.5rem 1.05rem;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.layer-badge--bronze {
    background: rgba(239, 131, 84, 0.2);
    color: #ef8354;
    border-color: rgba(239, 131, 84, 0.35);
}

.layer-badge--silver {
    background: rgba(124, 115, 230, 0.2);
    color: #7c73e6;
    border-color: rgba(124, 115, 230, 0.35);
}

.layer-badge--gold {
    background: rgba(255, 209, 102, 0.2);
    color: #ffd166;
    border-color: rgba(255, 209, 102, 0.35);
}

.chart-surface {
    border-radius: 1.25rem;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: rgba(5, 20, 12, 0.92);
    padding: 1.5rem;
    min-height: 420px;
    position: relative;
}

.chart-surface.is-loading::after {
    content: "Refreshing...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    text-transform: uppercase;
    background: rgba(4, 20, 12, 0.85);
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.25);
}

.chart-surface.is-loading {
    position: relative;
}

.resample-btn.btn-outline-light {
    border-color: rgba(148, 163, 184, 0.6);
    color: var(--text-soft);
}

.resample-btn.btn-outline-light {
    border-width: 1.5px;
    border-color: rgba(148, 163, 184, 0.65);
    color: var(--text-soft);
    background: rgba(15, 23, 42, 0.55);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
    position: relative;
    overflow: hidden;
}

.resample-btn.btn-outline-light.active,
.resample-btn.btn-outline-light:focus,
.resample-btn.btn-outline-light:hover {
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.18), rgba(0, 123, 255, 0.22));
    color: #ffffff;
    border-color: var(--accent-secondary);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.20);
}

.resample-btn.btn-outline-light.active::after,
.resample-btn.btn-outline-light:focus::after,
.resample-btn.btn-outline-light:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

.resample-controls-wrapper {
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.neon-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.45), 0 0 26px rgba(56, 189, 248, 0.35);
    color: var(--text-strong);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.32), rgba(56, 189, 248, 0.26));
}

.list-group-hover .list-group-item {
    border-color: rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.list-group-hover .list-group-item:hover {
    background: rgba(56, 189, 248, 0.12);
    transform: translateY(-2px);
}

.badge.bg-primary-soft {
    background: rgba(56, 189, 248, 0.18);
    color: var(--text-strong);
}

.badge.bg-gradient {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #0f172a;
}

.action-tile {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.action-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(56, 189, 248, 0.18));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.resample-controls-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.action-tile:hover::after {
    opacity: 1;
}

.action-tile:hover {
    border-color: rgba(56, 189, 248, 0.45);
}

.timeseries-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(6, 10, 20, 0.6), rgba(4, 6, 10, 0.55));
    border: 1px solid rgba(59, 130, 246, 0.06);
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.resample-btn.btn-outline-light.active,
.resample-btn.btn-outline-light:focus,
.resample-btn.btn-outline-light:hover {
    background: linear-gradient(90deg, rgba(23, 198, 113, 0.16), rgba(59, 130, 246, 0.14));
    color: #041109;
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(23, 198, 113, 0.12), 0 6px 18px rgba(59, 130, 246, 0.08);
}

.timeseries-card::before {
    content: "";
    position: absolute;
    left: -20%;
    top: -30%;
    width: 60%;
    height: 180%;
    background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.10), transparent 25%), radial-gradient(circle at 70% 70%, rgba(99, 102, 241, 0.08), transparent 30%);
    transform: rotate(-15deg);
    pointer-events: none;
    mix-blend-mode: screen;
}

.timeseries-card .h4 {
    color: var(--text-strong);
}

.timeseries-card #chart-meta,
.timeseries-card .text-light-50 {
    color: var(--text-muted);
}

.timeseries-card #chart-building-label {
    color: var(--text-strong);
    font-weight: 600;
}

.timeseries-card #chart-building-subtitle {
    color: var(--text-muted);
    font-weight: 500;
}

.timeseries-card .layer-badge {
    font-weight: 600;
    color: #fff;
}

.timeseries-card .chart-surface {
    min-height: 420px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px) saturate(120%);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.5rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.timeseries-card #chart-fallback {
    background: transparent;
    color: var(--text-soft);
}

.timeseries-card .layer-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.12));
    color: var(--text-strong);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.timeseries-card .badge.bg-gradient {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #041109;
}

/* Ensure the resample badge is clearly visible on dark surfaces (placed after timeseries-card rules) */
#resample-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    color: var(--text-strong) !important;
    padding: 0.35rem 0.7rem;
    border-radius: 0.65rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Styled unit token for values (e.g., "m3") in the chart meta */
.value-unit {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.12rem 0.5rem;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Segoe UI Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--unit-pill-color);
    background: var(--unit-pill-bg);
    border: 1px solid var(--unit-pill-border);
    border-radius: 0.45rem;
    letter-spacing: 0.02em;
}

/* Tooltip unit styling (used if tooltip HTML includes unit spans) */
.echarts-tooltip .tooltip-unit {
    font-weight: 700;
    margin-left: 0.25rem;
}

/* Make tooltip-unit match the main value-unit pill appearance */
.tooltip-unit,
.echarts-tooltip .tooltip-unit {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.12rem 0.45rem;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Segoe UI Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--unit-pill-color);
    background: var(--unit-pill-bg);
    border: 1px solid var(--unit-pill-border);
    border-radius: 0.35rem;
    letter-spacing: 0.02em;
}

/* Elegant tooltip card styling for ECharts */
.echarts-tooltip {
    background: linear-gradient(180deg, rgba(10, 14, 20, 0.70), rgba(8, 10, 14, 0.56));
    color: var(--text-strong);
    border-radius: 0.8rem;
    padding: 0.45rem 0.6rem;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px) saturate(120%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.echarts-tooltip .tooltip-inner {
    min-width: 160px;
}

.echarts-tooltip .tooltip-axis {
    color: rgba(203, 213, 220, 0.9);
    font-size: 12px;
    margin-bottom: 8px;
}

.echarts-tooltip .tooltip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.echarts-tooltip .tooltip-marker {
    width: 10px;
    height: 10px;
}

.echarts-tooltip .tooltip-series {
    min-width: 120px;
    color: var(--text-strong);
    font-weight: 700;
}

.echarts-tooltip .tooltip-value {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
}

/* subtle responsive tweaks */
@media (max-width: 767px) {
    .timeseries-card .chart-surface {
        min-height: 320px;
    }

    .resample-controls-wrapper {
        display: block;
        margin-bottom: 0.5rem;
    }
}

.text-primary-soft {
    color: var(--accent-primary) !important;
}

/* .glass-select styles removed: class not used in templates */

.plot-wrapper {
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.6);
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: inset 0 0 40px rgba(56, 189, 248, 0.12);
}

/* .performance-card styles removed: class not used in templates */

.btn-outline-light {
    border-color: rgba(148, 163, 184, 0.7);
    color: var(--text-soft);
}

.btn-outline-light:hover {
    background: rgba(148, 163, 184, 0.14);
    color: #ffffff;
}

/* Resample button base styles (consolidated and readable on dark surfaces) */
.resample-btn.btn-outline-light {
    border-width: 1.25px;
    border-color: rgba(148, 163, 184, 0.55);
    color: var(--text-strong);
    background: transparent;
    padding: 0.45rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 0.6rem;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.32);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    position: relative;
    overflow: visible;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(37, 99, 235, 0.55);
    color: #ffffff;
}

.min-vh-60 {
    min-height: 60vh;
}


@keyframes neonPulse {
    0% {
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.28), 0 0 16px rgba(37, 99, 235, 0.24);
    }

    50% {
        box-shadow: 0 0 14px rgba(56, 189, 248, 0.45), 0 0 34px rgba(37, 99, 235, 0.32);
    }

    100% {
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.28), 0 0 16px rgba(37, 99, 235, 0.24);
    }
}

@keyframes slowDrift {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(8deg) scale(1.05);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes neonWave {
    0% {
        transform: translateX(-55%) skewX(-4deg);
    }

    50% {
        transform: translateX(55%) skewX(3deg);
    }

    100% {
        transform: translateX(-55%) skewX(-4deg);
    }
}

@keyframes stellarDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(60px, 40px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes asteroidFloat {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    50% {
        transform: translate3d(2%, 1.5%, 0) scale(1.05);
    }

    100% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }
}

@keyframes skylineFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(0, -14px, 0) scale(1.02);
    }
}

@keyframes windowPulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.75;
    }
}

@keyframes skylinePulse {
    0% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.98);
    }

    50% {
        opacity: 0.52;
        transform: translate(-50%, -50%) scale(1.04);
    }

    100% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.98);
    }
}

@keyframes heroOrbDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(12px, -18px, 0) scale(1.03);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes heroGridPulse {

    0%,
    100% {
        opacity: 0.3;
        filter: hue-rotate(0deg);
    }

    50% {
        opacity: 0.5;
        filter: hue-rotate(25deg);
    }
}

@keyframes serviceHalo {
    0% {
        opacity: 0.28;
        transform: scale(1);
    }

    50% {
        opacity: 0.42;
        transform: scale(1.04);
    }

    100% {
        opacity: 0.28;
        transform: scale(1);
    }
}

@keyframes servicePulse {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.03);
    }
}

@keyframes iconGlow {

    0%,
    100% {
        box-shadow: 0 12px 28px rgba(93, 255, 112, 0.32), 0 0 18px rgba(59, 199, 255, 0.24);
    }

    50% {
        box-shadow: 0 18px 36px rgba(184, 84, 255, 0.38), 0 0 26px rgba(59, 199, 255, 0.32);
    }
}

@keyframes statusPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(93, 255, 112, 0.65);
    }

    50% {
        transform: scale(1.35);
        box-shadow: 0 0 18px rgba(93, 255, 112, 0.85);
    }
}

/* Resample button icon and final visibility tweaks */
.resample-btn .resample-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.5rem;
    font-size: 1rem;
    line-height: 1;
}

/* Ensure active/hover resample buttons use white text for clarity */
.resample-btn.btn-outline-light.active,
.resample-btn.btn-outline-light:focus,
.resample-btn.btn-outline-light:hover {
    color: #ffffff !important;
}

/* Slightly increase contrast for non-active buttons */
.resample-btn.btn-outline-light {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Improved Alert/Notification Styling
   ============================================ */

/* Keyframe animations for alerts */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(400px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(400px);
    }
}

/* Enhanced fixed alert styling */
.alert {
    position: fixed !important;
    transition: top 0.3s ease, z-index 0.3s ease;
}

/* Compact alert variant for better non-invasive presentation */
.alert-compact {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
}

.alert-compact .btn-close {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.15rem;
}

/* Alert color variants with improved contrast and glass effect */
.alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.08)) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #bfdbfe !important;
}

.alert-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.06)) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #bbf7d0 !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06)) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06)) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #fecaca !important;
}

/* Close button styling for alerts */
.alert .btn-close {
    opacity: 0.6;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.alert .btn-close:hover,
.alert .btn-close:focus {
    opacity: 1;
}

/* Ensure alerts have proper layout */
.alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}
/* ── Admin "viewing as" banner ──────────────────────────────────────────── */
.admin-viewing-banner {
    position: sticky;
    top: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.25rem;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

.admin-viewing-banner strong {
    font-weight: 800;
    color: #c4b5fd;
}

.admin-viewing-exit {
    margin-left: auto;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}

.admin-viewing-exit:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}