/**
 * Dark Mode CSS - Comprehensive Theme System
 * Applies dark theme when body has 'dark-mode' class
 * Optimized for all modules and UI components
 */

/* ============================================
   CSS VARIABLES - CORE THEMING SYSTEM
   ============================================ */
:root {
  /* Light mode (default) */
  --bg-body: #faf9f6;
  --bg-primary: #faf9f6;
  --bg-secondary: #faf9f6;
  --bg-card: #faf9f6;
  --bg-sidebar: #2d3035;
  --bg-input: #faf9f6;
  --bg-table-header: #faf9f6;
  --bg-table-stripe: rgba(0,0,0,0.02);
  --bg-hover: rgba(0,0,0,0.05);
  --bg-modal: #faf9f6;
  --bg-dropdown: #faf9f6;
  --bg-tooltip: #343a40;
  --bg-popover: #faf9f6;
  
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #868e96;
  --text-heading: #212529;
  --text-link: #007bff;
  --text-inverse: #ffffff;
  
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --border-dark: #ced4da;
  
  --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  --shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);
  
  /* Contextual colors - light mode */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* Table contextual backgrounds - light mode */
  --table-primary-bg: #b8daff;
  --table-secondary-bg: #d6d8db;
  --table-success-bg: #c3e6cb;
  --table-info-bg: #bee5eb;
  --table-warning-bg: #ffeeba;
  --table-danger-bg: #f5c6cb;
  --table-light-bg: #fdfdfe;
  --table-dark-bg: #c6c8ca;
  --table-active-bg: rgba(0,0,0,0.075);
  
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */
body.dark-mode {
  --bg-body: #121518;
  --bg-primary: #1a1d21;
  --bg-secondary: #212529;
  --bg-card: #2d3035;
  --bg-sidebar: #1a1d21;
  --bg-input: #343a40;
  --bg-table-header: #343a40;
  --bg-table-stripe: rgba(255,255,255,0.03);
  --bg-hover: rgba(255,255,255,0.08);
  --bg-modal: #2d3035;
  --bg-dropdown: #343a40;
  --bg-tooltip: #f8f9fa;
  --bg-popover: #343a40;
  
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-muted: #868e96;
  --text-heading: #ffffff;
  --text-link: #6ea8fe;
  --text-inverse: #212529;
  
  --border-color: #495057;
  --border-light: #3d4349;
  --border-dark: #5a6268;
  
  --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.4);
  --shadow: 0 .5rem 1rem rgba(0,0,0,.5);
  --shadow-lg: 0 1rem 3rem rgba(0,0,0,.6);
  
  /* Contextual colors - dark mode (slightly brighter for visibility) */
  --primary-color: #4dabf7;
  --secondary-color: #adb5bd;
  --success-color: #51cf66;
  --info-color: #3bc9db;
  --warning-color: #fcc419;
  --danger-color: #ff6b6b;
  --light-color: #495057;
  --dark-color: #dee2e6;
  
  /* Table contextual backgrounds - dark mode (muted, subtle) */
  --table-primary-bg: rgba(77, 171, 247, 0.15);
  --table-secondary-bg: rgba(173, 181, 189, 0.15);
  --table-success-bg: rgba(81, 207, 102, 0.15);
  --table-info-bg: rgba(59, 201, 219, 0.15);
  --table-warning-bg: rgba(252, 196, 25, 0.15);
  --table-danger-bg: rgba(255, 107, 107, 0.15);
  --table-light-bg: rgba(73, 80, 87, 0.3);
  --table-dark-bg: rgba(222, 226, 230, 0.15);
  --table-active-bg: rgba(255,255,255,0.075);
  
}

/* ============================================
   BASE STYLES
   ============================================ */

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

/* Page holder / main content area */
body.dark-mode .page-holder,
body.dark-mode .page-content,
body.dark-mode .content-inner {
  background-color: var(--bg-primary) !important;
}

/* ============================================
   NAVBAR
   ============================================ */

body.dark-mode .navbar,
body.dark-mode header.header .navbar,
body.dark-mode .topbar {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar .text-gray-500,
body.dark-mode .sidebar-toggler,
body.dark-mode .navbar-text {
  color: var(--text-primary) !important;
}

body.dark-mode .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
}

body.dark-mode .navbar-nav .nav-link:hover {
  color: var(--text-primary) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

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

body.dark-mode .sidebar .list-group-item {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .sidebar .sidebar-heading,
body.dark-mode .sidebar h6 {
  color: var(--text-muted) !important;
}

/* Sidebar section headings */
body.dark-mode .sidebar .text-gray-400,
body.dark-mode .sidebar .headings-font-family {
  color: #7c8aa5 !important;
}

/* Sidebar collapse border - enterprise blue accent */
body.dark-mode .sidebar .border-primary {
  border-color: #1f4fd6 !important;
}

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

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

/* Only apply shadow to non-animated cards */
body.dark-mode .card:not([class*="occupancy-"]) {
  box-shadow: var(--shadow-sm) !important;
}

body.dark-mode .card-header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-heading) !important;
}

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

body.dark-mode .card-footer {
  background-color: var(--bg-secondary) !important;
  border-top-color: var(--border-color) !important;
}

body.dark-mode .card-title {
  color: var(--text-heading) !important;
}

body.dark-mode .card-subtitle {
  color: var(--text-secondary) !important;
}

/* Stat cards with icons */
body.dark-mode .card .icon {
  opacity: 0.9;
}

/* ============================================
   TABLES - COMPREHENSIVE STYLING
   ============================================ */

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

body.dark-mode .table thead th,
body.dark-mode .table th {
  background-color: var(--bg-table-header) !important;
  border-color: var(--border-color) !important;
  color: var(--text-heading) !important;
}

body.dark-mode .table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .table tbody tr {
  background-color: var(--bg-card) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-table-stripe) !important;
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

body.dark-mode .thead-light th,
body.dark-mode .thead-dark th {
  background-color: var(--bg-table-header) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .table-bordered {
  border-color: var(--border-color) !important;
}

body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th {
  border-color: var(--border-color) !important;
}

/* Table contextual classes - dark mode optimized */
body.dark-mode .table-primary,
body.dark-mode .table-primary > th,
body.dark-mode .table-primary > td {
  background-color: var(--table-primary-bg) !important;
  color: var(--primary-color) !important;
  border-color: rgba(77, 171, 247, 0.3) !important;
}

body.dark-mode .table-secondary,
body.dark-mode .table-secondary > th,
body.dark-mode .table-secondary > td {
  background-color: var(--table-secondary-bg) !important;
  color: var(--text-primary) !important;
  border-color: rgba(173, 181, 189, 0.3) !important;
}

body.dark-mode .table-success,
body.dark-mode .table-success > th,
body.dark-mode .table-success > td {
  background-color: var(--table-success-bg) !important;
  color: var(--success-color) !important;
  border-color: rgba(81, 207, 102, 0.3) !important;
}

body.dark-mode .table-info,
body.dark-mode .table-info > th,
body.dark-mode .table-info > td {
  background-color: var(--table-info-bg) !important;
  color: var(--info-color) !important;
  border-color: rgba(59, 201, 219, 0.3) !important;
}

body.dark-mode .table-warning,
body.dark-mode .table-warning > th,
body.dark-mode .table-warning > td {
  background-color: var(--table-warning-bg) !important;
  color: var(--warning-color) !important;
  border-color: rgba(252, 196, 25, 0.3) !important;
}

body.dark-mode .table-danger,
body.dark-mode .table-danger > th,
body.dark-mode .table-danger > td {
  background-color: var(--table-danger-bg) !important;
  color: var(--danger-color) !important;
  border-color: rgba(255, 107, 107, 0.3) !important;
}

body.dark-mode .table-light,
body.dark-mode .table-light > th,
body.dark-mode .table-light > td {
  background-color: var(--table-light-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

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

body.dark-mode .table-active,
body.dark-mode .table-active > th,
body.dark-mode .table-active > td {
  background-color: var(--table-active-bg) !important;
}

/* Table hover states for contextual classes */
body.dark-mode .table-hover .table-primary:hover,
body.dark-mode .table-hover .table-primary:hover > td,
body.dark-mode .table-hover .table-primary:hover > th {
  background-color: rgba(77, 171, 247, 0.25) !important;
}

body.dark-mode .table-hover .table-success:hover,
body.dark-mode .table-hover .table-success:hover > td,
body.dark-mode .table-hover .table-success:hover > th {
  background-color: rgba(81, 207, 102, 0.25) !important;
}

body.dark-mode .table-hover .table-info:hover,
body.dark-mode .table-hover .table-info:hover > td,
body.dark-mode .table-hover .table-info:hover > th {
  background-color: rgba(59, 201, 219, 0.25) !important;
}

body.dark-mode .table-hover .table-warning:hover,
body.dark-mode .table-hover .table-warning:hover > td,
body.dark-mode .table-hover .table-warning:hover > th {
  background-color: rgba(252, 196, 25, 0.25) !important;
}

body.dark-mode .table-hover .table-danger:hover,
body.dark-mode .table-hover .table-danger:hover > td,
body.dark-mode .table-hover .table-danger:hover > th {
  background-color: rgba(255, 107, 107, 0.25) !important;
}

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

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

/* Fix for select dropdown arrows showing multiple times in dark mode */
body.dark-mode select.form-control,
body.dark-mode .custom-select,
body.dark-mode select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.25rem !important;
}

body.dark-mode select.form-control option,
body.dark-mode .custom-select option,
body.dark-mode select option {
  background-color: var(--bg-dropdown) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus {
  background-color: var(--bg-input) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
  background-color: var(--bg-secondary) !important;
  opacity: 0.7;
}

body.dark-mode .input-group-text {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .col-form-label {
  color: var(--text-primary) !important;
}

body.dark-mode .form-text,
body.dark-mode .help-block {
  color: var(--text-muted) !important;
}

body.dark-mode .form-check-label {
  color: var(--text-primary) !important;
}

body.dark-mode .custom-control-label::before {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}

/* Form validation states */
body.dark-mode .is-valid ~ .valid-feedback,
body.dark-mode .is-invalid ~ .invalid-feedback {
  color: var(--text-primary);
}

body.dark-mode .was-validated .form-control:valid,
body.dark-mode .form-control.is-valid {
  border-color: var(--success-color) !important;
}

body.dark-mode .was-validated .form-control:invalid,
body.dark-mode .form-control.is-invalid {
  border-color: var(--danger-color) !important;
}

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

body.dark-mode .dropdown-menu {
  background-color: var(--bg-dropdown) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow) !important;
}

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

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: var(--bg-hover) !important;
  color: var(--text-heading) !important;
}

body.dark-mode .dropdown-item.active,
body.dark-mode .dropdown-item:active {
  background-color: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

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

body.dark-mode .dropdown-header {
  color: var(--text-muted) !important;
}

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

body.dark-mode .modal-content {
  background-color: var(--bg-modal) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .modal-header {
  border-bottom-color: var(--border-color) !important;
  background-color: var(--bg-secondary) !important;
}

body.dark-mode .modal-header .modal-title {
  color: var(--text-heading) !important;
}

body.dark-mode .modal-header .close,
body.dark-mode .modal-header .btn-close {
  color: var(--text-secondary) !important;
  text-shadow: none;
  opacity: 0.8;
}

body.dark-mode .modal-header .close:hover {
  color: var(--text-primary) !important;
  opacity: 1;
}

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

body.dark-mode .modal-footer {
  border-top-color: var(--border-color) !important;
  background-color: var(--bg-secondary) !important;
}

body.dark-mode .modal-backdrop {
  background-color: #000;
}

/* ============================================
   ALERTS
   ============================================ */

body.dark-mode .alert {
  border-width: 1px;
}

body.dark-mode .alert-primary {
  background-color: rgba(77, 171, 247, 0.15) !important;
  border-color: rgba(77, 171, 247, 0.3) !important;
  color: var(--primary-color) !important;
}

body.dark-mode .alert-secondary {
  background-color: rgba(173, 181, 189, 0.15) !important;
  border-color: rgba(173, 181, 189, 0.3) !important;
  color: var(--text-secondary) !important;
}

body.dark-mode .alert-success {
  background-color: rgba(81, 207, 102, 0.15) !important;
  border-color: rgba(81, 207, 102, 0.3) !important;
  color: var(--success-color) !important;
}

body.dark-mode .alert-info {
  background-color: rgba(59, 201, 219, 0.15) !important;
  border-color: rgba(59, 201, 219, 0.3) !important;
  color: var(--info-color) !important;
}

body.dark-mode .alert-warning {
  background-color: rgba(252, 196, 25, 0.15) !important;
  border-color: rgba(252, 196, 25, 0.3) !important;
  color: var(--warning-color) !important;
}

body.dark-mode .alert-danger {
  background-color: rgba(255, 107, 107, 0.15) !important;
  border-color: rgba(255, 107, 107, 0.3) !important;
  color: var(--danger-color) !important;
}

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

body.dark-mode .alert-dark {
  background-color: rgba(222, 226, 230, 0.1) !important;
  border-color: rgba(222, 226, 230, 0.2) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .alert a,
body.dark-mode .alert .alert-link {
  color: inherit !important;
  font-weight: 600;
  text-decoration: underline;
}

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

body.dark-mode .badge-primary {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

body.dark-mode .badge-secondary {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
}

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

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

body.dark-mode .badge-warning {
  background-color: var(--warning-color) !important;
  color: #212529 !important;
}

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

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

body.dark-mode .badge-dark {
  background-color: var(--dark-color) !important;
  color: #212529 !important;
}

/* ============================================
   BUTTONS
   ============================================ */

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

body.dark-mode .btn-light:hover {
  background-color: var(--bg-hover) !important;
}

body.dark-mode .btn-dark {
  background-color: var(--dark-color) !important;
  border-color: var(--dark-color) !important;
  color: #212529 !important;
}

body.dark-mode .btn-outline-light {
  border-color: var(--border-light) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .btn-outline-dark {
  border-color: var(--dark-color) !important;
  color: var(--dark-color) !important;
}

body.dark-mode .btn-outline-secondary {
  border-color: var(--text-secondary) !important;
  color: var(--text-secondary) !important;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
}

body.dark-mode .btn-link {
  color: var(--text-link) !important;
}

/* ============================================
   LIST GROUPS
   ============================================ */

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

body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item-action:focus {
  background-color: var(--bg-hover) !important;
  color: var(--text-heading) !important;
}

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

body.dark-mode .list-group-item-primary {
  background-color: var(--table-primary-bg) !important;
  color: var(--primary-color) !important;
}

body.dark-mode .list-group-item-success {
  background-color: var(--table-success-bg) !important;
  color: var(--success-color) !important;
}

body.dark-mode .list-group-item-info {
  background-color: var(--table-info-bg) !important;
  color: var(--info-color) !important;
}

body.dark-mode .list-group-item-warning {
  background-color: var(--table-warning-bg) !important;
  color: var(--warning-color) !important;
}

body.dark-mode .list-group-item-danger {
  background-color: var(--table-danger-bg) !important;
  color: var(--danger-color) !important;
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

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

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

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

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

body.dark-mode .text-black-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode .text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.page-link) {
  color: var(--text-link) !important;
}

body.dark-mode a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
  color: #93c5fd !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
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(--text-heading) !important;
}

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

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

body.dark-mode strong,
body.dark-mode b {
  color: var(--text-heading);
}

/* ============================================
   BACKGROUNDS
   ============================================ */

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

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

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

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

/* ============================================
   BORDERS
   ============================================ */

body.dark-mode .border {
  border-color: var(--border-color) !important;
}

body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-left,
body.dark-mode .border-right {
  border-color: var(--border-color) !important;
}

body.dark-mode .border-light {
  border-color: var(--border-light) !important;
}

body.dark-mode .border-dark {
  border-color: var(--border-dark) !important;
}

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

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

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

/* ============================================
   PAGINATION
   ============================================ */

body.dark-mode .page-link {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-link) !important;
}

body.dark-mode .page-link:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-heading) !important;
}

body.dark-mode .page-item.disabled .page-link {
  background-color: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* ============================================
   NAV TABS & PILLS
   ============================================ */

body.dark-mode .nav-tabs {
  border-bottom-color: var(--border-color) !important;
}

body.dark-mode .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
  border-color: var(--border-color) var(--border-color) transparent !important;
  color: var(--text-primary) !important;
}

body.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) var(--border-color) var(--bg-card) !important;
  color: var(--text-heading) !important;
}

body.dark-mode .nav-pills .nav-link {
  color: var(--text-secondary) !important;
}

body.dark-mode .nav-pills .nav-link:hover {
  background-color: var(--bg-hover) !important;
}

body.dark-mode .nav-pills .nav-link.active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */

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

body.dark-mode .breadcrumb-item a {
  color: var(--text-link) !important;
}

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

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

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

body.dark-mode .toast {
  background-color: var(--bg-dropdown) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}

body.dark-mode .toast-header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

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

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */

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

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

body.dark-mode .popover-header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-heading) !important;
}

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

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

body.dark-mode .footer,
body.dark-mode footer {
  background-color: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

body.dark-mode .footer p,
body.dark-mode footer p {
  color: var(--text-secondary) !important;
}

/* ============================================
   CALENDAR (FullCalendar)
   ============================================ */

body.dark-mode .fc-theme-standard td,
body.dark-mode .fc-theme-standard th,
body.dark-mode .fc-theme-standard .fc-scrollgrid {
  border-color: var(--border-color) !important;
}

body.dark-mode .fc-daygrid-day,
body.dark-mode .fc-timegrid-slot {
  background-color: var(--bg-card) !important;
}

body.dark-mode .fc-col-header-cell {
  background-color: var(--bg-table-header) !important;
}

body.dark-mode .fc-col-header-cell-cushion,
body.dark-mode .fc-daygrid-day-number {
  color: var(--text-primary) !important;
}

body.dark-mode .fc-day-today {
  background-color: rgba(77, 171, 247, 0.1) !important;
}

body.dark-mode .fc-toolbar-title {
  color: var(--text-heading) !important;
}

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

body.dark-mode .fc-button:hover {
  background-color: var(--bg-hover) !important;
}

body.dark-mode .fc-button-active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* ============================================
   CUSTOM CALENDAR (.rr_calendar) - DARK MODE
   ============================================ */

/* Calendar container */
body.dark-mode .rr_calendar {
  background-color: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
}

/* Weekday headers */
body.dark-mode .rr_calendar .weekdays div {
  color: var(--text-heading) !important;
  background-color: #1e2328 !important;
  border-bottom: 2px solid var(--border-color);
  font-weight: 700;
  padding: 12px 2px !important;
}

/* Day cells - base */
body.dark-mode .rr_calendar .days div {
  border-color: var(--border-color) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease;
}

body.dark-mode .rr_calendar .days div:hover {
  background-color: rgba(77, 171, 247, 0.1) !important;
  border-color: var(--primary-color) !important;
}

/* Date number */
body.dark-mode .rr_calendar .date-num {
  color: var(--text-heading) !important;
  font-weight: 700 !important;
}

/* Badge count */
body.dark-mode .rr_calendar .badge-count {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Booking items - default */
body.dark-mode .rr_calendar .booking-item {
  background: rgba(77, 171, 247, 0.2) !important;
  color: #93c5fd !important;
  border-left: 2px solid var(--primary-color);
  padding-left: 5px !important;
}

/* Other month cells */
body.dark-mode .rr_calendar .days div.other-month {
  background-color: #15181c !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}

body.dark-mode .rr_calendar .days div.other-month .date-num {
  color: var(--text-muted) !important;
}

/* ==========================================
   FULLY BOOKED - VERY VISIBLE RED
   ========================================== */
body.dark-mode .rr_calendar .days div.full {
  background: linear-gradient(135deg, #4a1f25 0%, #6d2832 100%) !important;
  border: 2px solid #ff6b6b !important;
  box-shadow: inset 0 0 25px rgba(255, 107, 107, 0.25), 0 0 10px rgba(255, 71, 87, 0.3) !important;
  position: relative;
}

body.dark-mode .rr_calendar .days div.full .date-num {
  color: #ff8a8a !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

body.dark-mode .rr_calendar .days div.full .booking-item {
  background: rgba(255, 107, 107, 0.35) !important;
  color: #ffd0d0 !important;
  border-left: 3px solid #ff6b6b;
  font-weight: 500;
}

body.dark-mode .rr_calendar .days div.full .badge-count {
  background: linear-gradient(135deg, #ff4757, #ff6b6b) !important;
  box-shadow: 0 0 12px rgba(255, 71, 87, 0.6);
  font-weight: 700;
}

body.dark-mode .rr_calendar .days div.full::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff4757, #ff6b6b, #ff4757);
  z-index: 1;
}

body.dark-mode .rr_calendar .days div.full:hover {
  background: linear-gradient(135deg, #5a2530 0%, #7d323e 100%) !important;
  box-shadow: inset 0 0 30px rgba(255, 107, 107, 0.35), 0 0 15px rgba(255, 71, 87, 0.4) !important;
  transform: scale(1.02);
}

/* Fully booked + past combination */
body.dark-mode .rr_calendar .days div.full.past {
  background: linear-gradient(135deg, #3a1a1f 0%, #4a2228 100%) !important;
  opacity: 0.75;
  box-shadow: inset 0 0 15px rgba(255, 107, 107, 0.15) !important;
}

body.dark-mode .rr_calendar .days div.full.past::after {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    rgba(255, 107, 107, 0.4) calc(50% - 1px),
    rgba(255, 107, 107, 0.4) calc(50% + 1px),
    transparent calc(50% + 1px)
  ) !important;
}

/* ==========================================
   PAST DATES - GRAYED OUT WITH DIAGONAL LINE
   ========================================== */
body.dark-mode .rr_calendar .days div.past {
  background: #1a1d21 !important;
  position: relative;
}

body.dark-mode .rr_calendar .days div.past::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    #4a5568 calc(50% - 1px),
    #4a5568 calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
  z-index: 1;
}

body.dark-mode .rr_calendar .days div.past .date-num {
  color: #6c757d !important;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

body.dark-mode .rr_calendar .days div.past .booking-item {
  color: #868e96 !important;
  background: rgba(108, 117, 125, 0.2) !important;
  border-left: 2px solid #6c757d;
  position: relative;
  z-index: 2;
}

body.dark-mode .rr_calendar .days div.past .badge-count {
  background-color: #5a6268 !important;
  position: relative;
  z-index: 2;
}

body.dark-mode .rr_calendar .days div.past .status-dot {
  opacity: 0.6;
  position: relative;
  z-index: 2;
}

body.dark-mode .rr_calendar .days div.past:hover {
  background: #22262b !important;
}

/* ==========================================
   TODAY - HIGHLIGHTED CURRENT DAY
   ========================================== */
body.dark-mode .rr_calendar .days div.today {
  background: linear-gradient(135deg, #1e3a5f 0%, #2a4a73 100%) !important;
  border: 2px solid #4dabf7 !important;
  box-shadow: 0 0 15px rgba(77, 171, 247, 0.3), inset 0 0 20px rgba(77, 171, 247, 0.1) !important;
}

body.dark-mode .rr_calendar .days div.today .date-num {
  color: #74c0fc !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(77, 171, 247, 0.5);
}

body.dark-mode .rr_calendar .days div.today .badge-count {
  background: linear-gradient(135deg, #4dabf7, #339af0) !important;
  box-shadow: 0 0 8px rgba(77, 171, 247, 0.5);
}

body.dark-mode .rr_calendar .days div.today .booking-item {
  background: rgba(77, 171, 247, 0.25) !important;
  color: #a5d8ff !important;
  border-left: 3px solid #4dabf7;
}

body.dark-mode .rr_calendar .days div.today:hover {
  background: linear-gradient(135deg, #254a75 0%, #345a87 100%) !important;
  box-shadow: 0 0 20px rgba(77, 171, 247, 0.4), inset 0 0 25px rgba(77, 171, 247, 0.15) !important;
}

/* Today + Full combination */
body.dark-mode .rr_calendar .days div.today.full {
  background: linear-gradient(135deg, #4a1f25 0%, #6d2832 100%) !important;
  border: 2px solid #ff6b6b !important;
  box-shadow: 0 0 15px rgba(255, 71, 87, 0.4), 0 0 25px rgba(77, 171, 247, 0.2) !important;
}

/* ==========================================
   PENDING STATUS - YELLOW/AMBER
   ========================================== */
body.dark-mode .rr_calendar .days div.pending {
  background: linear-gradient(135deg, #3d3520 0%, #4a421a 100%) !important;
  border-color: #fcc419 !important;
}

body.dark-mode .rr_calendar .days div.pending .date-num {
  color: #ffd43b !important;
}

body.dark-mode .rr_calendar .days div.pending .status-dot {
  background-color: #ffc107 !important;
  box-shadow: 0 0 8px #ffc107, 0 0 12px rgba(255, 193, 7, 0.5);
  animation: pulse-dot 2s ease-in-out infinite;
}

body.dark-mode .rr_calendar .days div.pending .booking-item {
  background: rgba(252, 196, 25, 0.2) !important;
  color: #ffd43b !important;
  border-left-color: #fcc419;
}

/* ==========================================
   RESERVED STATUS - PURPLE
   ========================================== */
body.dark-mode .rr_calendar .days div.reserved {
  background: linear-gradient(135deg, #101f36 0%, #142743 100%) !important;
  border-color: #9cbaff !important;
}

body.dark-mode .rr_calendar .days div.reserved .date-num {
  color: #dbe7ff !important;
}

body.dark-mode .rr_calendar .days div.reserved .status-dot {
  background-color: #9cbaff !important;
  box-shadow: 0 0 8px #9cbaff, 0 0 12px rgba(156, 186, 255, 0.5);
}

body.dark-mode .rr_calendar .days div.reserved .booking-item {
  background: rgba(156, 186, 255, 0.2) !important;
  color: #dbe7ff !important;
  border-left-color: #9cbaff;
}

/* ==========================================
   COMPLETED STATUS - GREEN
   ========================================== */
body.dark-mode .rr_calendar .days div.completed {
  background: linear-gradient(135deg, #1f3d28 0%, #264d33 100%) !important;
  border-color: #51cf66 !important;
}

body.dark-mode .rr_calendar .days div.completed .date-num {
  color: #8ce99a !important;
}

body.dark-mode .rr_calendar .days div.completed .status-dot {
  background-color: #51cf66 !important;
  box-shadow: 0 0 8px #51cf66, 0 0 12px rgba(81, 207, 102, 0.5);
}

body.dark-mode .rr_calendar .days div.completed .booking-item {
  background: rgba(81, 207, 102, 0.2) !important;
  color: #8ce99a !important;
  border-left-color: #51cf66;
}

/* Status dot pulse animation */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.8; }
}

/* Blocked room dot - dark mode */
body.dark-mode .rr_calendar .blocked-dot {
  background: #ff4757 !important;
  border: 2px solid var(--bg-card) !important;
  box-shadow: 0 0 6px rgba(255, 71, 87, 0.6) !important;
}

/* ==========================================
   CALENDAR LEGEND - DARK MODE
   ========================================== */
body.dark-mode .calendar-legend {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary);
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px !important;
}

body.dark-mode .calendar-legend small {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

body.dark-mode .calendar-legend .legend-dot.full {
  background: linear-gradient(135deg, #5c2a30 0%, #ff6b6b 100%) !important;
  border: 2px solid #ff6b6b !important;
  box-shadow: 0 0 4px rgba(255, 107, 107, 0.4);
}

body.dark-mode .calendar-legend .legend-dot.reserved {
  background: linear-gradient(135deg, #142743 0%, #9cbaff 100%) !important;
  border: 2px solid #9cbaff !important;
  box-shadow: 0 0 4px rgba(156, 186, 255, 0.4);
}

body.dark-mode .calendar-legend .legend-dot.pending {
  background: linear-gradient(135deg, #4a421a 0%, #fcc419 100%) !important;
  border: 2px solid #fcc419 !important;
  box-shadow: 0 0 4px rgba(252, 196, 25, 0.4);
}

body.dark-mode .calendar-legend .legend-dot.completed {
  background: linear-gradient(135deg, #264d33 0%, #51cf66 100%) !important;
  border: 2px solid #51cf66 !important;
  box-shadow: 0 0 4px rgba(81, 207, 102, 0.4);
}

body.dark-mode .calendar-legend .legend-dot.past {
  background: repeating-linear-gradient(
    -45deg,
    #2d3035,
    #2d3035 2px,
    #3d4248 2px,
    #3d4248 4px
  ) !important;
  border: 2px solid #6c757d !important;
}

/* ==========================================
   CALENDAR MODALS - DARK MODE
   ========================================== */

/* Day details modal */
body.dark-mode #dayModal .modal-content,
body.dark-mode #availabilityModal .modal-content {
  background-color: var(--bg-modal) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode #dayModal .modal-header,
body.dark-mode #availabilityModal .modal-header {
  background-color: #1e2328 !important;
  border-bottom: 2px solid var(--border-color) !important;
}

body.dark-mode #dayModal .modal-title,
body.dark-mode #availabilityModal .modal-title {
  color: var(--text-heading) !important;
  font-weight: 600;
}

body.dark-mode #dayModal .modal-body,
body.dark-mode #availabilityModal .modal-body {
  background-color: var(--bg-modal) !important;
  color: var(--text-primary) !important;
}

body.dark-mode #dayModal .modal-footer,
body.dark-mode #availabilityModal .modal-footer {
  background-color: #1e2328 !important;
  border-top: 1px solid var(--border-color) !important;
}

/* Modal booking list */
body.dark-mode .modal-booking-list {
  background-color: var(--bg-secondary);
  border-radius: 6px;
  padding: 8px;
}

body.dark-mode .modal-booking-list li {
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 8px !important;
  border-radius: 4px;
  margin-bottom: 4px;
}

body.dark-mode .modal-booking-list li:last-child {
  border-bottom: none !important;
  margin-bottom: 0;
}

body.dark-mode .modal-booking-list .booking-link {
  color: var(--text-primary) !important;
  font-weight: 500;
}

body.dark-mode .modal-booking-list .booking-link:hover {
  color: var(--text-link) !important;
}

/* Booked status in modal */
body.dark-mode .modal-booked {
  background: linear-gradient(135deg, rgba(252, 196, 25, 0.1) 0%, rgba(252, 196, 25, 0.05) 100%) !important;
  border-left: 3px solid #fcc419 !important;
}

body.dark-mode .modal-booked .booking-link {
  color: #ffd43b !important;
}

/* Reserved status in modal */
body.dark-mode .modal-reserved {
  background: linear-gradient(135deg, rgba(156, 186, 255, 0.1) 0%, rgba(156, 186, 255, 0.05) 100%) !important;
  border-left: 3px solid #9cbaff !important;
}

body.dark-mode .modal-reserved .booking-link {
  color: #dbe7ff !important;
}

/* Availability results */
body.dark-mode #availabilityResults {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border-color);
}

body.dark-mode #availabilityResults h6 {
  color: var(--text-heading) !important;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

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

body.dark-mode .availability-list li {
  color: var(--text-primary) !important;
  padding: 8px 12px !important;
  background-color: var(--bg-card);
  border-radius: 4px;
  margin-bottom: 6px;
  border: 1px solid var(--border-color);
}

body.dark-mode .availability-list .type {
  color: var(--success-color) !important;
  font-weight: 600;
}

/* Calendar title in header */
body.dark-mode #calendarTitle {
  color: var(--text-heading) !important;
  font-weight: 700 !important;
}

/* ==========================================
   CALENDAR PAGE COMPONENTS - DARK MODE
   ========================================== */

/* Month Navigation Buttons */
body.dark-mode .month-nav-btn {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .month-nav-btn:hover {
  background: rgba(31, 79, 214, 0.15) !important;
  border-color: #1f4fd6 !important;
  color: #9cbaff !important;
}

/* Month Title */
body.dark-mode .month-title {
  color: var(--text-heading) !important;
}

/* Check Availability Button - stays as is (gradient works in dark mode) */
body.dark-mode .btn-check-availability {
  background: #1f4fd6 !important;
  border-color: #1f4fd6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(31, 79, 214, 0.25) !important;
}

body.dark-mode .btn-check-availability:hover {
  background: #173fae !important;
  border-color: #173fae !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(31, 79, 214, 0.35) !important;
}

body.dark-mode #availabilityModal #checkAvailabilityBtn.btn.btn-primary {
  background: #1f4fd6 !important;
  border-color: #1f4fd6 !important;
  color: #ffffff !important;
}

body.dark-mode #availabilityModal #checkAvailabilityBtn.btn.btn-primary:hover {
  background: #173fae !important;
  border-color: #173fae !important;
  color: #ffffff !important;
}

/* Room Type Status sections in modal */
body.dark-mode .room-type-status {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .room-type-status:hover {
  border-color: #1f4fd6 !important;
  box-shadow: 0 2px 8px rgba(31, 79, 214, 0.2) !important;
}

/* Room status grid text colors */
body.dark-mode .room-status-grid span[style*="color:#28a745"],
body.dark-mode .room-status-grid .text-success {
  color: #51cf66 !important;
}

body.dark-mode .room-status-grid span[style*="color:#17a2b8"],
body.dark-mode .room-status-grid .text-info {
  color: #4dabf7 !important;
}

body.dark-mode .room-status-grid span[style*="color:#1f4fd6"],
body.dark-mode .room-status-grid .text-purple {
  color: #9cbaff !important;
}

body.dark-mode .room-status-grid span[style*="color:#dc3545"],
body.dark-mode .room-status-grid .text-danger {
  color: #ff6b6b !important;
}

body.dark-mode .room-status-grid span[style*="color:#666"],
body.dark-mode .room-status-grid span[style*="color:#999"] {
  color: var(--text-muted) !important;
}

/* Room details expansion panel */
body.dark-mode .room-details {
  border-top-color: var(--border-color) !important;
}

/* Available rooms badges (green) */
body.dark-mode span[style*="background:#d4edda"],
body.dark-mode .room-details span[style*="background:#d4edda"] {
  background: rgba(81, 207, 102, 0.2) !important;
  color: #8ce99a !important;
  border: 1px solid rgba(81, 207, 102, 0.4) !important;
}

/* Occupied rooms badges (blue) */
body.dark-mode span[style*="background:#d1ecf1"],
body.dark-mode .room-details span[style*="background:#d1ecf1"] {
  background: rgba(77, 171, 247, 0.2) !important;
  color: #74c0fc !important;
  border: 1px solid rgba(77, 171, 247, 0.4) !important;
}

/* Reserved rooms badges (enterprise blue) */
body.dark-mode span[style*="background:#dbe7ff"],
body.dark-mode .room-details span[style*="background:#dbe7ff"] {
  background: rgba(156, 186, 255, 0.2) !important;
  color: #dbe7ff !important;
  border: 1px solid rgba(156, 186, 255, 0.4) !important;
}

/* Blocked rooms badges (red) */
body.dark-mode span[style*="background:#f8d7da"],
body.dark-mode .room-details span[style*="background:#f8d7da"] {
  background: rgba(255, 107, 107, 0.2) !important;
  color: #ff8a8a !important;
  border: 1px solid rgba(255, 107, 107, 0.4) !important;
}

/* Warning badge for pending assignments */
body.dark-mode small[style*="background:#fff3cd"],
body.dark-mode span[style*="background:#fff3cd"] {
  background: rgba(252, 196, 25, 0.2) !important;
  color: #ffd43b !important;
  border: 1px solid rgba(252, 196, 25, 0.4) !important;
}

/* Total Rooms In-House section */
body.dark-mode div[style*="background-color: #f0f0f0"],
body.dark-mode div[style*="background:#f0f0f0"] {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* Modal Body HR separator */
body.dark-mode #modalBody hr,
body.dark-mode #dayModal .modal-body hr {
  border-color: var(--border-color) !important;
}

/* Availability Results section */
body.dark-mode #availabilityResults {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode #availabilityResults h6 {
  color: var(--text-heading) !important;
}

/* Availability Room Items */
body.dark-mode .availability-room-item {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .availability-room-item:hover {
  border-color: var(--primary-color) !important;
}

body.dark-mode .availability-room-item .room-type-name {
  color: var(--text-primary) !important;
}

/* Status Badge styling in modals */
body.dark-mode .status-badge.checked-in {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
}

body.dark-mode .status-badge.completed {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

body.dark-mode .status-badge.cancelled {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

body.dark-mode .status-badge.pending {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

/* Room Badge in modal */
body.dark-mode .room-badge {
  background: linear-gradient(135deg, rgba(77, 171, 247, 0.2), rgba(56, 189, 248, 0.15)) !important;
  color: #74c0fc !important;
  border-color: rgba(77, 171, 247, 0.4) !important;
}

/* Modal booking list items - enhanced dark mode */
body.dark-mode .modal-booking-list li {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .modal-booking-list li:hover {
  background: var(--bg-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Checked-in status in modal list */
body.dark-mode .modal-booking-list li[class*="checked-in"],
body.dark-mode .modal-booking-list li.status-checked-in {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(2, 132, 199, 0.05) 100%) !important;
  border-left: 3px solid #0ea5e9 !important;
}

/* Completed status in modal list */
body.dark-mode .modal-booking-list li[class*="completed"],
body.dark-mode .modal-booking-list li.status-completed {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.05) 100%) !important;
  border-left: 3px solid #22c55e !important;
}

/* Form controls in availability modal */
body.dark-mode #availabilityModal .form-control {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.dark-mode #availabilityModal .form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

body.dark-mode #availabilityModal label {
  color: var(--text-primary) !important;
}

body.dark-mode #availabilityModal label strong {
  color: var(--text-heading) !important;
}

/* Fix strong text colors in modal */
body.dark-mode #modalBody strong,
body.dark-mode #dayModal .modal-body strong {
  color: var(--text-heading) !important;
}

/* Flatpickr dark mode for availability checker */
body.dark-mode .flatpickr-calendar {
  background-color: var(--bg-dropdown) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .flatpickr-months {
  background-color: var(--bg-secondary) !important;
}

body.dark-mode .flatpickr-month,
body.dark-mode .flatpickr-current-month {
  color: var(--text-heading) !important;
  fill: var(--text-heading) !important;
}

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

body.dark-mode .flatpickr-weekdays {
  background-color: var(--bg-table-header) !important;
}

body.dark-mode .flatpickr-weekday {
  color: var(--text-secondary) !important;
}

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

body.dark-mode .flatpickr-day:hover {
  background-color: var(--bg-hover) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .flatpickr-day.today {
  border-color: var(--primary-color) !important;
}

body.dark-mode .flatpickr-day.selected,
body.dark-mode .flatpickr-day.startRange,
body.dark-mode .flatpickr-day.endRange {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

body.dark-mode .flatpickr-day.inRange {
  background-color: rgba(77, 171, 247, 0.2) !important;
  border-color: rgba(77, 171, 247, 0.2) !important;
  box-shadow: -5px 0 0 rgba(77, 171, 247, 0.2), 5px 0 0 rgba(77, 171, 247, 0.2);
}

body.dark-mode .flatpickr-day.prevMonthDay,
body.dark-mode .flatpickr-day.nextMonthDay {
  color: var(--text-muted) !important;
}

body.dark-mode .flatpickr-prev-month,
body.dark-mode .flatpickr-next-month {
  fill: var(--text-primary) !important;
}

body.dark-mode .flatpickr-prev-month:hover svg,
body.dark-mode .flatpickr-next-month:hover svg {
  fill: var(--primary-color) !important;
}

/* ============================================
   DATATABLES
   ============================================ */

body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
  color: var(--text-primary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.dark-mode table.dataTable tbody tr {
  background-color: var(--bg-card) !important;
}

body.dark-mode table.dataTable tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

body.dark-mode table.dataTable.stripe tbody tr.odd,
body.dark-mode table.dataTable.display tbody tr.odd {
  background-color: var(--bg-table-stripe) !important;
}

/* ============================================
   SELECT2
   ============================================ */

body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}

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

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

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color) !important;
}

body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* ============================================
   CODE/PRE ELEMENTS
   ============================================ */

body.dark-mode pre,
body.dark-mode code {
  background-color: var(--bg-input) !important;
  color: #f472b6 !important;
  border-color: var(--border-color);
}

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

/* ============================================
   OCCUPANCY STYLES - DARK MODE (static borders only)
   ============================================ */
body.dark-mode .card.occupancy-critical,
body.dark-mode .occupancy-critical {
  border-left: 5px solid var(--danger-color) !important;
  background-color: var(--bg-card) !important;
}

body.dark-mode .card.occupancy-low,
body.dark-mode .occupancy-low {
  border-left: 5px solid var(--warning-color) !important;
  background-color: var(--bg-card) !important;
}

body.dark-mode .card.occupancy-moderate,
body.dark-mode .occupancy-moderate {
  border-left: 5px solid var(--info-color) !important;
  background-color: var(--bg-card) !important;
}

body.dark-mode .card.occupancy-medium,
body.dark-mode .occupancy-medium {
  border-left: 5px solid var(--primary-color) !important;
  background-color: var(--bg-card) !important;
}

body.dark-mode .card.occupancy-high,
body.dark-mode .occupancy-high {
  border-left: 5px solid var(--success-color) !important;
  background-color: var(--bg-card) !important;
}

body.dark-mode .card.occupancy-full,
body.dark-mode .occupancy-full {
  border-left: 5px solid var(--success-color) !important;
  background-color: var(--bg-card) !important;
}

/* ============================================
   JUMBOTRON & WELLS
   ============================================ */

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

body.dark-mode .well {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* ============================================
   ACCORDIONS & COLLAPSE
   ============================================ */

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

body.dark-mode .accordion .card-header {
  background-color: var(--bg-secondary) !important;
}

body.dark-mode .accordion .card-header button,
body.dark-mode .accordion .card-header a {
  color: var(--text-primary) !important;
}

/* ============================================
   MEDIA OBJECTS
   ============================================ */

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

/* ============================================
   CLOSE BUTTONS
   ============================================ */

body.dark-mode .close {
  color: var(--text-secondary) !important;
  text-shadow: none;
  opacity: 0.7;
}

body.dark-mode .close:hover {
  color: var(--text-primary) !important;
  opacity: 1;
}

/* ============================================
   CUSTOM SCROLLBAR - DARK MODE
   ============================================ */

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

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

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 5px;
}

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

/* ============================================
   AUTOCOMPLETE DROPDOWN
   ============================================ */

body.dark-mode .ui-autocomplete,
body.dark-mode .autocomplete-suggestions {
  background-color: var(--bg-dropdown) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow) !important;
}

body.dark-mode .ui-autocomplete .ui-menu-item,
body.dark-mode .autocomplete-suggestion {
  color: var(--text-primary) !important;
}

body.dark-mode .ui-autocomplete .ui-menu-item:hover,
body.dark-mode .ui-autocomplete .ui-state-active,
body.dark-mode .autocomplete-suggestion:hover,
body.dark-mode .autocomplete-selected {
  background-color: var(--bg-hover) !important;
  color: var(--text-heading) !important;
}

/* ============================================
   IMAGE/FIGURE STYLING
   ============================================ */

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

body.dark-mode figcaption {
  color: var(--text-muted) !important;
}

body.dark-mode img {
  opacity: 0.95;
}

/* ============================================
   DARK MODE TOGGLE BUTTON STYLES
   ============================================ */

.dark-mode-toggle {
  cursor: pointer;
  font-size: 1.1rem;
  padding: 5px 10px;
  border-radius: 20px;
  transition: all 0.3s ease;
  background: transparent;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.dark-mode-toggle .fa-sun {
  color: #ffc107;
}

.dark-mode-toggle .fa-moon {
  color: #6c757d;
}

body.dark-mode .dark-mode-toggle .fa-moon {
  color: #ffc107;
}

body.dark-mode .dark-mode-toggle .fa-sun {
  color: #868e96;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card, .navbar, .sidebar, .modal-content, .dropdown-menu,
.form-control, .table, .list-group-item, .footer, .alert,
.badge, .btn, .page-link, .toast, .nav-link, .breadcrumb {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   RESTAURANT MODULE SPECIFIC
   ============================================ */

body.dark-mode .order-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .order-card .order-header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
}

body.dark-mode .order-item {
  border-bottom-color: var(--border-light) !important;
}

body.dark-mode .order-total {
  background-color: var(--bg-secondary) !important;
  color: var(--text-heading) !important;
}

body.dark-mode .menu-category {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .menu-item {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .menu-item:hover {
  background-color: var(--bg-hover) !important;
}

body.dark-mode .menu-item .price {
  color: var(--success-color) !important;
}

/* Kitchen Display System - dark mode */
body.dark-mode .kds-order {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .kds-header {
  background-color: var(--bg-secondary) !important;
}

/* Restaurant urgency colors - dark mode compatible */
body.dark-mode .order-card.urgency-4 {
  border-top-color: var(--danger-color) !important;
  animation: pulse-red-dark 1s infinite !important;
}

/* ============================================
   STATUS INDICATORS
   ============================================ */

body.dark-mode .status-badge.pending {
  background-color: rgba(252, 196, 25, 0.2) !important;
  color: var(--warning-color) !important;
}

body.dark-mode .status-badge.confirmed,
body.dark-mode .status-badge.checked-in {
  background-color: rgba(81, 207, 102, 0.2) !important;
  color: var(--success-color) !important;
}

body.dark-mode .status-badge.cancelled {
  background-color: rgba(255, 107, 107, 0.2) !important;
  color: var(--danger-color) !important;
}

/* ============================================
   ROOM STATUS COLORS - DARK MODE
   ============================================ */

body.dark-mode .room-available {
  background-color: rgba(81, 207, 102, 0.15) !important;
  border-color: var(--success-color) !important;
}

body.dark-mode .room-occupied {
  background-color: rgba(255, 107, 107, 0.15) !important;
  border-color: var(--danger-color) !important;
}

body.dark-mode .room-reserved {
  background-color: rgba(252, 196, 25, 0.15) !important;
  border-color: var(--warning-color) !important;
}

body.dark-mode .room-maintenance {
  background-color: rgba(173, 181, 189, 0.15) !important;
  border-color: var(--secondary-color) !important;
}

body.dark-mode .room-blocked {
  background-color: rgba(173, 181, 189, 0.2) !important;
  border-color: var(--secondary-color) !important;
}

/* ============================================
   ROOM CATALOG - DARK MODE
   ============================================ */

body.dark-mode .room-catalog-container {
  background: var(--bg-primary) !important;
}

body.dark-mode .catalog-header {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .catalog-header h1 {
  color: var(--text-heading) !important;
}

body.dark-mode .catalog-header h1 i {
  color: var(--primary-color) !important;
}

body.dark-mode .catalog-header p {
  color: var(--text-muted) !important;
}

body.dark-mode .header-stat .value {
  color: var(--text-heading) !important;
}

body.dark-mode .header-stat .label {
  color: var(--text-muted) !important;
}

body.dark-mode .room-type-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .room-type-card:hover {
  box-shadow: 0 20px 40px rgba(31, 79, 214, 0.2) !important;
  border-color: var(--primary-color) !important;
}

body.dark-mode .room-type-card.disabled-card {
  opacity: 0.5 !important;
}

body.dark-mode .room-type-header {
  background: rgba(31, 79, 214, 0.1) !important;
  border-bottom-color: var(--border-color) !important;
}

body.dark-mode .room-type-header.disabled-header {
  background: linear-gradient(135deg, rgba(55, 65, 81, 0.5) 0%, rgba(55, 65, 81, 0.3) 100%) !important;
}

body.dark-mode .room-type-name {
  color: var(--text-heading) !important;
}

body.dark-mode .room-type-name .type-icon {
  background: linear-gradient(135deg, var(--primary-color) 0%, #818cf8 100%) !important;
  box-shadow: 0 4px 12px rgba(31, 79, 214, 0.4) !important;
}

body.dark-mode .disabled-header .room-type-name .type-icon {
  background: linear-gradient(135deg, var(--text-muted) 0%, #6b7280 100%) !important;
  box-shadow: none !important;
}

body.dark-mode .room-type-price {
  color: var(--success-color) !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
}

body.dark-mode .room-type-price.disabled-price {
  color: var(--text-muted) !important;
  background: rgba(55, 65, 81, 0.3) !important;
}

body.dark-mode .room-type-body {
  background: var(--bg-card) !important;
}

body.dark-mode .room-count-badge {
  color: var(--text-muted) !important;
  background: var(--bg-secondary) !important;
}

body.dark-mode .room-badge {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(55, 65, 81, 0.8) 100%) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .room-badge:hover {
  background: linear-gradient(135deg, var(--primary-color) 0%, #818cf8 100%) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 8px 20px rgba(31, 79, 214, 0.4) !important;
}

body.dark-mode .room-badge.disabled-room {
  background: rgba(55, 65, 81, 0.3) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .room-badge.disabled-room:hover {
  background: rgba(55, 65, 81, 0.3) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.dark-mode .section-title {
  color: var(--text-heading) !important;
}

body.dark-mode .section-title .dot {
  background: linear-gradient(135deg, var(--success-color) 0%, #34d399 100%) !important;
}

body.dark-mode .disabled-section {
  border-top-color: var(--border-color) !important;
}

body.dark-mode .disabled-section .section-title {
  color: var(--text-muted) !important;
}

body.dark-mode .disabled-section .section-title .dot {
  background: var(--text-muted) !important;
}

body.dark-mode .empty-state {
  color: var(--text-muted) !important;
}

body.dark-mode .catalog-footer {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .catalog-footer .footer-text {
  color: var(--text-muted) !important;
}

body.dark-mode .catalog-footer .footer-brand {
  color: var(--text-secondary) !important;
}

/* ============================================
   SIDEBAR ACTIVE LINK - GLAZING SHINE EFFECT
   ============================================ */

/* Active sidebar link with glazing shine */
.sidebar-link.active,
.sidebar-link:focus {
  position: relative;
  overflow: hidden;
}

.sidebar-link.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: sidebar-shine-sweep 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sidebar-shine-sweep {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

/* Dark mode sidebar adjustments */
body.dark-mode .sidebar-link.active::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
}

body.dark-mode .sidebar-link.active,
body.dark-mode .sidebar-link:focus {
  background: #1f4fd6 !important;
  box-shadow: 0 4px 15px rgba(31, 79, 214, 0.4);
}

body.dark-mode .sidebar-link.active i,
body.dark-mode .sidebar-link:focus i {
  color: #fff !important;
}

/* ============================================
   PRINT STYLES - RESET DARK MODE FOR PRINTING
   ============================================ */

@media print {
  body.dark-mode,
  body.dark-mode * {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #dee2e6 !important;
    box-shadow: none !important;
  }
  
  body.dark-mode .card,
  body.dark-mode .table,
  body.dark-mode .modal-content {
    background-color: #fff !important;
  }
  
  body.dark-mode .table thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
  }
}