/* ═══════════════════════════════════════════════
   NETC Transport Planner — Styles
   ═══════════════════════════════════════════════ */

/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box }
body {
  background: #0c0e14;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #e4e4e7;
}
input, select, button, textarea { font-family: inherit }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: #151820 }
::-webkit-scrollbar-thumb { background: #2a2d3a; border-radius: 3px }
select option { background: #1a1d27; color: #e4e4e7 }

/* --- Animations --- */
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }

/* --- Calendar Strip --- */
.cal { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px }
.dc {
  min-width: 120px; flex-shrink: 0; border-radius: 8px;
  padding: 9px; cursor: pointer; transition: all .15s;
  border: 2px solid transparent;
}
.dc:hover { border-color: #3b82f644 }
.dc.sel  { border-color: #3b82f6 }

/* --- Dashboard Cards --- */
.dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px }
.dash-card { border-radius: 10px; padding: 12px; text-align: center }

/* --- Filter Buttons --- */
.fb { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px }
.fbtn {
  padding: 4px 10px; border-radius: 12px; font-size: 10px;
  font-weight: 600; cursor: pointer; border: 1px solid #252a36;
  background: #151820; color: #71717a; transition: all .15s;
}
.fbtn.on { background: #1d3461; color: #3b82f6; border-color: #3b82f6 }

/* --- Tabs --- */
.tabs { display: flex; gap: 0; border-bottom: 2px solid #252a36; margin-bottom: 12px }
.tab {
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; color: #71717a;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s;
}
.tab:hover { color: #e4e4e7 }
.tab.on   { color: #3b82f6; border-bottom-color: #3b82f6 }

/* --- Gantt Bar (Driver timeline) --- */
.gantt-bar {
  height: 24px; border-radius: 4px; display: flex; align-items: center;
  padding: 0 6px; font-size: 10px; font-weight: 600;
  position: absolute; overflow: hidden; white-space: nowrap;
}

/* --- Priority Dot --- */
.pri { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px }