/*! * Bootstrap High Contrast Theme * Overlays on top of Bootstrap 5.3.3 light or dark themes for WCAG AAA compliance. * Activated by data-bs-high-contrast attribute on . * Works with both data-bs-theme="light" and data-bs-theme="dark". * * Contrast targets: * - Normal text: >= 7:1 against background * - Large text: >= 4.5:1 against background * - UI components / focus indicators: >= 3:1 against adjacent colors */ /* ══════════════════════════════════════════════════ Shared high-contrast rules (light + dark) ══════════════════════════════════════════════════ */ [data-bs-high-contrast] { /* Focus ring — thick and high contrast */ --bs-focus-ring-width: 0.2rem; --bs-focus-ring-opacity: 1; /* Links always underlined */ --bs-link-decoration: underline; } /* ── Focus indicator overrides ── */ [data-bs-high-contrast] :focus-visible { outline: 3px solid var(--bs-emphasis-color) !important; outline-offset: 2px; } [data-bs-high-contrast] .btn:focus-visible { box-shadow: 0 0 0 3px var(--bs-emphasis-color) !important; } /* ── Links: always underlined ── */ [data-bs-high-contrast] a { text-decoration: underline; } [data-bs-high-contrast] a:hover { text-decoration: underline; text-decoration-thickness: 2px; } /* Sidebar nav exception */ [data-bs-high-contrast] .sidebar-nav a, [data-bs-high-contrast] .sidebar-nav .nav-link:hover { text-decoration: none; } [data-bs-high-contrast] .sidebar-nav .nav-item:hover .nav-link-label { text-decoration: underline; } /* Navigation links in menus/navbars are exempt from underline */ [data-bs-high-contrast] .nav-link, [data-bs-high-contrast] .navbar-brand, [data-bs-high-contrast] .dropdown-item, [data-bs-high-contrast] .sidebar-nav a { text-decoration: none; } [data-bs-high-contrast] .nav-link:hover, [data-bs-high-contrast] .dropdown-item:hover { text-decoration: underline; } /* ── Buttons — solid borders ── */ [data-bs-high-contrast] .btn { border-width: 2px; border-style: solid; font-weight: 600; } /* ── Form controls — strong borders ── */ [data-bs-high-contrast] .form-control, [data-bs-high-contrast] .form-select { border-width: 2px; border-style: solid; } [data-bs-high-contrast] .form-control:focus, [data-bs-high-contrast] .form-select:focus { box-shadow: 0 0 0 3px var(--bs-emphasis-color); } /* ── Tables — visible borders ── */ [data-bs-high-contrast] .table th { border-width: 2px; font-weight: 700; } /* ── Cards — strong borders ── */ [data-bs-high-contrast] .card { border-width: 2px; border-style: solid; } [data-bs-high-contrast] .card-header { border-bottom-width: 2px; font-weight: 700; } [data-bs-high-contrast] .card-group > .card:hover { z-index: 1; } /* ── Badges ── */ [data-bs-high-contrast] .badge { font-weight: 700; } /* ── Alerts — strong borders ── */ [data-bs-high-contrast] .alert { border-width: 2px; } /* ── Dropdowns ── */ [data-bs-high-contrast] .dropdown-menu { border-width: 2px; } /* ── Modals ── */ [data-bs-high-contrast] .modal-content { border-width: 2px; } [data-bs-high-contrast] .modal-header { border-bottom-width: 2px; } [data-bs-high-contrast] .modal-footer { border-top-width: 2px; } /* ── Navbar ── */ [data-bs-high-contrast] .navbar { border-bottom-width: 2px; border-bottom-style: solid; } /* ── Breadcrumbs ── */ [data-bs-high-contrast] .breadcrumb-item.active { font-weight: 600; } /* ── Pagination ── */ [data-bs-high-contrast] .page-link { border-width: 2px; } /* ── Disabled states — must be at least 4.5:1 ── */ [data-bs-high-contrast] .disabled, [data-bs-high-contrast] :disabled { opacity: 1; } /* ── Reduce motion in high contrast (common user preference) ── */ @media (prefers-reduced-motion: reduce) { [data-bs-high-contrast] * { transition: none !important; animation: none !important; } } /* ══════════════════════════════════════════════════ High Contrast LIGHT overrides ══════════════════════════════════════════════════ */ [data-bs-high-contrast][data-bs-theme="light"] { color-scheme: light; /* Body */ --bs-body-color: #000; --bs-body-color-rgb: 0, 0, 0; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255; /* Emphasis */ --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0; /* Secondary / Tertiary */ --bs-secondary-color: #1a1a1a; --bs-secondary-color-rgb: 26, 26, 26; --bs-secondary-bg: #e6e6e6; --bs-secondary-bg-rgb: 230, 230, 230; --bs-tertiary-color: #333; --bs-tertiary-color-rgb: 51, 51, 51; --bs-tertiary-bg: #f0f0f0; --bs-tertiary-bg-rgb: 240, 240, 240; /* Primary — darker teal for 7:1 on white */ --bs-primary: #0a524f; --bs-primary-rgb: 10, 82, 79; /* Semantic colors — darkened for 7:1 on white */ --bs-success: #0d5e30; --bs-success-rgb: 13, 94, 48; --bs-info: #086170; --bs-info-rgb: 8, 97, 112; --bs-warning: #6b4c00; --bs-warning-rgb: 107, 76, 0; --bs-danger: #8b1a22; --bs-danger-rgb: 139, 26, 34; /* Text emphasis */ --bs-primary-text-emphasis: #042a28; --bs-secondary-text-emphasis: #1a1a1a; --bs-success-text-emphasis: #062e18; --bs-info-text-emphasis: #043038; --bs-warning-text-emphasis: #352600; --bs-danger-text-emphasis: #450d11; --bs-light-text-emphasis: #1a1a1a; --bs-dark-text-emphasis: #1a1a1a; /* Subtle backgrounds */ --bs-primary-bg-subtle: #e0f0ef; --bs-secondary-bg-subtle: #e6e6e6; --bs-success-bg-subtle: #d4edda; --bs-info-bg-subtle: #d1ecf1; --bs-warning-bg-subtle: #fff3cd; --bs-danger-bg-subtle: #f8d7da; --bs-light-bg-subtle: #fafafa; --bs-dark-bg-subtle: #d6d6d6; /* Borders */ --bs-primary-border-subtle: #0a524f; --bs-secondary-border-subtle: #666; --bs-success-border-subtle: #0d5e30; --bs-info-border-subtle: #086170; --bs-warning-border-subtle: #6b4c00; --bs-danger-border-subtle: #8b1a22; --bs-light-border-subtle: #999; --bs-dark-border-subtle: #333; --bs-border-color: #000; --bs-border-color-translucent: rgba(0, 0, 0, 0.5); /* Links */ --bs-link-color: #0a524f; --bs-link-color-rgb: 10, 82, 79; --bs-link-hover-color: #042a28; --bs-link-hover-color-rgb: 4, 42, 40; /* Focus ring */ --bs-focus-ring-color: #000; /* Form validation */ --bs-form-valid-color: #0d5e30; --bs-form-valid-border-color: #0d5e30; --bs-form-invalid-color: #8b1a22; --bs-form-invalid-border-color: #8b1a22; /* Heading */ --bs-heading-color: #000; } /* Light-specific component overrides */ [data-bs-high-contrast][data-bs-theme="light"] .btn-primary { background-color: #0a524f; border-color: #042a28; color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .btn-primary:hover { background-color: #042a28; border-color: #000; color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .btn-outline-primary { border-color: #0a524f; color: #0a524f; } [data-bs-high-contrast][data-bs-theme="light"] .btn-outline-primary:hover { background-color: #0a524f; color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .form-control, [data-bs-high-contrast][data-bs-theme="light"] .form-select { border-color: #000; color: #000; background-color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .form-control:focus, [data-bs-high-contrast][data-bs-theme="light"] .form-select:focus { border-color: #0a524f; } [data-bs-high-contrast][data-bs-theme="light"] .form-control::placeholder { color: #595959; opacity: 1; } [data-bs-high-contrast][data-bs-theme="light"] .form-control:disabled, [data-bs-high-contrast][data-bs-theme="light"] .form-control[readonly] { background-color: #e6e6e6; color: #333; border-color: #666; } [data-bs-high-contrast][data-bs-theme="light"] .table { --bs-table-color: #000; --bs-table-bg: #fff; --bs-table-border-color: #000; border-color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #f0f0f0; color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .formpanel .cGrid th, [data-bs-high-contrast][data-bs-theme="light"] .formpanel .cGrid th a { color: #000 !important; } [data-bs-high-contrast][data-bs-theme="light"] .formpanel .cGrid tbody tr td, [data-bs-high-contrast][data-bs-theme="light"] .formpanel .cGrid tbody tr td a { color: #000 !important; } [data-bs-high-contrast][data-bs-theme="light"] .table-hover > tbody > tr:hover > th, [data-bs-high-contrast][data-bs-theme="light"] .table-hover > tbody > tr:hover > th a { color: #fff !important; } [data-bs-high-contrast][data-bs-theme="light"] .formpanel .cGrid tbody tr td i.fa-solid.fa-globe[title="Standard Report"] { color: #000 !important; } [data-bs-high-contrast][data-bs-theme="light"] .card { border-color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .card-header { border-bottom-color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .badge { border: 1px solid #000; } [data-bs-high-contrast][data-bs-theme="light"] .alert { color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .dropdown-menu { border-color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .dropdown-item:focus, [data-bs-high-contrast][data-bs-theme="light"] .dropdown-item:hover { background-color: #0a524f; color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .modal-content { border-color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .navbar { border-bottom-color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .breadcrumb-item + .breadcrumb-item::before { color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .breadcrumb-item.active { color: #000; } [data-bs-high-contrast][data-bs-theme="light"] .page-link { border-color: #000; color: #0a524f; } [data-bs-high-contrast][data-bs-theme="light"] .page-link:hover, [data-bs-high-contrast][data-bs-theme="light"] .page-link:focus { background-color: #0a524f; color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .page-item.active .page-link { background-color: #0a524f; border-color: #000; color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .page-item.disabled .page-link { color: #595959; border-color: #666; } [data-bs-high-contrast][data-bs-theme="light"] .tooltip-inner { background-color: #000; color: #fff; border: 1px solid #fff; } [data-bs-high-contrast][data-bs-theme="light"] .progress { border: 1px solid #000; background-color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .progress-bar { background-color: #0a524f; } [data-bs-high-contrast][data-bs-theme="light"] .btn:disabled { border-color: #666; background-color: #e6e6e6; color: #595959; } [data-bs-high-contrast][data-bs-theme="light"] .text-muted { color: #595959 !important; } [data-bs-high-contrast][data-bs-theme="light"] .text-body-secondary { color: #333 !important; } [data-bs-high-contrast][data-bs-theme="light"] ::selection { background-color: #0a524f; color: #fff; } [data-bs-high-contrast][data-bs-theme="light"] .fa-star.text-warning { color: rgb(255, 193, 7, 1) !important; } /* ══════════════════════════════════════════════════ High Contrast DARK overrides ══════════════════════════════════════════════════ */ [data-bs-high-contrast][data-bs-theme="dark"] { color-scheme: dark; /* Body — pure black bg, pure white text */ --bs-body-color: #fff; --bs-body-color-rgb: 255, 255, 255; --bs-body-bg: #000; --bs-body-bg-rgb: 0, 0, 0; /* Emphasis */ --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255; /* Secondary / Tertiary */ --bs-secondary-color: #e6e6e6; --bs-secondary-color-rgb: 230, 230, 230; --bs-secondary-bg: #1a1a1a; --bs-secondary-bg-rgb: 26, 26, 26; --bs-tertiary-color: #ccc; --bs-tertiary-color-rgb: 204, 204, 204; --bs-tertiary-bg: #111; --bs-tertiary-bg-rgb: 17, 17, 17; /* Primary — dark teal for bg-primary (white text 11.8:1). Bright teal (#00e5df) applied via explicit overrides on text/link/border utilities. */ --bs-primary: #003835; --bs-primary-rgb: 0, 56, 53; /* Semantic colors — brightened for 7:1 on black */ --bs-success: #75d49a; --bs-success-rgb: 117, 212, 154; --bs-info: #6edff6; --bs-info-rgb: 110, 223, 246; --bs-warning: #ffe066; --bs-warning-rgb: 255, 224, 102; --bs-danger: #f5a0a7; --bs-danger-rgb: 245, 160, 167; /* Text emphasis */ --bs-primary-text-emphasis: #80f2ee; --bs-secondary-text-emphasis: #e6e6e6; --bs-success-text-emphasis: #a3e8bc; --bs-info-text-emphasis: #a3effa; --bs-warning-text-emphasis: #fff0a3; --bs-danger-text-emphasis: #f9c9cd; --bs-light-text-emphasis: #fff; --bs-dark-text-emphasis: #e6e6e6; /* Subtle backgrounds — very dark tints */ --bs-primary-bg-subtle: #0a1f1e; --bs-secondary-bg-subtle: #111; --bs-success-bg-subtle: #071a0e; --bs-info-bg-subtle: #071a1f; --bs-warning-bg-subtle: #1a1500; --bs-danger-bg-subtle: #1f0a0c; --bs-light-bg-subtle: #1a1a1a; --bs-dark-bg-subtle: #0a0a0a; /* Borders — white on black */ --bs-primary-border-subtle: #00e5df; --bs-secondary-border-subtle: #999; --bs-success-border-subtle: #75d49a; --bs-info-border-subtle: #6edff6; --bs-warning-border-subtle: #ffe066; --bs-danger-border-subtle: #f5a0a7; --bs-light-border-subtle: #666; --bs-dark-border-subtle: #ccc; --bs-border-color: #fff; --bs-border-color-translucent: rgba(255, 255, 255, 0.5); /* Links */ --bs-link-color: #00e5df; --bs-link-color-rgb: 0, 229, 223; --bs-link-hover-color: #80f2ee; --bs-link-hover-color-rgb: 128, 242, 238; /* Focus ring */ --bs-focus-ring-color: #fff; /* Form validation */ --bs-form-valid-color: #75d49a; --bs-form-valid-border-color: #75d49a; --bs-form-invalid-color: #f5a0a7; --bs-form-invalid-border-color: #f5a0a7; /* Heading */ --bs-heading-color: #fff; } /* Dark-specific component overrides */ [data-bs-high-contrast][data-bs-theme="dark"] .btn-primary { background-color: #00e5df; border-color: #80f2ee; color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .btn-primary:hover { background-color: #80f2ee; border-color: #fff; color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .btn-outline-primary { border-color: #00e5df; color: #00e5df; } [data-bs-high-contrast][data-bs-theme="dark"] .btn-outline-primary:hover { background-color: #00e5df; color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] div.inputpanel.disableButton { opacity: 0.2 !important; } [data-bs-high-contrast][data-bs-theme="dark"] .form-control, [data-bs-high-contrast][data-bs-theme="dark"] .form-select { border-color: #fff; color: #fff; background-color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .form-control:focus, [data-bs-high-contrast][data-bs-theme="dark"] .form-select:focus { border-color: #00e5df; } [data-bs-high-contrast][data-bs-theme="dark"] .form-control::placeholder { color: #aaa; opacity: 1; } [data-bs-high-contrast][data-bs-theme="dark"] .form-control:disabled, [data-bs-high-contrast][data-bs-theme="dark"] .form-control[readonly] { background-color: #1a1a1a; color: #ccc; border-color: #666; } [data-bs-high-contrast][data-bs-theme="dark"] .table { --bs-table-color: #fff; --bs-table-bg: #000; --bs-table-border-color: #fff; border-color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #111; color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .card { border-color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .card-header { border-bottom-color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .badge { border: 1px solid #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .alert { color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .dropdown-menu { border-color: #fff; background-color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .dropdown-item:focus, [data-bs-high-contrast][data-bs-theme="dark"] .dropdown-item:hover { background-color: #00e5df; color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .modal-content { border-color: #fff; background-color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .navbar { border-bottom-color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .breadcrumb-item.active { color: #fff; } [data-bs-high-contrast][data-bs-theme="dark"] .page-link { border-color: #fff; color: #00e5df; background-color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .page-link:hover, [data-bs-high-contrast][data-bs-theme="dark"] .page-link:focus { background-color: #00e5df; color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .page-item.active .page-link { background-color: #00e5df; border-color: #fff; color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .page-item.disabled .page-link { color: #aaa; border-color: #666; } [data-bs-high-contrast][data-bs-theme="dark"] .tooltip-inner { background-color: #fff; color: #000; border: 1px solid #000; } [data-bs-high-contrast][data-bs-theme="dark"] .progress { border: 1px solid #fff; background-color: #000; } [data-bs-high-contrast][data-bs-theme="dark"] .progress-bar { background-color: #003835; } [data-bs-high-contrast][data-bs-theme="dark"] .btn:disabled { border-color: #666; background-color: #1a1a1a; color: #aaa; } [data-bs-high-contrast][data-bs-theme="dark"] .text-muted { color: #aaa !important; } [data-bs-high-contrast][data-bs-theme="dark"] .text-body-secondary { color: #ccc !important; } [data-bs-high-contrast][data-bs-theme="dark"] ::selection { background-color: #003835; color: #000; } /* Text/link/border utilities need bright teal for readability on dark backgrounds */ [data-bs-high-contrast][data-bs-theme="dark"] .text-primary { color: #00e5df !important; } [data-bs-high-contrast][data-bs-theme="dark"] .border-primary { border-color: #00e5df !important; } [data-bs-high-contrast][data-bs-theme="dark"] .link-primary { color: #00e5df !important; } /* Reports export panel */ [data-bs-high-contrast][data-bs-theme="dark"] .export-panel { background-color: #3d3535 !important; } /* Receipt Wallet Carousel */ [data-bs-high-contrast][data-bs-theme="dark"] .wallet-receipt-name { color: #00e5df !important; } [data-bs-high-contrast][data-bs-theme="dark"] #walletReceiptCarousel .slick-prev:before, [data-bs-high-contrast][data-bs-theme="dark"] #walletReceiptCarousel .slick-next:before { color: #00e5df !important; opacity: 1 !important; } [data-bs-high-contrast][data-bs-theme="dark"] #walletReceiptCarousel .slick-prev.slick-disabled:before, [data-bs-high-contrast][data-bs-theme="dark"] #walletReceiptCarousel .slick-next.slick-disabled:before { color: #666 !important; opacity: 0.5 !important; } [data-bs-high-contrast][data-bs-theme="dark"] #walletReceiptCarousel .slick-dots li button:before { color: #00e5df !important; opacity: 0.75 !important; } [data-bs-high-contrast][data-bs-theme="dark"] #walletReceiptCarousel .slick-dots li.slick-active button:before { color: #00e5df !important; opacity: 1 !important; }