/* 
 * COMPREHENSIVE TABLE HOVER OVERRIDE & STYLING
 * This file must load AFTER Tailwind CSS to override its default hover styles
 * Also provides modern typography for table data
 * DO NOT REMOVE - fixes persistent table row hover highlighting
 */

/* Match airport-flights styling exactly for consistent look */
/* Table cells - default lighter weight and color like flight-number/time */
#plannerTable td,
#plannerTable tbody td,
#plannerTable .planner-input,
#plannerTable .planner-select,
#fleetTable td,
#fleetTable tbody td,
#fleetTable input,
#fleetTable select {
  font-weight: 400 !important;
  color: #6b7280 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* Table headers - match airport-flights headers exactly */
#plannerTable th,
#fleetTable th {
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Primary columns (Aircraft ID, Registration) - bolder like flight-reg */
#plannerTable td .planner-input[data-col="aircraftId"],
#fleetTable .registration-code {
  font-weight: 600 !important;
  color: #111827 !important;
  font-size: 0.95rem !important;
}

/* Hangar Position - regular weight, not bold */
#plannerTable td .planner-input[data-col="hangarPosition"] {
  font-weight: 400 !important;
  color: #6b7280 !important;
  font-size: 0.875rem !important;
}

/* Dark mode color adjustments */
.dark-mode #plannerTable td,
.dark-mode #plannerTable tbody td,
.dark-mode #plannerTable .planner-input,
.dark-mode #plannerTable .planner-select,
.dark-mode #fleetTable td,
.dark-mode #fleetTable tbody td,
.dark-mode #fleetTable input,
.dark-mode #fleetTable select {
  color: #9ca3af !important; /* lighter gray for dark mode */
}

.dark-mode #plannerTable th,
.dark-mode #fleetTable th {
  color: #d1d5db !important; /* lighter header text for dark mode */
}

.dark-mode #plannerTable td .planner-input[data-col="aircraftId"],
.dark-mode #fleetTable .registration-code {
  color: #f3f4f6 !important; /* near white for primary columns in dark mode */
}

.dark-mode #plannerTable td .planner-input[data-col="hangarPosition"] {
  color: #9ca3af !important; /* regular gray for Hangar Position in dark mode */
}

/* Widen first column (Hangar Position) in plannerTable - prevent header wrapping */
#plannerTable th:first-child,
#plannerTable td:first-child {
  min-width: 130px !important;
  width: 130px !important;
  white-space: nowrap !important;
}

/* ==== Unified row hover (single source of truth) ==== */

/* All table rows: reserve space for hover border to prevent displacement */
#timetableTable tbody tr,
#plannerTable tbody tr,
#fleetTable tbody tr,
.fleet-table tbody tr,
.flight-table tbody tr,
#airport-flights-container .flight-table tbody tr,
#airport-flights-host .flight-table tbody tr {
  border-left: 4px solid transparent !important;
}

/* All tables: add left border on row + orange background on hover */
#timetableTable tbody tr:hover,
#plannerTable tbody tr:hover,
#fleetTable tbody tr:hover,
.fleet-table tbody tr:hover,
.flight-table tbody tr:hover,
#airport-flights-container .flight-table tbody tr:hover,
#airport-flights-host .flight-table tbody tr:hover {
  border-left-color: #FF7043 !important;
  background-color: rgba(255, 112, 67, 0.08) !important;
  cursor: pointer !important;
}

/* Ensure cells inherit background but no border */
#timetableTable tbody tr:hover td,
#plannerTable tbody tr:hover td,
#fleetTable tbody tr:hover td,
.fleet-table tbody tr:hover td,
.flight-table tbody tr:hover td,
#airport-flights-container .flight-table tbody tr:hover td,
#airport-flights-host .flight-table tbody tr:hover td {
  background-color: rgba(255, 112, 67, 0.08) !important;
  border-left: none !important;
}

/* Dark mode: brighter saturated orange background */
.dark-mode #timetableTable tbody tr:hover,
.dark-mode #plannerTable tbody tr:hover,
.dark-mode #fleetTable tbody tr:hover,
.dark-mode .fleet-table tbody tr:hover,
.dark-mode .flight-table tbody tr:hover,
.dark-mode #airport-flights-container .flight-table tbody tr:hover,
.dark-mode #airport-flights-host .flight-table tbody tr:hover {
  border-left-color: #FF8C42 !important;
  background-color: rgba(245, 158, 11, 0.15) !important;
  cursor: pointer !important;
}

.dark-mode #timetableTable tbody tr:hover td,
.dark-mode #plannerTable tbody tr:hover td,
.dark-mode #fleetTable tbody tr:hover td,
.dark-mode .fleet-table tbody tr:hover td,
.dark-mode .flight-table tbody tr:hover td,
.dark-mode #airport-flights-container .flight-table tbody tr:hover td,
.dark-mode #airport-flights-host .flight-table tbody tr:hover td {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-left: none !important;
}

/* Keep inputs/selects transparent on hover */
#plannerTable tbody tr:hover input,
#plannerTable tbody tr:hover select,
#plannerTable tbody tr:hover .planner-input,
#plannerTable tbody tr:hover .planner-select {
  background-color: transparent !important;
  background: transparent !important;
}

/* ===== Cells containing target IDs: no extra hover background beyond row-hover ===== */
/* Use inherit (not transparent) to let tr:hover background bleed through */
#plannerTable td.planner-td:has([id^="arrival-time-table-"]):hover,
#plannerTable td.planner-td:has([id^="departure-time-table-"]):hover,
#plannerTable td.planner-td:has([id^="tow-"]):hover,
#plannerTable td.planner-td:has([id^="stat-"]):hover,
#plannerTable td.planner-td:has([id^="arrival-time-table-"]):focus-within,
#plannerTable td.planner-td:has([id^="departure-time-table-"]):focus-within,
#plannerTable td.planner-td:has([id^="tow-"]):focus-within,
#plannerTable td.planner-td:has([id^="stat-"]):focus-within {
  background-color: inherit;
  background-image: none;
  box-shadow: none;
}

/* Dark mode: same behavior */
.dark-mode #plannerTable td.planner-td:has([id^="arrival-time-table-"]):hover,
.dark-mode #plannerTable td.planner-td:has([id^="departure-time-table-"]):hover,
.dark-mode #plannerTable td.planner-td:has([id^="tow-"]):hover,
.dark-mode #plannerTable td.planner-td:has([id^="stat-"]):hover,
.dark-mode #plannerTable td.planner-td:has([id^="arrival-time-table-"]):focus-within,
.dark-mode #plannerTable td.planner-td:has([id^="departure-time-table-"]):focus-within,
.dark-mode #plannerTable td.planner-td:has([id^="tow-"]):focus-within,
.dark-mode #plannerTable td.planner-td:has([id^="stat-"]):focus-within {
  background-color: inherit;
  background-image: none;
  box-shadow: none;
}