/* =========================================================
  SCHEDULE.CSS
  Schedule layout, dispatch board structure, sticky header,
  drag/drop behavior, density modes, and mobile layout.

  Visual colors/surfaces live in:
  - schedule-theme.css
  - surfaces.css
  - 00-theme-tokens.css
========================================================= */

/* =========================================================
  1. PAGE HEADER / TOP CONTROLS LAYOUT
========================================================= */
.schedule-right-header,
.schedule-page-header-main,
.schedule-header-actions,
.schedule-current-range,
.schedule-page-title,
.schedule-board-titlebar,
.schedule-board-title-group {
  align-items: center;
  display: flex;
}

.schedule-right-header,
.schedule-page-header-main,
.schedule-board-titlebar {
  gap: var(--app-toolbar-gap);
  justify-content: space-between;
}

.schedule-page {
  gap: var(--app-panel-gap);
}

.schedule-top-grid {
  align-items: stretch;
  display: grid;
  gap: var(--app-panel-gap);
  grid-template-columns: var(--app-sidebar-compact-width) minmax(0, 1fr);
}

.schedule-title-card,
.schedule-controls-card {
  align-items: center;
  display: flex;
  min-height: var(--app-header-height);
  padding: 0.65rem 0.85rem !important;
}

.schedule-title-card {
  justify-content: flex-start;
}

.schedule-controls-card {
  justify-content: flex-start;
}

.schedule-controls-card .schedule-header-actions {
  width: 100%;
}

.schedule-page-title {
  flex-wrap: wrap;
  font-size: 1rem !important;
  gap: 0.75rem;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.schedule-title-card .text-muted {
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
  margin-top: 0.15rem !important;
}

.schedule-header-actions {
  flex-wrap: nowrap;
  gap: 0.45rem;
  justify-content: flex-start;
  width: 100%;
}

.schedule-current-range {
  font-size: 0.9rem;
  font-weight: 800;
  height: var(--app-compact-control-height);
  justify-content: flex-end;
  margin-left: auto;
  min-width: 120px;
  order: 5;
  text-align: right;
}

.schedule-tech-filter { order: 1; }
.schedule-view-toggle { order: 2; margin-left: 0 !important; }
.schedule-today-button { order: 3; }
.schedule-density-menu { order: 4; }

.schedule-header-actions .btn,
.schedule-header-actions .dropdown-toggle {
  align-items: center;
  display: inline-flex;
  font-size: 0.78rem !important;
  height: var(--app-compact-control-height) !important;
  justify-content: center;
  line-height: 1.1 !important;
  padding: 0.15rem 0.5rem !important;
}

.schedule-view-toggle .btn {
  min-width: 38px !important;
}

.schedule-density-menu .btn {
  min-width: auto !important;
}

.schedule-density-menu .dropdown-menu,
.dispatch-tech-dropdown {
  min-width: 150px;
}

.dispatch-tech-dropdown {
  max-height: 320px;
  overflow-y: auto;
}

@media (max-width: 992px) {
  .schedule-top-grid {
    grid-template-columns: 1fr !important;
  }

  .schedule-page-header-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-header-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start;
  }

  .schedule-current-range {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }
}

/* =========================================================
  2. DESKTOP DISPATCH LAYOUT
========================================================= */
.schedule-left-panel,
.schedule-calendar-card {
  min-width: 0;
}

.schedule-dispatch-layout {
  align-items: start;
  display: grid;
  gap: var(--app-panel-gap);
  grid-template-columns: var(--app-sidebar-compact-width) minmax(0, 1fr);
  margin-top: 0.25rem;
}

.unscheduled-panel {
  max-height: calc(100vh - 140px);
  overflow: hidden;
  position: sticky;
  top: 1rem;
}

.unscheduled-panel .card-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.schedule-board-shell {
  margin-top: 0;
  overflow: visible;
}

.schedule-board-titlebar {
  min-height: var(--app-header-height);
  padding: 0.65rem 0.85rem;
}

.schedule-board-title-group {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.schedule-board-title-group h2 {
  margin: 0 0.25rem 0 0;
}

.schedule-board-help-text {
  margin-left: auto;
}

.dispatch-toolbar {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 992px) {
  .schedule-dispatch-layout {
    grid-template-columns: 1fr;
  }

  .unscheduled-panel {
    max-height: none;
    position: static;
  }

  .unscheduled-panel .card-body {
    max-height: 320px;
  }
}

/* =========================================================
  3. DISPATCH BOARD GRID + STICKY HEADER
========================================================= */
.dispatch-board {
  --dispatch-row-min-height: 128px;

  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 210px);
  overflow: auto;
  position: relative;
}

.dispatch-header-row,
.dispatch-tech-row {
  display: grid;
  grid-template-columns: 180px repeat(5, minmax(210px, 1fr));
  min-width: 1230px;
}

.dispatch-header-row {
  position: sticky;
  top: 0;
  z-index: 12;
}

.dispatch-tech-header,
.dispatch-day-header,
.dispatch-tech-name,
.dispatch-day-cell {
  border-bottom: 1px solid var(--app-border);
  border-right: 1px solid var(--app-border);
}

.dispatch-tech-header,
.dispatch-day-header {
  align-items: center;
  display: flex;
  font-size: 0.82rem;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 0.55rem 0.5rem;
  text-align: center;
}

.dispatch-tech-name {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  font-weight: 700;
  justify-content: center;
  min-height: var(--dispatch-row-min-height);
  padding: 0.55rem 0.7rem;
}

.dispatch-day-cell {
  min-height: var(--dispatch-row-min-height);
  padding: 0.4rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.dispatch-tech-row {
  align-items: stretch;
}

.dispatch-day-cell {
  align-content: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dispatch-tech-bottom-row {
  min-height: auto;
}

.dispatch-idle-summary-cell {
  grid-column: span 5;
  padding: 0.55rem 0.7rem;
}

.dispatch-idle-drop-targets {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dispatch-idle-tech-chip {
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  min-height: 28px;
  padding: 0.25rem 0.75rem;
}

.dispatch-tech-name-main {
  font-weight: 800;
  line-height: 1.15;
}

.dispatch-tech-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.62rem;
  font-weight: 600;
  gap: 0.2rem;
  margin-top: 0.12rem;
  opacity: 0.78;
}

.dispatch-tech-row-selected .dispatch-tech-name {
  padding-left: calc(0.7rem - 4px);
}

/* =========================================================
  4. DISPATCH CARDS / BADGE STRUCTURE
========================================================= */
.unscheduled-wo-card,
.dispatch-wo-card,
.wo-badge,
.mobile-dispatch-card {
  border-left: 4px solid var(--status-color, var(--app-primary));
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.unscheduled-wo-card,
.dispatch-wo-card {
  margin-bottom: 0.35rem;
}

.unscheduled-wo-card {
  padding: 0.55rem 0.65rem !important;
}

.unscheduled-wo-card .small {
  font-size: 0.68rem;
}

.dispatch-wo-card {
  border-radius: var(--radius-lg);
  padding: 0.55rem 0.65rem;
}


.dispatch-wo-time,
.wo-badge-time {
  font-size: 0.65rem;
  font-weight: 800;
  margin-bottom: 2px;
  opacity: 0.8;
  text-transform: uppercase;
}

.dispatch-wo-title {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
}

.dispatch-wo-customer {
  font-size: 0.62rem;
  margin-top: 2px;
  opacity: 0.72;
}

.dispatch-wo-service-type,
.dispatch-wo-overdue-badge,
.dispatch-wo-multiday-badge,
.unscheduled-wo-attention-badge {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 0.56rem !important;
  font-weight: 800;
  gap: 0.25rem;
  letter-spacing: 0.02em !important;
  line-height: 1;
  padding: 0.12rem 0.35rem !important;
  text-transform: uppercase;
}

.dispatch-wo-overdue-badge,
.dispatch-wo-multiday-badge {
  margin-top: 0.22rem !important;
}

.dispatch-wo-service-type {
  margin-top: 0.3rem;
}

.dispatch-wo-overdue {
  border-left-width: 5px;
}

.dispatch-wo-multiday-start {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.dispatch-wo-multiday-middle {
  border-left-style: dashed;
  border-radius: 4px;
}

.dispatch-wo-multiday-end {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.dispatch-draggable-workorder[draggable="true"],
.schedule-draggable-workorder[draggable="true"] {
  cursor: grab;
}

.unscheduled-wo-card.dragging,
.schedule-draggable-workorder.dragging {
  cursor: grabbing;
  opacity: 0.5;
  transform: rotate(1deg) scale(0.98);
}

/* =========================================================
  5. EMPTY STATES / SUMMARY
========================================================= */
.dispatch-empty-cell {
  align-items: center;
  border: 1px dashed var(--app-border);
  border-radius: var(--radius-lg);
  display: flex;
  font-size: 0;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.02em;
  min-height: 42px;
  opacity: 0.32;
  pointer-events: none;
  text-align: center;
  transition:
    opacity var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    min-height var(--transition-fast);
}

.dispatch-empty-cell::after {
  content: "";
  border-top: 1px dashed currentColor;
  display: block;
  opacity: 0.55;
  width: 44%;
}

.dispatch-day-cell:hover .dispatch-empty-cell {
  opacity: 0.48;
}

.dispatch-day-cell.drag-over .dispatch-empty-cell,
.schedule-drop-zone.drag-over .dispatch-empty-cell {
  font-size: 0.62rem;
  opacity: 1;
  pointer-events: auto;
}

.dispatch-day-cell.drag-over .dispatch-empty-cell::after,
.schedule-drop-zone.drag-over .dispatch-empty-cell::after {
  content: "Drop here";
  border: 0;
  opacity: 1;
  width: auto;
}

.schedule-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.schedule-board-titlebar .schedule-summary-bar {
  margin: 0;
}

.schedule-summary-pill {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0.25rem 0.65rem;
}

.schedule-board-titlebar .schedule-summary-pill {
  min-height: 24px;
  padding: 0.15rem 0.5rem;
}

.schedule-summary-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.schedule-board-titlebar .schedule-summary-label {
  font-size: 0.62rem;
}

.schedule-summary-value {
  font-size: 0.85rem;
  font-weight: 900;
}

.schedule-board-titlebar .schedule-summary-value {
  font-size: 0.75rem;
}

/* =========================================================
  6. MONTH / WEEK CALENDAR LAYOUT
========================================================= */
.calendar-grid {
  border: 1px solid var(--app-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  overflow: hidden;
}

.calendar-day-header {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.5rem;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  min-height: 115px;
  padding: 0.5rem 0.6rem;
  transition: background-color var(--transition-normal);
}

.day-number {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.day-events {
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
}

.wo-badge {
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  line-height: 1.2;
  padding: 4px 6px;
}

.wo-badge-title {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 992px) {
  .week-view {
    grid-template-columns: 1fr;
  }

  .week-view .calendar-day-header {
    display: none;
  }

  .week-view .calendar-day {
    border-bottom: 1px solid var(--app-border);
    min-height: auto;
  }
}

/* =========================================================
  7. DENSITY MODES
========================================================= */
.schedule-page.density-comfortable .dispatch-tech-name,
.schedule-page.density-comfortable .dispatch-day-cell {
  min-height: var(--dispatch-row-min-height);
  padding: 0.5rem;
}

.schedule-page.density-comfortable .dispatch-wo-card {
  padding: 0.65rem 0.7rem;
}

.schedule-page.density-comfortable .dispatch-tech-name {
  padding-bottom: 0.7rem;
  padding-top: 0.7rem;
}

.schedule-page.density-compact .dispatch-tech-row {
  min-height: 44px !important;
}

.schedule-page.density-compact .dispatch-tech-row:has(.dispatch-wo-card) {
  min-height: 86px !important;
}

.schedule-page.density-compact .dispatch-tech-name,
.schedule-page.density-compact .dispatch-day-cell {
  min-height: 104px !important;
  padding: 0.18rem !important;
}

.schedule-page.density-compact .dispatch-tech-row:has(.dispatch-wo-card) .dispatch-day-cell {
  min-height: 104px !important;
}

.schedule-page.density-compact .dispatch-tech-name {
  padding: 0.32rem 0.45rem !important;
}

.schedule-page.density-compact .dispatch-tech-name-main {
  font-size: 0.76rem !important;
  line-height: 1.05 !important;
}

.schedule-page.density-compact .dispatch-tech-meta {
  font-size: 0.52rem !important;
  margin-top: 0.05rem !important;
}

.schedule-page.density-compact .dispatch-empty-cell {
  min-height: 18px !important;
}

.schedule-page.density-compact .dispatch-wo-card {
  border-radius: 8px !important;
  margin-bottom: 0.12rem !important;
  min-height: unset !important;
  padding: 0.18rem 0.28rem !important;
}

.schedule-page.density-compact .dispatch-wo-time {
  font-size: 0.44rem !important;
  line-height: 1 !important;
  margin-bottom: 0.02rem !important;
  opacity: 0.8;
}

.schedule-page.density-compact .dispatch-wo-title {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 0.04rem !important;
}

.schedule-page.density-compact .dispatch-wo-customer,
.schedule-page.density-compact .dispatch-wo-service-type,
.schedule-page.density-compact .dispatch-wo-multiday-badge {
  display: none !important;
}

.schedule-page.density-compact .dispatch-wo-overdue-badge {
  display: inline-flex !important;
  font-size: 0.42rem !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  padding: 0.05rem 0.18rem !important;
}

.schedule-page.density-compact .dispatch-wo-badge-row,
.schedule-page.density-compact .dispatch-wo-footer {
  gap: 0.1rem !important;
  margin-top: 0.04rem !important;
}

.schedule-page.density-compact .dispatch-day-cell > .dispatch-wo-card:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
  8. DISPATCH MODAL STRUCTURE
========================================================= */
.dispatch-modal-tech-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
}

.dispatch-modal-tech-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
}

/* =========================================================
  9. MOBILE DISPATCH LAYOUT
========================================================= */
.mobile-dispatch-list {
  display: none;
}

@media (max-width: 767.98px) {
  .schedule-dispatch-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
  }

  .schedule-left-panel {
    display: none !important;
  }

  .schedule-calendar-card,
  .schedule-board-shell,
  .unscheduled-panel {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .schedule-board-titlebar {
    border-bottom: 1px solid var(--app-border);
    padding: 0.85rem !important;
  }

  .schedule-board-title-group {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 0.5rem !important;
  }

  .schedule-board-title-group h2 {
    font-size: 0;
  }

  .schedule-board-title-group h2::after {
    content: "Today’s Dispatch";
    font-size: 1.25rem;
    font-weight: 900;
  }

  .schedule-board-help-text,
  .schedule-density-menu,
  .schedule-summary-bar {
    display: none !important;
  }

  .schedule-controls-card .d-flex {
    flex-wrap: wrap;
  }

  .schedule-controls-card .btn-group,
  .schedule-controls-card .form-select,
  .schedule-controls-card .btn {
    width: 100%;
  }

  .schedule-controls-card .btn-group {
    display: flex;
  }

  .schedule-controls-card .btn-group .btn {
    flex: 1;
  }

  .schedule-view-toggle {
    width: 100%;
  }

  .schedule-view-toggle a:nth-child(2),
  .schedule-view-toggle a:nth-child(3) {
    display: none !important;
  }

  .schedule-view-toggle a:first-child,
  .schedule-view-toggle a:last-child {
    flex: 1;
  }

  .schedule-today-button {
    width: 100%;
  }

  .dispatch-board {
    display: none;
  }

  .mobile-dispatch-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.75rem;
  }

  .mobile-dispatch-day {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    overflow: hidden;
  }

  .mobile-dispatch-day-header {
    align-items: center;
    border: none;
    border-bottom: 1px solid var(--app-border) !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.85rem;
    pointer-events: none;
    text-align: left;
    width: 100%;
  }

  .mobile-dispatch-day-header strong {
    display: block;
    font-size: 1.1rem !important;
  }

  .mobile-dispatch-day-header span {
    font-size: 0.82rem !important;
    font-weight: 700;
  }

  .mobile-dispatch-today .mobile-dispatch-day-header {
    box-shadow: inset 4px 0 0 var(--app-primary);
  }

  .mobile-dispatch-day-toggle {
    border: 1px solid var(--app-border);
    border-radius: var(--radius-pill);
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    padding: 0.18rem 0.5rem;
    text-transform: uppercase;
  }

  .mobile-tech-section {
    border-bottom: 1px solid var(--app-border);
    padding: 0.75rem 0.85rem;
  }

  .mobile-tech-section:last-child {
    border-bottom: none;
  }

  .mobile-tech-section:not(:has(.mobile-dispatch-card)) {
    display: none !important;
  }

  .mobile-tech-header {
    align-items: center;
    display: flex;
    font-size: 0.92rem !important;
    font-weight: 800;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0;
  }

  .mobile-tech-section:has(.mobile-dispatch-card) .mobile-tech-header {
    margin-bottom: 0.45rem;
  }

  .mobile-dispatch-card {
    border-radius: var(--radius-lg);
    display: block;
    margin-bottom: 0.45rem;
    padding: 0.6rem 0.7rem;
  }

  .mobile-dispatch-card:last-child {
    margin-bottom: 0;
  }

  .mobile-dispatch-card-top {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
  }

  .mobile-dispatch-card-top strong {
    font-size: 0.95rem;
  }

  .mobile-dispatch-card-top span {
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .mobile-dispatch-card-customer {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.2rem;
  }

  .mobile-dispatch-card-meta {
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 900;
    margin-top: 0.35rem;
    padding: 0.12rem 0.4rem;
    text-transform: uppercase;
  }

  .mobile-empty-jobs {
    display: none !important;
  }

  .mobile-no-work-today {
    border: 1px dashed var(--app-border);
    border-radius: var(--radius-xl);
    font-size: 0.85rem;
    font-weight: 800;
    margin: 0.85rem;
    padding: 0.85rem;
    text-align: center;
  }
}

/* =========================================================
   DISPATCH TECHNICIAN SCHEDULE AWARENESS
========================================================= */

.dispatch-tech-schedule-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.dispatch-tech-schedule-statuses.mobile {
  margin: 0.45rem 0;
}

.dispatch-tech-schedule-pill {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  white-space: nowrap;
}

.dispatch-tech-schedule-pill.vacation {
  background: rgba(220, 53, 69, 0.16);
  border-color: rgba(220, 53, 69, 0.24);
  color: #ff8c98;
}

.dispatch-tech-schedule-pill.sick {
  background: rgba(253, 126, 20, 0.16);
  border-color: rgba(253, 126, 20, 0.24);
  color: #ffb37a;
}

.dispatch-tech-schedule-pill.training {
  background: rgba(111, 66, 193, 0.16);
  border-color: rgba(111, 66, 193, 0.24);
  color: #ceb6ff;
}

.dispatch-tech-schedule-pill.oncall {
  background: rgba(13, 110, 253, 0.16);
  border-color: rgba(13, 110, 253, 0.24);
  color: #9ac0ff;
}

.dispatch-tech-schedule-pill.meeting {
  background: rgba(108, 117, 125, 0.16);
  border-color: rgba(108, 117, 125, 0.24);
  color: var(--app-text-muted);
}

.dispatch-tech-schedule-pill.holiday {
  background: rgba(255, 193, 7, 0.16);
  border-color: rgba(255, 193, 7, 0.24);
  color: #ffd66b;
}

.dispatch-tech-schedule-pill.default {
  background: color-mix(in srgb, var(--app-primary), transparent 88%);
  border-color: color-mix(in srgb, var(--app-primary), transparent 70%);
  color: var(--app-primary);
}


/* =========================================================
   DISPATCH BOARD VISUAL WEIGHT CLEANUP
========================================================= */

.dispatch-board {
  border-color: color-mix(in srgb, var(--app-border), transparent 35%);
}

.dispatch-header-row {
  background: color-mix(in srgb, var(--app-surface), transparent 4%);
}

.dispatch-tech-header,
.dispatch-day-header {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.65rem 0.75rem;
}

.dispatch-day-header > div:first-child {
  margin-bottom: 0.15rem;
}

.dispatch-tech-name {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-surface), white 2%),
      color-mix(in srgb, var(--app-surface), black 2%)
    );
  border-right: 1px solid color-mix(in srgb, var(--app-border), transparent 35%);
  padding: 0.65rem 0.75rem;
}

.dispatch-tech-name-main {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
}

.dispatch-tech-meta {
  font-size: 0.68rem;
  gap: 0.35rem;
  margin-top: 0.25rem;
  opacity: 0.76;
}

.dispatch-tech-row {
  min-height: var(--dispatch-row-min-height);
}

.dispatch-day-cell {
  min-height: var(--dispatch-row-min-height);
  padding: 0.5rem;
}

.dispatch-empty-cell {
  border: 1px dashed color-mix(in srgb, var(--app-border), transparent 45%);
  border-radius: var(--radius-md);
  font-size: 0.7rem;
  opacity: 0.62;
  padding: 0.4rem;
}

.dispatch-today-cell,
.today-column {
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--app-primary), transparent 94%),
      color-mix(in srgb, var(--app-primary), transparent 94%)
    ) !important;
}

.dispatch-wo-card {
  border-color: color-mix(in srgb, var(--status-color, var(--app-border)), transparent 68%) !important;
  box-shadow: none !important;
  padding: 0.55rem 0.65rem !important;
}

.dispatch-wo-card:hover {
  box-shadow: var(--shadow-sm) !important;
}

.dispatch-wo-card .card-display-grid {
  gap: 0.45rem;
}

.dispatch-wo-card strong {
  font-size: 0.78rem;
}

.dispatch-wo-card span,
.dispatch-wo-card small {
  font-size: 0.7rem;
}

.unscheduled-panel {
  box-shadow: none !important;
}

.unscheduled-wo-card {
  box-shadow: none !important;
  padding: 0.55rem 0.65rem !important;
}

.unscheduled-wo-card:hover {
  box-shadow: var(--shadow-sm) !important;
}

/* Compact mode should actually feel compact */
.schedule-page.schedule-density-compact .dispatch-tech-row {
  min-height: 104px;
}

.schedule-page.schedule-density-compact .dispatch-day-cell {
  min-height: 104px;
  padding: 0.35rem;
}

.schedule-page.schedule-density-compact .dispatch-tech-name {
  padding: 0.45rem 0.6rem;
}

.schedule-page.schedule-density-compact .dispatch-wo-card,
.schedule-page.schedule-density-compact .unscheduled-wo-card {
  padding: 0.42rem 0.55rem !important;
}

.schedule-page.schedule-density-compact .dispatch-empty-cell {
  padding: 0.28rem;
}


/* =========================================================
   DISPATCH CLEANUP — IDLE TECHS + PLACEHOLDER REDUCTION
========================================================= */

/* Remove noisy placeholder visuals */
.dispatch-empty-cell {
  border: none !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none;
  min-height: 0 !important;
  padding: 0 !important;
}

/* Hide placeholder helper text */
.dispatch-empty-cell,
.dispatch-empty-cell *,
.dispatch-cell-placeholder,
.dispatch-availability-label {
  color: transparent !important;
  font-size: 0 !important;
}

/* Reduce technician rail visual weight */
.dispatch-tech-name {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-surface), white 1%),
      color-mix(in srgb, var(--app-surface), black 1%)
    ) !important;

  border-right:
    1px solid color-mix(in srgb, var(--app-border), transparent 55%) !important;
}

/* Soften row separators */
.dispatch-tech-row {
  border-bottom:
    1px solid color-mix(in srgb, var(--app-border), transparent 70%);
}

/* Reduce overall grid line intensity */
.dispatch-day-cell,
.dispatch-day-header,
.dispatch-tech-header {
  border-color:
    color-mix(in srgb, var(--app-border), transparent 72%) !important;
}

/* Today column should not dominate */
.dispatch-today-cell,
.today-column {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-primary), transparent 97%),
      color-mix(in srgb, var(--app-primary), transparent 97%)
    ) !important;
}

/* Compact idle technician rows */
.dispatch-tech-row.dispatch-row-idle {
  min-height: 42px !important;
}

.dispatch-tech-row.dispatch-row-idle .dispatch-day-cell {
  min-height: 42px !important;
}

.dispatch-tech-row.dispatch-row-idle .dispatch-tech-name {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

/* Smaller idle technician metadata */
.dispatch-tech-row.dispatch-row-idle .dispatch-tech-meta {
  margin-top: 0.1rem !important;
  opacity: 0.55;
}


/* =========================================================
   IDLE TECHNICIAN SUMMARY ROW
========================================================= */

.dispatch-idle-summary-row {
  min-height: 48px !important;
}

.dispatch-idle-summary {
  padding: 0.45rem 0.75rem !important;
}

.dispatch-idle-summary-cell {
  align-items: center;
  color: var(--app-text-muted);
  display: flex;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 0.45rem 0.75rem;
}


/* =========================================================
   UNSCHEDULED SIDEBAR DENSITY CLEANUP
========================================================= */

.unscheduled-panel {
  border-color: color-mix(in srgb, var(--app-border), transparent 45%) !important;
}

.unscheduled-wo-card {
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.45rem !important;
  padding: 0.45rem 0.55rem !important;
}

.unscheduled-wo-card .card-display-grid {
  gap: 0.35rem;
}

.unscheduled-wo-card strong {
  font-size: 0.76rem;
  line-height: 1.1;
}

.unscheduled-wo-card span,
.unscheduled-wo-card small {
  font-size: 0.68rem;
  line-height: 1.15;
}

.unscheduled-wo-card .status-pill {
  font-size: 0.62rem;
  padding: 0.18rem 0.42rem;
}

.unscheduled-wo-attention-badge {
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  margin-top: 0.35rem;
  padding: 0.22rem 0.4rem;
}

.unscheduled-empty-state {
  font-size: 0.78rem;
  padding: 0.85rem;
}

.schedule-page.schedule-density-compact .unscheduled-wo-card {
  padding: 0.35rem 0.45rem !important;
}


/* =========================================================
   DISPATCH OVERFLOW HANDLING
========================================================= */

.dispatch-overflow-button {
  background: color-mix(in srgb, var(--app-primary), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--app-primary), transparent 65%);
  border-radius: var(--radius-sm);
  color: var(--app-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.25rem;
  padding: 0.24rem 0.45rem;
}

.dispatch-overflow-button:hover {
  background: color-mix(in srgb, var(--app-primary), transparent 82%);
}


/* =========================================================
   EXPANDABLE IDLE TECHNICIAN DROP TARGETS
========================================================= */

.dispatch-idle-summary {
  appearance: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.dispatch-idle-summary:hover {
  background: color-mix(in srgb, var(--app-primary), transparent 94%) !important;
}

.dispatch-idle-summary-list {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-idle-drop-targets {
  display: none;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dispatch-idle-summary-row.is-expanded .dispatch-idle-summary-list {
  display: none;
}

.dispatch-idle-summary-row.is-expanded .dispatch-idle-drop-targets {
  display: flex;
}

.dispatch-idle-tech-chip {
  background: color-mix(in srgb, var(--app-surface), white 4%);
  border: 1px solid color-mix(in srgb, var(--app-border), transparent 25%);
  border-radius: 999px;
  color: var(--app-text);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
}

.dispatch-idle-tech-chip:hover,
.dispatch-idle-tech-chip.drag-over {
  background: color-mix(in srgb, var(--app-primary), transparent 82%);
  border-color: color-mix(in srgb, var(--app-primary), transparent 35%);
  color: var(--app-primary);
}

.dispatch-idle-summary-row.is-expanded {
  min-height: 104px !important;
}


/* =========================================================
   DISPATCH MODAL TIME PICKER
========================================================= */

.dispatch-time-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dispatch-time-pill {
  background: color-mix(in srgb, var(--app-surface), white 4%);
  border: 1px solid color-mix(in srgb, var(--app-border), transparent 20%);
  border-radius: 999px;
  color: var(--app-text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
}

.dispatch-time-pill:hover {
  background: color-mix(in srgb, var(--app-primary), transparent 88%);
  border-color: color-mix(in srgb, var(--app-primary), transparent 45%);
}

.dispatch-time-pill.is-start,
.dispatch-time-pill.is-end {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-primary-contrast, #fff);
}

.dispatch-time-pill.is-range {
  background: color-mix(in srgb, var(--app-primary), transparent 78%);
  border-color: color-mix(in srgb, var(--app-primary), transparent 45%);
  color: var(--app-primary);
}

.dispatch-time-preview {
  color: var(--app-text);
  font-size: 0.82rem;
  font-weight: 700;
}


/* =========================================================
   DISPATCH TIME PICKER RANGE VISIBILITY
========================================================= */

.dispatch-time-pill.is-range {
  background: color-mix(in srgb, var(--app-primary), transparent 68%) !important;
  border-color: color-mix(in srgb, var(--app-primary), transparent 35%) !important;
  color: var(--app-text) !important;
}

.dispatch-time-pill.is-start,
.dispatch-time-pill.is-end {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary), transparent 65%);
}


/* =========================================================
   DISPATCH WEEK HEADER DATE STACKING
========================================================= */

.dispatch-day-header {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  line-height: 1.15;
}

.dispatch-day-header > div:first-child {
  margin-bottom: 0 !important;
  font-size: 0.78rem;
}

.dispatch-day-header .small {
  display: block;
  font-size: 0.68rem;
  line-height: 1.1;
  opacity: 0.72;
}


/* =========================================================
   AVAILABLE TECHNICIAN SUMMARY ROW SPACING
========================================================= */

.dispatch-idle-summary-row {
  min-height: 72px !important;
}

.dispatch-idle-summary-cell {
  align-items: center;
  min-height: 72px;
  overflow: visible;
}

.dispatch-idle-summary-list {
  line-height: 1.45;
  white-space: normal !important;
}

.dispatch-idle-summary .dispatch-tech-name-main {
  line-height: 1.2;
}

.dispatch-idle-summary .dispatch-tech-meta {
  line-height: 1.2;
}



/* =========================================================
🔥 DISPATCH BOARD CLEANUP
Board-focused technician scheduling UX.
========================================================= */

/* Hide empty idle summary systems */
#dispatchIdleSummaryRow,
#dispatchIdleSummaryToggle {
    display: none !important;
}

/* Cleaner tech dropdown */
.dispatch-tech-dropdown {
    max-height: 22rem;
    overflow-y: auto;
}

/* Highlight checked technicians */
.dispatch-tech-filter-selected {
    background: rgba(var(--app-primary-rgb), 0.08);
    border-radius: 0.5rem;
}


.schedule-grid-span-5 {
  grid-column: span 5;
}

/* =========================================================
  ALWAYS-VISIBLE BOTTOM TECH RAIL
========================================================= */

.dispatch-tech-bottom-row {
  border-top: 2px solid var(--app-border);
}

.dispatch-tech-bottom-row .dispatch-idle-summary {
  cursor: default !important;
}

.dispatch-tech-bottom-row .dispatch-idle-summary-list {
  display: none !important;
}

.dispatch-tech-bottom-row .dispatch-idle-drop-targets {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
}

.dispatch-tech-bottom-row .dispatch-idle-tech-chip {
  min-width: 140px;
}

/* =========================================================
  FIX SCHEDULE TOP BAR ALIGNMENT
========================================================= */

.schedule-header-actions {
  justify-content: flex-start !important;
}

.schedule-current-range {
  margin-left: auto !important;
  order: 99 !important;
}

.schedule-tech-filter,
.schedule-view-toggle,
.schedule-today-button,
.schedule-density-menu {
  order: initial !important;
}

/* =========================================================
  DISPATCH ROW NATURAL HEIGHT
  Let each technician row grow from its tallest day cell.
========================================================= */

.dispatch-tech-row {
  align-items: start;
}

.dispatch-tech-name,
.dispatch-day-cell {
  min-height: var(--dispatch-row-min-height);
  height: auto;
}

.dispatch-day-cell {
  align-content: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow: visible;
}

.dispatch-day-cell .dispatch-wo-card {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 0 !important;
}

.dispatch-day-cell .dispatch-wo-card:last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
  DISPATCH CELL EXPAND / COLLAPSE
  Crowded cells show a small preview, then expand inline.
========================================================= */

.dispatch-day-cell .dispatch-wo-card-extra.d-none {
  display: none !important;
}

.dispatch-day-cell.dispatch-cell-expanded {
  overflow: visible;
}

.dispatch-cell-expand-button {
  align-self: flex-start;
  margin-top: 0.15rem;
}

.dispatch-cell-expand-button.is-expanded {
  background: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 6%);
}

/* =========================================================
  WEEKLY DISPATCH FINAL LAYOUT
  One source of truth for weekly dispatch card sizing.
========================================================= */

.dispatch-board {
  max-height: calc(100vh - 210px);
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 3rem;
}

.dispatch-tech-row {
  align-items: stretch;
  height: auto;
}

.dispatch-tech-row.dispatch-row-idle:not(:has(.dispatch-wo-card)) {
  min-height: 42px;
}

.dispatch-tech-row:has(.dispatch-wo-card) {
  min-height: auto;
}

.dispatch-tech-row:has(.dispatch-wo-card) .dispatch-tech-name,
.dispatch-tech-row:has(.dispatch-wo-card) .dispatch-day-cell {
  min-height: auto;
}

.dispatch-day-cell {
  align-content: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  height: auto;
  overflow: visible;
  padding-bottom: 0.55rem;
}

.dispatch-day-cell .dispatch-wo-card {
  flex: 0 0 auto;
  min-height: 58px;
  margin-bottom: 0;
  padding: 0.34rem 0.48rem;
  position: relative;
  width: 100%;
}

.dispatch-day-cell .dispatch-wo-card-extra.d-none {
  display: none !important;
}

.dispatch-day-cell .card-display-grid {
  display: block;
}

.dispatch-day-cell .card-display-left strong {
  display: block;
  font-size: 0.74rem;
  line-height: 1;
  margin-bottom: 0.08rem;
}

.dispatch-day-cell .card-display-left span {
  display: inline;
  font-size: 0.64rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-day-cell .card-display-left small {
  display: inline;
  font-size: 0.58rem;
  line-height: 1;
  margin-left: 0.2rem;
  opacity: 0.72;
}

.dispatch-day-cell .card-display-left small::before {
  content: "• ";
}

.dispatch-day-cell .dispatch-wo-multiday-badge {
  display: inline-flex;
  font-size: 0.48rem;
  line-height: 1;
  margin-top: 0.22rem;
  padding: 0.08rem 0.22rem;
}

.dispatch-day-cell .card-display-right,
.dispatch-day-cell .dispatch-wo-service-type,
.dispatch-day-cell .dispatch-wo-overdue-badge {
  display: none !important;
}

.dispatch-cell-expand-button {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

/* =========================================================
  SCHEDULE VIEW TOGGLE POLISH
========================================================= */

/* Bigger navigation arrows */
.schedule-nav-button,
.schedule-nav-arrow,
.schedule-header-actions .btn-icon {
  align-items: center;
  display: inline-flex;
  font-size: 1rem !important;
  font-weight: 700;
  height: 38px !important;
  justify-content: center;
  min-width: 38px !important;
  padding: 0 !important;
}

/* Clear active Month / Week state */
.schedule-view-toggle .btn,
.schedule-view-toggle button {
  border-color: rgba(var(--app-primary-rgb), 0.28) !important;
  color: var(--app-text-muted) !important;
}

.schedule-view-toggle .btn.active,
.schedule-view-toggle .btn-primary,
.schedule-view-toggle button.active,
.schedule-view-toggle button[aria-pressed="true"] {
  background: rgb(var(--app-primary-rgb)) !important;
  border-color: rgb(var(--app-primary-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--app-primary-rgb), 0.25),
    0 6px 18px rgba(var(--app-primary-rgb), 0.18) !important;
  color: #fff !important;
}

/* Hover state */
.schedule-view-toggle .btn:hover,
.schedule-view-toggle button:hover,
.schedule-nav-button:hover {
  border-color: rgba(var(--app-primary-rgb), 0.5) !important;
}