/* Light Mode v3 - "Adesto Design System"
   Generated from Adesto Design System Tokens & Guidelines
   Primary: Neutral-900 (near-black) · Pill buttons/inputs · 16px cards · Tinted status badges */
[data-theme="light-v3"] {
    /* ── 1. Brand Neutral Palette ── */
    --color-neutral-50:  #F9FAFB;
    --color-neutral-100: #F3F4F6;
    --color-neutral-200: #E5E7EB;
    --color-neutral-300: #D1D5DB;
    --color-neutral-400: #9CA3AF;
    --color-neutral-500: #6B7280;
    --color-neutral-600: #4B5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1F2937;
    --color-neutral-900: #111827;
    --color-neutral-950: #030712;

    /* ── 2. Brand Primary & Surfaces ── */
    --color-bg-light: #FFFFFF;
    --color-bg-base: #F4F4EE;
    --color-bg-dark: #22252A;
    --color-brand-light: #FBFDF7;

    /* ── 3. Semantic & Status Colors ── */
    --color-error-700: #991B1B;
    --color-error-500: #EF4444;
    --color-error-050: #FEF2F2;
    --color-warning-700: #B45309;
    --color-warning-500: #F59E0B;
    --color-warning-050: #FFFBEB;
    --color-success-700: #15803D;
    --color-success-500: #22C55E;
    --color-success-050: #F0FDF4;
    --color-info-700: #0F766E;
    --color-info-500: #14B8A6;
    --color-info-050: #CCFBF1;

    /* ── 4. Bootstrap Token Mapping ── */
    --bs-primary: var(--color-neutral-900);
    --bs-primary-rgb: 17, 24, 39;
    --bs-secondary: var(--color-neutral-600);
    --bs-secondary-rgb: 75, 85, 99;
    --bs-success: var(--color-success-500);
    --bs-success-rgb: 34, 197, 94;
    --bs-danger: var(--color-error-500);
    --bs-danger-rgb: 239, 68, 68;
    --bs-warning: var(--color-warning-500);
    --bs-warning-rgb: 245, 158, 11;
    --bs-info: var(--color-info-500);
    --bs-info-rgb: 20, 184, 166;

    /* Custom Aliases */
    --primary-color: var(--color-neutral-900);
    --secondary-color: var(--color-neutral-600);
    --success-color: var(--color-success-500);
    --danger-color: var(--color-error-500);
    --warning-color: var(--color-warning-500);
    --info-color: var(--color-info-500);

    /* ── Page Background & Text ── */
    --bs-body-bg: var(--color-bg-base);
    --bs-body-color: var(--color-neutral-900);
    --text-muted: var(--color-neutral-500);
    --text-primary: var(--color-neutral-900);
    --link-color: var(--color-neutral-900);
    --link-hover-color: var(--color-neutral-700);

    /* ── Containers & Cards ── */
    --card-bg: var(--color-bg-light);
    --card-border: var(--color-neutral-200);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    --card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

    /* ── Tables ── */
    --table-bg: var(--color-bg-light);
    --table-hover-bg: var(--color-neutral-100);
    --table-border-color: var(--color-neutral-200);
    --table-striped-bg: var(--color-neutral-50);

    /* ── Form Inputs ── */
    --input-bg: var(--color-bg-light);
    --input-border: var(--color-neutral-300);
    --input-focus-border: var(--color-neutral-900);
    --input-focus-shadow: 0 0 0 0.25rem rgba(17, 24, 39, 0.15);
    --input-disabled-bg: var(--color-neutral-100);

    /* ── Navigation ── */
    --navbar-bg: var(--color-bg-light);
    --navbar-color: var(--color-neutral-900);
    --navbar-hover-bg: var(--color-neutral-100);

    /* ── Dropdowns & Modals ── */
    --dropdown-bg: var(--color-bg-light);
    --dropdown-border: var(--color-neutral-200);
    --dropdown-hover-bg: var(--color-neutral-100);
    --dropdown-link-color: var(--color-neutral-900);
    --modal-bg: var(--color-bg-light);
    --modal-backdrop: rgba(17, 24, 39, 0.6);

    /* ── Sidebar (Dark Slate layout element) ── */
    --sidebar-bg: var(--color-bg-dark);
    --sidebar-border: transparent;

    /* ── Help/Info Boxes ── */
    --help-box-bg: var(--color-neutral-50);
    --help-box-border: var(--color-neutral-200);
    --help-box-color: var(--color-neutral-700);

    /* ── Border Radius (Pill Component Default) ── */
    --border-radius: 9999px;          /* pill - buttons, inputs, badges */
    --border-radius-card: 16px;       /* cards & panels */
    --border-radius-lg: 20px;         /* modals & large surfaces */
    --border-radius-sm: 10px;         /* small elements */

    /* ── Shadows ── */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.03);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);

    /* ── RGB variants (used by bg-info, text-bg-*, alerts, form-check, focus rings) ── */
    --bs-info-rgb: 20, 184, 166;
    --bs-success-rgb: 34, 197, 94;
    --bs-danger-rgb: 239, 68, 68;
    --bs-warning-rgb: 245, 158, 11;
    --bs-secondary-rgb: 75, 85, 99;
}

/* Apply theme styles */
[data-theme="light-v3"] body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Design System Typography Utilities ── */
[data-theme="light-v3"] .text-micetype {
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: var(--color-neutral-500);
}

[data-theme="light-v3"] .text-paragraph {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--color-neutral-800);
}

[data-theme="light-v3"] .text-leader {
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 500;
    color: var(--color-neutral-900);
}

[data-theme="light-v3"] .text-button {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Cards - Structural Container (16px radius) ── */
[data-theme="light-v3"] .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    border-radius: var(--border-radius-card) !important;
}

[data-theme="light-v3"] .card-header {
    background-color: var(--color-neutral-50);
    border-bottom: 1px solid var(--card-border);
    border-radius: var(--border-radius-card) var(--border-radius-card) 0 0 !important;
    font-weight: 600;
}

[data-theme="light-v3"] .card-footer {
    background-color: var(--color-neutral-50);
    border-top: 1px solid var(--card-border);
}

[data-theme="light-v3"] .dashboard-card {
    transition: all 0.2s ease-in-out;
}

[data-theme="light-v3"] .dashboard-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-2px);
}

/* ── Interactive Pill Buttons ── */
[data-theme="light-v3"] .btn {
    border-radius: var(--border-radius) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1.5rem !important;
    transition: all 0.2s ease-in-out;
}

[data-theme="light-v3"] .btn-sm {
    padding: 0.375rem 1rem !important;
    font-size: 0.75rem;
}

[data-theme="light-v3"] .btn-lg {
    padding: 0.75rem 2rem !important;
    font-size: 1rem;
}

/* Break-duration preset buttons (digital timesheet modals) — segmented group.
   The global pill radius (--border-radius: 9999px) + uppercase + wide padding
   turned these narrow preset buttons into circles with text spilling out. */
[data-theme="light-v3"] .break-preset-group .btn {
    border-radius: 0 !important;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.45rem 0.5rem !important;
    white-space: nowrap;
    font-size: 0.85rem;
}
[data-theme="light-v3"] .break-preset-group .btn:first-child {
    border-top-left-radius: var(--border-radius-sm) !important;
    border-bottom-left-radius: var(--border-radius-sm) !important;
}
[data-theme="light-v3"] .break-preset-group .btn:last-child {
    border-top-right-radius: var(--border-radius-sm) !important;
    border-bottom-right-radius: var(--border-radius-sm) !important;
}

/* Month label on the locum availability calendar — the global pill radius
   (9999px) + uppercase + letter-spacing clipped the "AUGUST 2026" text at the
   pill corners on small screens. Render as a neat rounded rectangle instead. */
[data-theme="light-v3"] .btn.month-label {
    border-radius: var(--border-radius-sm) !important;
    letter-spacing: normal;
    padding: 0.375rem 0.9rem !important;
    white-space: nowrap;
}
@media (max-width: 480px) {
    [data-theme="light-v3"] .btn.month-label {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem;
    }
}

[data-theme="light-v3"] .btn-primary {
    background-color: var(--color-neutral-900) !important;
    border-color: var(--color-neutral-900) !important;
    color: var(--color-bg-light) !important;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.2);
}

[data-theme="light-v3"] .btn-primary:hover {
    background-color: var(--color-neutral-700) !important;
    border-color: var(--color-neutral-700) !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.3);
    transform: translateY(-1px);
}

[data-theme="light-v3"] .btn-secondary {
    background-color: var(--color-neutral-100) !important;
    border-color: var(--color-neutral-200) !important;
    color: var(--color-neutral-800) !important;
}

[data-theme="light-v3"] .btn-secondary:hover {
    background-color: var(--color-neutral-200) !important;
    border-color: var(--color-neutral-300) !important;
}

/* Semantic/status buttons use the tinted trio (050 bg / 700 text / 500 border)
   to match the alerts & badges — softer than the old solid-500 fills.
   Brand CTA (.btn-primary / .btn-dark) stays solid near-black per the
   "Tinted-vs-solid rule" in THEME_TOKEN_REFERENCE.md. */
[data-theme="light-v3"] .btn-success {
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    background-color: var(--color-success-050) !important;
    border-color: var(--color-success-500) !important;
    color: var(--color-success-700) !important;
    box-shadow: none;
}

[data-theme="light-v3"] .btn-success:hover {
    background-color: var(--color-success-050) !important;
    border-color: var(--color-success-700) !important;
    color: var(--color-success-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-success-rgb), 0.08);
    transform: translateY(-1px);
}

[data-theme="light-v3"] .btn-success:active,
[data-theme="light-v3"] .btn-success.active {
    background-color: var(--color-success-050) !important;
    border-color: var(--color-success-700) !important;
    color: var(--color-success-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-success-rgb), 0.14);
}

[data-theme="light-v3"] .btn-danger {
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    background-color: var(--color-error-050) !important;
    border-color: var(--color-error-500) !important;
    color: var(--color-error-700) !important;
    box-shadow: none;
}

[data-theme="light-v3"] .btn-danger:hover {
    background-color: var(--color-error-050) !important;
    border-color: var(--color-error-700) !important;
    color: var(--color-error-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-danger-rgb), 0.08);
    transform: translateY(-1px);
}

[data-theme="light-v3"] .btn-danger:active,
[data-theme="light-v3"] .btn-danger.active {
    background-color: var(--color-error-050) !important;
    border-color: var(--color-error-700) !important;
    color: var(--color-error-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-danger-rgb), 0.14);
}

[data-theme="light-v3"] .btn-warning {
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    background-color: var(--color-warning-050) !important;
    border-color: var(--color-warning-500) !important;
    color: var(--color-warning-700) !important;
    box-shadow: none;
}

[data-theme="light-v3"] .btn-warning:hover {
    background-color: var(--color-warning-050) !important;
    border-color: var(--color-warning-700) !important;
    color: var(--color-warning-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-warning-rgb), 0.08);
    transform: translateY(-1px);
}

[data-theme="light-v3"] .btn-warning:active,
[data-theme="light-v3"] .btn-warning.active {
    background-color: var(--color-warning-050) !important;
    border-color: var(--color-warning-700) !important;
    color: var(--color-warning-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-warning-rgb), 0.14);
}

[data-theme="light-v3"] .btn-info {
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    background-color: var(--color-info-050) !important;
    border-color: var(--color-info-500) !important;
    color: var(--color-info-700) !important;
    box-shadow: none;
}

[data-theme="light-v3"] .btn-info:hover {
    background-color: var(--color-info-050) !important;
    border-color: var(--color-info-700) !important;
    color: var(--color-info-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-info-rgb), 0.08);
    transform: translateY(-1px);
}

[data-theme="light-v3"] .btn-info:active,
[data-theme="light-v3"] .btn-info.active {
    background-color: var(--color-info-050) !important;
    border-color: var(--color-info-700) !important;
    color: var(--color-info-700) !important;
    box-shadow: inset 0 0 0 100px rgba(var(--bs-info-rgb), 0.14);
}

[data-theme="light-v3"] .btn-outline-primary {
    color: var(--color-neutral-900);
    border-color: var(--color-neutral-900);
    background-color: transparent;
}

[data-theme="light-v3"] .btn-outline-primary:hover {
    background-color: var(--color-neutral-900);
    border-color: var(--color-neutral-900);
    color: var(--color-bg-light);
}

[data-theme="light-v3"] .btn-outline-secondary {
    color: var(--bs-body-color);
    border-color: var(--input-border);
    background-color: transparent;
}

[data-theme="light-v3"] .btn-outline-secondary:hover {
    background-color: var(--color-neutral-100);
    border-color: var(--input-border);
    color: var(--bs-body-color);
}

[data-theme="light-v3"] .btn-outline-info {
    --bs-info-rgb: 20, 184, 166;
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
    --bs-btn-disabled-color: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

[data-theme="light-v3"] .btn-outline-success {
    --bs-success-rgb: 34, 197, 94;
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-disabled-color: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
}

[data-theme="light-v3"] .btn-outline-warning {
    --bs-warning-rgb: 245, 158, 11;
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-disabled-color: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

[data-theme="light-v3"] .btn-outline-danger {
    --bs-danger-rgb: 239, 68, 68;
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-disabled-color: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}

[data-theme="light-v3"] .btn-link {
    color: var(--link-color);
}

[data-theme="light-v3"] .btn-link:hover {
    color: var(--link-hover-color);
}

/* ── Form Fields & Input Pills ── */
[data-theme="light-v3"] .form-control,
[data-theme="light-v3"] .form-select {
    border-radius: var(--border-radius) !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    color: var(--color-neutral-900);
}

/* Multi-line textareas must NOT use the pill radius (it clips the text) */
[data-theme="light-v3"] textarea.form-control {
    border-radius: var(--border-radius-sm) !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

[data-theme="light-v3"] .form-control:focus,
[data-theme="light-v3"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus-border) !important;
    box-shadow: var(--input-focus-shadow) !important;
    color: var(--bs-body-color);
}

[data-theme="light-v3"] .form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

[data-theme="light-v3"] .form-control:disabled,
[data-theme="light-v3"] .form-select:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--text-muted);
}

/* Checkboxes, switches & radios */
[data-theme="light-v3"] .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="light-v3"] .form-check-input:checked {
    background-color: var(--color-neutral-900) !important;
    border-color: var(--color-neutral-900) !important;
}

[data-theme="light-v3"] .form-check-input:focus {
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
}

/* ── Tables ── */
[data-theme="light-v3"] .table {
    background-color: var(--table-bg);
    color: var(--bs-body-color);
    border-color: var(--table-border-color);
}

[data-theme="light-v3"] .table-hover tbody tr:hover {
    background-color: var(--table-hover-bg);
}

[data-theme="light-v3"] .table thead th {
    border-color: var(--table-border-color);
    background-color: var(--color-neutral-50);
    font-weight: 600;
}

[data-theme="light-v3"] .table tbody td {
    border-color: var(--table-border-color);
}

[data-theme="light-v3"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-striped-bg);
}

/* ── Navbar ── */
[data-theme="light-v3"] .navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--card-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light-v3"] .navbar .navbar-toggler {
    border-color: var(--card-border);
    color: var(--navbar-color);
}

[data-theme="light-v3"] .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2817, 24, 39, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile home button — use navbar text colour so it's visible on the light navbar */
[data-theme="light-v3"] .mobile-home-btn,
[data-theme="light-v3"] .mobile-home-btn i {
    color: var(--navbar-color) !important;
}
[data-theme="light-v3"] .mobile-home-btn:hover i {
    color: var(--primary-color) !important;
}

[data-theme="light-v3"] .navbar-dark .navbar-brand,
[data-theme="light-v3"] .navbar-dark .navbar-nav .nav-link {
    color: var(--navbar-color);
    border-radius: var(--border-radius-sm);
    margin: 0 0.25rem;
    transition: all 0.2s ease-in-out;
}

[data-theme="light-v3"] .navbar-dark .navbar-nav .nav-link:hover {
    background-color: var(--navbar-hover-bg);
    color: var(--primary-color);
}

[data-theme="light-v3"] .navbar-dark .navbar-nav .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--primary-color);
}

/* ── Dropdowns ── */
[data-theme="light-v3"] .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--dropdown-border);
}

[data-theme="light-v3"] .dropdown-item {
    color: var(--dropdown-link-color);
    border-radius: var(--border-radius-sm);
    margin: 0.25rem 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.15s ease-in-out;
}

[data-theme="light-v3"] .dropdown-item:hover,
[data-theme="light-v3"] .dropdown-item:focus {
    background-color: var(--dropdown-hover-bg);
    color: var(--dropdown-link-color);
}

[data-theme="light-v3"] .dropdown-item.active {
    background-color: var(--color-neutral-900);
    color: #ffffff;
}

[data-theme="light-v3"] .dropdown-divider {
    border-color: var(--card-border);
    margin: 0.5rem 0;
}

[data-theme="light-v3"] .dropdown-header {
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.5rem 1rem;
}

/* ── Modals ── */
[data-theme="light-v3"] .modal-content {
    background-color: var(--modal-bg);
    color: var(--bs-body-color);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-lg);
}

[data-theme="light-v3"] .modal-header {
    border-bottom-color: var(--card-border);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

[data-theme="light-v3"] .modal-footer {
    border-top-color: var(--card-border);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

/* ── Modal Headers — themed per design system ──
   Status headers use the tinted treatment (050 bg + 700 text + 500 border)
   matching badges/alerts/toasts; primary/dark headers use the brand near-black. */
[data-theme="light-v3"] .modal-header.bg-primary,
[data-theme="light-v3"] .modal-header.bg-dark {
    background-color: var(--color-neutral-900) !important;
    color: var(--color-bg-light) !important;
    border-bottom: 1px solid var(--color-neutral-900) !important;
}

[data-theme="light-v3"] .modal-header.bg-success {
    background-color: var(--color-success-050) !important;
    color: var(--color-success-700) !important;
    border-bottom: 1px solid var(--color-success-500) !important;
}

[data-theme="light-v3"] .modal-header.bg-info {
    background-color: var(--color-info-050) !important;
    color: var(--color-info-700) !important;
    border-bottom: 1px solid var(--color-info-500) !important;
}

[data-theme="light-v3"] .modal-header.bg-warning {
    background-color: var(--color-warning-050) !important;
    color: var(--color-warning-700) !important;
    border-bottom: 1px solid var(--color-warning-500) !important;
}

[data-theme="light-v3"] .modal-header.bg-danger {
    background-color: var(--color-error-050) !important;
    color: var(--color-error-700) !important;
    border-bottom: 1px solid var(--color-error-500) !important;
}

/* ── Alerts (tinted per design system) ── */
[data-theme="light-v3"] .alert {
    border-radius: var(--border-radius-card);
    border: 1px solid;
}

[data-theme="light-v3"] .alert-info {
    background-color: var(--color-info-050) !important;
    border-color: var(--color-info-500) !important;
    color: var(--color-info-700) !important;
}

[data-theme="light-v3"] .alert-success {
    background-color: var(--color-success-050) !important;
    border-color: var(--color-success-500) !important;
    color: var(--color-success-700) !important;
}

[data-theme="light-v3"] .alert-warning {
    background-color: var(--color-warning-050) !important;
    border-color: var(--color-warning-500) !important;
    color: var(--color-warning-700) !important;
}

[data-theme="light-v3"] .alert-danger {
    background-color: var(--color-error-050) !important;
    border-color: var(--color-error-500) !important;
    color: var(--color-error-700) !important;
}

/* ── Toast Notifications (tinted, matching design system) ── */
[data-theme="light-v3"] .toast {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-card) !important;
    box-shadow: var(--shadow-lg);
    color: var(--bs-body-color);
}

[data-theme="light-v3"] .toast.bg-success {
    background-color: var(--color-success-050) !important;
    border: 1px solid var(--color-success-500) !important;
    color: var(--color-success-700) !important;
}

[data-theme="light-v3"] .toast.bg-danger {
    background-color: var(--color-error-050) !important;
    border: 1px solid var(--color-error-500) !important;
    color: var(--color-error-700) !important;
}

[data-theme="light-v3"] .toast.bg-warning {
    background-color: var(--color-warning-050) !important;
    border: 1px solid var(--color-warning-500) !important;
    color: var(--color-warning-700) !important;
}

[data-theme="light-v3"] .toast.bg-info {
    background-color: var(--color-info-050) !important;
    border: 1px solid var(--color-info-500) !important;
    color: var(--color-info-700) !important;
}

/* Close button: dark on light tinted toast backgrounds.
   Only bg-success/danger/warning/info toasts are converted to light 050 tints
   above, so those get a dark close button. Dark toast surfaces (e.g. bg-primary
   which maps to neutral-900, or bg-dark) must keep the WHITE close button so it
   remains visible against the dark background. */
[data-theme="light-v3"] .toast.bg-success .btn-close-white,
[data-theme="light-v3"] .toast.bg-danger .btn-close-white,
[data-theme="light-v3"] .toast.bg-warning .btn-close-white,
[data-theme="light-v3"] .toast.bg-info .btn-close-white {
    filter: none;
    opacity: 0.65;
}

[data-theme="light-v3"] .toast.bg-success .btn-close-white:hover,
[data-theme="light-v3"] .toast.bg-danger .btn-close-white:hover,
[data-theme="light-v3"] .toast.bg-warning .btn-close-white:hover,
[data-theme="light-v3"] .toast.bg-info .btn-close-white:hover {
    opacity: 0.95;
}

/* ── Badges & Status Indicators (pill, tinted) ── */
[data-theme="light-v3"] .badge,
[data-theme="light-v3"] .pill-tag {
    border-radius: var(--border-radius) !important;
    padding: 0.4em 0.8em !important;
    font-weight: 600;
}

[data-theme="light-v3"] .badge.bg-primary {
    background-color: var(--color-neutral-900) !important;
    color: var(--color-bg-light) !important;
}

[data-theme="light-v3"] .badge.bg-secondary {
    background-color: var(--color-neutral-100) !important;
    color: var(--color-neutral-700) !important;
    border: 1px solid var(--color-neutral-300);
}

[data-theme="light-v3"] .badge.bg-success {
    background-color: var(--color-success-050) !important;
    color: var(--color-success-700) !important;
    border: 1px solid var(--color-success-500);
}

[data-theme="light-v3"] .badge.bg-danger {
    background-color: var(--color-error-050) !important;
    color: var(--color-error-700) !important;
    border: 1px solid var(--color-error-500);
}

[data-theme="light-v3"] .badge.bg-warning {
    background-color: var(--color-warning-050) !important;
    color: var(--color-warning-700) !important;
    border: 1px solid var(--color-warning-500);
}

[data-theme="light-v3"] .badge.bg-info {
    background-color: var(--color-info-050) !important;
    color: var(--color-info-700) !important;
    border: 1px solid var(--color-info-500);
}

/* ── List Groups ── */
[data-theme="light-v3"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--bs-body-color);
    border-radius: var(--border-radius-sm) !important;
    margin-bottom: 0.5rem;
}

[data-theme="light-v3"] .list-group-item:hover {
    background-color: var(--color-neutral-50);
}

[data-theme="light-v3"] .list-group-item.active {
    background-color: var(--color-neutral-900);
    border-color: var(--color-neutral-900);
    color: var(--color-bg-light);
}

/* ── Help Boxes ── */
[data-theme="light-v3"] .help-box {
    background: var(--help-box-bg);
    border: 1px solid var(--help-box-border);
    border-radius: var(--border-radius-card);
}

[data-theme="light-v3"] .help-box-title {
    color: var(--help-box-color);
}

[data-theme="light-v3"] .help-box-content {
    color: var(--bs-body-color);
}

/* ── Text utilities ── */
[data-theme="light-v3"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="light-v3"] a:not(.btn) {
    color: var(--link-color);
    transition: color 0.15s ease-in-out;
}

[data-theme="light-v3"] a:not(.btn):hover {
    color: var(--link-hover-color);
}

/* ── Footer ── */
[data-theme="light-v3"] footer {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--card-border);
}

/* ── Progress bars ── */
[data-theme="light-v3"] .progress {
    background-color: var(--color-neutral-200) !important;
    border-radius: var(--border-radius);
}

[data-theme="light-v3"] .progress-bar {
    background-color: var(--color-neutral-900) !important;
    color: #ffffff !important;
    border-radius: var(--border-radius);
}

/* ── Spinner ── */
[data-theme="light-v3"] .spinner-border {
    color: var(--primary-color);
}

/* ── Tooltips ── */
[data-theme="light-v3"] .tooltip-inner {
    background-color: var(--color-neutral-900) !important;
    color: var(--color-bg-light) !important;
    border-radius: var(--border-radius-sm);
}

/* ── Pagination ── */
[data-theme="light-v3"] .pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--bs-body-color);
    border-radius: var(--border-radius);
    margin: 0 0.25rem;
}

[data-theme="light-v3"] .pagination .page-link:hover {
    background-color: var(--dropdown-hover-bg);
    border-color: var(--card-border);
    color: var(--primary-color);
}

[data-theme="light-v3"] .pagination .page-item.active .page-link {
    background-color: var(--color-neutral-900);
    border-color: var(--color-neutral-900);
    color: var(--color-bg-light);
}

/* ── Tabs ── */
[data-theme="light-v3"] .nav-tabs {
    border-bottom-color: var(--card-border);
}

[data-theme="light-v3"] .nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

[data-theme="light-v3"] .nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-color: var(--card-border) var(--card-border) transparent;
}

[data-theme="light-v3"] .nav-tabs .nav-link.active {
    color: var(--bs-body-color);
    background-color: var(--card-bg);
    border-color: var(--card-border) var(--card-border) transparent;
}

/* ── Nav Pills ── */
[data-theme="light-v3"] .nav-pills .nav-link {
    color: var(--text-muted);
    border-radius: var(--border-radius);
}

[data-theme="light-v3"] .nav-pills .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

[data-theme="light-v3"] .nav-pills .nav-link.active {
    color: var(--color-bg-light);
    background-color: var(--color-neutral-900);
}

/* ── Select2 styling ── */
[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    border-radius: var(--border-radius) !important;
    color: var(--bs-body-color) !important;
}

/* Multi-select: the tag container must NOT be a pill (9999px makes it a giant
   circular box). Use a subtle corner so it reads as a normal form field. */
[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-selection.select2-selection--multiple {
    border-radius: 0.5rem !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-theme="light-v3"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--input-focus-border) !important;
    box-shadow: var(--input-focus-shadow) !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
    border-radius: var(--border-radius-card) !important;
    box-shadow: var(--shadow-lg) !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--dropdown-link-color) !important;
    background-color: var(--dropdown-bg) !important;
    border-radius: var(--border-radius-sm);
    margin: 0.25rem 0.5rem;
    padding: 0.5rem 0.75rem;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--dropdown-hover-bg) !important;
    color: var(--dropdown-link-color) !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-neutral-900) !important;
    border-color: var(--color-neutral-900) !important;
    color: var(--color-bg-light) !important;
    border-radius: 0.5rem !important;  /* subtle tag corner (was pill 9999px) */
    padding: 0.25rem 0.6rem;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-search__field {
    color: var(--bs-body-color) !important;
}

[data-theme="light-v3"] .select2-container--bootstrap-5 .select2-search__field::placeholder {
    color: var(--text-muted) !important;
}

/* ── FullCalendar ── */
[data-theme="light-v3"] .fc {
    color: var(--bs-body-color);
}

[data-theme="light-v3"] .fc .fc-button {
    background-color: var(--color-neutral-900);
    border-color: var(--color-neutral-900);
    border-radius: var(--border-radius);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

[data-theme="light-v3"] .fc .fc-button:hover {
    background-color: var(--color-neutral-700);
    border-color: var(--color-neutral-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="light-v3"] .fc .fc-button:active {
    transform: translateY(0);
}

[data-theme="light-v3"] .fc .fc-daygrid-day {
    border-color: var(--card-border);
}

[data-theme="light-v3"] .fc .fc-col-header-cell {
    background-color: var(--color-neutral-50);
    border-color: var(--card-border);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

[data-theme="light-v3"] .fc .fc-scrollgrid {
    border-color: var(--card-border);
}

[data-theme="light-v3"] .fc-theme-standard td,
[data-theme="light-v3"] .fc-theme-standard th {
    border-color: var(--card-border);
}

/* ── Utility classes ── */
[data-theme="light-v3"] .bg-light {
    background-color: var(--color-neutral-100) !important;
}

[data-theme="light-v3"] .text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light-v3"] .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

[data-theme="light-v3"] .shadow {
    box-shadow: var(--shadow) !important;
}

[data-theme="light-v3"] .shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT & COMPONENT RE-STYLES (Adesto Design System)
   ═══════════════════════════════════════════════════════════ */

/* ── Dark Slate Sidebar & Light Navigation Text ── */
/* Note: intentionally scoped to the exact `.sidebar` component class only.
   The earlier `[class*="sidebar"]` substring selector accidentally styled any
   element whose class merely CONTAINED "sidebar" (e.g. `.doc-details-sidebar`
   on the compliance page) with the dark slate background. */
[data-theme="light-v3"] .sidebar {
    background-color: var(--sidebar-bg) !important;
    color: var(--color-bg-light) !important;
}

[data-theme="light-v3"] .sidebar a,
[data-theme="light-v3"] .sidebar .nav-link {
    color: var(--color-neutral-400) !important;
}

[data-theme="light-v3"] .sidebar a:hover,
[data-theme="light-v3"] .sidebar .nav-link.active,
[data-theme="light-v3"] .sidebar .nav-link:hover {
    color: var(--color-bg-light) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--border-radius-sm) !important;
}

/* ── Accent KPI Cards (Primary = Neutral-900) ──
   Solid accent applies only to dedicated accent cards (card-accent-coral) or plain
   bg-primary cards WITHOUT an opacity modifier. Cards using `bg-primary bg-opacity-*`
   are tinted variants and must not be forced solid. */
[data-theme="light-v3"] .card.bg-primary:not([class*="bg-opacity-"]),
[data-theme="light-v3"] .card-accent-coral {
    background-color: var(--color-neutral-900) !important;
    color: var(--color-bg-light) !important;
}

[data-theme="light-v3"] .card.bg-primary:not([class*="bg-opacity-"]) .text-muted,
[data-theme="light-v3"] .card-accent-coral .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Pill Buttons & Controls ── */
[data-theme="light-v3"] .btn {
    border-radius: var(--border-radius) !important;
    font-weight: 600;
    padding: 0.5rem 1.25rem !important;
}

[data-theme="light-v3"] .btn-primary {
    background-color: var(--color-neutral-900) !important;
    border-color: var(--color-neutral-900) !important;
    color: var(--color-bg-light) !important;
}

[data-theme="light-v3"] .btn-primary:hover {
    background-color: var(--color-neutral-700) !important;
    border-color: var(--color-neutral-700) !important;
}

/* ── Search Bars & Input Pills ── */
[data-theme="light-v3"] .form-control,
[data-theme="light-v3"] .form-select {
    border-radius: var(--border-radius) !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* ── Badges & Status Indicators ── */
[data-theme="light-v3"] .badge {
    border-radius: var(--border-radius) !important;
    padding: 0.4em 0.8em !important;
    font-weight: 600;
}