/* 
 * PLANNER TABLE INPUT FIXES
 * Standardize input heights, margins, and styling across all columns
 */

/* Base input styling - consistent height and spacing for ALL inputs */
#panel-planner-table #plannerTableView #plannerTable .planner-input,
#panel-planner-table #plannerTableView #plannerTable .planner-select {
  height: 32px !important;
  min-height: 32px !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  /* Unified font styling */
  text-size-adjust: 100% !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-feature-settings: normal !important;
  font-size: 14px !important;
  font-variation-settings: normal !important;
  font-weight: 400 !important;
}

/* Aircraft ID - monospace font for better readability */
#panel-planner-table #plannerTableView #plannerTable [id^="ac-"],
#plannerTable [id^="ac-"].planner-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Arr/Dep time inputs - smaller width to allow overlap, same height */
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"],
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"] {
  width: 85% !important; /* Smaller than column width to show overlap */
  padding: 6px 8px !important; /* Match all other inputs */
  height: 32px !important;
  min-height: 32px !important;
}

/* Arr/Dep columns - wider to accommodate overlapping inputs */
#plannerTable colgroup col:nth-child(3),
#plannerTable colgroup col:nth-child(4) {
  width: 220px !important; /* Increased from 190px */
}

/* Input hover - COMPLETELY TRANSPARENT, no border change */
#panel-planner-table #plannerTableView #plannerTable .planner-input:hover,
#panel-planner-table #plannerTableView #plannerTable .planner-select:hover,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .planner-input,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .planner-select {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Dark mode input hover - COMPLETELY TRANSPARENT */
.dark-mode #panel-planner-table #plannerTableView #plannerTable .planner-input:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable .planner-select:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .planner-input,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .planner-select {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Focus state - keep blue but with orange tint */
#panel-planner-table #plannerTableView #plannerTable .planner-input:focus,
#panel-planner-table #plannerTableView #plannerTable .planner-select:focus {
  background-color: rgba(255, 112, 67, 0.05) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

/* Ensure all table cells have consistent padding */
#panel-planner-table #plannerTableView #plannerTable tbody td {
  padding: 6px 8px !important;
  vertical-align: middle !important;
}

/* Status and Tow selects - match height */
#panel-planner-table #plannerTableView #plannerTable .status-selector,
#panel-planner-table #plannerTableView #plannerTable .tow-status-selector {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1.2 !important;
}

/* Status and Tow selects hover - NUCLEAR override all possible selectors */
#panel-planner-table #plannerTableView #plannerTable .status-selector:hover,
#panel-planner-table #plannerTableView #plannerTable .tow-status-selector:hover,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .status-selector,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector,
#panel-planner-table #plannerTableView #plannerTable select.status-selector:hover,
#panel-planner-table #plannerTableView #plannerTable select.tow-status-selector:hover,
html:not(.dark-mode) #panel-planner-table #plannerTableView #plannerTable .tow-status-selector:hover,
html:not(.dark-mode) #panel-planner-table #plannerTableView #plannerTable .status-selector:hover {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Dark mode Status and Tow selects hover - NUCLEAR override */
.dark-mode #panel-planner-table #plannerTableView #plannerTable .status-selector:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable .tow-status-selector:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .status-selector,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector,
.dark-mode #panel-planner-table #plannerTableView #plannerTable select.status-selector:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable select.tow-status-selector:hover {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* CHIP CLASS OVERRIDES - Force transparent for all tow chip states on hover */
#panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-neutral:hover,
#panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-initiated:hover,
#panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-ongoing:hover,
#panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-on-position:hover,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-neutral,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-initiated,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-ongoing,
#panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-on-position,
html:not(.dark-mode) #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-neutral:hover,
html:not(.dark-mode) #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-initiated:hover,
html:not(.dark-mode) #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-ongoing:hover,
html:not(.dark-mode) #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-on-position:hover {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
}

/* Dark mode chip class overrides */
.dark-mode #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-neutral:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-initiated:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-ongoing:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable .tow-status-selector.tow-on-position:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-neutral,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-initiated,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-ongoing,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:hover .tow-status-selector.tow-on-position {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
}

/* ===== NUCLEAR OVERRIDE: Kill element-level hover backgrounds for target IDs ===== */
/* Planner table: force transparent backgrounds on target elements (arrival/departure/tow/stat) */
#plannerTable [id^="arrival-time-table-"],
#plannerTable [id^="departure-time-table-"],
#plannerTable [id^="tow-"],
#plannerTable [id^="stat-"] {
  background: transparent !important;
  background-color: transparent !important;
}

#plannerTable [id^="arrival-time-table-"]:hover,
#plannerTable [id^="departure-time-table-"]:hover,
#plannerTable [id^="tow-"]:hover,
#plannerTable [id^="stat-"]:hover,
#plannerTable [id^="arrival-time-table-"]:focus,
#plannerTable [id^="departure-time-table-"]:focus,
#plannerTable [id^="tow-"]:focus,
#plannerTable [id^="stat-"]:focus,
#plannerTable [id^="arrival-time-table-"]:focus-visible,
#plannerTable [id^="departure-time-table-"]:focus-visible,
#plannerTable [id^="tow-"]:focus-visible,
#plannerTable [id^="stat-"]:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Safety: descendants inside the target IDs (badges, inputs, buttons) */
#plannerTable [id^="arrival-time-table-"] *,
#plannerTable [id^="departure-time-table-"] *,
#plannerTable [id^="tow-"] *,
#plannerTable [id^="stat-"] * {
  background: transparent !important;
  box-shadow: none !important;
}

/* Dark mode: ensure same behavior */
.dark-mode #plannerTable [id^="arrival-time-table-"],
.dark-mode #plannerTable [id^="departure-time-table-"],
.dark-mode #plannerTable [id^="tow-"],
.dark-mode #plannerTable [id^="stat-"] {
  background: transparent !important;
  background-color: transparent !important;
}

.dark-mode #plannerTable [id^="arrival-time-table-"]:hover,
.dark-mode #plannerTable [id^="departure-time-table-"]:hover,
.dark-mode #plannerTable [id^="tow-"]:hover,
.dark-mode #plannerTable [id^="stat-"]:hover,
.dark-mode #plannerTable [id^="arrival-time-table-"]:focus,
.dark-mode #plannerTable [id^="departure-time-table-"]:focus,
.dark-mode #plannerTable [id^="tow-"]:focus,
.dark-mode #plannerTable [id^="stat-"]:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ===== WRAPPER DIVS: Kill backgrounds on compact-dt-wrap, tow-cell, status-cell ===== */
/* These parent wrappers must not introduce additional backgrounds */
#plannerTable .compact-dt-wrap,
#plannerTable .tow-cell,
#plannerTable .status-cell,
#plannerTable td .compact-dt-wrap,
#plannerTable td .tow-cell,
#plannerTable td .status-cell {
  background: transparent !important;
  background-color: transparent !important;
}

#plannerTable .compact-dt-wrap:hover,
#plannerTable .tow-cell:hover,
#plannerTable .status-cell:hover,
#plannerTable td .compact-dt-wrap:hover,
#plannerTable td .tow-cell:hover,
#plannerTable td .status-cell:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* Row hover: wrappers remain transparent */
#plannerTable tbody tr:hover .compact-dt-wrap,
#plannerTable tbody tr:hover .tow-cell,
#plannerTable tbody tr:hover .status-cell {
  background: transparent !important;
  background-color: transparent !important;
}

/* Dark mode: same behavior */
.dark-mode #plannerTable .compact-dt-wrap,
.dark-mode #plannerTable .tow-cell,
.dark-mode #plannerTable .status-cell,
.dark-mode #plannerTable td .compact-dt-wrap,
.dark-mode #plannerTable td .tow-cell,
.dark-mode #plannerTable td .status-cell {
  background: transparent !important;
  background-color: transparent !important;
}

.dark-mode #plannerTable .compact-dt-wrap:hover,
.dark-mode #plannerTable .tow-cell:hover,
.dark-mode #plannerTable .status-cell:hover,
.dark-mode #plannerTable tbody tr:hover .compact-dt-wrap,
.dark-mode #plannerTable tbody tr:hover .tow-cell,
.dark-mode #plannerTable tbody tr:hover .status-cell {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== READ-ONLY MODE: Maintain transparent backgrounds on disabled inputs ===== */
/* Light mode read-only: disabled inputs stay transparent */
.read-only #plannerTable .planner-input[disabled],
.read-only #plannerTable .planner-select[disabled],
#panel-planner-table.read-only #plannerTable .planner-input[disabled],
#panel-planner-table.read-only #plannerTable .planner-select[disabled] {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Read-only hover: inputs/selects remain transparent */
.read-only #plannerTable .planner-input[disabled]:hover,
.read-only #plannerTable .planner-select[disabled]:hover,
#panel-planner-table.read-only #plannerTable .planner-input[disabled]:hover,
#panel-planner-table.read-only #plannerTable .planner-select[disabled]:hover,
.read-only #plannerTable tbody tr:hover .planner-input[disabled],
.read-only #plannerTable tbody tr:hover .planner-select[disabled],
#panel-planner-table.read-only #plannerTable tbody tr:hover .planner-input[disabled],
#panel-planner-table.read-only #plannerTable tbody tr:hover .planner-select[disabled] {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Dark mode read-only: same behavior */
.dark-mode.read-only #plannerTable .planner-input[disabled],
.dark-mode.read-only #plannerTable .planner-select[disabled],
.dark-mode #panel-planner-table.read-only #plannerTable .planner-input[disabled],
.dark-mode #panel-planner-table.read-only #plannerTable .planner-select[disabled] {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.dark-mode.read-only #plannerTable .planner-input[disabled]:hover,
.dark-mode.read-only #plannerTable .planner-select[disabled]:hover,
.dark-mode #panel-planner-table.read-only #plannerTable .planner-input[disabled]:hover,
.dark-mode #panel-planner-table.read-only #plannerTable .planner-select[disabled]:hover,
.dark-mode.read-only #plannerTable tbody tr:hover .planner-input[disabled],
.dark-mode.read-only #plannerTable tbody tr:hover .planner-select[disabled],
.dark-mode #panel-planner-table.read-only #plannerTable tbody tr:hover .planner-input[disabled],
.dark-mode #panel-planner-table.read-only #plannerTable tbody tr:hover .planner-select[disabled] {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}