/* ===================================================================
   HRA Vitals Site CSS
   Unified styling with Pension Portal color scheme and components
   =================================================================== */

/* ===== CSS Variables - Accessible Color Scheme ===== */
:root {
    /* Company Brand Colors */
    --company-blue: #002F56;
    --company-gold: #F9A825;
    
    /* Primary Colors */
    --primary-dark: #002F56; /* Dark Blue - Company color */
    --primary-light: #035FA5; /* Lighter blue for links - matches main USW 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: #677488; /* Medium gray for secondary text — 4.74:1 on white */
    --neutral-light: #CDD5E1; /* Light gray for borders */
    --neutral-lightest: #F5F7FA; /* 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.375rem; /* 6px - Small elements (badges, small buttons) */
    --radius-md: 0.5rem; /* 8px - Medium elements (standard buttons, inputs) */
    --radius-lg: 0.75rem; /* 12px - Large elements (cards, alerts, modals) */
    --radius-xl: 1rem; /* 16px - Extra large elements */
    --radius-pill: 30px; /* Pill-shaped elements (accent buttons) */
    --radius-circle: 50%; /* Circular elements (avatars, icons) */

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

    /* 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;

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

/* ===== Text Color Classes ===== */
/* Use !important to override Bootstrap's own !important on these utilities.
   --primary-dark resolves to #6BA4F0 in dark mode (8.5:1 on dark bg).
   NOTE: --secondary-dark (#C88D00) is only 2.86:1 on white — NOT accessible as text color.
   .text-secondary uses the high-contrast amber #7A4600 (7.8:1 on white) instead.
   --secondary-dark is kept only for button backgrounds where dark text on gold is used. */
.text-primary {
    color: var(--primary-dark) !important;
}

.text-secondary {
    color: #7A4600 !important; /* 7.8:1 on white — distinct from --secondary-dark used for btn backgrounds */
}

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

.text-subtle {
    color: var(--neutral-medium); /* 4.74:1 against white */
}

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

/* ===== Background Color Classes ===== */
.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 */
}

/* Bootstrap's .bg-light stays #f8f9fa in dark mode (uses !important).
   Override to a dark surface. text-muted (#9AA0A6) on #3c4043 = 3.9:1 (fails),
   so also boost text-muted inside to --neutral-dark (#BDC1C6) = 6.0:1. */
:root.dark-mode .bg-light {
    background-color: var(--neutral-light) !important; /* #3c4043 */
    color: var(--neutral-darkest);
}
:root.dark-mode .bg-light .text-muted {
    color: var(--neutral-dark) !important; /* #BDC1C6 — 6.0:1 on #3c4043 */
}

/* ===== 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);  /* #C88D00 — used as background only */
    color: var(--color-on-gold);  /* #14171D on #C88D00 — 6.4:1 (WCAG AA) */
    border: none;
}

.btn-secondary:hover {
    background-color: var(--secondary);
    color: var(--color-on-gold);  /* Dark text on bright gold: 9.1:1 on #F9A825 (WCAG AAA) */
}

.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 on light backgrounds.
   Use --neutral-dark which adapts: #333D4D in light mode (13.6:1 on white). */
.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);
}

/* btn-outline-warning: Bootstrap default #ffc107 gives 1.63:1 on white — fails badly.
   --bs-warning is overridden to #B45309 but Bootstrap buttons use --bs-btn-color separately.
   Use #B45309 directly: 5.01:1 on white, 4.69:1 on #f5f7fa. */
.btn-outline-warning {
    color: #B45309;
    border-color: #B45309;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: #B45309;
    border-color: #B45309;
    color: #ffffff;             /* #ffffff on #B45309 = 5.01:1 */
}

/* Dark mode: #B45309 gives 2.85:1 on dark card bg (#292a2d) — fails.
   Use bright amber #f0a030: 6.71:1 on dark bg. */
:root.dark-mode .btn-outline-warning {
    color: #f0a030;
    border-color: #f0a030;
}
:root.dark-mode .btn-outline-warning:hover,
:root.dark-mode .btn-outline-warning:focus {
    background-color: #f0a030;
    border-color: #f0a030;
    color: #14171D;             /* dark on #f0a030 = 8.8:1 */
}

/* btn-outline-info: Bootstrap default #0dcaf0 gives 1.95:1 on white — fails 4.5:1.
   Use dark teal #087090 which gives 5.6:1 on white. */
.btn-outline-info {
    color: #087090;
    border-color: #087090;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: #087090;
    border-color: #087090;
    color: #ffffff;             /* #ffffff on #087090 = 5.6:1 */
}

/* Dark mode: Bootstrap default #0dcaf0 gives 5.2:1 on dark bg — restore it. */
:root.dark-mode .btn-outline-info {
    color: #0dcaf0;
    border-color: #0dcaf0;
}
:root.dark-mode .btn-outline-info:hover,
:root.dark-mode .btn-outline-info:focus {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #000000;
}

/* btn-outline-danger: Bootstrap #dc3545 fails 4.5:1 on #f5f7fa (4.21:1). Bootstrap buttons use
   --bs-btn-color, not --bs-danger, so the variable override doesn't flow through automatically.
   Explicitly set #CF2E2E which gives 4.81:1 on the site's lightest background. */
.btn-outline-danger {
    color: #CF2E2E;
    border-color: #CF2E2E;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #CF2E2E;
    border-color: #CF2E2E;
    color: #ffffff;             /* #ffffff on #CF2E2E = 5.1:1 */
}

/* btn-outline-danger: Bootstrap's #dc3545 gives only ~3.3:1 on dark page bg (#202124).
   Use --error (#F28B82) which gives 6.1:1. */
:root.dark-mode .btn-outline-danger {
    color: var(--error);         /* #F28B82 — 6.1:1 on dark bg */
    border-color: var(--error);
}
:root.dark-mode .btn-outline-danger:hover,
:root.dark-mode .btn-outline-danger:focus {
    background-color: var(--error);
    color: #1a1a1a;
    border-color: var(--error);
}

/* btn-outline-success dark mode: Bootstrap default #198754 = 3.16:1 on dark card bg (#292a2d).
   Use lighter #52b788 which gives 5.84:1. */
:root.dark-mode .btn-outline-success {
    color: #52b788;
    border-color: #52b788;
}
:root.dark-mode .btn-outline-success:hover,
:root.dark-mode .btn-outline-success:focus {
    background-color: #52b788;
    border-color: #52b788;
    color: #14171D;             /* dark on #52b788 = 6.6:1 */
}

/* btn-outline-dark dark mode: #212529 on dark bg = 1.07:1 — completely invisible.
   Invert to a light neutral. */
:root.dark-mode .btn-outline-dark {
    color: #d0d0d0;
    border-color: #d0d0d0;
}
:root.dark-mode .btn-outline-dark:hover,
:root.dark-mode .btn-outline-dark:focus {
    background-color: #d0d0d0;
    border-color: #d0d0d0;
    color: #212529;             /* dark on #d0d0d0 = 10.8:1 */
}

/* Bootstrap <code> uses --bs-code-color which stays at the light-mode value with a custom
   dark mode class. Override to readable body text color. */
:root.dark-mode code {
    color: var(--neutral-darkest); /* #E8EAED — 15.3:1 on dark card bg */
}

/* ===== Focus States for Accessibility ===== */
:focus-visible {
    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;
}

/* ===== Alert/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 */
}

.high-contrast .btn-secondary {
    background-color: var(--secondary-dark);
    color: white !important;
}

.high-contrast .btn-secondary:hover {
    background-color: var(--secondary);
    color: white !important;
}

.high-contrast .alert-success {
    color: white !important;
    background-color: var(--success);
}

.high-contrast .alert-danger {
    color: white !important;
    background-color: var(--error);
}

.high-contrast .alert-warning {
    color: white !important;
    background-color: var(--warning);
}

/* ===== Dark Mode Support ===== */
:root.dark-mode {
    /* Override colors for dark mode - brighter, more contrasted */
    --primary-dark: #6BA4F0;      /* Bright blue for headings/links */
    --primary-light: #8BB8FF;     /* Even lighter blue for hover states */
    --primary-lightest: #1e2936;  /* Dark blue-gray for card backgrounds */
    
    --secondary: #F9A825;         /* Brand gold — consistent with main site */
    --secondary-dark: #FFD54F;    /* Lighter gold for hover on dark backgrounds */
    --secondary-light: #2d2818;   /* Dark gold background */
    
    --neutral-darkest: #E8EAED;   /* Light gray for body text */
    --neutral-dark: #BDC1C6;      /* Medium gray for secondary text */
    --neutral-medium: #9AA0A6;    /* Medium-light gray for muted text */
    --neutral-light: #3c4043;     /* Dark gray for borders/separators */
    --neutral-lightest: #202124;  /* Very dark gray for main background */
    --neutral-border: #3c4043;    /* Border color */
    
    --success: #81C995;           /* Bright green */
    --success-light: #1e2f23;     /* Dark green background */
    --error: #F28B82;             /* Bright red */
    --error-light: #3d1f1f;       /* Dark red background */
    --warning: #FDD663;           /* Bright yellow */
    --warning-light: #2d2510;     /* Dark yellow background */
    
    --heading-color: var(--primary-dark);
    --form-label-color: var(--neutral-darkest);
    --link-color: var(--primary-dark);
    
    /* Dark mode specific backgrounds */
    --card-bg: #292a2d;           /* Card background - lighter than main bg */
    --card-border: #3c4043;       /* Card borders */
}

/* Body and main backgrounds */
:root.dark-mode body {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
}

/* Dark mode table styling */
:root.dark-mode .table {
    background-color: var(--card-bg) !important;
    color: var(--neutral-darkest) !important;
    border-color: var(--neutral-border) !important;
}

:root.dark-mode .table thead,
:root.dark-mode .table thead tr,
:root.dark-mode .table thead th {
    background-color: #1e3a5f !important;  /* Lighter blue for visibility */
    color: #ffffff !important;
    border-color: var(--neutral-border) !important;
}

:root.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2a2b2e !important;
}

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

:root.dark-mode .table-hover > tbody > tr:hover > td {
    background-color: #3c4043 !important;
}

/* Explicit tbody/tfoot/td backgrounds to prevent Bootstrap's per-cell --bs-table-bg
   variable system from leaving cells white in dark mode. */
:root.dark-mode .table tbody,
:root.dark-mode .table tbody tr,
:root.dark-mode .table tbody td,
:root.dark-mode .table tbody th,
:root.dark-mode .table tfoot,
:root.dark-mode .table tfoot tr,
:root.dark-mode .table tfoot td,
:root.dark-mode .table tfoot th {
    background-color: var(--card-bg) !important;
    border-color: var(--neutral-border) !important;
}

:root.dark-mode .table td,
:root.dark-mode .table th {
    color: var(--neutral-darkest) !important;
}

:root.dark-mode .table .btn {
    color: white !important;
    background-color: #1a56a8 !important; /* Same as dark mode btn-primary: 7.1:1 with white */
}

:root.dark-mode .table .btn:hover {
    background-color: var(--secondary) !important;
    color: #000 !important;
}

/* Dark mode card styling.
   Bootstrap sets .card { background-color: var(--bs-card-bg) } without !important,
   so our rules at higher specificity (0,3,0) win without needing !important here. */
:root.dark-mode .card {
    background-color: var(--card-bg);
    color: var(--neutral-darkest);
    border: 2px solid var(--card-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Bootstrap sets no background-color on .card-body, so no !important needed.
   Without overflow: hidden on .card, an explicit background-color on card-body would paint
   past the card's rounded corners. The :first-child / :last-child rules give card-body
   the inner border-radius on whichever corners are exposed (same pattern Bootstrap uses
   for card-header:first-child and card-footer:last-child). */
:root.dark-mode .card-body {
    background-color: var(--card-bg);
    color: var(--neutral-darkest);
}
:root.dark-mode .card-body:first-child {
    border-top-left-radius: calc(var(--radius-lg) - 2px);
    border-top-right-radius: calc(var(--radius-lg) - 2px);
}
:root.dark-mode .card-body:last-child {
    border-bottom-left-radius: calc(var(--radius-lg) - 2px);
    border-bottom-right-radius: calc(var(--radius-lg) - 2px);
}

/* Balance cards use a gradient on the .card element. The generic .card-body rule above
   would paint over it, so make those card-bodies transparent to show the parent gradient. */
:root.dark-mode .balance-card .card-body,
:root.dark-mode .card.bg-success.text-white .card-body,
:root.dark-mode .card.bg-info.text-white .card-body,
:root.dark-mode .card.bg-warning.text-white .card-body {
    background-color: transparent;
}

/* card-header DOES need !important because .bg-white on card headers uses !important. */
:root.dark-mode .card-header {
    background-color: #1e3a5f !important;
    color: #ffffff;
    border-bottom: 1px solid var(--neutral-border);
}

/* Heading rule `h1-h6 { color: var(--heading-color) }` beats inherited color from .card-header.
   Override for any card-header that sets its own text color (e.g. bg-primary, bg-success text-white). */
.card-header.text-white h1,
.card-header.text-white h2,
.card-header.text-white h3,
.card-header.text-white h4,
.card-header.text-white h5,
.card-header.text-white h6 {
    color: inherit;
}

/* bg-secondary card headers use gold (#F9A825) — headings must inherit dark text, not --heading-color. */
.card-header.bg-secondary h1,
.card-header.bg-secondary h2,
.card-header.bg-secondary h3,
.card-header.bg-secondary h4,
.card-header.bg-secondary h5,
.card-header.bg-secondary h6 {
    color: inherit;
}

:root.dark-mode .card-header h1,
:root.dark-mode .card-header h2,
:root.dark-mode .card-header h3,
:root.dark-mode .card-header h4,
:root.dark-mode .card-header h5,
:root.dark-mode .card-header h6 {
    color: white;
}

/* Dark mode: differentiate card header colors instead of all collapsing to the same navy.
   These need !important to override the blanket .card-header rule above. Higher specificity wins. */
:root.dark-mode .card-header.bg-success {
    background-color: #14522a !important; /* Dark forest green — distinct from navy */
}
:root.dark-mode .card-header.bg-warning {
    background-color: #6b3200 !important; /* Dark amber/brown */
}
:root.dark-mode .card-header.bg-secondary {
    background-color: #5a4200 !important; /* Dark gold/bronze */
}
:root.dark-mode .card-header.bg-info {
    background-color: #095a6e !important; /* Dark teal — distinct from navy */
}
:root.dark-mode .card-header.bg-danger {
    background-color: #6b1515 !important; /* Dark crimson */
}

/* Dark mode modal styling */
:root.dark-mode .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--neutral-darkest) !important;
    border-color: var(--card-border) !important;
}

:root.dark-mode .modal-header {
    background-color: #1e3a5f !important;
    color: white !important;
    border-bottom: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .modal-body {
    background-color: var(--card-bg) !important;
    color: var(--neutral-darkest) !important;
}

:root.dark-mode .modal-footer {
    background-color: var(--card-bg) !important;
    color: var(--neutral-darkest) !important;
    border-top: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .modal-body h6 {
    color: var(--secondary) !important;
}

:root.dark-mode .modal-body p,
:root.dark-mode .modal-body pre {
    color: var(--neutral-darkest) !important;
    background-color: var(--neutral-light) !important;
}

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

:root.dark-mode .modal-header .btn-close {
    filter: invert(1) !important;
}

/* ===== Bootstrap Variable Overrides ===== */
:root, [data-bs-theme=light] {
    /* Override primary/secondary to match company colors */
    --bs-primary: #002F56;
    --bs-primary-rgb: 0, 47, 86;
    --bs-secondary: #F9A825;
    --bs-secondary-rgb: 249, 168, 37;
    
    /* Override success/danger/warning with accessible colors */
    --bs-success: #00693E;
    --bs-success-rgb: 0, 105, 62;
    --bs-danger: #CF2E2E;
    --bs-danger-rgb: 207, 46, 46;
    --bs-warning: #B45309;
    --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: #677488;         /* matches --neutral-medium — 4.74:1 on white */
    --bs-gray-600: #677488;
    --bs-gray-700: #333D4D;
    --bs-gray-800: #14171D;
    --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;
    --bs-success-bg-subtle: #E5F4EE;
    --bs-danger-bg-subtle: #FBEDED;
    --bs-warning-bg-subtle: #FEF5E7;
    --bs-secondary-bg-subtle: #FFF3D6;
}

/* ===== Badge Styling Overrides ===== */
.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--secondary-light) !important;
    color: var(--neutral-darkest) !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--primary-dark) !important;
    color: white !important;
}

.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--success) !important;
    color: white !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--error) !important;
    color: white !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--neutral-darkest) !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--primary-light) !important;
    color: white !important;
}

:root.dark-mode .badge.bg-warning,
:root.dark-mode .badge.text-bg-warning {
    background-color: var(--secondary-light) !important;
    color: var(--neutral-darkest) !important;
}

:root.dark-mode .badge.bg-danger,
:root.dark-mode .badge.text-bg-danger {
    background-color: #C62828 !important; /* Darker red: 5.6:1 with white */
    color: white !important;
}

/* dark mode success badges: --success resolves to #81C995 (bright green) — white text = 1.95:1 fail */
:root.dark-mode .badge.bg-success,
:root.dark-mode .badge.text-bg-success {
    background-color: #00693E !important; /* Darker green: 6.8:1 with white */
    color: white !important;
}

/* dark mode primary badges: --primary-dark resolves to #6BA4F0 (light blue) — white text = 2.56:1 fail */
:root.dark-mode .badge.bg-primary,
:root.dark-mode .badge.text-bg-primary {
    background-color: #1a56a8 !important; /* 7.1:1 with white — same as dark mode btn-primary */
    color: white !important;
}

/* dark mode info badges: --primary-light resolves to #8BB8FF (light blue) — white/light text fails */
:root.dark-mode .badge.bg-info,
:root.dark-mode .badge.text-bg-info {
    background-color: #0a4f8c !important; /* Dark blue: 8.2:1 with white */
    color: white !important;
}

/* dark mode bg-light badges: bg-light stays #f8f9fa (near-white) while text goes light — near-invisible */
:root.dark-mode .badge.bg-light {
    background-color: var(--neutral-light) !important; /* #3c4043 — dark neutral */
    color: var(--neutral-darkest) !important; /* #E8EAED — 11.6:1 on #3c4043 */
}

/* Card-header collapse trigger buttons: Bootstrap's btn-link blue (#0d6efd) fails 4.5:1 on card-header bg */
.card-header .btn-link {
    color: var(--primary-dark); /* #002F56 — ~14:1 on light card-header bg */
}
:root.dark-mode .card-header .btn-link {
    color: #7BB8FF; /* 5.6:1 on dark card-header (#1e3a5f) */
}

/* .text-secondary in dark mode should use bright gold, not the dark amber used in light mode */
:root.dark-mode .text-secondary {
    color: var(--secondary-dark) !important; /* #FFD54F in dark mode — 10.7:1 on dark backgrounds */
}

/* Bootstrap .text-muted uses --bs-secondary-color which is a medium gray, failing on dark backgrounds.
   Override to --neutral-medium (#9AA0A6 in dark mode) which gives 5.3:1 on all dark card backgrounds. */
:root.dark-mode .text-muted {
    color: var(--neutral-medium) !important;
}

/* Bootstrap .form-text uses color: var(--bs-secondary-color) — same problem as .text-muted.
   Since this project uses a custom dark mode class (not Bootstrap's data-bs-theme),
   --bs-secondary-color is never updated. Override to match .text-muted. */
:root.dark-mode .form-text {
    color: var(--neutral-medium) !important; /* #9AA0A6 — 5.3:1 on dark card bg */
}

/* Bootstrap .form-control-plaintext sets color: var(--bs-body-color) which stays at the
   light-mode value (#212529) when using a custom dark mode class. Near-black on dark bg = ~1:1. */
:root.dark-mode .form-control-plaintext {
    color: var(--neutral-darkest); /* #E8EAED — 15.3:1 on dark card bg */
}

/* Bootstrap text utility classes are designed for light backgrounds and fail on dark surfaces. */
:root.dark-mode .text-success {
    color: var(--success) !important; /* #81C995 — 7.5:1 on card-bg #292a2d */
}
:root.dark-mode .text-danger {
    color: var(--error) !important; /* #F28B82 — 6.2:1 on card-bg #292a2d */
}
:root.dark-mode .text-info {
    color: #5BB6D0 !important; /* Bright teal — 6.5:1 on card-bg #292a2d */
}
:root.dark-mode .text-warning {
    color: var(--warning) !important; /* #FDD663 — 10.7:1 on card-bg #292a2d */
}
:root.dark-mode .text-dark {
    color: var(--neutral-darkest) !important; /* #E8EAED — Bootstrap's #212529 is invisible on dark bg */
}

/* .text-muted on card-headers: card-header bg is #1e3a5f. --neutral-medium (#9AA0A6) gives 4.4:1 there
   (just failing). Use --neutral-dark (#BDC1C6) = 6.6:1 for the card-header context. */
:root.dark-mode .card-header .text-muted {
    color: var(--neutral-dark) !important; /* #BDC1C6 — 6.6:1 on #1e3a5f */
}

/* Breadcrumb dark mode: Bootstrap's default link/separator colors fail on dark backgrounds */
:root.dark-mode .breadcrumb-item a {
    color: var(--link-color); /* #6BA4F0 — 6:1 on body bg #202124 */
}
:root.dark-mode .breadcrumb-item.active {
    color: var(--neutral-dark); /* #BDC1C6 — 7.7:1 on #202124 */
}
:root.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: var(--neutral-medium); /* #9AA0A6 separator */
}

/* btn-primary in dark mode: --primary-dark resolves to #6BA4F0 (light blue) — white text = 2.55:1 fail.
   Override to a medium blue that gives 7.1:1 with white text.
   Specificity (0,3,0) > light-mode .btn-primary (0,1,0) — no !important needed. */
:root.dark-mode .btn-primary {
    background-color: #1a56a8;
    border-color: #1a56a8;
    color: white;
}

:root.dark-mode .btn-primary:hover {
    background-color: #1244a0;
    border-color: #1244a0;
    color: white;
}

/* btn-outline-primary in dark mode: --primary-dark = #6BA4F0 gives only ~4.5:1 on the dark blue
   card-header background (#1e3a5f), which tools flag as borderline/fail.
   Use #7BB8FF: 5.6:1 on card headers, 6.7:1 on card body. */
:root.dark-mode .btn-outline-primary {
    border-color: #7BB8FF;
    color: #7BB8FF;
}

:root.dark-mode .btn-outline-primary:hover {
    background-color: #7BB8FF;
    border-color: #7BB8FF;
    color: #002F56; /* Dark navy on light blue: 6.4:1 */
}

/* ===== Base HTML & Body Styles ===== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    margin: 0;
    padding: 0;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
}

/* ===== Top Banner / Alert Bar ===== */
.top-bar {
    width: 100%;
    background: #f0e373;
    color: #3a3a3a;
    padding: 10px;
    text-align: center;
    margin-bottom: 0;
    font-weight: 500;
    border-bottom: 2px solid #e0d363;
}

.top-bar.alert-info {
    background: var(--primary-lightest);
    color: var(--primary-dark);
    border-bottom: 2px solid var(--primary-light);
}

.top-bar.alert-warning {
    background: var(--warning-light);
    color: var(--warning);
    border-bottom: 2px solid var(--warning);
}

.top-bar.alert-danger {
    background: var(--error-light);
    color: var(--error);
    border-bottom: 2px solid var(--error);
}

:root.dark-mode .top-bar {
    background: #3d3420;
    color: #fff;
    border-bottom-color: #4d4420;
}

/* ===== Navbar Styling ===== */
.navbar {
    background: linear-gradient(135deg, #002f56 0%, #00737c 100%);
    padding: 0.75rem 1rem !important;
}

.navbar-dev {
    background: linear-gradient(135deg, #8b5a00, #5c3a00);
}

.navbar-staging {
    background: linear-gradient(135deg, #4a5568, #2d3748);
}

.navbar-brand img.navbar-logo {
    max-height: 60px !important;
    height: auto !important;
    width: auto !important;
    transition: opacity 0.2s ease;
}

.navbar-brand:hover img.navbar-logo {
    opacity: 0.8;
}

.navbar form {
    all: unset;
}

.navbar form.form-inline {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    display: inline;
    vertical-align: middle;
}

.navbar form.form-inline button[type="submit"] {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-decoration: underline;
    color: white;
    vertical-align: middle;
}

.navbar a {
    color: white !important;
    font-weight: 500;
}

.navbar a:hover {
    text-decoration: underline;
}

/* Account link follows the PensionPortal navbar hover treatment. */
.navbar .navbar-account-link {
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.navbar .navbar-account-link:hover,
.navbar .navbar-account-link:focus {
    color: var(--secondary) !important;
    background-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    text-decoration: none;
}

.navbar .navbar-account-link:hover .bi,
.navbar .navbar-account-link:focus .bi {
    color: var(--secondary);
}

.navbar .nav-link.btn {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: white;
    font-weight: 500;
}

.navbar .nav-link.btn:hover {
    color: #F9A825;
}

/* Dark Mode Toggle Button */
#themeToggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

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

#themeToggle:focus {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

:root.dark-mode #themeToggle {
    border-color: rgba(255, 255, 255, 0.4);
}

:root.dark-mode #themeToggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Hamburger Menu Toggle */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-toggle:focus {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.hamburger {
    position: relative;
    display: block;
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

/* Mobile button to open sidebar */
.btn-link {
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

/* ===== Sidebar Styling ===== */
.sidebar {
    background-color: var(--neutral-lightest) !important;
    transition: none !important;
}

.sidebar:hover,
.sidebar:focus-within {
    background-color: var(--neutral-lightest) !important;
}

.sidebar-link {
    display: block;
    width: 100%;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-dark);
    background-color: transparent;
    border-left: 4px solid transparent;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-link i {
    font-size: 1.25rem;
    vertical-align: middle;
    margin-right: 0.5rem;
    color: var(--primary-dark);
}

.sidebar a {
    color: var(--primary-dark);
}

.sidebar-link:hover,
.sidebar-link:focus {
    background-color: var(--neutral-light);
    color: var(--primary-dark);
    text-decoration: none;
}

.sidebar-link.active,
.sidebar-link.Html.IsActive {
    background-color: var(--primary-lightest);
    border-left: 4px solid var(--secondary);
    color: var(--primary-dark);
    font-weight: 700;
}

/* Full nav-link styling for sidebar (nav-pills pattern) */
.sidebar .nav-link {
    color: var(--primary-dark);
    background-color: transparent;
    border-left: 4px solid transparent;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    background-color: var(--neutral-light);
    color: var(--primary-dark);
    text-decoration: none;
}

.sidebar .nav-link.active {
    background-color: var(--primary-lightest);
    border-left: 4px solid var(--secondary);
    color: var(--primary-dark);
    font-weight: 700;
}

.sidebar .nav-link i {
    font-size: 1.25rem;
    vertical-align: middle;
    color: var(--primary-dark);
}

/* Remove Bootstrap nav-pills active override */
.sidebar.nav-pills .nav-link.active,
.sidebar .nav-pills .nav-link.active {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);
}

:root.dark-mode .sidebar {
    background-color: #292a2d !important;
    border-right: 1px solid var(--neutral-border) !important;
}

:root.dark-mode .sidebar .nav-link {
    color: var(--neutral-darkest);
    background-color: transparent;
    border-left: 4px solid transparent;
}

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

:root.dark-mode .sidebar .nav-link.active {
    background-color: #1e3a5f !important;
    border-left: 4px solid var(--secondary) !important;
    color: white !important;
    font-weight: bold;
}

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

:root.dark-mode .sidebar-header {
    background-color: var(--neutral-light);
    border-bottom-color: var(--neutral-border);
}

:root.dark-mode .sidebar-section-title {
    color: var(--neutral-dark) !important; /* #BDC1C6 — 7.7:1 on sidebar background */
}

/* sidebar-link kept for _ManageNav.cshtml horizontal tab nav */
:root.dark-mode .sidebar-link:hover,
:root.dark-mode .sidebar-link:focus {
    background-color: var(--neutral-light) !important;
    color: var(--neutral-darkest) !important;
}

:root.dark-mode .sidebar-link.active,
:root.dark-mode .sidebar-link.Html\.IsActive {
    background-color: #1e3a5f !important;
    border-left-color: var(--secondary) !important;
    color: white !important;
}

/* ===== Footer Styling ===== */
/* Matches main USW Benefit Funds site: light background, dusty-blue top border */
footer {
    background-color: var(--neutral-lightest);
    color: var(--neutral-dark);
    text-align: center;
    padding: 1.25rem 0;
    font-size: 0.95rem;
    border-top: 7px solid var(--footer-accent-border);
}

/* Enhanced Footer for Quick Links */
footer .container {
    max-width: 1200px;
}

footer h6 {
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--primary-dark);
}

footer a {
    color: var(--primary-light); /* #035FA5 — 6.1:1 on neutral-lightest */
    text-decoration: none;
    transition: color 0.2s ease;
}

footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

footer .small {
    font-size: 0.875rem;
    line-height: 1.6;
}

footer p {
    margin-bottom: 0.5rem;
}

/* Union Logo Badges (from homepage) */
.union-logos-inline {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem auto 0;
    max-width: 90%;
}

.union-logo {
    width: 75px;
    height: 75px;
    border-radius: var(--radius-circle);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.union-logo:hover {
    transform: scale(1.05);
}

.union-logo img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* ===== Form Styling ===== */
main form {
    background-color: white;
    padding: 2rem;
    max-width: 600px;
    margin: 2rem auto;
    border-radius: var(--radius-lg);
}

/* Inline form wrappers (e.g. button-only forms in tables) must not inherit the
   standalone form chrome — same pattern as .navbar form { all: unset } above. */
main form.d-inline {
    background-color: transparent;
    padding: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

/* Forms inside card bodies inherit card's own background and spacing,
   so the standalone form chrome should not apply. */
main .card-body form {
    background-color: transparent;
    padding: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

/* Suppress browser spin buttons on number inputs (Chrome/Edge/Safari).
   The buttons reduce the effective inner height, making number inputs appear
   shorter than text/date inputs at the same form-control-sm size. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}


/* Password strength indicator bar height (replaces inline style="height:4px") */
.password-strength {
    height: 4px;
}

/* ===== Validation message visibility — class-based, no inline styles (CSP-safe) ===== */
/* ASP.NET Core renders these classes server-side; jQuery Validate Unobtrusive toggles
   them client-side. Neither path should ever need to set display via inline style. */
.field-validation-valid {
    display: none;
}
.field-validation-error {
    display: block;
}
.validation-summary-valid {
    display: none;
}

/* ===== ChangePassword page: password tips sidebar ===== */
.password-requirements {
    background-color: var(--neutral-lightest);
    border: 1px solid var(--neutral-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.password-requirements ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}
.password-tips .tip-item,
.security-benefits li {
    margin-bottom: 0.75rem;
}
.password-tips .tip-item:last-child,
.security-benefits li:last-child {
    margin-bottom: 0;
}

/* Claim line remove button: match the 0.75rem vertical padding that
   form input[type="*"] applies, so the button height equals the inputs. */
.claim-remove-btn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.dependent-remove-select {
    min-width: 200px;
}

/* Full-width forms (e.g. multi-section claim submission) that use cards
   for their own layout — strip the standalone form chrome entirely. */
main form.form-full-width {
    background-color: transparent;
    padding: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--form-label-color);
}

.form-label,
.form-floating > .form-label {
    color: var(--form-label-color);
    font-weight: 600;
}

form input[type="text"],
form input[type="password"],
form input[type="date"],
form input[type="email"],
form input[type="tel"],
form input[type="number"] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--neutral-light);
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}

/* Claim line inputs sit in a compact flex row — suppress the standalone
   form margin-bottom. Same (0,1,2) specificity, wins by cascade order. */
form input.claim-provider,
form input.claim-patient,
form input.claim-date,
form input.claim-amount {
    margin-bottom: 0;
}

.claim-add-line-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--secondary-light);
    border: 3px solid var(--secondary);
    border-radius: var(--radius-lg);
}

.claim-add-line-title {
    color: var(--neutral-darkest);
    font-weight: 700;
}

.claim-add-line-callout p {
    color: var(--neutral-darkest);
}

.claim-add-line-btn {
    flex-shrink: 0;
    border: 2px solid var(--secondary-dark);
    white-space: normal;
}

@media (max-width: 767.98px) {
    .claim-add-line-callout {
        align-items: stretch;
        flex-direction: column;
    }

    .claim-add-line-btn {
        width: 100%;
    }
}

form input:focus {
    border-color: var(--secondary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 168, 37, 0.3);
}

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

.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Form validation styling */
.was-validated .form-control:valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.94-.94 2.94 2.94L8.8 1.13a.75.75 0 0 1 1.21 0L8.2 7.26a1.5 1.5 0 0 1-2.12 0L2.3 5.14a.75.75 0 0 1 0-1.06z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 5.8 4.4 4.4M10.2 5.8l-4.4 4.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-label .text-danger {
    font-weight: 600;
}

/* ===== Button Styling ===== */
button,
input[type="submit"] {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    color: white;
    background-color: var(--primary-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--secondary);
    color: var(--neutral-darkest);
}

.btn {
    border-radius: var(--radius-md);
    transition: all 0.2s ease-in-out;
}

.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-success:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-lg {
    padding: 14px 30px;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

/* Accent Button */
.btn-accent {
    background: var(--secondary);
    border: none;
    color: var(--color-on-gold); /* Literal value — stays dark even in dark mode */
    font-weight: bold;
    border-radius: var(--radius-pill);
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background: var(--secondary-dark);
    color: var(--color-on-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ===== Card Styling ===== */
/*
 * Border-radius strategy:
 *   Card outer radius:  --radius-lg = 12px  ← edge of the border
 *   Card border-width:  2px
 *   Card inner radius:  --radius-lg - 2px = 10px  ← where card-header/footer backgrounds sit
 *
 * We set --bs-card-inner-border-radius so Bootstrap's own .card-header:first-child and
 * .card-footer:last-child rules resolve to our inner radius automatically. No overflow: hidden
 * needed — Bootstrap handles each sub-component's corner rounding via the CSS variable.
 * (overflow: hidden on a flex card creates sub-pixel clipping artifacts against colored borders.)
 */
.card {
    --bs-card-border-radius: var(--radius-lg);                    /* 12px outer */
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 2px);  /* 10px inner */
    border: 2px solid var(--neutral-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hero Card Styling */
.hero-card {
    background: linear-gradient(135deg, #1a3c63 0%, #00737c 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Card Header Gradient Classes */
.card-header-gradient-primary {
    background: linear-gradient(135deg, #1a3c63, #0d213d);
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.card-header-gradient-secondary {
    background: linear-gradient(135deg, #007c82, #005f64);
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.card-header-gradient-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.card-header-gradient-success {
    background: linear-gradient(135deg, #28a745, #218838);
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.card-header-gradient-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #000;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

/* ===== Dev/Staging Environment Badge Animations ===== */
@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px 5px rgba(220, 53, 69, 0.4);
        transform: scale(1.05);
    }
}

@keyframes pulse-yellow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px 5px rgba(255, 193, 7, 0.4);
        transform: scale(1.05);
    }
}

.badge-pulse-red {
    animation: pulse-red 2s ease-in-out infinite;
}

.badge-pulse-yellow {
    animation: pulse-yellow 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .badge-pulse-red,
    .badge-pulse-yellow {
        animation: none;
    }
}

/* ===== Info Card Styling ===== */
.info-card {
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: var(--radius-lg);
    padding: 20px;
    min-height: 120px;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.info-card .card-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card .card-left i {
    font-size: 1.4rem;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card .card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.info-card .card-text h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.info-card .card-text p {
    margin: 0;
    font-size: 0.9rem;
}

/* Info Card Variants */
.info-card.primary {
    background: linear-gradient(135deg, #002F56, #001a3d);
    color: #fff;
}

.info-card.primary i {
    background: #F9A825;
    color: #000;
}

.info-card.secondary {
    background: linear-gradient(135deg, #00737c, #005f64);
    color: #fff;
}

.info-card.secondary i {
    background: #fff;
    color: #00737c;
}

.info-card.accent {
    background: #F9A825;
    color: #000;
}

.info-card.accent i {
    background: #000;
    color: #F9A825;
}

/* Disabled Info Card */
.info-card-disabled {
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: var(--radius-lg);
    padding: 20px;
    min-height: 120px;
    background-color: var(--neutral-lightest);
    border: 2px dashed var(--neutral-light);
    opacity: 0.7;
}

.info-card-disabled .card-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-disabled .card-left i {
    font-size: 1.4rem;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-light);
    color: var(--neutral-medium);
}

.info-card-disabled .card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.info-card-disabled .card-text h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--neutral-medium);
}

.info-card-disabled .card-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--neutral-medium);
}

/* Dark mode info card adjustments */
:root.dark-mode .info-card.primary {
    background: linear-gradient(135deg, #003d7a, #002456);
}

/* ===== Table Styling ===== */
.table {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    border-color: var(--neutral-light);
}

.table thead {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);
}

.table th,
.table td {
    vertical-align: middle;
    border-color: var(--neutral-light);
}

/* Improved Table Striping */
.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: transparent;
    background-color: var(--neutral-lightest);
}

.table-striped > tbody > tr:nth-of-type(even) {
    --bs-table-accent-bg: transparent;
    background-color: var(--neutral-light);
}

:root.dark-mode {
    --table-dark-row: #1e1e2f;
    --table-dark-row-alt: #2b2b3f;
}

:root.dark-mode .table {
    background-color: var(--neutral-light);
    color: var(--neutral-darkest);
    border-color: var(--neutral-medium);
}

:root.dark-mode .table thead {
    background-color: var(--primary-dark);
    color: white;
}

:root.dark-mode .table th,
:root.dark-mode .table td {
    border-color: var(--neutral-medium);
    color: var(--neutral-darkest);
}

:root.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--table-dark-row);
}

:root.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--table-dark-row-alt);
}

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

/* ===== Accordion Theme Support ===== */
.accordion-button {
    background-color: var(--neutral-lightest);
    color: var(--primary-dark);
    transition: background-color 0.2s ease;
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);
    font-weight: 600;
}

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

.accordion-body {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    border-top: 1px solid var(--neutral-light);
}

/* ===== List Group Items ===== */
.list-group-item {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    border-color: var(--neutral-light);
}

/* ===== Form Floating Labels ===== */
.form-floating > .form-control,
.form-floating > .form-control:focus,
.form-floating > .form-control:disabled,
.form-floating > .form-control:read-only {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    border-color: var(--neutral-light);
    padding: 1rem 0.75rem 0.25rem 0.75rem;
}

.form-floating > label {
    color: var(--neutral-medium);
    font-weight: 500;
    background-color: transparent;
    pointer-events: none;
    border: none;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: var(--primary-dark);
}

/* Hide placeholder by default to avoid overlap with the floating label */
.form-floating > .form-control::placeholder {
    color: transparent !important;
}

/* Show subtle placeholder hint only when focused (label has floated up) */
.form-floating > .form-control:focus::placeholder {
    color: rgba(108, 122, 144, 0.6) !important;
    transition: color 0.2s ease-in-out;
}

/* Keep placeholder hidden when input has content */
.form-floating > .form-control:not(:placeholder-shown)::placeholder {
    color: transparent !important;
}

:root.dark-mode .form-floating > .form-control,
:root.dark-mode .form-floating > .form-control:focus,
:root.dark-mode .form-floating > .form-control:disabled,
:root.dark-mode .form-floating > .form-control:read-only {
    background-color: var(--neutral-light);
    color: var(--neutral-darkest);
    border-color: var(--neutral-medium);
}

:root.dark-mode .form-floating > label {
    color: var(--neutral-light);
    background-color: transparent;
}

:root.dark-mode .form-floating > .form-control:focus ~ label,
:root.dark-mode .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--neutral-darkest); /* #E8EAED — 7.9:1 on #3c4043 form-control bg */
    opacity: 1;
}

/* Dark mode: hide placeholder by default */
:root.dark-mode .form-floating > .form-control::placeholder {
    color: transparent !important;
}

/* Dark mode: show placeholder hint on focus when label has floated */
:root.dark-mode .form-floating > .form-control:focus::placeholder {
    color: rgba(160, 174, 192, 0.7) !important;
}

/* Dark mode: keep placeholder hidden when input has content */
:root.dark-mode .form-floating > .form-control:not(:placeholder-shown)::placeholder {
    color: transparent !important;
}

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

.form-wide {
    max-width: 100%;
    padding: 0;
}

/* ===== Offcanvas (Mobile Sidebar) ===== */
.offcanvas {
    background-color: var(--neutral-lightest) !important;
    color: var(--neutral-darkest) !important;
}

.offcanvas-header {
    background: linear-gradient(135deg, #002f56 0%, #00737c 100%);
    color: white;
    border-bottom: none;
}

.offcanvas-header .offcanvas-title {
    color: white;
}

.offcanvas-header .btn-close {
    filter: invert(1) brightness(2);
}

.offcanvas-body {
    padding: 0;
}

:root.dark-mode .offcanvas {
    background-color: #292a2d !important;
    color: var(--neutral-darkest) !important;
}

:root.dark-mode .offcanvas-header {
    /* gradient stays the same in dark mode — literals, not variables */
    background: linear-gradient(135deg, #002f56 0%, #00737c 100%);
    border-bottom: none;
}

:root.dark-mode .btn-close {
    filter: invert(1) brightness(2);
}

.offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

:root.dark-mode .offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* ===== Dashboard Card Icons ===== */
.card i.display-4 {
    color: var(--primary-dark);
    transition: color 0.2s ease;
}

:root.dark-mode .card i.display-4 {
    color: var(--secondary);
}

/* ===== Info Group Structure ===== */
/* Used for displaying labeled information in cards (balance info, etc.) */
.info-group {
    margin-bottom: 1rem;
}

.info-label {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--neutral-medium);
    margin-bottom: 0.25rem;
}

.info-label i {
    flex-shrink: 0;
}

.info-label strong {
    color: var(--neutral-dark);
}

.info-value {
    font-size: 1rem;
    color: var(--neutral-darkest);
    padding-left: 1.75rem;
}

/* ===== Alert Enhancements ===== */
.alert {
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.alert-danger.border-danger {
    border-width: 2px;
}

/* ===== List Group Items ===== */
.list-group-item-action {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.list-group-item-action:hover {
    background-color: rgba(0, 115, 124, 0.08);
    transform: translateX(3px);
    transition: all 0.2s ease-in-out;
}

.list-group-item-action:active {
    background-color: rgba(0, 115, 124, 0.12);
}

.list-group-item-action:focus {
    outline: 2px solid #00737c;
    outline-offset: -2px;
}

/* ===== Feature Items ===== */
.feature-item {
    padding: 1rem;
    transition: transform 0.2s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-icon {
    transition: transform 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1);
}

/* ===== Announcement Banner ===== */
.announcement-banner {
    background-color: var(--warning-light);
    border-bottom: 2px solid var(--warning);
    padding: 0.75rem 1rem;
    text-align: center;
    color: var(--warning);
}

.announcement-banner .announcement-icon {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.announcement-banner .announcement-message {
    margin: 0;
    font-weight: 500;
}

:root.dark-mode .announcement-banner {
    background-color: var(--warning-light);
    border-bottom-color: var(--warning);
    color: var(--warning);
}

/* ===== Audit Logs Styles ===== */
.metadata-json {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

.expand-details-btn {
    transition: all 0.2s ease-in-out;
}

.expand-details-btn:hover {
    transform: scale(1.1);
}

.details-row td {
    border-top: none !important;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .metadata-json {
        font-size: 0.75rem;
        max-height: 200px;
    }
}

/* ===== Registration Code Success Styling ===== */
.registration-success-card {
    border: 2px solid var(--success) !important;
}

.registration-success-header {
    background-color: var(--success) !important;
}

.registration-code-display {
    background-color: var(--success-light);
    border-color: var(--success) !important;
}

.registration-code-label {
    color: var(--success);
}

.registration-code-value {
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    border-color: var(--success) !important;
}

.registration-warning-alert {
    background-color: var(--warning-light);
    color: var(--warning);
    border-left: 4px solid var(--warning);
}

/* ===== Welcome & Intro Sections ===== */
.welcome-intro,
.audience-intro {
    background: var(--neutral-lightest);
    border-left: 6px solid var(--primary-dark);
    border-radius: var(--radius-md);
    padding: 2rem 2.5rem;
    margin: 2rem auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}

.welcome-intro p,
.audience-intro p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--neutral-dark);
    margin: 0.5rem 0;
}

:root.dark-mode .welcome-intro,
:root.dark-mode .audience-intro {
    background: var(--neutral-light);
    border-left-color: var(--primary-light);
}

:root.dark-mode .welcome-intro p,
:root.dark-mode .audience-intro p {
    color: var(--neutral-darkest);
}

/* Trusted Companies Grid (Homepage inspired) */
.trusted-block {
    padding: 3rem 0;
    background: linear-gradient(180deg, #eaf5ff, #ffffff);
    text-align: center;
}

.trusted-title {
    margin: 0;
    padding-top: 1.25rem;
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(90deg, #004b87, #00b4d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.trusted-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 320px);
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.trusted-grid div {
    background: #ffffff;
    border-left: 6px solid #009ea1;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

.trusted-grid div:hover {
    transform: translateY(-2px);
}

:root.dark-mode .trusted-block {
    background: linear-gradient(180deg, #1a2332, #2b2b3f);
}

:root.dark-mode .trusted-grid div {
    background: var(--neutral-light);
    color: var(--neutral-darkest);
    border-left-color: var(--secondary);
}

/* ===== HRA Vitals Specific - Dashboard Styles ===== */

/* Welcome Section */
.welcome-section {
    margin-bottom: 2rem;
}

/* Balance Overview Cards */
.balance-card {
    background: linear-gradient(135deg, #002F56, #001a3d);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: white;
}

.balance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Override Bootstrap bg-success, bg-info, bg-warning to use gradients for balance cards */
.balance-card.bg-success,
.card.bg-success.text-white {
    background: linear-gradient(135deg, #28a745, #218838) !important;
    border: none;
}

.balance-card.bg-info,
.card.bg-info.text-white {
    background: linear-gradient(135deg, #17a2b8, #138496) !important;
    border: none;
}

.balance-card.bg-warning,
.card.bg-warning.text-white {
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
    border: none;
    /* WCAG: white on #ffc107 = 1.8:1 — use dark text instead */
    color: var(--color-on-gold) !important;
}

.card.bg-warning.text-white .text-white-50 {
    color: rgba(20, 23, 29, 0.75) !important;
}

/* Legal text boxes (terms, certification) — white in light mode, card-bg in dark mode.
   bg-white has !important which keeps the background white in dark mode while text
   flips to the light foreground color, producing ~1.2:1 contrast. */
.legal-text-box {
    background-color: #ffffff;
}

:root.dark-mode .legal-text-box {
    background-color: var(--card-bg);
}

.bank-account-update-form input.form-control {
    margin-bottom: 0.25rem;
}

.bank-account-update-form .form-text {
    margin-top: 0;
}

/* Message timestamps on primary card headers.
   text-white-50 gives 4.49:1 on #002f56 (light) and 4.16:1 on #1e3a5f (dark) — both fail AA.
   0.75 opacity gives ~7.2:1 on #002f56; dark mode override below raises it further. */
.card-header.bg-primary .message-timestamp {
    color: rgba(255, 255, 255, 0.75); /* ~12:1 on #002f56 */
}

.card-header.bg-success .message-timestamp {
    color: #ffffff; /* 4.53:1 on #198754 — opacity tinting fails AA on green */
}

/* Consistent card body styling for all balance cards */
.balance-card .card-body,
.card.bg-success.text-white .card-body,
.card.bg-info.text-white .card-body,
.card.bg-warning.text-white .card-body {
    padding: 1.75rem 1.5rem;
}

/* Card title styling - consistent across all balance cards */
.balance-card .card-title,
.card.bg-success.text-white .card-title,
.card.bg-info.text-white .card-title,
.card.bg-warning.text-white .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Icon sizing within card titles */
.balance-card .card-title i,
.card.bg-success.text-white .card-title i,
.card.bg-info.text-white .card-title i,
.card.bg-warning.text-white .card-title i {
    font-size: 1.25rem;
    vertical-align: middle;
}

/* Balance amount - large, prominent display */
.balance-amount {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

/* Small description text under amounts */
.balance-card .small,
.card.bg-success.text-white .small,
.card.bg-info.text-white .small,
.card.bg-warning.text-white .small {
    font-size: 0.875rem;
    opacity: 0.85;
}

/* Hover effects for all balance cards */
.card.bg-success.text-white:hover,
.card.bg-info.text-white:hover,
.card.bg-warning.text-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dark mode adjustments for balance cards.
   Each card uses a distinct hue family so they remain visually different in dark mode:
   navy (hue ~220), green (hue ~140), teal (hue ~190), amber (hue ~35). */
:root.dark-mode .balance-card {
    background: linear-gradient(135deg, #1e3a6e, #112550) !important; /* Deep navy */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border: none;
}

:root.dark-mode .card.bg-success.text-white {
    background: linear-gradient(135deg, #1e6436, #125228) !important; /* Forest green */
}

:root.dark-mode .card.bg-info.text-white {
    background: linear-gradient(135deg, #0a6472, #074e5a) !important; /* Clear teal — distinct from navy */
}

:root.dark-mode .card.bg-warning.text-white {
    background: linear-gradient(135deg, #7d5218, #5c3a0c) !important; /* Warm amber */
}

/* Ensure text is bright white on dark cards */
:root.dark-mode .balance-card,
:root.dark-mode .card.bg-success.text-white,
:root.dark-mode .card.bg-info.text-white,
:root.dark-mode .card.bg-warning.text-white {
    color: #ffffff !important;
}

:root.dark-mode .balance-card .card-title,
:root.dark-mode .card.bg-success.text-white .card-title,
:root.dark-mode .card.bg-info.text-white .card-title,
:root.dark-mode .card.bg-warning.text-white .card-title {
    color: #ffffff !important;
}

:root.dark-mode .balance-amount {
    color: #ffffff !important;
}

/* .text-white-50 (50% opacity white) fails WCAG AA on dark card backgrounds.
   Override to 85% opacity which gives 7.5:1+ contrast on all dark card gradients. */
:root.dark-mode .balance-card .text-white-50,
:root.dark-mode .card.bg-success.text-white .text-white-50,
:root.dark-mode .card.bg-info.text-white .text-white-50,
:root.dark-mode .card.bg-warning.text-white .text-white-50 {
    color: rgba(255, 255, 255, 0.85) !important;
}

:root.dark-mode .card-header.bg-primary .message-timestamp {
    color: rgba(255, 255, 255, 0.85); /* ~7.9:1 on #1e3a5f */
}

:root.dark-mode .card-header.bg-success .message-timestamp {
    color: #ffffff; /* dark mode bg-success is also dark enough for full white */
}

/* Quick Action Cards */
.quick-action-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid var(--neutral-light);
    cursor: pointer;
}

.quick-action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-light);
}

.quick-action-card .card-body {
    padding: 2rem 1.5rem;
}

.quick-action-card i.display-4 {
    color: var(--primary-dark);
}

.quick-action-card:hover i.display-4 {
    color: var(--secondary);
}

/* Dark mode quick action cards */
:root.dark-mode .quick-action-card {
    background-color: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

:root.dark-mode .quick-action-card:hover {
    border-color: var(--primary-dark) !important;
    background-color: #2e2f32 !important;
}

:root.dark-mode .quick-action-card i.display-4 {
    color: var(--primary-dark) !important;
}

:root.dark-mode .quick-action-card:hover i.display-4 {
    color: var(--secondary) !important;
}

:root.dark-mode .quick-action-card .card-title {
    color: var(--neutral-darkest) !important;
}

/* Dark mode footer adjustments */
:root.dark-mode footer {
    background-color: #1a1b1e !important;
    color: var(--neutral-darkest) !important;
    border-top: 7px solid #4a6080; /* Muted blue — visible on dark background */
}

:root.dark-mode footer h6 {
    color: var(--secondary);
}

:root.dark-mode footer a {
    color: #6EA8FE; /* 7.45:1 on #1a1b1e dark background */
}

:root.dark-mode footer a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

/* Dark mode form styling */
:root.dark-mode main form {
    background-color: var(--card-bg);
}

:root.dark-mode .form-control,
:root.dark-mode .form-select {
    background-color: var(--neutral-light);
    border-color: var(--card-border);
    color: var(--neutral-darkest);
}

:root.dark-mode .form-control:focus,
:root.dark-mode .form-select:focus {
    background-color: var(--neutral-light);
    border-color: var(--primary-dark);
    color: var(--neutral-darkest);
    box-shadow: 0 0 0 0.25rem rgba(107, 164, 240, 0.25);
}

:root.dark-mode .form-control::placeholder,
:root.dark-mode .form-select::placeholder {
    color: var(--neutral-dark); /* #BDC1C6 — 7.8:1 on #3c4043 form-control bg */
}

:root.dark-mode .form-label,
:root.dark-mode .form-floating > .form-label {
    color: var(--neutral-darkest);
}

/* Dark mode alerts */
:root.dark-mode .alert {
    border-width: 1px;
}

:root.dark-mode .alert-success {
    background-color: #1e2f23;
    color: #81C995;
    border-color: #2d6a3e;
}

:root.dark-mode .alert-danger {
    background-color: #3d1f1f;
    color: #F28B82;
    border-color: #8b3a3a;
}

:root.dark-mode .alert-warning {
    background-color: #2d2510;
    color: #FDD663;
    border-color: #8a6d3b;
}

:root.dark-mode .alert-info {
    background-color: #1e2936;
    color: var(--primary-dark);
    border-color: #1e3a5f;
}

/* Dark mode badges */
:root.dark-mode .badge.bg-warning,
:root.dark-mode .badge.text-bg-warning {
    background-color: #8a6d3b !important;
    color: #ffffff !important;
}

/* Secondary badges: dark mode --secondary is gold (#F9A825), --neutral-darkest is white = 1.97:1 fail.
   Use --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; /* Gold */
    color: var(--color-on-gold) !important; /* #14171D — 10.3:1 on gold */
}

/* btn-secondary hover: gold background needs dark text in dark mode (white fails ~2:1) */
:root.dark-mode .btn-secondary:hover {
    color: var(--color-on-gold);
}

/* Dark mode accordion */
:root.dark-mode .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    --bs-accordion-bg: var(--card-bg);
}

:root.dark-mode .accordion-button {
    background-color: var(--card-bg);
    color: var(--neutral-darkest);
}

:root.dark-mode .accordion-button:hover {
    background-color: var(--card-bg);
    color: var(--primary-dark);
}

:root.dark-mode .accordion-button:not(.collapsed) {
    background-color: #1e3a5f;
    color: white;
}

:root.dark-mode .accordion-body {
    background-color: var(--card-bg);
    color: var(--neutral-darkest);
    border-top: 1px solid var(--neutral-medium);
}

/* Dark mode list groups */
:root.dark-mode .list-group-item {
    background-color: var(--card-bg);
    color: var(--neutral-darkest);
    border-color: var(--card-border);
}

:root.dark-mode .list-group-item-action:hover {
    background-color: var(--neutral-light);
}



/* Dark mode top banner */
:root.dark-mode .top-bar {
    background: #2d2818;
    color: #FDD663;
    border-bottom-color: #4d4420;
}

/* Dark mode welcome section */
:root.dark-mode .welcome-section h4 {
    color: var(--primary-dark);
}

/* Dark mode info cards */
:root.dark-mode .info-card.primary {
    background: linear-gradient(135deg, #1e3a5f, #152841);
}

:root.dark-mode .info-card.secondary {
    background: linear-gradient(135deg, #1e5a7a, #15415a);
}

:root.dark-mode .card-header-gradient-primary {
    background: linear-gradient(135deg, #1e3a5f, #152841);
}

:root.dark-mode .card-header-gradient-secondary {
    background: linear-gradient(135deg, #1e5a7a, #15415a);
}

:root.dark-mode .card-header-gradient-info {
    background: linear-gradient(135deg, #2bb3c9, #1a8da0);
}

:root.dark-mode .info-label {
    color: var(--neutral-medium);
}

:root.dark-mode .info-label strong {
    color: var(--neutral-darkest);
}

:root.dark-mode .info-value {
    color: var(--neutral-darkest);
}

/* Dark mode trusted block */
:root.dark-mode .trusted-block {
    background: linear-gradient(180deg, #1a2332, #202124);
}

:root.dark-mode .trusted-grid div {
    background: var(--card-bg);
    color: var(--neutral-darkest);
    border-left-color: var(--secondary);
}

/* Dark mode welcome/intro sections */
:root.dark-mode .welcome-intro,
:root.dark-mode .audience-intro {
    background: var(--card-bg);
    border-left-color: var(--primary-dark);
}

:root.dark-mode .welcome-intro p,
:root.dark-mode .audience-intro p {
    color: var(--neutral-darkest);
}

/* ===== HRA Vitals Specific - Dashboard Progress Bars ===== */
.dashboard-progress {
    height: 8px;
}

.progress-bar[data-width] {
    width: var(--progress-width);
}

/* Progress percentage classes */
.progress-0 { width: 0%; }
.progress-5 { width: 5%; }
.progress-10 { width: 10%; }
.progress-15 { width: 15%; }
.progress-20 { width: 20%; }
.progress-25 { width: 25%; }
.progress-30 { width: 30%; }
.progress-35 { width: 35%; }
.progress-40 { width: 40%; }
.progress-45 { width: 45%; }
.progress-50 { width: 50%; }
.progress-55 { width: 55%; }
.progress-60 { width: 60%; }
.progress-65 { width: 65%; }
.progress-70 { width: 70%; }
.progress-75 { width: 75%; }
.progress-80 { width: 80%; }
.progress-85 { width: 85%; }
.progress-90 { width: 90%; }
.progress-95 { width: 95%; }
.progress-100 { width: 100%; }

/* ===== HRA Vitals Specific - Attestation Page ===== */
.attestation-form-container {
    width: 100%;
    max-width: none;
    box-shadow: none;
}

.attestation-form-container .row {
    margin-left: 0;
    margin-right: 0;
}

.attestation-form-container .col-lg-8,
.attestation-form-container .col-lg-4 {
    padding-left: 12px;
    padding-right: 12px;
}

.attestation-form-container form {
    width: 100%;
    max-width: none;
}

.attestation-form-container .card {
    width: 100%;
}

/* Table column sizing for dependent list */
.attestation-dependents-table th.col-checkbox {
    width: 60px;
    text-align: center;
}

.attestation-dependents-table td.col-checkbox {
    text-align: center;
}

.attestation-dependents-table th.col-name {
    width: auto;
}

.attestation-dependents-table th.col-dob {
    width: 150px;
}

/* ===== HRA Vitals Specific - Dependent Action Buttons ===== */
.btn-group .dependent-action-btn {
    min-height: 38px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-width: 1px;
    line-height: 1.5;
    margin: 0;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-group .d-inline {
    display: inline-flex !important;
    align-items: stretch;
}

.btn-group form {
    margin: 0;
    display: inline-flex;
}

.btn-group > form:not(:first-child) .btn,
.btn-group > form:first-child .btn {
    margin-left: 0;
}

.btn-group > form:not(:last-child) .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > form:not(:first-child) .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.btn-group .dependent-action-btn:focus,
.btn-group .dependent-action-btn:active {
    z-index: 2;
}

/* ===== HRA Vitals Specific - File Handling ===== */
.file-item {
    transition: all 0.2s ease-in-out;
}

.file-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.conditional-fields {
    transition: all 0.3s ease-in-out;
}

.conditional-fields.d-none {
    display: none !important;
}

.text-pdf {
    color: #dc3545 !important;
}

.text-image {
    color: #0d6efd !important;
}

/* ===== HRA Vitals Specific - Horizontal Manage Nav ===== */
.manage-nav-horizontal .sidebar-link {
    width: auto;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border-left: none !important;
    border-top: 4px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.manage-nav-horizontal .sidebar-link.active,
.manage-nav-horizontal .sidebar-link.Html\.IsActive {
    background-color: var(--primary-lightest);
    border-top: 4px solid var(--secondary);
    color: var(--primary-dark);
    font-weight: 700;
}

:root.dark-mode .account-manage h1,
:root.dark-mode .account-manage .card-body > h2,
:root.dark-mode .account-manage .card-body > h3 {
    color: white;
}

:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link,
:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link i {
    color: white !important;
}

:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link:hover,
:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link:focus,
:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link.active,
:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link.Html\.IsActive {
    color: white !important;
}

:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link:hover i,
:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link:focus i,
:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link.active i,
:root.dark-mode .account-manage .manage-nav-horizontal .sidebar-link.Html\.IsActive i {
    color: white !important;
}

:root.dark-mode .account-manage .alert-info {
    color: white;
}

:root.dark-mode .account-manage .alert-info .alert-heading,
:root.dark-mode .account-manage .alert-info a,
:root.dark-mode .account-manage .alert-info strong {
    color: white;
}

/* ===== HRA Vitals Specific - Landing Page ===== */
.landing-login-card, 
.landing-register-card {
    transition: transform 0.3s ease-in-out;
}

.landing-login-card:hover, 
.landing-register-card:hover {
    transform: translateY(-5px);
}

.landing-login-card {
    border-left: 4px solid var(--primary-dark) !important;
}

.landing-register-card {
    border-left: 4px solid var(--success) !important;
}

.landing-icon-container {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-card-icon {
    font-size: 3rem;
}

.landing-feature-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-feature-icon i {
    font-size: 2.5rem;
}

:root.dark-mode .landing-login-card {
    border-left-color: var(--primary-light) !important;
}

:root.dark-mode .landing-register-card {
    border-left-color: var(--success) !important;
}

:root.dark-mode .landing-card-icon {
    color: var(--secondary) !important;
}

:root.dark-mode .landing-feature-icon i {
    color: var(--secondary) !important;
}

/* ===== Pension Tracker (can be used for HRA progress tracking) ===== */
.tracker-block {
    width: 4rem;
    height: 1rem;
    border-radius: var(--radius-sm);
    margin: 0 0.25rem;
    background-color: #dee2e6;
    box-shadow: none;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.tracker-block.complete {
    background-color: var(--primary-dark);
}

.tracker-block.current {
    background-color: var(--secondary);
    box-shadow: 0 0 20px var(--secondary);
}

.tracker-block.pending {
    background-color: var(--neutral-medium);
}

.tracker-label {
    width: 4rem;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.25rem;
}

/* ===== Bootstrap Offcanvas ===== */
.offcanvas.show {
    visibility: visible;
    width: 100%;
}

/* ===== Sidebar Section Label ===== */
/* Styled as a label, not a heading, to avoid disrupting page heading hierarchy */
p.sidebar-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--neutral-medium);
    margin-bottom: 0.25rem;
    margin-top: 0;
    padding: 0 1.25rem;
}

/* ===== Responsive Design ===== */
@media (max-width: 576px) {
    .sidebar-link {
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
    }

    body {
        font-size: 1rem;
    }
    
    .tracker-stack {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .arrow-icon {
        transform: rotate(90deg);
        margin: 0.25rem 0;
    }

    .tracker-block {
        width: 2rem;
        height: 0.75rem;
    }

    .tracker-label {
        width: auto;
        font-size: 0.8rem;
        text-align: left;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 768px) {
    .file-item .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .file-item .d-flex > div:last-child {
        margin-top: 0.5rem;
        align-self: flex-end;
    }

    .conditional-fields .row {
        margin-bottom: 1rem;
    }
    
    .announcement-banner {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .announcement-banner .announcement-icon {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    .container-fluid .row {
        margin: 0;
    }

    .sidebar {
        padding: 0;
    }

    .main-content {
        padding: 1rem;
    }
}

@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 1.1rem;
    }
}

/* ===== Print Styles ===== */
@media print {
    .btn, .card-header, nav, footer {
        display: none !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }
}

.filename-truncated { max-width: 300px; }

/* ===== Inline-style replacements ===== */
/* Registration/recovery code inputs */
.input-code { letter-spacing: 2px; }

/* Large spinner (Bootstrap only ships a small variant) */
.spinner-border-lg { width: 3rem; height: 3rem; }

/* Hero icon on error page */
.icon-hero { font-size: 4rem; }

/* Scrollable metadata preview (Audit log modal) */
.metadata-preview { max-height: 300px; overflow-y: auto; }

.passkey-logo {
    background-color: currentColor;
    display: inline-block;
    height: 1em;
    -webkit-mask: url('/img/FIDO/FIDO_Passkey_mark_A_black.svg') center / 135% no-repeat;
    mask: url('/img/FIDO/FIDO_Passkey_mark_A_black.svg') center / 135% no-repeat;
    vertical-align: -0.125em;
    width: 1em;
}

.manage-nav-horizontal .sidebar-link .passkey-logo {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.passkey-empty-state-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

.passkey-empty-state-icon-large {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.passkey-authenticator {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
}

.passkey-authenticator-icon,
.passkey-authenticator-fallback {
    flex: 0 0 auto;
    height: 1.75rem;
    width: 1.75rem;
}

.passkey-authenticator-icon {
    object-fit: contain;
}

.passkey-authenticator-icon-dark-theme {
    display: none;
}

:root.dark-mode .passkey-authenticator-icon-light-theme {
    display: none;
}

:root.dark-mode .passkey-authenticator-icon-dark-theme {
    display: inline-block;
}

.passkey-authenticator-fallback {
    align-items: center;
    color: var(--primary-light);
    display: inline-flex;
    font-size: 1.35rem;
    justify-content: center;
}

.passkey-interstitial-container { margin: 2rem auto; max-width: 42rem; }
.passkey-interstitial-card { border: 2px solid var(--primary-dark); border-radius: var(--radius-lg); }
.passkey-interstitial-header { margin-bottom: 1.5rem; }
.passkey-enrollment-icon, .passkey-success-icon { color: var(--teal-accent); font-size: 3rem; }
.passkey-lead { font-size: 1.2rem; }
.passkey-trusted-device-note { background: var(--light-bg); border-left: 4px solid var(--teal-accent); margin-bottom: 1.5rem; padding: 1rem; }
.passkey-action-panel { margin: 0 auto; max-width: 32rem; }
.passkey-enrollment-alternatives { border-top: 2px solid var(--border-color); }
.passkey-enrollment-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }