/* Global dark mode for base and list/form templates */
body.dark-mode {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .form-container,
body.dark-mode .container {
  background: var(--dark-bg-secondary);
  box-shadow: 0 6px 22px var(--dark-shadow);
}
body.dark-mode h2,
body.dark-mode .title,
body.dark-mode .form-title,
body.dark-mode label {
  color: var(--dark-text-primary);
}
body.dark-mode .table {
  background: var(--dark-bg-primary);
}
/* Override global thead th styles from styles.css in dark mode */
body.dark-mode .table thead,
body.dark-mode .table thead th,
body.dark-mode table.table thead th,
body.dark-mode tbody + thead th {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border);
  font-weight: 600 !important;
}
/* Ensure table headers in cards are visible in dark mode */
body.dark-mode .card-body .table thead th,
body.dark-mode .card .table thead th {
  color: var(--dark-text-primary) !important;
  background: var(--dark-bg-tertiary) !important;
}
/* Ensure table body text is visible in dark mode */
body.dark-mode .card-body .table tbody td,
body.dark-mode .table tbody td,
body.dark-mode table.table tbody td {
  color: var(--dark-text-primary) !important;
}
body.dark-mode .table tbody tr:hover {
  background: var(--dark-bg-tertiary) !important;
}

body.dark-mode tbody tr:hover {
  background: var(
    --dark-text-secondary
  ) !important; /* Subtle green tint on hover */
}

body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  border-color: var(--dark-accent-blue);
  box-shadow: 0 0 0 0.2rem var(--dark-focus-ring);
}
body.dark-mode .btn-primary {
  background: var(--dark-accent-blue);
}
body.dark-mode .btn-danger {
  background: var(--dark-accent-red);
}
body.dark-mode .btn-warning {
  background: var(--dark-accent-yellow);
  color: var(--dark-on-warn);
}
body.dark-mode .btn-action-edit {
  background: var(--dark-bg-tertiary);
  color: var(--dark-accent-blue);
  border-color: var(--dark-accent-blue);
}
body.dark-mode .btn-action-delete {
  background: var(--dark-bg-tertiary);
  color: var(--dark-accent-red);
  border-color: var(--dark-accent-red);
}
body.dark-mode .text-muted {
  color: var(--dark-text-muted) !important;
}

/* Dashboard specific */
body.dark-mode .card {
  background: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border);
  box-shadow: 0 8px 28px var(--dark-shadow);
}
body.dark-mode .card-header.bg-success {
  background: linear-gradient(90deg, #065f46 60%, #064e3b 100%) !important;
  color: #ecfdf5;
}
body.dark-mode .card-header.bg-warning {
  background: linear-gradient(90deg, #f59e0b 60%, #b45309 100%) !important;
  color: var(--dark-on-warn);
}
body.dark-mode .card-header.bg-info {
  background: linear-gradient(90deg, #0ea5e9 60%, #0369a1 100%) !important;
  color: #ecfeff;
}
body.dark-mode .list-group-item {
  background: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  border: 1px solid var(--dark-border);
}
body.dark-mode .compact-empty {
  color: var(--dark-text-secondary);
}
body.dark-mode .compact-mission-title {
  color: var(--dark-accent-blue);
}
body.dark-mode .badge.bg-secondary {
  background: #475569 !important;
  color: #e5e7eb;
}
body.dark-mode .badge.bg-success {
  background: #1f8f63 !important;
  color: #e7fff4;
}
body.dark-mode .badge.bg-warning {
  background: var(--dark-accent-yellow) !important;
  color: var(--dark-on-warn);
}
body.dark-mode .badge.bg-danger {
  background: #b84745 !important;
  color: #fff2f2;
}
body.dark-mode .badge.bg-primary {
  background: var(--dark-accent-blue) !important;
}
body.dark-mode .badge.bg-info {
  background: #2787b8 !important;
  color: #eefaff;
}
body.dark-mode .badge.bg-purple {
  background: #6e54cf !important;
  color: #f4efff;
}
body.dark-mode .page-shell__meta .badge.bg-primary-subtle {
  background: rgba(95, 180, 255, 0.18) !important;
  color: #d7ebff !important;
  border: 1px solid rgba(95, 180, 255, 0.22);
}
body.dark-mode .page-shell__meta .badge.bg-info-subtle {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #d6f5ff !important;
  border: 1px solid rgba(56, 189, 248, 0.24);
}
body.dark-mode .page-shell__meta .badge.bg-warning-subtle {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fff0c2 !important;
  border: 1px solid rgba(245, 158, 11, 0.24);
}
body.dark-mode .page-shell__meta .badge.bg-success-subtle {
  background: rgba(52, 211, 153, 0.18) !important;
  color: #dbfff0 !important;
  border: 1px solid rgba(52, 211, 153, 0.24);
}

/* Form pages specific (overrides for form.css) */
body.dark-mode .form-container {
  background: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border);
  box-shadow: 0 10px 30px var(--dark-shadow);
}

body.dark-mode table {
  background: var(--dark-bg-secondary);
  box-shadow: 0 2px 8px var(--dark-shadow);
}
body.dark-mode table th {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border-bottom-color: var(--dark-border);
}
body.dark-mode table td {
  color: var(--dark-text-primary);
}
body.dark-mode table tr:nth-child(even) {
  background: var(--dark-bg-primary);
}
body.dark-mode .timeoff-table tr:hover {
  background: var(--dark-bg-tertiary);
}

/* Team select and form select enhanced styling - GLOBAL */
body.dark-mode .team-select,
body.dark-mode .form-select,
body.dark-mode .form-select-custom {
  background: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  border: 2px solid var(--dark-border);
  box-shadow: 0 2px 8px var(--dark-shadow);
  transition: all 0.2s ease;
  font-weight: 500;
}

body.dark-mode .team-select:hover,
body.dark-mode .form-select:hover,
body.dark-mode .form-select-custom:hover {
  border-color: var(--dark-accent-blue);
  background: var(--dark-bg-secondary);
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.15);
}

body.dark-mode .team-select:focus,
body.dark-mode .form-select:focus,
body.dark-mode .form-select-custom:focus {
  border-color: var(--dark-accent-blue);
  background: var(--dark-bg-secondary);
  box-shadow:
    0 0 0 3px rgba(88, 166, 255, 0.2),
    0 2px 8px var(--dark-shadow);
  outline: none;
}

body.dark-mode .team-select option,
body.dark-mode .form-select option,
body.dark-mode .form-select-custom option {
  background: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  padding: 10px;
}

body.dark-mode .team-select option:hover,
body.dark-mode .form-select option:hover,
body.dark-mode .form-select-custom option:hover,
body.dark-mode .team-select option:checked,
body.dark-mode .form-select option:checked,
body.dark-mode .form-select-custom option:checked {
  background: var(--dark-accent-blue);
  color: white;
}

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

body.dark-mode .form-header {
  border-bottom: 2px solid var(--dark-border);
}
body.dark-mode .form-title {
  color: var(--dark-text-primary);
}
body.dark-mode .form-group label,
body.dark-mode .form-check label {
  color: var(--dark-text-primary);
}
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  border: 1.5px solid var(--dark-border);
  box-shadow: none;
}
body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  border-color: var(--dark-accent-blue);
  box-shadow: 0 0 0 2px var(--dark-focus-ring);
}
body.dark-mode .form-group .form-text {
  color: var(--dark-text-muted);
}

body.dark-mode .alert-danger {
  background: linear-gradient(90deg, #2f1026 60%, #1a0a15 100%);
  border: 1.5px solid var(--dark-accent-red);
  color: #fecaca;
}
/* Removed duplicate team-select - handled above */
body.dark-mode .team-badge {
  background-color: var(--dark-bg-tertiary);
  color: #cfe1ff;
}

/* Button outline variants for dark mode */
body.dark-mode .btn-outline-warning {
  color: var(--dark-accent-yellow);
  border-color: var(--dark-accent-yellow);
  background: transparent;
}

body.dark-mode .btn-outline-warning:hover,
body.dark-mode .btn-outline-warning:focus {
  background: var(--dark-accent-yellow);
  border-color: var(--dark-accent-yellow);
  color: var(--dark-bg-primary);
  box-shadow: 0 0 0 0.2rem rgba(210, 153, 34, 0.25);
}

body.dark-mode .btn-outline-danger {
  color: var(--dark-accent-red);
  border-color: var(--dark-accent-red);
  background: transparent;
}

body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-danger:focus {
  background: var(--dark-accent-red);
  border-color: var(--dark-accent-red);
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(248, 81, 73, 0.25);
}

/* Dark mode log level-specific row styling */
body.dark-mode #log-table .level-info {
  background-color: rgba(59, 130, 246, 0.15); /* Dark blue with transparency */
  color: #93c5fd; /* Light blue text */
}

body.dark-mode #log-table .level-warning {
  background-color: rgba(
    245,
    158,
    11,
    0.15
  ); /* Dark yellow with transparency */
  color: #fbbf24; /* Light yellow text */
}

body.dark-mode #log-table .level-error {
  background-color: rgba(248, 81, 73, 0.15); /* Dark red with transparency */
  color: #f87171; /* Light red text */
}

body.dark-mode #log-table .level-debug {
  background-color: rgba(107, 114, 128, 0.15); /* Dark gray with transparency */
  color: #9ca3af; /* Light gray text */
}

/* Tooltip for full message on hover */
#log-table td[data-message]:hover::after {
  content: attr(data-message);
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px;
  border-radius: 5px;
  white-space: pre-line;
  max-width: 400px;
  word-wrap: break-word;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  z-index: 9999;
}

/* Dark mode tooltip enhancement */
body.dark-mode #log-table td[data-message]:hover::after {
  background: rgba(17, 24, 39, 0.95);
  color: #f3f4f6;
  border: 1px solid var(--dark-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ==============================
 * ZOOM BUTTON DARK MODE
 * ============================== */

/* Zoom toggle button specific styling for global dark mode */
body.dark-mode .zoom-toggle {
  background: linear-gradient(135deg, var(--dark-accent-blue) 0%, #4785ff 100%);
  color: var(--dark-bg-primary);
  border-color: var(--dark-accent-blue);
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3);
}

body.dark-mode .zoom-toggle:hover {
  background: linear-gradient(135deg, #4785ff 0%, #2e6fff 100%);
  box-shadow: 0 8px 25px rgba(88, 166, 255, 0.5);
}

body.dark-mode .zoom-toggle.compact {
  background: linear-gradient(
    135deg,
    var(--dark-accent-yellow) 0%,
    #f2cc60 100%
  );
  color: var(--dark-bg-primary);
  border-color: var(--dark-accent-yellow);
  box-shadow: 0 4px 12px rgba(210, 153, 34, 0.3);
}

body.dark-mode .zoom-toggle.compact:hover {
  background: linear-gradient(135deg, #f2cc60 0%, #e6b800 100%);
  box-shadow: 0 8px 25px rgba(210, 153, 34, 0.5);
}

/* ===============================
 * FLATPICKR DARK MODE
 * =============================== */

/* Main flatpickr calendar container */
body.dark-mode .flatpickr-calendar {
  background: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: var(--dark-shadow-lg) !important;
  border-radius: 12px !important;
}

/* Calendar header with month/year */
body.dark-mode .flatpickr-months {
  background: var(--dark-gradient-primary) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  border-radius: 12px 12px 0 0 !important;
}

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

body.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border) !important;
}

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

body.dark-mode .flatpickr-current-month input.cur-year {
  background: transparent !important;
  color: var(--dark-text-primary) !important;
  border: none !important;
}

/* Navigation arrows */
body.dark-mode .flatpickr-prev-month,
body.dark-mode .flatpickr-next-month {
  color: var(--dark-text-secondary) !important;
  transition: all 0.2s ease !important;
}

body.dark-mode .flatpickr-prev-month:hover,
body.dark-mode .flatpickr-next-month:hover {
  color: var(--dark-accent-blue) !important;
  transform: scale(1.1) !important;
}

/* Weekday headers */
body.dark-mode .flatpickr-weekday {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-secondary) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

/* Day container - This is the main fix for visibility */
body.dark-mode .flatpickr-days {
  background: var(--dark-bg-secondary) !important;
}

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

/* Individual day cells */
body.dark-mode .flatpickr-day {
  background: transparent !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

body.dark-mode .flatpickr-day:hover {
  background: var(--dark-bg-quaternary) !important;
  color: var(--dark-accent-blue) !important;
  border-color: var(--dark-accent-blue) !important;
  transform: scale(1.05) !important;
}

body.dark-mode .flatpickr-day:focus {
  outline: 2px solid var(--dark-accent-blue) !important;
  outline-offset: 2px !important;
}

/* Outside month days */
body.dark-mode .flatpickr-day.prevMonthDay,
body.dark-mode .flatpickr-day.nextMonthDay {
  color: var(--dark-text-muted) !important;
  opacity: 0.5 !important;
}

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

/* Today's date */
body.dark-mode .flatpickr-day.today {
  background: var(--dark-accent-blue) !important;
  color: white !important;
  font-weight: bold !important;
  border-color: var(--dark-accent-blue) !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3) !important;
}

body.dark-mode .flatpickr-day.today:hover {
  background: var(--dark-accent-blue) !important;
  color: white !important;
  transform: scale(1.1) !important;
}

/* Selected date */
body.dark-mode .flatpickr-day.selected {
  background: var(--dark-accent-green) !important;
  color: white !important;
  font-weight: bold !important;
  border-color: var(--dark-accent-green) !important;
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.3) !important;
}

body.dark-mode .flatpickr-day.selected:hover {
  background: var(--dark-accent-green) !important;
  color: white !important;
  transform: scale(1.05) !important;
}

/* Range selection */
body.dark-mode .flatpickr-day.startRange,
body.dark-mode .flatpickr-day.endRange {
  background: var(--dark-accent-purple) !important;
  color: white !important;
  font-weight: bold !important;
  border-color: var(--dark-accent-purple) !important;
}

body.dark-mode .flatpickr-day.inRange {
  background: rgba(165, 166, 255, 0.2) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-accent-purple) !important;
}

/* Disabled dates */
body.dark-mode .flatpickr-day.disabled {
  color: var(--dark-text-muted) !important;
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

body.dark-mode .flatpickr-day.disabled:hover {
  background: transparent !important;
  color: var(--dark-text-muted) !important;
  transform: none !important;
}

/* Time picker (if used) */
body.dark-mode .flatpickr-time {
  background: var(--dark-bg-tertiary) !important;
  border-top: 1px solid var(--dark-border) !important;
}

body.dark-mode .flatpickr-time input {
  background: var(--dark-bg-quaternary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 6px !important;
}

body.dark-mode .flatpickr-time input:focus {
  border-color: var(--dark-accent-blue) !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
}

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

/* AM/PM toggle */
body.dark-mode .flatpickr-am-pm {
  background: var(--dark-bg-quaternary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

body.dark-mode .flatpickr-am-pm:hover {
  background: var(--dark-accent-blue) !important;
  color: white !important;
  border-color: var(--dark-accent-blue) !important;
}

/* Calendar animations */
body.dark-mode .flatpickr-calendar.animate.open {
  animation: darkModeCalendarOpen 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes darkModeCalendarOpen {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsive flatpickr for mobile */
@media (max-width: 768px) {
  body.dark-mode .flatpickr-calendar {
    width: 90vw !important;
    max-width: 320px !important;
  }

  body.dark-mode .flatpickr-day {
    height: 35px !important;
    line-height: 35px !important;
    font-size: 14px !important;
  }
}

/* Feedback message display - ensure text is visible in dark mode */
body.dark-mode .alert {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

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

body.dark-mode .border.p-3,
body.dark-mode .border.p-2 {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* ==============================
 * BOOTSTRAP UTILITY OVERRIDES
 * ============================== */

/* Prevent bright Bootstrap utility classes from breaking dark theme */
body.dark-mode .bg-light {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

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

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

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

/* Alert variants */
body.dark-mode .alert-success {
  background-color: rgba(63, 185, 80, 0.12) !important;
  border-color: var(--dark-accent-green) !important;
  color: #d9fbe3 !important;
}

body.dark-mode .alert-info {
  background-color: rgba(88, 166, 255, 0.1) !important;
  border-color: var(--dark-accent-blue) !important;
  color: #cfe1ff !important;
}

body.dark-mode .alert-warning {
  background-color: rgba(210, 153, 34, 0.12) !important;
  border-color: var(--dark-accent-yellow) !important;
  color: #fdecc8 !important;
}

/* ==============================
 * FEEDBACK MANAGE PAGE DARK
 * ============================== */

/* Original feedback block in manage view */
body.dark-mode .alert.border {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* Quick-action card headers */
body.dark-mode .card-header.bg-secondary {
  background: linear-gradient(90deg, #374151 60%, #1f2937 100%) !important;
  color: var(--dark-text-primary);
}

body.dark-mode .card-header.bg-primary {
  background: linear-gradient(90deg, #1d4ed8 60%, #1e3a8a 100%) !important;
  color: white;
}

/* Strong labels in card bodies */
body.dark-mode .card-body strong {
  color: var(--dark-text-secondary);
}

/* Page links */
body.dark-mode .card-body a:not(.btn) {
  color: var(--dark-accent-blue);
}

body.dark-mode .card-body a:not(.btn):hover {
  color: #7dc3ff;
}