/* styles.css */

/*
    Modern UI foundation (Bootstrap-friendly)
    - Uses CSS variables to support light/dark modes
    - Keeps a viridis-inspired accent palette
*/

:root {
        --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        --font-display: "Playfair Display", ui-serif, Georgia, serif;

        /* Viridis-inspired accents */
        --v-purple: #9409b6;
        --v-blue: #4461a8;
        --v-teal: #28a9a2;
        --v-green: #5ec962;
        --v-lightgreen: #5ec9a2;
        --v-yellow: #fde725;
        --v-turquoise: #7edbd6;
        --v-mauve: #b58cf2;

        /* Light theme */
        --bg: #f7fafc;
        --bg-elev: rgba(255, 255, 255, 0.88);
        --bg-elev-solid: #ffffff;
        --text: #0f172a;
        --muted: #475569;
        --border: rgba(15, 23, 42, 0.12);
        --shadow: 0 16px 40px rgba(2, 6, 23, 0.10);

        --brand: #223D70;
        --brand-2: var(--v-teal);
        --accent: var(--v-green);

        --card-radius: 16px;
        --focus: rgba(33, 145, 140, 0.25);

        --page-gradient: radial-gradient(1200px 700px at 20% 0%, rgba(33,145,140,0.20), transparent 60%),
                radial-gradient(900px 600px at 85% 10%, rgba(59,82,139,0.18), transparent 55%),
                radial-gradient(900px 650px at 60% 90%, rgba(94,201,98,0.18), transparent 60%),
                linear-gradient(180deg, #f7fafc, #eef2ff);
}

html[data-theme="dark"] {
        --bg: #0b1220;
        --bg-elev: rgba(17, 24, 39, 0.72);
        --bg-elev-solid: #0f172a;
        --text: #e5e7eb;
        --muted: #a1a1aa;
        --border: rgba(226, 232, 240, 0.14);
        --shadow: 0 18px 50px rgba(0, 0, 0, 0.40);

        --brand: #9fb7ff;
        --brand-2: #7de7de;
        --accent: #a6ff9a;
        --v-mauve: #a97af0;

        --focus: rgba(253, 231, 37, 0.20);
        --page-gradient: radial-gradient(1200px 700px at 20% 0%, rgba(33,145,140,0.18), transparent 60%),
                radial-gradient(900px 600px at 85% 10%, rgba(68,1,84,0.30), transparent 55%),
                radial-gradient(900px 650px at 60% 90%, rgba(94,201,98,0.14), transparent 60%),
                linear-gradient(180deg, #050815, #0b1220);
}

/* Reset and base styles */
body {
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    background: var(--page-gradient);
    scroll-behavior: smooth;
}

/* Navbar styling */
.navbar {
    background: rgba(15, 23, 42, 0.02);
}

html[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.35);
    border-bottom: 1px solid rgba(226, 232, 240, 0.06);
    backdrop-filter: blur(10px);
}

/* Brand logo (viridis gradient) */
.brand-logo {
    display: inline-block;
    width: auto;
    height: 56px;
}

.brand-logo-lg {
    height: clamp(88px, 12vw, 148px);
}

.brand-logo-img {
    height: 56px;
    width: auto;
    display: inline-block;
}

.brand-logo-img.brand-logo-lg {
    height: clamp(88px, 12vw, 148px);
}

/* Gradient “tint” using CSS mask (works well even with a PNG that has alpha) */
.brand-logo-mask {
    display: none;
    height: 56px;
    width: 190px;
    background: linear-gradient(90deg, var(--v-purple), var(--v-blue), var(--v-teal), var(--v-green), var(--v-yellow));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: left center;
    mask-size: contain;
}

.brand-logo-mask.brand-logo-lg {
    height: clamp(88px, 12vw, 148px);
    width: clamp(260px, 40vw, 520px);
}

@supports (-webkit-mask-image: url("/static/img/paris_institute_of_brain_logo.png")) or (mask-image: url("/static/img/paris_institute_of_brain_logo.png")) {
    .brand-logo-mask {
        display: inline-block;
        -webkit-mask-image: url("/static/img/paris_institute_of_brain_logo.png");
        mask-image: url("/static/img/paris_institute_of_brain_logo.png");
    }
    .brand-logo-img {
        display: none;
    }
}

/* Hero (plain, not boxed) */
.hero-plain {
    padding: 2.5rem 0 1.25rem 0;
}

.hero-plain .hero-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.04;
}

.hero-subtitle {
    color: var(--muted);
    font-size: 1.1rem;
}

/* Full-width scroll bands (homepage) */
.band {
    width: 100%;
    padding: clamp(1.5rem, 3vw, 3rem) 0;
    background: transparent;
}

.band-inner {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.band-hero {
    min-height: clamp(22rem, 55vh, 38rem);
    display: flex;
    align-items: center;
    background: transparent;
}

.band-features,
.band-quickstart,
.band-collaborators,
.band-cta {
    min-height: auto;
    background: transparent;
}

/* Guideline cards (homepage) */
.guideline-card {
    position: relative;
    border: 1px dashed transparent;
    border-radius: 18px;
    background: transparent !important;
    border-color: transparent;
    backdrop-filter: none;
    color: var(--v-green);
    box-shadow: 0 14px 36px rgba(2, 6, 23, 0.08);
}

.guideline-card * {
    background: linear-gradient(90deg, var(--v-blue), var(--v-lightgreen));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.guideline-card ::marker {
    color: var(--v-turquoise) !important;
}

html[data-theme="dark"] .guideline-card {
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.guideline-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, var(--v-purple), var(--v-blue), var(--v-teal), var(--v-green), var(--v-yellow));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

html[data-theme="dark"] .guideline-card::before {
    background: linear-gradient(120deg, rgba(68, 1, 84, 0.7), rgba(59, 82, 139, 0.7), rgba(33, 145, 140, 0.7), rgba(94, 201, 98, 0.7), rgba(253, 231, 37, 0.7));
}

.guideline-card ol {
    list-style: none;
    padding-left: 0;
    counter-reset: guideline-step;
}

.guideline-card ol li {
    counter-increment: guideline-step;
    position: relative;
    padding-left: 2rem;
}

.guideline-card ol li::before {
    content: counter(guideline-step) ".";
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, var(--v-mauve), var(--v-turquoise));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.scroll-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.10);
    color: var(--text);
    text-decoration: none;
}

html[data-theme="dark"] .scroll-hint {
    background: rgba(15, 23, 42, 0.40);
}

/* Collaborators */
.collab-row {
    justify-content: center;
}

.collab-col {
    display: flex;
    justify-content: center;
}

.collab-tile {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    box-shadow: none;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.collab-tile:hover {
    background: var(--bg-elev);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.10), 0 0 0 1px rgba(148, 163, 184, 0.08);
    transform: translateY(-2px);
}

.collab-logo {
    display: inline-block;
    width: clamp(150px, 22vw, 220px);
    height: clamp(56px, 8vw, 84px);
}

.collab-logo-img {
    display: inline-block;
    width: clamp(150px, 22vw, 220px);
    height: auto;
    max-height: clamp(56px, 8vw, 84px);
}

.collab-logo-mask {
    display: none;
    background: linear-gradient(90deg,
        var(--v-purple) 0%,
        var(--v-blue) 22%,
        var(--v-teal) 44%,
        var(--v-green) 66%,
        #ffd600 88%,
        #ffd600 100%
    );
    background-size: var(--collab-gradient-width, 100vw) 100%;
    background-position: var(--collab-gradient-x, 0px) center;
    filter: saturate(1.35) contrast(1.15);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

@supports (-webkit-mask-image: url("/static/img/ICM_logo.svg")) or (mask-image: url("/static/img/ICM_logo.svg")) {
    .collab-logo-mask {
        display: inline-block;
    }

    .collab-logo-img {
        display: none;
    }
}

.collab-logo-icm {
    -webkit-mask-image: url("/static/img/ICM_logo.svg");
    mask-image: url("/static/img/ICM_logo.svg");
}

.collab-logo-cmrr {
    -webkit-mask-image: url("/static/img/Minnesota_logo.svg");
    mask-image: url("/static/img/Minnesota_logo.svg");
}


.collab-logo-ottawa {
    -webkit-mask-image: url("/static/img/Ottawa_logo.svg");
    mask-image: url("/static/img/Ottawa_logo.svg");
}

.collab-logo-treviso {
    -webkit-mask-image: url("/static/img/Treviso_logo.svg");
    mask-image: url("/static/img/Treviso_logo.svg");
}

.collab-logo-salpetriere {
    -webkit-mask-image: url("/static/img/Salpetriere_logo.svg");
    mask-image: url("/static/img/Salpetriere_logo.svg");
}

.collab-logo-spedali {
    -webkit-mask-image: url("/static/img/Spedali_civili_logo.svg");
    mask-image: url("/static/img/Spedali_civili_logo.svg");
}

.collab-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.collab-name {
    font-size: 0.95rem;
    color: var(--muted);
}


/* CTA band */
.cta-band {
    border-radius: 22px;
    border: 1px solid rgba(33,145,140,0.25);
    background: linear-gradient(135deg, rgba(59,82,139,0.18), rgba(33,145,140,0.18), rgba(94,201,98,0.18));
}

html[data-theme="dark"] .cta-band {
    border-color: rgba(125, 231, 222, 0.18);
    background: linear-gradient(135deg, rgba(59,82,139,0.18), rgba(33,145,140,0.14), rgba(68,1,84,0.18));
}

/* Ensure the footer sits at the bottom on short pages */
main {
    flex: 1 0 auto;
}

footer {
    margin-top: auto;
}

/* Do NOT override Bootstrap's .container sizing */
.container { }

/* Header styles */
header {
    background-color: transparent;
    color: var(--text);
    padding: 0;
    margin-bottom: 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

header .logo {
    height: 60px;
    position: absolute;
    left: 20px;
}

.title-container {
    flex: 1;
    text-align: center;
}

header h1 {
    font-size: 2.5em;
    margin-top: 10px;
}

/* Navigation styles */
nav {
    padding: 0;
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0 10px;
}

/* Navigation button styles */
.nav-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 0;
    background-color: #33526B;
    border: 2px solid black;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: 150px; /* Ensure buttons are the same size */
    text-align: center;
}

/* Modern cards / surfaces */
.surface {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

/* MRS processing outputs */
.output-section {
    width: 100%;
}

.output-surface {
    width: 100%;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.lcmodel-section,
.spectra-section,
.report-section {
    margin: 1.75rem 0;
}

.lcmodel-row,
.spectra-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

.lcmodel-box,
.spectra-box {
    flex: 0 0 50%;
    min-width: 420px;
}

.output-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}

html[data-theme="dark"] .output-card {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(226, 232, 240, 0.08);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
}

.contact-card {
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.14);
}

/* Quick start hover -> feature card activation */
.feature-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.feature-card.is-active {
    box-shadow: 0 28px 70px rgba(33, 145, 140, 0.35);
    border-color: rgba(33, 145, 140, 0.55);
    transform: translateY(-8px);
}

.feature-icon {
    height: clamp(52px, 6vw, 72px);
    width: auto;
    display: inline-block;
}

.feature-icon-mask {
    display: inline-block;
    height: clamp(52px, 6vw, 72px);
    width: clamp(52px, 6vw, 72px);
    background: linear-gradient(90deg, var(--v-green), var(--v-green), var(--v-yellow));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.feature-icon-mask.feature-icon-end {
    background: linear-gradient(90deg, var(--v-green), var(--v-green), var(--v-yellow));
    -webkit-mask-image: url("/static/img/microscope3.svg");
    mask-image: url("/static/img/microscope3.svg");
}

.hero-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

.hero-title-arial {
    font-family: Arial, var(--font-sans);
    font-weight: 700;
    background: linear-gradient(90deg, var(--v-purple), var(--v-blue), var(--v-teal), var(--v-green), var(--v-yellow));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.btn-viridis {
    border: 0;
    color: #06121a;
    font-weight: 700;
    background: linear-gradient(90deg, var(--v-teal), var(--v-green), var(--v-yellow));
    box-shadow: 0 12px 30px rgba(33, 145, 140, 0.25);
}

/* Split viridis gradients for workflow buttons */
.btn-viridis-start {
    border: 0;
    color: #000000;
    font-weight: 700;
    background: linear-gradient(90deg, var(--v-purple), var(--v-blue), var(--v-teal));
    box-shadow: 0 12px 30px rgba(59, 82, 139, 0.28);
}

.btn-viridis-end {
    border: 0;
    color: #000000;
    font-weight: 700;
    background: linear-gradient(90deg, var(--v-green), var(--v-green), var(--v-yellow));
    box-shadow: 0 12px 30px rgba(94, 201, 98, 0.28);
}

.btn-viridis-start:hover,
.btn-viridis-end:hover {
    color: #ffffff;
}

/* Neutral download utility button */
.btn-download-utility {
    display: inline-block;
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: var(--text);
    background: transparent;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-download-utility:hover {
    background: rgba(148, 9, 182, 0.12);
    border-color: var(--v-purple);
    color: var(--v-purple);
}

/* Center prediction table download buttons */
.download-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

html[data-theme="dark"] .btn-download-utility {
    border-color: rgba(226, 232, 240, 0.35);
    color: #e5e7eb;
}

html[data-theme="dark"] .btn-download-utility:hover {
    background: rgba(253, 231, 37, 0.12);
    border-color: var(--v-yellow);
    color: var(--v-yellow);
}

html[data-theme="dark"] .btn-viridis {
    color: #031014;
}

.btn-viridis:hover {
    filter: saturate(1.05) brightness(1.02);
    transform: translateY(-1px);
}

.btn-outline-viridis {
    border: 1px solid rgba(33,145,140,0.55);
    color: var(--text);
    background: transparent;
}

.btn-outline-viridis:hover {
    border-color: rgba(94,201,98,0.8);
    background: rgba(33,145,140,0.12);
}

/* Inputs focus */
input:focus, button:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--focus) !important;
}

/* Make legacy form blocks match theme */
form,
.form_fake {
    background-color: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

form label,
.form_fake label,
.working-text {
    color: var(--text);
}

/* Log/output box */
#output {
    background: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] #output {
    background: rgba(15, 23, 42, 0.65);
    color: var(--text);
}

.working-indicator {
    background: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] .working-indicator {
    background: rgba(15, 23, 42, 0.65);
}

/* Footer */
footer {
    color: var(--muted);
}

.nav-button:hover {
    background-color: #223D70;
    border-color: #223D70;
}

/* Pressed state for navigation button */
.nav-button.unpressed {
    background-color: #223D70;
    border-color: #223D70;
    color: #B6CCD8;
}

/* Unpressed state for navigation button */
.nav-button.pressed {
    background-color: #395a96;
    border-color: black;
    color: white;
}

/* Main content styles */
main {
    flex: 1;
    padding: 2em 0;
}

form {
    width: auto;
    background-color: #A6B5D7;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

form .form-group {
    margin-bottom: 1.5em;
}

form label {
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
    color: #223D70;
}

form input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form_fake {
    background-color: #A6B5D7;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.form_fake label {
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
    color: #223D70;
}

.form_fake input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Processing: working indicator */
.working-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(34, 61, 112, 0.2);
    border-radius: 8px;
}

.working-text {
    color: #223D70;
    font-weight: 700;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(34, 61, 112, 0.25);
    border-top-color: #223D70;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* Log/output box */
#output {
    max-height: 420px;
    overflow: auto;
    padding: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(34, 61, 112, 0.2);
    border-radius: 8px;
    white-space: pre-wrap;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.toggle-switch {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.toggle-switch button {
    padding: 10px 20px;
    border: none;
    background: #A6B5D7;
    cursor: pointer;
    transition: 0.3s;
}

.toggle-switch button:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.toggle-switch button:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#multiFolderStatus,
#fidFolderStatus,
#waterFolderStatus {
    display: inline-block;
    vertical-align: middle;
    white-space: pre-line;
    color: #223D70;
    font-weight: 600;
    max-width: 100%;
}

.toggle-switch button.active {
    background: #223D70;
    color: white;
}

.options {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.group {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    flex: 1;
    margin-right: 10px;
    background: #B6CCD8;
}

.group h2 {
    text-align: center;
    color: #264766;
}

.group:last-child {
    margin-right: 0;
}

.radio-btn,
.checkbox-btn {
    display: block;
    width: 100%;
    margin: 5px 0;
    padding: 10px 20px;
    border: 2px solid black;
    border-radius: 10px;
    cursor: pointer;
    background: #E3E9EF;
    color: #264766;
    transition: background 0.3s;
    text-align: center;
}

.radio-btn.active,
.checkbox-btn.active {
    background: #264766;
    color: #B6CCD8;
}

#runBtn {
    margin-top: 20px;
    padding: 10px 20px;
    background: #6392A1;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
    border-radius: 5px;
}

#runBtn:disabled {
    background: #98A5C5;
    cursor: not-allowed;
}

.full-width {
    width: 100%;
}

input[type="file"] {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.run_button {
    padding: 1em;
    background-color: #263238;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
    width: 100%;
}

.run_button:hover {
    background-color: #263238;
}

button[type="submit"] {
    padding: 1em;
    background-color: #223D70;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #263238;
}

#result {
    margin-top: 1.5em;
}

#copy-button,
#download-button,
button:not(.btn-download-utility) {
    padding: 0.5em 1em;
    background-color: #223D70;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    margin-right: 0.5em;
}

#copy-button:hover,
#download-button:hover {
    background-color: #263238;
}

/* Ensure utility download buttons stay neutral despite global button styles */
button.btn-download-utility {
    padding: 0.5em 1em;
    font-size: 1em;
    background: transparent;
    color: var(--text);
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.6);
}

button.btn-download-utility:hover {
    background: rgba(148, 9, 182, 0.12);
    border-color: var(--v-purple);
    color: var(--v-purple);
}

html[data-theme="dark"] button.btn-download-utility {
    border-color: rgba(226, 232, 240, 0.35);
    color: #e5e7eb;
}

html[data-theme="dark"] button.btn-download-utility:hover {
    background: rgba(253, 231, 37, 0.12);
    border-color: var(--v-yellow);
    color: var(--v-yellow);
}

/* File input button styles */
.file-input-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0;
    background-color: #33526B;
    border: 2px solid black;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.file-input-button:hover {
    background-color: #223D70;
    border-color: #223D70;
}

/* Footer styles (match navbar aesthetic) */
footer {
    background: rgba(15, 23, 42, 0.02);
    color: var(--text);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] footer {
    background: rgba(15, 23, 42, 0.35);
    border-top: 1px solid rgba(226, 232, 240, 0.06);
    backdrop-filter: blur(10px);
}

footer a {
    color: var(--muted);
}

footer a:hover {
    color: var(--text);
}

/* Responsive design */
@media screen and (max-width: 768px) {
    form {
        padding: 1.5em;
    }

    button[type="submit"] {
        font-size: 1em;
    }
}

#result.error {
    color: red;
}

.metric_img {
    width: 45%;
    margin-right: 1em;
    background-color: #ffffff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Predictions container styles */
#predictions-section-idh,
#predictions-section-1p19q {
    width: 100%;
    margin-top: 2em;
    overflow: auto;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background-color: transparent;
    padding: 1em;
    margin-bottom: 2em;
}

/* Predictions table styles */
#predictions-table-idh,
#predictions-table-1p19q {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1em;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    text-align: center;
}

#predictions-table-idh th,
#predictions-table-idh td,
#predictions-table-1p19q th,
#predictions-table-1p19q td {
    border: 1px solid var(--border);
    padding: 8px;
    text-align: center;
}

#predictions-table-idh th,
#predictions-table-1p19q th {
    background: transparent;
    color: #ffffff;
}

#predictions-table-idh td,
#predictions-table-1p19q td {
    background: transparent;
    color: var(--text);
}

#predictions-table-idh th.final-prediction-header,
#predictions-table-1p19q th.final-prediction-header {
    background-color: rgba(33, 145, 140, 0.08);
    color: #ffffff;
}

#predictions-table-idh thead,
#predictions-table-1p19q thead {
    background: linear-gradient(90deg, var(--v-purple), var(--v-blue), var(--v-teal));
}

#predictions-table-idh tr,
#predictions-table-1p19q tr,
#predictions-table-idh tr:nth-child(even),
#predictions-table-1p19q tr:nth-child(even) {
    background: transparent;
}

/* #predictions-table-idh td,
#predictions-table-1p19q td {
    color: var(--text);
} */

#predictions-table-idh td.final-prediction,
#predictions-table-1p19q td.final-prediction {
    background-color: rgba(253, 231, 37, 0.28);
    color: var(--text);
}

#predictions-table-idh tr:nth-child(even) td.final-prediction,
#predictions-table-1p19q tr:nth-child(even) td.final-prediction {
    background-color: rgba(253, 231, 37, 0.36);
}

#predictions-table-idh tr:hover,
#predictions-table-1p19q tr:hover {
    background-color: rgba(33, 145, 140, 0.16);
}

#predictions-table-idh tr:hover td.final-prediction,
#predictions-table-1p19q tr:hover td.final-prediction {
    background-color: rgba(33, 145, 140, 0.45) !important;
    color: #ffffff;
}

html[data-theme="dark"] #predictions-table-idh td.final-prediction,
html[data-theme="dark"] #predictions-table-1p19q td.final-prediction {
    background-color: rgba(253, 231, 37, 0.18);
    color: var(--text);
}

html[data-theme="dark"] #predictions-table-idh tr:nth-child(even) td.final-prediction,
html[data-theme="dark"] #predictions-table-1p19q tr:nth-child(even) td.final-prediction {
    background-color: rgba(253, 231, 37, 0.26);
}

.section {
    display: none;
}

.section.active {
    display: block;
}

.shap-plot-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 2em 0;
}

.plot-box {
    flex: 1 1 48%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

html[data-theme="dark"] .plot-box {
    background: rgba(15, 23, 42, 0.45);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}

.plot-box h3 {
    font-size: 1.4em;
    margin: 0 0 1em;
    color: #223D70;
    text-align: center;
}

.plot-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 1.5em;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.plot-box button:not(.btn-download-utility) {
    padding: 10px 20px;
    background-color: #223D70;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.plot-box button:not(.btn-download-utility):hover {
    background-color: #263238;
}

/* Preserve utility download styling inside plot boxes */
.plot-box button.btn-download-utility {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(148, 163, 184, 0.6);
}

.plot-box button.btn-download-utility:hover {
    background: rgba(148, 9, 182, 0.12);
    border-color: var(--v-purple);
    color: var(--v-purple);
}

html[data-theme="dark"] .plot-box button.btn-download-utility {
    border-color: rgba(226, 232, 240, 0.35);
    color: #e5e7eb;
}

html[data-theme="dark"] .plot-box button.btn-download-utility:hover {
    background: rgba(253, 231, 37, 0.12);
    border-color: var(--v-yellow);
    color: var(--v-yellow);
}



.plot-frame {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
}


#sd-container .plot-box,
#analysis-container .plot-box {
    width: 100%;
    max-width: 100%;
    height: auto;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 0.5em;
}

#sd-container iframe.plot-frame,
#analysis-container iframe.plot-frame {
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
    border-radius: 6px;
}


#pdf-container iframe {
    width: 100%;
    height: 100vh;
    padding: 10px 0;
}


#addFidFolderBtn.btn-outline-viridis,
#addWaterFolderBtn.btn-outline-viridis,
#addMultiFolderBtn.btn-outline-viridis {
    background: #1a969267 !important;
    color: #fff !important;
    /* border: 1px solid #21A099 !important; */
    border-radius: 8px !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

#monoBtn.btn-outline-viridis,
#multiBtn.btn-outline-viridis {
  border-radius: 8px !important;
}

#monoBtn.btn-outline-viridis:not(.active),
#multiBtn.btn-outline-viridis:not(.active) {
  background: rgba(33,145,140,0.06) !important;
}

#monoBtn.btn-outline-viridis.active,
#multiBtn.btn-outline-viridis.active {
  background: rgba(33,145,140,0.18) !important;
  border-color: rgba(94,201,98,0.8) !important;
}