/* ═══════════════════════════════════════════════════════════════
   GRAND HAULERS — PREMIUM POLISH LAYER v2
   ═══════════════════════════════════════════════════════════════ */

/* ─── LOGIN BUTTON brand red ─────────────────────────────────── */
#login-btn {
  background: linear-gradient(135deg, #e0282e 0%, #a82025 100%) !important;
  box-shadow: 0 4px 24px rgba(224,40,46,0.40), 0 1px 0 rgba(255,255,255,0.12) inset !important;
  color: #fff !important;
  transition: all 0.2s ease !important;
}
#login-btn:hover {
  background: linear-gradient(135deg, #f03540 0%, #c0262b 100%) !important;
  box-shadow: 0 8px 32px rgba(224,40,46,0.55), 0 1px 0 rgba(255,255,255,0.12) inset !important;
  transform: translateY(-2px) !important;
}
#login-btn:active { transform: translateY(0) !important; }

/* ─── MODAL FOOTER polish ────────────────────────────────────── */
.modal-footer {
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  background: linear-gradient(to top, rgba(0,0,0,0.2) 0%, transparent 100%) !important;
}

/* ─── DEDUCTION ROWS (Salary Modal) ─────────────────────────── */
#deductions-container > div {
  background: rgba(15, 25, 40, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 6px;
}
#deductions-container > div:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(15, 25, 40, 0.9);
}
#deductions-container .ded-type {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-1);
  min-width: 70px;
}

/* ─── KPI STRIP TILES ────────────────────────────────────────── */
.tkpi {
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.tkpi:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border-color: var(--border-strong) !important;
}

/* ─── BADGE GLOWS ────────────────────────────────────────────── */
.badge.en-route, .badge.paid { box-shadow: 0 0 10px rgba(224,40,46,0.2); }
.badge.loaded, .badge.in-transit { box-shadow: 0 0 10px rgba(0,212,255,0.15); }
.badge.pending, .badge.waiting-docs { box-shadow: 0 0 10px rgba(245,158,11,0.15); }
.badge.maintenance, .badge.overdue { box-shadow: 0 0 10px rgba(239,68,68,0.15); }

/* ─── LIVE BADGE ─────────────────────────────────────────────── */
.live-badge {
  background: rgba(224,40,46,0.12) !important;
  border-color: rgba(224,40,46,0.30) !important;
  box-shadow: 0 0 14px rgba(224,40,46,0.10);
}

/* ─── REPORT CARDS ───────────────────────────────────────────── */
.report-card {
  transition: transform 0.22s cubic-bezier(0.23,1,0.32,1), border-color 0.2s, box-shadow 0.2s;
}
.report-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--primary-border);
}

/* ─── DRIVER CARDS ───────────────────────────────────────────── */
.driver-card {
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
}
.driver-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
  border-color: var(--primary-border) !important;
}

/* ─── ICON BTN ───────────────────────────────────────────────── */
.icon-btn {
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.icon-btn:hover {
  background: var(--bg-hover) !important;
  color: var(--text-1) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* ─── FILTER INPUTS ──────────────────────────────────────────── */
.filter-select, .filter-input {
  background: rgba(15, 25, 40, 0.7);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.filter-select:focus, .filter-input:focus {
  border-color: var(--primary-border);
  background: rgba(15, 25, 40, 0.98);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-dim);
}

/* ─── HEADER SEARCH ──────────────────────────────────────────── */
.header-search {
  background: rgba(15, 25, 40, 0.8) !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.header-search:focus-within {
  border-color: var(--primary-border) !important;
  box-shadow: 0 0 0 3px var(--primary-dim) !important;
  background: rgba(15, 25, 40, 0.98) !important;
}

/* ─── USER AVATARS ───────────────────────────────────────────── */
.user-avatar {
  background: linear-gradient(135deg, var(--primary) 0%, #a82025 100%) !important;
  box-shadow: 0 2px 10px rgba(224,40,46,0.3) !important;
  color: #fff !important;
}
.header-avatar {
  background: linear-gradient(135deg, var(--primary) 0%, #a82025 100%) !important;
  border-color: var(--primary-border) !important;
  box-shadow: 0 2px 10px rgba(224,40,46,0.25) !important;
  color: #fff !important;
}

/* ─── PROGRESS BAR GLOW ──────────────────────────────────────── */
.progress-fill {
  background: linear-gradient(90deg, var(--primary), #ff5f65) !important;
  box-shadow: 0 0 8px var(--primary-glow);
}

/* ─── PANEL HEADER ───────────────────────────────────────────── */
.panel-header { background: rgba(255,255,255,0.01); }

/* ─── STAT PILLS ─────────────────────────────────────────────── */
.stat-pill {
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  transition: transform 0.18s, border-color 0.18s;
}
.stat-pill:hover { transform: translateY(-1px); border-color: var(--border-strong); }

/* ─── STATUS DOT GLOW ────────────────────────────────────────── */
.status-dot {
  background: var(--primary) !important;
  box-shadow: 0 0 8px var(--primary-glow), 0 0 16px rgba(224,40,46,0.2) !important;
}

/* ─── TEXT SELECTION ─────────────────────────────────────────── */
::selection { background: var(--primary-dim); color: var(--primary); }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* ─── ALERT ITEM slide on hover ──────────────────────────────── */
.alert-item { transition: background 0.18s, padding-left 0.2s; }
.alert-item:hover { background: rgba(255,255,255,0.025) !important; padding-left: 24px; }

/* ─── TRIP FEED HOVER ────────────────────────────────────────── */
.trip-feed-item { transition: background 0.18s, padding-left 0.2s; }
.trip-feed-item:hover { background: rgba(255,255,255,0.025) !important; padding-left: 24px; }

/* ─── SECTION ANIMATION ──────────────────────────────────────── */
.section.active { animation: fadeSlideUp 0.3s cubic-bezier(0.23, 1, 0.32, 1); }

/* ─── NET TOTAL ROW ──────────────────────────────────────────── */
#sal-display-net {
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

/* ─── DATA TABLE zebra polish ────────────────────────────────── */
.data-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.01);
}

/* ─── PIPELINE DOT GLOW ──────────────────────────────────────── */
.pipeline-dot.active {
  box-shadow: 0 0 12px var(--primary-glow), 0 0 24px rgba(224,40,46,0.2) !important;
}

/* ─── SIDEBAR BRAND gradient line ────────────────────────────── */
.sidebar::before {
  background: linear-gradient(90deg, var(--primary), rgba(224,40,46,0.4), transparent) !important;
}

/* ─── TRUCK CARD progress step ───────────────────────────────── */
.tc-step.active .tc-step-dot {
  box-shadow: 0 0 10px var(--primary-glow), 0 0 20px rgba(224,40,46,0.2) !important;
}

/* ─── OPS TAB BAR full width on mobile ───────────────────────── */
@media (max-width: 768px) {
  .tab-bar { width: 100%; }
}