/**
 * TQC Dispatch Page — Admin-specific dispatch/loading management styles.
 */

/* --- Page Layout --- */
.dispatch-page {
  display: flex;
  flex-direction: column;
}

/* --- Active/Completed Toggle --- */
.dispatch-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dispatch-toggle__btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family);
  border: none;
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-primary);
  transition: all var(--transition-fast);
}

.dispatch-toggle__btn--active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* --- Collapsible Sections --- */
.dispatch-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--color-border-light);
}

.dispatch-section-title {
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
}

/* --- Section/date header text: black when collapsed, blue when expanded --- */
.dispatch-section-header.dispatch-header--collapsed,
.dispatch-section-header.dispatch-header--collapsed .dispatch-section-title,
.dispatch-date-header.dispatch-header--collapsed {
  color: var(--color-text);
}

.dispatch-section-arrow {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.dispatch-section-body {
  overflow: hidden;
}

.dispatch-section-body--collapsed {
  display: none;
}

/* --- Load header text color: black when collapsed, blue when expanded --- */
.container-header--collapsed,
.container-header--collapsed .text-primary {
  color: var(--color-text);
}

.container-header:not(.container-header--collapsed),
.container-header:not(.container-header--collapsed) span {
  color: var(--color-primary);
}

/* --- Action Buttons Grid (fixed slots so conditionals don't shift layout) --- */
.action-buttons {
  display: inline-grid;
  grid-template-columns: repeat(3, 20px);
  gap: 6px;
  align-items: center;
  justify-items: center;
}

/* Ensure clicks on SVG whitespace pass through to the <a> parent */
.action-buttons svg {
  pointer-events: none;
}

/* Truck icon hover — green fill on mark-complete */
.action-buttons [data-action="mark-complete"]:hover path {
  fill: var(--color-success) !important;
}

/* --- Dispatch Table Extras --- */
/* (base .table-totals, .container-header, .table-body defined globally in components.css) */

.dispatch-load-info {
  display: flex;
  align-items: flex-start;
  flex: 1;
  font-size: var(--font-size-sm);
}

.dispatch-load-info > * {
  flex: 1;
  text-align: center;
}

.dispatch-load-info > .dispatch-load-temp {
  flex: 0 0 auto;
  text-align: center;
}

.dispatch-load-info > :nth-child(2) {
  text-align: left;
  margin-left: var(--space-3);
}

.dispatch-load-info > .btn--icon {
  flex: 0 0 auto;
  text-align: center;
}

/* --- Date Sections --- */
.dispatch-date-body {
  overflow: hidden;
}

.dispatch-dates {
  display: flex;
  flex-direction: column;
}

.dispatch-date-row {
  overflow: hidden;
  border-top: 1px solid var(--color-border-light);
}

.dispatch-date-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-base);
  color: var(--color-primary);
}

/* --- Three-dot Context Menu --- */
.dispatch-menu {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 140px;
  overflow: hidden;
}

.dispatch-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
}

.dispatch-menu__item:hover {
  background: var(--color-surface);
}

.dispatch-menu__item--danger {
  color: var(--color-danger);
}

.dispatch-menu__item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* --- Unassigned Items --- */

/* --- Inline Edit (in-place row replacement) --- */
.inline-edit-active {
  background: var(--color-surface, #f8f9fa);
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
}

.inline-edit-active .form-input,
.inline-edit-active .form-select {
  padding: 4px 6px;
  font-size: var(--font-size-sm);
  height: auto;
  min-height: 0;
}

.inline-edit-active .form-input:focus,
.inline-edit-active .form-select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* --- Drag-and-Drop --- */
.dispatch-draggable {
  cursor: grab;
  user-select: none;
}

.dispatch-draggable:active {
  cursor: grabbing;
}

.dispatch-draggable.dragging {
  opacity: 0.7;
  background: var(--color-primary-light, #ebf5ff);
}

.dispatch-drop-zone.drag-over {
  background: rgba(74, 158, 255, 0.04);
  outline: 2px dashed rgba(74, 158, 255, 0.4);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

/* Row-level drop insertion indicator */
.drop-indicator-before td {
  box-shadow: inset 0 2px 0 0 var(--color-primary);
}

.drop-indicator-after td {
  box-shadow: inset 0 -2px 0 0 var(--color-primary);
}

/* Empty dispatch drop zone */
.dispatch-drop-zone > p {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}