/* ============================================================================
   Dark Mode Styles - COLOR CHANGES ONLY
   No layout properties (padding, margin, height, width, etc.)
   ============================================================================ */

/* Dark mode color scheme variables */
[data-theme="dark"] {
    --bg-primary: #4a90d9;
    --bg-primary-rgb: 74, 144, 217;
    --bg-primaryDark: #3a7bc8;
    --bg-primaryDark-rgb: 58, 123, 200;
    --bg-primaryLight: #5ba0e9;
    --bg-primaryLight-rgb: 91, 160, 233;
    --bg-sidebar: #121417;
    --bg-sidebar-rgb: 18, 20, 23;
    --bg-body: #121417;
    --bg-card: #1e2227;
    --bg-card-hover: #252a30;
    --bg-input: #2a2f36;
    --bg-modal: #1e2227;
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
    --text-muted: #8a8d91;
    --border-color: #3a3f47;
    --border-light: #2d3238;
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   Body and Main Elements
   ============================================================================ */
[data-theme="dark"] body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

[data-theme="dark"] #main {
    background-color: var(--bg-body);
}

/* ============================================================================
   Navbar
   ============================================================================ */
[data-theme="dark"] .bg-nav,
[data-theme="dark"] nav.navbar {
    background-color: var(--bg-sidebar);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .navbar-brand h3 {
    color: var(--bg-primary);
}

[data-theme="dark"] #nav .btn-light {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary);
}

[data-theme="dark"] #nav .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   Sidebar
   ============================================================================ */
[data-theme="dark"] .sidebar div.inner-sidebar {
    background-color: var(--bg-sidebar);
}

[data-theme="dark"] .sidebar .sidebar-item {
    color: var(--text-secondary);
    background-color: transparent;
}

[data-theme="dark"] .sidebar .sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar .sidebar-item.selected {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* ============================================================================
   Cards
   ============================================================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .shadows,
[data-theme="dark"] .form-shadows,
[data-theme="dark"] .form-shadows-inner {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .dashboard-card-header {
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-primaryDark));
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .card-body,
[data-theme="dark"] .dashboard-card-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .card-footer {
    background-color: var(--bg-card-hover);
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

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

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

[data-theme="dark"] .list-item {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .list-item:hover {
    background-color: var(--bg-card-hover);
}

[data-theme="dark"] .view-item {
    background-color: var(--bg-card);
}

/* ============================================================================
   Form Elements
   ============================================================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background-color: var(--bg-input);
    border-color: var(--bg-primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 217, 0.25);
}

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

/* Keep placeholder transparent in floating labels to avoid overlap */
[data-theme="dark"] .form-floating > .form-control::placeholder,
[data-theme="dark"] .form-floating > input::placeholder {
    color: transparent !important;
}

[data-theme="dark"] .form-label {
    color: var(--text-secondary);
}

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

[data-theme="dark"] .form-floating > label {
    color: var(--text-muted);
}

[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--text-muted);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--bg-primary);
    border-color: var(--bg-primary);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-card-hover);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ============================================================================
   Buttons
   ============================================================================ */
[data-theme="dark"] .btn-light {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-light:hover {
    background-color: var(--bg-card-hover);
}

[data-theme="dark"] .btn-secondary {
    background-color: #4a5568;
    border-color: #4a5568;
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #5a6578;
    border-color: #5a6578;
}

/* Primary button - ensure it stands out in dark mode */
[data-theme="dark"] .btn-primary {
    background-color: var(--bg-primary);
    border-color: var(--bg-primary);
    color: white;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--bg-primaryDark);
    border-color: var(--bg-primaryDark);
    color: white;
}

/* Danger button */
[data-theme="dark"] .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

[data-theme="dark"] .btn-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
    color: white;
}

/* Success button */
[data-theme="dark"] .btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

[data-theme="dark"] .btn-success:hover {
    background-color: #218838;
    border-color: #218838;
    color: white;
}

/* Warning button */
[data-theme="dark"] .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

[data-theme="dark"] .btn-warning:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    color: #212529;
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--bg-primaryLight);
    border-color: var(--bg-primaryLight);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--bg-primary);
    color: white;
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-danger {
    color: #f77;
    border-color: #f77;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #dc3545;
    color: white;
}

[data-theme="dark"] .btn-outline-success {
    color: #5dd879;
    border-color: #5dd879;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: #28a745;
    color: white;
}

[data-theme="dark"] .btn-link {
    color: var(--bg-primaryLight);
}

[data-theme="dark"] .btn-link:hover {
    color: var(--bg-primary);
}

/* ============================================================================
   Global Modal Button Styles - Dark Mode
   ============================================================================ */
[data-theme="dark"] .btn-custom,
[data-theme="dark"] .btn-close-custom,
[data-theme="dark"] .btn-cancel-custom,
[data-theme="dark"] .btn-custom-close,
[data-theme="dark"] .modal .btn-modal-secondary {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-custom:hover,
[data-theme="dark"] .btn-close-custom:hover,
[data-theme="dark"] .btn-cancel-custom:hover,
[data-theme="dark"] .btn-custom-close:hover,
[data-theme="dark"] .modal .btn-modal-secondary:hover {
    background-color: #4a5568;
    color: white;
}

/* Primary modal button - ensure visibility in dark mode */
[data-theme="dark"] .modal .btn-modal-primary,
[data-theme="dark"] .modal .btn-primary {
    background-color: var(--bg-primary) !important;
    border-color: var(--bg-primary) !important;
    color: white !important;
}

[data-theme="dark"] .modal .btn-modal-primary:hover,
[data-theme="dark"] .modal .btn-primary:hover {
    background-color: var(--bg-primaryDark) !important;
    border-color: var(--bg-primaryDark) !important;
    color: white !important;
}

/* Danger modal button */
[data-theme="dark"] .modal .btn-modal-danger,
[data-theme="dark"] .modal .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

[data-theme="dark"] .modal .btn-modal-danger:hover,
[data-theme="dark"] .modal .btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #c82333 !important;
    color: white !important;
}

/* Warning modal button */
[data-theme="dark"] .modal .btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
}

[data-theme="dark"] .modal .btn-warning:hover {
    background-color: #e0a800 !important;
    border-color: #e0a800 !important;
}

/* Success modal button */
[data-theme="dark"] .modal .btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

[data-theme="dark"] .modal .btn-success:hover {
    background-color: #218838 !important;
    border-color: #218838 !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================================
   Dropdowns
   ============================================================================ */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

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

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

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

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

/* ============================================================================
   Modals
   ============================================================================ */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-modal);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
    background-color: var(--bg-card-hover);
}

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

/* ============================================================================
   Tables
   ============================================================================ */
[data-theme="dark"] .table {
    color: var(--text-primary);
    --bs-table-bg: var(--bg-card);
    --bs-table-striped-bg: var(--bg-card-hover);
    --bs-table-hover-bg: var(--bg-card-hover);
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bg-card);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .table thead th {
    background-color: var(--bg-card-hover);
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-card-hover);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--bg-card-hover);
}

/* ============================================================================
   Alerts
   ============================================================================ */
[data-theme="dark"] .alert-info {
    background-color: rgba(74, 144, 217, 0.15);
    border-color: rgba(74, 144, 217, 0.3);
    color: var(--bg-primaryLight);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: #5dd879;
}

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

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

/* ============================================================================
   Text Colors
   ============================================================================ */
[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

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

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

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

[data-theme="dark"] a.text-purple,
[data-theme="dark"] .text-purple {
    color: var(--bg-primaryLight);
}

/* ============================================================================
   Backgrounds
   ============================================================================ */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-card-hover) !important;
}

[data-theme="dark"] .bg-nav {
    background-color: var(--bg-sidebar);
}

[data-theme="dark"] .bg-purple {
    background: linear-gradient(212deg, var(--bg-body) 0%, rgba(74, 144, 217, 0.1) 100%);
}

/* ============================================================================
   Borders
   ============================================================================ */
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* ============================================================================
   Nav Tabs
   ============================================================================ */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
    color: var(--bg-primary);
}

/* ============================================================================
   Pagination
   ============================================================================ */
[data-theme="dark"] .pagination-container {
    background-color: var(--bg-card);
}

[data-theme="dark"] .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--bg-primary);
    border-color: var(--bg-primary);
    color: white;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-input);
    color: var(--text-muted);
}

/* ============================================================================
   List Groups
   ============================================================================ */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-card-hover);
}

/* ============================================================================
   Badges
   ============================================================================ */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: #4a5568 !important;
}

/* ============================================================================
   Calendar
   ============================================================================ */
[data-theme="dark"] .calendar-container {
    background-color: var(--bg-card) !important;
    box-shadow: 0 2px 10px var(--shadow-color) !important;
}

[data-theme="dark"] .calendar-header {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .calendar-header h3,
[data-theme="dark"] .calendar-header h4,
[data-theme="dark"] .calendar-header .month-title,
[data-theme="dark"] .calendar-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .calendar-grid {
    background-color: transparent !important;
    gap: 8px !important;
}

[data-theme="dark"] .calendar-day-header {
    background-color: #3a3f47 !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .calendar-day {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .calendar-day:hover {
    background-color: var(--bg-card-hover) !important;
}

/* Other month dates - make them darker (dashboard.css uses #f9fafb) */
[data-theme="dark"] .calendar-day.other-month,
[data-theme="dark"] .calendar-day.other-month-day,
[data-theme="dark"] .calendar-day.disabled,
[data-theme="dark"] .calendar-day.empty,
[data-theme="dark"] .calendar-day:empty,
[data-theme="dark"] .calendar-empty-day,
[data-theme="dark"] .fc-day-other,
[data-theme="dark"] .fc-daygrid-day.fc-day-other {
    background-color: #15171a !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .calendar-day.today {
    background-color: rgba(74, 144, 217, 0.2) !important;
    border-color: var(--bg-primary) !important;
}

/* Availability Modal - Calendar day status colors */
[data-theme="dark"] .calendar-day.available {
    background-color: rgba(40, 167, 69, 0.3) !important;
    border-color: #28a745 !important;
}

[data-theme="dark"] .calendar-day.available:hover {
    background-color: rgba(40, 167, 69, 0.4) !important;
}

[data-theme="dark"] .calendar-day.unavailable {
    background-color: rgba(220, 53, 69, 0.3) !important;
    border-color: #dc3545 !important;
}

[data-theme="dark"] .calendar-day.unavailable:hover {
    background-color: rgba(220, 53, 69, 0.4) !important;
}

/* Availability list items */
[data-theme="dark"] .availability-list-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .availability-list-item:hover {
    background-color: var(--bg-card-hover);
}

[data-theme="dark"] .availability-list-item.available {
    border-left-color: #28a745;
}

[data-theme="dark"] .availability-list-item.unavailable {
    border-left-color: #dc3545;
}

/* List View action buttons - dark mode */
[data-theme="dark"] #list-view .btn-group .btn-outline-primary {
    background-color: var(--bg-primary);
    color: white;
    border: none;
}

[data-theme="dark"] #list-view .btn-group .btn-outline-primary:hover {
    background-color: var(--bg-primaryDark);
    color: white;
}

[data-theme="dark"] #list-view .btn-group .btn-outline-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}

[data-theme="dark"] #list-view .btn-group .btn-outline-danger:hover {
    background-color: #c82333;
    color: white;
}

/* Calendar day number */
[data-theme="dark"] .calendar-day-number {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .calendar-day.other-month .calendar-day-number {
    color: var(--text-muted) !important;
}

/* Calendar appointment dots and badges */
[data-theme="dark"] .calendar-appointment-badge {
    background-color: #4a5568 !important;
    color: white !important;
}

[data-theme="dark"] .month-nav-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .month-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================================================
   Empty States
   ============================================================================ */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-state-mobile {
    background-color: var(--bg-card-hover);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ============================================================================
   Enhanced Dropdowns
   ============================================================================ */
[data-theme="dark"] .enhanced-dropdown-list,
[data-theme="dark"] .dropdown-options {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

[data-theme="dark"] .dropdown-option {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .dropdown-option:hover {
    background-color: var(--bg-card-hover);
}

/* ============================================================================
   Performance Cards (Performance Metrics section)
   ============================================================================ */
[data-theme="dark"] .performance-card {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .performance-card .performance-value {
    color: inherit;
}

[data-theme="dark"] .performance-card small,
[data-theme="dark"] .performance-card .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .performance-card h6,
[data-theme="dark"] .performance-card p,
[data-theme="dark"] .performance-card strong {
    color: var(--text-primary) !important;
}

/* ============================================================================
   Workload/Analytics Metrics
   ============================================================================ */
[data-theme="dark"] .workload-metric {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .workload-metric:hover {
    background: var(--bg-card) !important;
    box-shadow: 0 4px 8px var(--shadow-color);
}

[data-theme="dark"] .workload-metric-value {
    color: var(--text-primary);
}

[data-theme="dark"] .workload-metric-label {
    color: var(--text-muted) !important;
}

/* ============================================================================
   Customer/Feedback/Appointment Cards
   ============================================================================ */
[data-theme="dark"] .customer-card,
[data-theme="dark"] .feedback-card,
[data-theme="dark"] .appointment-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 2px 10px var(--shadow-color);
}

[data-theme="dark"] .customer-card-header,
[data-theme="dark"] .feedback-card-header,
[data-theme="dark"] .appointment-header,
[data-theme="dark"] .appointment-card-header {
    background: var(--bg-card-hover);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .customer-card-footer {
    background: var(--bg-card-hover);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .customer-info-label {
    color: var(--text-muted);
}

[data-theme="dark"] .customer-info-value {
    color: var(--text-primary);
}

/* Today's Schedule Appointment Cards - Dark Mode */
[data-theme="dark"] .appointment-card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .appointment-service-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .appointment-datetime-header {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .appointment-datetime-header i {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .appointment-detail-row {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .appointment-detail-icon {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .appointment-customer-name {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .appointment-service-icon {
    color: var(--bg-primary) !important;
}

/* ============================================================================
   Rating Stars
   ============================================================================ */
[data-theme="dark"] .rating-stars .star {
    color: #555;
}

[data-theme="dark"] .rating-stars .star:hover,
[data-theme="dark"] .rating-stars .star.active {
    color: #ffc107;
}

/* Feedback tab stars - ensure yellow color in dark mode */
[data-theme="dark"] .text-warning,
[data-theme="dark"] #ratingStars,
[data-theme="dark"] #invoiceRatingStars {
    color: #ffc107 !important;
}

/* Rating value text (number) - ensure white color in dark mode */
[data-theme="dark"] #ratingValue,
[data-theme="dark"] #invoiceRatingValue {
    color: var(--text-primary) !important;
}

/* ============================================================================
   Progress Steps (Registration)
   ============================================================================ */
[data-theme="dark"] .step {
    background-color: #3a3f47 !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #step2:not(.active) {
    background-color: #3a3f47 !important;
    color: #e4e6eb !important;
}

[data-theme="dark"] .step.active {
    background-color: var(--bg-primary) !important;
    color: white !important;
}

[data-theme="dark"] .step.completed {
    background-color: #198754 !important;
    color: white !important;
}

[data-theme="dark"] .step-connector {
    background-color: var(--border-color);
}

[data-theme="dark"] .step-connector.active {
    background-color: var(--bg-primary);
}

/* ============================================================================
   Scrollbar
   ============================================================================ */
[data-theme="dark"] ::-webkit-scrollbar {
    background: var(--bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================================================
   Miscellaneous
   ============================================================================ */
[data-theme="dark"] .highlighted {
    background-color: var(--bg-primary);
    color: white;
}

[data-theme="dark"] .round-top-left {
    background-color: var(--bg-body);
}

[data-theme="dark"] #togglePassword {
    color: var(--text-muted);
}

[data-theme="dark"] .bg-dark-subtle {
    background-color: var(--bg-card-hover) !important;
}

[data-theme="dark"] .errorMsg {
    background-color: rgba(155, 34, 34, 0.9);
}

[data-theme="dark"] .successMsg {
    background-color: var(--bg-primary);
}

/* ============================================================================
   Dark Mode Toggle Button
   ============================================================================ */
.dark-mode-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Sun icon for dark mode (to switch to light) */
[data-theme="dark"] .dark-mode-toggle .bi-moon-fill {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .bi-sun-fill {
    display: inline-block;
    color: #ffc107;
}

/* Moon icon for light mode (to switch to dark) */
.dark-mode-toggle .bi-sun-fill {
    display: none;
}

.dark-mode-toggle .bi-moon-fill {
    display: inline-block;
    color: #6c757d;
}

/* ============================================================================
   Notification Items
   ============================================================================ */
[data-theme="dark"] .notification-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .notification-item:hover {
    background-color: var(--bg-card-hover);
}

[data-theme="dark"] .notification-item h6 {
    color: var(--text-primary);
}

[data-theme="dark"] .notification-item p {
    color: var(--text-secondary);
}

[data-theme="dark"] #notifications-container {
    background-color: var(--bg-card);
}


/* ============================================================================
   Login/Register Page Specific Fixes
   ============================================================================ */

/* HVAC tagline styling */
.hvac-tagline {
    color: #212529;
}

[data-theme="dark"] .hvac-tagline {
    color: var(--text-primary) !important;
}


/* ============================================================================
   Enhanced Dropdown Inputs (Register Page Address Fields)
   ============================================================================ */
[data-theme="dark"] .enhanced-dropdown-input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .enhanced-dropdown-input:focus {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .enhanced-dropdown-input.has-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .enhanced-dropdown-wrapper + label,
[data-theme="dark"] .form-floating > .enhanced-dropdown-input ~ label,
[data-theme="dark"] .form-floating:has(.enhanced-dropdown-wrapper) > label {
    color: var(--text-muted) !important;
}

/* Enhanced Dropdown List (Address dropdowns) */
[data-theme="dark"] .enhanced-dropdown-list {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
}

[data-theme="dark"] .enhanced-dropdown-list .dropdown-options {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .enhanced-dropdown-list .dropdown-option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .enhanced-dropdown-list .dropdown-option:hover {
    background-color: var(--bg-card-hover) !important;
}


/* ============================================================================
   Password Toggle Icons
   ============================================================================ */
[data-theme="dark"] #togglePassword,
[data-theme="dark"] #toggleConfirmPassword,
[data-theme="dark"] .fa-eye,
[data-theme="dark"] .fa-eye-slash {
    color: var(--text-muted) !important;
}


/* ============================================================================
   Form Floating Label Background Fix (Validation States)
   ============================================================================ */
[data-theme="dark"] .form-floating > label::after,
[data-theme="dark"] .form-floating > .form-control:focus ~ label::after,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
[data-theme="dark"] .form-floating > .form-control.is-invalid ~ label::after,
[data-theme="dark"] .form-floating > .form-control.is-valid ~ label::after {
    background-color: transparent !important;
}

/* Ensure label text is visible in all validation states */
[data-theme="dark"] .form-floating > .form-control.is-invalid ~ label,
[data-theme="dark"] .form-floating > .form-control.is-valid ~ label {
    color: var(--text-muted) !important;
}


/* ============================================================================
   Navbar Bell Icon - Remove border
   ============================================================================ */
[data-theme="dark"] #notificationDropdown {
    border: none !important;
}


/* ============================================================================
   Dashboard Specific Elements - Targeted Fixes
   ============================================================================ */

/* Metric Items (Technician Dashboard - Performance Analytics key metrics) */
[data-theme="dark"] .metric-item {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .metric-item small.text-muted {
    color: var(--text-muted) !important;
}

/* Financial Items (Admin Dashboard - Financial Overview section) */
[data-theme="dark"] .financial-item {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

/* Table Container (Team Collaboration section) */
[data-theme="dark"] .table-container {
    background-color: var(--bg-card) !important;
}

/* Table Light header rows */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

/* Filter Select dropdowns in dashboard card headers */
[data-theme="dark"] .dashboard-card-header select.form-select,
[data-theme="dark"] .filter-select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dashboard card header button (View Full Schedule, etc.) */
[data-theme="dark"] .dashboard-card-header .btn-outline-light {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

[data-theme="dark"] .dashboard-card-header .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Appointment Card Header (fafafa background in original) */
[data-theme="dark"] .appointment-card-header {
    background-color: var(--bg-card-hover) !important;
}

/* Your Trusted Technicians Cards (Customer Dashboard) */
[data-theme="dark"] #technicianRelationships .technician-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #technicianRelationships .technician-card h6.text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #technicianRelationships .technician-card small.text-muted {
    color: var(--text-muted) !important;
}

/* Technician scroll container scrollbar */
[data-theme="dark"] #technicianRelationships .technician-scroll-container {
    scrollbar-color: var(--text-muted) var(--bg-card-hover);
}

[data-theme="dark"] #technicianRelationships .technician-scroll-container::-webkit-scrollbar-track {
    background: var(--bg-card-hover) !important;
}

[data-theme="dark"] #technicianRelationships .technician-scroll-container::-webkit-scrollbar-thumb {
    background: var(--text-muted) !important;
}

/* Performance Summary section - bg-light rounded-pill spans */
[data-theme="dark"] .dashboard-card-body span.rounded-pill.bg-light {
    background-color: var(--bg-card-hover) !important;
}

/* Top performer image border */
[data-theme="dark"] .top-performer-image {
    border-color: var(--border-color) !important;
}

/* Partnership Mobile View cards */
[data-theme="dark"] #partnershipMobileDetailed .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Technician Performance Mobile View cards */
[data-theme="dark"] #technicianPerformanceMobileView .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Tech Change Mobile View cards */
[data-theme="dark"] #techChangeMobileView .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}


/* ============================================================================
   Appointment Action Page - Dark Mode Styles
   ============================================================================ */

/* Input groups with white background (Service Type, Appliance Type, Date, Time) */
[data-theme="dark"] .input-group.bg-white.rounded-pill {
    background-color: var(--bg-input) !important;
}

[data-theme="dark"] .input-group.bg-white.rounded-pill .form-select,
[data-theme="dark"] .input-group.bg-white.rounded-pill .form-control {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Icon badges in input groups (.text-bg-light) */
[data-theme="dark"] .input-group .text-bg-light {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-secondary) !important;
}

/* Customer info display rounded pills */
[data-theme="dark"] #customer-name-display,
[data-theme="dark"] #customer-contact-display,
[data-theme="dark"] #customer-address-display,
[data-theme="dark"] #customer-email-display {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

/* Technician cards - non-selected state */
[data-theme="dark"] .technician-card .card-body,
[data-theme="dark"] .technician-card-2 .card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Technician cards - selected state (keep primary color) */
[data-theme="dark"] .technician-card input[type="checkbox"]:checked + .card-body,
[data-theme="dark"] .technician-card-2 input[type="checkbox"]:checked + .card-body {
    background-color: var(--bg-primary) !important;
    color: white !important;
}

/* Technician card name */
[data-theme="dark"] .technician-card .card-body h6,
[data-theme="dark"] .technician-card-2 .card-body h6 {
    color: inherit !important;
}

/* Technician card image background */
[data-theme="dark"] .technician-card .card-body img.bg-light,
[data-theme="dark"] .technician-card-2 .card-body img.bg-light {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

/* Technician card progress bar background */
[data-theme="dark"] .technician-card .progress.bg-light,
[data-theme="dark"] .technician-card-2 .progress.bg-light {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

/* Image drop zone */
[data-theme="dark"] #image-drop-zone {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #image-drop-zone:hover {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--bg-primary) !important;
}

[data-theme="dark"] #image-drop-zone.drag-over {
    background-color: rgba(74, 144, 217, 0.15) !important;
    border-color: var(--bg-primary) !important;
}

[data-theme="dark"] #image-drop-zone i,
[data-theme="dark"] #image-drop-zone p {
    color: var(--text-muted) !important;
}

/* Image preview items */
[data-theme="dark"] .image-preview-item {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .image-preview-loading {
    background-color: rgba(30, 34, 39, 0.8) !important;
}

/* Appointment description textarea */
[data-theme="dark"] #appointment-description {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

/* Technician justification textarea */
[data-theme="dark"] #technician-justification {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

/* Scroll container scrollbar */
[data-theme="dark"] .scroll-container::-webkit-scrollbar-track {
    background-color: var(--bg-card-hover) !important;
}

[data-theme="dark"] .scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(74, 144, 217, 0.5) !important;
}

[data-theme="dark"] .scroll-container::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .scroll-container::-webkit-scrollbar-thumb:active {
    background-color: var(--bg-primary) !important;
}

/* Tech suggestion card in modals */
[data-theme="dark"] .tech-suggestion-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .tech-suggestion-card.selected {
    border-color: var(--bg-primary) !important;
}

/* Confirmation modal content */
[data-theme="dark"] .confirmation-modal .modal-content {
    background-color: var(--bg-modal) !important;
}

[data-theme="dark"] .confirmation-modal .card-body {
    background-color: var(--bg-card) !important;
}

/* Service completion modal */
[data-theme="dark"] .service-completion-card {
    background-color: var(--bg-modal) !important;
}

[data-theme="dark"] .service-completion-body {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .service-completion-header {
    background-color: var(--bg-card-hover) !important;
}

[data-theme="dark"] .service-completion-footer {
    background-color: var(--bg-card-hover) !important;
    border-top-color: var(--border-color) !important;
}

/* Customer labels in modals */
[data-theme="dark"] .customer-label {
    color: var(--text-muted) !important;
}


/* Appointment Action - Dropdown option menus */
[data-theme="dark"] #service-type-select option,
[data-theme="dark"] #appliance-type-select option,
[data-theme="dark"] #appointment-time option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #service-type-select option:hover,
[data-theme="dark"] #appliance-type-select option:hover,
[data-theme="dark"] #appointment-time option:hover,
[data-theme="dark"] #service-type-select option:checked,
[data-theme="dark"] #appliance-type-select option:checked,
[data-theme="dark"] #appointment-time option:checked {
    background-color: var(--bg-primary) !important;
    color: white !important;
}


/* ============================================================================
   Appointment Confirmation Modal - Dark Mode
   ============================================================================ */

/* Confirmation modal body background */
[data-theme="dark"] .confirmation-modal .modal-body {
    background-color: var(--bg-card) !important;
}

/* Service Information labels (Service Type:, Appliance Type:, etc.) */
[data-theme="dark"] .confirmation-modal .text-muted,
[data-theme="dark"] .confirmation-modal small.text-muted {
    color: var(--text-muted) !important;
}

/* Service Information values */
[data-theme="dark"] .confirmation-modal .modal-body span:not(.badge):not(.text-muted),
[data-theme="dark"] .confirmation-modal #serviceType,
[data-theme="dark"] .confirmation-modal #applianceType,
[data-theme="dark"] .confirmation-modal #serviceDateTime,
[data-theme="dark"] .confirmation-modal #primaryTech,
[data-theme="dark"] .confirmation-modal #secondaryTech,
[data-theme="dark"] .confirmation-modal #customerName,
[data-theme="dark"] .confirmation-modal #customerAddress,
[data-theme="dark"] .confirmation-modal #customerPhone {
    color: var(--text-primary) !important;
}

/* Service Description text */
[data-theme="dark"] .confirmation-modal #serviceDescription {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Modal footer */
[data-theme="dark"] .confirmation-modal .modal-footer {
    background-color: var(--bg-card-hover) !important;
    border-top-color: var(--border-color) !important;
}

/* Cancel button in confirmation modal */
[data-theme="dark"] .confirmation-modal .modal-footer .btn-light,
[data-theme="dark"] .confirmation-modal .modal-footer button[style*="transparent"] {
    color: var(--text-primary) !important;
}

/* ============================================================================
   Suggested Date Cards Modal - Dark Mode
   ============================================================================ */

/* Main container with bg-white class */
[data-theme="dark"] .date-suggestions-alert .bg-white {
    background-color: var(--bg-card) !important;
}

/* Suggestion card base styles */
[data-theme="dark"] .suggestion-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .suggestion-card:hover {
    border-color: var(--bg-primary) !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
}

/* Recommended card */
[data-theme="dark"] .suggestion-card.recommended {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.15) 0%, var(--bg-card) 100%) !important;
    border-color: #198754 !important;
}

/* Day name (Friday, Monday, etc.) */
[data-theme="dark"] .suggestion-card-header .day-name {
    color: var(--text-primary) !important;
}

/* Date display (January 23, 2026) */
[data-theme="dark"] .suggestion-card-body .date-display {
    color: var(--text-primary) !important;
}

/* Availability info text */
[data-theme="dark"] .suggestion-card-body .availability-info {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .suggestion-card-body .availability-info span {
    color: var(--text-secondary) !important;
}

/* Days from requested (1 day later, etc.) */
[data-theme="dark"] .suggestion-card-body .days-from-requested {
    color: var(--text-muted) !important;
}

/* Select This Date button */
[data-theme="dark"] .suggestion-card .select-date-btn {
    background-color: transparent !important;
    border-color: var(--bg-primary) !important;
    color: var(--bg-primary) !important;
}

[data-theme="dark"] .suggestion-card .select-date-btn:hover {
    background-color: var(--bg-primary) !important;
    color: white !important;
}

/* Alert heading and text */
[data-theme="dark"] .date-suggestions-alert .alert-heading {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .date-suggestions-alert p.text-muted {
    color: var(--text-muted) !important;
}

/* Dismiss button */
[data-theme="dark"] .date-suggestions-alert .btn-link.text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .date-suggestions-alert .btn-link.text-muted:hover {
    color: var(--text-secondary) !important;
}

/* Date suggestion cards container */
[data-theme="dark"] .date-suggestion-card,
[data-theme="dark"] .tech-suggestion-card,
[data-theme="dark"] [class*="suggestion-card"],
[data-theme="dark"] .modal-body .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Date card day name (Friday, Monday, etc.) */
[data-theme="dark"] .date-suggestion-card h6,
[data-theme="dark"] .date-suggestion-card .fw-bold,
[data-theme="dark"] .modal-body .card h6,
[data-theme="dark"] .modal-body .card .fw-bold {
    color: var(--text-primary) !important;
}

/* Date card date text (January 23, 2026) */
[data-theme="dark"] .date-suggestion-card p,
[data-theme="dark"] .date-suggestion-card .text-dark,
[data-theme="dark"] .modal-body .card p,
[data-theme="dark"] .modal-body .card .text-dark {
    color: var(--text-primary) !important;
}

/* Date card muted text (1 day later, 4 days later) */
[data-theme="dark"] .date-suggestion-card .text-muted,
[data-theme="dark"] .date-suggestion-card small {
    color: var(--text-muted) !important;
}

/* Select This Date button */
[data-theme="dark"] .date-suggestion-card .btn-outline-success,
[data-theme="dark"] .modal-body .card .btn-outline-success {
    background-color: transparent !important;
    border-color: #5dd879 !important;
    color: #5dd879 !important;
}

[data-theme="dark"] .date-suggestion-card .btn-outline-success:hover,
[data-theme="dark"] .modal-body .card .btn-outline-success:hover {
    background-color: #28a745 !important;
    color: white !important;
}

/* Dismiss link at bottom */
[data-theme="dark"] .modal-body a.text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .modal-body a.text-muted:hover {
    color: var(--text-secondary) !important;
}


/* ============================================================================
   Service Completion Confirmation Modal - Dark Mode (Inline Style Overrides)
   ============================================================================ */

/* Modal card background (overrides inline style="background-color: white") */
[data-theme="dark"] .service-completion-card {
    background-color: var(--bg-modal) !important;
}

/* Modal body background */
[data-theme="dark"] .service-completion-body {
    background-color: var(--bg-card) !important;
}

/* Modal footer (overrides inline style="background-color: #f8f9fa") */
[data-theme="dark"] .service-completion-footer {
    background-color: var(--bg-card-hover) !important;
    border-top-color: var(--border-color) !important;
}

/* Section headings (Customer Information, Service Information, etc.) */
[data-theme="dark"] .service-completion-body h3 {
    color: var(--bg-primaryLight) !important;
}

/* Customer labels (Name:, Contact:, Address:, etc.) */
[data-theme="dark"] .service-completion-body .customer-label {
    color: var(--text-muted) !important;
}

/* All value spans with inline color: #000000 - Override with !important */
[data-theme="dark"] .service-completion-body p span[style*="color: #000000"],
[data-theme="dark"] .service-completion-body p span[style*="color:#000000"] {
    color: var(--text-primary) !important;
}

/* Specific value IDs (fallback selectors) */
[data-theme="dark"] .service-completion-body #serviceType,
[data-theme="dark"] .service-completion-body #applianceType,
[data-theme="dark"] .service-completion-body #schedule,
[data-theme="dark"] .service-completion-body #primaryTechnician,
[data-theme="dark"] .service-completion-body #secondaryTechnician {
    color: var(--text-primary) !important;
}

/* Service description paragraph (overrides inline color: #000000) */
[data-theme="dark"] .service-completion-body #serviceDescription,
[data-theme="dark"] .service-completion-body p#serviceDescription {
    color: var(--text-primary) !important;
}

/* Technician change justification box */
[data-theme="dark"] .service-completion-body div[style*="background-color: #fff3cd"] {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

[data-theme="dark"] .service-completion-body div[style*="background-color: #fff3cd"] p {
    color: var(--text-primary) !important;
}

/* Cancel button (overrides inline color: #000000) */
[data-theme="dark"] .service-completion-btn-cancel,
[data-theme="dark"] .service-completion-footer #cancelBtn {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .service-completion-btn-cancel:hover,
[data-theme="dark"] .service-completion-footer #cancelBtn:hover {
    background-color: #4a5568 !important;
    color: white !important;
}

/* Image section heading */
[data-theme="dark"] #modal-images-section h3 {
    color: var(--bg-primaryLight) !important;
}

/* Image preview items in modal */
[data-theme="dark"] #modal-images-container > div {
    border-color: var(--border-color) !important;
}


/* ============================================================================
   Search Input Groups - Dark Mode (bg-white override)
   ============================================================================ */

/* Override bg-white on input-group-text (used in admin/technician search inputs) */
[data-theme="dark"] .input-group-text.bg-white {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* Search input with inline color styles */
[data-theme="dark"] .input-group input.form-control[style*="color: #505050"],
[data-theme="dark"] .input-group input.form-control[style*="color:#505050"],
[data-theme="dark"] .input-group input.form-control[style*="color: black"],
[data-theme="dark"] .input-group input.form-control[style*="color:black"] {
    color: var(--text-primary) !important;
}

/* Search input class used in appointment list */
[data-theme="dark"] .search-input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Filter search input container */
[data-theme="dark"] .filter-search-input .input-group-text {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-search-input .form-control {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}


/* ============================================================================
   Schedule Calendar - Dark Mode (Days with Appointments)
   ============================================================================ */

/* Calendar days with appointments - override white background */
[data-theme="dark"] .calendar-day[data-has-appointments="true"] {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .calendar-day[data-has-appointments="true"]:hover {
    background-color: var(--bg-card-hover) !important;
}

/* Mobile: Days with appointments indicator */
@media (max-width: 768px) {
    [data-theme="dark"] .calendar-day[data-has-appointments="true"] {
        background-color: rgba(74, 144, 217, 0.15) !important;
    }
    
    [data-theme="dark"] .calendar-day[data-has-appointments="true"]:hover {
        background-color: rgba(74, 144, 217, 0.25) !important;
    }
}

/* Appointment card in modal */
[data-theme="dark"] .appointment-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .appointment-header {
    background-color: var(--bg-card-hover) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .appointment-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .info-item {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .additional-info {
    border-top-color: var(--border-color) !important;
}


/* Modal Close/Cancel Buttons - Dark Mode (uses global styles above) */


/* ============================================================================
   Invoice Page - Dark Mode
   ============================================================================ */

/* Pagination container */
[data-theme="dark"] .pagination-container {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .dashboard-card .pagination-container {
    background-color: var(--bg-card) !important;
}

/* Page info text */
[data-theme="dark"] .page-info-desktop,
[data-theme="dark"] .page-info-mobile {
    color: var(--text-secondary) !important;
}

/* Invoice modal close buttons (uses global styles above) */

/* Customer invoice modal close button (btn-secondary) - match other close buttons */
[data-theme="dark"] .modal-footer .btn-secondary {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-footer .btn-secondary:hover {
    background-color: #4a5568 !important;
    color: white !important;
}


/* ============================================================================
   Service Management - Dark Mode (Appliance Badges & Modal)
   ============================================================================ */

/* Appliance badges in table and modals - brighter for better contrast */
[data-theme="dark"] .badge.bg-primary-subtle {
    background-color: rgba(91, 160, 233, 0.3) !important;
    color: #a8d4ff !important;
}

[data-theme="dark"] .badge.bg-primary-subtle.text-primary-emphasis,
[data-theme="dark"] .badge.bg-primary-subtle.text-primary {
    color: #a8d4ff !important;
}

/* Appliance tags container in modals - brighter badges */
[data-theme="dark"] .appliance-tags-container .badge {
    background-color: rgba(91, 160, 233, 0.3) !important;
    color: #a8d4ff !important;
}

[data-theme="dark"] .appliance-tags-container .badge button {
    color: #a8d4ff !important;
}

[data-theme="dark"] .appliance-tags-container .badge button:hover {
    color: #ff6b6b !important;
}

/* Service management modal footer */
[data-theme="dark"] .modal .card-footer {
    background-color: var(--bg-card-hover) !important;
    border-top-color: var(--border-color) !important;
}

/* Cancel button in service modal (uses global styles above) */


/* ============================================================================
   User Management - Dark Mode (Action Dropdown)
   ============================================================================ */

/* Action dropdown menu */
[data-theme="dark"] .action-dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
}

/* Action dropdown items */
[data-theme="dark"] .action-dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .action-dropdown-item:hover {
    background-color: var(--bg-card-hover) !important;
}

/* Delete item hover state */
[data-theme="dark"] .action-dropdown-item.text-danger {
    color: #f77 !important;
}

[data-theme="dark"] .action-dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f77 !important;
}


/* ============================================================================
   User Management Modal - Dark Mode (Footer)
   ============================================================================ */

/* User modal footer - remove white background */
[data-theme="dark"] #addUserModal .modal-footer,
[data-theme="dark"] #editUserModal .modal-footer {
    background-color: transparent !important;
}

/* Cancel button in user modal */
[data-theme="dark"] #addUserModal .modal-footer .btn-light,
[data-theme="dark"] #editUserModal .modal-footer .btn-light {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #addUserModal .modal-footer .btn-light:hover,
[data-theme="dark"] #editUserModal .modal-footer .btn-light:hover {
    background-color: #4a5568 !important;
    color: white !important;
}


/* ============================================================================
   Appointment History Modal - Dark Mode
   ============================================================================ */

/* Content boxes with bg-light class in modal */
[data-theme="dark"] .modal-body .bg-light {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-body .bg-light.p-3.rounded,
[data-theme="dark"] .modal-body .bg-light.p-3.rounded-3 {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

/* Text inside bg-light boxes */
[data-theme="dark"] .modal-body .bg-light p,
[data-theme="dark"] .modal-body .bg-light span,
[data-theme="dark"] .modal-body .bg-light div {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-body .bg-light .text-muted {
    color: var(--text-muted) !important;
}

/* Modal footer background */
[data-theme="dark"] .modal-footer {
    background-color: var(--bg-card-hover) !important;
    border-top-color: var(--border-color) !important;
}

/* Modal footer secondary/close buttons only - exclude primary action buttons */
[data-theme="dark"] .modal-footer .btn.rounded-pill:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-footer .btn.rounded-pill:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover {
    background-color: #4a5568 !important;
    color: white !important;
}

/* Ensure primary buttons in modal footer are visible */
[data-theme="dark"] .modal-footer .btn-primary,
[data-theme="dark"] .modal-footer .btn-primary.rounded-pill,
[data-theme="dark"] .modal-footer a.btn-primary {
    background-color: var(--bg-primary) !important;
    border-color: var(--bg-primary) !important;
    color: white !important;
}

[data-theme="dark"] .modal-footer .btn-primary:hover,
[data-theme="dark"] .modal-footer .btn-primary.rounded-pill:hover,
[data-theme="dark"] .modal-footer a.btn-primary:hover {
    background-color: var(--bg-primaryDark) !important;
    border-color: var(--bg-primaryDark) !important;
    color: white !important;
}

/* Ensure danger buttons in modal footer are visible */
[data-theme="dark"] .modal-footer .btn-danger,
[data-theme="dark"] .modal-footer .btn-danger.rounded-pill {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

[data-theme="dark"] .modal-footer .btn-danger:hover,
[data-theme="dark"] .modal-footer .btn-danger.rounded-pill:hover {
    background-color: #c82333 !important;
    border-color: #c82333 !important;
    color: white !important;
}

/* Cost justification table */
[data-theme="dark"] .modal-body .table {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .modal-body .table thead th {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-body .table tbody td {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-body .table tfoot td {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Horizontal rule in modal */
[data-theme="dark"] .modal-body hr {
    border-color: var(--border-color) !important;
}

/* Mobile history cards */
[data-theme="dark"] .mobile-history-card,
[data-theme="dark"] .mobile-appointment-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .mobile-history-card:hover,
[data-theme="dark"] .mobile-appointment-card:hover {
    background-color: var(--bg-card-hover) !important;
}

[data-theme="dark"] .mobile-appointment-customer,
[data-theme="dark"] .mobile-history-technician {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .mobile-appointment-contact,
[data-theme="dark"] .mobile-appointment-service,
[data-theme="dark"] .mobile-appointment-date,
[data-theme="dark"] .mobile-history-service,
[data-theme="dark"] .mobile-history-appliance,
[data-theme="dark"] .mobile-history-date {
    color: var(--text-secondary) !important;
}


/* Rating stars should remain yellow/gold in dark mode */
[data-theme="dark"] #modalRatingStars,
[data-theme="dark"] .modal-body .bg-light #modalRatingStars,
[data-theme="dark"] .rating-stars,
[data-theme="dark"] .fa-star.text-warning,
[data-theme="dark"] .bi-star-fill.text-warning,
[data-theme="dark"] .bi-star.text-warning {
    color: #ffc107 !important;
}

/* Rating value text */
[data-theme="dark"] #modalRatingValue {
    color: var(--text-secondary) !important;
}


/* ============================================================================
   Reports Page - Dark Mode (Dropdowns)
   ============================================================================ */

/* Report Type selector dropdown (has inline background: white) */
[data-theme="dark"] #reportTypeFilter,
[data-theme="dark"] .report-type-selector select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Report Type dropdown options */
[data-theme="dark"] #reportTypeFilter option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* All filter dropdowns in reports page */
[data-theme="dark"] #timePeriod,
[data-theme="dark"] #yearFilterMonthly,
[data-theme="dark"] #serviceTypeFilter,
[data-theme="dark"] #applianceTypeFilter,
[data-theme="dark"] #provinceFilter,
[data-theme="dark"] #municipalityFilter,
[data-theme="dark"] #barangayFilter,
[data-theme="dark"] #monthFilter,
[data-theme="dark"] #yearFilterWeekly,
[data-theme="dark"] #customPageLength {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Options for all report filter dropdowns */
[data-theme="dark"] #timePeriod option,
[data-theme="dark"] #yearFilterMonthly option,
[data-theme="dark"] #serviceTypeFilter option,
[data-theme="dark"] #applianceTypeFilter option,
[data-theme="dark"] #provinceFilter option,
[data-theme="dark"] #municipalityFilter option,
[data-theme="dark"] #barangayFilter option,
[data-theme="dark"] #monthFilter option,
[data-theme="dark"] #yearFilterWeekly option,
[data-theme="dark"] #customPageLength option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Dashboard card header text in reports */
[data-theme="dark"] .dashboard-card-headers {
    color: var(--text-primary) !important;
}


/* ============================================================================
   Edit Profile Modal - Dark Mode Fixes
   ============================================================================ */

/* Profile Picture Section (Left Column) - Fix white background */
[data-theme="dark"] #editProfileModal .profile-picture-section {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #editProfileModal .profile-picture-section h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #editProfileModal .user-info-summary {
    background-color: var(--bg-card) !important;
    border-left-color: var(--bg-primary) !important;
}

[data-theme="dark"] #editProfileModal .user-info-summary h5,
[data-theme="dark"] #editProfileModal .user-info-summary p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #editProfileModal .user-info-summary small,
[data-theme="dark"] #editProfileModal .user-info-summary .text-muted {
    color: var(--text-muted) !important;
}

/* Tab navigation in edit profile modal */
[data-theme="dark"] #editProfileModal .nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] #editProfileModal .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #editProfileModal .nav-tabs .nav-link:hover {
    color: var(--bg-primaryLight) !important;
    border-bottom-color: rgba(74, 144, 217, 0.3) !important;
}

[data-theme="dark"] #editProfileModal .nav-tabs .nav-link.active {
    color: var(--bg-primary) !important;
    border-bottom-color: var(--bg-primary) !important;
    background-color: transparent !important;
}

/* Form labels in edit profile modal */
[data-theme="dark"] #editProfileModal .form-label {
    color: var(--text-secondary) !important;
}

/* Upload photo button */
[data-theme="dark"] #editProfileModal .btn-outline-primary {
    color: var(--bg-primaryLight) !important;
    border-color: var(--bg-primaryLight) !important;
}

[data-theme="dark"] #editProfileModal .btn-outline-primary:hover {
    background-color: var(--bg-primary) !important;
    color: white !important;
}

/* File format text */
[data-theme="dark"] #editProfileModal .form-text,
[data-theme="dark"] #editProfileModal small.text-muted {
    color: var(--text-muted) !important;
}


/* ============================================================================
   Edit Profile Modal - Dark Mode Fixes
   ============================================================================ */

/* Profile Picture Section (Left Column) - Fix white background */
[data-theme="dark"] #editProfileModal .profile-picture-section {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #editProfileModal .profile-picture-section h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #editProfileModal .user-info-summary {
    background-color: var(--bg-card) !important;
    border-left-color: var(--bg-primary) !important;
}

[data-theme="dark"] #editProfileModal .user-info-summary h5,
[data-theme="dark"] #editProfileModal .user-info-summary p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #editProfileModal .user-info-summary small,
[data-theme="dark"] #editProfileModal .user-info-summary .text-muted {
    color: var(--text-muted) !important;
}

/* Tab navigation in edit profile modal */
[data-theme="dark"] #editProfileModal .nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] #editProfileModal .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #editProfileModal .nav-tabs .nav-link:hover {
    color: var(--bg-primaryLight) !important;
    border-bottom-color: rgba(74, 144, 217, 0.3) !important;
}

[data-theme="dark"] #editProfileModal .nav-tabs .nav-link.active {
    color: var(--bg-primary) !important;
    border-bottom-color: var(--bg-primary) !important;
    background-color: transparent !important;
}

/* Form labels in edit profile modal */
[data-theme="dark"] #editProfileModal .form-label {
    color: var(--text-secondary) !important;
}

/* Upload photo button */
[data-theme="dark"] #editProfileModal .btn-outline-primary {
    color: var(--bg-primaryLight) !important;
    border-color: var(--bg-primaryLight) !important;
}

[data-theme="dark"] #editProfileModal .btn-outline-primary:hover {
    background-color: var(--bg-primary) !important;
    color: white !important;
}

/* File format text */
[data-theme="dark"] #editProfileModal .form-text,
[data-theme="dark"] #editProfileModal small.text-muted {
    color: var(--text-muted) !important;
}

/* Profile Modal Footer - Dark Mode (Mobile) */
[data-theme="dark"] #profileModal .modal-footer {
    background-color: var(--bg-card) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] #editProfileModal .modal-footer {
    background-color: var(--bg-card) !important;
    border-top-color: var(--border-color) !important;
}

/* Profile Picture Lightbox - Dark Mode */
[data-theme="dark"] #profilePictureLightbox .modal-content {
    background: transparent !important;
}

[data-theme="dark"] .lightbox-image {
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .lightbox-close-btn {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

[data-theme="dark"] .profile-picture-clickable:hover {
    box-shadow: 0 8px 25px rgba(74, 144, 217, 0.5) !important;
}


/* ============================================================================
   Appointment Action Confirmation Modal - Dark Mode
   ============================================================================ */

/* Modal card background */
[data-theme="dark"] .appointment-confirm-card {
    background-color: var(--bg-modal) !important;
    border-color: var(--border-color) !important;
}

/* Modal header */
[data-theme="dark"] .appointment-confirm-header {
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-primaryDark)) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Modal body */
[data-theme="dark"] .appointment-confirm-body {
    background-color: var(--bg-modal) !important;
}

/* Section titles */
[data-theme="dark"] .appointment-confirm-section-title {
    color: var(--bg-primaryLight) !important;
}

/* Labels */
[data-theme="dark"] .appointment-confirm-label {
    color: var(--text-muted) !important;
}

/* Values */
[data-theme="dark"] .appointment-confirm-value {
    color: var(--text-primary) !important;
}

/* Icons */
[data-theme="dark"] .appointment-confirm-info-row i {
    color: var(--text-muted) !important;
}

/* Description text */
[data-theme="dark"] .appointment-confirm-description {
    color: var(--text-primary) !important;
}

/* Justification box */
[data-theme="dark"] .appointment-confirm-justification-box {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

/* Image items */
[data-theme="dark"] .appointment-confirm-image-item {
    border-color: var(--border-color) !important;
}

/* Modal footer */
[data-theme="dark"] .appointment-confirm-footer {
    background-color: var(--bg-card-hover) !important;
    border-top-color: var(--border-color) !important;
}

/* Cancel button */
[data-theme="dark"] .appointment-confirm-btn-cancel {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .appointment-confirm-btn-cancel:hover:not(:disabled) {
    background-color: #4a5568 !important;
    color: white !important;
}

/* Confirm button - ensure it's visible as primary action */
[data-theme="dark"] .appointment-confirm-btn-confirm {
    background-color: var(--bg-primary) !important;
    color: white !important;
}

[data-theme="dark"] .appointment-confirm-btn-confirm:hover:not(:disabled) {
    background-color: var(--bg-primaryDark) !important;
}


/* ============================================================================
   Mobile User Cards (User Management)
   ============================================================================ */
[data-theme="dark"] .mobile-user-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .mobile-user-card:hover {
    background-color: var(--bg-card-hover);
    box-shadow: 0 4px 12px var(--shadow-color);
}

[data-theme="dark"] .mobile-user-name {
    color: var(--text-primary);
}

[data-theme="dark"] .mobile-user-email {
    color: var(--text-muted);
}

[data-theme="dark"] .mobile-user-role {
    color: var(--text-secondary);
}

[data-theme="dark"] .mobile-user-actions {
    border-top-color: var(--border-color);
}

/* Mobile Action Dropdown - Dark Mode */
[data-theme="dark"] .mobile-action-dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

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

[data-theme="dark"] .mobile-action-dropdown-item:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .mobile-action-dropdown-item.text-danger {
    color: #f77;
}

[data-theme="dark"] .mobile-action-dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.15);
    color: #f77;
}

[data-theme="dark"] .mobile-action-dots-btn {
    color: var(--bg-primaryLight);
}

[data-theme="dark"] .mobile-action-dots-btn:hover {
    color: var(--bg-primary);
}


/* ============================================================================
   Feedback Page Mobile Cards
   ============================================================================ */
[data-theme="dark"] .mobile-cards .card.shadow {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .mobile-cards .card-title {
    color: var(--bg-primaryLight);
}

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

[data-theme="dark"] .mobile-cards .fw-medium {
    color: var(--text-primary);
}

/* Legacy feedback card dark mode */
[data-theme="dark"] .feedback-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .feedback-card-header {
    background: linear-gradient(135deg, var(--bg-card-hover), var(--bg-card));
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .feedback-card-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
/* ============================================================================
   User Details Modal - Dark Mode
   ============================================================================ */
[data-theme="dark"] .info-label {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .info-value {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .info-value:empty::before {
    color: var(--text-muted) !important;
}