/* =============================================================
   site.css — FastMatch design system
   Base: Bootstrap marketing site (exact match)
   Extended: Blazor app shell, sidebar, dashboard, tables
   ============================================================= */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --navy-dark: #0F172A;
    --navy-light: #1E293B;
    --orange-primary: #F97316;
    --orange-hover: #EA580C;
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --white: #FFFFFF;
    --slate-bg: #F1F5F9;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    background-color: var(--navy-dark);
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

h1, h2 {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--text-main);
}

h3 {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.fw-bold {
    font-weight: 800 !important;
}

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

.bg-slate {
    background-color: var(--slate-bg);
    color: #1e293b;
}

.bg-navy-light {
    background-color: var(--navy-light);
}

/* Override Bootstrap's text-muted on dark backgrounds */
.text-muted {
    color: #94A3B8 !important;
}

/* Ensure body text inherits correctly */
p, li, span {
    color: inherit;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--orange-primary);
    border: none;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease-in-out;
}

    .btn-primary:hover {
        background-color: var(--orange-hover);
        border-color: var(--orange-hover);
        transform: translateY(-2px);
    }

    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--orange-hover) !important;
        border-color: var(--orange-hover) !important;
    }

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

    .btn-outline-primary:hover {
        background-color: var(--orange-primary);
        border-color: var(--orange-primary);
        color: #fff;
    }

.btn-ai-regen {
    background-color: #6366F1;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
}

    .btn-ai-regen:hover {
        background-color: #4F46E5;
        color: white;
    }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.navbar-brand {
    color: var(--text-main) !important;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

.navbar .nav-link {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.15s;
}

    .navbar .nav-link:hover {
        color: var(--text-main) !important;
    }

/* ── Hero ──────────────────────────────────────────────────── */
header.py-5 {
    background: linear-gradient( 135deg, var(--navy-dark) 0%, #1a2540 50%, var(--navy-dark) 100% );
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Force hero h1 white — overrides Bootstrap .display-3 and
   any inherited color from Radzen or other stylesheets */
header h1,
header .display-3,
header h1.display-3,
header h1.display-3.fw-bold,
header h1.display-3.mb-3 {
    color: #F8FAFC !important;
}

header.py-5 .lead {
    color: #CBD5E1 !important;
    font-size: 1.15rem;
}

/* ── Feature cards ─────────────────────────────────────────── */
.feature-card {
    background: var(--navy-light);
    border: 4px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 2rem;
    transition: transform 0.3s ease;
    height: 100%;
    color: var(--text-main);
}

    .feature-card:hover {
        transform: translateY(-10px);
        border-color: var(--orange-primary);
    }

    .feature-card h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
        margin-top: 1rem;
        margin-bottom: 0.75rem;
        text-transform: none;
        letter-spacing: normal;
    }

    .feature-card p {
        color: var(--text-muted);
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .feature-card .icon-box {
        margin-bottom: 1rem;
    }

.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(249,115,22,0.1);
    color: var(--orange-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* ── Section headings ──────────────────────────────────────── */
section h2 {
    color: var(--text-main);
    margin-bottom: 1rem;
}

section p.text-muted,
section .text-muted {
    color: #94A3B8 !important;
}

.bg-navy-light h1,
.bg-navy-light h2,
.bg-navy-light h3,
.bg-navy-light p,
.bg-navy-light span:not(.text-orange) {
    color: var(--text-main);
}

.bg-navy-light .text-muted {
    color: #94A3B8 !important;
}

/* ── Ranking cards (white interior — matches Bootstrap site) ─ */
.ranking-card {
    background: var(--white);
    color: var(--navy-dark);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
}

    .ranking-card.shadow-sm {
        border: 1px solid rgba(0,0,0,0.05);
    }

    /* All text inside ranking cards stays dark on white bg */
    .ranking-card,
    .ranking-card h2,
    .ranking-card h3,
    .ranking-card h4,
    .ranking-card h5,
    .ranking-card h6,
    .ranking-card p,
    .ranking-card span,
    .ranking-card label,
    .ranking-card div {
        color: var(--navy-dark) !important;
    }

        .ranking-card .text-orange,
        .ranking-card h6.text-orange {
            color: var(--orange-primary) !important;
        }

        .ranking-card .text-muted {
            color: #64748B !important;
        }

        .ranking-card .score-breakdown span,
        .ranking-card .score-breakdown .small,
        .ranking-card .score-breakdown .fw-bold,
        .ranking-card .score-breakdown div {
            color: var(--navy-dark) !important;
        }

        .ranking-card .score-breakdown p {
            color: #334155 !important;
        }

        .ranking-card .score-breakdown h6 {
            color: var(--navy-dark) !important;
        }

/* ── API documentation (plain HTML inside ranking-card) ───── */
.api-documentation-page {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

    .api-documentation-page h2,
    .api-documentation-page h3,
    .api-documentation-page h4 {
        color: var(--navy-dark) !important;
        text-transform: none;
        letter-spacing: normal;
    }

    .api-documentation-page p,
    .api-documentation-page li {
        color: var(--navy-dark);
    }

    .api-documentation-page a {
        color: var(--orange-primary);
        font-weight: 600;
    }

        .api-documentation-page a:hover {
            color: var(--orange-hover);
        }

    .api-documentation-page code,
    .api-documentation-page pre {
        color: #0F172A;
    }

    .api-documentation-page .api-doc-auth-sample li {
        margin-bottom: 0.35rem;
    }

    .api-documentation-page .api-doc-sample {
        background: #F1F5F9;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        padding: 0.85rem 1rem;
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
        overflow-x: auto;
    }

        .api-documentation-page .api-doc-sample code {
            white-space: pre-wrap;
            word-break: break-word;
        }

.card-header-top {
    background: var(--slate-bg);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-header-top h4 {
        color: var(--navy-dark) !important;
        font-size: 1.1rem;
        margin: 0;
    }

.score-breakdown {
    padding: 1.5rem;
    background: var(--white);
}

/* ── Star rating ───────────────────────────────────────────── */
.star-rating {
    color: #FBBF24;
    font-size: 1.2rem;
}

/* ── Fit / gap badges ──────────────────────────────────────── */
.fit-badge {
    background: #DCFCE7;
    color: #166534 !important;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
}

.gap-badge {
    background: #FEE2E2;
    color: #991B1B !important;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ── Score bars ────────────────────────────────────────────── */
.score-bar {
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    margin-top: 4px;
}

.score-fill {
    height: 100%;
    background: var(--orange-primary);
    border-radius: 4px;
}

/* ── Metrics panel (legacy) ────────────────────────────────── */
.metrics-panel {
    background: #111827;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
}

.metric-row {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.weight-input {
    width: 80px;
    background: #0F172A;
    border: 1px solid var(--orange-primary);
    color: white;
    text-align: center;
    border-radius: 4px;
}

/* ── Metric config cards ───────────────────────────────────── */
.metric-config-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

    .metric-config-card:focus-within {
        border-color: var(--orange-primary);
        background: #fff;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    }

    .metric-config-card,
    .metric-config-card label,
    .metric-config-card input,
    .metric-config-card textarea {
        color: var(--navy-dark) !important;
    }

        .metric-config-card label {
            text-transform: none;
            letter-spacing: normal;
        }

.border-orange-left {
    border-left: 4px solid var(--orange-primary);
}

/* ── Form controls (public pages — light bg context) ───────── */
.form-control {
    border: 1px solid #CBD5E1;
    padding: 0.6rem;
    font-size: 0.95rem;
}

    .form-control:focus {
        border-color: var(--orange-primary);
        box-shadow: 0 0 0 2px rgba(249,115,22,0.1);
    }

/* ── Form controls (app pages — dark bg context) ───────────── */
.app-body .form-control,
.app-body .form-select {
    background-color: var(--navy-dark);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-main);
    border-radius: 6px;
}

    .app-body .form-control:focus,
    .app-body .form-select:focus {
        background-color: var(--navy-dark);
        border-color: var(--orange-primary);
        color: var(--text-main);
        box-shadow: 0 0 0 3px rgba(249,115,22,0.2);
    }

    .app-body .form-control::placeholder {
        color: #475569;
    }

.app-body .form-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* ── Pricing ───────────────────────────────────────────────── */
.pricing-section {
    background: var(--navy-dark);
}

.pricing-card {
    background: var(--navy-light);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    height: 100%;
}

    .pricing-card:hover {
        border-color: var(--orange-primary);
        transform: translateY(-4px);
    }

    .pricing-card.featured {
        border-color: var(--orange-primary);
        transform: scale(1.03);
        position: relative;
    }

    .pricing-card h5 {
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 0.5rem;
    }

    .pricing-card .price {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--text-main);
        line-height: 1.1;
        margin: 0.75rem 0;
    }

        .pricing-card .price span {
            font-size: 1rem;
            font-weight: 400;
            color: var(--text-muted);
        }

    .pricing-card ul li {
        padding: 0.4rem 0;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

        .pricing-card ul li i {
            margin-right: 0.5rem;
            color: var(--orange-primary);
        }

.popular-label {
    display: inline-block;
    background: var(--orange-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

/* ── App Shell ─────────────────────────────────────────────── */
.app-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar body";
    min-height: 100vh;
}

.app-sidebar {
    grid-area: sidebar;
    background: var(--navy-dark);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.25s ease;
}

.app-header {
    grid-area: header;
    background: var(--navy-light);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 99;
}

.app-body {
    grid-area: body;
    background: var(--navy-dark);
    overflow-y: auto;
    padding: 0;
    color: var(--text-main);
}

.header-left,
.header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

    .sidebar-toggle:hover {
        color: var(--text-main);
        background: rgba(255,255,255,0.06);
    }

    .sidebar-toggle svg {
        width: 22px;
        height: 22px;
    }

.sidebar-backdrop {
    display: none;
}

/* ── Sidebar brand ─────────────────────────────────────────── */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
}

    .sidebar-brand img {
        height: 36px;
        width: auto;
    }

.sidebar-brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* ── Sidebar nav ───────────────────────────────────────────── */
.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
    overflow-y: auto;
}

.sidebar-section-label {
    padding: 1rem 1.25rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sidebar-divider {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 0.5rem 1.25rem;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}

    .sidebar-nav-item:hover {
        background: rgba(255,255,255,0.04);
        color: var(--text-main);
        border-left-color: rgba(249,115,22,0.4);
        text-decoration: none;
    }

    .sidebar-nav-item.active {
        background: var(--navy-light);
        color: var(--orange-primary);
        border-left-color: var(--orange-primary);
        font-weight: 600;
    }

.sidebar-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.sidebar-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sidebar footer ────────────────────────────────────────── */
.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.sidebar-footer-text {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ── Desktop: toggle collapses sidebar ─────────────────────── */
@media (min-width: 769px) {
    .app-layout:not(.sidebar-open) {
        grid-template-columns: 0px 1fr;
    }

        .app-layout:not(.sidebar-open) .app-sidebar {
            transform: translateX(-260px);
            overflow: hidden;
        }
}

/* ── Mobile: sidebar slides in as overlay ──────────────────── */
@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "body";
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        transform: translateX(-260px);
        z-index: 200;
    }

    .app-layout.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-layout.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 199;
    }
}

/* ── Dashboard table ───────────────────────────────────────── */
.dashboard-table {
    color: var(--text-main);
    background: transparent;
}

    .dashboard-table thead tr {
        background: var(--navy-dark);
        border-bottom: 2px solid var(--orange-primary);
    }

    .dashboard-table thead th {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.85rem 1rem;
        white-space: nowrap;
        border: none;
    }

    .dashboard-table tbody tr {
        border-bottom: 1px solid rgba(255,255,255,0.06);
        transition: background 0.15s;
    }

        .dashboard-table tbody tr:hover {
            background: rgba(249,115,22,0.05) !important;
        }

    .dashboard-table tbody td {
        padding: 0.75rem 1rem;
        vertical-align: middle;
        border: none;
        color: var(--text-main);
        font-size: 0.9rem;
    }

    .dashboard-table tr.row-success td {
        background: rgba(34,197,94,0.08);
    }

    .dashboard-table tr.row-danger td {
        background: rgba(239,68,68,0.08);
    }

/* Dashboard tables on white ranking cards (job dashboard, API credentials): dark body text */
.ranking-card .dashboard-table {
    --bs-table-color: var(--navy-dark);
    color: var(--navy-dark);
}

    .ranking-card .dashboard-table thead tr {
        background: var(--navy-dark);
        border-bottom: 2px solid var(--orange-primary);
    }

    .ranking-card .dashboard-table thead th {
        color: #CBD5E1 !important;
        border: none;
    }

    .ranking-card .dashboard-table tbody tr {
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

        .ranking-card .dashboard-table tbody tr:hover {
            background: rgba(249, 115, 22, 0.06) !important;
        }

    .ranking-card .dashboard-table tbody td {
        color: var(--navy-dark) !important;
        border: none;
    }

    .ranking-card .dashboard-table tbody td em,
    .ranking-card .dashboard-table tbody td .scopes-empty {
        color: #64748B !important;
        font-style: italic;
    }

    .ranking-card .dashboard-table .job-link {
        color: var(--orange-primary) !important;
    }

        .ranking-card .dashboard-table .job-link:hover {
            color: var(--orange-hover) !important;
        }

/* ── Status badges ─────────────────────────────────────────── */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-new {
    background: rgba(249,115,22,0.15);
    color: var(--orange-primary) !important;
}

.status-pending {
    background: rgba(99,102,241,0.15);
    color: #818cf8 !important;
}

.status-running {
    background: rgba(234,179,8,0.15);
    color: #facc15 !important;
}

.status-done {
    background: rgba(34,197,94,0.15);
    color: #4ade80 !important;
}

.status-failed {
    background: rgba(239,68,68,0.15);
    color: #f87171 !important;
}

/* ── Job links and icon buttons ────────────────────────────── */
.job-link {
    color: var(--orange-primary);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

    .job-link:hover {
        color: var(--orange-hover);
        text-decoration: underline;
    }

.icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.8rem;
}

/* ── Blazor error UI ───────────────────────────────────────── */
#blazor-error-ui {
    background: rgba(239,68,68,0.9);
    bottom: 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    color: white;
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1.5rem;
        top: 0.75rem;
        color: white;
        font-size: 1.2rem;
    }



/* ── Desktop: job name wraps naturally ─────────────────────── */
@media (min-width: 769px) {
    .dashboard-table .job-link {
        white-space: normal;
        word-break: break-word;
    }
}

/* ── Mobile job cards ──────────────────────────────────────── */
.job-card-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem;
}

.job-card {
    background: var(--white) !important;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden;
}

    .job-card.row-success {
        border-left: 3px solid #4ade80;
    }

    .job-card.row-danger {
        border-left: 3px solid #f87171;
    }

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: var(--slate-bg) !important;
}

.job-card-name {
    color: var(--orange-primary);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
    cursor: pointer;
}

.job-card-body {
    padding: 0.5rem 1rem;
}

.job-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

    .job-card-row:last-child {
        border-bottom: none;
    }

.job-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
}

.job-card-value {
    font-size: 0.875rem;
    color: var(--navy-dark);
}

.job-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--slate-bg) !important;
    border-top: 1px solid rgba(0,0,0,0.06);
    justify-content: flex-end;
}

.resume-jobs-page {
    padding: 1.5rem;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.header-credits {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-main);
}
/* ── Edit Details page — light inputs inside white cards ────── */
.metric-config-card .form-control,
.metric-config-card .form-select,
.metric-config-card textarea,
.metric-config-card input {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: var(--navy-dark) !important;
}

    .metric-config-card .form-control:focus,
    .metric-config-card .form-select:focus,
    .metric-config-card textarea:focus,
    .metric-config-card input:focus {
        background-color: #fff !important;
        border-color: var(--orange-primary) !important;
        color: var(--navy-dark) !important;
        box-shadow: 0 0 0 2px rgba(249,115,22,0.15) !important;
    }

    .metric-config-card .form-control::placeholder,
    .metric-config-card textarea::placeholder,
    .metric-config-card input::placeholder {
        color: #94A3B8 !important;
    }
/* ── Edit Metrics page — light inputs ──────────────────────── */
.resume-jobs-page .card,
.resume-jobs-page .card-body {
    background-color: var(--white) !important;
    color: var(--navy-dark) !important;
    border-color: #E2E8F0 !important;
}

    .resume-jobs-page .card .form-control,
    .resume-jobs-page .card .form-select,
    .resume-jobs-page .card input,
    .resume-jobs-page .card textarea {
        background-color: #F8FAFC !important;
        border: 1px solid #CBD5E1 !important;
        color: var(--navy-dark) !important;
    }

    .resume-jobs-page .card label {
        color: #64748B !important;
    }
/* ── Edit Resumes page ─────────────────────────────────────── */
.rz-body .resume-jobs-page,
.app-body .rz-card,
.app-body .rz-card.rz-variant-outlined {
    background-color: var(--white) !important;
    color: var(--navy-dark) !important;
    border-color: #E2E8F0 !important;
}

    .app-body .rz-card .rz-textbox,
    .app-body .rz-card input[type="text"],
    .app-body .rz-card .rz-input {
        background-color: #F8FAFC !important;
        border: 1px solid #CBD5E1 !important;
        color: var(--navy-dark) !important;
    }

    .app-body .rz-card .rz-text-subtitle2 {
        color: #64748B !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

.app-body h3 {
    color: var(--text-main);
    padding: 1.5rem 0 0.5rem 0;
}
/* ── Radzen upload drop zone — light background ────────────── */
.app-body .rz-fileupload,
.app-body .rz-fileupload-content,
.app-body #uploadWithDragAndDrop .rz-fileupload-content {
    background-color: #F8FAFC !important;
    border: 2px dashed #CBD5E1 !important;
    border-radius: 8px !important;
    color: var(--navy-dark) !important;
}

    .app-body #uploadWithDragAndDrop .rz-fileupload-content:hover {
        border-color: var(--orange-primary) !important;
        background-color: #FFF7ED !important;
    }

/* ── Error/status messages on this page ────────────────────── */
.app-body .rz-color-danger-dark,
.app-body span.rz-color-danger-dark {
    display: block;
    background: #FEE2E2;
    color: #991B1B !important;
    border-left: 4px solid #EF4444;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.app-body .rz-color-success-dark,
.app-body span.rz-color-success-dark {
    display: block;
    background: #DCFCE7;
    color: #166534 !important;
    border-left: 4px solid #22C55E;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* ── Radzen upload drop zone — force light background ──────── */
.app-body .rz-fileupload-content,
.app-body .rz-fileupload-buttonbar,
.app-body .rz-fileupload {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: var(--navy-dark) !important;
}

    .app-body .rz-fileupload-content:hover {
        border-color: var(--orange-primary) !important;
        background-color: #FFF7ED !important;
    }

/* ── Radzen checkbox — light style ─────────────────────────── */
.app-body .rz-chkbox-box {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

    .app-body .rz-chkbox-box.rz-state-active {
        background-color: var(--orange-primary) !important;
        border-color: var(--orange-primary) !important;
    }

/* ── Resume file links in upload grid — plain text, no button ─ */
.app-body .rz-grid-table .rz-button.rz-variant-text {
    background: transparent !important;
    color: var(--navy-dark) !important;
    font-weight: 500 !important;
    padding: 0 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

    .app-body .rz-grid-table .rz-button.rz-variant-text:hover {
        color: var(--orange-primary) !important;
        text-decoration: underline !important;
        background: transparent !important;
    }
/* ── Edit Resumes — drag and drop panel background ─────────── */
.app-body .rz-card.rz-variant-outlined {
    background-color: var(--white) !important;
    border-color: #E2E8F0 !important;
}

/* ── Edit Resumes — resume list grid background ─────────────── */
.app-body .rz-data-grid {
    background-color: var(--white) !important;
    border-color: #E2E8F0 !important;
}

.app-body .rz-grid-table {
    background-color: var(--white) !important;
}

    .app-body .rz-grid-table td,
    .app-body .rz-grid-table th {
        background-color: var(--white) !important;
        color: var(--navy-dark) !important;
        border-color: #E2E8F0 !important;
    }

/* ── Edit Resumes — spacing between buttons and cards ───────── */
.resume-jobs-page .btn-outline-light,
.resume-jobs-page .btn-primary {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
/* ── Radzen upload — force light drop zone ─────────────────── */
.app-body .rz-fileupload-choose,
.app-body .rz-fileupload .rz-fileupload-choose,
.app-body #uploadWithDragAndDrop .rz-fileupload-choose {
    background-color: #F8FAFC !important;
    border: 2px dashed #CBD5E1 !important;
    border-radius: 8px !important;
    color: var(--navy-dark) !important;
    min-height: 150px !important;
}

    .app-body .rz-fileupload-choose:hover {
        background-color: #FFF7ED !important;
        border-color: var(--orange-primary) !important;
    }

/* ── Radzen upload buttonbar — remove dark bg ───────────────── */
.app-body .rz-fileupload-buttonbar {
    background-color: var(--white) !important;
    border-color: #E2E8F0 !important;
}

/* ── Spacing fix — add margin above/below button row ────────── */
.resume-jobs-page .d-flex.flex-wrap.gap-2.mb-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
/* ── Radzen upload — selected file queue row ───────────────── */
.app-body .rz-fileupload-files,
.app-body .rz-fileupload-row,
.app-body .rz-fileupload-row td {
    background-color: #F1F5F9 !important;
    color: var(--navy-dark) !important;
    border-color: #E2E8F0 !important;
}

    .app-body .rz-fileupload-row .rz-button {
        background-color: transparent !important;
        color: var(--navy-dark) !important;
        border-color: #CBD5E1 !important;
    }

/* ── Prose content (Privacy Policy, Terms of Service, Refund Policy) ── */
.prose-content {
    background: var(--white);
    color: #334155;
    line-height: 1.75;
    font-size: 0.95rem;
}

    .prose-content h1,
    .prose-content h2,
    .prose-content h3,
    .prose-content h4 {
        color: var(--navy-dark);
        font-weight: 700;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
    }

    .prose-content h1 {
        font-size: 1.5rem;
    }

    .prose-content h2 {
        font-size: 1.25rem;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 0.4rem;
    }

    .prose-content h3 {
        font-size: 1.1rem;
    }

    .prose-content p {
        margin-bottom: 1rem;
        color: #334155;
    }

    .prose-content a {
        color: var(--orange-primary);
        text-decoration: none;
    }

        .prose-content a:hover {
            text-decoration: underline;
        }

    .prose-content ul,
    .prose-content ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
        color: #334155;
    }

    .prose-content li {
        margin-bottom: 0.4rem;
    }

    .prose-content strong {
        color: var(--navy-dark);
        font-weight: 600;
    }

    .prose-content hr {
        border-color: #E2E8F0;
        margin: 2rem 0;
    }
/* ── Prose pages — force white card background ──────────────── */
.resume-jobs-page .ranking-card.prose-content,
.resume-jobs-page .prose-content {
    background-color: var(--white) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

    .resume-jobs-page .prose-content,
    .resume-jobs-page .prose-content p,
    .resume-jobs-page .prose-content li {
        color: #334155 !important;
    }

        .resume-jobs-page .prose-content h1,
        .resume-jobs-page .prose-content h2,
        .resume-jobs-page .prose-content h3,
        .resume-jobs-page .prose-content h4 {
            color: var(--navy-dark) !important;
        }

        .resume-jobs-page .prose-content a {
            color: var(--orange-primary) !important;
        }

/* ── Contact page — light inputs inside white card ─────────── */
.resume-jobs-page .ranking-card .form-control,
.resume-jobs-page .ranking-card .form-select,
.resume-jobs-page .ranking-card textarea,
.resume-jobs-page .ranking-card input {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: var(--navy-dark) !important;
}

    .resume-jobs-page .ranking-card .form-control:focus,
    .resume-jobs-page .ranking-card .form-select:focus,
    .resume-jobs-page .ranking-card textarea:focus,
    .resume-jobs-page .ranking-card input:focus {
        background-color: #fff !important;
        border-color: var(--orange-primary) !important;
        color: var(--navy-dark) !important;
        box-shadow: 0 0 0 2px rgba(249,115,22,0.15) !important;
    }

    .resume-jobs-page .ranking-card .form-control::placeholder,
    .resume-jobs-page .ranking-card textarea::placeholder,
    .resume-jobs-page .ranking-card input::placeholder {
        color: #94A3B8 !important;
    }

.resume-jobs-page .ranking-card label {
    color: #64748B !important;
}
/* ── Login page ─────────────────────────────────────────────── */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--navy-dark);
    padding: 2rem 1rem;
}

.login-card {
    background-color: var(--navy-light);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    text-align: center;
}

    .login-card .app-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 1.25rem;
        border-radius: 12px;
    }

    .login-card h2 {
        color: var(--text-main);
        font-weight: 700;
        font-size: 1.5rem;
    }

    .login-card .text-muted {
        color: var(--text-muted) !important;
    }

    .login-card .footer-link:hover {
        color: var(--orange-primary) !important;
    }

    .login-card .border-top {
        border-color: rgba(255,255,255,0.1) !important;
    }
/* ── Sidebar enhancements ───────────────────────────────────── */

/* Brand separator */
.sidebar-brand {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
}

/* Nav item base */
.sidebar-nav-item {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border-left: 3px solid transparent;
}

    /* Hover state */
    .sidebar-nav-item:hover {
        background-color: rgba(249,115,22,0.08) !important;
        color: var(--orange-primary) !important;
        border-left-color: rgba(249,115,22,0.4) !important;
    }

        .sidebar-nav-item:hover .sidebar-nav-icon {
            color: var(--orange-primary) !important;
        }

    /* Active state */
    .sidebar-nav-item.active {
        background-color: rgba(249,115,22,0.12) !important;
        color: var(--orange-primary) !important;
        border-left-color: var(--orange-primary) !important;
    }

        .sidebar-nav-item.active .sidebar-nav-icon {
            color: var(--orange-primary) !important;
        }

/* Section labels */
.sidebar-section-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75rem 1rem 0.25rem 1rem;
    position: relative;
}

    .sidebar-section-label::after {
        content: "";
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--orange-primary);
        margin-top: 4px;
        opacity: 0.6;
        border-radius: 2px;
    }

/* Divider */
.sidebar-divider {
    border-color: rgba(255,255,255,0.06) !important;
    margin: 0.25rem 1rem;
}

/* Footer */
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.75rem;
}

.sidebar-footer-text {
    color: rgba(148,163,184,0.6);
    font-size: 0.7rem;
}
/* ===== Demo Modal (global — not scoped; fixed to viewport) ===== */
.demo-backdrop {
    position: fixed !important;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.demo-modal {
    position: relative;
    width: 99vw;
    max-width: 1600px;
    height: 95vh;
    background: #0d1117;
    border-radius: 12px;
    overflow: hidden;
}

.demo-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.demo-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    .demo-modal {
        width: 99vw;
        max-width: 1600px;
        height: 95vh;
    }

    .demo-backdrop {
        padding: 0;
    }
}