/* `hidden` must always mean hidden.
 *
 * Bootstrap's display utilities are `!important` (.d-flex is display:flex
 * !important), and they come after its own [hidden] rule, so an element with
 * both -- a box meant to appear only sometimes -- showed all the time. That put
 * an empty red warning on "Your plan is ready" whenever nothing was overdue, and
 * could show "All done" on the Products fix panel before anything was done.
 * `html [hidden]` outranks a single class, so this wins wherever it loads. */
html [hidden] {
    display: none !important;
}

:root {
    --primary-color: #2563eb;
    --secondary-color: #14b8a6;
    --danger-color: #dc2626;
    --warning-color: #d97706;
    --info-color: #0891b2;
    --ai-color: #7c3aed;
    --dark-color: #111827;
    --light-color: #f4f7fb;
    --success-color: #15803d;
    --surface-color: #ffffff;
    --muted-text: #667085;
    --border-color: #dfe5ec;
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --border-radius-lg: 12px;
    --box-shadow: 0 12px 28px rgba(23, 33, 43, 0.10);
    --box-shadow-soft: 0 2px 8px rgba(23, 33, 43, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.96);
    --glass-border: #e2e7ec;
    --transition: all 0.18s ease;
}

.feature-card h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

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

body {
    background: #f4f7fb;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: #111827;
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.55;
}

body::before {
    display: none;
}

/* Navigation */
.navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    box-shadow: none;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--glass-border);
    min-height: 72px;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--dark-color);
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-brand i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.nav-link {
    color: #475569;
    font-weight: 500;
    padding: 0.55rem 0.82rem;
    border-radius: 6px;
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link.active {
    color: var(--primary-color);
    background: #eaf2ff;
    border-radius: 6px;
    font-weight: 600;
}

/* Cards */
.card {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-soft);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    background: var(--surface-color);
}

.card:hover {
    box-shadow: 0 4px 14px rgba(23, 33, 43, 0.08);
    transform: none;
}

.card-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    padding: 1.1rem 1.3rem;
    color: #1e293b;
}

.card-body {
    padding: 1.3rem;
}

/* Buttons */
.btn {
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: var(--transition);
    padding: 0.6rem 1rem;
    font-size: 0.94rem;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-success:hover {
    background-color: #166534;
    border-color: #166534;
}

.btn-premium {
    background: var(--primary-color);
    color: #ffffff;
    border: 1px solid var(--primary-color);
    box-shadow: none;
}

.btn-premium:hover {
    color: #ffffff;
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
    transform: none;
}

.btn-outline-premium {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
}

.btn-outline-premium:hover {
    color: #0f172a;
    background: #ffffff;
    border-color: #ffffff;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #0ea5a4 100%);
    color: white;
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: none;
}

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.hero-metric {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    min-width: 150px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
}

.hero-metric h3 {
    font-size: 1.4rem;
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.hero-metric p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.hero-surface {
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
    box-shadow: var(--box-shadow-soft);
}

.hero-surface-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.hero-surface-header p {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
}

.hero-surface-header h3 {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.hero-surface-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.hero-surface-card {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: var(--box-shadow-soft);
}

.hero-surface-card span {
    font-size: 0.8rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-surface-card h4 {
    margin: 0.5rem 0 0.35rem;
    font-weight: 700;
}

.section-head {
    margin-bottom: 2rem;
}

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.45rem;
    display: inline-block;
}

.section-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    letter-spacing: 0;
}

.section-subtitle {
    color: var(--muted-text);
    font-size: 1rem;
    margin: 0;
}

/* Step Cards */
.step-card {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    background: var(--surface-color);
    transition: var(--transition);
    cursor: pointer;
    height: 100%;
    box-shadow: var(--box-shadow-soft);
}

.feature-option {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
    transition: var(--transition);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow);
    border-color: rgba(14, 165, 164, 0.5);
}

.step-number {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 18px -10px rgba(14, 165, 164, 0.8);
}

/* Stats Cards */
.stat-card {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 1.35rem;
    text-align: left;
    box-shadow: var(--box-shadow-soft);
    transition: var(--transition);
    height: 100%;
    border: 1px solid var(--border-color);
}

.stat-card:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(23, 33, 43, 0.08);
}

.stat-icon {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: var(--primary-color);
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

body.dark-mode .stat-value {
    color: #f8fafc;
}

.stat-label {
    font-size: 0.95rem;
    color: var(--muted-text);
}

.cta-panel {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #0f766e 100%);
    border-radius: var(--border-radius-lg);
    border: none;
    box-shadow: var(--box-shadow);
}

/* Progress Steps */
.progress-steps {
    position: relative;
    width: 430px;
    height: 430px;
    margin: 2rem auto;
}

.progress-steps::before {
    content: '';
    position: absolute;
    inset: 57px; /* ring passes through the circle centers (radius 158px) */
    border-radius: 50%;
    border: 2px dashed rgba(148, 163, 184, 0.4);
}

.progress-step {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.progress-step-circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #e5edff 0, #ffffff 40%, #ffffff 100%);
    border: 3px solid #e2e8f0;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: var(--transition);
    font-size: 0.68rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    text-align: center;
    padding: 0 6px;
}

.progress-step-title {
    display: block;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.62rem;
    line-height: 1.2;
    color: #0f172a;
}

.progress-step.active .progress-step-circle {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0ea5e9 100%);
    border-color: transparent;
    color: white;
}

.progress-step.completed .progress-step-circle {
    background: linear-gradient(135deg, var(--success-color) 0%, #22c55e 100%);
    border-color: transparent;
    color: white;
}

.progress-step.active .progress-step-title,
.progress-step.completed .progress-step-title {
    color: #ffffff;
}

/* Steps are positioned around the ring dynamically by the dashboard script
   (works for any number of steps); mobile falls back to a wrapped grid. */

/* Forms */
.form-control, .form-select {
    border-radius: var(--border-radius-sm);
    border: 1px solid #cfd7df;
    padding: 0.67rem 0.82rem;
    box-shadow: none;
    min-height: 44px;
    font-size: 0.95rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-label {
    color: #344054;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

/* Tables */
.table {
    color: #334155;
    font-size: 0.92rem;
    margin-bottom: 0;
}

.table thead th {
    border-bottom: 1px solid var(--border-color);
    color: #475569;
    font-weight: 700;
    background-color: #f7f9fb;
    padding: 0.75rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.table tbody td {
    padding: 0.75rem;
    border-color: #edf0f3;
}

.table tbody tr:hover {
    background-color: #f8fafc;
}

/* Charts */
.chart-container {
    width: 100%;
    height: 400px;
    margin: 1.5rem 0;
    position: relative;
    background: #ffffff;
    border-radius: var(--border-radius);
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.model-config {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 1.75rem;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    display: none;
}

.loading-overlay.active {
    display: flex;
}

/* Alerts */
.alert {
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    box-shadow: none;
}

/* Footer */
.footer {
    background-color: #0f172a;
    color: white;
    padding: 2.5rem 0;
    margin-top: 4rem;
}

.footer a {
    color: #94a3b8;
    text-decoration: none;
    transition: var(--transition);
}

.footer a:hover {
    color: white;
}

/* Legibility: muted/secondary text must stay light on the always-dark hero & footer */
.footer .text-muted,
.footer .text-body-secondary,
.footer small.text-muted {
    color: #94a3b8 !important;
}
.hero-section .text-muted,
.hero-section .text-body-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}
/* Section headers placed inside the dark hero must be light, not the dark
   colors those classes carry for use on white sections. */
.hero-section .section-title {
    color: #ffffff !important;
}
.hero-section .section-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}
.hero-section .section-eyebrow {
    color: #7dd3fc !important;
}
/* A light card inside the dark hero (the integration pages' "What Fopsis
   reads" list) keeps dark ink: it inherited the hero's white, 1.04:1. */
.hero-section .ig-card {
    color: #0f172a;
}
.hero-section .ig-card .text-muted {
    color: #475569 !important;
}
/* A grey outline button vanished into the hero (1.3:1); a light outline. */
.hero-section .btn.btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.6);
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}
/* Half-white small print on the blue panel was 2.8:1. */
.cta-panel .text-white-50 {
    color: rgba(255, 255, 255, 0.85) !important;
}
/* Light hero for content/hub marketing pages (Integrations, Who we serve,
   Why us, Resources) — matches the Features/Pricing headers: white page
   background with the default dark section-title/subtitle/blue eyebrow. */
.page-hero {
    padding: 4rem 0 2.5rem;
}

/* Utility Classes */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary-light {
    background-color: rgba(37, 99, 235, 0.1);
}

.positive-change {
    color: var(--success-color);
    font-weight: 600;
}

.negative-change {
    color: var(--danger-color);
    font-weight: 600;
}

.neutral-change {
    color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .progress-steps {
        width: auto;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .progress-steps::before {
        display: none;
    }

    .progress-step {
        position: static;
        transform: none !important; /* neutralize the JS ring positioning */
        margin: 0;
    }
}

/* Dark mode theme */
body.dark-mode {
    background: radial-gradient(circle at top, #020617 0%, #020617 55%, #020617 100%);
    color: #e5e7eb;
    --surface-color: #020617;
    --muted-text: #9ca3af;
}

body.dark-mode::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.25), transparent 45%),
        radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.2), transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(8, 47, 73, 0.5), transparent 55%);
    pointer-events: none;
    z-index: -1;
}

body.dark-mode .navbar {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: rgba(30, 64, 175, 0.6);
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.9);
}

body.dark-mode .navbar-brand {
    color: #e5e7eb;
}

body.dark-mode .nav-link {
    color: #9ca3af;
}

body.dark-mode .nav-link.active {
    color: #e5e7eb;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(59, 130, 246, 0.25));
}

body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .step-card,
body.dark-mode .hero-surface-card {
    background: #020617;
    border-color: rgba(55, 65, 81, 0.9);
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 1);
}

body.dark-mode .card-header {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.85));
    border-bottom-color: rgba(55, 65, 81, 0.9);
    color: #e5e7eb;
}

body.dark-mode .hero-section {
    background: linear-gradient(135deg, #020617 0%, #1e293b 45%, #0f766e 100%);
}

body.dark-mode .hero-surface {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(55, 65, 81, 0.9);
}

body.dark-mode .hero-metric {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(55, 65, 81, 0.9);
}

body.dark-mode .table {
    color: #e5e7eb;
}

body.dark-mode .table thead th {
    background-color: rgba(15, 23, 42, 0.95);
    border-bottom-color: rgba(55, 65, 81, 0.9);
    color: #9ca3af;
}

body.dark-mode .table tbody tr:hover {
    background-color: rgba(15, 23, 42, 0.85);
}

body.dark-mode .chart-container {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(55, 65, 81, 0.9);
}

body.dark-mode .model-config {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(55, 65, 81, 0.9);
}

body.dark-mode .footer {
    background-color: #020617;
}

body.dark-mode .footer a {
    color: #9ca3af;
}

body.dark-mode .footer a:hover {
    color: #e5e7eb;
}

body.dark-mode .loading-overlay {
    background-color: rgba(15, 23, 42, 0.96);
}

body.dark-mode .section-title {
    color: #e5e7eb;
}

body.dark-mode .section-subtitle,
body.dark-mode p,
body.dark-mode .text-muted {
    color: #9ca3af !important;
}

body.dark-mode .badge.bg-light.text-dark {
    background-color: rgba(15, 23, 42, 0.9) !important;
    color: #e5e7eb !important;
}

body.dark-mode .list-group-item {
    background-color: #020617;
    color: #e5e7eb;
    border-color: rgba(55, 65, 81, 0.8);
}

body.dark-mode .list-group-item.active {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #020617;
    border-color: rgba(55, 65, 81, 0.9);
    color: #e5e7eb;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
    color: #4b5563;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

body.dark-mode .alert {
    background-color: #020617;
    color: #e5e7eb;
    border-color: rgba(55, 65, 81, 0.9);
}

/* ---- Dark mode reaches Bootstrap (2026-10-07) --------------------------------
   The rules above darken surfaces, but Bootstrap kept its light-mode ink: a
   card body computed to #212529 and a table cell to #000 on #020617, about
   1.2:1, on most pages. Now js/theme.js and js/nav.js also set Bootstrap's own
   colour mode (data-bs-theme="dark" on <html>), and these variables point it
   at the app's palette, so every component -- card bodies, table cells, form
   labels, list groups, dropdowns, tabs, subtle badges -- inherits light ink on
   the navy surface. Measured by tools/contrast-probe.js on 27 pages.         */
body.dark-mode {
    --bs-body-color: #e5e7eb;
    --bs-body-color-rgb: 229, 231, 235;
    --bs-body-bg: #020617;
    --bs-body-bg-rgb: 2, 6, 23;
    --bs-emphasis-color: #f8fafc;
    --bs-emphasis-color-rgb: 248, 250, 252;
    --bs-heading-color: inherit;
    --bs-secondary-color: #9ca3af;
    --bs-secondary-color-rgb: 156, 163, 175;
    --bs-secondary-bg: #0f172a;
    --bs-secondary-bg-rgb: 15, 23, 42;
    --bs-tertiary-color: #94a3b8;
    --bs-tertiary-color-rgb: 148, 163, 184;
    --bs-tertiary-bg: #0b1220;
    --bs-tertiary-bg-rgb: 11, 18, 32;
    --bs-border-color: #334155;
    --bs-border-color-translucent: rgba(148, 163, 184, 0.2);
}

/* A card header was a gradient into bright blue; muted text and outline
   buttons on its right-hand end fell to 2-4:1. Same idea, deeper blue. */
body.dark-mode .card-header {
    background: linear-gradient(135deg, #0f172a, #172554);
}

/* ...but a red header (a card of things that cannot be undone) stays red. */
body.dark-mode .card-header.bg-danger {
    background: #7f1d1d !important;
    color: #fff;
}

/* Bootstrap's dark mode keeps the light-mode text colours; on #020617 these
   land just under 4.5:1. The 400 step of each hue reads cleanly. */
body.dark-mode .text-primary { color: #60a5fa !important; }
body.dark-mode .text-secondary { color: #9ca3af !important; }
body.dark-mode .text-success { color: #4ade80 !important; }
body.dark-mode .text-danger { color: #f87171 !important; }
body.dark-mode .text-dark { color: #e5e7eb !important; }
/* ...except on the two fills that stay bright in dark mode. */
body.dark-mode .bg-warning .text-dark,
body.dark-mode .bg-warning.text-dark,
body.dark-mode .bg-info.text-dark,
body.dark-mode .text-bg-warning,
body.dark-mode .text-bg-info {
    color: #111827 !important;
}

/* Pages wrote bg-white / bg-light to mean "the surface" and "a quiet panel";
   in dark mode those are the dark surface and the panel one step up. */
body.dark-mode .bg-white { background-color: #020617 !important; }
body.dark-mode .bg-light { background-color: #0f172a !important; }

body.dark-mode .section-eyebrow { color: #60a5fa; }
body.dark-mode .form-label { color: #cbd5e1; }
body.dark-mode .link-primary { color: #60a5fa !important; }

body.dark-mode .btn-outline-primary {
    --bs-btn-color: #60a5fa;
    --bs-btn-border-color: #3b82f6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2563eb;
    --bs-btn-active-border-color: #2563eb;
}
body.dark-mode .btn-outline-secondary {
    --bs-btn-color: #cbd5e1;
    --bs-btn-border-color: #475569;
    --bs-btn-hover-color: #f8fafc;
    --bs-btn-hover-bg: #334155;
    --bs-btn-hover-border-color: #475569;
    --bs-btn-active-color: #f8fafc;
    --bs-btn-active-bg: #475569;
    --bs-btn-active-border-color: #475569;
}
body.dark-mode .btn-outline-success {
    --bs-btn-color: #4ade80;
    --bs-btn-border-color: #16a34a;
}
body.dark-mode .btn-outline-danger {
    --bs-btn-color: #f87171;
    --bs-btn-border-color: #dc2626;
}
body.dark-mode .btn-outline-dark {
    --bs-btn-color: #e5e7eb;
    --bs-btn-border-color: #64748b;
    --bs-btn-hover-color: #020617;
    --bs-btn-hover-bg: #e5e7eb;
    --bs-btn-hover-border-color: #e5e7eb;
    --bs-btn-active-color: #020617;
    --bs-btn-active-bg: #e5e7eb;
    --bs-btn-active-border-color: #e5e7eb;
}

/* ---- Light mode: Bootstrap's colours on the app's surfaces (2026-10-07) -----
   Bootstrap's blue, red, green and grey are tuned to pass 4.5:1 on pure white
   and no further: on the app's #f4f7fb page and its tinted rows (#fffbeb,
   #ecfeff, #fdecec) they measured 3.8-4.4:1, and its amber and cyan text
   1.6-2:1 anywhere. Text takes the next step down of each hue (Bootstrap's own
   hover shades), which clears 4.9:1 on every tint the app uses; fills and
   borders keep the brand colours. Measured by tools/contrast-probe.js. */
body:not(.dark-mode) {
    --bs-link-color: #0a58ca;
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #084298;
    --bs-link-hover-color-rgb: 8, 66, 152;
}
body:not(.dark-mode) .text-primary { color: #0a58ca !important; }
body:not(.dark-mode) .text-secondary { color: #5c636a !important; }
body:not(.dark-mode) .text-success { color: #146c43 !important; }
body:not(.dark-mode) .text-danger { color: #b02a37 !important; }
body:not(.dark-mode) .text-warning { color: #7a5c00 !important; }
body:not(.dark-mode) .text-info { color: #06697d !important; }
body:not(.dark-mode) .link-primary { color: #0a58ca !important; }
body:not(.dark-mode) .btn-outline-primary { --bs-btn-color: #0a58ca; }
body:not(.dark-mode) .btn-outline-secondary { --bs-btn-color: #5c636a; }
body:not(.dark-mode) .btn-outline-success { --bs-btn-color: #146c43; }
body:not(.dark-mode) .btn-outline-danger { --bs-btn-color: #b02a37; }
body:not(.dark-mode) .btn-outline-warning { --bs-btn-color: #7a5c00; }
body:not(.dark-mode) .btn-outline-info { --bs-btn-color: #06697d; }

/* Application shell */
body > .navbar > .container {
    width: 100%;
    max-width: none;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

body > .container-fluid.mt-4 {
    margin-top: 0 !important;
    padding: 0;
}

body > .container-fluid.mt-4.standalone-app-page {
    width: calc(100% - 2rem);
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 2rem 1rem 3rem;
}

body > .navbar.navbar-dark.bg-primary {
    color: #111827;
    background: #ffffff !important;
}

body > .navbar.navbar-dark.bg-primary .navbar-brand,
body > .navbar.navbar-dark.bg-primary .nav-link {
    color: #475467;
}

body > .navbar.navbar-dark.bg-primary .navbar-brand {
    color: #111827;
}

body > .navbar.navbar-dark.bg-primary .nav-link.active {
    color: #1d4ed8;
    background: #eaf2ff;
}

body > .navbar.navbar-dark.bg-primary .navbar-toggler {
    border-color: #cfd7df;
    filter: invert(1);
}

body > .container-fluid.mt-4 > .row {
    min-height: calc(100vh - 72px);
    margin: 0;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 {
    width: 238px;
    flex: 0 0 238px;
    margin-bottom: 0 !important;
    padding: 1rem 0.75rem;
    background: #ffffff;
    border-right: 1px solid #dfe5ec;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 > .list-group {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    gap: 0.18rem;
    border: 0;
    border-radius: 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0.68rem 0.78rem;
    color: #475467;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.25;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item i {
    width: 22px;
    flex: 0 0 22px;
    margin-right: 0.45rem !important;
    color: #667085;
    font-size: 1.08rem;
    text-align: center;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item:hover {
    color: #111827;
    background: #f1f5f9;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.active {
    color: #1d4ed8;
    background: #eaf2ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.active i {
    color: #2563eb;
}

/* The menu in dark mode: its labels were #475467 on #020617 (2.6:1), and the
   page you are on kept the light-blue highlight under a white label. */
body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item {
    color: #cbd5e1;
}
body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item i {
    color: #94a3b8;
}
body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item:hover {
    color: #f8fafc;
    background: #0f172a;
}
body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.active {
    color: #f1f5f9;
    background: #172554;
    box-shadow: inset 3px 0 0 #60a5fa;
}
body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.active i {
    color: #60a5fa;
}

/* ---- Shared navigation (js/nav.js) -----------------------------------------
   The separators used to be drawn on the 7th, 13th and last items of the old
   hand-copied menu. Counting children breaks the moment an entry moves, so the
   menu now draws its own dividers and groups.                                  */

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .fps-label {
    flex: 1 1 auto;
    min-width: 0;
}

.fps-nav .fps-sub,
.fps-nav .fps-group {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.fps-nav .fps-sep {
    flex: 0 0 auto;
    height: 1px;
    margin: 0.45rem 0.3rem;
    background: #e5e7eb;
}

/* Settings follows straight after Catalog, set off by a rule. It used to be
   pinned to the foot of the screen, which left a tall empty band under Catalog
   whenever the groups above it were closed. */
@media (min-width: 768px) {
    .fps-nav .fps-bottom {
        margin-top: 0.45rem;
        padding-top: 0.6rem;
        border-top: 1px solid #e5e7eb;
    }
}

/* A group toggle is a button dressed as a menu item. */
body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-toggle {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-toggle i.fps-chev {
    flex: 0 0 auto;
    width: auto;
    margin-right: 0 !important;
    margin-left: auto;
    font-size: 0.78rem;
    transition: transform 0.18s ease;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-toggle.fps-open i.fps-chev {
    transform: rotate(180deg);
}

/* Reports is both a page and a group: the label opens the page, the chevron
   beside it opens the views. */
.fps-nav .fps-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.fps-nav .fps-row > .list-group-item {
    flex: 1 1 auto;
    min-width: 0;
}

.fps-nav .fps-chevbtn {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #667085;
    cursor: pointer;
}

.fps-nav .fps-chevbtn:hover {
    background: #f1f5f9;
    color: #111827;
}

.fps-nav .fps-chevbtn i {
    font-size: 0.78rem;
    transition: transform 0.18s ease;
}

.fps-nav .fps-row.fps-open .fps-chevbtn i {
    transform: rotate(180deg);
}

/* The area you are in, when the page itself is one of its views. */
body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-in:not(.active) {
    color: #1d4ed8;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-in:not(.active) i {
    color: #2563eb;
}

/* Items inside a group sit under their parent's label. */
body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-subitem {
    min-height: 36px;
    padding: 0.4rem 0.78rem 0.4rem 2.6rem;
    font-size: 0.88rem;
    font-weight: 500;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-subitem i {
    width: 18px;
    flex: 0 0 18px;
    margin-left: -1.56rem;
    font-size: 0.82rem;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-new {
    color: #2563eb;
    font-weight: 600;
}

body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-new i {
    color: #2563eb;
}

body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-in:not(.active),
body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-new {
    color: #93c5fd;
}

body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-in:not(.active) i,
body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item.fps-new i {
    color: #60a5fa;
}

/* Tabs for the pages that make up one area. */
.fps-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid #dfe5ec;
    overflow-x: auto;
}

.fps-tab {
    margin-bottom: -1px;
    padding: 0.55rem 0.9rem;
    border-bottom: 2px solid transparent;
    color: #475467;
    font-size: 0.93rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.fps-tab:hover {
    color: #111827;
}

.fps-tab.active {
    color: #1d4ed8;
    border-bottom-color: #2563eb;
}

body.dark-mode .fps-nav .fps-sep,
body.dark-mode .fps-nav .fps-bottom {
    background-color: transparent;
    border-color: #1e293b;
}

body.dark-mode .fps-nav .fps-sep {
    background: #1e293b;
}

body.dark-mode .fps-nav .fps-chevbtn:hover {
    background: #1e293b;
    color: #e5e7eb;
}

body.dark-mode .fps-tabs {
    border-bottom-color: #1e293b;
}

body.dark-mode .fps-tab {
    color: #cbd5e1;
}

body.dark-mode .fps-tab.active {
    color: #93c5fd;
    border-bottom-color: #60a5fa;
}

/* A tab of things that cannot be undone (Profile's Data & account). */
.fps-tab.fps-tab-danger {
    color: #b02a37;
}

.fps-tab.fps-tab-danger:hover {
    color: #842029;
}

.fps-tab.fps-tab-danger.active {
    color: #b02a37;
    border-bottom-color: #dc3545;
}

body.dark-mode .fps-tab.fps-tab-danger {
    color: #f87171;
}

body.dark-mode .fps-tab.fps-tab-danger.active {
    color: #fca5a5;
    border-bottom-color: #f87171;
}

body > .container-fluid.mt-4 > .row > .col-md-9.col-lg-10 {
    width: calc(100% - 238px);
    min-width: 0;
    flex: 1 1 auto;
    padding: 2rem 2.25rem 3.5rem;
    background: #f4f7fb;
}

body > .container-fluid.mt-4 > .row > .col-md-9.col-lg-10 > .container,
body > .container-fluid.mt-4 > .row > .col-md-9.col-lg-10 > .container.mt-4 {
    width: 100%;
    max-width: 1480px;
    margin-top: 0 !important;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

body > .container-fluid.mt-4 .section-head {
    max-width: 720px;
}

body > .container-fluid.mt-4 .section-title i {
    color: var(--primary-color);
    font-size: 0.9em;
}

body > .container-fluid.mt-4 .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

body > .container-fluid.mt-4 .card h5,
body > .container-fluid.mt-4 .card-header h5 {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0;
}

body > .container-fluid.mt-4 .row.g-4 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

body > .container-fluid.mt-4 .shadow-sm {
    box-shadow: var(--box-shadow-soft) !important;
}

body > .container-fluid.mt-4 .rounded,
body > .container-fluid.mt-4 .badge,
body > .container-fluid.mt-4 .input-group-text,
body > .container-fluid.mt-4 .modal-content {
    border-radius: 6px !important;
}

body > .container-fluid.mt-4 .modal-content {
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 46px rgba(23, 33, 43, 0.18);
}

body > .container-fluid.mt-4 .modal-header,
body > .container-fluid.mt-4 .modal-footer {
    border-color: var(--border-color);
}

.team-access-editor {
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
}

.team-access-editor summary {
    color: #1d4ed8;
    font-weight: 700;
    cursor: pointer;
}

.permission-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 72px;
    padding: 0.75rem;
    border: 1px solid #dfe5ec;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
}

.permission-option:hover {
    border-color: #a9c5fb;
    background: #f7faff;
}

.permission-option .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.permission-option strong,
.permission-option small {
    display: block;
}

.permission-option strong {
    color: #1f2937;
    font-size: 0.88rem;
}

.permission-option small {
    margin-top: 0.15rem;
    color: #667085;
    font-size: 0.78rem;
    line-height: 1.35;
}

body > .container-fluid.mt-4 .progress-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    height: auto;
    margin: 0;
    gap: 0.65rem;
}

body > .container-fluid.mt-4 .progress-steps::before {
    display: none;
}

body > .container-fluid.mt-4 .progress-step {
    position: static;
    transform: none !important;
    min-width: 0;
}

body > .container-fluid.mt-4 .progress-step-circle {
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 0.5rem;
    border: 1px solid #d8e0e7;
    border-radius: 6px;
    background: #f8fafc;
    box-shadow: none;
}

body > .container-fluid.mt-4 .progress-step-title {
    overflow: hidden;
    color: #475467;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-overflow: ellipsis;
}

body > .container-fluid.mt-4 .progress-step.active .progress-step-circle {
    background: #2563eb;
    border-color: #2563eb;
}

body > .container-fluid.mt-4 .progress-step.completed .progress-step-circle {
    background: #eaf2ff;
    border-color: #a9c5fb;
}

body > .container-fluid.mt-4 .progress-step.completed .progress-step-title {
    color: #1d4ed8;
}

body > .container-fluid.mt-4 .progress-step.active .progress-step-title {
    color: #ffffff;
}

body > .container-fluid.mt-4 .chart-container {
    margin: 0;
    border: 0;
    border-radius: 6px;
}

body > .container-fluid.mt-4 canvas {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

body > .container-fluid.mt-4 .table-responsive {
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

body > .container-fluid.mt-4 .table-bordered > :not(caption) > * {
    border-color: #e7ebef;
}

body > .container-fluid.mt-4 .alert-info {
    color: #155e75;
    background: #ecfeff;
    border-color: #bae6fd;
}

body > .container-fluid.mt-4 .alert-warning {
    color: #854d0e;
    background: #fffbeb;
    border-color: #fde68a;
}

body.dark-mode > .container-fluid.mt-4 .alert-info {
    color: #a5f3fc;
    background: #082f49;
    border-color: #0e7490;
}

body.dark-mode > .container-fluid.mt-4 .alert-warning {
    color: #fde68a;
    background: #2a1d05;
    border-color: #854d0e;
}

body > .container-fluid.mt-4 hr {
    border-color: #dfe5ea;
    opacity: 1;
}

body.dark-mode > .container-fluid.mt-4 > .row > .col-md-9.col-lg-10 {
    background: #020617;
}

body.dark-mode > .container-fluid.mt-4 .progress-step-circle {
    color: #cbd5e1;
    background: #0f172a;
    border-color: #334155;
}

@media (max-width: 1199.98px) {
    body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 {
        width: 216px;
        flex-basis: 216px;
    }

    body > .container-fluid.mt-4 > .row > .col-md-9.col-lg-10 {
        width: calc(100% - 216px);
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    body > .container-fluid.mt-4 .progress-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The mobile menu button is inserted on every page by fcNav in js/app.js, so it
   exists in the markup at every width. It is a phone control only -- hidden here
   and revealed inside the breakpoint below, rather than left to render as a
   stray unstyled button above the desktop sidebar. */
.fps-navtoggle {
    display: none;
}

@media (max-width: 767.98px) {
    body > .navbar {
        min-height: 64px;
    }

    body > .navbar > .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    body > .container-fluid.mt-4 > .row {
        min-height: calc(100vh - 64px);
        /* Stacked columns are two wrapped flex lines, and the default
           align-content: stretch shares that min-height between them -- which
           inflated a 44px nav bar to 196px of mostly blank white above every
           page. Pack the lines to the top and let each take its own height. */
        align-content: flex-start;
    }

    /* ---- Navigation -------------------------------------------------------
       The sidebar used to become a horizontal scrolling strip on a phone. With
       thirty entries that strip is over 3,700px wide inside a 353px window --
       ten screens of sideways scrolling to reach a page, with the section
       headings sitting in the queue as unclickable filler. It is now a button
       naming the current page that opens the whole menu vertically.           */

    body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 {
        position: sticky;
        top: 0;
        z-index: 1030;
        width: 100%;
        flex-basis: 100%;
        min-height: 0;
        padding: 0.5rem 0.75rem;
        background: #fff;
        border-right: 0;
        border-bottom: 1px solid #dfe5ec;
        align-self: flex-start;
    }

    .fps-navtoggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 44px;              /* a comfortable touch target */
        padding: 0.5rem 0.75rem;
        border: 1px solid #dfe5ec;
        border-radius: 0.5rem;
        background: #f8fafc;
        color: #1e293b;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
    }

    .fps-navtoggle .fps-navtoggle-label {
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .fps-navtoggle .fps-navtoggle-caret {
        transition: transform .18s ease;
    }

    .col-md-3.fps-nav-open .fps-navtoggle .fps-navtoggle-caret {
        transform: rotate(180deg);
    }

    /* Closed by default; the toggle reveals it. */
    body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 > .list-group {
        display: none;
    }

    body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2.fps-nav-open > .list-group {
        display: flex;
        position: static;
        flex-flow: column nowrap;
        max-height: 70vh;
        margin-top: 0.5rem;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0.6rem 0.85rem;
        font-size: 0.92rem;
    }

    /* The section headings are labels, not destinations, so they stay short. */
    body > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 .list-group-item[aria-hidden="true"] {
        min-height: 0;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    body > .container-fluid.mt-4 > .row > .col-md-9.col-lg-10 {
        width: 100%;
        flex-basis: 100%;
        padding: 1.5rem 1rem 2.75rem;
    }

    body > .container-fluid.mt-4 .section-title {
        font-size: 1.8rem;
    }

    body > .container-fluid.mt-4 .d-flex.justify-content-between {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* A .col-auto is "as wide as its contents" and never wraps. The action group
       in a page header holds a label, a select and two buttons -- 476px of it --
       which is the one thing on any page that pushed the whole document sideways
       on a phone. Let it take the full width and wrap inside itself. */
    body > .container-fluid.mt-4 .col-auto {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }

    body > .container-fluid.mt-4 .col-auto > .btn {
        flex: 1 1 auto;
    }

    /* Filter bars are laid out with inline minimum widths sized for a desktop --
       220px, 260px -- and two of them side by side do not fit a 343px column, so
       the row overflows its card. Table cells are excluded: a minimum width
       there is a deliberate choice about column readability inside a container
       that already scrolls. */
    body > .container-fluid.mt-4 select[style*="min-width"],
    body > .container-fluid.mt-4 input[style*="min-width"],
    body > .container-fluid.mt-4 div[style*="min-width"],
    body > .container-fluid.mt-4 label[style*="min-width"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body > .container-fluid.mt-4 .progress-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body > .container-fluid.mt-4 .card-body,
    body > .container-fluid.mt-4 .card-header {
        padding: 1rem;
    }

    /* ---- Tables -----------------------------------------------------------
       Every wide table already sits in a .table-responsive, but on a phone the
       fact that it scrolls sideways is invisible: the first screenful looks
       like the whole table. A right-hand fade says there is more.            */
    .table-responsive {
        position: relative;
        -webkit-overflow-scrolling: touch;

        /* The classic pure-CSS scroll shadow: two white "cover" panes that
           scroll WITH the content, and two shadows that do not. The shadow is
           therefore hidden at each end and visible only where there is more
           table to reach -- no JavaScript, no scroll listener, and nothing to
           get out of step with a re-render. */
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .table-responsive > .table {
        margin-bottom: 0;
    }

    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td {
        white-space: nowrap;
    }

    /* Cells that carry a sentence must still wrap, or one long note pushes
       every column off the screen. */
    .table-responsive > .table .fps-wrap,
    .table-responsive > .table td[data-wrap] {
        white-space: normal;
        min-width: 12rem;
    }

    /* ---- Controls ---------------------------------------------------------
       Filter rows are built as inline groups sized for a desktop. On a phone
       they overflow their card unless they are allowed to stack.             */
    .card-header .d-flex,
    .card-header .btn-group,
    .page-header .d-flex {
        flex-wrap: wrap;
    }

    .card-header select.form-select,
    .card-header input.form-control {
        width: auto !important;
        min-width: 0;
        flex: 1 1 8rem;
    }

    /* Bootstrap's default modal leaves 1rem of unusable margin on each side and
       lets a long form run off the bottom with no way back to the buttons. */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* A tap target smaller than this is a mis-tap waiting to happen. */
    .btn-sm {
        min-height: 38px;
    }
}

body.dark-mode .fps-navtoggle {
    background: #0b1220;
    border-color: #1e293b;
    color: #e5e7eb;
}

body.dark-mode > .container-fluid.mt-4 > .row > .col-md-3.col-lg-2 {
    background: #020617;
}

body.dark-mode .modal-footer {
    background: #0b1220;
}

/* Dialogs: the body was left white while the text turned light, so every
   dialog in dark mode read pale grey on white. The card's surface and rules. */
body.dark-mode .modal-content {
    background: #020617;
    color: #e5e7eb;
    border-color: rgba(55, 65, 81, 0.9);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: rgba(55, 65, 81, 0.9);
}

body.dark-mode .modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* The scroll shadow's cover panes have to match the surface they sit on, or
   they paint two white bars across a dark table. */
@media (max-width: 767.98px) {
    body.dark-mode .table-responsive {
        background:
            linear-gradient(to right, #020617 30%, rgba(2, 6, 23, 0)),
            linear-gradient(to right, rgba(2, 6, 23, 0), #020617 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(148, 163, 184, .28), rgba(148, 163, 184, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(148, 163, 184, .28), rgba(148, 163, 184, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* ============================================================
   Header polish — professional navbar (added 2026-08-10)
   ============================================================ */
.navbar { transition: box-shadow .25s ease, background .25s ease, backdrop-filter .25s ease, padding .25s ease; }
.navbar.scrolled {
    box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
    border-bottom-color: transparent;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px) saturate(150%);
    padding: 0.5rem 0;
}
.navbar .navbar-nav { gap: .1rem; }
.navbar-brand { transition: opacity .15s ease; }
.navbar-brand:hover { opacity: .85; }

/* Animated underline links (light navbars only) */
.navbar-light .nav-link { position: relative; color: #475569; }
.navbar-light .nav-link::after {
    content: ""; position: absolute; left: .82rem; right: .82rem; bottom: .3rem;
    height: 2px; border-radius: 2px; background: var(--primary-color);
    transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.navbar-light .nav-link:hover { color: var(--primary-color); }
.navbar-light .nav-link:hover::after,
.navbar-light .nav-link.active::after { transform: scaleX(1); }
.navbar-light .nav-link.active { background: transparent; color: var(--primary-color); font-weight: 600; }
.navbar .dropdown-toggle::after { margin-left: .4rem; vertical-align: .12em; }

/* Refined dropdown */
.dropdown-menu {
    border: 1px solid var(--glass-border); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14); padding: .5rem; margin-top: .6rem;
}
.dropdown-menu .dropdown-item {
    border-radius: 9px; padding: .5rem .8rem; font-weight: 500; color: #334155;
    transition: background .15s ease, color .15s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: rgba(14, 165, 164, .1); color: #0f766e; }
body.dark-mode .dropdown-menu .dropdown-item { color: #e5e7eb; }
body.dark-mode .dropdown-menu .dropdown-header { color: #94a3b8; }
body.dark-mode .dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:focus { background: rgba(45, 212, 191, .12); color: #5eead4; }
.dropdown-menu .dropdown-header {
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700;
}
.dropdown-menu .dropdown-divider { margin: .4rem .3rem; }

/* Language segmented toggle */
.fps-langtoggle {
    display: inline-flex; align-items: center; background: rgba(15, 23, 42, .055);
    border: 1px solid rgba(148, 163, 184, .3); border-radius: 999px; padding: 3px; gap: 2px; line-height: 1;
}
.fps-langtoggle .fps-seg {
    font-size: 12.5px; font-weight: 600; color: #475569; padding: 4px 11px;
    border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; user-select: none;
}
.fps-langtoggle .fps-seg:hover { color: #0f766e; }
.fps-langtoggle .fps-seg.on { background: #fff; color: #0f766e; box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
body.dark-mode .fps-langtoggle { background: rgba(255, 255, 255, .06); }
body.dark-mode .fps-langtoggle .fps-seg { color: #cbd5e1; }
body.dark-mode .fps-langtoggle .fps-seg:hover { color: #5eead4; }
body.dark-mode .fps-langtoggle .fps-seg.on { background: #5eead4; color: #052e2b; box-shadow: none; }
.fps-floating {
    position: fixed !important; bottom: 18px; left: 18px; top: auto; right: auto; z-index: 200000;
    background: rgba(255, 255, 255, .96); box-shadow: 0 6px 20px rgba(15, 23, 42, .15);
    font-family: Inter, system-ui, sans-serif;
}
/* One-line legal disclaimer in the marketing footer — muted, secondary to the CTA */
.footer .footer-disclaimer, .footer-disclaimer {
    font-size: .78rem; line-height: 1.6; color: #8798ad; max-width: 780px;
    margin: 0 auto .6rem; opacity: .95;
}
.footer-disclaimer a { color: #94a3b8; text-decoration: underline; }
.footer-disclaimer a:hover { color: #5eead4; }

/* Slim in-app footer — consistent across all logged-in tool screens */
.app-footer { background: #0f172a; border-top: 1px solid rgba(148, 163, 184, .15); padding: 1.1rem 0; margin-top: 2.5rem; font-family: Inter, system-ui, sans-serif; font-size: .85rem; }
.app-footer .app-foot-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 10px 18px; flex-wrap: wrap; color: #94a3b8; }
.app-footer a { color: #94a3b8; text-decoration: none; }
.app-footer a:hover { color: #5eead4; }
.app-footer .sep { color: #475569; margin: 0 .45rem; }

/* Footer-hosted toggle (pages without a top nav) — readable on the dark footer */
.fps-footlang-wrap { display: flex; justify-content: center; margin-top: 1.5rem; }
.fps-langtoggle.fps-footlang { background: rgba(255, 255, 255, .08); border-color: rgba(148, 163, 184, .4); }
.fps-langtoggle.fps-footlang .fps-seg { color: #cbd5e1; }
.fps-langtoggle.fps-footlang .fps-seg:hover { color: #5eead4; }
.fps-langtoggle.fps-footlang .fps-seg.on { background: #5eead4; color: #052e2b; box-shadow: none; }
/* On mobile the cookie banner sits along the bottom — lift the toggle clear of it */
@media (max-width: 575.98px) {
    .fps-floating { bottom: 88px; }
}
@media (max-width: 991.98px) { .navbar .fps-langtoggle { margin-top: .5rem; align-self: flex-start; } }

/* ============================================================
   Footer polish — professional (added 2026-08-10)
   ============================================================ */
.footer {
    background: #0f172a;
    color: #e2e8f0;
    padding: 3.75rem 0 1.75rem;
    margin-top: 5rem;
    position: relative;
}
.footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #0ea5a4, #0f766e 55%, rgba(15, 118, 110, 0));
}
.footer h5 { color: #fff; }
.footer h6 {
    color: #94a3b8; font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem;
}
.footer .footer-brand {
    display: flex; align-items: center; gap: .55rem; font-size: 1.3rem; margin-bottom: 1rem;
}
.footer .footer-brand img { width: 30px; height: 30px; }
.footer .text-muted { color: #94a3b8 !important; }
.footer ul.list-unstyled li { margin-bottom: .55rem; }
.footer a { color: #94a3b8; text-decoration: none; transition: color .15s ease, padding-left .15s ease; }
.footer a:hover { color: #5eead4; }
.footer ul.list-unstyled li a { display: inline-block; }
.footer ul.list-unstyled li a:hover { padding-left: 4px; }
.footer .btn-outline-light { border-color: rgba(255, 255, 255, .35); }
.footer .btn-outline-light:hover { background: #fff; color: #0f172a; border-color: #fff; }
.footer hr { border-color: rgba(255, 255, 255, .09) !important; }
.footer .text-center.text-muted p { font-size: .85rem; }

/* Accessibility: visible focus rings (added 2026-08-10) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.nav-link:focus-visible, .fps-langtoggle .fps-seg:focus-visible, .dropdown-item:focus-visible {
    outline: 2px solid #0ea5a4; outline-offset: 2px; border-radius: 4px;
}