/* * Sensorama/Letrinha visual-theme compatibility layer. * * This file is intentionally loaded after page/component styles. It gives legacy * markup a semantic dark/high-contrast presentation without flattening every * control into one color. Dynamic/inline legacy styles are tagged by * theme-compatibility.js and resolved here through CSS variables. */ @media screen { html[data-bs-theme="dark"] body:not(.contrast-mode) { --theme-page: #11151c; --theme-surface: #1a2028; --theme-surface-raised: #222a34; --theme-surface-modal: #27313d; --theme-input: #151a21; --theme-hover: #2b3541; --theme-selected: #303d4b; --theme-border: #46515f; --theme-border-strong: #718096; --theme-text: #f1f5f9; --theme-text-strong: #ffffff; --theme-muted: #b7c1ce; --theme-link: #8ec5ff; --theme-focus: color-mix(in srgb, var(--app-base-color) 62%, #ffffff); --theme-focus-ring: color-mix(in srgb, var(--app-base-color) 28%, transparent); --theme-control: #29323e; --theme-control-hover: #34404e; --theme-control-active: #3b4959; --theme-control-border: #718096; --theme-control-text: #f8fafc; --theme-on-light: #0b0f14; --theme-primary-bg: color-mix(in srgb, var(--app-base-color) 44%, #202731); --theme-primary-border: color-mix(in srgb, var(--app-base-color) 70%, #dbeafe); --theme-primary-text: #ffffff; --theme-filter-bg: #243b63; --theme-filter-border: #79aef6; --theme-filter-text: #ffffff; --theme-success-bg: #174b31; --theme-success-border: #55c98a; --theme-success-text: #ffffff; --theme-danger-bg: #632a32; --theme-danger-border: #ef7f89; --theme-danger-text: #ffffff; --theme-info-bg: #17475b; --theme-info-border: #5bc0de; --theme-info-text: #ffffff; --theme-warning-bg: #5f4718; --theme-warning-border: #e8bc55; --theme-warning-text: #ffffff; --theme-secondary-bg: #374151; --theme-secondary-border: #94a3b8; --theme-secondary-text: #ffffff; --theme-shadow: 0 18px 46px rgba(0, 0, 0, .30); color-scheme: dark; } /* eMAG high-contrast baseline: black page, white primary text, >= 7:1 text. */ html body.contrast-mode { --theme-page: #000000; --theme-surface: #0b0f14; --theme-surface-raised: #111827; --theme-surface-modal: #18212d; --theme-input: #05080c; --theme-hover: #172235; --theme-selected: #1e2d44; --theme-border: #64748b; --theme-border-strong: #94a3b8; --theme-text: #ffffff; --theme-text-strong: #ffffff; --theme-muted: #e2e8f0; --theme-link: #7dd3fc; --theme-focus: #67e8f9; --theme-focus-ring: rgba(103, 232, 249, .34); --theme-control: #1e293b; --theme-control-hover: #293548; --theme-control-active: #334155; --theme-control-border: #94a3b8; --theme-control-text: #ffffff; --theme-on-light: #05080c; --theme-primary-bg: #6b21a8; --theme-primary-border: #c084fc; --theme-primary-text: #ffffff; --theme-filter-bg: #1e3a8a; --theme-filter-border: #60a5fa; --theme-filter-text: #ffffff; --theme-success-bg: #14532d; --theme-success-border: #4ade80; --theme-success-text: #ffffff; --theme-danger-bg: #7f1d1d; --theme-danger-border: #f87171; --theme-danger-text: #ffffff; --theme-info-bg: #164e63; --theme-info-border: #38bdf8; --theme-info-text: #ffffff; --theme-warning-bg: #fbbf24; --theme-warning-border: #fde68a; --theme-warning-text: #05080c; --theme-secondary-bg: #334155; --theme-secondary-border: #94a3b8; --theme-secondary-text: #ffffff; --theme-shadow: 0 20px 58px rgba(0, 0, 0, .72); --contrast-bg: var(--theme-page); --contrast-surface: var(--theme-surface); --contrast-surface-alt: var(--theme-surface-raised); --contrast-border: var(--theme-border-strong); --contrast-text: var(--theme-text); --contrast-muted: var(--theme-muted); --contrast-link: var(--theme-link); --contrast-link-hover: #bae6fd; --bs-body-color: var(--theme-text); --bs-secondary-color: var(--theme-muted); --bs-emphasis-color: #ffffff; --bs-border-color: var(--theme-border); --bs-body-bg: var(--theme-page); --bs-secondary-bg: var(--theme-surface); --bs-tertiary-bg: var(--theme-surface-raised); --bs-form-control-bg: var(--theme-input); color-scheme: dark; } /* High-contrast must not inherit inversion/blend filters from legacy components. */ html body.contrast-mode :where(*:not(img):not(video):not(canvas):not(svg), *:not(img):not(video):not(canvas):not(svg)::before, *:not(img):not(video):not(canvas):not(svg)::after) { filter: none !important; mix-blend-mode: normal !important; } html body.contrast-mode :where(img, video, svg) { filter: none !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) { --bs-body-color: var(--theme-text); --bs-secondary-color: var(--theme-muted); --bs-emphasis-color: var(--theme-text-strong); --bs-border-color: var(--theme-border); --bs-body-bg: var(--theme-page); --bs-secondary-bg: var(--theme-surface); --bs-tertiary-bg: var(--theme-surface-raised); --bs-form-control-bg: var(--theme-input); background-color: var(--theme-page) !important; color: var(--theme-text) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( #main-scrollbar, .page-wrapper, .content-container ) { color: var(--theme-text) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode):not(.background-only-theme-route) :where(#main-scrollbar, .page-wrapper, .content-container), html body.contrast-mode :where(#main-scrollbar, .page-wrapper, .content-container) { background-color: var(--theme-page) !important; } /* Neutral surfaces. Preserve media/book canvases through data-theme-preserve. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .card, .list-group-item, .accordion-item, .accordion-button, .dropdown-menu, .offcanvas, .popover, .toast, .bg-white, .bg-light, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100, .choices__inner, .choices__list--dropdown, .choices__list[aria-expanded], .select2-dropdown, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .status-toolbar-card, .assigned-track, .sensorama-track-card, .activity-track-card, .question-detail-card-body, .library-filters, .guided-reading-card, .guided-reading-empty, .reward-card, .feedback-card, .student-dashboard-chart-frame, .navbar-command-search__panel, .navbar-command-search__panel--header, .navbar-command-search__panel--mobile-inline, [data-theme-surface="surface"], [data-theme-auto-surface="surface"] ):not([data-theme-preserve]):not(#canvasPage):not(#canvasPage *) { background: var(--theme-surface) !important; background-color: var(--theme-surface) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .table-striped > tbody > tr:nth-of-type(odd) > *, .table-hover > tbody > tr:hover > *, .list-group-item:hover, .dropdown-item:hover, .dropdown-item:focus, .choices__item--choice.is-highlighted, .select2-results__option--highlighted, [data-theme-surface="raised"], [data-theme-auto-surface="raised"] ):not([data-theme-preserve]):not(#canvasPage):not(#canvasPage *) { background: var(--theme-surface-raised) !important; background-color: var(--theme-surface-raised) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; } /* Modal layers intentionally differ from the page so dialogs never merge into the backdrop. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .modal-content, .modal-header, .modal-body, .modal-footer, .accessibility-modal-content, .accessibility-modal-header, .accessibility-modal-body, [class*="modal__content"], [class*="-modal-content"], [class*="modal-card"], [class*="modal__card"], [class*="-modal-card"], [class*="modal-panel"], [class*="modal__panel"], [class*="-modal-panel"], [class*="modal-body"], [class*="modal__body"], [class*="-modal-body"], [class*="modal-footer"], [class*="modal__footer"], [class*="-modal-footer"], [class*="modal-header"], [class*="modal__header"], [class*="-modal-header"], .admin-modal-content, .feedback-modal-content, .minigame-confirm-modal__card, .user-access-card-modal__content, .access-card-modal__content, [data-theme-surface="modal"], [data-theme-auto-surface="modal"] ):not([data-theme-preserve]):not(#canvasPage):not(#canvasPage *) { background: var(--theme-surface-modal) !important; background-color: var(--theme-surface-modal) !important; color: var(--theme-text) !important; border-color: var(--theme-border-strong) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .modal-content, .accessibility-modal-content, [class*="modal__content"], [class*="-modal-content"], [class*="modal-card"], [class*="modal__card"], [class*="-modal-card"], .admin-modal-content, .feedback-modal-content, .minigame-confirm-modal__card, .user-access-card-modal__content, .access-card-modal__content, [data-theme-surface="modal"], [data-theme-auto-surface="modal"] ) { /* Preserve the component's authored border width in every theme. */ border-color: var(--theme-border-strong) !important; box-shadow: var(--theme-shadow) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .modal-header, [class*="modal__header"], [class*="-modal-header"] ) { border-bottom-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .modal-footer, [class*="modal__footer"], [class*="-modal-footer"], [class*="actions-footer"] ) { border-top-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .modal-backdrop.show { background: #000000 !important; opacity: .76 !important; } html body.contrast-mode :where(.accessibility-modal-backdrop, [class*="modal"][class*="backdrop"]) { background: rgba(0, 0, 0, .84) !important; } /* Form controls and third-party selects. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .form-control, .form-select, .input-group-text, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, .choices__inner, .choices__input, .select-box, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .navbar-command-search__input, [data-theme-surface="input"], [data-theme-auto-surface="input"] ):not(#canvasPage):not(#canvasPage *) { background: var(--theme-input) !important; background-color: var(--theme-input) !important; color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; border-color: var(--theme-border-strong) !important; box-shadow: none !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .form-control, .form-select, textarea, input, .navbar-command-search__input )::placeholder { color: var(--theme-muted) !important; -webkit-text-fill-color: var(--theme-muted) !important; opacity: 1 !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( input:disabled, select:disabled, textarea:disabled, .form-control:disabled, .form-select:disabled, .choices.is-disabled .choices__inner ) { background: var(--theme-surface-raised) !important; background-color: var(--theme-surface-raised) !important; color: var(--theme-muted) !important; -webkit-text-fill-color: var(--theme-muted) !important; opacity: .82 !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where(option) { background: var(--theme-surface) !important; color: var(--theme-text) !important; } /* Text utilities that are otherwise hard-coded for a light surface. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .text-dark, .text-black, .text-body, .text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700, [data-theme-auto-text="light"] ):not(#canvasPage):not(#canvasPage *):not(.dashboard-card-icon-action) { color: var(--theme-text) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .text-muted, .text-secondary, .text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400, [data-theme-auto-text="muted"] ):not(#canvasPage):not(#canvasPage *):not(.dashboard-card-icon-action) { color: var(--theme-muted) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [data-theme-auto-text="dark"]:not(.dashboard-card-icon-action) { color: var(--theme-on-light) !important; } /* Tables. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .table { --bs-table-color: var(--theme-text); --bs-table-bg: var(--theme-surface); --bs-table-border-color: var(--theme-border); --bs-table-striped-color: var(--theme-text); --bs-table-striped-bg: var(--theme-surface-raised); --bs-table-hover-color: var(--theme-text-strong); --bs-table-hover-bg: var(--theme-hover); color: var(--theme-text) !important; border-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .table :where(th, td, thead, tbody, tfoot, tr) { border-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .table :where(thead th, thead td) { background: var(--theme-surface-raised) !important; background-color: var(--theme-surface-raised) !important; color: var(--theme-text-strong) !important; } /* Reading-history modal is one of the legacy areas with local !important whites. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) #studentReadingHistoryModal .table :where(thead tr, thead th, tbody tr, tbody td) { background: var(--theme-surface) !important; background-color: var(--theme-surface) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) #studentReadingHistoryModal .table tbody tr:nth-child(even) :where(td, th) { background: var(--theme-surface-raised) !important; background-color: var(--theme-surface-raised) !important; } /* Tabs: active, hover and selected states must remain visibly distinct. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where(.nav-tabs) { border-bottom-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where(.nav-tabs .nav-link, [role="tab"]) { background: transparent !important; color: var(--theme-muted) !important; border-color: transparent !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where(.nav-tabs .nav-link:hover, [role="tab"]:hover) { background: var(--theme-hover) !important; color: var(--theme-text-strong) !important; border-color: var(--theme-border) var(--theme-border) transparent !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, [role="tab"][aria-selected="true"] ) { background: var(--theme-selected) !important; color: var(--theme-text-strong) !important; border-color: var(--theme-border-strong) var(--theme-border-strong) var(--theme-selected) !important; box-shadow: inset 0 -3px 0 var(--theme-focus) !important; } /* Shared Bootstrap modal/offcanvas close control. * Geometry is deliberately theme-agnostic: accessibility themes may recolor * controls, but they must never resize or reflow the dialog. */ html body :is(.modal, .offcanvas) .btn-close:not(.btn-close-white) { box-sizing: border-box !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; flex: 0 0 44px !important; border-radius: 10px !important; } /* The component owns only its colors/glyph in light/dark themes so * individual modals do not need per-page hover/filter patches. */ html body:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white) { border: 1px solid #d0d5dd !important; background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23344054' d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707z'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important; filter: none !important; opacity: 1 !important; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important; } html body:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white):hover, html body:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white):focus-visible { border-color: #98a2b3 !important; background-color: #f2f4f7 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231d2939' d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707z'/%3E%3C/svg%3E") !important; box-shadow: 0 0 0 3px rgba(152, 162, 179, .16) !important; filter: none !important; opacity: 1 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white), html body.dark:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white) { border-color: #475467 !important; background-color: #252b33 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2f4f7' d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707z'/%3E%3C/svg%3E") !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .34) !important; filter: none !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white):hover, html[data-bs-theme="dark"] body:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white):focus-visible, html body.dark:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white):hover, html body.dark:not(.contrast-mode) :is(.modal, .offcanvas) .btn-close:not(.btn-close-white):focus-visible { border-color: #667085 !important; background-color: #343b45 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707z'/%3E%3C/svg%3E") !important; box-shadow: 0 0 0 3px rgba(102, 112, 133, .18) !important; filter: none !important; opacity: 1 !important; } /* Non-Bootstrap X controls keep the existing theme semantics. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .accessibility-modal-close, .navbar-command-search__close, [data-theme-action="close"], [data-theme-auto-control="close"] ) { color: var(--theme-text) !important; border-color: transparent !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .accessibility-modal-close:hover, .navbar-command-search__close:hover, [data-theme-action="close"]:hover, [data-theme-auto-control="close"]:hover ) { opacity: 0.75 !important; } /* Generic controls in dark mode only. High contrast gets semantic palettes below. */ html[data-bs-theme="dark"] body:not(.contrast-mode) :where( .btn-light, .btn-white, .btn-outline-dark, .btn-outline-secondary, .student-track-clear-button, .expand-toggle-btn, button[data-theme-auto-control="generic"], [role="button"][data-theme-auto-control="generic"] ) { background: var(--theme-control) !important; background-color: var(--theme-control) !important; border-color: var(--theme-control-border) !important; color: var(--theme-control-text) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) :where( .btn-light, .btn-white, .btn-outline-dark, .btn-outline-secondary, .student-track-clear-button, .expand-toggle-btn, button[data-theme-auto-control="generic"], [role="button"][data-theme-auto-control="generic"] ):hover { background: var(--theme-control-hover) !important; background-color: var(--theme-control-hover) !important; } html body.contrast-mode :where( button[data-theme-auto-control="generic"], [role="button"][data-theme-auto-control="generic"], .btn-light, .btn-white, .btn-outline-dark ):not(.btn-close) { background: var(--theme-control) !important; background-color: var(--theme-control) !important; border-color: var(--theme-control-border) !important; color: var(--theme-control-text) !important; -webkit-text-fill-color: currentColor !important; } html body.contrast-mode :where( button[data-theme-auto-control="generic"], [role="button"][data-theme-auto-control="generic"], .btn-light, .btn-white, .btn-outline-dark ):not(.btn-close):hover { background: var(--theme-control-hover) !important; background-color: var(--theme-control-hover) !important; } /* Semantic action palettes. They keep actions distinguishable instead of flattening all buttons. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action="primary"], [data-theme-auto-control="primary"], .custom-button.primary, .btn-confirm, .confirm-button, .btn-app-primary, .btn-primary-pink, .bulk-action-primary, .activity-confirm-btn, .blog-btn-primary, .btn-send, .scanned-ai-primary-button, .lp-btn-primary, [class*="button--primary"], [class*="button-primary"] ) { background: var(--theme-primary-bg) !important; background-color: var(--theme-primary-bg) !important; border-color: var(--theme-primary-border) !important; color: var(--theme-primary-text) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action="filter"], [data-theme-auto-control="filter"], .student-track-filter-button, .activity-toolbar-filter, [data-testid*="advanced-filter"], [data-testid*="open-advanced-filter"] ) { background: var(--theme-filter-bg) !important; background-color: var(--theme-filter-bg) !important; border-color: var(--theme-filter-border) !important; color: var(--theme-filter-text) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action="success"], [data-theme-auto-control="success"], .btn-success, [class*="button--success"], [class*="button-success"] ) { background: var(--theme-success-bg) !important; background-color: var(--theme-success-bg) !important; border-color: var(--theme-success-border) !important; color: var(--theme-success-text) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action="danger"], [data-theme-auto-control="danger"], .btn-danger, [class*="button--danger"], [class*="button-danger"] ) { background: var(--theme-danger-bg) !important; background-color: var(--theme-danger-bg) !important; border-color: var(--theme-danger-border) !important; color: var(--theme-danger-text) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action="info"], [data-theme-auto-control="info"], .btn-info, [class*="button--info"], [class*="button-info"] ) { background: var(--theme-info-bg) !important; background-color: var(--theme-info-bg) !important; border-color: var(--theme-info-border) !important; color: var(--theme-info-text) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action="warning"], [data-theme-auto-control="warning"], .btn-warning, [class*="button--warning"], [class*="button-warning"] ) { background: var(--theme-warning-bg) !important; background-color: var(--theme-warning-bg) !important; border-color: var(--theme-warning-border) !important; color: var(--theme-warning-text) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action], [data-theme-auto-control]:not([data-theme-auto-control="generic"]):not([data-theme-auto-control="close"]), .btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-secondary ):hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.13) saturate(1.03) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( [data-theme-action], [data-theme-auto-control]:not([data-theme-auto-control="generic"]):not([data-theme-auto-control="close"]), .btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-secondary ):active:not(:disabled):not([aria-disabled="true"]) { filter: brightness(.92) !important; } /* Bootstrap outline actions keep their semantic border and readable text. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .btn-outline-primary { background: var(--theme-surface) !important; border-color: var(--theme-filter-border) !important; color: var(--theme-link) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .btn-outline-danger { background: var(--theme-surface) !important; border-color: var(--theme-danger-border) !important; color: #fecaca !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .btn-outline-success { background: var(--theme-surface) !important; border-color: var(--theme-success-border) !important; color: #bbf7d0 !important; } /* Badges/pills remain differentiated by meaning. */ html body.contrast-mode :where( .badge, [class$="-badge"], [class*="__badge"], [class*="badge--"], [class$="-chip"], [class*="__chip"], [class*="chip--"], [class$="-pill"], [class*="__pill"], [class*="pill--"] ) { background: var(--theme-secondary-bg) !important; background-color: var(--theme-secondary-bg) !important; border: 1px solid var(--theme-secondary-border) !important; color: var(--theme-secondary-text) !important; -webkit-text-fill-color: currentColor !important; } html body.contrast-mode :where(.badge.bg-primary, [data-theme-badge="primary"]) { background: var(--theme-primary-bg) !important; background-color: var(--theme-primary-bg) !important; border-color: var(--theme-primary-border) !important; color: var(--theme-primary-text) !important; } html body.contrast-mode :where(.badge.bg-success, .track-card__status-badge--active, [data-theme-badge="success"]) { background: var(--theme-success-bg) !important; background-color: var(--theme-success-bg) !important; border-color: var(--theme-success-border) !important; color: var(--theme-success-text) !important; } html body.contrast-mode :where(.badge.bg-danger, .track-card__status-badge--inactive, .question-difficulty-badge--3, .track-card__badge--difficulty-3, [data-theme-badge="danger"]) { background: var(--theme-danger-bg) !important; background-color: var(--theme-danger-bg) !important; border-color: var(--theme-danger-border) !important; color: var(--theme-danger-text) !important; } html body.contrast-mode :where(.badge.bg-info, .track-card__status-badge--finished, .bg-saeb, [data-theme-badge="info"]) { background: var(--theme-info-bg) !important; background-color: var(--theme-info-bg) !important; border-color: var(--theme-info-border) !important; color: var(--theme-info-text) !important; } html body.contrast-mode :where(.badge.bg-warning, .question-difficulty-badge--2, .track-card__badge--difficulty-2, [data-theme-badge="warning"]) { background: var(--theme-warning-bg) !important; background-color: var(--theme-warning-bg) !important; border-color: var(--theme-warning-border) !important; color: var(--theme-warning-text) !important; } html body.contrast-mode :where(.question-difficulty-badge--1, .track-card__badge--difficulty-1, [data-theme-badge="easy"]) { background: var(--theme-success-bg) !important; background-color: var(--theme-success-bg) !important; border-color: var(--theme-success-border) !important; color: var(--theme-success-text) !important; } html body.contrast-mode :where(.badge-book-activity) { background: #115e59 !important; background-color: #115e59 !important; border-color: #5eead4 !important; color: #ffffff !important; } html body.contrast-mode :where(.bg-regular-track) { background: var(--theme-secondary-bg) !important; background-color: var(--theme-secondary-bg) !important; border-color: var(--theme-secondary-border) !important; color: var(--theme-secondary-text) !important; } /* Report actions keep their semantic identity in every visual theme. * These selectors intentionally match the specificity of the legacy * accessibility rules so CSV/XLSX/PDF are not flattened into one color. */ html body.contrast-mode .btn-group-responsive .btn-base.btn-export.csv:not(#canvasPage):not(#canvasPage *), html body.contrast-mode #btnExportCsv.btn-export:not(#canvasPage):not(#canvasPage *) { background: #1d4ed8 !important; background-color: #1d4ed8 !important; border-color: #93c5fd !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .btn-group-responsive .btn-base.btn-export.xlsx:not(#canvasPage):not(#canvasPage *), html body.contrast-mode #btnExportXlsx.btn-export:not(#canvasPage):not(#canvasPage *) { background: #166534 !important; background-color: #166534 !important; border-color: #86efac !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .btn-group-responsive .btn-base.btn-export.pdf:not(#canvasPage):not(#canvasPage *), html body.contrast-mode #btnExportPdf.btn-export:not(#canvasPage):not(#canvasPage *) { background: #991b1b !important; background-color: #991b1b !important; border-color: #fca5a5 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .btn-group-responsive .btn-base.btn-export.csv:hover:not(#canvasPage):not(#canvasPage *), html body.contrast-mode #btnExportCsv.btn-export:hover:not(#canvasPage):not(#canvasPage *) { background: #1e40af !important; background-color: #1e40af !important; } html body.contrast-mode .btn-group-responsive .btn-base.btn-export.xlsx:hover:not(#canvasPage):not(#canvasPage *), html body.contrast-mode #btnExportXlsx.btn-export:hover:not(#canvasPage):not(#canvasPage *) { background: #14532d !important; background-color: #14532d !important; } html body.contrast-mode .btn-group-responsive .btn-base.btn-export.pdf:hover:not(#canvasPage):not(#canvasPage *), html body.contrast-mode #btnExportPdf.btn-export:hover:not(#canvasPage):not(#canvasPage *) { background: #7f1d1d !important; background-color: #7f1d1d !important; } /* Filter is the primary report action; Clear remains neutral. */ html[data-bs-theme="dark"] body:not(.contrast-mode) .btn-group-responsive button[type="submit"].btn-base.btn-ghost:not(#canvasPage):not(#canvasPage *), html[data-bs-theme="dark"] body:not(.contrast-mode) .btn-group-responsive #buttonFilterAccess.btn-base.btn-ghost:not(#canvasPage):not(#canvasPage *) { background: #243b63 !important; background-color: #243b63 !important; border-color: #79aef6 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .btn-group-responsive a.btn-base.btn-ghost:not(#canvasPage):not(#canvasPage *) { background: #29323e !important; background-color: #29323e !important; border-color: #718096 !important; color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; } html body.contrast-mode .btn-group-responsive button[type="submit"].btn-base.btn-ghost:not(#canvasPage):not(#canvasPage *), html body.contrast-mode .btn-group-responsive #buttonFilterAccess.btn-base.btn-ghost:not(#canvasPage):not(#canvasPage *) { background: #1e3a8a !important; background-color: #1e3a8a !important; border-color: #93c5fd !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .btn-group-responsive a.btn-base.btn-ghost:not(#canvasPage):not(#canvasPage *) { background: #334155 !important; background-color: #334155 !important; border-color: #cbd5e1 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; } /* Advanced-filter modal: Tailwind/light inline legacy styles are normalized here. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [id^="filterModal"].fixed.inset-0:not([data-testid="student-transfer-filter-modal"]) > :where(form, div.bg-white) { background: var(--theme-surface-modal) !important; background-color: var(--theme-surface-modal) !important; color: var(--theme-text) !important; border: 1px solid var(--theme-border-strong) !important; box-shadow: var(--theme-shadow) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [id^="filterModal"].fixed.inset-0:not([data-testid="student-transfer-filter-modal"]) :where( .border-b, .border-t ) { border-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [id^="filterModal"].fixed.inset-0:not([data-testid="student-transfer-filter-modal"]) :where( h1, h2, h3, h4, h5, h6, label, .text-gray-900, .text-gray-800, .text-gray-700 ) { color: var(--theme-text-strong) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [id^="filterModal"].fixed.inset-0:not([data-testid="student-transfer-filter-modal"]) :where( .text-gray-600, .text-gray-500, .text-gray-400 ) { color: var(--theme-muted) !important; -webkit-text-fill-color: currentColor !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [id^="filterModal"].fixed.inset-0:not([data-testid="student-transfer-filter-modal"]) :where(select, input, .choices__inner) { background: var(--theme-input) !important; background-color: var(--theme-input) !important; color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; border-color: var(--theme-border-strong) !important; } /* Assignment flow, including activity-type cards. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( #selectInstitutionModal .activity-flow-modal, #assignTrackModal .activity-flow-modal, #selectInstitutionModal .activity-flow-header, #assignTrackModal .activity-flow-header, #institutionList .institution-card, #assignTrackModal .activity-option-card, #assignTrackModal .activity-check-card, #assignTrackModal #groupList .form-check, #assignTrackModal .activity-flow-footer, #assignTrackModal .activity-secondary-btn, #assignTrackModal .activity-cancel-btn ) { background: var(--theme-surface-modal) !important; background-color: var(--theme-surface-modal) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( #institutionList .institution-card:hover, #institutionList .institution-card:focus-visible, #assignTrackModal .activity-option-card:hover, #assignTrackModal .activity-check-card:hover ) { background: var(--theme-hover) !important; background-color: var(--theme-hover) !important; border-color: var(--theme-border-strong) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( #assignTrackModal .activity-option-card:has(input:checked), #assignTrackModal .activity-check-card:has(input:checked) ) { background: var(--theme-selected) !important; background-color: var(--theme-selected) !important; border-color: var(--theme-focus) !important; box-shadow: inset 0 0 0 1px var(--theme-focus) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .activity-flow-title .modal-title, .activity-select-label, #assignTrackModal .activity-option-label, #assignTrackModal .class-name ) { color: var(--theme-text-strong) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .activity-flow-helper, #assignTrackModal .activity-section-title, #assignTrackModal .form-label, #assignTrackModal .activity-select-all ) { color: var(--theme-muted) !important; } /* Search must not become an unrelated light-blue block in high contrast. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .navbar-command-search__trigger, .navbar-command-search__close, .navbar-command-search__result, .navbar-command-search__empty-action ) { background: var(--theme-control) !important; background-color: var(--theme-control) !important; color: var(--theme-control-text) !important; border-color: var(--theme-control-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .navbar-command-search__trigger:hover, .navbar-command-search__trigger:focus-visible, .navbar-command-search.is-open .navbar-command-search__trigger, .navbar-command-search__result:hover, .navbar-command-search__result.is-active, .navbar-command-search__empty-action:hover ) { background: var(--theme-hover) !important; background-color: var(--theme-hover) !important; color: var(--theme-text-strong) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .navbar-command-search__result-label, .navbar-command-search__header strong ) { color: var(--theme-text-strong) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .navbar-command-search__status, .navbar-command-search__result-parent, .navbar-command-search__empty-copy ) { color: var(--theme-muted) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .school-card-action[data-theme-action="primary"] { border-color: var(--theme-primary-border) !important; color: var(--theme-primary-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .school-card-action[data-theme-action="info"] { border-color: var(--theme-info-border) !important; color: var(--theme-info-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .school-card-action[data-theme-action="danger"] { border-color: var(--theme-danger-border) !important; color: var(--theme-danger-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .school-card-action:hover { background: var(--theme-hover) !important; filter: none !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) .school-card-action img { filter: brightness(0) invert(1) !important; opacity: .95; } /* Pagination. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where(.pagination .page-link, .page-item .page-link) { background: var(--theme-surface-raised) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where(.pagination .page-item.active .page-link, .page-item.active .page-link) { background: var(--theme-filter-bg) !important; color: var(--theme-filter-text) !important; border-color: var(--theme-filter-border) !important; } /* Alerts retain meaning and readable foregrounds. */ html body.contrast-mode .alert-success { background: var(--theme-success-bg) !important; border-color: var(--theme-success-border) !important; color: var(--theme-success-text) !important; } html body.contrast-mode .alert-danger { background: var(--theme-danger-bg) !important; border-color: var(--theme-danger-border) !important; color: var(--theme-danger-text) !important; } html body.contrast-mode .alert-warning { background: #713f12 !important; border-color: var(--theme-warning-border) !important; color: #ffffff !important; } html body.contrast-mode .alert-info { background: var(--theme-info-bg) !important; border-color: var(--theme-info-border) !important; color: var(--theme-info-text) !important; } /* High-contrast text/link semantics. Yellow is reserved for warning, not the whole UI. */ html body.contrast-mode :where(h1, h2, h3, h4, h5, h6, .modal-title, legend, .page-title, .section-title, .card-title) { color: var(--theme-text-strong) !important; -webkit-text-fill-color: currentColor !important; } html body.contrast-mode a:not(.btn):not(.btn-base):not([role="button"]):not(.dropdown-item):not(.guided-reading-card__cover):not(.letrinha-nav__link):not(.letrinha-subnav__link):not(.letrinha-mobile-menu__link):not(.letrinha-mobile-submenu__link) { color: var(--theme-link) !important; text-decoration-line: underline; text-decoration-thickness: .08em; text-underline-offset: .16em; } html body.contrast-mode :where(.text-primary) { color: #93c5fd !important; } html body.contrast-mode :where(.text-success) { color: #86efac !important; } html body.contrast-mode :where(.text-danger) { color: #fca5a5 !important; } html body.contrast-mode :where(.text-warning) { color: #fde68a !important; } html body.contrast-mode :where(.text-info) { color: #67e8f9 !important; } /* Checkbox/radio/toggle borders and selected state. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .form-check-input, input[type="checkbox"], input[type="radio"] ) { border-color: var(--theme-border-strong) !important; } html body.contrast-mode :where(.form-check-input:checked, input[type="checkbox"]:checked, input[type="radio"]:checked) { background-color: var(--theme-filter-border) !important; border-color: var(--theme-filter-border) !important; } /* Charts: change textual chrome only; do not recolor data series. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .apexcharts-text, .apexcharts-legend-text, .apexcharts-title-text, .apexcharts-subtitle-text, .apexcharts-xaxis-label, .apexcharts-yaxis-label ) { fill: var(--theme-text) !important; color: var(--theme-text) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :where( .apexcharts-gridline, .apexcharts-xaxis line, .apexcharts-yaxis line ) { stroke: var(--theme-border) !important; } /* Header/sidebar retain selection and hover differentiation. */ html body.contrast-mode :where(.letrinha-sidebar, .header.letrinha-header, .letrinha-mobile-drawer) { background: var(--theme-surface) !important; border-color: var(--theme-border) !important; box-shadow: none !important; } html body.contrast-mode .letrinha-sidebar__brand { border-bottom-color: var(--theme-border) !important; } html body.contrast-mode .letrinha-sidebar :where(.letrinha-nav__link, .letrinha-nav__toggle, .letrinha-subnav__link) { color: var(--theme-text) !important; } html body.contrast-mode .letrinha-sidebar :where( .letrinha-nav__link:hover, .letrinha-nav__toggle:hover, .letrinha-nav__item.is-active > .letrinha-nav__link, .letrinha-nav__item.is-active > .letrinha-nav__toggle, .letrinha-nav__item.is-open > .letrinha-nav__toggle, .letrinha-subnav__item.is-active .letrinha-subnav__link, .letrinha-subnav__link:hover ) { background: var(--theme-selected) !important; border-color: var(--theme-border-strong) !important; color: var(--theme-text-strong) !important; box-shadow: inset 3px 0 0 var(--theme-focus) !important; } html body.contrast-mode .letrinha-sidebar :where(.letrinha-nav__item.is-active, .letrinha-subnav__item.is-active) i { color: var(--theme-focus) !important; } html body.contrast-mode :where( .letrinha-header__actions .navbar-command-search__trigger, .letrinha-header__actions .user-notifications-trigger, .letrinha-header__actions .letrinha-profile__trigger, .letrinha-sidebar__collapse ) { background: var(--theme-control) !important; border-color: var(--theme-control-border) !important; color: var(--theme-control-text) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) :where(.letrinha-sidebar, .header.letrinha-header) { background-color: #181d24 !important; border-color: #3b4654 !important; } /* Mobile drawer: dark/contrast use the same component geometry as light, * changing only presentation. Generic link/button theme rules must not * turn navigation items into pale cards or underlined content links. */ html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer:not(#canvasPage):not(#canvasPage *) { background: #11161d !important; background-color: #11161d !important; border-color: #334155 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__item:not(#canvasPage):not(#canvasPage *), html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__submenu:not(#canvasPage):not(#canvasPage *) { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__link:not(#canvasPage):not(#canvasPage *), html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__toggle:not(#canvasPage):not(#canvasPage *) { background: transparent !important; background-color: transparent !important; border-color: transparent !important; color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; text-decoration: none !important; box-shadow: none !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__icon:not(#canvasPage):not(#canvasPage *) { color: color-mix(in srgb, var(--app-base-color) 72%, #e9d5ff) !important; -webkit-text-fill-color: currentColor !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__chevron:not(#canvasPage):not(#canvasPage *) { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__item.is-open > .letrinha-mobile-menu__toggle:not(#canvasPage):not(#canvasPage *), html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__link:hover:not(#canvasPage):not(#canvasPage *), html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-menu__toggle:hover:not(#canvasPage):not(#canvasPage *) { background: #1a2330 !important; background-color: #1a2330 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-submenu__link:not(#canvasPage):not(#canvasPage *) { background: transparent !important; background-color: transparent !important; border: 1px solid transparent !important; color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; text-decoration: none !important; box-shadow: none !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-drawer .letrinha-mobile-submenu__link:hover:not(#canvasPage):not(#canvasPage *) { background: #1a2330 !important; background-color: #1a2330 !important; border-color: #3f4b5b !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-mobile-submenu__item.is-active .letrinha-mobile-submenu__link:not(#canvasPage):not(#canvasPage *) { background: color-mix(in srgb, var(--app-base-color) 20%, #18212c) !important; background-color: color-mix(in srgb, var(--app-base-color) 20%, #18212c) !important; border-color: color-mix(in srgb, var(--app-base-color) 56%, #64748b) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--app-base-color) 78%, #ffffff) !important; } html body.contrast-mode .letrinha-mobile-drawer:not(#canvasPage):not(#canvasPage *) { background: #05080c !important; background-color: #05080c !important; border-color: #64748b !important; } html body.contrast-mode .letrinha-mobile-menu__item:not(#canvasPage):not(#canvasPage *), html body.contrast-mode .letrinha-mobile-menu__submenu:not(#canvasPage):not(#canvasPage *) { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } html body.contrast-mode .letrinha-mobile-menu__link:not(#canvasPage):not(#canvasPage *), html body.contrast-mode .letrinha-mobile-menu__toggle:not(#canvasPage):not(#canvasPage *) { background: transparent !important; background-color: transparent !important; border-color: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; box-shadow: none !important; } html body.contrast-mode .letrinha-mobile-menu__icon:not(#canvasPage):not(#canvasPage *), html body.contrast-mode .letrinha-mobile-menu__chevron:not(#canvasPage):not(#canvasPage *), html body.contrast-mode .letrinha-mobile-submenu__icon:not(#canvasPage):not(#canvasPage *) { color: #67e8f9 !important; -webkit-text-fill-color: #67e8f9 !important; } html body.contrast-mode .letrinha-mobile-menu__item.is-open > .letrinha-mobile-menu__toggle:not(#canvasPage):not(#canvasPage *), html body.contrast-mode .letrinha-mobile-menu__link:hover:not(#canvasPage):not(#canvasPage *), html body.contrast-mode .letrinha-mobile-menu__toggle:hover:not(#canvasPage):not(#canvasPage *) { background: #172235 !important; background-color: #172235 !important; border-color: #67e8f9 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .letrinha-mobile-submenu__link:not(#canvasPage):not(#canvasPage *) { background: transparent !important; background-color: transparent !important; border: 1px solid transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; box-shadow: none !important; } html body.contrast-mode .letrinha-mobile-submenu__link:hover:not(#canvasPage):not(#canvasPage *) { background: #172235 !important; background-color: #172235 !important; border-color: #67e8f9 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .letrinha-mobile-submenu__item.is-active .letrinha-mobile-submenu__link:not(#canvasPage):not(#canvasPage *) { background: #1e2d44 !important; background-color: #1e2d44 !important; border-color: #67e8f9 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; box-shadow: inset 3px 0 0 #67e8f9 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .letrinha-sidebar :where( .letrinha-nav__link:hover, .letrinha-nav__toggle:hover, .letrinha-nav__item.is-active > .letrinha-nav__link, .letrinha-nav__item.is-active > .letrinha-nav__toggle, .letrinha-nav__item.is-open > .letrinha-nav__toggle, .letrinha-subnav__item.is-active .letrinha-subnav__link, .letrinha-subnav__link:hover ) { background: color-mix(in srgb, var(--app-base-color) 16%, #242b35) !important; border-color: color-mix(in srgb, var(--app-base-color) 42%, #526173) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--app-base-color) 76%, #ffffff) !important; } /* Visible focus for keyboard users. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) :focus-visible { outline: 3px solid var(--theme-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px var(--theme-focus-ring) !important; } html body.contrast-mode :where(.nav-link.active, [aria-selected="true"], [aria-pressed="true"]) { outline-color: var(--theme-focus) !important; } /* Compatibility tags produced by JS for legacy/dynamic nodes. */ :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [data-theme-auto-surface="surface"] { background: var(--theme-surface) !important; background-color: var(--theme-surface) !important; color: var(--theme-text) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [data-theme-auto-surface="raised"] { background: var(--theme-surface-raised) !important; background-color: var(--theme-surface-raised) !important; color: var(--theme-text) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [data-theme-auto-surface="modal"] { background: var(--theme-surface-modal) !important; background-color: var(--theme-surface-modal) !important; color: var(--theme-text) !important; } :is(html[data-bs-theme="dark"] body:not(.contrast-mode), html body.contrast-mode) [data-theme-auto-surface="input"] { background: var(--theme-input) !important; background-color: var(--theme-input) !important; color: var(--theme-text) !important; } /* Do not let contrast filters distort the page or content imagery. */ html body.contrast-mode, html body.contrast-mode #main-scrollbar, html body.contrast-mode .page-wrapper, html body.contrast-mode .content-container, html body.contrast-mode .header-container { filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important; } html body.contrast-mode :where(.card, .modal-content, .dropdown-menu, .choices__inner, .choices__list--dropdown, .form-control, .form-select, .table, .alert) { text-shadow: none !important; backdrop-filter: none !important; } } @media print { html[data-bs-theme="dark"] body, html body.contrast-mode { background: #ffffff !important; color: #111827 !important; color-scheme: light; } } /* ========================================================================== */ /* 2026-09-29 targeted visual accessibility corrections */ /* Scope intentionally limited to dashboard card actions, advanced filters, */ /* contrast action states/tabs/close controls and stable contrast loading. */ /* ========================================================================== */ @media screen { /* Advanced-filter overlay must remain an overlay, never a full blue surface. */ html body.contrast-mode [id^="filterModal"].fixed.inset-0 { background: rgba(0, 0, 0, .88) !important; background-color: rgba(0, 0, 0, .88) !important; background-image: none !important; color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) { background: #0b0f14 !important; background-color: #0b0f14 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #94a3b8 !important; box-shadow: 0 24px 70px rgba(0, 0, 0, .72) !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) > :where(.border-b, .border-t, .p-6, [data-filter-modal-body]), html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) :where(.bg-white, .bg-gray-50, .bg-gray-100) { background: #0b0f14 !important; background-color: #0b0f14 !important; background-image: none !important; color: #ffffff !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) > :where(.border-b, .border-t) { border-color: #64748b !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 :where(h1, h2, h3, h4, h5, h6, label, .text-gray-900, .text-gray-800, .text-gray-700) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 :where(p, small, .text-gray-600, .text-gray-500, .text-gray-400) { color: #dbe4ef !important; -webkit-text-fill-color: #dbe4ef !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 :where( input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select, .choices__inner, .select2-selection ) { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #94a3b8 !important; box-shadow: none !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 :where( input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select, .choices__inner, .select2-selection ):focus, html body.contrast-mode [id^="filterModal"].fixed.inset-0 .choices.is-focused .choices__inner { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, .35) !important; outline: 0 !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 :where(.choices__list--dropdown, .choices__list[aria-expanded], .select2-dropdown) { background: #0b0f14 !important; background-color: #0b0f14 !important; color: #ffffff !important; border: 2px solid #64748b !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 :where(.choices__item--choice.is-highlighted, .select2-results__option--highlighted) { background: #1e3a8a !important; background-color: #1e3a8a !important; color: #ffffff !important; } /* Clear/Cancel are neutral; Apply is a clearly different filtering action. */ html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) > .border-t button[type="button"] { background: #334155 !important; background-color: #334155 !important; border: 2px solid #cbd5e1 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; filter: none !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) > .border-t button[type="button"]:hover { background: #475569 !important; background-color: #475569 !important; border-color: #ffffff !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 button[type="submit"] { background: #003b8f !important; background-color: #003b8f !important; border: 2px solid #93c5fd !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; filter: none !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 button[type="submit"]:hover { background: #1e40af !important; background-color: #1e40af !important; border-color: #dbeafe !important; } /* Dashboard actions: preserve a semantic palette instead of one universal button color. */ html body.contrast-mode button[onclick*="filterModal"][onclick*="classList.remove"], html body.contrast-mode :where(button, a)[data-testid*="advanced-filter"], html body.contrast-mode [data-open-transfer-filters] { background: #003b8f !important; background-color: #003b8f !important; border: 2px solid #93c5fd !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; filter: none !important; } html body.contrast-mode button[onclick*="filterModal"][onclick*="classList.remove"]:hover, html body.contrast-mode :where(button, a)[data-testid*="advanced-filter"]:hover, html body.contrast-mode [data-open-transfer-filters]:hover { background: #1e40af !important; background-color: #1e40af !important; border-color: #dbeafe !important; } html body.contrast-mode [id^="outrosDropdown"] { background: #4c1d95 !important; background-color: #4c1d95 !important; border-color: #d8b4fe !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; filter: none !important; } html body.contrast-mode [id^="outrosDropdown"]:hover, html body.contrast-mode [id^="outrosDropdown"][aria-expanded="true"] { background: #5b21b6 !important; background-color: #5b21b6 !important; border-color: #f3e8ff !important; } html body.contrast-mode :where(button, a)[data-bs-target^="#register"]:not(.dropdown-item) { background: #14532d !important; background-color: #14532d !important; border: 2px solid #86efac !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; filter: none !important; } html body.contrast-mode :where(button, a)[data-bs-target^="#register"]:not(.dropdown-item):hover { background: #166534 !important; background-color: #166534 !important; border-color: #dcfce7 !important; } /* Deactivation confirmation keeps cancel and destructive actions distinct. */ html body.contrast-mode .deactivate-confirmation-modal .btn-secondary { background: #334155 !important; background-color: #334155 !important; border: 2px solid #cbd5e1 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; filter: none !important; } html body.contrast-mode .deactivate-confirmation-modal .btn-secondary:hover, html body.contrast-mode .deactivate-confirmation-modal .btn-secondary:focus-visible { background: #475569 !important; background-color: #475569 !important; border-color: #ffffff !important; } html body.contrast-mode .deactivate-confirmation-modal .btn-danger { background: #7f1d1d !important; background-color: #7f1d1d !important; border: 2px solid #fca5a5 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; filter: none !important; } html body.contrast-mode .deactivate-confirmation-modal .btn-danger:hover, html body.contrast-mode .deactivate-confirmation-modal .btn-danger:focus-visible { background: #991b1b !important; background-color: #991b1b !important; border-color: #fee2e2 !important; } /* Close/X controls are a distinct destructive-dismiss action in contrast mode. */ html body.contrast-mode :where( .btn-close, .accessibility-modal-close, .navbar-command-search__close, [data-theme-action="close"], [data-theme-auto-control="close"] ) { position: relative; background: #5f1010 !important; background-color: #5f1010 !important; border: 2px solid #fca5a5 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; } html body.contrast-mode .btn-close { background-image: none !important; } html body.contrast-mode .btn-close::before { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: #ffffff; font-size: 1.45rem; font-weight: 700; line-height: 1; } html body.contrast-mode :where( .accessibility-modal-close, .navbar-command-search__close, [data-theme-action="close"], [data-theme-auto-control="close"] ) :where(svg, i) { color: #ffffff !important; stroke: currentColor !important; fill: currentColor; } html body.contrast-mode :where( .btn-close, .accessibility-modal-close, .navbar-command-search__close, [data-theme-action="close"], [data-theme-auto-control="close"] ):hover { background: #991b1b !important; background-color: #991b1b !important; border-color: #fee2e2 !important; color: #ffffff !important; filter: none !important; } /* The X in every advanced filter header follows the same close-action state. */ html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) > .border-b > button[type="button"] { background: #5f1010 !important; background-color: #5f1010 !important; border: 2px solid #fca5a5 !important; color: #ffffff !important; border-radius: .65rem !important; filter: none !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) > .border-b > button[type="button"]:hover { background: #991b1b !important; background-color: #991b1b !important; border-color: #fee2e2 !important; } html body.contrast-mode [id^="filterModal"].fixed.inset-0 > :where(form, .bg-white) > .border-b > button[type="button"] svg { color: #ffffff !important; stroke: currentColor !important; } /* State/tabs: inactive, hover and active must be visually unmistakable. */ html body.contrast-mode #contentTabs .nav-link.tab-btn, html body.contrast-mode #readingHistoryTabs .nav-link { background: #111827 !important; background-color: #111827 !important; border: 2px solid #60a5fa !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; } html body.contrast-mode #contentTabs .nav-link.tab-btn:hover, html body.contrast-mode #readingHistoryTabs .nav-link:hover { background: #1e3a8a !important; background-color: #1e3a8a !important; border-color: #bfdbfe !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode #contentTabs .nav-link.tab-btn.active, html body.contrast-mode #contentTabs .nav-link.tab-btn[aria-selected="true"], html body.contrast-mode #readingHistoryTabs .nav-link.active, html body.contrast-mode #readingHistoryTabs .nav-link[aria-selected="true"] { background: #67e8f9 !important; background-color: #67e8f9 !important; border-color: #cffafe !important; color: #071018 !important; -webkit-text-fill-color: #071018 !important; box-shadow: 0 0 0 2px #000000, 0 0 0 4px #67e8f9 !important; font-weight: 700 !important; } /* Marking/pressed controls keep a distinct state from their idle state. */ html body.contrast-mode .form-check-input { background-color: #000000 !important; border: 2px solid #cbd5e1 !important; box-shadow: none !important; } html body.contrast-mode .form-check-input:checked, html body.contrast-mode .form-check-input[type="checkbox"]:indeterminate { background-color: #0057b8 !important; border-color: #bfdbfe !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, .35) !important; } html body.contrast-mode .btn-check:checked + .btn, html body.contrast-mode .btn[aria-pressed="true"] { background: #67e8f9 !important; background-color: #67e8f9 !important; border-color: #cffafe !important; color: #071018 !important; -webkit-text-fill-color: #071018 !important; box-shadow: 0 0 0 2px #000000, 0 0 0 4px #67e8f9 !important; filter: none !important; } } /* ========================================================================== */ /* 2026-09-29 follow-up: page-scoped regressions only */ /* Lesson plans, Suggestions, Assessments, language selector and user cards. */ /* ========================================================================== */ @media screen { /* ---------------------------------------------------------------------- */ /* Lesson plans: secondary/import and clear controls */ /* ---------------------------------------------------------------------- */ html[data-bs-theme="dark"] body:not(.contrast-mode) .lesson-plans-wrap :where(.lp-btn-secondary, .lp-icon-btn) { background: #202734 !important; background-color: #202734 !important; background-image: none !important; color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; border-color: #4b5563 !important; box-shadow: none !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .lesson-plans-wrap :where(.lp-btn-secondary, .lp-icon-btn):hover { background: #2b3444 !important; background-color: #2b3444 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: #64748b !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .lesson-plans-wrap .lp-icon-btn.danger { color: #fda4af !important; -webkit-text-fill-color: #fda4af !important; border-color: #9f1239 !important; } html body.contrast-mode .lesson-plans-wrap :where(.lp-btn-secondary, .lp-icon-btn) { background: #050505 !important; background-color: #050505 !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; outline: none !important; } html body.contrast-mode .lesson-plans-wrap :where(.lp-btn-secondary, .lp-icon-btn):hover { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: #ffffff !important; outline: none !important; } html body.contrast-mode .lesson-plans-wrap .lp-icon-btn.danger { background: #050505 !important; color: #ff8fa3 !important; -webkit-text-fill-color: #ff8fa3 !important; border-color: #ff8fa3 !important; } html body.contrast-mode .lesson-plans-wrap .lp-icon-btn.danger:hover { background: #ff8fa3 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* ---------------------------------------------------------------------- */ /* Suggestions */ /* This page owns a complete component palette. Do not let global neutral */ /* compatibility rules flatten its surfaces and interaction states. */ /* ---------------------------------------------------------------------- */ html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page { color: #f1f5f9 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestions-hero { background: radial-gradient(circle at 92% 16%, rgba(34, 211, 238, .16) 0 70px, transparent 72px), linear-gradient(135deg, #1b2433 0%, #182435 100%) !important; border-color: #45536a !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .24) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page :where(.suggestions-hero__title, .suggestion-label, .suggestion-upload__copy strong) { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page :where(.suggestions-hero__text, .suggestion-help, .suggestion-upload__copy small, .suggestions-privacy) { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestions-hero__icon { background: #111827 !important; color: var(--suggestions-primary) !important; -webkit-text-fill-color: var(--suggestions-primary) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestions-card { background: #111827 !important; background-color: #111827 !important; color: #e5e7eb !important; border-color: #374151 !important; box-shadow: 0 18px 48px rgba(0, 0, 0, .25) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-label__icon { background: color-mix(in srgb, var(--suggestions-primary) 18%, #111827) !important; color: color-mix(in srgb, var(--suggestions-primary) 70%, #ffffff) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-input { background: #0b1220 !important; background-color: #0b1220 !important; color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; border-color: #475569 !important; caret-color: #ffffff !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-input::placeholder { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; opacity: 1 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-tag-counter, html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-attachment-chip { background: #202938 !important; color: #dbe3ef !important; -webkit-text-fill-color: #dbe3ef !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-tag span { background: #151d2b !important; color: #dbe3ef !important; -webkit-text-fill-color: #dbe3ef !important; border-color: #465269 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-tag:hover span { background: #1d2737 !important; border-color: color-mix(in srgb, var(--suggestions-primary) 55%, #64748b) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-tag input:checked + span { background: color-mix(in srgb, var(--suggestions-primary) 22%, #111827) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: color-mix(in srgb, var(--suggestions-primary) 76%, #ffffff) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-upload { background: #0f1724 !important; border-color: #516078 !important; color: #f8fafc !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-upload:hover { background: #162033 !important; border-color: color-mix(in srgb, var(--suggestions-primary) 70%, #64748b) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-upload__icon { background: #1f2937 !important; color: color-mix(in srgb, var(--suggestions-primary) 72%, #ffffff) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-attachment-chip__remove { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .suggestions-page .suggestion-attachment-chip__remove:hover { background: #334155 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .suggestions-page { --suggestions-primary: #67e8f9; --suggestions-secondary: #c084fc; color: #ffffff !important; } html body.contrast-mode .suggestions-page .suggestions-hero, html body.contrast-mode .suggestions-page .suggestions-card { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page :where(.suggestions-hero__title, .suggestions-hero__text, .suggestion-label, .suggestion-help, .suggestion-upload__copy, .suggestion-upload__copy strong, .suggestion-upload__copy small, .suggestions-privacy) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .suggestions-page .suggestions-hero__icon { background: #000000 !important; color: #67e8f9 !important; -webkit-text-fill-color: #67e8f9 !important; border: 2px solid #67e8f9 !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page .suggestion-label__icon { background: #000000 !important; color: #67e8f9 !important; -webkit-text-fill-color: #67e8f9 !important; border: 1px solid #67e8f9 !important; } html body.contrast-mode .suggestions-page .suggestion-input { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; caret-color: #ffffff !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page .suggestion-input:focus { border-color: #67e8f9 !important; box-shadow: 0 0 0 3px #67e8f9 !important; outline: none !important; } html body.contrast-mode .suggestions-page .suggestion-input::placeholder { color: #d1d5db !important; -webkit-text-fill-color: #d1d5db !important; opacity: 1 !important; } html body.contrast-mode .suggestions-page .suggestion-tag-counter, html body.contrast-mode .suggestions-page .suggestion-attachment-chip { background: #111111 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #ffffff !important; } html body.contrast-mode .suggestions-page .suggestion-tag span { background: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page .suggestion-tag:hover span { background: #101010 !important; border-color: #67e8f9 !important; outline: none !important; } html body.contrast-mode .suggestions-page .suggestion-tag input:checked + span { background: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: #ffffff !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page .suggestion-tag input:checked + span :where(b, i), html body.contrast-mode .suggestions-page .suggestion-tag input:checked + span::after { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } html body.contrast-mode .suggestions-page .suggestion-upload { background: #050505 !important; color: #ffffff !important; border: 2px dashed #ffffff !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page .suggestion-upload:hover { background: #101010 !important; border-color: #67e8f9 !important; outline: none !important; } html body.contrast-mode .suggestions-page .suggestion-upload__icon { background: #000000 !important; color: #67e8f9 !important; -webkit-text-fill-color: #67e8f9 !important; border: 1px solid #67e8f9 !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page .suggestion-upload__button, html body.contrast-mode .suggestions-page .suggestion-submit { background: #67e8f9 !important; background-color: #67e8f9 !important; background-image: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 2px solid #67e8f9 !important; box-shadow: none !important; } html body.contrast-mode .suggestions-page .suggestion-submit:hover { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: #ffffff !important; outline: none !important; } html body.contrast-mode .suggestions-page .suggestion-attachment-chip__remove { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .suggestions-page .suggestion-attachment-chip__remove:hover { background: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* ---------------------------------------------------------------------- */ /* Assessments Center */ /* Keep its dedicated visual hierarchy readable instead of flattening it. */ /* ---------------------------------------------------------------------- */ html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page { color: #e5e7eb !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where( .ac-panel, .ac-card, .ac-softbox, .ac-pill, .ac-kpi, .ac-kid-card, .ac-kid-track-card, .ac-parent-card, .ac-parent-summary, .ac-modal-metric, .ac-mgmt-panel, .ac-mgmt-note, .ac-mgmt-mini-kpi, .ac-mgmt-student-card, .ac-mgmt-student-card__metric, .ac-empty-mobile ) { background: #151c28 !important; background-color: #151c28 !important; background-image: none !important; color: #e5e7eb !important; border-color: #3f4b5f !important; box-shadow: none !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where( .ac-panel__header h2, .ac-card__title, .ac-card__metric, .ac-pill__value, .ac-kpi__value, .ac-kid-card__titlewrap h3, .ac-kid-storybox__value, .ac-kid-track-card__value, .ac-parent-modal__title, .ac-parent-card__value, .ac-mgmt-panel__header h2, .ac-mgmt-mini-kpi strong, .ac-mgmt-student-card__name strong, .ac-mgmt-student-card__metric strong, .ac-mgmt-modal__hero h5, .ac-modal-metric__value ) { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where( .ac-panel__header p, .ac-card__subtitle, .ac-pill__label, .ac-kpi__label, .ac-kid-storybox__label, .ac-kid-storybox__help, .ac-kid-mini-note, .ac-kid-track-card__label, .ac-kid-track-card__help, .ac-kid-track-footer__text, .ac-parent-modal__subtitle, .ac-parent-summary, .ac-mgmt-panel__header p, .ac-mgmt-note, .ac-mgmt-mini-kpi span, .ac-mgmt-student-card__name span, .ac-mgmt-student-card__metric span, .ac-mgmt-student-card__footer, .ac-mgmt-modal__hero p, .ac-modal-metric__label ) { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where(.ac-hero, .ac-mgmt-hero) { color: #ffffff !important; border-color: transparent !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where(.ac-hero h1, .ac-hero p, .ac-meta__label, .ac-meta__value, .ac-mgmt-hero h1, .ac-mgmt-hero p, .ac-mgmt-summary-card span, .ac-mgmt-summary-card strong) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-mgmt-summary-card, html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-meta, html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-kid-mini-stat { background: rgba(255, 255, 255, .12) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, .22) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-progress { background: #334155 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where(.ac-results-table, .ac-modal-table) { background: #111827 !important; color: #f8fafc !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where(.ac-results-table th, .ac-modal-table th) { background: #1f2937 !important; color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; border-color: #475569 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page :where(.ac-results-table td, .ac-modal-table td) { background: #111827 !important; color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; border-color: #374151 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-mgmt-filter :where(.form-control, .form-select, .choices__inner, .choices__input, .choices__list--dropdown, .choices__list[aria-expanded]) { background: #0f172a !important; background-color: #0f172a !important; color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; border-color: #475569 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-mgmt-filter label { color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-mgmt-filter .choices__placeholder { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-mgmt-filter .choices__item--choice.is-highlighted { background: #263449 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-mgmt-student-card__meta span, html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-mgmt-modal__badge { background: #202b3c !important; color: #dbeafe !important; -webkit-text-fill-color: #dbeafe !important; border-color: #475569 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-kid-mood-pill, html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-kid-stage-pill { background: #202b3c !important; color: #dbeafe !important; -webkit-text-fill-color: #dbeafe !important; border-color: #475569 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-parent-modal .modal-content, html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-parent-modal .modal-body, html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-parent-modal .modal-header { background: #111827 !important; background-color: #111827 !important; background-image: none !important; color: #f8fafc !important; border-color: #475569 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-parent-modal__eyebrow, html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-parent-modal__mascot { background: #1f2937 !important; color: #dbeafe !important; -webkit-text-fill-color: #dbeafe !important; border-color: #475569 !important; } html body.contrast-mode .ac-page { color: #ffffff !important; } html body.contrast-mode .ac-page :where( .ac-panel, .ac-card, .ac-softbox, .ac-pill, .ac-kpi, .ac-kid-card, .ac-kid-track-card, .ac-parent-card, .ac-parent-summary, .ac-modal-metric, .ac-mgmt-panel, .ac-mgmt-note, .ac-mgmt-mini-kpi, .ac-mgmt-student-card, .ac-mgmt-student-card__metric, .ac-empty-mobile ) { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .ac-page :where( .ac-panel__header h2, .ac-panel__header p, .ac-card__title, .ac-card__metric, .ac-card__subtitle, .ac-pill__label, .ac-pill__value, .ac-kpi__label, .ac-kpi__value, .ac-kid-card__titlewrap h3, .ac-kid-storybox__label, .ac-kid-storybox__value, .ac-kid-storybox__help, .ac-kid-mini-note, .ac-kid-track-card__label, .ac-kid-track-card__value, .ac-kid-track-card__help, .ac-kid-track-footer__text, .ac-parent-modal__title, .ac-parent-modal__subtitle, .ac-parent-card__label, .ac-parent-card__value, .ac-parent-summary, .ac-mgmt-panel__header h2, .ac-mgmt-panel__header p, .ac-mgmt-note, .ac-mgmt-mini-kpi span, .ac-mgmt-mini-kpi strong, .ac-mgmt-student-card__name strong, .ac-mgmt-student-card__name span, .ac-mgmt-student-card__metric span, .ac-mgmt-student-card__metric strong, .ac-mgmt-student-card__footer, .ac-mgmt-modal__hero h5, .ac-mgmt-modal__hero p, .ac-modal-metric__label, .ac-modal-metric__value ) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .ac-page :where(.ac-hero, .ac-mgmt-hero, .ac-hero--child) { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .ac-page :where(.ac-hero h1, .ac-hero p, .ac-meta__label, .ac-meta__value, .ac-mgmt-hero h1, .ac-mgmt-hero p, .ac-mgmt-summary-card span, .ac-mgmt-summary-card strong, .ac-kid-mini-stat span, .ac-kid-mini-stat strong) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .ac-page :where(.ac-meta, .ac-mgmt-summary-card, .ac-kid-mini-stat) { background: #0a0a0a !important; background-color: #0a0a0a !important; color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .ac-page .ac-progress { background: #333333 !important; border: 1px solid #ffffff !important; } html body.contrast-mode .ac-page :where(.ac-results-table, .ac-modal-table) { background: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; } html body.contrast-mode .ac-page :where(.ac-results-table th, .ac-results-table td, .ac-modal-table th, .ac-modal-table td) { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: #ffffff !important; } html body.contrast-mode .ac-page .ac-mgmt-filter label { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .ac-page .ac-mgmt-filter :where(.form-control, .form-select, .choices__inner, .choices__input, .choices__list--dropdown, .choices__list[aria-expanded]) { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .ac-page .ac-mgmt-filter :where(.form-control, .form-select):focus, html body.contrast-mode .ac-page .ac-mgmt-filter .choices.is-focused .choices__inner, html body.contrast-mode .ac-page .ac-mgmt-filter .choices.is-open .choices__inner { border-color: #67e8f9 !important; box-shadow: 0 0 0 3px #67e8f9 !important; outline: none !important; } html body.contrast-mode .ac-page .ac-mgmt-filter .choices__placeholder { color: #d1d5db !important; -webkit-text-fill-color: #d1d5db !important; } html body.contrast-mode .ac-page .ac-mgmt-filter .choices__item--choice.is-highlighted { background: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } html body.contrast-mode .ac-page :where(.ac-mgmt-student-card__meta span, .ac-mgmt-modal__badge, .ac-kid-mood-pill, .ac-kid-stage-pill) { background: #111111 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #ffffff !important; } html body.contrast-mode .ac-page :where(.ac-btn--primary, .ac-kid-detail-btn, .ac-btn--parent) { background: #67e8f9 !important; background-color: #67e8f9 !important; background-image: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 2px solid #67e8f9 !important; box-shadow: none !important; } html body.contrast-mode .ac-page .ac-btn--soft { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .ac-page :where(.ac-btn--primary, .ac-kid-detail-btn, .ac-btn--parent):hover, html body.contrast-mode .ac-page .ac-btn--soft:hover { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: #ffffff !important; outline: none !important; } html body.contrast-mode .ac-page .ac-parent-modal .modal-content, html body.contrast-mode .ac-page .ac-parent-modal .modal-body, html body.contrast-mode .ac-page .ac-parent-modal .modal-header { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; } html body.contrast-mode .ac-page :where(.ac-parent-modal__eyebrow, .ac-parent-modal__mascot) { background: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } /* ---------------------------------------------------------------------- */ /* Language selector */ /* The currently selected language must never inherit the trigger surface.*/ /* ---------------------------------------------------------------------- */ html[data-bs-theme="dark"] body:not(.contrast-mode) .sensorama-language__trigger.language-wrapper { background: #202734 !important; background-color: #202734 !important; background-image: none !important; color: #f8fafc !important; border-color: #465269 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .sensorama-language__trigger .sensorama-language__current.language_text_select { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .sensorama-language__trigger .sensorama-language__eyebrow { color: color-mix(in srgb, var(--app-base-color) 58%, #ffffff) !important; -webkit-text-fill-color: color-mix(in srgb, var(--app-base-color) 58%, #ffffff) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .sensorama-language__trigger .sensorama-language__chevron { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: rgba(255, 255, 255, .08) !important; } html body.contrast-mode .sensorama-language__trigger.language-wrapper { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .sensorama-language__trigger .sensorama-language__current.language_text_select { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .sensorama-language__trigger .sensorama-language__eyebrow { color: #67e8f9 !important; -webkit-text-fill-color: #67e8f9 !important; } html body.contrast-mode .sensorama-language__trigger .sensorama-language__chevron { background: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #ffffff !important; } html body.contrast-mode .sensorama-language__menu.dropdown-menu { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } html body.contrast-mode .sensorama-language__option.language-list, html body.contrast-mode .sensorama-language__option .sensorama-language__option-text.language_text { background: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.contrast-mode .sensorama-language__option.language-list:hover { background: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; outline: none !important; } html body.contrast-mode .sensorama-language__option.language-list:hover :where(.sensorama-language__option-text, .sensorama-language__option-code) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } html body.contrast-mode .sensorama-language__option-code { background: #111111 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #ffffff !important; } } @media screen { html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-link { color: #93c5fd !important; -webkit-text-fill-color: #93c5fd !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-btn--soft { background: #172554 !important; color: #bfdbfe !important; -webkit-text-fill-color: #bfdbfe !important; border-color: #1d4ed8 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-child-badge { background: #27235a !important; color: #ddd6fe !important; -webkit-text-fill-color: #ddd6fe !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-status--ok { background: #14532d !important; color: #dcfce7 !important; -webkit-text-fill-color: #dcfce7 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-status--warn { background: #78350f !important; color: #fef3c7 !important; -webkit-text-fill-color: #fef3c7 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .ac-page .ac-status--muted { background: #334155 !important; color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; } html body.contrast-mode .ac-page .ac-link { color: #67e8f9 !important; -webkit-text-fill-color: #67e8f9 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; } html body.contrast-mode .ac-page .ac-child-badge { background: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #ffffff !important; } html body.contrast-mode .ac-page .ac-status--ok { background: #065f46 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #6ee7b7 !important; } html body.contrast-mode .ac-page .ac-status--warn { background: #facc15 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid #ffffff !important; } html body.contrast-mode .ac-page .ac-status--muted { background: #262626 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #ffffff !important; } } /* ========================================================================== Student card "Outros" dropdown: stable geometry across all visual themes -------------------------------------------------------------------------- This component must not participate in theme-driven layout changes. Bootstrap is kept in static-display mode and this final cascade owns the placement so Popper cannot flip the menu above the trigger in dark/contrast mode. ========================================================================== */ @media screen { .student-dashboard-card-column, .student-dashboard-card, .student-dashboard-card-actions, .student-card-actions-dropdown { overflow: visible !important; } .student-dashboard-card-column.student-dropdown-open { position: relative !important; z-index: 12000 !important; } .student-dashboard-card-column.student-dropdown-open .student-dashboard-card, .student-dashboard-card-column.student-dropdown-open .student-dashboard-card-actions { position: relative !important; z-index: 12001 !important; transform: none !important; overflow: visible !important; } .student-card-actions-dropdown { position: relative !important; z-index: 12002 !important; overflow: visible !important; } .student-card-actions-dropdown > .student-card-actions-menu, .student-card-actions-dropdown > .student-card-actions-menu[data-bs-popper="static"] { position: absolute !important; top: calc(100% + 4px) !important; right: auto !important; bottom: auto !important; left: 0 !important; inset: calc(100% + 4px) auto auto 0 !important; transform: none !important; margin: 0 !important; z-index: 12003 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .student-card-actions-dropdown > .student-card-actions-menu { background: var(--theme-surface, #1a2028) !important; background-color: var(--theme-surface, #1a2028) !important; color: var(--theme-text, #f1f5f9) !important; border-color: var(--theme-border, #46515f) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .32) !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item { background: transparent !important; color: var(--theme-text, #f1f5f9) !important; -webkit-text-fill-color: var(--theme-text, #f1f5f9) !important; text-decoration: none !important; text-decoration-line: none !important; opacity: 1 !important; } html[data-bs-theme="dark"] body:not(.contrast-mode) .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item:hover, html[data-bs-theme="dark"] body:not(.contrast-mode) .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item:focus { background: var(--theme-surface-raised, #222a34) !important; color: var(--theme-text-strong, #fff) !important; -webkit-text-fill-color: var(--theme-text-strong, #fff) !important; opacity: 1 !important; } html body.contrast-mode .student-card-actions-dropdown > .student-card-actions-menu { background: var(--theme-surface, #0b0f14) !important; background-color: var(--theme-surface, #0b0f14) !important; color: var(--theme-text, #fff) !important; border-color: var(--theme-border-strong, #94a3b8) !important; box-shadow: none !important; } html body.contrast-mode .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item, html body.contrast-mode .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item:link, html body.contrast-mode .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item:visited { background: transparent !important; color: var(--contrast-link, var(--theme-link, #67e8f9)) !important; -webkit-text-fill-color: var(--contrast-link, var(--theme-link, #67e8f9)) !important; text-decoration: underline !important; text-decoration-line: underline !important; text-decoration-thickness: .08em !important; text-underline-offset: .16em !important; opacity: 1 !important; } html body.contrast-mode .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item:hover, html body.contrast-mode .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item:focus, html body.contrast-mode .student-card-actions-dropdown > .student-card-actions-menu .dropdown-item.active { background: var(--theme-surface-raised, #111827) !important; color: var(--contrast-link-hover, #bae6fd) !important; -webkit-text-fill-color: var(--contrast-link-hover, #bae6fd) !important; text-decoration: underline !important; text-decoration-line: underline !important; } }