/*
 * Accessibility CSS Module
 * 
 * This stylesheet provides comprehensive accessibility features for the web application.
 * It includes support for multiple accessibility modes:
 * - Font Scaling: Adjustable font sizes for improved readability
 * - Dyslexia Mode: Uses Open Dyslexic font family for users with dyslexia
 * - Contrast Mode: High contrast color scheme with dark background and bright text
 * - Invert Mode: Inverts colors for users with specific visual preferences
 * - Saturate Mode: Enhances color saturation for better visibility
 * Most of the styles are scopoed to make the contrast mode effective across the application, with minimal interference to existing styles.
 */

@font-face {
    font-family: 'Open Dyslexic';
    src: url('../../../font/OpenDyslexic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --accessibility-font-scale: 1;
    --contrast-bg: #000000;
    --contrast-surface: #111111;
    --contrast-surface-alt: #181818;
    --contrast-border: #ffd54f;
    --contrast-text: #ffffff;
    --contrast-muted: #d2d2d2;
    --contrast-link: #ffd54f;
    --contrast-link-hover: #ffe171;
}

html {
    font-size: 100%;
    transition: font-size 0.2s ease, filter 0.5s ease;
}

body {
    font-size: calc(1rem * var(--accessibility-font-scale));
    line-height: 1.5;
}

h1 {
    font-size: calc(2.25rem * var(--accessibility-font-scale));
}

h2 {
    font-size: calc(2rem * var(--accessibility-font-scale));
}

h3 {
    font-size: calc(1.75rem * var(--accessibility-font-scale));
}

h4 {
    font-size: calc(1.5rem * var(--accessibility-font-scale));
}

h5 {
    font-size: calc(1.3rem * var(--accessibility-font-scale));
}

h6 {
    font-size: calc(1.1rem * var(--accessibility-font-scale));
}

p,
span,
a,
li,
label,
button,
.btn,
td,
th,
.table,
.table td, p-3
.card-title,
.section-title,
.subtitle,
.title,
.badge,
.text-muted,
.paragraph,
small {
    font-size: calc(1rem * var(--accessibility-font-scale));
}

/* Dyslexia Mode */
body.dyslexia-mode h1,
body.dyslexia-mode h2,
body.dyslexia-mode h3,
body.dyslexia-mode h4,
body.dyslexia-mode h5,
body.dyslexia-mode h6,
body.dyslexia-mode p,
body.dyslexia-mode span:not(:has(i, svg, img, canvas)),
body.dyslexia-mode a:not(:has(i, svg, img, canvas)),
body.dyslexia-mode label,
body.dyslexia-mode td,
body.dyslexia-mode th,
body.dyslexia-mode button:not(:has(i, svg)),
body.dyslexia-mode .btn:not(:has(i, svg)),
body.dyslexia-mode .card-title,
body.dyslexia-mode .section-title,
body.dyslexia-mode .subtitle,
body.dyslexia-mode .title,
body.dyslexia-mode .text-muted,
body.dyslexia-mode .paragraph,
body.dyslexia-mode .option-label,
body.dyslexia-mode .form-label,
body.dyslexia-mode .form-text,
body.dyslexia-mode input[type="text"]::placeholder,
body.dyslexia-mode input[type="email"]::placeholder,
body.dyslexia-mode input[type="search"]::placeholder,
body.dyslexia-mode textarea::placeholder,
body.dyslexia-mode .select2-selection__rendered,
body.dyslexia-mode .choices__list--single,
body.dyslexia-mode .badge,
body.dyslexia-mode .title-container-activitiGraph,
body.dyslexia-mode .choices__item,
body.dyslexia-mode small {
    font-family: 'Open Dyslexic', sans-serif !important;
}

/* Contrast Mode */
body.contrast-mode {
    background-color: var(--contrast-bg) !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode .container-default-activitiGraph {
    background-color: #000000 !important;
}

body.contrast-mode .header-container,
body.contrast-mode .header,
body.contrast-mode header,
body.contrast-mode .navbar,
body.contrast-mode nav,
body.contrast-mode header .container,
body.contrast-mode header > div,
body.contrast-mode header > *,
body.contrast-mode nav > div,
body.contrast-mode nav > *,
body.contrast-mode .navbar-container,
body.contrast-mode .navbar-inner,
body.contrast-mode .navbar-brand,
body.contrast-mode .navbar-nav,
body.contrast-mode .nav-item,
body.contrast-mode .nav-link,
body.contrast-mode .navbar-collapse,
body.contrast-mode .sidebar,
body.contrast-mode .content-container,
body.contrast-mode .page-title,
body.contrast-mode .section-header,
body.contrast-mode .card,
body.contrast-mode .card-header,
body.contrast-mode .card-body,
body.contrast-mode .table,
body.contrast-mode .table th,
body.contrast-mode .table td,
body.contrast-mode .modal-content,
body.contrast-mode .dropdown-menu,
body.contrast-mode .list-group-item,
body.contrast-mode .offcanvas,
body.contrast-mode .reader-shell,
body.contrast-mode .reader-toolbar,
body.contrast-mode .accessibility-modal-content,
body.contrast-mode .accessibility-option {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
    box-shadow: none !important;
}

body.contrast-mode thead,
body.contrast-mode thead th,
body.contrast-mode th,
body.contrast-mode td,
body.contrast-mode .columnheader {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
}

body.contrast-mode header,
body.contrast-mode nav {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
    border-bottom-color: var(--contrast-border) !important;
}

body.contrast-mode header * {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
}

body.contrast-mode header .container {
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode .form-control,
body.contrast-mode .form-select,
body.contrast-mode textarea,
body.contrast-mode .input-group-text,
body.contrast-mode .select2-container--default .select2-selection--single,
body.contrast-mode .select2-container--default .select2-selection--multiple,
body.contrast-mode .select2-dropdown,
body.contrast-mode .choices__inner,
body.contrast-mode .choices__list--dropdown,
body.contrast-mode .choices__input {
    background-color: var(--contrast-surface-alt) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
    box-shadow: none !important;
}

body.contrast-mode .form-control::placeholder,
body.contrast-mode .choices__placeholder,
body.contrast-mode .select2-selection__placeholder {
    color: var(--contrast-muted) !important;
}

body.contrast-mode h1:not(.map-container *),
body.contrast-mode h2:not(.map-container *),
body.contrast-mode h3:not(.map-container *),
body.contrast-mode h4:not(.map-container *),
body.contrast-mode h5:not(.map-container *),
body.contrast-mode h6:not(.map-container *),
body.contrast-mode .title-container-activitiGraph {
    color: var(--contrast-border) !important;
}

body.contrast-mode p:not(.map-container *),
body.contrast-mode span:not(.map-container *),
body.contrast-mode li:not(.map-container *),
body.contrast-mode td:not(.map-container *),
body.contrast-mode th:not(.map-container *),
body.contrast-mode label:not(.map-container *),
body.contrast-mode a:not(.map-container *) {
    color: var(--contrast-text) !important;
}

body.contrast-mode .card,
body.contrast-mode .card-header,
body.contrast-mode .card-body,
body.contrast-mode .modal-content,
body.contrast-mode .table,
body.contrast-mode .dropdown-menu,
body.contrast-mode .list-group-item,
body.contrast-mode .form-control,
body.contrast-mode .form-select,
body.contrast-mode .offcanvas,
body.contrast-mode .border-gray-200 {
    border-color: #ffd54f !important;
    border-width: 2px !important;
    border-style: solid !important;
}

body.contrast-mode .shadow,
body.contrast-mode .shadow-sm,
body.contrast-mode .shadow-md,
body.contrast-mode .shadow-lg,
body.contrast-mode .shadow-xl,
body.contrast-mode .shadow-2xl {
    box-shadow: none !important;
    border: 2px solid var(--contrast-border) !important;
}

body.contrast-mode .bg-white,
body.contrast-mode .bg-gray-50,
body.contrast-mode .bg-gray-100,
body.contrast-mode .bg-gray-200,
body.contrast-mode .bg-gray-300,
body.contrast-mode .bg-orange-50,
body.contrast-mode [class*="bg-orange"],
body.contrast-mode .card__header,
body.contrast-mode .modal-header,
body.contrast-mode #continueReadingModal .modal-header {
    background-color: var(--contrast-surface) !important;
    background: var(--contrast-surface) !important;
}

body.contrast-mode .card__header[style*="background: #FFF"],
body.contrast-mode .card__header[style*="background:#FFF"],
body.contrast-mode .card__header[style*="background: #ffffff"],
body.contrast-mode .card__header[style*="background:#ffffff"],
body.contrast-mode .card__header[style] {
    background-color: var(--contrast-surface) !important;
    background: var(--contrast-surface) !important;
}

body.contrast-mode .text-gray-800,
body.contrast-mode .text-gray-700,
body.contrast-mode .text-gray-600,
body.contrast-mode .text-gray-500,
body.contrast-mode .text-gray-400,
body.contrast-mode .text-gray-300,
body.contrast-mode .text-gray-200,
body.contrast-mode .text-gray-100,
body.contrast-mode .text-black,
body.contrast-mode .text-dark {
    color: var(--contrast-text) !important;
}

body.contrast-mode .text-white {
    color: var(--contrast-text) !important;
}

/* Override Tailwind colors on contrast mode */
body.contrast-mode .bg-indigo-50,
body.contrast-mode .text-indigo-900 {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.contrast-mode [class*="bg-indigo"],
body.contrast-mode [class*="bg-purple"],
body.contrast-mode [class*="bg-fuchsia"],
body.contrast-mode [class*="bg-violet"],
body.contrast-mode [class*="bg-blue"],
body.contrast-mode [class*="bg-cyan"],
body.contrast-mode [class*="bg-rose"],
body.contrast-mode [class*="bg-pink"],
body.contrast-mode [class*="bg-red"],
body.contrast-mode [class*="bg-yellow"],
body.contrast-mode [class*="bg-green"],
body.contrast-mode [class*="text-indigo"],
body.contrast-mode [class*="text-purple"],
body.contrast-mode [class*="text-fuchsia"],
body.contrast-mode [class*="text-violet"],
body.contrast-mode [class*="text-blue"],
body.contrast-mode [class*="text-cyan"],
body.contrast-mode [class*="text-rose"],
body.contrast-mode [class*="text-pink"],
body.contrast-mode [class*="text-red"],
body.contrast-mode [class*="text-yellow"],
body.contrast-mode [class*="text-green"] {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode button[style*="color: #EC4899"],
body.contrast-mode button[style*="color: rgb(236, 72, 153)"] {
    color: #ffd54f !important;
}

body.contrast-mode [class*="bg-gradient-"] {
    background-image: none !important;
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode .calendar-component .card,
body.contrast-mode .calendar-component .card.bg-gradient-to-br {
    background: #111111 !important;
    border: 4px solid var(--contrast-border) !important;
    box-shadow: none !important;
}

body.contrast-mode .calendar-component h3,
body.contrast-mode .calendar-component h4,
body.contrast-mode .calendar-component button,
body.contrast-mode .calendar-component .text-rose-600,
body.contrast-mode .calendar-component .text-rose-700,
body.contrast-mode .calendar-component .text-rose-900 {
    color: var(--contrast-text) !important;
}

body.contrast-mode .calendar-component .grid > div {
    border: 1px solid var(--contrast-border) !important;
}

body.contrast-mode .calendar-component .grid > div.bg-white {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode .calendar-component .grid > div.bg-red-300,
body.contrast-mode .calendar-component .grid > div.bg-yellow-300,
body.contrast-mode .calendar-component .grid > div.bg-green-300 {
    color: #000000 !important;
    border-color: #000000 !important;
}

body.contrast-mode .calendar-component .grid > div.bg-red-300 {
    background-color: #ff5252 !important;
}

body.contrast-mode .calendar-component .grid > div.bg-yellow-300 {
    background-color: #ffd740 !important;
}

body.contrast-mode .calendar-component .grid > div.bg-green-300 {
    background-color: #69f0ae !important;
}

body.contrast-mode .navbar * {
    background-color: inherit !important;
    border-color: var(--contrast-border) !important;
}

body.contrast-mode .navbar a,
body.contrast-mode .navbar button,
body.contrast-mode .navbar span {
    color: var(--contrast-text) !important;
}

body.contrast-mode .navbar a:hover,
body.contrast-mode .navbar button:hover {
    color: var(--contrast-text) !important;
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode a:hover,
body.contrast-mode button:hover,
body.contrast-mode .nav-link:hover,
body.contrast-mode .menu a:hover,
body.contrast-mode .table tbody tr:hover,
body.contrast-mode .list-group-item:hover,
body.contrast-mode .card:hover,
body.contrast-mode .dropdown-item:hover,
body.contrast-mode .btn:hover {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: #ffd54f !important;
    text-decoration: none !important;
}

body.contrast-mode table tbody tr:hover,
body.contrast-mode .table tbody tr:hover,
body.contrast-mode table tbody tr:hover td,
body.contrast-mode .table tbody tr:hover td {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
}

body.contrast-mode a:hover,
body.contrast-mode button:hover,
body.contrast-mode .nav-link:hover,
body.contrast-mode .btn:hover {
    outline: 2px solid #ffd54f !important;
    outline-offset: 2px !important;
}

body.contrast-mode .nav-link,
body.contrast-mode .menu a,
body.contrast-mode .breadcrumb a {
    color: var(--contrast-link) !important;
}

body.contrast-mode .btn,
body.contrast-mode .badge,
body.contrast-mode .pagination .page-link,
body.contrast-mode .accessibility-option[aria-pressed='true'] {
    background-color: var(--contrast-link) !important;
    color: #000000 !important;
    border-color: var(--contrast-link) !important;
}

body.contrast-mode .accessibility-option[aria-pressed='true'],
body.contrast-mode .accessibility-filter-option[aria-pressed='true'],
body.contrast-mode .accessibility-preset-option[aria-pressed='true'] {
    background-color: var(--contrast-link) !important;
    color: #000000 !important;
    border-color: #000000 !important;
    border-width: 3px !important;
    box-shadow: inset 0 0 0 2px #000000, 0 0 0 2px var(--contrast-link) !important;
}

body.contrast-mode .btn-outline,
body.contrast-mode [class*='btn-outline'] {
    background-color: transparent !important;
    color: var(--contrast-link) !important;
    border-color: var(--contrast-link) !important;
}

body.contrast-mode .dropdown {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
    border-width: 2px !important;
}

body.contrast-mode .dropdown .option {
    color: var(--contrast-text) !important;
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode .dropdown .option:hover {
    background-color: rgba(255, 213, 79, 0.2) !important;
    border-left: 3px solid #ffd54f !important;
}

body.contrast-mode .select-box {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode .select-box input {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .custom-multi-select {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .accessibility-modal-content,
body.contrast-mode .accessibility-modal-header,
body.contrast-mode .accessibility-modal-body,
body.contrast-mode .accessibility-option,
body.contrast-mode .accessibility-color-filters-submenu,
body.contrast-mode .accessibility-cursor-submenu,
body.contrast-mode .accessibility-saturate-submenu,
body.contrast-mode .accessibility-filter-option,
body.contrast-mode .accessibility-reset-section,
body.contrast-mode .accessibility-reset-btn,
body.contrast-mode .accessibility-presets-btn,
body.contrast-mode .accessibility-presets-submenu,
body.contrast-mode .accessibility-preset-option,
body.contrast-mode .colorFiltersMenu,
body.contrast-mode #colorFiltersMenu,
body.contrast-mode #cursorMenu,
body.contrast-mode #saturateMenu,
body.contrast-mode #presetsMenu {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .accessibility-option:hover,
body.contrast-mode .accessibility-filter-option:hover,
body.contrast-mode .accessibility-preset-option:hover {
    background-color: rgba(255, 213, 79, 0.2) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .accessibility-presets-btn:hover {
    background-color: rgba(255, 213, 79, 0.2) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .accessibility-presets-btn[aria-expanded="true"] {
    background-color: #ffd54f !important;
    color: #000000 !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .accessibility-option[aria-pressed='true']:hover,
body.contrast-mode .accessibility-filter-option[aria-pressed='true']:hover,
body.contrast-mode .accessibility-preset-option[aria-pressed='true']:hover {
    background-color: #ffeb3b !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

body.contrast-mode tbody {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode td {
    color: var(--contrast-text) !important;
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode .download-menu {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .download-menu button {
    color: var(--contrast-text) !important;
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode .download-menu button:hover {
    background-color: rgba(255, 213, 79, 0.2) !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode #paginationContainer .btn {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode #paginationContainer .btn.active {
    background-color: #ffd54f !important;
    color: #000000 !important;
}

body.contrast-mode #citySelect.form-control {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode #citySelect.form-control option {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode .fixed-height-select {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode .pagination .page-item .page-link {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode .pagination .page-item.active .page-link {
    background-color: #ffd54f !important;
    border-color: #ffd54f !important;
    color: #000000 !important;
}

body.contrast-mode .dashboard-card {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .report-shell {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
    color: var(--contrast-text) !important;
}

body.contrast-mode .title-reports {
    color: var(--contrast-link) !important;
}

body.contrast-mode .subtitle-reports {
    color: var(--contrast-muted) !important;
}

body.contrast-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--contrast-surface-alt) !important;
}

body.contrast-mode .table-striped tbody tr:nth-of-type(even),
body.contrast-mode .table-hover tbody tr:hover {
    background-color: #1f1f1f !important;
}

body.contrast-mode .text-muted,
body.contrast-mode .subtitle {
    color: var(--contrast-muted) !important;
}

body.contrast-mode footer,
body.contrast-mode .app-footer {
    background-color: var(--contrast-bg) !important;
    color: var(--contrast-text) !important;
    border-top: 2px solid var(--contrast-border) !important;
}

body.contrast-mode .badge,
body.contrast-mode .status,
body.contrast-mode .tag {
    border-color: var(--contrast-border) !important;
}

body.contrast-mode .page-title,
body.contrast-mode .section-title,
body.contrast-mode .card-title,
body.contrast-mode .text-dark,
body.contrast-mode h1,
body.contrast-mode h2,
body.contrast-mode h3,
body.contrast-mode h4,
body.contrast-mode h5,
body.contrast-mode h6 {
    color: var(--contrast-link) !important;
}

/* Invert Colors Mode */
html.invert-mode {
    filter: invert(1) hue-rotate(180deg);
    background-color: #000000;
}

html.invert-mode img,
html.invert-mode video,
html.invert-mode [style*="background-image"] {
    filter: invert(1) hue-rotate(180deg);
}

html.invert-mode iframe {
    filter: invert(1) hue-rotate(180deg);
}

html.invert-mode .accessibility-fab {
    filter: invert(1) hue-rotate(180deg);
}

html.invert-mode .accessibility-modal,
html.invert-mode .accessibility-modal-backdrop,
html.invert-mode .accessibility-modal-content {
    filter: invert(1) hue-rotate(180deg);
}


html.saturate-mode {
    filter: saturate(0);
}

html.saturate-mode img,
html.saturate-mode video,
html.saturate-mode [style*="background-image"] {
    filter: saturate(0);
}

html.saturate-mode iframe {
    filter: saturate(0);
}

html.saturate-mode .accessibility-fab {
    filter: saturate(0);
}

html.saturate-mode .accessibility-modal,
html.saturate-mode .accessibility-modal-backdrop,
html.saturate-mode .accessibility-modal-content {
    filter: saturate(0);
}

html.saturate2-mode {
    filter: saturate(1.5);
}

html.saturate2-mode img,
html.saturate2-mode video,
html.saturate2-mode [style*="background-image"] {
    filter: saturate(1.5);
}

html.saturate2-mode iframe {
    filter: saturate(1.5);
}

html.saturate2-mode .accessibility-fab {
    filter: saturate(1.5);
}

html.saturate2-mode .accessibility-modal,
html.saturate2-mode .accessibility-modal-backdrop,
html.saturate2-mode .accessibility-modal-content {
    filter: saturate(1.5);
}

.header-container {
    top: 0;
    width: 100%;
    z-index: 1000;
}

.content-container {
    padding-top: 80px;
}

.accessibility-option[aria-pressed="true"],
.accessibility-filter-option[aria-pressed="true"],
.accessibility-preset-option[aria-pressed="true"] {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
    border-width: 3px !important;
    box-shadow: 0 0 0 2px #7c3aed, 0 2px 8px rgba(124, 58, 237, 0.5);
    font-weight: 600;
}

.accessibility-option[aria-pressed="true"]:hover,
.accessibility-filter-option[aria-pressed="true"]:hover,
.accessibility-preset-option[aria-pressed="true"]:hover {
    background: #6d28d9;
    border-color: #6d28d9;
    box-shadow: 0 0 0 2px #6d28d9, 0 4px 12px rgba(124, 58, 237, 0.6);
}

/* High Contrast Sidebar & Navbar Enhancements */
body.contrast-mode .sidebar,
body.contrast-mode .sidebar-menu,
body.contrast-mode .sidebar-menu .sub-menu,
body.contrast-mode .navbar,
body.contrast-mode .navbar-collapse {
    background-color: var(--contrast-surface) !important;
    border-color: #ffd54f !important;
}

body.contrast-mode .sidebar-menu > li,
body.contrast-mode .sidebar-menu .sub-menu > li {
    border: 1px solid #ffd54f !important;
    border-radius: 8px;
    box-shadow: none !important;
    margin-bottom: 4px;
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode .sidebar-menu li a {
    color: var(--contrast-text) !important;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none !important;
    text-decoration: none !important;
}

body.contrast-mode .sidebar-menu li a:hover,
body.contrast-mode .sidebar-menu .sub-menu li a:hover,
body.contrast-mode .menu_has_children > a:hover {
    background-color: rgba(255, 213, 79, 0.15) !important;
    color: var(--contrast-link) !important;
    outline: 2px solid #ffd54f !important;
    outline-offset: 2px;
}

body.contrast-mode .menu_has_children + .sub-menu,
body.contrast-mode .menu_has_children .sub-menu {
    border-radius: 8px;
    padding: 4px 0;
    margin-top: 4px;
    background-color: var(--contrast-surface) !important;
}

body.contrast-mode .sidebar-menu .menu_has_children.active,
body.contrast-mode .sidebar-menu .menu_has_children.active > a {
    background-color: rgba(255, 213, 79, 0.2) !important;
}


body.contrast-mode .menu-toggle::before,
body.contrast-mode .menu-toggle.active::before {
    background-color: #ffd54f !important;
}

body.contrast-mode .menu-toggle::after {
    background-color: #ffd54f !important;
}

body.contrast-mode .menu-toggle,
body.contrast-mode .menu-toggle.active {
    background-color: transparent !important;
}

/* Map Legend Contrast Mode */
body.contrast-mode .legend {
    background-color: var(--contrast-surface) !important;
    border: 2px solid var(--contrast-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.contrast-mode .legend-title {
    color: var(--contrast-text) !important;
    border-bottom-color: var(--contrast-border) !important;
    font-weight: bold;
}

body.contrast-mode .legend-items {
    color: var(--contrast-text) !important;
}

body.contrast-mode .legend-item {
    color: var(--contrast-text) !important;
    padding: 6px;
    border-radius: 4px;
}

body.contrast-mode .legend-item:hover {
    background-color: rgba(255, 213, 79, 0.15) !important;
}

body.contrast-mode .legend-item p {
    color: var(--contrast-text) !important;
}

body.contrast-mode .legend-color {
    border: 2px solid var(--contrast-border) !important;
}

body.contrast-mode .legend-label {
    color: var(--contrast-text) !important;
}

body.contrast-mode .btn-base {
    background-color: var(--contrast-link) !important;
    color: #000000 !important;
    border-color: var(--contrast-link) !important;
    border: 2px solid var(--contrast-link) !important;
    font-weight: 600;
}

body.contrast-mode .btn-base:hover,
body.contrast-mode .btn-base:focus {
    background-color: #ffeb3b !important;
    color: #000000 !important;
    border-color: #000000 !important;
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

body.contrast-mode .btn-ghost {
    background-color: transparent !important;
    color: var(--contrast-link) !important;
    border: 2px solid var(--contrast-link) !important;
    font-weight: 600;
}

body.contrast-mode .btn-ghost:hover,
body.contrast-mode .btn-ghost:focus {
    background-color: var(--contrast-link) !important;
    color: #000000 !important;
    border-color: var(--contrast-link) !important;
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

body.contrast-mode .btn-group-responsive .btn-base,
body.contrast-mode .btn-group-responsive .btn-ghost {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ====== KID DATE (Student Activity) ====== */
body.contrast-mode .kid-date.item {
    background: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
}

body.contrast-mode .kid-date .icon {
    color: var(--contrast-link) !important;
}

body.contrast-mode .kid-subtitle {
    color: var(--contrast-text) !important;
}

body.contrast-mode .kid-bg {
    background: #2a2a2a !important;
    border-radius: 16px;
}

/* ====== KID MODAL (Student Activity) ====== */
body.contrast-mode .kid-modal {
    background: var(--contrast-surface) !important;
}

body.contrast-mode .kid-modal .q-item {
    color: var(--contrast-text) !important;
}

body.contrast-mode .kid-chip {
    color: var(--contrast-text) !important;
    background: var(--contrast-surface-alt) !important;
}

body.contrast-mode .nav.nav-tabs.kid-tabs.mb-4 {
    color: var(--contrast-link) !important;
}

body.contrast-mode .q-dot {
    background-color: var(--contrast-surface) !important;
    color: var(--contrast-text) !important;
    border-color: var(--contrast-border) !important;
}

body.contrast-mode .q-dot.ok,
body.contrast-mode .q-dot.bad {
    background: var(--contrast-border) !important;
    color: #000000 !important;
}