/* Accessible Color Scheme for Pension Portal */

:root {
    /* Primary Colors */
    --primary-dark: #002F56; /* Dark Blue - Company color */
    --primary-light: #035FA5; /* Lighter blue for links - matches main site */
    --primary-lightest: #E5EAF5; /* Very light blue for subtle backgrounds */
    /* Secondary Colors */
    --secondary: #F9A825; /* Gold - Company color */
    --secondary-dark: #C88D00; /* Darker gold for better contrast on light backgrounds */
    --secondary-light: #FFF3D6; /* Light gold for subtle backgrounds */
    /* Neutral Colors */
    --neutral-darkest: #14171D; /* Near black for high contrast text */
    --neutral-dark: #333D4D; /* Dark gray for body text */
    --neutral-medium: #5A6478; /* Medium gray for secondary text - 5.7:1 on card backgrounds */
    --neutral-light: #E5EBF0; /* Light gray for borders */
    --neutral-lightest: #F9FAFB; /* Near white for backgrounds */
    /* Success/Error States */
    --success: #00693E; /* Darker green for success messages - improved contrast */
    --success-light: #E5F4EE; /* Light green background */
    --error: #CF2E2E; /* Dark red for error messages */
    --error-light: #FBEDED; /* Light red background */
    --warning: #B45309; /* Dark orange for warnings - accessible against light backgrounds */
    --warning-light: #FEF5E7; /* Light orange background */
    /* High contrast versions of these colors */
    --high-contrast-success: #003C20; /* Even darker green for 10:1+ contrast */
    --high-contrast-success-light: #F0F9F4; /* Whiter background for status areas */
    --high-contrast-error: #9A0000; /* Darker red for 10:1+ contrast */
    --high-contrast-error-light: #FFF8F8; /* Whiter background for status areas */
    --high-contrast-warning: #803700; /* Darker orange for 10:1+ contrast */
    --high-contrast-warning-light: #FFF9F0; /* Whiter background for status areas */
    --high-contrast-secondary: #7A4600; /* Much darker gold for 10:1+ contrast on buttons */
    /* Focus State */
    --focus-ring: #F9A825; /* Gold for keyboard focus indicators */
    
    /* Border Radius */
    --radius-sm: 0.25rem; /* 4px - Small elements (badges, small buttons) */
    --radius-md: 0.375rem; /* 6px - Medium elements (standard buttons, inputs) */
    --radius-lg: 0.5rem; /* 8px - Large elements (cards, alerts, modals) */
    --radius-xl: 0.75rem; /* 12px - Extra large elements */
    --radius-pill: 50rem; /* Pill-shaped elements (accent buttons) */
    --radius-circle: 50%; /* Circular elements (avatars, icons) */

    /* Accent Colors */
    --footer-accent-border: #7B98BB; /* Dusty blue for footer border (from main site) */
    --teal-accent: #00737c; /* Teal used in gradients (navbar, secondary cards) */

    --heading-color: var(--primary-dark);
    --form-label-color: var(--primary-dark);
    --link-color: var(--primary-light);

    /* Text color for use on gold/yellow backgrounds. Literal value intentional — must NOT reference
       --neutral-darkest here, as CSS variables resolve lazily and would still invert in dark mode.
       NOT redefined in the dark-mode block, so this stays dark in all modes. */
    --color-on-gold: #14171D;
}

/* Color Contrast Ratios (WCAG AA requires 4.5:1 for normal text, 3:1 for large text) */

/* Text Colors - All provide at least 4.5:1 contrast */
.text-primary {
    color: var(--primary-dark);   /* 14.5:1 against white */
}

.text-secondary {
    color: var(--secondary-dark); /* 4.6:1 against white */
}

.text-body {
    color: var(--neutral-dark);   /* 10.7:1 against white */
}

.text-subtle {
    color: var(--neutral-medium); /* 5.7:1 against card backgrounds */
}

.text-light {
    color: white;                 /* Use on dark backgrounds */
}

/* Background Colors */
.bg-primary {
    background-color: var(--primary-dark);
    color: white;                 /* White text on dark blue - 14.5:1 contrast */
}

.bg-primary-light {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);   /* Dark blue on light blue - 13.8:1 contrast */
}

.bg-secondary {
    background-color: var(--secondary);
    color: var(--neutral-darkest); /* Near black on gold - 10.3:1 contrast */
}

.bg-secondary-light {
    background-color: var(--secondary-light);
    color: var(--neutral-darkest); /* Near black on light gold - 16.7:1 contrast */
}

.bg-light {
    background-color: var(--neutral-lightest);
    color: var(--neutral-dark);   /* Dark gray on near white - 10.7:1 contrast */
}

/* Button Styles */
.btn-primary {
    background-color: var(--primary-dark);
    color: white;                 /* 14.5:1 contrast */
    border: none;
}

.btn-primary:hover {
    background-color: var(--primary-light);
    color: white;                 /* 5.8:1 contrast */
}

.btn-secondary {
    background-color: var(--secondary-dark);
    color: var(--neutral-darkest); /* Dark on gold in light mode (6.2:1); resolves to white in dark mode (10.6:1) */
    border: none;
}

.btn-secondary:hover {
    background-color: var(--secondary);
    color: var(--neutral-darkest); /* Dark on bright gold in light mode (9.1:1) */
}

.btn-outline-primary {
    border: 2px solid var(--primary-dark);
    color: var(--primary-dark);   /* 14.5:1 against white */
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--primary-dark);
    color: white;                 /* 14.5:1 contrast */
}

/* btn-outline-secondary: Bootstrap default #6c757d fails 4.5:1 in both light (4.48:1) and dark (3.82:1).
   Use --neutral-dark which adapts: #333D4D in light mode (13.6:1 on white), #F5F7FA in dark mode (12.8:1 on dark). */
.btn-outline-secondary {
    color: var(--neutral-dark);
    border-color: var(--neutral-dark);
}

.btn-outline-secondary:hover {
    background-color: var(--neutral-dark);
    color: var(--neutral-lightest);
    border-color: var(--neutral-dark);
}

/* Focus States for Accessibility */
:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Links */
a {
    color: var(--primary-light);  /* 4.6:1 against white backgrounds */
    text-decoration: underline;   /* Always underline links for accessibility */
}

a:hover {
    color: var(--primary-dark);   /* 14.5:1 against white */
    text-decoration: underline;
}

/* Feedback States */
.alert-success {
    background-color: var(--success-light);
    color: var(--success);        /* 5.3:1 contrast */
    border: 4px solid var(--success);
}

.alert-danger {
    background-color: var(--error-light);
    color: var(--error);          /* 5.2:1 contrast */
    border: 4px solid var(--error);
}

.alert-warning {
    background-color: var(--warning-light);
    color: var(--warning);        /* 4.9:1 contrast */
    border: 4px solid var(--warning);
}

.alert-info {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);   /* High contrast */
    border: 4px solid var(--primary-light);
}

/* High Contrast Mode */
.high-contrast {
    /* Primary colors with extreme contrast */
    --primary-dark: #001F56;      /* Deeper blue for maximum contrast */
    --primary-light: #0037A5;     /* Darker blue for links (ensures 10:1+ contrast) */
    --primary-lightest: #F0F5FF;  /* Much lighter blue bg for better contrast with text */
    
    /* Secondary colors with extreme contrast */
    --secondary: #7A4600;         /* Much darker gold for 10:1+ contrast on secondary elements */
    --secondary-dark: #5E3500;    /* Very dark gold for maximum contrast */
    --secondary-light: #FFF8E6;   /* Whiter gold bg for better contrast */
    
    /* Neutral colors with increased separation */
    --neutral-darkest: #000000;   /* Pure black for max contrast */
    --neutral-dark: #121212;      /* Very dark gray for body text */
    --neutral-medium: #2F2F2F;    /* Darker medium gray for better contrast */
    --neutral-light: #888888;     /* Medium gray for borders */
    --neutral-lightest: #FFFFFF;  /* Pure white for max contrast */
    
    /* Status colors with extreme contrast */
    --success: var(--high-contrast-success);       /* Very dark green */
    --success-light: var(--high-contrast-success-light); /* Whiter green background */
    --error: var(--high-contrast-error);           /* Deeper red */
    --error-light: var(--high-contrast-error-light); /* Whiter red background */
    --warning: var(--high-contrast-warning);       /* Deeper orange */
    --warning-light: var(--high-contrast-warning-light); /* Whiter orange background */
    
    /* Override button colors in high contrast mode to ensure 10:1+ contrast */
    .btn-secondary {
        background-color: var(--secondary-dark);
        color: white !important;  /* Override to ensure white text on dark background */
    }
    
    .btn-secondary:hover {
        background-color: var(--secondary);
        color: white !important;  /* Override to ensure white text on dark background */
    }
    
    /* Override alert text in high contrast mode */
    .alert-success {
        color: white !important;
        background-color: var(--success);
    }
    
    .alert-danger {
        color: white !important;
        background-color: var(--error);
    }
    
    .alert-warning {
        color: white !important;
        background-color: var(--warning);
    }
    
    .alert-info {
        color: white !important;
        background-color: var(--primary-light);
    }
}

/* ===== Global Accessibility Enhancements ===== */
/* These rules improve readability and usability for retirement-age users */

body {
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.border {
    border-width: 2px !important;
}

.card,
main form {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
}

.card, .alert, .form-control {
    border-width: 2px !important;
}

:focus {
    outline-width: 4px !important;
    outline-offset: 2px !important;
}

a {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-thickness: 2px !important;
}

.btn {
    border-width: 2px !important;
    font-weight: 600 !important;
}

.form-label, .btn, .nav-link {
    font-size: 1.1rem !important;
}

.nav-link.active {
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px var(--primary-dark) !important;
}

/* Active Navigation Items */
.nav-link.active {
    background-color: var(--primary-dark);
    color: white;                 /* 14.5:1 contrast */
    font-weight: 500;
}

.nav-link:hover:not(.active) {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);   /* 13.8:1 contrast */
}

/* Form Controls */
.form-control {
    border: 2px solid var(--neutral-light);
}

.form-control:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 0.25rem rgba(249, 168, 37, 0.25);
}

.sidebar {
    background-color: var(--neutral-lightest);
/*    border-right: 1px solid var(--neutral-light);*/
}

.sidebar-header {
    background-color: var(--primary-lightest);
}

.sidebar-footer {
    background-color: var(--neutral-lightest);
}

:root.dark-mode {
    /* Brand Colors - Keep consistent */
    --primary-dark: #002F56; /* Company dark blue stays the same */
    --primary-light: #3C75C5; /* Slightly lighter for hover/link */
    --primary-lightest: #E5EAF5; /* Soft light blue for contrast backgrounds */

    --secondary: #F9A825; /* Gold stays readable on dark backgrounds */
    --secondary-dark: #5E3500; /* Even darker for hover/focus */
    --secondary-light: #F9A825; /* Regular gold now treated as "light" */
    /* Neutrals - Inverted for dark background */
    --neutral-darkest: #FFFFFF;
    --neutral-dark: #F5F7FA;
    --neutral-medium: #CDD5E1;
    --neutral-light: #333D4D;
    --neutral-lightest: #14171D; /* Dark background */
    --neutral-border: #4a4a5a;
    /* Status Colors - Use high contrast */
    --success: #2B9D6E;
    --error: #CF2E2E;
    --warning: #B45309;
    /* --warning (#B45309) is only 3.57:1 on dark backgrounds — insufficient for text.
       Override Bootstrap's text-emphasis variable so .text-warning uses gold (~7:1) in dark mode. */
    --bs-warning-text-emphasis: var(--secondary);
    /* --success (#2B9D6E) is only 2:1 on dark list-group backgrounds (#333D4D) — insufficient for text.
       #6EE7A0 is a light mint green that passes 4.5:1 on all dark backgrounds used in this scheme. */
    --bs-success-text-emphasis: #6EE7A0;
    /* Base background/text */
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    --heading-color: var(--neutral-dark);
    --form-label-color: var(--neutral-dark);
    --link-color: var(--secondary-light);
}
    :root.dark-mode .sidebar {
        background-color: var(--neutral-lightest) !important; /* dark background in dark mode */
    }


.dark-mode .card {
    box-shadow: none;
}

/* btn-secondary hover: bright gold background needs dark text in dark mode (white would fail at 1.97:1) */
:root.dark-mode .btn-secondary:hover {
    color: var(--color-on-gold) !important;
}

/* Links: --primary-light (#3C75C5) fails on dark card backgrounds (3.88:1). Use light blue instead.
   Exclude .btn elements - they manage their own text color and must not inherit this override. */
:root.dark-mode a:not(.btn) {
    color: #6EA8FE; /* 7.45:1 on dark card background #14171D */
}

:root.dark-mode a:not(.btn):hover {
    color: #9EC5FE; /* Lighter blue on hover */
}

/* === DARK MODE SIDEBAR OVERRIDES === */
:root.dark-mode .sidebar-link {
    background-color: transparent;
    color: var(--neutral-darkest);
    border-left: 4px solid transparent;
}

    :root.dark-mode .sidebar-link:hover,
    :root.dark-mode .sidebar-link:focus {
        background-color: var(--neutral-light);
        color: var(--secondary);
    }

    :root.dark-mode .sidebar-link.active,
    :root.dark-mode .sidebar-link.@Html.IsActive {
        background-color: var(--primary-dark);
        border-left: 4px solid var(--secondary);
        color: white;
        font-weight: bold;
    }

    :root.dark-mode .sidebar-link i {
        color: var(--secondary);
    }

/* URGENT FIX: Add this CSS to force proper contrast on tables in dark mode */
/* Place this at the END of your color-scheme.css file to override conflicting rules */

/* === FORCE PROPER TABLE CONTRAST IN DARK MODE === */
:root.dark-mode .table,
:root.dark-mode .table tbody,
:root.dark-mode .table tbody tr,
:root.dark-mode .table tbody td,
:root.dark-mode .table tbody th {
    background-color: #2b2b3f !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border-color: var(--neutral-border) !important; /* Visible borders */
}

    /* Force header styling */
    :root.dark-mode .table thead,
    :root.dark-mode .table thead tr,
    :root.dark-mode .table thead th {
        background-color: #002F56 !important; /* Company blue */
        color: #ffffff !important; /* White text */
        border-color: var(--neutral-border) !important;
    }

/* Force striping to be visible */
:root.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #353550 !important; /* Slightly lighter dark */
}

:root.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #2b2b3f !important; /* Standard dark */
}

/* Force hover effects */
:root.dark-mode .table-hover > tbody > tr:hover > td {
    background-color: #4a5568 !important;
    color: #ffffff !important;
}

/* Fix card backgrounds that contain tables */
:root.dark-mode .card {
    background-color: var(--neutral-lightest) !important;
    color: #ffffff !important;
/*    border: 2px solid var(--neutral-border) !important;*/
    box-shadow: none !important;
}

:root.dark-mode .card-body {
    background-color: var(--neutral-lightest) !important;
    color: #ffffff !important;
}

/* Generic card headers in dark mode (only apply to headers without Bootstrap bg- classes or gradient classes) */
:root.dark-mode .card-header:not([class*="gradient"]):not([class*="bg-"]) {
    background-color: #002F56 !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

/* Dark mode card headers with Bootstrap bg- utility classes - maintain distinct colors */
:root.dark-mode .card-header.bg-primary {
    background-color: #002F56 !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .card-header.bg-secondary {
    background-color: #7A4600 !important; /* Dark amber - white gives 7.76:1 */
    color: #ffffff !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .card-header.bg-success {
    background-color: #00693E !important; /* Keep the success green */
    color: #ffffff !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .card-header.bg-danger {
    background-color: #CF2E2E !important; /* Keep the error red */
    color: #ffffff !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .card-header.bg-warning {
    background-color: #B45309 !important; /* Darker orange for dark mode */
    color: #ffffff !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .card-header.bg-info {
    background-color: #00737c !important; /* Dark teal - white gives 5.68:1 */
    color: #ffffff !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

/* border-info card: Bootstrap uses --bs-info-rgb (#035FA5) for border utility class, but our dark mode
   card header overrides bg-info to teal (#00737c). Sync the card border to match the header. */
:root.dark-mode .card.border-info {
    border-color: var(--teal-accent) !important; /* #00737c - matches dark mode bg-info card header */
}

/* Note: border-radius for .card-header is defined in site.css and applies to both light and dark modes */

/* bg-light on non-card elements: Bootstrap's .bg-light applies background-color !important which our
   .card dark mode rule doesn't reach (only targets .card itself). Target div/.card-footer elements
   to prevent jarring light backgrounds on dark pages. Excludes badges, buttons, and table headers
   which have their own handling or need to stay light for correct contrast. */
:root.dark-mode div.bg-light:not(.card),
:root.dark-mode .card-footer.bg-light {
    background-color: var(--neutral-light) !important; /* #333D4D */
    color: var(--neutral-darkest) !important; /* #FFFFFF */
}

/* Force text color for any text inside tables */
:root.dark-mode .table td,
:root.dark-mode .table th,
:root.dark-mode .table td *,
:root.dark-mode .table th * {
    color: #ffffff !important;
}

/* Exception for buttons inside tables - keep their original styling */
:root.dark-mode .table .btn {
    color: white !important;
    background-color: #002F56 !important;
}

    :root.dark-mode .table .btn:hover {
        background-color: #F9A825 !important;
        color: #002F56 !important;
    }

/* Fix modal content contrast in dark mode */
:root.dark-mode .modal-content {
    background-color: var(--neutral-lightest) !important; /* Dark background */
    color: var(--neutral-darkest) !important; /* White text */
    border-color: var(--neutral-light) !important;
}

/* Fix modal header contrast */
:root.dark-mode .modal-header {
    background-color: var(--primary-dark) !important; /* Keep company blue */
    color: white !important;
    border-bottom: 1px solid var(--neutral-light) !important;
}

/* Fix modal body contrast */
:root.dark-mode .modal-body {
    background-color: var(--neutral-lightest) !important; /* Dark background */
    color: var(--neutral-darkest) !important; /* White text */
}

/* Fix modal footer contrast */
:root.dark-mode .modal-footer {
    background-color: var(--neutral-lightest) !important;
    color: var(--neutral-darkest) !important;
    border-top: 1px solid var(--neutral-light) !important;
}

/* Fix specific elements in the details modal */
:root.dark-mode .modal-body h6 {
    color: var(--secondary) !important; /* Gold headings for better hierarchy */
}

:root.dark-mode .modal-body p,
:root.dark-mode .modal-body pre {
    color: var(--neutral-darkest) !important; /* White text */
    background-color: var(--neutral-light) !important; /* Slightly lighter dark background for pre */
}

/* Fix the metadata pre block specifically */
:root.dark-mode #detailsMetadata {
    background-color: var(--neutral-light) !important;
    color: var(--neutral-darkest) !important;
    border: 1px solid var(--neutral-medium) !important;
}

/* Fix user agent paragraph */
:root.dark-mode #detailsUserAgent {
    color: var(--neutral-medium) !important; /* Slightly muted but still readable */
}

/* Ensure modal backdrop works properly */
:root.dark-mode .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Fix close button in dark mode */
:root.dark-mode .modal-header .btn-close {
    filter: invert(1) !important; /* Make close button visible on dark header */
}

/* ===== Bootstrap Variable Overrides ===== */
/* Override Bootstrap's default colors with our company color scheme */
:root, [data-bs-theme=light] {
    /* Override primary/secondary to match company colors */
    --bs-primary: #002F56; /* Company dark blue */
    --bs-primary-rgb: 0, 47, 86;
    --bs-secondary: #F9A825; /* Company gold */
    --bs-secondary-rgb: 249, 168, 37;
    
    /* Override success/danger/warning with accessible colors */
    --bs-success: #00693E; /* Our accessible green */
    --bs-success-rgb: 0, 105, 62;
    --bs-danger: #CF2E2E; /* Our accessible red */
    --bs-danger-rgb: 207, 46, 46;
    --bs-warning: #B45309; /* Our accessible orange */
    --bs-warning-rgb: 180, 83, 9;
    
    /* Override info with our primary light blue */
    --bs-info: #035FA5;
    --bs-info-rgb: 3, 95, 165;
    
    /* Override gray scale with our neutral colors */
    --bs-gray: #5A6478; /* Our neutral-medium */
    --bs-gray-600: #5A6478;
    --bs-gray-700: #333D4D; /* Our neutral-dark */
    --bs-gray-800: #14171D; /* Our neutral-darkest */
    --bs-gray-900: #14171D;
    
    /* Override emphasis colors */
    --bs-primary-text-emphasis: #002F56;
    --bs-success-text-emphasis: #00693E;
    --bs-danger-text-emphasis: #CF2E2E;
    --bs-warning-text-emphasis: #B45309;
    --bs-info-text-emphasis: #035FA5;
    
    /* Override subtle background colors */
    --bs-primary-bg-subtle: #E5EAF5; /* Our primary-lightest */
    --bs-success-bg-subtle: #E5F4EE; /* Our success-light */
    --bs-danger-bg-subtle: #FBEDED; /* Our error-light */
    --bs-warning-bg-subtle: #FEF5E7; /* Our warning-light */
    --bs-secondary-bg-subtle: #FFF3D6; /* Our secondary-light */
}

/* ===== Badge Styling Overrides ===== */
/* Override Bootstrap badge colors to match company scheme */

/* Warning/Pending badges - Muted gold for softer appearance */
.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--secondary-light) !important;
    color: var(--neutral-darkest) !important;
}

/* Primary badges - Company dark blue */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--primary-dark) !important;
    color: white !important;
}

/* Success badges - Company green */
.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--success) !important;
    color: white !important;
}

/* Danger badges - Company error red */
.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--error) !important;
    color: white !important;
}

/* Secondary badges - Company gold */
.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--neutral-darkest) !important;
}

/* Info badges - Company light blue */
.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--primary-light) !important;
    color: white !important;
}

/* Dark mode badge overrides */

/* Success badges: dark mode --success (#2B9D6E) only gives 3.41:1 with white. Use darker green. */
:root.dark-mode .badge.bg-success,
:root.dark-mode .badge.text-bg-success {
    background-color: #00693E !important; /* 6.79:1 with white */
    color: white !important;
}

/* Secondary badges: dark mode --secondary is #F9A825 (gold), --neutral-darkest is white = 1.97:1 fail.
   Use var(--color-on-gold) (#14171D literal, never inverts) = 10.3:1 on gold. */
:root.dark-mode .badge.bg-secondary,
:root.dark-mode .badge.text-bg-secondary {
    background-color: var(--secondary) !important; /* #F9A825 gold */
    color: var(--color-on-gold) !important; /* #14171D - 10.3:1 on gold */
}

/* Warning badges: same issue as secondary - gold background, dark mode neutral-darkest = white = 1.97:1. */
:root.dark-mode .badge.bg-warning,
:root.dark-mode .badge.text-bg-warning {
    background-color: var(--secondary-light) !important; /* #F9A825 gold in dark mode */
    color: var(--color-on-gold) !important; /* #14171D literal - 10.3:1 on gold */
}

/* ===== Dark Mode Text Utilities ===== */
/* Bootstrap .text-muted default (#6c757d) = 4.48:1 on white — just below WCAG AA 4.5:1.
   Override globally to neutral-medium (#5A6478) which gives 5.7:1. */
.text-muted {
    color: var(--neutral-medium) !important; /* #5A6478 = 5.7:1 on white */
}

/* Ensure muted text has proper contrast in dark mode */
:root.dark-mode .text-muted {
    color: var(--neutral-medium) !important; /* Light gray in dark mode (#CDD5E1) - 12.8:1 contrast */
}

/* Bootstrap's form-text helper text - ensure proper contrast in dark mode */
:root.dark-mode .form-text {
    color: var(--neutral-medium) !important; /* Light gray in dark mode (#CDD5E1) - 12.8:1 contrast */
}

/* Bootstrap's .text-X utilities use rgba(--bs-X-rgb) !important, not --bs-X-text-emphasis.
   Variables alone have no effect — direct class overrides are required for each. */

:root.dark-mode .text-success {
    color: var(--bs-success-text-emphasis) !important; /* #6EE7A0 = ~8:1 on dark bg */
}

/* --bs-primary-rgb: 0, 47, 86 → #002F56 = ~1.04:1 on dark bg. Override to accessible blue. */
:root.dark-mode .text-primary {
    color: #6EA8FE !important; /* 7.45:1 on #14171D */
}

/* --bs-info-rgb: 3, 95, 165 → #035FA5 = ~3.17:1 on dark bg. Override to light cyan. */
:root.dark-mode .text-info {
    color: #6EDFF6 !important; /* ~10.6:1 on #14171D */
}

/* --bs-warning-rgb: 180, 83, 9 → #B45309 = ~3.57:1 on dark bg. Override to gold. */
:root.dark-mode .text-warning {
    color: var(--bs-warning-text-emphasis) !important; /* #F9A825 = ~7:1 on dark bg */
}

/* --bs-dark-rgb: 33, 37, 41 → #212529 = ~1.06:1 on dark bg. Override to white. */
:root.dark-mode .text-dark {
    color: var(--neutral-darkest) !important; /* #FFFFFF */
}

/* ===== Form Placeholder Styles ===== */
/* General placeholder styling for all form controls */
.form-control::placeholder,
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--neutral-medium); /* #6C7A90 in light mode - 4.52:1 contrast */
    opacity: 0.8; /* Reduced opacity for placeholder appearance */
}

/* Dark mode form controls - ensure visible against dark background */
:root.dark-mode .form-control,
:root.dark-mode input[type="text"],
:root.dark-mode input[type="email"],
:root.dark-mode input[type="password"],
:root.dark-mode input[type="tel"],
:root.dark-mode input[type="number"],
:root.dark-mode textarea,
:root.dark-mode select {
    background-color: #2d3748 !important; /* Visible gray, distinct from page background */
    color: #ffffff !important; /* White text */
    border-color: #4a5568 !important; /* Medium gray border */
}

:root.dark-mode .form-control:focus,
:root.dark-mode input:focus,
:root.dark-mode textarea:focus,
:root.dark-mode select:focus {
    background-color: #2d3748 !important;
    border-color: var(--secondary) !important; /* Gold focus border */
    color: #ffffff !important;
}

:root.dark-mode .form-control:disabled,
:root.dark-mode input:disabled,
:root.dark-mode textarea:disabled,
:root.dark-mode select:disabled {
    background-color: #1a202c !important; /* Darker for disabled state */
    color: #a0aec0 !important; /* Muted text */
    border-color: #2d3748 !important;
    opacity: 0.6;
}

/* Dark mode placeholder styling - ensure proper contrast */
:root.dark-mode .form-control::placeholder,
:root.dark-mode input::placeholder,
:root.dark-mode textarea::placeholder,
:root.dark-mode select::placeholder {
    color: #a0aec0 !important; /* Medium gray - clearly visible but distinguishable from input text */
    opacity: 1; /* Full opacity, color is already appropriately muted */
}

/* ===== Form Validation Messages ===== */
/* Ensure validation error messages have proper contrast in dark mode */
:root.dark-mode .text-danger,
:root.dark-mode .invalid-feedback,
:root.dark-mode .field-validation-error {
    color: #ff6b6b !important; /* Lighter red for dark mode - better contrast on dark backgrounds */
}


/* Prevent validation messages from being too small - visibility is critical */
.text-danger.small,
.invalid-feedback.small,
.field-validation-error.small,
span[asp-validation-for].small {
    font-size: 0.9rem !important; /* Larger than Bootstrap's small (0.875rem) */
}

/* ===== Identity Area Accessibility Fixes ===== */

/* btn-link buttons should always be clearly identifiable as links */
.btn-link {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-thickness: 1px !important;
}

.btn-link:hover {
    text-decoration-thickness: 2px !important;
}

/* Small text with text-subtle has insufficient contrast - override to darker color */
.text-subtle.small,
small.text-subtle,
.small .text-subtle {
    color: var(--neutral-dark) !important; /* Darker gray: 10.7:1 contrast instead of 4.52:1 */
}

/* Table cells with text-subtle need better contrast for readability */
td .text-subtle,
th .text-subtle {
    color: var(--neutral-dark) !important; /* 10.7:1 contrast for table data */
}

/* Form help text combined with small tag - ensure readable */
.form-text.small,
small.form-text {
    color: var(--neutral-dark) !important;
    font-size: 0.9rem !important;
}

/* Headings should never use text-subtle - too low contrast for emphasis */
h1.text-subtle,
h2.text-subtle,
h3.text-subtle,
h4.text-subtle,
h5.text-subtle,
h6.text-subtle {
    color: var(--neutral-dark) !important;
}

/* Empty state messages should be clearly visible */
.text-center.text-muted,
.text-muted.py-4 {
    color: var(--neutral-dark) !important;
}

/* Code elements: Bootstrap default #d63384 (pink) fails 4.5:1 on page backgrounds.
   Use neutral-dark which adapts: #333D4D in light mode (13.6:1 on #f9fafb), #F5F7FA in dark mode (12.8:1 on #14171d). */
code {
    color: var(--neutral-dark);
}

/* Breadcrumb active item: Bootstrap default uses --bs-secondary-color which in our dark mode is
   near-black (#1e2226) on dark background (#14171d) = 1.12:1 fail. Use neutral-medium (#CDD5E1 in dark mode). */
:root.dark-mode .breadcrumb-item.active {
    color: var(--neutral-medium);
}

/* alert-primary: Bootstrap uses --bs-primary-bg-subtle (#E5EAF5) as background, which we don't override
   in dark mode. Our a:not(.btn) dark mode rule applies #6EA8FE on that light background = 2:1 fail.
   Use the standard dark background so #6EA8FE links get 7.2:1 contrast instead. */
:root.dark-mode .alert-primary {
    background-color: var(--neutral-lightest); /* #14171D */
    color: var(--neutral-darkest); /* #FFFFFF */
    border-color: var(--primary-light); /* #3C75C5 in dark mode */
}

/* alert-info: same issue — our .alert-info rule sets --primary-lightest (#E5EAF5) background which
   stays light in dark mode. Produces a jarring light island on the dark page, and any links inside
   get #6EA8FE which fails on the light bg. Use standard dark background instead. */
:root.dark-mode .alert-info {
    background-color: var(--neutral-lightest); /* #14171D */
    color: var(--neutral-darkest); /* #FFFFFF */
    border-color: var(--teal-accent); /* #00737c — matches info card secondary teal */
}

/* alert-success/danger/warning: our light-mode rules set light backgrounds (#E5F4EE, #FBEDED, #FEF5E7)
   which are not overridden in dark mode. Any element with dark-mode body text (#FFFFFF) inside these
   alerts gets near-zero contrast against the retained light backgrounds (~1:1). Flip to dark bg. */
:root.dark-mode .alert-success {
    background-color: var(--neutral-lightest); /* #14171D */
    color: var(--neutral-darkest); /* #FFFFFF */
    border-color: var(--success); /* #2B9D6E in dark mode */
}

:root.dark-mode .alert-danger {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    border-color: var(--error); /* #CF2E2E */
}

:root.dark-mode .alert-warning {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    border-color: var(--warning); /* #B45309 */
}

/* Pagination: Bootstrap defaults leave light backgrounds (#fff / #e9ecef) unoverridden in dark mode,
   while our a:not(.btn) rule applies #6EA8FE link color, producing as low as 2.03:1 contrast.
   Override all pagination states to use our dark palette. */
:root.dark-mode .pagination .page-link {
    background-color: var(--neutral-light); /* #333D4D */
    border-color: var(--neutral-border);
    color: var(--neutral-darkest); /* #FFFFFF - 12.8:1 on #333D4D */
}

:root.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

:root.dark-mode .pagination .page-item.disabled .page-link {
    background-color: var(--neutral-lightest); /* #14171D */
    border-color: var(--neutral-border);
    color: var(--neutral-medium); /* #CDD5E1 - 12.8:1 on #14171D */
}

/* Dark mode adjustments for Identity area fixes */
:root.dark-mode .text-subtle.small,
:root.dark-mode small.text-subtle,
:root.dark-mode .small .text-subtle,
:root.dark-mode td .text-subtle,
:root.dark-mode th .text-subtle,
:root.dark-mode .form-text.small,
:root.dark-mode small.form-text,
:root.dark-mode h1.text-subtle,
:root.dark-mode h2.text-subtle,
:root.dark-mode h3.text-subtle,
:root.dark-mode h4.text-subtle,
:root.dark-mode h5.text-subtle,
:root.dark-mode h6.text-subtle {
    color: var(--neutral-dark) !important; /* Light gray in dark mode: #F5F7FA */
}

/* ===== Outline Button Contrast Fixes ===== */
/* Bootstrap 5.3 hardcodes SASS-compiled hex values in --bs-btn-color/--bs-btn-border-color for
   .btn-outline-* classes. Our :root overrides of --bs-success/info/warning don't flow through to
   those local CSS variables — they must be overridden directly. */

/* Light mode: Bootstrap default #198754 = 4.33:1 on #f9fafb (fails WCAG AA 4.5:1) */
.btn-outline-success {
    --bs-btn-color: var(--success);             /* #00693E = 7.1:1 on #f9fafb */
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
    --bs-btn-disabled-color: var(--success);
    --bs-btn-disabled-border-color: var(--success);
    --bs-btn-focus-shadow-rgb: 0, 105, 62;
}

/* Light mode: Bootstrap default #0dcaf0 (cyan) = 1.87:1 on #f9fafb (far below WCAG AA) */
.btn-outline-info {
    --bs-btn-color: var(--primary-light);       /* #035FA5 = 4.7:1 on #f9fafb */
    --bs-btn-border-color: var(--primary-light);
    --bs-btn-hover-bg: var(--primary-light);
    --bs-btn-hover-border-color: var(--primary-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--primary-light);
    --bs-btn-active-border-color: var(--primary-light);
    --bs-btn-disabled-color: var(--primary-light);
    --bs-btn-disabled-border-color: var(--primary-light);
    --bs-btn-focus-shadow-rgb: 3, 95, 165;
}

/* Light mode: Bootstrap default #ffc107 (yellow) = 1.55:1 on #f9fafb (far below WCAG AA) */
.btn-outline-warning {
    --bs-btn-color: var(--warning);             /* #B45309 = 4.9:1 on #f9fafb */
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-disabled-color: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
    --bs-btn-focus-shadow-rgb: 180, 83, 9;
}

/* Dark mode: --bs-primary resolves to #002F56 (company dark blue) = 1.31:1 on #14171D.
   Also overrides the direct color/border set by our .btn-outline-primary rule in this file. */
:root.dark-mode .btn-outline-primary {
    --bs-btn-color: #6EA8FE;                    /* 7.45:1 on #14171D */
    --bs-btn-border-color: #6EA8FE;
    --bs-btn-hover-bg: #6EA8FE;
    --bs-btn-hover-border-color: #6EA8FE;
    --bs-btn-hover-color: #14171D;
    --bs-btn-active-bg: #6EA8FE;
    --bs-btn-active-border-color: #6EA8FE;
    --bs-btn-active-color: #14171D;
    --bs-btn-disabled-color: #6EA8FE;
    --bs-btn-disabled-border-color: #6EA8FE;
    /* .btn-outline-primary in this file sets color/border as direct properties — override them too */
    color: #6EA8FE !important;
    border-color: #6EA8FE !important;
}

:root.dark-mode .btn-outline-primary:hover {
    background-color: #6EA8FE !important;
    color: #14171D !important;
    border-color: #6EA8FE !important;
}

/* Dark mode: Bootstrap default #198754 = 3.96:1 on #14171D. Our light mode fix var(--success)
   resolves to #2B9D6E in dark mode — still only ~3.4:1. Use success text-emphasis (#6EE7A0). */
:root.dark-mode .btn-outline-success {
    --bs-btn-color: var(--bs-success-text-emphasis);    /* #6EE7A0 = ~8:1 on #14171D */
    --bs-btn-border-color: var(--bs-success-text-emphasis);
    --bs-btn-hover-bg: var(--bs-success-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-success-text-emphasis);
    --bs-btn-hover-color: #14171D;
    --bs-btn-active-bg: var(--bs-success-text-emphasis);
    --bs-btn-active-border-color: var(--bs-success-text-emphasis);
    --bs-btn-active-color: #14171D;
    --bs-btn-disabled-color: var(--bs-success-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-success-text-emphasis);
}

/* Dark mode: our light mode fix var(--primary-light) = #3C75C5 in dark mode = ~3.88:1 (fails AA).
   Use the same accessible light cyan as :root.dark-mode .text-info. */
:root.dark-mode .btn-outline-info {
    --bs-btn-color: #6EDFF6;                    /* ~10.6:1 on #14171D */
    --bs-btn-border-color: #6EDFF6;
    --bs-btn-hover-bg: #6EDFF6;
    --bs-btn-hover-border-color: #6EDFF6;
    --bs-btn-hover-color: #14171D;
    --bs-btn-active-bg: #6EDFF6;
    --bs-btn-active-border-color: #6EDFF6;
    --bs-btn-active-color: #14171D;
    --bs-btn-disabled-color: #6EDFF6;
    --bs-btn-disabled-border-color: #6EDFF6;
}

/* Dark mode: our light mode fix var(--warning) = #B45309 in dark mode = ~3.57:1 (fails AA).
   Use warning text-emphasis (#F9A825 gold = ~7:1), same as :root.dark-mode .text-warning. */
:root.dark-mode .btn-outline-warning {
    --bs-btn-color: var(--bs-warning-text-emphasis);    /* #F9A825 = ~7:1 on #14171D */
    --bs-btn-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-hover-bg: var(--bs-warning-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-hover-color: #14171D;
    --bs-btn-active-bg: var(--bs-warning-text-emphasis);
    --bs-btn-active-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-color: #14171D;
    --bs-btn-disabled-color: var(--bs-warning-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-warning-text-emphasis);
}

/* Dark mode: Bootstrap default #212529 = 1.16:1 on #14171D (near-invisible). */
:root.dark-mode .btn-outline-dark {
    --bs-btn-color: var(--neutral-dark);        /* #F5F7FA in dark mode = 12.8:1 on #14171D */
    --bs-btn-border-color: var(--neutral-dark);
    --bs-btn-hover-bg: var(--neutral-dark);
    --bs-btn-hover-border-color: var(--neutral-dark);
    --bs-btn-hover-color: var(--neutral-lightest); /* #14171D in dark mode */
    --bs-btn-active-bg: var(--neutral-dark);
    --bs-btn-active-border-color: var(--neutral-dark);
    --bs-btn-active-color: var(--neutral-lightest);
    --bs-btn-disabled-color: var(--neutral-dark);
    --bs-btn-disabled-border-color: var(--neutral-dark);
}