html, body {
    height: 100%;
    font-family: var(--ct-font);
    background-color: var(--ct-bg);
    color: var(--ct-text);
}

/* ============ NAVBAR (same in both themes — it's the brand) ============ */

.navbar.bg-ct-primary {
    background: linear-gradient(180deg, var(--ct-primary-light) 0%, var(--ct-primary) 100%) !important;
    border-bottom: 3px solid var(--ct-accent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.navbar.navbar-dark .navbar-brand {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .navbar.navbar-dark .navbar-brand::before {
        content: "";
        display: inline-block;
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        background: var(--ct-accent);
        box-shadow: 0 0 8px var(--ct-accent);
    }

.navbar.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
    padding: 0.5rem 0.9rem !important;
    border-radius: var(--ct-radius-sm);
    position: relative;
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .navbar.navbar-dark .nav-link:hover {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .navbar.navbar-dark .nav-link.active {
        color: #ffffff !important;
    }

        .navbar.navbar-dark .nav-link.active::after {
            content: "";
            position: absolute;
            left: 0.9rem;
            right: 0.9rem;
            bottom: 0.15rem;
            height: 2px;
            border-radius: 2px;
            background: var(--ct-accent);
        }

/* Navbar dropdown panels stay dark in both themes to match the bar. */
.navbar .dropdown-menu {
    background-color: #1e1e22;
    border: 1px solid #3a3a40;
    border-radius: var(--ct-radius-sm);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 0.4rem;
    margin-top: 0.5rem;
}

.navbar .dropdown-item {
    color: #e7e5e4;
    border-radius: calc(var(--ct-radius-sm) - 2px);
    padding: 0.45rem 0.75rem;
    font-weight: 500;
}

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.08);
        color: var(--ct-accent);
    }

.navbar .dropdown-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a8a29e;
}

.navbar .dropdown-divider {
    margin: 0.4rem 0;
    border-color: #3a3a40;
}

/* ============ NON-NAVBAR DROPDOWNS (theme-following) ============ */

.dropdown-menu:not(.navbar .dropdown-menu) {
    background-color: var(--ct-surface);
    border: 1px solid var(--ct-border);
}

/* ============ CARDS ============ */

.card {
    background-color: var(--ct-surface);
    color: var(--ct-text);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow);
}

.card-header {
    background-color: var(--ct-surface-raised);
    color: var(--ct-text);
    font-weight: 600;
    border-bottom: 1px solid var(--ct-border);
}

.list-group-item {
    background-color: var(--ct-surface);
    color: var(--ct-text);
    border-color: var(--ct-border);
}

/* ============ TABLES ============ */

.table {
    color: var(--ct-text);
    border-color: var(--ct-border);
    --bs-table-bg: var(--ct-surface);
    --bs-table-color: var(--ct-text);
    --bs-table-border-color: var(--ct-border);
    --bs-table-striped-bg: var(--ct-surface-raised);
    --bs-table-striped-color: var(--ct-text);
    --bs-table-hover-bg: var(--ct-accent-glow);
    --bs-table-hover-color: var(--ct-text);
}

    .table thead th {
        border-bottom-color: var(--ct-border);
    }

/* ============ FORMS ============ */

.form-control,
.form-select {
    background-color: var(--ct-surface-raised);
    color: var(--ct-text);
    border-color: var(--ct-border);
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--ct-surface-raised);
        color: var(--ct-text);
        border-color: var(--ct-accent);
        box-shadow: 0 0 0 0.25rem var(--ct-accent-glow);
    }

    .form-control::placeholder {
        color: var(--ct-text-muted);
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: var(--ct-surface);
        color: var(--ct-text-muted);
    }

/* Dark theme: light dropdown arrow. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e7e5e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Light theme: dark dropdown arrow. */
[data-theme="light"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231c1917' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
    background-color: var(--ct-surface-raised);
    border-color: var(--ct-border);
}

    .form-check-input:checked {
        background-color: var(--ct-accent);
        border-color: var(--ct-accent);
    }

.form-text {
    color: var(--ct-text-muted);
}

.form-label {
    color: var(--ct-text);
}

/* ============ BUTTONS ============ */

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

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--ct-accent-dark);
        border-color: var(--ct-accent-dark);
    }

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

    .btn-outline-primary:hover {
        background-color: var(--ct-accent);
        border-color: var(--ct-accent);
        color: #ffffff;
    }

.btn-outline-secondary {
    color: var(--ct-text-muted);
    border-color: var(--ct-border);
}

    .btn-outline-secondary:hover {
        background-color: var(--ct-surface-raised);
        border-color: var(--ct-text-muted);
        color: var(--ct-text);
    }

.btn-outline-danger {
    color: var(--ct-danger);
    border-color: var(--ct-danger);
}

    .btn-outline-danger:hover {
        background-color: var(--ct-danger);
        border-color: var(--ct-danger);
        color: #ffffff;
    }

/* ============ LINKS ============ */

a {
    color: var(--ct-accent);
}

    a:hover {
        color: var(--ct-accent-dark);
    }

/* ============ ALERTS ============ */

.alert-success {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.alert-info {
    background-color: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Light theme alert variants — solid readable text on tinted backgrounds. */
[data-theme="light"] .alert-success {
    background-color: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.35);
    color: #14532d;
}

[data-theme="light"] .alert-info {
    background-color: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.35);
    color: #334155;
}

[data-theme="light"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: #78350f;
}

[data-theme="light"] .alert-danger {
    background-color: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: #7f1d1d;
}

[data-theme="light"] .alert .btn-close {
    filter: none;
}

/* ============ BADGES ============ */

.badge.bg-success {
    background-color: var(--ct-success) !important;
    color: #052e16;
}

.badge.bg-warning {
    background-color: var(--ct-warning) !important;
    color: #1e1e1e;
}

.badge.bg-danger {
    background-color: var(--ct-danger) !important;
}

.badge.bg-secondary {
    background-color: var(--ct-surface-raised) !important;
    color: var(--ct-text-muted);
    border: 1px solid var(--ct-border);
}

.badge.bg-info {
    background-color: #38bdf8 !important;
    color: #082f49;
}

[data-theme="light"] .badge.bg-success {
    color: #ffffff;
}

/* ============ PAGINATION ============ */

.page-link {
    background-color: var(--ct-surface);
    color: var(--ct-text);
    border-color: var(--ct-border);
}

    .page-link:hover {
        background-color: var(--ct-surface-raised);
        color: var(--ct-accent);
        border-color: var(--ct-border);
    }

.page-item.disabled .page-link {
    background-color: var(--ct-surface);
    color: var(--ct-text-muted);
    border-color: var(--ct-border);
}

/* ============ PROGRESS ============ */

.progress {
    background-color: var(--ct-surface-raised);
}

.progress-bar {
    background-color: var(--ct-accent);
}

    .progress-bar.bg-success {
        background-color: var(--ct-success) !important;
    }

/* ============ MISC ============ */

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

hr {
    border-color: var(--ct-border);
}

dl dt {
    color: var(--ct-text-muted);
    font-weight: 500;
}

.footer {
    color: var(--ct-text-muted);
    border-top: 1px solid var(--ct-border) !important;
}

.shadow-hover {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .shadow-hover:hover {
        box-shadow: var(--ct-shadow-hover);
        transform: translateY(-1px);
    }

/* ============ THEME TOGGLE ============ */

#themeToggle {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

    #themeToggle:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.5);
    }

/* ============ USER CHIP ============ */

.ct-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--ct-accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
}
/* ============ USER CHIP / AVATARS ============ */

.ct-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--ct-accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
}

.ct-avatar-img {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ct-accent);
}

.ct-avatar-lg {
    width: 8rem;
    height: 8rem;
    font-size: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

div.ct-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-accent);
    color: #ffffff;
    font-weight: 700;
}
/* ============ IN-PAGE DROPDOWN MENUS ============ */
/* Navbar dropdowns stay brand-dark in both themes (see NAVBAR section).
   Every OTHER dropdown menu follows the app surface tokens. */
.dropdown-menu:not(.navbar .dropdown-menu) {
    background-color: var(--ct-surface);
    color: var(--ct-text);
    border: 1px solid var(--ct-border);
}

    .dropdown-menu:not(.navbar .dropdown-menu) .dropdown-item {
        color: var(--ct-text);
    }

        .dropdown-menu:not(.navbar .dropdown-menu) .dropdown-item:hover,
        .dropdown-menu:not(.navbar .dropdown-menu) .dropdown-item:focus {
            background-color: var(--ct-surface-2);
            color: var(--ct-text);
        }

    .dropdown-menu:not(.navbar .dropdown-menu) .text-muted {
        color: var(--ct-text-muted) !important;
    }
/* ============ LANDING PAGE ============ */
body.landing main {
    min-height: 70vh;
}

.landing-hero {
    padding: 5.5rem 0 4.5rem;
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--ct-accent) 14%, transparent), transparent 60%), var(--ct-bg);
    border-bottom: 1px solid var(--ct-border);
}

.landing-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ct-accent);
    margin-bottom: 1rem;
}

.landing-headline {
    font-size: clamp(1.9rem, 4.5vw, 3.1rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.landing-sub {
    font-size: 1.15rem;
    color: var(--ct-text-muted);
    max-width: 44rem;
    margin: 0 auto;
}

.landing-section {
    padding: 4rem 0;
}

.landing-section-alt {
    background-color: var(--ct-surface);
    border-top: 1px solid var(--ct-border);
    border-bottom: 1px solid var(--ct-border);
}

.landing-h2 {
    font-weight: 700;
}

.landing-card .landing-card-icon {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.landing-step {
    text-align: center;
    padding: 0 1rem;
}

.landing-step-num {
    width: 2.6rem;
    height: 2.6rem;
    line-height: 2.6rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background-color: var(--ct-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.landing-footer {
    border-top: 1px solid var(--ct-border);
}

/* ============ LEADERBOARD ============ */
.lb-table td {
    vertical-align: middle;
}

.lb-rank {
    width: 2.6rem;
    text-align: center;
    font-weight: 700;
    color: var(--ct-text-muted);
}

.lb-rank-1 {
    color: #d4a017;
}
/* gold */
.lb-rank-2 {
    color: #9aa0a6;
}
/* silver */
.lb-rank-3 {
    color: #b46a3c;
}
/* bronze */

.lb-avatar-cell {
    width: 2.6rem;
}

/* ============ GLOBAL LEADERBOARD ============ */
.glb-header {
    margin-bottom: 2rem;
}

.glb-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ct-accent);
}

.glb-title {
    font-weight: 800;
    margin-bottom: 0.25rem;
}

/* --- Podium --- */
.glb-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.glb-podium-slot {
    width: 15rem;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
}

.glb-podium-card {
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--ct-accent) 10%, transparent), transparent 70%), var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 1.25rem 1rem 1rem;
    text-align: center;
}

.glb-podium-1 .glb-podium-card {
    border-color: #d4a017;
    box-shadow: 0 0 24px color-mix(in srgb, #d4a017 30%, transparent);
}

.glb-podium-2 .glb-podium-card {
    border-color: #9aa0a6;
}

.glb-podium-3 .glb-podium-card {
    border-color: #b46a3c;
}

.glb-medal {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.glb-podium-avatar {
    width: 3.4rem;
    height: 3.4rem;
    line-height: 3.4rem;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background-color: var(--ct-accent);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}
.glb-podium-avatar-img {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--ct-accent);
}

.glb-podium-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.glb-podium-agency {
    color: var(--ct-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.glb-podium-total {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
}

.glb-podium-label {
    color: var(--ct-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.6rem;
}

.glb-chip-row {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.glb-chip {
    background-color: var(--ct-surface-2);
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    color: var(--ct-text-muted);
}

/* Stepped bases: gold tallest, center stage. */
.glb-podium-base {
    background: linear-gradient(180deg, var(--ct-surface-2), var(--ct-surface));
    border: 1px solid var(--ct-border);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    text-align: center;
    font-weight: 800;
    color: var(--ct-text-muted);
}

.glb-podium-1 .glb-podium-base {
    height: 4.5rem;
    line-height: 4.5rem;
    color: #d4a017;
}

.glb-podium-2 .glb-podium-base {
    height: 3rem;
    line-height: 3rem;
    color: #9aa0a6;
}

.glb-podium-3 .glb-podium-base {
    height: 2rem;
    line-height: 2rem;
    color: #b46a3c;
}

/* --- Tabs + table --- */
.glb-pills .nav-link {
    color: var(--ct-text-muted);
}

    .glb-pills .nav-link.active {
        background-color: var(--ct-accent);
        color: #fff;
    }

.glb-table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ct-text-muted);
}

.glb-row-1 {
    background-color: color-mix(in srgb, #d4a017 8%, transparent);
}

.glb-row-2 {
    background-color: color-mix(in srgb, #9aa0a6 8%, transparent);
}

.glb-row-3 {
    background-color: color-mix(in srgb, #b46a3c 8%, transparent);
}

.glb-value {
    font-size: 1.05rem;
}

/* --- Bootstrap accordion → ComTracker theme tokens ---
   The accordion ships its own --bs-* variables, so it ignores our
   token theming unless mapped explicitly. Dark is the default theme;
   the light chevron icons below are overridden back to dark strokes
   inside [data-theme="light"]. */
.accordion {
    --bs-accordion-bg: var(--ct-surface);
    --bs-accordion-color: var(--ct-text);
    --bs-accordion-border-color: var(--ct-border);
    --bs-accordion-btn-color: var(--ct-text);
    --bs-accordion-btn-bg: var(--ct-surface);
    --bs-accordion-active-bg: var(--ct-surface-raised);
    --bs-accordion-active-color: var(--ct-text);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--ct-accent-glow);
    /* Chevron icons: Bootstrap bakes the stroke color into an SVG data
       URI, so it can't inherit currentColor — light strokes for dark theme. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-theme="light"] .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* --- Nav pills → ComTracker theme tokens (segmented-control style) ---
   Like the accordion, pills carry their own --bs-* variables and ignore
   token theming unless mapped. The tray + accent fill styling applies to
   every nav-pills in the app (currently the Dashboard's Overview/Mix). */
.nav-pills {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
}

    .nav-pills .nav-link {
        color: var(--ct-text-muted);
        border-radius: var(--ct-radius-sm);
        padding: 0.375rem 1.1rem;
        font-weight: 500;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

        .nav-pills .nav-link:hover:not(.active) {
            color: var(--ct-text);
            background: var(--ct-surface-raised);
        }

        .nav-pills .nav-link.active,
        .nav-pills .show > .nav-link {
            --bs-nav-pills-link-active-bg: var(--ct-accent);
            background: var(--ct-accent);
            color: #fff;
            box-shadow: var(--ct-shadow);
        }

        .nav-pills .nav-link:focus-visible {
            outline: none;
            box-shadow: 0 0 0 0.25rem var(--ct-accent-glow);
        }

/* --- Table active-row variant → theme tokens ---
   .table-active (used to highlight "you are here" rows) carries its own
   --bs-* pair; mapped to tokens so it follows both themes. */
.table {
    --bs-table-active-bg: var(--ct-surface-raised);
    --bs-table-active-color: var(--ct-text);
}
/* --- Light theme v2 (iterating): clean white, State Farm-style.
   Overrides tokens.css because site.css loads after it. Once final,
   move these values into tokens.css's [data-theme="light"] block
   and delete this. Red accent tokens deliberately untouched. --- */
[data-theme="light"] {
    --ct-bg: #ffffff; /* page: pure white, no more grey wash */
    --ct-surface: #ffffff; /* cards: white too — separation comes
                                      from borders + shadows, not grey fill */
    --ct-surface-raised: #f6f4f2; /* hovers, active accordion, pills tray:
                                      barely-there warm grey */
    --ct-border: #e2ded9; /* warm light border so white-on-white
                                      cards still read as cards */
    --ct-text: #22262a; /* near-black slate */
    --ct-text-muted: #67707a;
}
/* --- Timesheet grid hour cells: they're links, but a grid of
   accent-red numbers reads as alerts. Normal text color at rest;
   accent + underline on hover says "clickable". --- */
.ts-hours {
    color: var(--ct-text);
}

    .ts-hours:hover {
        color: var(--ct-accent);
        text-decoration: underline !important;
    }

/* --- Navbar sprucing: accent underline on the active item, gentle
   hover, agency name in the brand at lighter weight. --- */
.ct-brand {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ct-brand-agency {
    font-weight: 400;
    opacity: 0.75;
    font-size: 0.9em;
}

.ct-nav .navbar-nav .nav-link {
    position: relative;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition: color 0.15s ease;
}

    /* Active indicator: a short accent-colored bar under the item. */
    .ct-nav .navbar-nav .nav-link.active::after {
        content: "";
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.35rem;
        height: 2px;
        border-radius: 1px;
        background: var(--ct-accent);
    }

    .ct-nav .navbar-nav .nav-link:hover:not(.active) {
        color: #fff;
    }

/* Dropdowns: token-consistent chrome. */
.ct-nav .dropdown-menu {
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-sm);
    padding: 0.35rem;
    box-shadow: var(--ct-shadow);
}

.ct-nav .dropdown-item {
    border-radius: var(--ct-radius-sm);
    padding: 0.4rem 0.75rem;
}
/* ============ MY PLAN PROGRESS GRID ============
   The employee-facing plan chart (_MyPlanGrid). The ATTAINED tier reads as
   a soft glowing column: gradient-capped header with a "YOU" tag, success
   tint running down the cells, thin side rails. Met requirement cells get
   a green tick + text only (no fill) so the column stays the hero.
   Token-driven throughout - follows dark and light themes automatically.
   Cell tints use inset box-shadow, same as Bootstrap table variants, so
   they layer cleanly over --bs-table-bg. */

.table.plan-grid {
    --pg-tint: color-mix(in srgb, var(--ct-success) 10%, transparent);
    --pg-tint-strong: color-mix(in srgb, var(--ct-success) 24%, transparent);
    --pg-rail: color-mix(in srgb, var(--ct-success) 45%, transparent);
}

    .table.plan-grid th.tier-attained,
    .table.plan-grid td.tier-attained {
        box-shadow: inset 0 0 0 9999px var(--pg-tint),
                    inset 1px 0 0 var(--pg-rail),
                    inset -1px 0 0 var(--pg-rail);
    }

    .table.plan-grid thead th.tier-attained {
        background: linear-gradient(180deg, var(--pg-tint-strong), transparent);
        box-shadow: inset 1px 0 0 var(--pg-rail),
                    inset -1px 0 0 var(--pg-rail);
        border-top: 2px solid var(--ct-success);
        border-radius: var(--ct-radius-sm) var(--ct-radius-sm) 0 0;
        color: var(--ct-success);
    }

    .table.plan-grid td.tier-attained {
        font-weight: 600;
    }

    /* Tiny "YOU" tag under the attained tier's header label. */
    .table.plan-grid .pg-you {
        display: block;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ct-success);
        line-height: 1.1;
    }

    /* Requirement cells the current value already meets: green tick +
       text, no fill - the attained column stays the focal point. */
    .table.plan-grid td.req-met {
        color: var(--ct-success);
    }

    .table.plan-grid .pg-check {
        font-size: 0.75em;
        margin-left: 0.15rem;
        opacity: 0.9;
    }

    /* The live "So far" value column. */
    .table.plan-grid td.pg-sofar {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

/* ============ LANDING V2 (shyft-style, token-driven) ============
   The marketing page. Dark hero and demo band stay dark in BOTH themes
   (deliberate - premium contrast); the middle sections ride the theme
   tokens. All accents are --ct-accent (the brand red). */

.lp-dark {
    background: #111113;
    color: #e7e5e4;
}

/* --- Floating pill navbar --- */
.lp-nav {
    position: sticky;
    top: 0.75rem;
    z-index: 1030;
    margin: 0.75rem auto 0;
    max-width: 1080px;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ct-surface) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ct-border);
    box-shadow: var(--ct-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lp-brand {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--ct-text);
    text-decoration: none;
}

    .lp-brand span { color: var(--ct-accent); }

/* --- Hero --- */
.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 1rem 0;
    margin-top: -4.4rem;   /* tuck behind the floating nav */
    text-align: center;
}

    .lp-hero::before {
        content: "";
        position: absolute;
        inset: -20% -10% auto;
        height: 70%;
        background:
            radial-gradient(600px 300px at 30% 20%, rgba(220, 38, 38, 0.18), transparent 70%),
            radial-gradient(700px 350px at 75% 10%, rgba(220, 38, 38, 0.10), transparent 70%);
        pointer-events: none;
    }

.lp-hero-inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding-top: 5rem;
}

.lp-wordmark {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 1.5rem;
}

    .lp-wordmark span { color: var(--ct-accent); }

.lp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(231, 229, 228, 0.18);
    background: rgba(231, 229, 228, 0.06);
    font-size: 0.85rem;
    color: #a8a29e;
    margin-bottom: 1.25rem;
}

    .lp-pill strong { color: var(--ct-accent); font-weight: 600; }

.lp-h1 {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
}

    .lp-h1 .lp-accent { color: var(--ct-accent); }

.lp-sub {
    max-width: 640px;
    margin: 1rem auto 1.75rem;
    font-size: 1.08rem;
    line-height: 1.6;
    color: #a8a29e;
}

.lp-btn-light {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: #fff;
    color: #111113;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .lp-btn-light:hover {
        color: #111113;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }

.lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    border: 1px solid rgba(231, 229, 228, 0.25);
    color: #e7e5e4;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .lp-btn-ghost:hover {
        color: #fff;
        border-color: rgba(231, 229, 228, 0.55);
        background: rgba(231, 229, 228, 0.06);
    }

.lp-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    background: var(--ct-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .lp-btn-accent:hover {
        color: #fff;
        background: var(--ct-accent-dark);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px var(--ct-accent-glow);
    }

.lp-hero-note {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #a8a29e;
}

    .lp-hero-note .ok { color: var(--ct-success); }

/* --- CSS-built dashboard mock in a browser frame --- */
.lp-appframe {
    position: relative;
    max-width: 980px;
    margin: 3rem auto -1px;
    border-radius: 14px 14px 0 0;
    border: 1px solid rgba(231, 229, 228, 0.14);
    border-bottom: none;
    background: #1c1917;
    box-shadow: 0 -20px 80px rgba(220, 38, 38, 0.12), 0 8px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-align: left;
    font-size: 0.72rem;
}

.lp-chrome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    background: #141210;
    border-bottom: 1px solid rgba(231, 229, 228, 0.1);
}

.lp-dot { width: 10px; height: 10px; border-radius: 50%; background: #44403c; }
.lp-dot.r { background: #ef4444; } .lp-dot.y { background: #f59e0b; } .lp-dot.g { background: #22c55e; }

.lp-chrome-url {
    margin-left: 0.75rem;
    padding: 0.15rem 0.9rem;
    border-radius: 999px;
    background: #292524;
    color: #a8a29e;
    font-size: 0.7rem;
}

.lp-app {
    display: grid;
    grid-template-columns: 170px 1fr;
    min-height: 340px;
}

.lp-side {
    background: #171412;
    border-right: 1px solid rgba(231, 229, 228, 0.08);
    padding: 0.9rem 0.6rem;
}

.lp-side-item {
    padding: 0.42rem 0.65rem;
    border-radius: 0.45rem;
    color: #a8a29e;
    margin-bottom: 0.15rem;
    white-space: nowrap;
}

    .lp-side-item.active {
        background: color-mix(in srgb, var(--ct-accent) 22%, transparent);
        color: #fff;
        font-weight: 600;
    }

.lp-main { padding: 1rem 1.1rem; }

.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 0.8rem; }

.lp-stat {
    background: #292524;
    border: 1px solid rgba(231, 229, 228, 0.08);
    border-radius: 0.6rem;
    padding: 0.6rem 0.75rem;
}

.lp-stat-label { color: #a8a29e; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lp-stat-val { color: #fff; font-weight: 700; font-size: 1rem; }
.lp-stat-val small { color: var(--ct-success); font-size: 0.65rem; font-weight: 600; }

.lp-panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.7rem; }

.lp-panel {
    background: #292524;
    border: 1px solid rgba(231, 229, 228, 0.08);
    border-radius: 0.6rem;
    padding: 0.7rem 0.8rem;
}

.lp-panel-title { color: #e7e5e4; font-weight: 600; margin-bottom: 0.55rem; }

.lp-bars { display: flex; align-items: flex-end; gap: 0.45rem; height: 110px; }

.lp-bar {
    flex: 1;
    border-radius: 0.25rem 0.25rem 0 0;
    background: linear-gradient(180deg, var(--ct-accent), color-mix(in srgb, var(--ct-accent) 45%, transparent));
    opacity: 0.9;
}

.lp-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.32rem 0; border-bottom: 1px solid rgba(231, 229, 228, 0.06); color: #a8a29e; }
.lp-row:last-child { border-bottom: none; }
.lp-row .who { color: #e7e5e4; font-weight: 600; }
.lp-row .amt { margin-left: auto; color: var(--ct-success); font-weight: 700; }
.lp-tierpill {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--ct-success) 20%, transparent);
    color: var(--ct-success);
}

/* --- Themed middle sections --- */
.lp-section { padding: 4.5rem 1rem; background: var(--ct-bg); color: var(--ct-text); }
.lp-section-alt { background: var(--ct-surface-raised); }

.lp-kicker {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ct-accent);
    margin-bottom: 0.6rem;
}

.lp-heading {
    text-align: center;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.lp-lead {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 3rem;
    color: var(--ct-text-muted);
    line-height: 1.6;
}

/* --- Workflow / feature cards --- */
.lp-card {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow);
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .lp-card:hover { transform: translateY(-2px); box-shadow: var(--ct-shadow-hover); }

.lp-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--ct-accent) 14%, transparent);
    font-size: 1.5rem;
    margin-bottom: 0.9rem;
}

.lp-tile-num {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--ct-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-card h5 { font-weight: 700; }
.lp-card p { color: var(--ct-text-muted); }

.lp-auto {
    border-top: 1px solid var(--ct-border);
    margin-top: 1rem;
    padding-top: 0.85rem;
}

.lp-auto-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--ct-warning);
    margin-bottom: 0.4rem;
}

.lp-auto-line { display: flex; gap: 0.5rem; color: var(--ct-text-muted); font-size: 0.87rem; padding: 0.16rem 0; }

.lp-check { display: flex; gap: 0.55rem; padding: 0.28rem 0; color: var(--ct-text); }
.lp-check .ok { color: var(--ct-accent); font-weight: 700; }

/* --- Outcome cards --- */
.lp-result {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow);
    overflow: hidden;
    height: 100%;
}

.lp-result-bar { height: 4px; background: linear-gradient(90deg, var(--ct-accent), var(--ct-warning)); }
.lp-result.v2 .lp-result-bar { background: linear-gradient(90deg, var(--ct-success), var(--ct-accent)); }
.lp-result.v3 .lp-result-bar { background: linear-gradient(90deg, var(--ct-warning), var(--ct-success)); }

.lp-result-body { padding: 1.35rem 1.5rem; display: flex; gap: 1rem; }

.lp-result-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: color-mix(in srgb, var(--ct-accent) 16%, transparent);
}

.lp-result.v2 .lp-result-icon { background: color-mix(in srgb, var(--ct-success) 16%, transparent); }
.lp-result.v3 .lp-result-icon { background: color-mix(in srgb, var(--ct-warning) 16%, transparent); }

.lp-result-stat { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.lp-result-stat small { font-size: 0.9rem; font-weight: 600; color: var(--ct-text-muted); margin-left: 0.3rem; }
.lp-result-body p { color: var(--ct-text-muted); font-size: 0.9rem; margin: 0.3rem 0 0; }

/* --- Demo band (pricing-card pattern) --- */
.lp-band { padding: 5rem 1rem; }

.lp-demo-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background: var(--ct-surface);
    color: var(--ct-text);
    border-radius: 1.25rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    padding: 2.75rem 2.5rem 2.25rem;
}

.lp-demo-flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 1.1rem;
    border-radius: 999px;
    background: var(--ct-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* --- Footer --- */
.lp-footer { padding: 3rem 1rem 2rem; }
.lp-footer a { color: #a8a29e; text-decoration: none; }
.lp-footer a:hover { color: #e7e5e4; }
.lp-footer-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: #78716c; text-transform: uppercase; margin-bottom: 0.6rem; }

@media (max-width: 768px) {
    .lp-app { grid-template-columns: 1fr; }
    .lp-side { display: none; }
    .lp-stats { grid-template-columns: repeat(2, 1fr); }
    .lp-panels { grid-template-columns: 1fr; }
}

/* ============ NAVBAR V2 ============
   Sticky, softly blurred bar; grouped Setup panel; avatar user menu.
   Token-driven, both themes. */

.ct-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--ct-primary) 88%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(231, 229, 228, 0.08);
}

/* Section headers inside nav dropdowns: small caps, accent tick. */
.ct-nav .dropdown-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ct-text-muted);
    padding: 0.5rem 0.75rem 0.2rem;
}

/* --- Setup: grouped multi-column panel --- */
.ct-setup-panel {
    padding: 0.6rem 0.75rem 0.75rem;
}

    .ct-setup-panel.show {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }

.ct-setup-col {
    min-width: 11.5rem;
}

    .ct-setup-col + .ct-setup-col {
        border-left: 1px solid var(--ct-border);
        padding-left: 0.75rem;
    }

/* Collapsed (mobile) navbar: dropdowns render in-flow full width — stack
   the setup columns instead of forcing a wide panel. */
@media (max-width: 767.98px) {
    .ct-nav { position: static; }

    .ct-setup-panel.show { flex-direction: column; gap: 0.25rem; }

    .ct-setup-col + .ct-setup-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--ct-border);
        padding-top: 0.35rem;
    }
}

/* --- Avatar user menu --- */
.ct-user-toggle { padding-top: 0.4rem; padding-bottom: 0.4rem; }

    .ct-user-toggle::after { display: none; }   /* the avatar IS the affordance */

    .ct-user-toggle .ct-avatar,
    .ct-user-toggle .ct-avatar-img {
        transition: box-shadow 0.15s ease;
    }

    .ct-user-toggle:hover .ct-avatar,
    .ct-user-toggle:hover .ct-avatar-img,
    .ct-user-toggle[aria-expanded="true"] .ct-avatar,
    .ct-user-toggle[aria-expanded="true"] .ct-avatar-img {
        box-shadow: 0 0 0 2px var(--ct-accent);
    }

.ct-user-menu {
    min-width: 13.5rem;
}

.ct-user-name {
    padding: 0.45rem 0.75rem 0.35rem;
    font-weight: 700;
    color: var(--ct-text);
}

.ct-user-menu form { margin: 0; }