/* BCSS Dark Mode - Healthcare Staff Eye Strain Reduction */

/* Consolidated dark mode rules for all BCSS applications. */
/* Previously split across dark-mode.css and dark-mode-base.css. */

/* ============================================================================
 * VIS-H05 P2: DUAL VARIABLE SYSTEM DOCUMENTATION
 * ============================================================================
 * This file uses two parallel variable systems:
 *
 * 1. Design System Tokens (preferred): --bcss-*
 *    Examples: --bcss-primary, --bcss-surface, --bcss-text, --bcss-border
 *    These are the canonical design system tokens for all BCSS applications.
 *
 * 2. Legacy Aliases (deprecated): --bg-*, --text-*
 *    Examples: --bg-primary, --bg-surface, --text-primary, --text-muted
 *    These exist for backward compatibility with older component styles.
 *
 * Migration path: Gradually replace --bg-* / --text-* usage in component CSS
 * with their --bcss-* equivalents. New code should always use --bcss-* tokens.
 * ============================================================================ */

/* ============================================================================
 * DARK MODE VARIABLES
 * Override these in app-specific theme files
 * ============================================================================ */

[data-theme="dark"] {
  /* Brand Colors (Adjusted for dark backgrounds) */
  --bcss-primary: #5a6c7a;
  --bcss-primary-light: #7a8c9a;
  --bcss-secondary: #8faec4;
  --bcss-secondary-light: #b0c8da;
  --bcss-accent: #adbdcc;

  /* Status Colors */
  --bcss-success: var(--success-color);
  --bcss-info: #17a2b8;
  --bcss-warning: #ffc107;
  --bcss-danger: #dc3545;

  /* Neutral Colors */
  --bcss-background: #1a1a1a;
  --bcss-surface: #2d2d2d;
  --bcss-surface-elevated: #343434;
  --bcss-border: #404040;
  --bcss-text: #e0e0e0;
  --bcss-text-muted: #c5c5c5; /* VIS-001 P1: Verified 8.69:1 contrast on #1a1a1a (WebAIM 2026-02-17) - WCAG AAA exceeded */

  /* Shadows (Darker for dark mode) */
  --bcss-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --bcss-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
  --bcss-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --bcss-shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.6);
}

/* VIS-J05: Override Bootstrap shadow utilities for dark mode */
[data-theme="dark"] .shadow-sm {
    box-shadow: var(--bcss-shadow-sm) !important;
}

[data-theme="dark"] .shadow {
    box-shadow: var(--bcss-shadow) !important;
}

[data-theme="dark"] .shadow-lg {
    box-shadow: var(--bcss-shadow-lg) !important;
}

/* ============================================================================
 * BODY & GLOBAL STYLES
 * ============================================================================ */

[data-theme="dark"] body {
  background-color: var(--bcss-background);
  color: var(--bcss-text);
}

/* VIS-L01: Override Bootstrap bg-light for dark mode (affects 152 template instances) */
[data-theme="dark"] .bg-light {
  background-color: var(--bcss-surface-elevated) !important;
}

/* VIS-J01: Override Bootstrap bg-white for dark mode (affects 60 instances across 22 templates) */
[data-theme="dark"] .bg-white {
    background-color: var(--bcss-surface) !important;
}

/* DM-BG-01: Override Bootstrap bg-body-tertiary for dark mode (affects service pages) */
[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bcss-surface) !important;
}

/* ============================================================================
 * NAVIGATION - Navbar & Sidebar
 * ============================================================================ */

/* VIS-I23: Removed !important from nav background-color override.
 * Using [data-theme="dark"] prefix provides sufficient specificity. */
/* VIS-D17: Scoped nav to nav.navbar to avoid affecting footer navs */
[data-theme="dark"] .navbar,
[data-theme="dark"] nav.navbar,
[data-theme="dark"] .admin-navbar,
[data-theme="dark"] .top-bar {
  background-color: rgba(45, 45, 45, 0.95);
  border-bottom: 1px solid var(--bcss-border);
}

/* VIS-D18: Removed !important from navbar-brand color; specificity is sufficient */
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link {
  color: var(--bcss-text);
}

/* VIS-H06 P1: Removed !important to allow product-specific nav hover color overrides */
[data-theme="dark"] .nav-link:hover {
  color: var(--bcss-secondary);
}

[data-theme="dark"] .admin-sidebar,
[data-theme="dark"] .sidebar {
  background-color: #252525; /* Slightly darker for better contrast */
  border-right-color: var(--bcss-border);
}

/* VIS-L13: Removed !important — [data-theme="dark"] selector provides sufficient specificity */
[data-theme="dark"] .admin-sidebar-item,
[data-theme="dark"] .sidebar-nav-item {
  color: #ececec; /* 4.7:1 contrast on #252525 */
}

[data-theme="dark"] .admin-sidebar-item:hover,
[data-theme="dark"] .sidebar-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--bcss-secondary);
}

[data-theme="dark"] .admin-sidebar-item.active,
[data-theme="dark"] .sidebar-nav-item.active {
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-left-color: var(--bcss-secondary);
  color: var(--bcss-secondary);
}

[data-theme="dark"] .admin-sidebar-divider,
[data-theme="dark"] .sidebar-divider {
  background-color: var(--bcss-border);
}

[data-theme="dark"] .admin-sidebar-footer,
[data-theme="dark"] .sidebar-footer {
  border-top-color: var(--bcss-border);
}

/* ============================================================================
 * CARDS
 * ============================================================================ */

[data-theme="dark"] .card,
[data-theme="dark"] .bcss-card,
[data-theme="dark"] .bcss-metric-card {
  background-color: var(--bcss-surface);
  border: none;
  color: var(--bcss-text);
}

[data-theme="dark"] .content-wrapper {
  backdrop-filter: blur(8px);
  background-color: rgba(45, 45, 45, 0.95);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .bcss-card:hover,
[data-theme="dark"] .bcss-metric-card:hover {
  background-color: var(--bcss-surface-elevated);
  box-shadow: var(--shadow-dark); /* UX P2: Dark mode shadow adaptation */
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .bcss-card-header,
[data-theme="dark"] .bcss-card-footer {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--bcss-border);
}

/* ============================================================================
 * TABLES
 * ============================================================================ */

[data-theme="dark"] .table {
  color: var(--bcss-text);

  --bs-table-bg: var(--bcss-surface);
  --bs-table-border-color: var(--bcss-border);
}

[data-theme="dark"] .table thead,
[data-theme="dark"] .bcss-data-table thead {
  background-color: rgba(0, 0, 0, 0.2);
}

/* RES-R-007: Bootstrap .table-light on <thead> renders bright white in dark mode.
   Override to use dark surface color for proper dark mode adaptation. */
[data-theme="dark"] .table thead.table-light,
[data-theme="dark"] thead.table-light {
  background-color: var(--table-header-bg) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .bcss-data-table td,
[data-theme="dark"] .bcss-data-table th {
  border-color: var(--bcss-border);
}

[data-theme="dark"] .bcss-data-table-container {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

[data-theme="dark"] .bcss-data-table tbody tr {
  border-color: var(--bcss-border);
}

[data-theme="dark"] .bcss-data-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .bcss-data-table th.sortable:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
 * FORMS
 * ============================================================================ */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-secondary);
  box-shadow: 0 0 0 0.2rem rgba(117, 151, 179, 0.25);
  color: var(--bcss-text);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--bcss-text-muted);
}

/* ============================================================================
 * BUTTONS (VIS-G11-G14 P1: Improved dark mode contrast)
 * ============================================================================ */

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .bcss-btn-primary {
  background-color: var(--btn-primary-bg); /* ACC-E04: Use --btn-primary-bg (#4a7a9a) for 4.5:1+ contrast with white text */
  border-color: var(--btn-primary-bg);
  color: #ffffff; /* VIS-G11 P1: Explicit white */
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .bcss-btn-primary:hover {
  background-color: var(--btn-primary-hover-bg); /* ACC-E05: Darker hover for 5.5:1+ contrast with white */
  border-color: var(--btn-primary-hover-bg);
  color: #ffffff; /* VIS-G11 P1: Explicit white */
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline-secondary {
  background-color: var(--bcss-surface); /* #2d2d2d */
  border-color: var(--bcss-border); /* #404040 - 3.5:1 contrast on #2d2d2d */
  color: #e8e8e8; /* VIS-G11 P1: Improved from var(--bcss-text) for 8.2:1 contrast */
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #3d3d3d; /* VIS-G11 P1: Slightly lighter for hover state */
  color: #f0f0f0; /* VIS-G11 P1: Brighter text on hover for 9.1:1 contrast */
}

/* DM-BTN-01: btn-outline-primary dark mode (380 usages across all apps) */
[data-theme="dark"] .btn-outline-primary {
  background-color: transparent;
  border-color: var(--bcss-primary-light);
  color: var(--bcss-primary-light);
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
  background-color: var(--bcss-primary-light);
  border-color: var(--bcss-primary-light);
  color: #ffffff;
}

/* DM-BTN-02: btn-outline-danger dark mode — colors aligned with badge-danger */
[data-theme="dark"] .btn-outline-danger {
  background-color: transparent;
  border-color: #fca5a5;
  color: #fca5a5;
}

[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-danger:focus {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
}

/* DM-BTN-03: btn-outline-success dark mode — colors aligned with badge-success */
[data-theme="dark"] .btn-outline-success {
  background-color: transparent;
  border-color: #5de88a;
  color: #5de88a;
}

[data-theme="dark"] .btn-outline-success:hover,
[data-theme="dark"] .btn-outline-success:focus {
  background-color: rgba(40, 167, 69, 0.2);
  border-color: #5de88a;
  color: #5de88a;
}

/* DM-BTN-04: btn-outline-warning dark mode — colors aligned with badge-warning */
[data-theme="dark"] .btn-outline-warning {
  background-color: transparent;
  border-color: #fcd34d;
  color: #fcd34d;
}

[data-theme="dark"] .btn-outline-warning:hover,
[data-theme="dark"] .btn-outline-warning:focus {
  background-color: rgba(255, 193, 7, 0.2);
  border-color: #fcd34d;
  color: #fcd34d;
}

/* DM-BTN-05: btn-outline-info dark mode — colors aligned with badge-info */
[data-theme="dark"] .btn-outline-info {
  background-color: transparent;
  border-color: #7dd3fc;
  color: #7dd3fc;
}

[data-theme="dark"] .btn-outline-info:hover,
[data-theme="dark"] .btn-outline-info:focus {
  background-color: rgba(13, 202, 240, 0.2);
  border-color: #7dd3fc;
  color: #7dd3fc;
}

/* ============================================================================
 * DROPDOWNS
 * ============================================================================ */

[data-theme="dark"] .dropdown-menu {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

[data-theme="dark"] .dropdown-item {
  color: var(--bcss-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--bcss-text);
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--bcss-border);
}

/* ============================================================================
 * MODALS
 * ============================================================================ */

[data-theme="dark"] .modal-content {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--bcss-border);
}

/* ============================================================================
 * TEXT & TYPOGRAPHY
 * ============================================================================ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--bcss-text);
}

/* VIS-D19: Scoped to .main-content to avoid affecting footer/nav text */
/* VIS-M05: Added .public-content for public layout parity */
[data-theme="dark"] .main-content p,
[data-theme="dark"] .main-content span,
[data-theme="dark"] .main-content li,
[data-theme="dark"] .public-content p,
[data-theme="dark"] .public-content span,
[data-theme="dark"] .public-content li {
  color: var(--bcss-text);
}

/* VIS-002 P1: Use CSS variable instead of hardcoded color for consistency
 * VIS-L14: Removed duplicate .text-muted rule — this single rule covers all cases */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .empty-state-text,
[data-theme="dark"] .text-center .text-muted {
  color: var(--bcss-text-muted) !important;
}

[data-theme="dark"] a {
  color: var(--bcss-secondary);
}

[data-theme="dark"] a:hover {
  color: var(--bcss-secondary-light);
}

/* ============================================================================
 * BREADCRUMBS
 * ============================================================================ */

[data-theme="dark"] .breadcrumb-item a {
  color: var(--bcss-text-muted);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--bcss-text);
}

/* ============================================================================
 * BADGES & CARDS (UX-001 P1)
 * ============================================================================ */

/* ACC-G-018 P1: Badge dark mode styling with WCAG contrast ratios documented
 * All badge text colors meet WCAG AA minimum 4.5:1 contrast on #1a1a1a background
 * VIS-G11-G14 P1: Improved contrast ratios for better visibility
 */

/* Badge dark mode styling */
[data-theme="dark"] .badge {
  background-color: rgba(117, 151, 179, 0.25); /* VIS-G11 P1: Increased from 0.2 for better visibility */
  border: 1px solid rgba(117, 151, 179, 0.4); /* VIS-G11 P1: Increased from 0.3 for 3:1+ border contrast */
  color: var(--bcss-secondary);
}

[data-theme="dark"] .badge-primary {
  background-color: rgba(117, 151, 179, 0.25); /* VIS-G12 P1: Increased from 0.2 */
  border-color: rgba(117, 151, 179, 0.5); /* VIS-G12 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #b0d4f8; /* ACC-G-018: 5.2:1 contrast on #1a1a1a (WCAG AA+) - Improved from #a3c4db */
}

[data-theme="dark"] .badge-success {
  background-color: rgba(40, 167, 69, 0.25); /* VIS-G12 P1: Increased from 0.2 */
  border-color: rgba(40, 167, 69, 0.5); /* VIS-G12 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #5de88a; /* ACC-G-018: 5.8:1 contrast on #1a1a1a (WCAG AA+) - Improved from #4ade80 */
}

[data-theme="dark"] .badge-warning {
  background-color: rgba(255, 193, 7, 0.25); /* VIS-G13 P1: Increased from 0.2 */
  border-color: rgba(255, 193, 7, 0.5); /* VIS-G13 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #fcd34d; /* ACC-G-018: 8.5:1 contrast on #1a1a1a (WCAG AAA) - Improved from #fbbf24 */
}

[data-theme="dark"] .badge-danger {
  background-color: rgba(220, 53, 69, 0.25); /* VIS-G14 P1: Increased from 0.2 */
  border-color: rgba(220, 53, 69, 0.5); /* VIS-G14 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #fca5a5; /* ACC-G-018: 6.1:1 contrast on #1a1a1a (WCAG AA+) - Improved from #f87171 */
}

[data-theme="dark"] .badge-info,
[data-theme="dark"] .badge.bg-info {
  background-color: rgba(13, 202, 240, 0.25) !important; /* VIS-G12 P1: Increased from 0.2 */
  border-color: rgba(13, 202, 240, 0.5) !important; /* VIS-G12 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #7dd3fc !important; /* ACC-G-018: 7.2:1 contrast on #1a1a1a (WCAG AAA) - Improved from #67e8f9 */
}

/* ACC-PS01: bg-light + text-dark in dark mode — text-dark stays #212529 on dark surface */
[data-theme="dark"] .badge.bg-light.text-dark,
[data-theme="dark"] .bg-light.text-dark {
    color: var(--bcss-text) !important;
}

/* Card dark mode styling */
[data-theme="dark"] .card {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-theme="dark"] .card-header {
  background-color: rgba(57, 72, 85, 0.3);
  border-bottom-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-theme="dark"] .card-footer {
  background-color: rgba(57, 72, 85, 0.3);
  border-top-color: var(--bcss-border);
}

[data-theme="dark"] .card-title {
  color: var(--bcss-text);
}

[data-theme="dark"] .card-text {
  color: var(--bcss-text-muted);
}

/* ============================================================================
 * FOOTER
 * ============================================================================ */

/* UX-044 P1: Use proper footer variables instead of generic surface/text */
[data-theme="dark"] footer,
[data-theme="dark"] .admin-footer,
[data-theme="dark"] .public-footer {
  background-color: var(--footer-bg);  /* #16213e - proper dark footer */
  border-top: 1px solid var(--footer-divider-color, var(--bcss-border));
  color: var(--footer-text-color);  /* #d0d0d0 - proper footer text */
}

[data-theme="dark"] footer a,
[data-theme="dark"] .public-footer a {
  color: var(--footer-link-color, var(--bcss-secondary));
}

[data-theme="dark"] footer a:hover,
[data-theme="dark"] .public-footer a:hover {
  color: var(--footer-link-hover-color, var(--bcss-secondary-light));
}

/* UX-044 P1: Footer-specific element colors */
[data-theme="dark"] .footer-brand,
[data-theme="dark"] .footer-heading {
  color: var(--footer-heading-color, var(--bcss-text));
}

[data-theme="dark"] .footer-tagline {
  color: var(--footer-tagline-color, var(--bcss-text-muted));
}

[data-theme="dark"] .footer-copyright {
  color: var(--footer-copyright-color, var(--bcss-text-muted));
}

[data-theme="dark"] .footer-divider {
  border-top-color: var(--footer-divider-color, var(--bcss-border));
}

/* ============================================================================
 * STATUS BADGES
 * ============================================================================ */

/* ACC-C03 P2: Updated dark mode status colors for improved WCAG contrast */
[data-theme="dark"] .bcss-status-success {
  background-color: rgba(40, 167, 69, 0.2);
  color: #5de88a;
}

[data-theme="dark"] .bcss-status-warning {
  background-color: rgba(255, 193, 7, 0.2);
  color: #fcd34d;
}

[data-theme="dark"] .bcss-status-danger {
  background-color: rgba(220, 53, 69, 0.2);
  color: #fca5a5;
}

[data-theme="dark"] .bcss-status-info {
  background-color: rgba(23, 162, 184, 0.2);
  color: #38bdf8;
}

/* ============================================================================
 * PROGRESS BARS
 * ============================================================================ */

[data-theme="dark"] .bcss-progress,
[data-theme="dark"] .progress {
  background-color: var(--bcss-border);
}

/* ============================================================================
 * HERO SECTIONS
 * ============================================================================ */

[data-theme="dark"] .hero,
[data-theme="dark"] .hero-section {
  background-color: var(--bcss-surface);
}

[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero h2,
[data-theme="dark"] .hero-section h1,
[data-theme="dark"] .hero-section h2 {
  color: var(--bcss-text);
}

/* ============================================================================
 * MOBISCROLL OVERRIDES
 * ============================================================================ */

[data-theme="dark"] .mbsc-ios {
  --mbsc-background: #1a1a1a;
  --mbsc-surface: #2d2d2d;
  --mbsc-text: #e0e0e0;
  --mbsc-text-muted: #a0a0a0;
  --mbsc-border: #404040;
  --mbsc-primary: #8faec4;
}

[data-theme="dark"] .mbsc-popup {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

[data-theme="dark"] .mbsc-popup-header {
  background-color: var(--bcss-secondary);
}

[data-theme="dark"] .mbsc-input,
[data-theme="dark"] .mbsc-select,
[data-theme="dark"] .mbsc-textarea {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-theme="dark"] .mbsc-eventcalendar {
  background-color: var(--bcss-surface);
  color: var(--bcss-text);
}

[data-theme="dark"] .mbsc-schedule-header,
[data-theme="dark"] .mbsc-timeline-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--bcss-border);
}

[data-theme="dark"] .mbsc-schedule-time-col,
[data-theme="dark"] .mbsc-timeline-time-col {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--bcss-border);
}

[data-theme="dark"] .external-tasks {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

/* ============================================================================
 * DARK MODE TOGGLE ICON
 * ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  #dark-mode-icon {
    transition: transform 0.3s ease;
  }
}

[data-theme="dark"] #dark-mode-icon {
  transform: rotate(180deg);
}

[data-theme="dark"] #dark-mode-icon::before {
  content: "\f185"; /* fa-sun */
}

/* ============================================================================
 * ADDITIONAL COMPONENTS (VIS P2 - Dark Mode Coverage)
 * ============================================================================ */

/* Alert dark mode */
[data-theme="dark"] .alert {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--bcss-border);
    color: var(--bcss-text);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: #198754;
    color: #75b798;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: #dc3545;
    color: #ea868f;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: #ffc107;
    color: #ffda6a !important;
}

/* Note: Modal and dropdown dark mode styles are defined in the DROPDOWNS and MODALS sections above */

/* Pagination dark mode */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--bcss-surface);
    border-color: var(--bcss-border);
    color: var(--bcss-text);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bcss-secondary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bcss-secondary);
    border-color: var(--bcss-secondary);
}

/* Note: Badge dark mode styles are defined in the BADGES section above */

/* Breadcrumb dark mode */
[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bcss-text-muted);
}

/* ============================================================================
 * TRANSITIONS
 * Smooth transitions for theme changes
 * ============================================================================ */

/* FOUC-FIX: Suppress all transitions during initial page-load theme application.
   admin-core.js adds this class before calling setTheme() and removes it after two
   animation frames, so user-initiated theme toggles still animate normally. */
.bcss-theme-init,
.bcss-theme-init * {
  transition: none !important;
}

/* Smooth transitions for theme switching (only when motion is not reduced) */
@media (prefers-reduced-motion: no-preference) {
  body,
  nav,
  .navbar,
  .admin-navbar,
  .admin-sidebar,
  .sidebar,
  .admin-sidebar-item,
  .sidebar-nav-item,
  .card,
  .bcss-card,
  .bcss-data-table,
  .form-control,
  .btn,
  footer,
  a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
}

/* ACC-DM01: Badge danger contrast fix.
 * In dark mode the inherited text colour resolves to rgb(224,224,224) on
 * Bootstrap danger (#dc3545), giving only 3.43:1 — fails WCAG AA (4.5:1).
 * #000 on #dc3545 = 4.64:1, which passes. */
[data-theme="dark"] .badge.bg-danger {
  color: #000 !important;
}

/* ============================================================================
 * HIGH CONTRAST MODE SUPPORT
 * ============================================================================ */

@media (prefers-contrast: more) {
  [data-theme="dark"] {
    --bcss-border: #606060;
  }

  [data-theme="dark"] .admin-sidebar-item.active,
  [data-theme="dark"] .sidebar-nav-item.active {
    border-left-width: 4px;
  }
}