/* =========================================================
   SCHEDULE-THEME.CSS
   Schedule-specific surfaces, borders, hover states,
   drag states, and dispatch visual hierarchy.

   Structural/layout behavior belongs in:
   - schedule.css
========================================================= */

/* =========================================================
   1. SCHEDULE PAGE STRUCTURE
========================================================= */
.schedule-page {
  color: var(--app-text);
}

.schedule-page-header,
.schedule-title-card,
.schedule-controls-card,
.schedule-board-shell,
.unscheduled-panel {
  background: var(--app-surface) !important;
  border: 1px solid color-mix(in srgb, var(--app-border), transparent 18%) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--app-text) !important;
}

.schedule-page-title,
.schedule-current-range,
.schedule-board-titlebar h2,
.unscheduled-panel h5 {
  color: var(--app-text) !important;
}

.schedule-title-card .text-muted,
.schedule-page .text-muted,
.schedule-board-titlebar .text-muted,
.unscheduled-panel .text-muted {
  color: var(--app-text-muted) !important;
}

/* =========================================================
   2. DISPATCH BOARD SURFACES
========================================================= */
.schedule-board-titlebar {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 6%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--app-border), transparent 25%) !important;
  color: var(--app-text) !important;
}

.dispatch-board {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 4%) !important;
}

.dispatch-header-row {
  backdrop-filter: blur(12px);
}

.dispatch-tech-header,
.dispatch-day-header,
.calendar-day-header {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 8%) !important;
  border-color: color-mix(in srgb, var(--app-border), transparent 28%) !important;
  color: var(--app-text) !important;
}

.dispatch-tech-name {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 3%) !important;
  border-color: color-mix(in srgb, var(--app-border), transparent 28%) !important;
  color: var(--app-text) !important;
}

.dispatch-day-cell,
.calendar-day {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 1%) !important;
  border-color: color-mix(in srgb, var(--app-border), transparent 34%) !important;
  color: var(--app-text) !important;
}

.calendar-grid {
  background: color-mix(in srgb, var(--app-border), transparent 60%) !important;
  border-color: color-mix(in srgb, var(--app-border), transparent 18%) !important;
  box-shadow: var(--shadow-md) !important;
}

.calendar-day.empty,
.calendar-day.other-month {
  background: color-mix(in srgb, var(--app-page-bg), var(--app-surface) 10%) !important;
  color: var(--app-text-muted) !important;
}

.day-number {
  color: var(--app-text) !important;
}

/* =========================================================
   3. STICKY HEADER + TODAY STATES
========================================================= */
.dispatch-header-row {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--app-border), transparent 32%);
}

.dispatch-day-header.today-column,
.dispatch-today-cell,
.calendar-day.today {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 93%) !important;
}

.dispatch-day-header.today-column {
  border-top: 2px solid color-mix(in srgb, var(--app-primary), white 18%) !important;
}

/* =========================================================
   4. HOVER / SELECTED / DRAG STATES
========================================================= */
.dispatch-day-cell:hover,
.calendar-day:hover {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 96%) !important;
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 68%) !important;
}

.dispatch-tech-row-selected .dispatch-tech-name,
.dispatch-tech-filter-selected,
.schedule-density-menu .btn.active {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 92%) !important;
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 55%) !important;
  color: var(--app-text) !important;
}

.dispatch-tech-row-selected .dispatch-tech-name {
  border-left: 4px solid color-mix(in srgb, var(--app-primary), white 12%) !important;
}

.dispatch-day-cell.drag-over,
.calendar-day.drag-over,
.schedule-drop-zone.drag-over {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 88%) !important;
  border-color: var(--app-primary) !important;
  outline: 2px dashed color-mix(in srgb, var(--app-primary), white 15%) !important;
  outline-offset: -6px;
}

.unscheduled-drop-zone.drag-over {
  background: color-mix(in srgb, var(--app-warning), var(--app-surface) 88%) !important;
  outline: 2px dashed var(--app-warning) !important;
  outline-offset: -6px;
}


/* =========================================================
   5. OVERDUE / ATTENTION STATES
========================================================= */
.dispatch-tech-overdue,
.dispatch-wo-overdue-badge {
  color: var(--app-danger) !important;
}

.dispatch-wo-overdue,
.dispatch-wo-overdue:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--app-danger), transparent 82%),
    var(--shadow-sm) !important;
}

.dispatch-wo-overdue-badge {
  background: color-mix(in srgb, var(--app-danger), transparent 90%) !important;
}

.unscheduled-wo-attention,
.unscheduled-wo-attention:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--app-warning), transparent 82%),
    var(--shadow-sm) !important;
}

.unscheduled-wo-attention-badge {
  background: color-mix(in srgb, var(--app-warning), transparent 90%) !important;
  color: color-mix(in srgb, var(--app-warning), black 18%) !important;
}

body.theme-dark .unscheduled-wo-attention-badge {
  color: var(--app-warning) !important;
}

.dispatch-wo-multiday-badge,
.dispatch-wo-service-type {
  background: color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 88%) !important;
  color: var(--app-text) !important;
}

/* =========================================================
   6. EMPTY STATES / SUMMARY BAR
========================================================= */
.dispatch-empty-cell {
  border-color: color-mix(in srgb, var(--app-border), transparent 38%) !important;
  color: color-mix(in srgb, var(--app-text-muted), transparent 18%) !important;
}

.dispatch-day-cell:hover .dispatch-empty-cell {
  border-color: color-mix(in srgb, var(--app-primary), transparent 55%) !important;
}

.dispatch-day-cell.drag-over .dispatch-empty-cell,
.schedule-drop-zone.drag-over .dispatch-empty-cell {
  background: color-mix(in srgb, var(--app-primary), transparent 92%) !important;
  border-color: color-mix(in srgb, var(--app-primary), white 14%) !important;
}

.schedule-summary-pill {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 5%) !important;
  border-color: color-mix(in srgb, var(--app-border), transparent 22%) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--app-text) !important;
}

.schedule-summary-label {
  color: var(--app-text-muted) !important;
}

/* =========================================================
   8. MODALS / TECH PICKER
========================================================= */
.dispatch-modal-tech-item {
  background: var(--app-surface) !important;
  border-color: color-mix(in srgb, var(--app-border), transparent 22%) !important;
  color: var(--app-text) !important;
}

.dispatch-modal-tech-item:hover {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 95%) !important;
}

body.theme-dark #dispatchScheduleModal .btn-close {
  filter: invert(1);
}

/* =========================================================
   9. BOOTSTRAP UTILITY SAFETY
========================================================= */
.schedule-page .btn-light,
#dispatchScheduleModal .btn-light,
#dispatchUnscheduleModal .btn-light {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 6%) !important;
  border-color: color-mix(in srgb, var(--app-border), transparent 20%) !important;
  color: var(--app-text) !important;
}

.schedule-page .btn-light:hover,
.schedule-page .btn-light:focus,
#dispatchScheduleModal .btn-light:hover,
#dispatchScheduleModal .btn-light:focus,
#dispatchUnscheduleModal .btn-light:hover,
#dispatchUnscheduleModal .btn-light:focus {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 94%) !important;
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 55%) !important;
  color: var(--app-text) !important;
}

.schedule-page .bg-white,
.schedule-page .card-header.bg-white {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 6%) !important;
  color: var(--app-text) !important;
}

.schedule-page .day-number.bg-primary {
  background: var(--app-primary) !important;
  color: var(--app-text-inverse) !important;
}

.schedule-page .text-white {
  color: var(--app-text-inverse) !important;
}