/* Smooth theme transition */
*,
*::before,
*::after {
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.15s ease,
                box-shadow 0.2s ease;
}

/* Disable transition on charts to prevent flicker */
.js-plotly-plot,
.js-plotly-plot * {
    transition: none !important;
}

/* ===== NAVBAR INNER WRAPPER - GPU ACCELERATED ===== */
.navbar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform, opacity;
    transition:
        transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav labels - animate on collapse */
.nav-label {
    display: inline-block;
    transition:
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* Logo text specific styling */
.logo-text {
    font-weight: 600;
    font-size: 1.1rem;
}

/* ===== ICON ALIGNMENT (consistent for both states) ===== */

/* Logo icon container - match NavLink icon alignment */
.navbar-header {
    padding-left: 0.75rem;
    padding-right: 1rem;
}

.navbar-header > svg,
.navbar-header > .iconify {
    width: 24px;
    flex-shrink: 0;
}

/* NavLink icon alignment */
.mantine-NavLink-root {
    padding-left: 0.75rem;
    padding-right: 1rem;
}

.mantine-NavLink-section[data-position="left"] {
    width: 24px;
    min-width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Center the 18px icon within 24px container */
.mantine-NavLink-section[data-position="left"] svg,
.mantine-NavLink-section[data-position="left"] .iconify {
    margin: 0 auto;
}

/* ===== DESKTOP COLLAPSED STATE ===== */
[data-navbar-collapsed="true"] .nav-label {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

[data-navbar-collapsed="true"] .navbar-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

[data-navbar-collapsed="true"] .navbar-footer {
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0;
    padding-right: 0;
}

/* Center the nav links when collapsed */
[data-navbar-collapsed="true"] .mantine-NavLink-root {
    justify-content: center;
    padding: 0.625rem;
}

[data-navbar-collapsed="true"] .mantine-NavLink-body {
    display: none;
}

[data-navbar-collapsed="true"] .mantine-NavLink-section {
    margin: 0;
}

/* Center icons in the nav stack */
[data-navbar-collapsed="true"] #nav-links {
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

[data-navbar-collapsed="true"] #nav-links .mantine-Stack-root {
    align-items: center;
}

/* Hide nested children when collapsed */
[data-navbar-collapsed="true"] .mantine-NavLink-children {
    display: none;
}

/* ===== DESKTOP EXPANDED STATE ===== */
[data-navbar-collapsed="false"] .navbar-header {
    padding-left: 0.75rem;
}

[data-navbar-collapsed="false"] .mantine-NavLink-root {
    padding-left: 0.75rem;
}

/* Ensure gap between icon and text matches */
[data-navbar-collapsed="false"] .navbar-header {
    gap: 0.625rem;
}

[data-navbar-collapsed="false"] .mantine-NavLink-section[data-position="left"] {
    margin-right: 0.625rem;
}

/* Show tooltips only when collapsed */
[data-navbar-collapsed="false"] .nav-tooltip .mantine-Tooltip-tooltip {
    display: none !important;
}

/* ===== DESKTOP EXPANDED STATE ===== */
[data-navbar-collapsed="false"] .nav-label {
    opacity: 1;
    transform: translateX(0);
}

/* ===== MOBILE SLIDE ANIMATION ===== */
@media (max-width: 48em) {
    .mantine-AppShell-navbar {
        z-index: 200;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ===== MANTINE APPSHELL TRANSITIONS ===== */
.mantine-AppShell-navbar {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                width 250ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, width;
}

.mantine-AppShell-main {
    transition: padding-left 250ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: padding-left;
}

/* ===== MOBILE FAB BUTTON ===== */
.mantine-Affix-root {
    z-index: 1000;
}

#mobile-open {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#mobile-open:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5);
}

#mobile-open:active {
    transform: scale(0.95);
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .navbar-inner,
    .navbar-inner *,
    .nav-label,
    .mantine-AppShell-navbar,
    .mantine-AppShell-main {
        transition: none !important;
    }
}

/* ===== CARD STYLES ===== */
/* Light mode card shadows */
[data-mantine-color-scheme="light"] .mantine-Card-root {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
                0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-mantine-color-scheme="light"] .mantine-Card-root:hover {
    box-shadow: 0 8px 16px rgba(124, 58, 237, 0.12),
                0 4px 8px rgba(0, 0, 0, 0.04);
    border-color: #d8b4fe;
}

/* Dark mode glow effect on hover */
[data-mantine-color-scheme="dark"] .mantine-Card-root:hover {
    border-color: #a78bfa;
    box-shadow: 0 0 24px rgba(167, 139, 250, 0.15),
                0 0 8px rgba(167, 139, 250, 0.1);
}

/* Metric card hover effect - subtle lift */
.mantine-Card-root {
    transition: transform 0.2s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease;
}

.mantine-Card-root:hover {
    transform: translateY(-2px);
}

/* ===== TABLE STYLES ===== */
.mantine-Table-tr {
    transition: background-color 0.15s ease;
}

.mantine-Table-root {
    font-variant-numeric: tabular-nums;
}

.mantine-Table-td,
.mantine-Table-th {
    font-feature-settings: "tnum" 1;
}

/* ===== NAVLINK STYLES ===== */
.mantine-NavLink-root {
    transition: background-color 0.15s ease;
    border-radius: var(--mantine-radius-sm);
    margin: 2px 0;
}

[data-mantine-color-scheme="dark"] .mantine-NavLink-root:hover {
    background-color: rgba(167, 139, 250, 0.1);
}

[data-mantine-color-scheme="light"] .mantine-NavLink-root:hover {
    background-color: rgba(124, 58, 237, 0.08);
}

[data-mantine-color-scheme="dark"] .mantine-NavLink-root[data-active] {
    background-color: rgba(167, 139, 250, 0.15);
}

[data-mantine-color-scheme="light"] .mantine-NavLink-root[data-active] {
    background-color: rgba(124, 58, 237, 0.12);
}

/* ===== TEXT COLOR UTILITIES ===== */
.text-primary {
    color: #a78bfa;
}

[data-mantine-color-scheme="light"] .text-primary {
    color: #7c3aed;
}

/* ===== FOCUS STYLES ===== */
.mantine-focus-auto:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

[data-mantine-color-scheme="light"] .mantine-focus-auto:focus-visible {
    outline-color: #7c3aed;
}

.mantine-Button-root:focus-visible,
.mantine-ActionIcon-root:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

[data-mantine-color-scheme="light"] .mantine-Button-root:focus-visible,
[data-mantine-color-scheme="light"] .mantine-ActionIcon-root:focus-visible {
    outline-color: #7c3aed;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb {
    background: #2d2d3a;
    border-radius: 4px;
}

[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3d3d4a;
}

[data-mantine-color-scheme="light"] ::-webkit-scrollbar-thumb {
    background: #e9e5f0;
    border-radius: 4px;
}

[data-mantine-color-scheme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #d8b4fe;
}

/* ===== SELECT DROPDOWN ===== */
.mantine-Select-dropdown {
    border: 1px solid;
}

[data-mantine-color-scheme="dark"] .mantine-Select-dropdown {
    border-color: #2d2d3a;
    background-color: #1a1a24;
}

[data-mantine-color-scheme="light"] .mantine-Select-dropdown {
    border-color: #e9e5f0;
    background-color: #ffffff;
}

/* ===== BUTTON GRADIENT ===== */
[data-mantine-color-scheme="dark"] .mantine-Button-root[data-variant="filled"]:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

/* ===== SELECTION HIGHLIGHT ===== */
::selection {
    background-color: rgba(167, 139, 250, 0.3);
}

[data-mantine-color-scheme="light"] ::selection {
    background-color: rgba(124, 58, 237, 0.2);
}

/* ===== FALLBACKS ===== */
@supports not (backdrop-filter: blur(10px)) {
    [data-mantine-color-scheme="dark"] .mantine-AppShell-navbar {
        background-color: #1a1a24 !important;
    }
    [data-mantine-color-scheme="light"] .mantine-AppShell-navbar {
        background-color: #ffffff !important;
    }
}

/* ===== PLOTLY CHARTS ===== */
.dash-graph {
    border-radius: 10px;
    overflow: hidden;
}

.js-plotly-plot .plotly .main-svg {
    border-radius: 10px;
}

/* Chart fade-in animation */
@keyframes chartFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.js-plotly-plot {
    animation: chartFadeSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===== MARKDOWN DOCUMENTATION STYLES ===== */
.markdown-body {
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Headings */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
    line-height: 1.3;
}

.markdown-body h1 { font-size: 1.75rem; }
.markdown-body h2 { font-size: 1.4rem; }
.markdown-body h3 { font-size: 1.15rem; }
.markdown-body h4 { font-size: 1rem; }

.markdown-body h1:first-child,
.markdown-body h2:first-child {
    margin-top: 0;
}

[data-mantine-color-scheme="dark"] .markdown-body h1,
[data-mantine-color-scheme="dark"] .markdown-body h2 {
    color: #a78bfa;
}

[data-mantine-color-scheme="light"] .markdown-body h1,
[data-mantine-color-scheme="light"] .markdown-body h2 {
    color: #7c3aed;
}

[data-mantine-color-scheme="dark"] .markdown-body h3,
[data-mantine-color-scheme="dark"] .markdown-body h4 {
    color: #c8c8d8;
}

[data-mantine-color-scheme="light"] .markdown-body h3,
[data-mantine-color-scheme="light"] .markdown-body h4 {
    color: #4a4760;
}

/* Paragraphs */
.markdown-body p {
    margin-bottom: 1em;
}

/* Links */
[data-mantine-color-scheme="dark"] .markdown-body a {
    color: #22d3ee;
}

[data-mantine-color-scheme="light"] .markdown-body a {
    color: #0891b2;
}

.markdown-body a:hover {
    text-decoration: underline;
}

/* Inline code */
.markdown-body code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

[data-mantine-color-scheme="dark"] .markdown-body code {
    background-color: rgba(167, 139, 250, 0.15);
    color: #d8b4fe;
}

[data-mantine-color-scheme="light"] .markdown-body code {
    background-color: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

/* Code blocks */
.markdown-body pre {
    border-radius: 8px;
    padding: 1em;
    overflow-x: auto;
    margin: 1em 0;
    border: 1px solid;
}

[data-mantine-color-scheme="dark"] .markdown-body pre {
    background-color: #0d0d12;
    border-color: #2d2d3a;
}

[data-mantine-color-scheme="light"] .markdown-body pre {
    background-color: #f5f3f7;
    border-color: #e9e5f0;
}

.markdown-body pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
    color: inherit;
}

/* Tables */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-variant-numeric: tabular-nums;
}

.markdown-body th,
.markdown-body td {
    padding: 0.75em 1em;
    text-align: left;
    border-bottom: 1px solid;
}

.markdown-body th {
    font-weight: 600;
}

[data-mantine-color-scheme="dark"] .markdown-body th,
[data-mantine-color-scheme="dark"] .markdown-body td {
    border-color: #2d2d3a;
}

[data-mantine-color-scheme="light"] .markdown-body th,
[data-mantine-color-scheme="light"] .markdown-body td {
    border-color: #e9e5f0;
}

[data-mantine-color-scheme="dark"] .markdown-body th {
    background-color: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

[data-mantine-color-scheme="light"] .markdown-body th {
    background-color: rgba(124, 58, 237, 0.05);
    color: #7c3aed;
}

/* Blockquotes */
.markdown-body blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 4px solid;
    border-radius: 0 8px 8px 0;
}

[data-mantine-color-scheme="dark"] .markdown-body blockquote {
    border-left-color: #a78bfa;
    background-color: rgba(167, 139, 250, 0.08);
    color: #c8c8d8;
}

[data-mantine-color-scheme="light"] .markdown-body blockquote {
    border-left-color: #7c3aed;
    background-color: rgba(124, 58, 237, 0.05);
    color: #4a4760;
}

/* Lists */
.markdown-body ul,
.markdown-body ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.markdown-body li {
    margin: 0.5em 0;
}

.markdown-body li::marker {
    color: #a78bfa;
}

[data-mantine-color-scheme="light"] .markdown-body li::marker {
    color: #7c3aed;
}

/* Horizontal rule */
.markdown-body hr {
    border: none;
    height: 1px;
    margin: 2em 0;
}

[data-mantine-color-scheme="dark"] .markdown-body hr {
    background-color: #2d2d3a;
}

[data-mantine-color-scheme="light"] .markdown-body hr {
    background-color: #e9e5f0;
}

/* Strong/Bold */
.markdown-body strong {
    font-weight: 600;
}

[data-mantine-color-scheme="dark"] .markdown-body strong {
    color: #ffffff;
}

/* Images */
.markdown-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1em 0;
}

/* Math (MathJax) */
.markdown-body .MathJax {
    font-size: 1.1em;
}

[data-mantine-color-scheme="dark"] .markdown-body .MathJax {
    color: #d8b4fe;
}

[data-mantine-color-scheme="light"] .markdown-body .MathJax {
    color: #7c3aed;
}

/* Mermaid diagrams */
.markdown-body .mermaid {
    margin: 1.5em 0;
    padding: 1em;
    border-radius: 8px;
    text-align: center;
    overflow-x: auto;
}

[data-mantine-color-scheme="dark"] .markdown-body .mermaid {
    background-color: #0d0d12;
    border: 1px solid #2d2d3a;
}

[data-mantine-color-scheme="light"] .markdown-body .mermaid {
    background-color: #f5f3f7;
    border: 1px solid #e9e5f0;
}

.markdown-body .mermaid svg {
    max-width: 100%;
    height: auto;
}