/* ============================================
   DARK MODE GLOBAL CSS
   Komplett dark mode implementation för plattformen
   Färgpalett: Neutral Mörkgrå (#1f2937 / #111827)
   ============================================ */

/* ============================================
   1. CSS VARIABLES
   ============================================ */

:root {
  /* Light mode defaults (används när dark mode är av) */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
}

body.dark-mode {
  /* Bakgrunder */
  --dark-bg-primary: #111827;      /* gray-900 - Body, main container */
  --dark-bg-secondary: #1f2937;    /* gray-800 - Cards, sections */
  --dark-bg-tertiary: #374151;     /* gray-700 - Elevated cards, hover */
  --dark-bg-input: #1f2937;        /* Input fields */
  --dark-bg-hover: #4b5563;        /* gray-600 - Hover state */
  
  /* Text */
  --dark-text-primary: #f9fafb;    /* gray-50 - Huvudtext, rubriker */
  --dark-text-secondary: #d1d5db;  /* gray-300 - Sekundär text, beskrivningar */
  --dark-text-tertiary: #9ca3af;   /* gray-400 - Placeholder, labels */
  --dark-text-muted: #6b7280;      /* gray-500 - Disabled, subtle */
  
  /* Borders */
  --dark-border-primary: #374151;  /* gray-700 - Standard borders */
  --dark-border-secondary: #4b5563; /* gray-600 - Hover borders */
  --dark-border-focus: #6b7280;    /* gray-500 - Focus state */
  
  /* Accenter (behåll skarpa färger för kontrast) */
  --dark-primary: #3b82f6;         /* blue-500 - Primärknappar, länkar */
  --dark-primary-hover: #2563eb;   /* blue-600 - Primary hover */
  --dark-success: #10b981;         /* green-500 - Success states */
  --dark-success-hover: #059669;   /* green-600 - Success hover */
  --dark-warning: #f59e0b;         /* amber-500 - Warnings, UE badges */
  --dark-warning-hover: #d97706;   /* amber-600 - Warning hover */
  --dark-danger: #ef4444;          /* red-500 - Errors, delete */
  --dark-danger-hover: #dc2626;    /* red-600 - Danger hover */
  --dark-info: #06b6d4;            /* cyan-500 - Info messages */
  
  /* Shadows */
  --dark-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --dark-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --dark-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* ============================================
   2. LAYOUT & TYPOGRAPHY
   ============================================ */

body.dark-mode {
  background: var(--dark-bg-primary) !important;
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

/* Main containers */
body.dark-mode main,
body.dark-mode .content,
body.dark-mode .page-content,
body.dark-mode .container,
body.dark-mode .dashboard-container,
body.dark-mode .main-content {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dark-text-primary) !important;
}

/* Typography — ärv från body; undvik !important på alla span/div (vit text på ljusa ytor) */
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(--dark-text-primary);
}

body.dark-mode .text-muted,
body.dark-mode .text-secondary {
  color: var(--dark-text-secondary);
}

body.dark-mode label {
  color: var(--dark-text-secondary);
}

body.dark-mode a {
  color: var(--dark-primary);
}

body.dark-mode a:hover {
  color: var(--dark-primary-hover);
}

/* ============================================
   3. CARDS & PANELS
   ============================================ */

body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .section-card,
body.dark-mode .content-card,
body.dark-mode .info-card,
body.dark-mode .stat-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-shadow-sm);
}

body.dark-mode .card:hover,
body.dark-mode .panel:hover {
  border-color: var(--dark-border-secondary);
  box-shadow: var(--dark-shadow-md);
}

body.dark-mode .card-header,
body.dark-mode .panel-header {
  background: var(--dark-bg-tertiary);
  border-bottom-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .card-body,
body.dark-mode .panel-body {
  background: transparent;
  color: var(--dark-text-primary);
}

body.dark-mode .card-footer,
body.dark-mode .panel-footer {
  background: var(--dark-bg-tertiary);
  border-top-color: var(--dark-border-primary);
  color: var(--dark-text-secondary);
}

/* Elevated cards (hover, active states) */
body.dark-mode .card-elevated,
body.dark-mode .card.elevated {
  background: var(--dark-bg-tertiary);
  box-shadow: var(--dark-shadow-lg);
}

/* ============================================
   4. BUTTONS
   ============================================ */

/* Primary Button */
body.dark-mode .btn-primary,
body.dark-mode .button-primary {
  background: var(--dark-primary);
  color: #ffffff;
  border-color: var(--dark-primary);
}

body.dark-mode .btn-primary:hover,
body.dark-mode .button-primary:hover {
  background: var(--dark-primary-hover);
  border-color: var(--dark-primary-hover);
}

/* Secondary Button */
body.dark-mode .btn-secondary,
body.dark-mode .button-secondary,
body.dark-mode .btn,
body.dark-mode button:not([class*="btn-"]):not([class*="button-"]) {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .button-secondary:hover,
body.dark-mode .btn:hover {
  background: var(--dark-bg-hover);
  border-color: var(--dark-border-secondary);
}

/* Success Button */
body.dark-mode .btn-success {
  background: var(--dark-success);
  color: #ffffff;
  border-color: var(--dark-success);
}

body.dark-mode .btn-success:hover {
  background: var(--dark-success-hover);
  border-color: var(--dark-success-hover);
}

/* Warning Button */
body.dark-mode .btn-warning {
  background: var(--dark-warning);
  color: #1f2937;
  border-color: var(--dark-warning);
}

body.dark-mode .btn-warning:hover {
  background: var(--dark-warning-hover);
  border-color: var(--dark-warning-hover);
}

/* Danger Button */
body.dark-mode .btn-danger {
  background: var(--dark-danger);
  color: #ffffff;
  border-color: var(--dark-danger);
}

body.dark-mode .btn-danger:hover {
  background: var(--dark-danger-hover);
  border-color: var(--dark-danger-hover);
}

/* Ghost/Outline Buttons */
body.dark-mode .btn-ghost,
body.dark-mode .btn-outline {
  background: transparent;
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
}

body.dark-mode .btn-ghost:hover,
body.dark-mode .btn-outline:hover {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border-secondary);
}

/* Disabled Buttons */
body.dark-mode .btn:disabled,
body.dark-mode button:disabled {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-muted);
  border-color: var(--dark-border-primary);
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   5. FORMS
   ============================================ */

/* Input fields */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="time"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-input,
body.dark-mode .form-control {
  background: var(--dark-bg-input);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .form-input:focus,
body.dark-mode .form-control:focus {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-focus);
  outline-color: var(--dark-primary);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dark-text-tertiary);
}

/* Select dropdown */
body.dark-mode select option {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* Checkbox & Radio */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
  border-color: var(--dark-border-primary);
  background: var(--dark-bg-tertiary);
}

body.dark-mode input[type="checkbox"]:checked,
body.dark-mode input[type="radio"]:checked {
  background: var(--dark-primary);
  border-color: var(--dark-primary);
}

/* Form labels */
body.dark-mode .form-label,
body.dark-mode label {
  color: var(--dark-text-secondary);
}

/* Form groups */
body.dark-mode .form-group {
  color: var(--dark-text-primary);
}

/* Input groups */
body.dark-mode .input-group-text {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-secondary);
}

/* Disabled inputs */
body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode select:disabled {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-muted);
  border-color: var(--dark-border-primary);
  opacity: 0.6;
}

/* ============================================
   6. TABLES
   ============================================ */

body.dark-mode table,
body.dark-mode .table {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode table thead,
body.dark-mode .table thead {
  background: var(--dark-bg-tertiary);
  border-bottom-color: var(--dark-border-primary);
}

body.dark-mode table th,
body.dark-mode .table th {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
}

body.dark-mode table td,
body.dark-mode .table td {
  background: transparent;
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
}

body.dark-mode table tbody tr:hover,
body.dark-mode .table tbody tr:hover {
  background: var(--dark-bg-tertiary);
}

body.dark-mode table tbody tr:nth-child(even),
body.dark-mode .table-striped tbody tr:nth-child(even) {
  background: rgba(55, 65, 81, 0.3);
}

/* ============================================
   7. BADGES & PILLS
   ============================================ */

body.dark-mode .badge,
body.dark-mode .pill {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
}

/* Colored badges (behåll accenter) */
body.dark-mode .badge-primary {
  background: var(--dark-primary);
  color: #ffffff;
}

body.dark-mode .badge-success {
  background: var(--dark-success);
  color: #ffffff;
}

body.dark-mode .badge-warning {
  background: var(--dark-warning);
  color: #1f2937;
}

body.dark-mode .badge-danger {
  background: var(--dark-danger);
  color: #ffffff;
}

body.dark-mode .badge-info {
  background: var(--dark-info);
  color: #ffffff;
}

/* ============================================
   8. MODALS & DROPDOWNS
   ============================================ */

/* Modal */
body.dark-mode .modal,
body.dark-mode .modal-content {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-shadow-xl);
}

body.dark-mode .modal-header {
  background: var(--dark-bg-tertiary);
  border-bottom-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .modal-body {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode .modal-footer {
  background: var(--dark-bg-tertiary);
  border-top-color: var(--dark-border-primary);
}

body.dark-mode .modal-backdrop {
  background: rgba(0, 0, 0, 0.8);
}

body.dark-mode .modal-close,
body.dark-mode .close {
  color: var(--dark-text-secondary);
}

body.dark-mode .modal-close:hover,
body.dark-mode .close:hover {
  color: var(--dark-text-primary);
}

/* Dropdown */
body.dark-mode .dropdown-menu {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  box-shadow: var(--dark-shadow-lg);
}

body.dark-mode .dropdown-item {
  color: var(--dark-text-primary);
}

body.dark-mode .dropdown-item:hover {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

body.dark-mode .dropdown-divider {
  border-color: var(--dark-border-primary);
}

/* ============================================
   9. ALERTS & NOTIFICATIONS
   ============================================ */

body.dark-mode .alert {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .alert-info {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--dark-info);
  color: var(--dark-info);
}

body.dark-mode .alert-success {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--dark-success);
  color: var(--dark-success);
}

body.dark-mode .alert-warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--dark-warning);
  color: var(--dark-warning);
}

body.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--dark-danger);
  color: var(--dark-danger);
}

/* ============================================
   10. NAVIGATION & SIDEBAR
   ============================================ */

body.dark-mode .sidebar,
body.dark-mode .nav-sidebar {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
}

body.dark-mode .nav-item,
body.dark-mode .sidebar-item {
  color: var(--dark-text-secondary);
}

body.dark-mode .nav-item:hover,
body.dark-mode .sidebar-item:hover {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

body.dark-mode .nav-item.active,
body.dark-mode .sidebar-item.active {
  background: var(--dark-bg-tertiary);
  color: var(--dark-primary);
  border-left-color: var(--dark-primary);
}

/* Tabs */
body.dark-mode .tabs,
body.dark-mode .tab-list {
  border-bottom-color: var(--dark-border-primary);
}

body.dark-mode .tab {
  color: var(--dark-text-secondary);
  border-color: transparent;
}

body.dark-mode .tab:hover {
  color: var(--dark-text-primary);
  border-bottom-color: var(--dark-border-secondary);
}

body.dark-mode .tab.active {
  color: var(--dark-primary);
  border-bottom-color: var(--dark-primary);
}

/* ============================================
   11. SCROLLBARS (Webkit)
   ============================================ */

body.dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dark-bg-tertiary);
  border-radius: 6px;
  border: 2px solid var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-bg-hover);
}

/* ============================================
   12. TRANSITIONS
   ============================================ */

body,
.card,
.panel,
.btn,
button,
input,
textarea,
select,
.modal,
.dropdown-menu,
.alert,
.badge,
table tr {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* ============================================
   13. BREADCRUMBS
   ============================================ */

body.dark-mode .breadcrumb {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-secondary);
}

body.dark-mode .breadcrumb-item {
  color: var(--dark-text-secondary);
}

body.dark-mode .breadcrumb-item.active {
  color: var(--dark-text-primary);
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: var(--dark-text-tertiary);
}

/* ============================================
   14. PROGRESS BARS
   ============================================ */

body.dark-mode .progress {
  background: var(--dark-bg-tertiary);
}

body.dark-mode .progress-bar {
  background: var(--dark-primary);
}

/* ============================================
   15. TOOLTIPS & POPOVERS
   ============================================ */

body.dark-mode .tooltip,
body.dark-mode .popover {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-shadow-lg);
}

body.dark-mode .tooltip-arrow,
body.dark-mode .popover-arrow {
  border-color: var(--dark-bg-tertiary);
}

/* ============================================
   16. LIST GROUPS
   ============================================ */

body.dark-mode .list-group {
  background: transparent;
}

body.dark-mode .list-group-item {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .list-group-item:hover {
  background: var(--dark-bg-tertiary);
}

body.dark-mode .list-group-item.active {
  background: var(--dark-primary);
  border-color: var(--dark-primary);
  color: #ffffff;
}

/* ============================================
   17. CODE & PRE
   ============================================ */

body.dark-mode code {
  background: var(--dark-bg-tertiary);
  color: var(--dark-primary);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

body.dark-mode pre {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
}

/* ============================================
   18. HR DIVIDERS
   ============================================ */

body.dark-mode hr {
  border-color: var(--dark-border-primary);
  opacity: 1;
}

/* ============================================
   19. IMAGES & MEDIA
   ============================================ */

/* Slight brightness reduction for images in dark mode (optional) */
body.dark-mode img:not(.no-dark-filter) {
  opacity: 0.9;
}

body.dark-mode img:hover:not(.no-dark-filter) {
  opacity: 1;
}

/* ============================================
   20. TAILWIND UTILITY OVERRIDES (Critical!)
   ============================================ */

/* Background colors - FORCE dark backgrounds */
body.dark-mode .bg-white,
body.dark-mode [class*="bg-white"] {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode [class*="bg-gray-50"],
body.dark-mode [class*="bg-gray-100"] {
  background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode .bg-gray-200,
body.dark-mode .bg-gray-300,
body.dark-mode [class*="bg-gray-200"],
body.dark-mode [class*="bg-gray-300"] {
  background-color: var(--dark-bg-hover) !important;
}

/* Text colors - FORCE light text */
body.dark-mode .text-black,
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode [class*="text-black"],
body.dark-mode [class*="text-gray-900"],
body.dark-mode [class*="text-gray-800"] {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500,
body.dark-mode [class*="text-gray-700"],
body.dark-mode [class*="text-gray-600"],
body.dark-mode [class*="text-gray-500"] {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .text-gray-400,
body.dark-mode .text-gray-300,
body.dark-mode [class*="text-gray-400"],
body.dark-mode [class*="text-gray-300"] {
  color: var(--dark-text-tertiary) !important;
}

/* Border colors */
body.dark-mode .border,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode [class*="border-gray-200"],
body.dark-mode [class*="border-gray-300"] {
  border-color: var(--dark-border-primary) !important;
}

/* Text ärver från body/ytor — komponenter sätter egen färg via tokens */

/* Shadow utilities */
body.dark-mode .shadow-sm {
  box-shadow: var(--dark-shadow-sm) !important;
}

body.dark-mode .shadow,
body.dark-mode .shadow-md {
  box-shadow: var(--dark-shadow-md) !important;
}

body.dark-mode .shadow-lg {
  box-shadow: var(--dark-shadow-lg) !important;
}

body.dark-mode .shadow-xl {
  box-shadow: var(--dark-shadow-xl) !important;
}

/* ============================================
   21. EDGE CASES & EXTERNAL LIBRARIES
   ============================================ */

/* Datepicker (Tailwind/Flowbite) */
body.dark-mode .datepicker,
body.dark-mode .datepicker-inline {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .datepicker-header {
  background: var(--dark-bg-tertiary);
  border-bottom-color: var(--dark-border-primary);
}

body.dark-mode .datepicker-cell {
  color: var(--dark-text-primary);
}

body.dark-mode .datepicker-cell:hover {
  background: var(--dark-bg-tertiary);
}

body.dark-mode .datepicker-cell.selected {
  background: var(--dark-primary);
  color: white;
}

body.dark-mode .datepicker-cell.today {
  border-color: var(--dark-primary);
}

body.dark-mode .datepicker-cell.disabled {
  color: var(--dark-text-muted);
  opacity: 0.5;
}

/* Leaflet Maps (nearby-jobs.html) */
body.dark-mode .leaflet-container {
  background: var(--dark-bg-secondary);
  filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

body.dark-mode .leaflet-popup-content-wrapper {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode .leaflet-popup-tip {
  background: var(--dark-bg-secondary);
}

body.dark-mode .leaflet-control {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
}

/* Chart.js (används i dashboards) - måste uppdateras via JS */
body.dark-mode canvas {
  /* Charts uppdateras via JavaScript config */
}

/* Select2 Dropdown */
body.dark-mode .select2-container--default .select2-selection--single {
  background: var(--dark-bg-input);
  border-color: var(--dark-border-primary);
}

body.dark-mode .select2-dropdown {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
}

body.dark-mode .select2-results__option {
  color: var(--dark-text-primary);
}

body.dark-mode .select2-results__option--highlighted {
  background: var(--dark-bg-tertiary);
}

/* Toastify Notifications */
body.dark-mode .toastify {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-shadow-lg);
}

/* SweetAlert2 */
body.dark-mode .swal2-popup {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode .swal2-title {
  color: var(--dark-text-primary);
}

body.dark-mode .swal2-content {
  color: var(--dark-text-secondary);
}

/* Quill Editor (om används) */
body.dark-mode .ql-toolbar {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border-primary);
}

body.dark-mode .ql-container {
  background: var(--dark-bg-input);
  border-color: var(--dark-border-primary);
}

body.dark-mode .ql-editor {
  color: var(--dark-text-primary);
}

/* File Upload Drop Zone */
body.dark-mode .dropzone {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border-primary);
  border-style: dashed;
}

body.dark-mode .dropzone:hover {
  border-color: var(--dark-primary);
  background: var(--dark-bg-hover);
}

/* Pagination */
body.dark-mode .pagination {
  background: transparent;
}

body.dark-mode .pagination-item {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .pagination-item:hover {
  background: var(--dark-bg-hover);
  border-color: var(--dark-border-secondary);
}

body.dark-mode .pagination-item.active {
  background: var(--dark-primary);
  border-color: var(--dark-primary);
  color: white;
}

/* Skeleton Loaders */
body.dark-mode .skeleton {
  background: var(--dark-bg-tertiary);
  background: linear-gradient(
    90deg,
    var(--dark-bg-tertiary) 0%,
    var(--dark-bg-hover) 50%,
    var(--dark-bg-tertiary) 100%
  );
  background-size: 200% 100%;
}

/* Empty States */
body.dark-mode .empty-state {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-secondary);
}

body.dark-mode .empty-state-icon {
  color: var(--dark-text-tertiary);
}

/* ============================================
   22. PRINT STYLES (Disable dark mode)
   ============================================ */

@media print {
  body.dark-mode {
    background: white !important;
    color: black !important;
  }

  body.dark-mode * {
    background: white !important;
    color: black !important;
    border-color: #ddd !important;
  }
}