/**
 * EMSU Admin Portal - Dark Mode Styles v2.0
 * Rewritten 2026-02-10
 * 
 * Strategy: Target specific elements, avoid wildcard attribute selectors.
 * Never override page-specific colored elements (heatmaps, status badges, etc.)
 * Use CSS custom properties so pages can opt-in to dark-aware styling.
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --dm-bg-primary: #121218;
    --dm-bg-secondary: #1a1a24;
    --dm-bg-tertiary: #252532;
    --dm-bg-card: #1e1e2a;
    --dm-bg-input: #2a2a3a;
    --dm-bg-hover: #32324a;

    --dm-text-primary: #e8e8ed;
    --dm-text-secondary: #a8a8b8;
    --dm-text-muted: #787890;
    --dm-text-heading: #f0f0f5;

    --dm-border: #3a3a4d;
    --dm-border-light: #4a4a60;

    --dm-accent: #5b9cf6;
    --dm-accent-hover: #7bb3ff;
    --dm-link: #6ca8ff;
    --dm-link-hover: #8fc2ff;

    --dm-success: #4ade80;
    --dm-success-bg: rgba(74, 222, 128, 0.15);
    --dm-warning: #fbbf24;
    --dm-warning-bg: rgba(251, 191, 36, 0.15);
    --dm-danger: #f87171;
    --dm-danger-bg: rgba(248, 113, 113, 0.15);
    --dm-info: #60a5fa;
    --dm-info-bg: rgba(96, 165, 250, 0.15);
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.darkmode-toggle {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
    color: inherit;
}
.darkmode-toggle:hover {
    background: rgba(128, 128, 128, 0.2);
    transform: scale(1.05);
}
body.dark-mode .darkmode-toggle {
    border-color: var(--dm-border-light);
    color: var(--dm-text-primary);
}
body.dark-mode .darkmode-toggle:hover {
    background: var(--dm-bg-hover);
    border-color: var(--dm-accent);
}

/* ============================================
   BASE: html, body, background
   ============================================ */
html.dark-mode,
body.dark-mode {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   PORTAL NAV BAR (from header.php - inline styles)
   ============================================ */
body.dark-mode > nav,
html.dark-mode > nav {
    background-color: var(--dm-bg-secondary) !important;
    border-bottom: 1px solid var(--dm-border);
}
body.dark-mode > nav a,
html.dark-mode > nav a {
    color: var(--dm-link) !important;
}
body.dark-mode > nav a:hover,
html.dark-mode > nav a:hover {
    color: var(--dm-link-hover) !important;
}
body.dark-mode > nav span,
html.dark-mode > nav span {
    color: var(--dm-text-secondary) !important;
}
/* View as Role dropdown */
body.dark-mode #roleDropdown,
html.dark-mode #roleDropdown {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode #roleDropdown a,
html.dark-mode #roleDropdown a {
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border) !important;
}
body.dark-mode #roleDropdown a:hover,
html.dark-mode #roleDropdown a:hover {
    background: var(--dm-bg-hover) !important;
}

/* Login-as and View-as-role banners */
html.dark-mode > div[style*="background:#fff3cd"],
html.dark-mode > div[style*="background:#d1ecf1"] {
    opacity: 0.9;
}

/* Horizontal rule separator */
body.dark-mode > hr,
html.dark-mode > hr {
    border-color: var(--dm-border) !important;
    opacity: 0.5;
}

/* ============================================
   HEADINGS
   ============================================ */
body.dark-mode h1, body.dark-mode h2,
body.dark-mode h3, body.dark-mode h4,
body.dark-mode h5, body.dark-mode h6 {
    color: var(--dm-text-heading);
}

/* ============================================
   LINKS
   ============================================ */
body.dark-mode a {
    color: var(--dm-link);
}
body.dark-mode a:hover {
    color: var(--dm-link-hover);
}

/* ============================================
   TABLES
   ============================================ */
body.dark-mode table {
    border-color: var(--dm-border);
}
body.dark-mode th {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode td {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode tr:nth-child(even) td {
    background-color: var(--dm-bg-secondary) !important;
}
body.dark-mode thead th {
    background-color: var(--dm-bg-tertiary) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-light) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}
body.dark-mode option {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-primary);
}

/* Bootstrap form-control */
body.dark-mode .form-control {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-light) !important;
}
body.dark-mode .form-control:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(91, 156, 246, 0.25) !important;
}
body.dark-mode .form-select {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-light) !important;
}
body.dark-mode .form-group label,
body.dark-mode label {
    color: var(--dm-text-primary);
}

/* ============================================
   BOOTSTRAP CARDS (class="card")
   ============================================ */
body.dark-mode .card {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .card-body {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .card-header {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-heading) !important;
    border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .card-footer {
    background-color: var(--dm-bg-secondary) !important;
    border-top-color: var(--dm-border) !important;
}

/* ============================================
   BOOTSTRAP BADGES
   ============================================ */
body.dark-mode .badge {
    border: 1px solid var(--dm-border);
}

/* ============================================
   BOOTSTRAP BUTTONS — preserve colored backgrounds
   ============================================ */
body.dark-mode .btn {
    color: #fff;
}
body.dark-mode .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }
body.dark-mode .btn-success { background-color: #198754 !important; border-color: #198754 !important; color: #fff !important; }
body.dark-mode .btn-danger  { background-color: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }
body.dark-mode .btn-warning { background-color: #ffc107 !important; border-color: #ffc107 !important; color: #212529 !important; }
body.dark-mode .btn-info    { background-color: #0dcaf0 !important; border-color: #0dcaf0 !important; color: #000 !important; }
body.dark-mode .btn-secondary { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; }
body.dark-mode .btn-light   { background-color: var(--dm-bg-tertiary) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; }
body.dark-mode .btn-dark    { background-color: #343a40 !important; border-color: #343a40 !important; color: #fff !important; }

body.dark-mode .btn-outline-primary   { color: #6ea8fe !important; border-color: #6ea8fe !important; background: transparent !important; }
body.dark-mode .btn-outline-secondary { color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; background: transparent !important; }
body.dark-mode .btn-outline-success   { color: var(--dm-success) !important; border-color: var(--dm-success) !important; background: transparent !important; }
body.dark-mode .btn-outline-danger    { color: var(--dm-danger) !important; border-color: var(--dm-danger) !important; background: transparent !important; }

/* ============================================
   BOOTSTRAP ALERTS
   ============================================ */
body.dark-mode .alert-info    { background-color: var(--dm-info-bg) !important; color: var(--dm-info) !important; border-color: rgba(96,165,250,0.3) !important; }
body.dark-mode .alert-success { background-color: var(--dm-success-bg) !important; color: var(--dm-success) !important; border-color: rgba(74,222,128,0.3) !important; }
body.dark-mode .alert-warning { background-color: var(--dm-warning-bg) !important; color: var(--dm-warning) !important; border-color: rgba(251,191,36,0.3) !important; }
body.dark-mode .alert-danger  { background-color: var(--dm-danger-bg) !important; color: var(--dm-danger) !important; border-color: rgba(248,113,113,0.3) !important; }

/* ============================================
   BOOTSTRAP MODALS
   ============================================ */
body.dark-mode .modal-content {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .modal-header {
    background-color: var(--dm-bg-tertiary) !important;
    border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .modal-header .modal-title {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .modal-footer {
    border-top-color: var(--dm-border) !important;
}
body.dark-mode .modal-header .btn-close {
    filter: invert(1);
}

/* ============================================
   BOOTSTRAP NAV TABS / PILLS
   ============================================ */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .nav-tabs .nav-link {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important;
}
body.dark-mode .nav-pills .nav-link {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .nav-pills .nav-link.active {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
}

/* ============================================
   BOOTSTRAP DROPDOWNS
   ============================================ */
body.dark-mode .dropdown-menu {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .dropdown-item {
    color: var(--dm-text-primary) !important;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--dm-bg-hover) !important;
}
body.dark-mode .dropdown-divider {
    border-top-color: var(--dm-border) !important;
}

/* ============================================
   BOOTSTRAP PAGINATION
   ============================================ */
body.dark-mode .pagination .page-link {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-link) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #fff !important;
}

/* ============================================
   BOOTSTRAP TOOLTIPS / POPOVERS
   ============================================ */
body.dark-mode .tooltip-inner {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   TAILWIND OVERRIDES
   ============================================ */
body.dark-mode .bg-white {
    background-color: var(--dm-bg-card) !important;
}
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100 {
    background-color: var(--dm-bg-secondary) !important;
}
body.dark-mode .bg-gray-200 {
    background-color: var(--dm-bg-tertiary) !important;
}
body.dark-mode .text-gray-400,
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-600 {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
    color: var(--dm-text-primary) !important;
}
body.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}
body.dark-mode .border {
    border-color: var(--dm-border) !important;
}
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: var(--dm-border) !important;
}
body.dark-mode .shadow-sm,
body.dark-mode .shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dm-border) !important;
}

/* ============================================
   HORIZONTAL RULES
   ============================================ */
body.dark-mode hr {
    border-color: var(--dm-border);
    opacity: 0.5;
}

/* ============================================
   CODE BLOCKS & PRE
   ============================================ */
body.dark-mode pre,
body.dark-mode code {
    background-color: var(--dm-bg-secondary);
    color: #e2e8f0;
    border-color: var(--dm-border);
}

/* ============================================
   SCROLLBARS (WebKit)
   ============================================ */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-secondary);
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-border-light);
    border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted);
}

/* ============================================
   ADMIN PORTAL: SKILLS REPORT / DASHBOARD
   ============================================ */
body.dark-mode .table-wrap {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .title {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .subtitle {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .helper {
    color: var(--dm-text-muted) !important;
}
body.dark-mode .sort {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .sort:hover {
    color: var(--dm-link-hover) !important;
}
body.dark-mode .page-size {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .center-head {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .field {
    color: var(--dm-text-primary) !important;
}

/* Progress key / legend */
body.dark-mode .legend {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .legend h2 {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

/* Status swatches - keep colored backgrounds */
body.dark-mode .sw { color: #fff !important; }
body.dark-mode .sw.black { background-color: #444 !important; }
body.dark-mode .sw.grey  { background-color: #666 !important; }

/* ============================================
   ADMIN PORTAL: SECTION / MODERN-CARD
   ============================================ */
body.dark-mode .section {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .section h2 {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}
body.dark-mode .modern-card {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .modern-card h2 {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-heading) !important;
}

/* KV tables */
body.dark-mode .kv-table th {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .kv-table td {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* Skills table */
body.dark-mode .skills-table th {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .skills-table td {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

/* Progress section */
body.dark-mode .progress {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .progress h2 {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-heading) !important;
}

/* ============================================
   ADMIN PORTAL: STAT CARDS
   ============================================ */
body.dark-mode .stat-card {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   ADMIN PORTAL: REPORT CARDS
   ============================================ */
body.dark-mode .report-card {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .report-card-footer {
    background-color: var(--dm-bg-secondary) !important;
    border-top-color: var(--dm-border) !important;
}

/* ============================================
   ACTIONS BAR
   ============================================ */
body.dark-mode .actions {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

/* ============================================
   NOTES / COMMUNICATION LOG
   ============================================ */
body.dark-mode .note-entry {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .note {
    color: var(--dm-text-secondary) !important;
    background-color: var(--dm-bg-secondary) !important;
}
body.dark-mode .fineprint,
body.dark-mode .meta {
    color: var(--dm-text-muted) !important;
}
body.dark-mode .comm-log-link {
    color: var(--dm-link) !important;
}

/* ============================================
   EDITABLE FIELDS
   ============================================ */
body.dark-mode .editable-input,
body.dark-mode .editable-textarea,
body.dark-mode .inline-edit {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-light) !important;
}

/* ============================================
   BUTTONS (custom classes)
   ============================================ */
body.dark-mode .modern-btn { color: #fff !important; }
body.dark-mode .modern-btn-primary { background: #0d6efd !important; color: #fff !important; }
body.dark-mode .modern-btn-success { background: #198754 !important; color: #fff !important; }
body.dark-mode .modern-btn-danger  { background: #dc3545 !important; color: #fff !important; }
body.dark-mode .modern-btn-warning { background: #ffc107 !important; color: #212529 !important; }
body.dark-mode .modern-btn-secondary { background: #6c757d !important; color: #fff !important; }
body.dark-mode .btn-mini { color: #fff !important; }

/* ============================================
   SENT TRACKING
   ============================================ */
body.dark-mode .sent-wrap,
body.dark-mode .sent-track {
    background-color: var(--dm-bg-tertiary) !important;
}
body.dark-mode .sent-label {
    color: var(--dm-text-secondary) !important;
}

/* ============================================
   SEARCH BOX / TYPE SUMMARY / PAGINATION
   ============================================ */
body.dark-mode .search-box,
body.dark-mode .type-summary,
body.dark-mode .pagination {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .header {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

/* ============================================
   DELIMITER ROWS
   ============================================ */
body.dark-mode .delimiter {
    border-color: var(--dm-border) !important;
}
body.dark-mode .delimiter td {
    background: var(--dm-bg-secondary) !important;
}
body.dark-mode .row-divider {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

/* ============================================
   INLINE WHITE BACKGROUNDS (targeted)
   Only override known admin portal patterns.
   Do NOT use attribute wildcard selectors.
   ============================================ */
body.dark-mode .bg-white,
body.dark-mode .bg-light {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   ALLTASTIC / PROJECT ARGUS
   ============================================ */
body.dark-mode .cap-sidebar {
    color: var(--dm-text-primary);
}
body.dark-mode .cap-card {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .cap-card:hover {
    background-color: var(--dm-bg-hover) !important;
}
body.dark-mode .cap-card h3 {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .cap-card p {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .chat-container {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .chat-toolbar {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .msg-bubble {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .msg-bubble.assistant {
    background-color: var(--dm-bg-tertiary) !important;
}
body.dark-mode .history-sidebar {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .history-sidebar-header {
    background-color: var(--dm-bg-tertiary) !important;
}
body.dark-mode .cs-copy-panel,
body.dark-mode .sources-panel {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .model-hint {
    color: var(--dm-text-muted) !important;
}

/* ============================================
   INSTRUCTOR RESOURCES
   ============================================ */
body.dark-mode .quick-btn {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .quick-btn:hover {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-link) !important;
}
body.dark-mode .resource-card {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .resource-card h5 {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .resource-card p {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .module-header {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .module-content {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   DATE PILLS (various pages)
   ============================================ */
body.dark-mode .date-pill {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .date-pill.active,
body.dark-mode .date-pill.btn-success {
    background-color: #198754 !important;
    color: #fff !important;
}

/* ============================================
   PRINT SUPPRESSION — hide dark mode in print
   ============================================ */
@media print {
    body.dark-mode,
    html.dark-mode {
        background: #fff !important;
        color: #000 !important;
    }
    body.dark-mode * {
        background: transparent !important;
        color: #000 !important;
        border-color: #ccc !important;
        box-shadow: none !important;
    }
    body.dark-mode .darkmode-toggle,
    html.dark-mode > nav {
        display: none !important;
    }
}

/* ============================================
   NOTIFICATIONS PAGE (routes/notifications.php)
   ============================================ */
body.dark-mode .notifications-container .page-header {
    background-color: var(--dm-bg-card) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
body.dark-mode .notifications-container .page-header h1 {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .notifications-container .page-header p {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .notifications-container .back-link {
    color: var(--dm-link) !important;
}
body.dark-mode .notifications-container .back-link:hover {
    color: var(--dm-link-hover) !important;
}

/* Filter tabs */
body.dark-mode .filter-tab {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .filter-tab:hover {
    background: var(--dm-bg-hover) !important;
}
body.dark-mode .filter-tab.active {
    background: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}

/* Notification cards */
body.dark-mode .notification-card {
    background-color: var(--dm-bg-card) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
body.dark-mode .notification-card.unread {
    background-color: var(--dm-bg-secondary) !important;
}
body.dark-mode .notification-title {
    color: var(--dm-text-heading) !important;
}
body.dark-mode .notification-message {
    color: var(--dm-text-secondary) !important;
}
body.dark-mode .notification-time {
    color: var(--dm-text-muted) !important;
}

/* Badges */
body.dark-mode .acknowledged-badge {
    background: var(--dm-success-bg) !important;
    color: var(--dm-success) !important;
}
body.dark-mode .saved-badge {
    background: var(--dm-warning-bg) !important;
    color: var(--dm-warning) !important;
}

/* Action buttons on notification cards */
body.dark-mode .notification-actions .btn-unsave {
    background: var(--dm-warning-bg) !important;
    color: var(--dm-warning) !important;
}
body.dark-mode .notification-actions .btn-folder {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .notification-actions .btn-save {
    color: var(--dm-warning) !important;
    border-color: var(--dm-warning) !important;
}

/* Empty state */
body.dark-mode .no-notifications {
    background-color: var(--dm-bg-card) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
body.dark-mode .no-notifications-icon {
    color: var(--dm-text-muted) !important;
}
body.dark-mode .no-notifications-text {
    color: var(--dm-text-secondary) !important;
}

/* Pagination */
body.dark-mode .pagination-btn {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
body.dark-mode .pagination-btn:hover {
    background: var(--dm-bg-hover) !important;
    border-color: var(--dm-border-light) !important;
}
body.dark-mode .pagination-btn.active {
    background: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}
body.dark-mode .pagination-info {
    color: var(--dm-text-muted) !important;
}
body.dark-mode .results-count {
    color: var(--dm-text-muted) !important;
}

/* Acknowledge all button */
body.dark-mode .btn-ack-all {
    background: #198754 !important;
    color: #fff !important;
}
body.dark-mode .btn-ack-all:hover {
    background: #157347 !important;
}