/* ============================================================
   GILOAD DESIGN SYSTEM — Glassmorphism Premium
   Aligned with landing page palette
   ============================================================ */

:root {
  /* UI Kit modern palette - slate + sky blue */
  --gi-bg-deep: #0F172A;
  --gi-bg-primary: #1A2842;
  --gi-bg-secondary: #243B5F;
  --gi-bg-tertiary: #2D4670;

  /* Surfaces (cards, panels) */
  --gi-glass-bg: #1A2842;
  --gi-glass-bg-hover: #243B5F;
  --gi-glass-border: #334155;
  --gi-glass-border-hover: #3B82F6;

  /* Accents - Brand blue: SOLO acciones e identidad */
  --gi-accent: #3B82F6;
  --gi-accent-dark: #2563EB;
  --gi-accent-light: #60A5FA;
  --gi-gradient-primary: #3B82F6;
  --gi-gradient-success: #22C55E;
  --gi-gradient-warning: #F59E0B;
  --gi-gradient-danger: #EF4444;

  /* Text scale */
  --gi-text: #E6EDF7;
  --gi-text-muted: #A3B8D9;
  --gi-text-faint: #7A8EB8;

  /* Semantic - un color, un significado */
  --gi-success: #22C55E;  /* verde: cerrado / pagado / confianza alta */
  --gi-warning: #F59E0B;  /* ambar: necesita atencion humana */
  --gi-danger: #EF4444;   /* rojo: riesgo real (ej. confianza GPS baja) */
  --gi-info: #3B82F6;     /* azul: accion / identidad */

  /* Radius - MUCH more rounded (rounded-2xl/3xl) */
  --gi-radius-sm: 10px;
  --gi-radius-md: 16px;
  --gi-radius-lg: 20px;
  --gi-radius-xl: 24px;

  /* Shadows */
  --gi-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --gi-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --gi-shadow-glow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* ============================================================
   GLOBAL BODY — Deep blue background like landing
   ============================================================ */

body {
  background: var(--gi-bg-deep) !important;
  color: var(--gi-text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ============================================================
   CARDS — Glass effect everywhere
   ============================================================ */

.card,
.db-card,
.stat-card,
.fin-card,
.panel,
.box {
  background: var(--gi-glass-bg) !important;
  -webkit-
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: var(--gi-radius-lg) !important;
  color: var(--gi-text) !important;
  box-shadow: var(--gi-shadow-sm) !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.card:hover,
.db-card:hover,
.stat-card:hover {
  border-color: var(--gi-glass-border-hover) !important;
  background: var(--gi-glass-bg-hover) !important;
}

/* Stat numbers should pop */
.stat-num {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
}

.stat-label {
  color: var(--gi-text-muted) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Color accents for stat-card variations */
.stat-card.blue { border-left: 3px solid var(--gi-accent) !important; }
.stat-card.orange { border-left: 3px solid var(--gi-warning) !important; }
.stat-card.red { border-left: 3px solid var(--gi-danger) !important; }
.stat-card.green { border-left: 3px solid var(--gi-success) !important; }
.stat-card.purple { border-left: 3px solid #a78bfa !important; }

/* Card titles */
.db-card-title,
.card-title,
.card-header {
  color: var(--gi-text) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   TABLES
   ============================================================ */

.table {
  color: var(--gi-text) !important;
  background: transparent !important;
}

.table th {
  background: rgba(74, 154, 244, 0.08) !important;
  color: var(--gi-text-muted) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.table td {
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--gi-text) !important;
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ============================================================
   FORMS
   ============================================================ */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--gi-text) !important;
  border-radius: var(--gi-radius-sm) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(74, 154, 244, 0.15) !important;
  color: var(--gi-text) !important;
}

.form-label {
  color: var(--gi-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  background: var(--gi-gradient-primary) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--gi-radius-sm) !important;
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--gi-shadow-glow);
}

/* Secundario / light -> SOLIDO navy (no ghost ni claro Bootstrap) */
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-light,
.btn-default {
  background: #1E2A40 !important;
  border: 1px solid #233047 !important;
  color: #EAF0FA !important;
  border-radius: var(--gi-radius-sm) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover,
.btn-outline-light:hover, .btn-default:hover {
  background: #24324C !important;
}

.btn-success, .btn-outline-success {
  background: #22C55E !important;
  border: none !important;
  color: #fff !important;
}

.btn-danger, .btn-outline-danger {
  background: #EF4444 !important;
  border: none !important;
  color: #fff !important;
}

.btn-warning, .btn-outline-warning {
  background: #F59E0B !important;
  border: none !important;
  color: #1A1206 !important;
}

.btn-outline-primary, .btn-info, .btn-outline-info {
  background: #3B82F6 !important;
  border: none !important;
  color: #fff !important;
}
.btn-success:hover, .btn-danger:hover, .btn-warning:hover,
.btn-outline-primary:hover, .btn-info:hover { filter: brightness(1.1); }

/* ============================================================
   MODALS
   ============================================================ */

.modal-content {
  background: rgba(15, 23, 41, 0.85) !important;
  -webkit-
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: var(--gi-radius-lg) !important;
  color: var(--gi-text) !important;
}

.modal-header,
.modal-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.modal-backdrop.show {
  opacity: 0.7 !important;
}

/* ============================================================
   BADGES & ALERTS
   ============================================================ */

.badge.bg-primary { background: var(--gi-gradient-primary) !important; }
.badge.bg-success { background: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; border: 1px solid rgba(34, 197, 94, 0.3); }
.badge.bg-warning { background: rgba(251, 191, 36, 0.2) !important; color: #fcd34d !important; border: 1px solid rgba(251, 191, 36, 0.3); }
.badge.bg-danger { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge.bg-info { background: rgba(74, 154, 244, 0.2) !important; color: var(--gi-accent-light) !important; border: 1px solid rgba(74, 154, 244, 0.3); }

.alert {
  border-radius: var(--gi-radius-md) !important;
  border: 1px solid !important;
}

.alert-success { background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.3) !important; color: #86efac !important; }
.alert-warning { background: rgba(251, 191, 36, 0.1) !important; border-color: rgba(251, 191, 36, 0.3) !important; color: #fcd34d !important; }
.alert-danger { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #fca5a5 !important; }
.alert-info { background: rgba(74, 154, 244, 0.1) !important; border-color: rgba(74, 154, 244, 0.3) !important; color: var(--gi-accent-light) !important; }

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--gi-accent-light);
  text-decoration: none;
}

a:hover {
  color: var(--gi-accent);
}

/* ============================================================
   HEADINGS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  color: var(--gi-text) !important;
}

.text-muted, small, .small {
  color: var(--gi-text-muted) !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */

.dropdown-menu {
  background: rgba(15, 23, 41, 0.95) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: var(--gi-radius-md) !important;
}

.dropdown-item {
  color: var(--gi-text) !important;
}

.dropdown-item:hover {
  background: rgba(74, 154, 244, 0.15) !important;
  color: var(--gi-accent-light) !important;
}

/* ============================================================
   SIDEBAR (if uses .sidebar)
   ============================================================ */

.sidebar {
  background: rgba(10, 15, 30, 0.7) !important;
  border-right: 1px solid var(--gi-glass-border) !important;
}

/* ============================================================
   TOPBAR (if uses .topbar)
   ============================================================ */

.topbar {
  background: rgba(15, 23, 41, 0.7) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

/* ============================================================
   PAGE BACKGROUND for legacy pages
   ============================================================ */

.bg-light, .bg-white {
  background: var(--gi-glass-bg) !important;
}

/* Cards inside cards should be more subtle */
.card .card {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(74, 154, 244, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 154, 244, 0.5);
}

/* ============================================================
   EXEMPTIONS — pages that should keep their own design
   ============================================================ */

/* Don't apply glass to landing pages */
body.landing-page,
body.landing-page * {
  background: initial;
}

/* Don't break login/auth pages styling */
body.auth-page .card {
  background: rgba(15, 23, 41, 0.85) !important;
}

/* ============================================================
   PATCH: Stat-cards con glassmorphism + borde de color
   Override de los gradientes claros del dashboard
   ============================================================ */

.stat-card.blue,
.stat-card.green,
.stat-card.orange,
.stat-card.red,
.stat-card.purple,
.stat-card.teal {
  background: var(--gi-glass-bg) !important;
  background-image: none !important;
  -webkit-
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  position: relative;
  overflow: hidden;
}

/* Color accent en el borde izquierdo */
.stat-card.blue { border-left: 3px solid var(--gi-accent) !important; }
.stat-card.green { border-left: 3px solid var(--gi-success) !important; }
.stat-card.orange { border-left: 3px solid var(--gi-warning) !important; }
.stat-card.red { border-left: 3px solid var(--gi-danger) !important; }
.stat-card.purple { border-left: 3px solid #a78bfa !important; }
.stat-card.teal { border-left: 3px solid #2dd4bf !important; }

/* Glow sutil en el borde izquierdo */
.stat-card.blue::before,
.stat-card.green::before,
.stat-card.orange::before,
.stat-card.red::before,
.stat-card.purple::before,
.stat-card.teal::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50px;
  pointer-events: none;
  opacity: 0.15;
}

.stat-card.blue::before { background: radial-gradient(circle at left, var(--gi-accent), transparent 70%); }
.stat-card.green::before { background: radial-gradient(circle at left, var(--gi-success), transparent 70%); }
.stat-card.orange::before { background: radial-gradient(circle at left, var(--gi-warning), transparent 70%); }
.stat-card.red::before { background: radial-gradient(circle at left, var(--gi-danger), transparent 70%); }
.stat-card.purple::before { background: radial-gradient(circle at left, #a78bfa, transparent 70%); }
.stat-card.teal::before { background: radial-gradient(circle at left, #2dd4bf, transparent 70%); }

/* Stat-num en color del acento (no neutral) */
.stat-card.blue .stat-num { color: var(--gi-accent-light) !important; }
.stat-card.green .stat-num { color: #86efac !important; }
.stat-card.orange .stat-num { color: #fcd34d !important; }
.stat-card.red .stat-num { color: #fca5a5 !important; }
.stat-card.purple .stat-num { color: #c4b5fd !important; }
.stat-card.teal .stat-num { color: #5eead4 !important; }

/* ============================================================
   PATCH: Headers y títulos visibles en dark
   ============================================================ */

.page-header-title,
.page-title,
.dashboard-title {
  color: var(--gi-text) !important;
  font-weight: 700;
}

/* El header del block_page_title */
.page-header,
.topbar,
.main-header {
  color: var(--gi-text) !important;
}

.page-header h1,
.page-header h2,
.page-header .h1,
.page-header .h2 {
  color: var(--gi-text) !important;
}

/* ============================================================
   PATCH: alert-item con colores claros
   ============================================================ */

.alert-item.warning {
  background: rgba(251, 191, 36, 0.12) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: #fcd34d !important;
}

.alert-item.danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

.alert-item.info {
  background: rgba(74, 154, 244, 0.12) !important;
  border: 1px solid rgba(74, 154, 244, 0.3) !important;
  color: var(--gi-accent-light) !important;
}

/* ============================================================
   PATCH: Quick Action icons (qa-icon)
   ============================================================ */

.qa-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--gi-glass-border);
}

/* ============================================================
   PATCH: op-pill cards (Active/Pending/Delayed/Delivered/This Month)
   These are the REAL classes used in the dashboard
   ============================================================ */

.op-pill,
.op-pill.blue,
.op-pill.green,
.op-pill.orange,
.op-pill.red,
.op-pill.grey,
.op-pill.purple {
  background: var(--gi-glass-bg) !important;
  background-image: none !important;
  -webkit-
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.op-pill:hover {
  border-color: var(--gi-glass-border-hover) !important;
  background: var(--gi-glass-bg-hover) !important;
}

/* Color accents en el borde izquierdo */
.op-pill.blue { border-left: 3px solid var(--gi-accent) !important; }
.op-pill.green { border-left: 3px solid var(--gi-success) !important; }
.op-pill.orange { border-left: 3px solid var(--gi-warning) !important; }
.op-pill.red { border-left: 3px solid var(--gi-danger) !important; }
.op-pill.grey { border-left: 3px solid #94a3b8 !important; }
.op-pill.purple { border-left: 3px solid #a78bfa !important; }

/* Numeros grandes en colores brillantes */
.op-pill.blue { color: var(--gi-accent-light) !important; }
.op-pill.green { color: #86efac !important; }
.op-pill.orange { color: #fcd34d !important; }
.op-pill.red { color: #fca5a5 !important; }
.op-pill.grey { color: #cbd5e1 !important; }
.op-pill.purple { color: #c4b5fd !important; }

/* Si tiene strong/numero dentro, tambien colorearlo */
.op-pill strong,
.op-pill .pill-num,
.op-pill .num {
  color: inherit !important;
  font-weight: 800;
}

/* ============================================================
   PATCH: Dashboard - all remaining white backgrounds to glass
   ============================================================ */

/* Card contenedores blancos */
.db-card,
.dash-layout > div > .db-card {
  background: var(--gi-glass-bg) !important;
  -webkit-
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

.db-card-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.db-card-title {
  color: var(--gi-text-muted) !important;
}

/* Load tabs (Active/Pending/Delayed/Today) */
.load-tabs {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.load-tab {
  color: var(--gi-text-muted) !important;
  background: transparent !important;
}

.load-tab:hover {
  color: var(--gi-text) !important;
}

.load-tab.active {
  background: rgba(74, 154, 244, 0.1) !important;
  color: var(--gi-accent-light) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-bottom-color: var(--gi-bg-deep) !important;
}

/* Load rows */
.load-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.load-num {
  color: var(--gi-accent-light) !important;
}

.load-route {
  color: var(--gi-text-muted) !important;
}

.load-rate {
  color: #86efac !important;
}

.load-date {
  color: var(--gi-text-faint) !important;
}

/* Status badges */
.status-badge.status-active {
  background: rgba(74, 154, 244, 0.15) !important;
  color: var(--gi-accent-light) !important;
}

.status-badge.status-pending {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fcd34d !important;
}

.status-badge.status-delayed {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

.status-badge.status-done {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
}

/* Driver status rows */
.driver-status-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.driver-name-sm {
  color: var(--gi-text) !important;
}

/* Quick action buttons */
.qa-btn {
  background: var(--gi-glass-bg) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

.qa-btn:hover {
  background: var(--gi-glass-bg-hover) !important;
  border-color: var(--gi-glass-border-hover) !important;
}

.qa-btn-label {
  color: var(--gi-text) !important;
}

.qa-btn-icon {
  background: rgba(74, 154, 244, 0.15) !important;
}

/* Alert rows */
.alert-row.red {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.alert-row.orange {
  background: rgba(251, 191, 36, 0.1) !important;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.alert-text {
  color: var(--gi-text) !important;
}

.alert-badge.badge-red {
  background: var(--gi-danger) !important;
  color: #fff !important;
}

.alert-badge.badge-orange {
  background: var(--gi-warning) !important;
  color: #fff !important;
}

/* Feed rows (Driver Activity) */
.feed-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.feed-text {
  color: var(--gi-text) !important;
}

.feed-time {
  color: var(--gi-text-faint) !important;
}

/* Page header */
.page-header-card {
  background: var(--gi-glass-bg) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

.page-header-title {
  color: var(--gi-text) !important;
}

.page-header-sub {
  color: var(--gi-text-muted) !important;
}

/* ============================================================
   PATCH FINAL v5: Op-pills color del numero + label
   ============================================================ */

/* El numero grande hereda el color de la pill */
.op-pill.blue .op-num { color: var(--gi-accent-light) !important; }
.op-pill.green .op-num { color: #86efac !important; }
.op-pill.orange .op-num { color: #fcd34d !important; }
.op-pill.red .op-num { color: #fca5a5 !important; }
.op-pill.grey .op-num { color: #cbd5e1 !important; }
.op-pill.purple .op-num { color: #c4b5fd !important; }

/* El label tambien debe ser legible */
.op-pill .op-label {
  color: var(--gi-text-muted) !important;
  opacity: 0.9 !important;
}

/* Empty states mas legibles (No active loads / No driver activity) */
.db-card-body div[style*="color:#adb5bd"],
.db-card-body div[style*="color: #adb5bd"] {
  color: var(--gi-text-muted) !important;
}

/* Tab activo con underline azul */
.load-tab.active {
  background: rgba(74, 154, 244, 0.15) !important;
  color: var(--gi-accent-light) !important;
  border: 1px solid var(--gi-glass-border-hover) !important;
  border-bottom: 2px solid var(--gi-accent) !important;
}

.load-tab:not(.active) {
  color: var(--gi-text-muted) !important;
}

.load-tab:not(.active):hover {
  color: var(--gi-text) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Pagina header title - mas fuerte */
.page-header-title {
  color: var(--gi-text) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
}

/* Page title del block (Dashboard arriba) */
.topbar .page-title,
.topbar h1,
.main-header h1,
.page-header h1 {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
}

/* ============================================================
   MAVEN BI CARD STYLE — flat, sin bordes, esquinas mínimas
   ============================================================ */

/* Cards principales: flat sólido, sin border, esquinas pequeñas */
.card,
.db-card,
.stat-card,
.fin-card,
.panel,
.box,
.page-header-card {
  background: #22324d !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.card:hover,
.db-card:hover,
.stat-card:hover {
  background: #2a3a55 !important;
  border: none !important;
}

/* Op-pills: SIN border-left de color (Maven style),
   el color va en el LABEL */
.op-pill,
.op-pill.blue,
.op-pill.green,
.op-pill.orange,
.op-pill.red,
.op-pill.grey,
.op-pill.purple {
  background: #22324d !important;
  border: none !important;
  border-left: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 20px 16px !important;
}

.op-pill:hover {
  background: #2a3a55 !important;
  border: none !important;
  transform: translateY(-1px);
}

/* El NÚMERO grande en blanco puro (estilo Maven) */
.op-pill.blue .op-num,
.op-pill.green .op-num,
.op-pill.orange .op-num,
.op-pill.red .op-num,
.op-pill.grey .op-num,
.op-pill.purple .op-num {
  color: #ffffff !important;
  font-weight: 300 !important;
  font-size: 42px !important;
}

/* El LABEL en color de categoría (uppercase, letter-spacing) */
.op-pill .op-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  margin-top: 8px !important;
}

.op-pill.blue .op-label { color: var(--gi-accent) !important; }
.op-pill.orange .op-label { color: var(--gi-warning) !important; }
.op-pill.red .op-label { color: var(--gi-danger) !important; }
.op-pill.green .op-label { color: var(--gi-success) !important; }
.op-pill.grey .op-label { color: var(--gi-text-muted) !important; }

/* Card headers Maven style */
.db-card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 18px 20px 12px !important;
}

.db-card-title {
  color: var(--gi-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

/* Card body */
.db-card-body {
  padding: 12px 20px 20px !important;
}

/* Botones quick action - Maven flat */
.qa-btn {
  background: #1a2842 !important;
  border: none !important;
  border-radius: 4px !important;
}

.qa-btn:hover {
  background: #2a3a55 !important;
  border: none !important;
}

/* Modal contenido también flat */
.modal-content {
  background: #22324d !important;
  border: none !important;
  border-radius: 6px !important;
}

/* Inputs y forms con bg ligeramente diferente */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
  background: #1a2842 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background: #1a2842 !important;
  border-color: var(--gi-accent) !important;
}

/* Tabs Maven style - underline en lugar de background */
.load-tabs {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 20px 0 !important;
}

.load-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  margin-bottom: -1px !important;
}

.load-tab.active {
  background: transparent !important;
  color: var(--gi-warning) !important;
  border: none !important;
  border-bottom: 2px solid var(--gi-warning) !important;
}

/* Alert rows flat */
.alert-row.red {
  background: rgba(229, 64, 64, 0.12) !important;
  border: none !important;
  border-left: 3px solid var(--gi-danger) !important;
  border-radius: 0 4px 4px 0 !important;
}

.alert-row.orange {
  background: rgba(245, 208, 74, 0.12) !important;
  border: none !important;
  border-left: 3px solid var(--gi-warning) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* ============================================================
   LOADS VIEW — Maven BI flat style
   Override de loads_view.html sin tocar el template
   ============================================================ */

/* Card principal de cada load */
.load-card {
  background: #22324d !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
}

.load-card:hover {
  background: #2a3a55 !important;
  box-shadow: none !important;
}

.load-card-header {
  background: transparent !important;
}

.load-card-header:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Numero de Load (azul Maven) */
.load-card-num,
.load-card-num a,
.load-card-num span.searchable {
  color: var(--gi-accent-light) !important;
}

/* Driver name */
.load-card-driver {
  color: var(--gi-text-muted) !important;
}

/* Avatar del driver mantiene gradient azul (esta bien) */

/* Meta labels (PICK UP / DELIVERY / RATE) */
.meta-label,
.lc-header-label,
.lc-date-label,
.lc-chip-label {
  color: var(--gi-text-faint) !important;
}

.meta-value,
.lc-header-val,
.lc-date-val,
.lc-chip-val,
.stop-city {
  color: var(--gi-text) !important;
}

.meta-value.green,
.lc-header-val.green {
  color: var(--gi-success) !important;
}

.lc-header-val.orange {
  color: var(--gi-warning) !important;
}

/* Chevron */
.load-card-chevron {
  color: var(--gi-text-faint) !important;
}

/* Body expandido */
.load-card-body {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

/* Stop blocks (pickup / delivery / both) */
.stop-block.pickup {
  background: rgba(74, 154, 244, 0.08) !important;
  border-left: 3px solid var(--gi-accent) !important;
}

.stop-block.delivery {
  background: rgba(34, 197, 94, 0.08) !important;
  border-left: 3px solid var(--gi-success) !important;
}

.stop-block.both {
  background: rgba(245, 208, 74, 0.08) !important;
  border-left: 3px solid var(--gi-warning) !important;
}

.stop-block.pickup .stop-type-label { color: var(--gi-accent-light) !important; }
.stop-block.delivery .stop-type-label { color: #86efac !important; }
.stop-block.both .stop-type-label { color: #fcd34d !important; }

.stop-addr,
.stop-meta {
  color: var(--gi-text-muted) !important;
}

.stop-pu {
  color: var(--gi-accent-light) !important;
}

.stop-notes {
  color: var(--gi-warning) !important;
}

/* Broker card */
.broker-card {
  background: rgba(167, 139, 250, 0.1) !important;
  border: 1px solid rgba(167, 139, 250, 0.2) !important;
}

/* Dispatch note box */
.dispatch-note-box {
  background: rgba(245, 208, 74, 0.1) !important;
  border-left: 3px solid var(--gi-warning) !important;
  color: var(--gi-text) !important;
}

/* Action bar */
.load-action-bar {
  background: rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Notes button */
.btn-notes-btn {
  background: rgba(245, 208, 74, 0.12) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 208, 74, 0.25) !important;
}

/* Empty state */
.empty-state {
  background: #22324d !important;
  box-shadow: none !important;
  color: var(--gi-text-muted) !important;
}

/* Status menu dropdown */
#status-menu-* {
  background: #22324d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Searchable spans con color hardcoded */
.searchable[style*="color:#1a1a2e"],
.searchable[style*="color: #1a1a2e"] {
  color: var(--gi-text) !important;
}

/* Status dot paid/unpaid mantienen sus colores semanticos */

/* Inline styles agresivos del template - overrides genericos */
[style*="background:#fff3e0"] { background: rgba(245, 208, 74, 0.15) !important; color: var(--gi-warning) !important; }
[style*="background:#e8f5e9"] { background: rgba(34, 197, 94, 0.15) !important; color: var(--gi-success) !important; }
[style*="background:#e3f2fd"] { background: rgba(74, 154, 244, 0.15) !important; color: var(--gi-accent-light) !important; }
[style*="background:#ffebee"] { background: rgba(229, 64, 64, 0.15) !important; color: var(--gi-danger) !important; }
[style*="background:#fffbf0"] { background: rgba(245, 208, 74, 0.1) !important; }
[style*="background:#f8fbff"] { background: rgba(74, 154, 244, 0.08) !important; }
[style*="background:#f8fdf8"] { background: rgba(34, 197, 94, 0.08) !important; }
[style*="background:#fffbf5"] { background: rgba(245, 208, 74, 0.08) !important; }
[style*="background:#faf5ff"] { background: rgba(167, 139, 250, 0.08) !important; }
[style*="background:#fff8e1"] { background: rgba(245, 208, 74, 0.1) !important; }

/* ============================================================
   LOADS - botones de accion del load detail
   (Details / Edit / Add Leg / Notes / Delete)
   ============================================================ */

/* Botones de la load-action-bar */
.load-action-bar a,
.load-action-bar button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--gi-text) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

.load-action-bar a:hover,
.load-action-bar button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px);
}

/* Boton Details (ojo) - azul Maven sutil */
.load-action-bar a[href*="/loads/"][href*="/detail/"],
.load-action-bar a:has(.fa-eye),
.btn-details-btn {
  background: rgba(74, 154, 244, 0.12) !important;
  border: 1px solid rgba(74, 154, 244, 0.25) !important;
  color: var(--gi-accent-light) !important;
}

/* Boton Edit - gris neutro */
.load-action-bar a[href*="/edit/"],
.btn-edit-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--gi-text) !important;
}

/* Boton Add Leg - azul Maven */
.btn-add-leg-btn,
.load-action-bar a:has(.fa-plus) {
  background: #3B82F6 !important;
  border: 0 !important;
  color: #fff !important;
}

/* Notes button ya se ve bien (amarillo) - mantener */

/* Boton trash/delete - hacer mas chico */
.load-action-bar button[onclick*="delete"],
.load-action-bar a[onclick*="delete"],
.btn-delete-load {
  background: rgba(229, 64, 64, 0.12) !important;
  border: 1px solid rgba(229, 64, 64, 0.25) !important;
  color: var(--gi-danger) !important;
  padding: 8px 12px !important;
}

/* Pildora "Owner Op" - mas sutil */
[style*="background:#e3f2fd"][style*="Owner Op"],
.payment-type-badge,
.driver-type-badge {
  background: rgba(74, 154, 244, 0.12) !important;
  color: var(--gi-accent-light) !important;
  border: 1px solid rgba(74, 154, 244, 0.2) !important;
}

/* Icono delivery verde mas suave */
.stop-block.delivery .stop-num,
.stop-num[style*="background:#43A047"] {
  background: var(--gi-success) !important;
  opacity: 0.85 !important;
}

/* Status pill "Delivered" dropdown - ya se ve bien pero asegurar contraste */
.status-pill,
[class*="status-delivered"],
.load-status-badge.delivered {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

/* ============================================================
   LOAD DETAIL - Driver Note + Footer (Dispatch/Factory/Created by)
   ============================================================ */

/* Driver Note box - el fondo azul claro/blanco */
.driver-note,
.driver-note-box,
[class*="driver-note"],
.note-card {
  background: rgba(74, 154, 244, 0.08) !important;
  border: 1px solid rgba(74, 154, 244, 0.2) !important;
  border-left: 3px solid var(--gi-accent) !important;
  border-radius: 0 6px 6px 0 !important;
  color: var(--gi-text) !important;
}

.driver-note *,
.driver-note-box *,
[class*="driver-note"] * {
  color: var(--gi-text) !important;
}

/* Title "DRIVER NOTE" */
.driver-note-title,
[class*="driver-note"] [class*="title"],
[class*="driver-note"] > div:first-child {
  color: var(--gi-accent-light) !important;
}

/* Boton "View all" dentro del driver note */
.driver-note a,
.driver-note button,
[class*="driver-note"] a,
[class*="driver-note"] button {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--gi-text) !important;
  border-radius: 4px !important;
}

/* Override universal de fondos blancos/azul-claro en el load detail */
.load-card-body [style*="background:#f8fbff"],
.load-card-body [style*="background: #f8fbff"],
.load-card-body [style*="background:#eff4ff"],
.load-card-body [style*="background:#fff"],
.load-card-body [style*="background: #fff"] {
  background: rgba(74, 154, 244, 0.06) !important;
  color: var(--gi-text) !important;
}

/* Footer Dispatch/Factory/Created by - banda blanca abajo */
.load-meta-footer,
.load-card-footer,
.dispatch-footer,
[class*="meta-info-row"],
[class*="created-by"] {
  background: transparent !important;
  color: var(--gi-text-muted) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.load-meta-footer *,
.load-card-footer *,
.dispatch-footer * {
  color: var(--gi-text-muted) !important;
}

/* Valores destacados como "2.50%" o "Gaby0326" en colores Maven */
.load-meta-footer strong,
.load-meta-footer b,
[class*="meta-info-row"] strong,
[class*="meta-info-row"] b {
  color: var(--gi-accent-light) !important;
}

/* Inline styles agresivos con background blanco/crema en el detail */
.load-card-body [style*="background:#fafafa"],
.load-card-body [style*="background: #fafafa"],
.load-card-body [style*="background:#f5f5f5"],
.load-card-body [style*="background: #f5f5f5"],
.load-card-body [style*="background:#f8f9fa"],
.load-card-body [style*="background: #f8f9fa"] {
  background: transparent !important;
  color: var(--gi-text-muted) !important;
}

/* Cualquier texto oscuro hardcoded en el load detail */
.load-card-body [style*="color:#000"],
.load-card-body [style*="color: #000"],
.load-card-body [style*="color:#1a1a2e"],
.load-card-body [style*="color: #1a1a2e"],
.load-card-body [style*="color:#344767"],
.load-card-body [style*="color: #344767"] {
  color: var(--gi-text) !important;
}

/* ============================================================
   HACK NUCLEAR — banda blanca arriba de POD/BOL/RC
   Cualquier wrapper con fondo blanco/crema dentro del load body
   ============================================================ */

/* Override aggressive: cualquier div con background blanco dentro load-card-body */
.load-card-body > div[style*="background:#fff"],
.load-card-body > div[style*="background: #fff"],
.load-card-body > div[style*="background:#fafafa"],
.load-card-body > div[style*="background: #fafafa"],
.load-card-body > div[style*="background:white"],
.load-card-body > div[style*="background: white"] {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.load-card-body > div[style*="background:#fff"] *,
.load-card-body > div[style*="background:#fafafa"] *,
.load-card-body > div[style*="background:white"] * {
  color: var(--gi-text-muted) !important;
}

.load-card-body > div[style*="background:#fff"] strong,
.load-card-body > div[style*="background:#fff"] b,
.load-card-body > div[style*="background:#fafafa"] strong,
.load-card-body > div[style*="background:white"] strong {
  color: var(--gi-accent-light) !important;
}

/* ============================================================
   .lc-footer — banda con Dispatch/Factory/Created by/Fecha
   ============================================================ */

.lc-footer {
  background: transparent !important;
  color: var(--gi-text-muted) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.lc-footer span,
.lc-footer i {
  color: var(--gi-text-muted) !important;
}

/* Valores destacados (2.50%, nombre del creador) en azul Maven */
.lc-footer strong {
  color: var(--gi-accent-light) !important;
}

/* El dot separador "·" mas faint */
.lc-footer .dot {
  color: var(--gi-text-faint) !important;
  opacity: 0.5;
}

/* Override del inline color:#1A73E8 hardcoded en los <strong> */
.lc-footer strong[style*="color:#1A73E8"],
.lc-footer strong[style*="color: #1A73E8"] {
  color: var(--gi-accent-light) !important;
}

/* ============================================================
   Boton Notes - amarillo claro Maven
   ============================================================ */

.btn-notes-btn,
.load-action-bar a:has(.fa-sticky-note),
.load-action-bar button:has(.fa-sticky-note),
.load-action-bar a[href*="notes"],
.load-action-bar button[onclick*="notes"],
.load-action-bar button[onclick*="Notes"] {
  background: rgba(245, 208, 74, 0.12) !important;
  border: 1px solid rgba(245, 208, 74, 0.3) !important;
  color: var(--gi-warning) !important;
}

.btn-notes-btn:hover,
.load-action-bar a:has(.fa-sticky-note):hover,
.load-action-bar button:has(.fa-sticky-note):hover {
  background: rgba(245, 208, 74, 0.2) !important;
  border-color: rgba(245, 208, 74, 0.45) !important;
  color: #fcd34d !important;
}

/* ============================================================
   DRIVER NOTE — caja completa en amarillo claro Maven
   (override del azul anterior)
   ============================================================ */

.driver-note,
.driver-note-box,
[class*="driver-note"],
.note-card {
  background: rgba(245, 208, 74, 0.08) !important;
  border: 1px solid rgba(245, 208, 74, 0.25) !important;
  border-left: 3px solid var(--gi-warning) !important;
  color: var(--gi-text) !important;
}

/* Titulo "DRIVER NOTE" en amarillo */
.driver-note-title,
[class*="driver-note"] [class*="title"],
[class*="driver-note"] > div:first-child,
.driver-note > div:first-child {
  color: var(--gi-warning) !important;
}

/* Icono persona en el titulo tambien amarillo */
.driver-note i,
[class*="driver-note"] i {
  color: var(--gi-warning) !important;
}

/* Texto del cuerpo en blanco legible */
.driver-note p,
.driver-note span,
[class*="driver-note"] p,
[class*="driver-note"] span {
  color: var(--gi-text) !important;
}

/* Boton "View all" coherente con el amarillo */
.driver-note a,
.driver-note button,
[class*="driver-note"] a,
[class*="driver-note"] button {
  background: rgba(245, 208, 74, 0.12) !important;
  border: 1px solid rgba(245, 208, 74, 0.3) !important;
  color: var(--gi-warning) !important;
  border-radius: 4px !important;
}

.driver-note a:hover,
.driver-note button:hover,
[class*="driver-note"] a:hover,
[class*="driver-note"] button:hover {
  background: rgba(245, 208, 74, 0.2) !important;
  color: #fcd34d !important;
}

/* ============================================================
   UI KIT MODERN - rounded-2xl/3xl + solid borders
   ============================================================ */

/* Cards: bordes visibles + esquinas muy redondeadas */
.card,
.db-card,
.stat-card,
.fin-card,
.panel,
.box,
.page-header-card,
.load-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: var(--gi-radius-xl) !important;
  box-shadow: none !important;
}

.card:hover,
.db-card:hover,
.stat-card:hover,
.load-card:hover {
  border-color: var(--gi-glass-border) !important;
  background: var(--gi-bg-primary) !important;
}

/* Op-pills: rounded-3xl, sin borde lateral de color */
.op-pill,
.op-pill.blue,
.op-pill.green,
.op-pill.orange,
.op-pill.red,
.op-pill.grey,
.op-pill.purple {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-left: 1px solid var(--gi-glass-border) !important;
  border-radius: var(--gi-radius-xl) !important;
  padding: 24px 20px !important;
}

.op-pill:hover {
  background: var(--gi-bg-secondary) !important;
  border-color: var(--gi-accent) !important;
}

/* Numeros mas robustos (font-weight 600 en lugar de 300) */
.op-pill .op-num,
.op-pill.blue .op-num,
.op-pill.green .op-num,
.op-pill.orange .op-num,
.op-pill.red .op-num,
.op-pill.grey .op-num {
  color: var(--gi-text) !important;
  font-weight: 600 !important;
  font-size: 40px !important;
}

/* Labels en color de categoria (mantener) */
.op-pill .op-label {
  font-size: 11px !important;
  color: var(--gi-text-faint) !important;
  letter-spacing: 1.2px !important;
}

.op-pill.blue .op-label { color: var(--gi-accent) !important; }
.op-pill.orange .op-label { color: var(--gi-warning) !important; }
.op-pill.red .op-label { color: var(--gi-danger) !important; }
.op-pill.green .op-label { color: var(--gi-success) !important; }
.op-pill.grey .op-label { color: var(--gi-text-faint) !important; }

/* Botones primarios sky blue */
.btn-primary {
  background: var(--gi-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--gi-radius-md) !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
}

.btn-primary:hover {
  background: var(--gi-accent-light) !important;
  transform: none !important;
}

/* Sidebar items - active con bg #243B5F */
.sidebar-link.active,
.sidebar a.active,
.nav-item.active {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text) !important;
  border-radius: var(--gi-radius-md) !important;
}

.sidebar-link:hover,
.sidebar a:hover,
.nav-item:hover {
  background: rgba(36, 59, 95, 0.7) !important;
  border-radius: var(--gi-radius-md) !important;
}

/* Quick action buttons - mas redondeados */
.qa-btn {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: var(--gi-radius-md) !important;
}

.qa-btn:hover {
  background: var(--gi-bg-secondary) !important;
  border-color: var(--gi-accent) !important;
}

/* Inputs - rounded */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--gi-bg-deep) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: var(--gi-radius-md) !important;
  color: var(--gi-text) !important;
  padding: 10px 14px !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

/* Tablas */
.table {
  background: transparent !important;
}

.table th {
  background: transparent !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text-faint) !important;
  font-weight: 500 !important;
}

.table td {
  border-bottom: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

.table tbody tr:hover {
  background: rgba(36, 59, 95, 0.5) !important;
}

/* Status badges - colores vivos UI Kit */
.status-active,
.status-badge.status-active {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
}

.status-done,
.status-badge.status-done {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
}

.status-pending,
.status-badge.status-pending {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
}

.status-delayed,
.status-badge.status-delayed {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--gi-danger) !important;
}

/* ============================================================
   DRIVER ACTIVITY - subir contraste del nombre del driver
   El template tiene color:#334155 hardcoded (gris muy oscuro)
   ============================================================ */

/* La linea con "Load #XXX · Driver Name" */
#activity-feed div[style*="color:#334155"],
#activity-feed div[style*="color: #334155"] {
  color: var(--gi-text-muted) !important;
}

/* El link "Load #XXX" dentro mantiene azul Maven */
#activity-feed div[style*="color:#334155"] a,
#activity-feed div[style*="color: #334155"] a {
  color: var(--gi-accent) !important;
  font-weight: 600 !important;
}

/* Fallback mas amplio - cualquier color:#334155 que sea texto */
[style*="color:#334155"]:not(a),
[style*="color: #334155"]:not(a) {
  color: var(--gi-text-muted) !important;
}

/* Similar para timestamp con color:#adb5bd (gris claro pero bajo contraste) */
[style*="color:#adb5bd"],
[style*="color: #adb5bd"] {
  color: var(--gi-text-faint) !important;
}

/* ============================================================
   FIX GLOBAL - textos hardcoded con colores muy tenues
   Material Dashboard usaba: #67748e, #344767, #1a1a2e, #adb5bd
   Sobre fondo Maven se vuelven invisibles
   ============================================================ */

/* Textos oscuros hardcoded → texto blanco principal */
[style*="color:#1a1a2e"],
[style*="color: #1a1a2e"],
[style*="color:#344767"],
[style*="color: #344767"] {
  color: var(--gi-text) !important;
}

/* Textos medios → muted */
[style*="color:#67748e"],
[style*="color: #67748e"],
[style*="color:#52596b"],
[style*="color: #52596b"] {
  color: var(--gi-text-muted) !important;
}

/* Textos muy tenues → faint pero legible */
[style*="color:#adb5bd"],
[style*="color: #adb5bd"],
[style*="color:#cbd5e1"],
[style*="color: #cbd5e1"] {
  color: var(--gi-text-faint) !important;
}

/* Headers de pagina con clases conocidas */
.page-header-title,
.page-title,
.dashboard-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--gi-text) !important;
}

.page-header-sub,
.subtitle,
.lead {
  color: var(--gi-text-muted) !important;
}

/* Labels de form (uppercase typing) - asegurar legibilidad */
.form-label,
label.form-label,
label[class*="form"],
.form-group label {
  color: var(--gi-text-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
}

/* Mensajes informativos sobre RC con icono */
[class*="info-message"],
[class*="alert-info"],
.alert.alert-info {
  background: rgba(77, 163, 255, 0.1) !important;
  border: 1px solid rgba(77, 163, 255, 0.25) !important;
  color: var(--gi-text) !important;
}

/* Footer global */
footer,
.footer,
.app-footer,
[class*="copyright"] {
  color: var(--gi-text-faint) !important;
}

footer *,
.footer *,
.app-footer * {
  color: inherit !important;
}

/* Texto blanco hardcoded - mantener pero con la variable */
[style*="color:#fff"]:not(.btn):not(.badge):not(button),
[style*="color: #fff"]:not(.btn):not(.badge):not(button),
[style*="color:white"]:not(.btn):not(.badge):not(button) {
  color: var(--gi-text) !important;
}

/* ============================================================
   KPI GRID - dashboard cards with icons
   ============================================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  text-decoration: none !important;
  display: block !important;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.kpi-card:hover {
  border-color: var(--gi-glass-border-hover) !important;
  transform: translateY(-2px);
}

.kpi-card > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px;
}

.kpi-info {
  flex: 1;
  min-width: 0;
}

.kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.kpi-num {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 8px;
  color: var(--gi-text) !important;
}

.kpi-sub {
  font-size: 10px;
  color: var(--gi-text-faint) !important;
  margin-top: 4px;
}

.kpi-icon {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.kpi-active .kpi-label { color: var(--gi-accent) !important; }
.kpi-active .kpi-icon { background: rgba(77, 163, 255, 0.15) !important; }

.kpi-pending .kpi-label { color: var(--gi-warning) !important; }
.kpi-pending .kpi-icon { background: rgba(245, 158, 11, 0.15) !important; }

.kpi-delayed .kpi-label { color: var(--gi-danger) !important; }
.kpi-delayed .kpi-icon { background: rgba(239, 68, 68, 0.15) !important; }

.kpi-delivered .kpi-label { color: var(--gi-success) !important; }
.kpi-delivered .kpi-icon { background: rgba(16, 185, 129, 0.15) !important; }

.kpi-revenue .kpi-label { color: #A78BFA !important; }
.kpi-revenue .kpi-icon { background: rgba(167, 139, 250, 0.15) !important; }

.kpi-revenue .kpi-num {
  font-size: 26px;
}

@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-num { font-size: 24px; }
  .kpi-revenue .kpi-num { font-size: 20px; }
}

/* ============================================================
   TRENDS CARD - bar chart loads by month
   ============================================================ */

.trends-card {
  background: var(--gi-bg-primary);
  border: 1px solid var(--gi-glass-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.trends-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.trends-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gi-text-muted);
}

.trends-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trends-meta-current {
  font-size: 12px;
  font-weight: 600;
  color: var(--gi-accent);
}

.trends-meta-revenue {
  font-size: 12px;
  font-weight: 600;
  color: var(--gi-success);
  padding-left: 12px;
  border-left: 1px solid var(--gi-glass-border);
}

.trends-chart-wrap {
  position: relative;
  height: 140px;
}

@media (max-width: 700px) {
  .trends-chart-wrap { height: 120px; }
}

/* ============================================================
   DRIVER STATUS - donut chart + legend
   ============================================================ */

.driver-donut-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 8px auto 16px;
}

.driver-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.driver-donut-total {
  font-size: 22px;
  font-weight: 600;
  color: var(--gi-text);
  line-height: 1;
}

.driver-donut-label {
  font-size: 10px;
  color: var(--gi-text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

.driver-legend {
  border-top: 1px solid var(--gi-glass-border);
  padding-top: 10px;
  margin-top: 4px;
  margin-bottom: 14px;
}

.driver-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.driver-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.driver-legend-name {
  flex: 1;
  font-size: 12px;
  color: var(--gi-text-muted);
}

.driver-legend-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--gi-text);
}

.driver-list-section {
  padding-top: 4px;
}

/* ============================================================
   ACTIVITY FEED - rediseno con avatares + jerarquia
   ============================================================ */

#activity-feed {
  padding: 0 !important;
}

.activity-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
  position: relative;
}

.activity-row:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.activity-row:last-child {
  border-bottom: none !important;
}

.activity-row.activity-unread {
  background: rgba(77, 163, 255, 0.04) !important;
}

.activity-row.activity-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gi-accent);
}

/* Avatar circular */
.activity-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.activity-avatar-status {
  background: linear-gradient(135deg, #1a56c4, #4a9af4);
}

.activity-avatar-delivered {
  background: rgba(16, 185, 129, 0.2);
  color: var(--gi-success);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.activity-avatar-problem {
  background: rgba(239, 68, 68, 0.2);
  color: var(--gi-danger);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.activity-avatar-pickup_confirmed {
  background: rgba(77, 163, 255, 0.2);
  color: var(--gi-accent);
  border: 1px solid rgba(77, 163, 255, 0.4);
}

/* Body */
.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-load-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--gi-accent);
}

.activity-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

.activity-type-delivered {
  background: rgba(16, 185, 129, 0.15);
  color: var(--gi-success);
}

.activity-type-problem {
  background: rgba(239, 68, 68, 0.15);
  color: var(--gi-danger);
}

.activity-type-pickup_confirmed {
  background: rgba(77, 163, 255, 0.15);
  color: var(--gi-accent);
}

.activity-type-status {
  background: rgba(167, 139, 250, 0.15);
  color: #A78BFA;
}

.activity-meta {
  font-size: 11px;
  color: var(--gi-text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-time {
  font-size: 10px;
  color: var(--gi-text-faint);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* Empty state */
.activity-empty {
  text-align: center;
  padding: 40px 20px;
}

.activity-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.activity-empty-text {
  font-size: 12px;
  color: var(--gi-text-faint);
}

/* Mobile */
@media (max-width: 700px) {
  .activity-row { padding: 10px 12px !important; gap: 10px; }
  .activity-avatar { width: 32px; height: 32px; font-size: 11px; }
  .activity-meta { white-space: normal; }
}

/* ============================================================
   KPI WIDE - card que ocupa 2 columnas del grid (Delivered + chart)
   ============================================================ */

.kpi-grid {
  grid-template-columns: 1fr 1fr 1fr 2fr 1fr !important;
}

.kpi-card.kpi-wide {
  padding: 14px 18px !important;
}

.kpi-card.kpi-wide > div {
  align-items: center !important;
  gap: 16px !important;
}

.kpi-card.kpi-wide .kpi-info {
  flex: 0 0 auto;
  min-width: 100px;
}

.kpi-card.kpi-wide .kpi-label {
  font-size: 9px !important;
  letter-spacing: 0.8px;
}

.kpi-chart-wrap {
  flex: 1;
  min-width: 0;
  height: 70px;
  position: relative;
}

/* Responsive: en pantallas medianas vuelve a 3 columnas */
@media (max-width: 1300px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .kpi-card.kpi-wide {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .kpi-card.kpi-wide {
    grid-column: span 2;
  }
  .kpi-chart-wrap { height: 60px; }
}

@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .kpi-card.kpi-wide {
    grid-column: span 1;
  }
}

/* Esconder las clases viejas de trends-card por si quedan referencias */
.trends-card,
.trends-header,
.trends-chart-wrap {
  display: none !important;
}

/* ============================================================
   ALERT BAR - barra horizontal de alerts arriba del kpi-grid
   ============================================================ */

.alert-bar {
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.alert-bar-danger,
.alert-bar-multi {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-bar-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.alert-bar-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.alert-bar-danger .alert-bar-icon,
.alert-bar-multi .alert-bar-icon {
  color: var(--gi-danger);
}

.alert-bar-warning .alert-bar-icon {
  color: var(--gi-warning);
}

.alert-bar-content {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.alert-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gi-text);
  text-decoration: none;
  padding: 4px 0;
  transition: opacity 0.15s ease;
}

.alert-bar-item:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.alert-bar-item i {
  font-size: 12px;
  opacity: 0.8;
}

.alert-bar-item.alert-bar-danger {
  background: transparent;
  border: none;
  padding: 4px 0;
}

.alert-bar-item.alert-bar-danger i {
  color: var(--gi-danger);
}

.alert-bar-item.alert-bar-warning i {
  color: var(--gi-warning);
}

/* Separador visual entre alerts si hay multiples */
.alert-bar-content .alert-bar-item:not(:last-child)::after {
  content: '·';
  margin-left: 16px;
  color: var(--gi-text-faint);
  font-weight: 700;
}

.alert-bar-action {
  flex-shrink: 0;
}

.alert-bar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gi-text);
}

.alert-bar-danger .alert-bar-count,
.alert-bar-multi .alert-bar-count {
  background: rgba(239, 68, 68, 0.2);
  color: var(--gi-danger);
}

.alert-bar-warning .alert-bar-count {
  background: rgba(245, 158, 11, 0.2);
  color: var(--gi-warning);
}

/* Responsive */
@media (max-width: 700px) {
  .alert-bar { padding: 10px 12px; }
  .alert-bar-inner { gap: 10px; }
  .alert-bar-content { flex-direction: column; gap: 6px; align-items: flex-start; }
  .alert-bar-content .alert-bar-item:not(:last-child)::after { display: none; }
  .alert-bar-item { font-size: 12px; }
}

/* ============================================================
   ALERT BAR - barra horizontal de alerts arriba del kpi-grid
   ============================================================ */

.alert-bar {
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.alert-bar-danger,
.alert-bar-multi {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-bar-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.alert-bar-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.alert-bar-danger .alert-bar-icon,
.alert-bar-multi .alert-bar-icon {
  color: var(--gi-danger);
}

.alert-bar-warning .alert-bar-icon {
  color: var(--gi-warning);
}

.alert-bar-content {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.alert-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gi-text);
  text-decoration: none;
  padding: 4px 0;
  transition: opacity 0.15s ease;
}

.alert-bar-item:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.alert-bar-item i {
  font-size: 12px;
  opacity: 0.8;
}

.alert-bar-item.alert-bar-danger i {
  color: var(--gi-danger);
}

.alert-bar-item.alert-bar-warning i {
  color: var(--gi-warning);
}

.alert-bar-content .alert-bar-item:not(:last-child)::after {
  content: '·';
  margin-left: 16px;
  color: var(--gi-text-faint);
  font-weight: 700;
}

.alert-bar-action {
  flex-shrink: 0;
}

.alert-bar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.alert-bar-danger .alert-bar-count,
.alert-bar-multi .alert-bar-count {
  background: rgba(239, 68, 68, 0.2);
  color: var(--gi-danger);
}

.alert-bar-warning .alert-bar-count {
  background: rgba(245, 158, 11, 0.2);
  color: var(--gi-warning);
}

@media (max-width: 700px) {
  .alert-bar { padding: 10px 12px; }
  .alert-bar-inner { gap: 10px; }
  .alert-bar-content { flex-direction: column; gap: 6px; align-items: flex-start; }
  .alert-bar-content .alert-bar-item:not(:last-child)::after { display: none; }
  .alert-bar-item { font-size: 12px; }
}

/* ============================================================
   ALERT BAR - barra horizontal de alerts arriba del kpi-grid
   ============================================================ */

.alert-bar {
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.alert-bar-danger,
.alert-bar-multi {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-bar-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.alert-bar-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.alert-bar-danger .alert-bar-icon,
.alert-bar-multi .alert-bar-icon {
  color: var(--gi-danger);
}

.alert-bar-warning .alert-bar-icon {
  color: var(--gi-warning);
}

.alert-bar-content {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.alert-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gi-text);
  text-decoration: none;
  padding: 4px 0;
  transition: opacity 0.15s ease;
}

.alert-bar-item:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.alert-bar-item i {
  font-size: 12px;
  opacity: 0.9;
}

.alert-bar-item.alert-bar-danger i {
  color: var(--gi-danger);
}

.alert-bar-item.alert-bar-warning i {
  color: var(--gi-warning);
}

.alert-bar-content .alert-bar-item:not(:last-child)::after {
  content: '·';
  margin-left: 16px;
  color: var(--gi-text-faint);
  font-weight: 700;
}

.alert-bar-action {
  flex-shrink: 0;
}

.alert-bar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.alert-bar-danger .alert-bar-count,
.alert-bar-multi .alert-bar-count {
  background: rgba(239, 68, 68, 0.2);
  color: var(--gi-danger);
}

.alert-bar-warning .alert-bar-count {
  background: rgba(245, 158, 11, 0.2);
  color: var(--gi-warning);
}

@media (max-width: 700px) {
  .alert-bar { padding: 10px 12px; }
  .alert-bar-inner { gap: 10px; }
  .alert-bar-content { flex-direction: column; gap: 6px; align-items: flex-start; }
  .alert-bar-content .alert-bar-item:not(:last-child)::after { display: none; }
  .alert-bar-item { font-size: 12px; }
}

/* ============================================================
   FORM LABELS - override global para dark theme
   ============================================================ */

/* Labels usados en edit_load, add_load, etc */
.sf-label,
.stop-label,
form label,
form .form-label,
.form-group > label,
[class*="form-"] label,
.field-label {
  color: var(--gi-text-muted) !important;
  font-weight: 600;
}

/* Asegurarse que el sf-label conserva su tipografía especifica pero solo cambia el color */
.sf-label {
  color: var(--gi-text-muted) !important;
}

/* Stop labels (pickup/delivery badges) que usaban colores claros */
.stop-label {
  color: var(--gi-text) !important;
}

/* Headers de sección dentro de los forms (LOAD INFORMATION, BROKER INFORMATION, STOPS) */
.section-title,
.form-section-title,
[class*="-section"] h2,
[class*="-section"] h3 {
  color: var(--gi-text) !important;
}

/* Inputs y selects con texto invisible */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="url"],
select,
textarea {
  color: var(--gi-text) !important;
  background: var(--gi-bg-secondary) !important;
  border-color: var(--gi-glass-border) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
  outline: none;
}

/* Placeholders */
input::placeholder,
textarea::placeholder {
  color: var(--gi-text-faint) !important;
  opacity: 0.6;
}

/* ============================================================
   EDIT_LOAD / FORMS - override agresivo con maxima especificidad
   Apunta a las clases reales: .lch-title, .sf-label, .sf-input, .sf-select
   ============================================================ */

/* Card headers (LOAD TYPE, RATE CONFIRMATION, LOAD INFORMATION, etc.) */
.load-card .load-card-header .lch-title,
.load-card .lch-title,
.lch-title {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
}

/* Field labels (DRIVER, LOAD NUMBER, RATE CONF, etc.) */
.load-card .sf-label,
.sf-label {
  color: var(--gi-text-muted) !important;
  font-weight: 600 !important;
}

/* Card backgrounds en formularios */
.load-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  box-shadow: none !important;
}

.load-card .load-card-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.load-card .load-card-body {
  background: transparent !important;
}

/* Inputs/Selects con texto oscuro invisible */
.load-card .sf-input,
.load-card .sf-select,
.sf-input,
.sf-select,
textarea.sf-input {
  color: var(--gi-text) !important;
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.sf-input:focus,
.sf-select:focus,
textarea.sf-input:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
  outline: none !important;
}

.sf-input::placeholder {
  color: var(--gi-text-faint) !important;
  opacity: 0.5;
}

/* Stop blocks (Pickup, Delivery cards) */
.stop-block {
  background: var(--gi-bg-secondary) !important;
  border-left-width: 3px !important;
}

.stop-block.pickup {
  border-left-color: var(--gi-accent) !important;
}

.stop-block.delivery {
  border-left-color: var(--gi-success) !important;
}

.stop-block.both {
  border-left-color: var(--gi-warning) !important;
}

/* Stop labels (Pickup, Delivery badges) */
.stop-label.pickup {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
}

.stop-label.delivery {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
}

.stop-label.both {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
}

/* Options de select dropdown legibles */
.sf-select option {
  background: var(--gi-bg-primary) !important;
  color: var(--gi-text) !important;
}

/* Botones generales del form */
.btn-save {
  background: linear-gradient(135deg, var(--gi-accent), var(--gi-accent-light)) !important;
}

.btn-cancel {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text-muted) !important;
}

.btn-add-stop {
  background: rgba(77, 163, 255, 0.08) !important;
  color: var(--gi-accent) !important;
  border-color: rgba(77, 163, 255, 0.3) !important;
}

.btn-add-stop:hover {
  background: rgba(77, 163, 255, 0.15) !important;
}

.btn-remove-stop {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--gi-danger) !important;
}

/* El icono nativo de date picker en navegadores webkit (Chrome, Safari) */




/* Date input text color */


/* ============================================================
   VIEW CURRENT RC BUTTON - matching style con Replace RC
   ============================================================ */

a[href*="/pdf/"][style*="background:#f0f7ff"],
.btn-view-rc {
  background: rgba(77, 163, 255, 0.12) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

a[href*="/pdf/"][style*="background:#f0f7ff"]:hover {
  background: rgba(77, 163, 255, 0.2) !important;
}

/* Replace RC button - keep its orange/warning style but with dark theme */
button[id="btnReplaceRc"],
#btnReplaceRc {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

#btnReplaceRc:hover {
  background: rgba(245, 158, 11, 0.2) !important;
}

/* Info box azul de "This load was created from..." */
[style*="background:#e8f0fe"][style*="border:1px solid #c5d8fc"] {
  background: rgba(77, 163, 255, 0.08) !important;
  border: 1px solid rgba(77, 163, 255, 0.25) !important;
  color: var(--gi-text-muted) !important;
}

/* Inputs de fecha con cursor pointer en todo el campo */


/* Hacer el input clickeable en toda su área para abrir el datepicker */
input[type="date"]::-webkit-datetime-edit {
  color: var(--gi-text);
}


/* Ocultar el icono nativo feo del navegador */


/* Hover: realzar el icono custom */



/* SVG calendario azul como background a la derecha */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234DA3FF'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
}

/* Icono nativo de Chrome: invisible pero ocupando toda el area del input para que sea clickeable */




/* Inputs de fecha con emoji 📅 como fondo */


/* Wrapper visible: emoji al final del input */


/* Indicator nativo: hacerlo grande y semi-visible para que sea clickeable */






/* ============================================================
   DATE PICKER - icono nativo Chrome con FONDO AZUL OBVIO
   ============================================================ */

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark;
  cursor: pointer;
}

/* Hacer el icono nativo MUY visible con fondo azul */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background-color: #4DA3FF !important;
  border-radius: 6px !important;
  padding: 4px !important;
  margin-left: 4px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  width: 24px !important;
  height: 24px !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: #76BEFF !important;
}


/* ============================================================
   FORM BUTTONS - estilo ghost/outline coherente
   matching View current RC / Replace RC
   ============================================================ */

/* Save Changes - estilo azul ghost */
.btn-save {
  background: rgba(77, 163, 255, 0.12) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: none !important;
}

.btn-save:hover {
  background: rgba(77, 163, 255, 0.2) !important;
  border-color: rgba(77, 163, 255, 0.5) !important;
}

/* Cancel - estilo gris ghost */
.btn-cancel {
  background: rgba(163, 184, 217, 0.08) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-decoration: none !important;
}

.btn-cancel:hover {
  background: rgba(163, 184, 217, 0.15) !important;
  color: var(--gi-text) !important;
}

/* Load Type toggle (Full Truckload / Partial) */
/* Contenedor del toggle */
[id="btnTypeFull"], [id="btnTypePartial"],
button[data-type="full"], button[data-type="partial"] {
  background: transparent !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Botón ACTIVO del toggle (el que está seleccionado en azul) */
[id="btnTypeFull"][style*="background:#1A73E8"],
[id="btnTypePartial"][style*="background:#1A73E8"],
button[data-type="full"][style*="#1A73E8"],
button[data-type="partial"][style*="#1A73E8"] {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
}

/* Contenedor padre del toggle (background gris claro) */
[style*="background:#f5f5f5"][style*="padding:4px"][style*="border-radius:8px"] {
  background: transparent !important;
  padding: 0 !important;
  gap: 8px !important;
}

/* Add Stop button */
.btn-add-stop {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  width: 100%;
}

.btn-add-stop:hover {
  background: rgba(77, 163, 255, 0.15) !important;
  border-color: rgba(77, 163, 255, 0.6) !important;
}

/* Back to Loads link (header arriba derecha) */
a[href="/loads/"][style*="color:rgba(255,255,255,0.7)"] {
  color: var(--gi-text-muted) !important;
}

a[href="/loads/"][style*="color:rgba(255,255,255,0.7)"]:hover {
  color: var(--gi-accent) !important;
}


/* ============================================================
   LOAD DETAILS - botones ghost coherentes
   ============================================================ */

/* Botones de acción del header del Load (Status, Edit, Back) */
/* NUEVO LOOK: botones de accion SOLIDOS (no ghost) en TODA la app.
   Default azul primario; diferenciacion por color de paleta del inline. */
a[href*="/edit/"][style*="background"],
a[href*="/loads/"][style*="background"]:not(.btn-earn):not(.kpi-card):not(.qa-btn),
button[onclick*="status"],
button[onclick*="changeStatus"],
.btn-status,
.btn-edit {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: filter 0.15s ease;
}
a[href][style*="background"][style*="#22C55E"]:not(.btn-earn):not(.qa-btn),
a[href][style*="background"][style*="#16a34a"]:not(.btn-earn):not(.qa-btn) {
  background: #22C55E !important; color: #fff !important;
}
a[href][style*="background"][style*="#F59E0B"]:not(.btn-earn):not(.qa-btn),
a[href][style*="background"][style*="#fb8c00"]:not(.btn-earn):not(.qa-btn) {
  background: #F59E0B !important; color: #1A1206 !important;
}
a[href][style*="background"][style*="#EF4444"]:not(.btn-earn):not(.qa-btn),
a[href][style*="background"][style*="#dc2626"]:not(.btn-earn):not(.qa-btn) {
  background: #EF4444 !important; color: #fff !important;
}
.btn-back {
  background: #1E2A40 !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

a[href*="/edit/"]:hover,
a[href*="/loads/"][style*="background"]:hover,
button[onclick*="status"]:hover,
.btn-status:hover,
.btn-edit:hover {
  filter: brightness(1.1);
}

/* Back button - gris ghost */
a[href*="/loads/"][style*="Back"],
a:has(i.fa-arrow-left),
.btn-back,
button:has(i.fa-arrow-left) {
  background: rgba(163, 184, 217, 0.08) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

/* Paid badge - estilo ghost verde */
[class*="paid"][style*="background:#e8f5e9"],
.badge-paid,
span[style*="background:#e8f5e9"][style*="color:#"] {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Download / PDF / RC buttons - SOLIDO azul (no ghost) */
a[href*="/download/"],
a[href*=".pdf"],
button[onclick*="download"],
.btn-download,
a[style*="background"][href*="/document/"] {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Botones azul brillante -> SOLIDO (no ghost) */
[style*="background:#1A73E8"]:not(.kpi-card):not(.brand-icon),
[style*="background: #1A73E8"]:not(.kpi-card):not(.brand-icon),
[style*="background:linear-gradient(135deg,#1a56c4"]:not(.brand-icon):not(.load-avatar) {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
}

/* Boton verde fuerte -> SOLIDO verde (no ghost) */
[style*="background:#43A047"],
[style*="background: #43A047"],
[style*="background:#2e7d32"],
[style*="background:linear-gradient(135deg,#2e7d32"] {
  background: #22C55E !important;
  color: #fff !important;
  border: 0 !important;
}

/* Driver Activity dropdown badge (el "8" circular) */
.activity-count-badge,
span[style*="background:#1A73E8"][style*="border-radius:50%"],
span[style*="background:#4a9af4"][style*="border-radius:50%"] {
  background: rgba(77, 163, 255, 0.2) !important;
  color: var(--gi-accent) !important;
}

/* Driver Documents icon containers (POD verde, BOL azul) */
[style*="background:#22c55e"][style*="border-radius"]:not(.kpi-icon),
[style*="background:#43A047"][style*="border-radius"]:not(.kpi-icon) {
  background: rgba(16, 185, 129, 0.2) !important;
}

/* Driver Activity panel - cards interiores */
.driver-activity-card,
[id*="activity"][class*="card"] {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
}


/* ============================================================
   LOAD DETAIL PAGE - load_detail.html override
   ============================================================ */

/* Detail cards (LOAD DETAILS, BROKER & NOTES, STOPS, SWAPS) */
.detail-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

/* Headers de cards (LOAD DETAILS, BROKER & NOTES, etc.) */
.detail-card-title {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
}

/* Info rows (cada par label/valor) */
.info-row {
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.info-label {
  color: var(--gi-text-muted) !important;
}

.info-value {
  color: var(--gi-text) !important;
}

/* Values con colores semánticos */
.val-green { color: var(--gi-success) !important; }
.val-blue { color: var(--gi-accent) !important; }
.val-purple { color: #A78BFA !important; }

/* Stop chips */
.stop-chip {
  background: var(--gi-bg-secondary) !important;
  border-left-width: 3px !important;
}

.stop-chip.pickup {
  border-left-color: var(--gi-accent) !important;
}

.stop-chip.delivery {
  border-left-color: var(--gi-success) !important;
}

.stop-chip.both {
  border-left-color: var(--gi-warning) !important;
}

.stop-chip-city {
  color: var(--gi-text) !important;
}

.stop-chip-detail {
  color: var(--gi-text-muted) !important;
}

.stop-chip.pickup .stop-chip-type {
  color: var(--gi-accent) !important;
}

.stop-chip.delivery .stop-chip-type {
  color: var(--gi-success) !important;
}

.stop-chip.both .stop-chip-type {
  color: var(--gi-warning) !important;
}

.stop-chip-pu {
  color: var(--gi-accent) !important;
}

.stop-chip-notes {
  color: var(--gi-warning) !important;
}

/* Leg cards (driver swaps) */
.leg-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-left: 4px solid var(--gi-accent) !important;
}

.leg-card.leg-2 {
  border-left-color: var(--gi-warning) !important;
}

.leg-card.leg-3 {
  border-left-color: var(--gi-success) !important;
}

.leg-card.leg-4 {
  border-left-color: var(--gi-danger) !important;
}

.leg-num {
  background: var(--gi-accent) !important;
}

.leg-driver {
  color: var(--gi-text) !important;
}

.leg-route {
  color: var(--gi-text-muted) !important;
}

.leg-chip {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text-muted) !important;
}

/* Add leg button + form */
.btn-add-leg-toggle {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
}

.btn-add-leg-toggle:hover {
  background: #2563EB !important;
  filter: brightness(1.05);
}

.add-leg-form {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.btn-save-leg {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 9px 22px !important;
  font-weight: 700 !important;
}

.btn-save-leg:hover {
  filter: brightness(1.1);
}

/* Driver note box (Total Quality Logistics notes) */
[style*="background:#e8f0fe"][style*="border-left:3px solid #1A73E8"] {
  background: rgba(77, 163, 255, 0.08) !important;
  border-left: 3px solid var(--gi-accent) !important;
  color: var(--gi-text) !important;
}

/* "Driver:" header dentro del note box */
[style*="background:#e8f0fe"] strong[style*="color:#1A73E8"] {
  color: var(--gi-accent) !important;
}

/* Phone link */
a[href^="tel:"] {
  color: var(--gi-accent) !important;
}

/* View PDF button (Rate Conf PDF) */
a[href*="rate_confirmations"][style*="background:#e8f0fe"] {
  background: rgba(77, 163, 255, 0.12) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
}

/* Driver "Owner Op" badge interior */
span[style*="background:#1A73E8"][style*="font-size:9px"] {
  background: rgba(77, 163, 255, 0.2) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
}

/* Empty miles texto gris */
.info-value[style*="color:#67748e"] {
  color: var(--gi-text-muted) !important;
}

/* "No driver swaps yet" texto */
.detail-card div[style*="color:#bbb"] {
  color: var(--gi-text-faint) !important;
}

/* Status dropdown (white menu) */
#statusDropdown {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

#statusDropdown > div {
  color: var(--gi-text) !important;
  border-bottom-color: var(--gi-glass-border) !important;
}

#statusDropdown > div:hover {
  background: var(--gi-bg-secondary) !important;
}

#statusDropdown > div[style*="background:#f9fafb"] {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text-muted) !important;
}

#statusDropdown > div[style*="background:#f0fdf4"] {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--gi-success) !important;
}


/* ============================================================
   ADD LEG FORM - dark theme override
   ============================================================ */

.add-leg-form {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Labels dentro del add-leg-form */
.add-leg-form .sf-label,
.add-leg-form label {
  color: var(--gi-text-muted) !important;
  font-weight: 600 !important;
}

/* Inputs y selects del add-leg-form */
.add-leg-form .sf-input,
.add-leg-form .sf-select,
.add-leg-form input,
.add-leg-form select,
.add-leg-form textarea {
  background: var(--gi-bg-primary) !important;
  color: var(--gi-text) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.add-leg-form .sf-input:focus,
.add-leg-form .sf-select:focus,
.add-leg-form input:focus,
.add-leg-form select:focus,
.add-leg-form textarea:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

.add-leg-form input::placeholder,
.add-leg-form textarea::placeholder {
  color: var(--gi-text-faint) !important;
  opacity: 0.5;
}

/* Options del select legibles */
.add-leg-form select option {
  background: var(--gi-bg-primary) !important;
  color: var(--gi-text) !important;
}


/* ============================================================
   SELECT DROPDOWNS - opciones semi-transparentes oscuras
   ============================================================ */

/* Options de cualquier select (dropdowns) */
select option,
select optgroup,
.sf-select option,
.add-leg-form select option {
  background: rgba(26, 40, 66, 0.95) !important;
  color: var(--gi-text) !important;
  padding: 8px 12px !important;
}

select option:hover,
select option:focus,
select option:checked,
.sf-select option:checked {
  background: rgba(77, 163, 255, 0.2) !important;
  color: var(--gi-accent) !important;
}

/* Opcion disabled (placeholder "Select driver...") */
select option[disabled],
.sf-select option[value=""] {
  color: var(--gi-text-faint) !important;
  font-style: italic;
}

/* ============================================================
   ADD LEG FORM - mejor espaciado y layout
   ============================================================ */

.add-leg-form {
  padding: 20px !important;
  margin-top: 12px !important;
}

.add-leg-form .row {
  --bs-gutter-x: 16px !important;
  --bs-gutter-y: 16px !important;
}

.add-leg-form .row > [class*="col-"] {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.add-leg-form .sf-label {
  margin-bottom: 6px !important;
  display: block !important;
}

.add-leg-form .sf-input,
.add-leg-form .sf-select {
  padding: 10px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  width: 100% !important;
}

.add-leg-form textarea.sf-input {
  min-height: 70px !important;
  resize: vertical;
}

/* Add Leg button: más espacio arriba */
.btn-save-leg {
  margin-top: 8px !important;
  padding: 10px 26px !important;
}

/* Forzar dropdown nativo a usar dark color-scheme */
select {
  color-scheme: dark;
}


/* ============================================================
   CHOICES.JS - dark theme custom
   ============================================================ */

/* Container general */
.choices {
  margin-bottom: 0 !important;
  font-family: inherit !important;
}

.choices__inner {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-height: 38px !important;
  font-size: 13px !important;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

/* Texto del valor seleccionado */
.choices__list--single .choices__item {
  color: var(--gi-text) !important;
  padding: 0 !important;
}

/* Placeholder */
.choices__placeholder {
  color: var(--gi-text-faint) !important;
  opacity: 0.6 !important;
}

/* Dropdown desplegado */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  z-index: 100 !important;
}

/* Items del dropdown */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: var(--gi-text) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
  background: transparent !important;
}

/* Item hover/highlighted */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
}

/* Item seleccionado */
.choices__list--dropdown .choices__item--selectable[aria-selected="true"] {
  background: rgba(77, 163, 255, 0.25) !important;
  color: var(--gi-accent) !important;
  font-weight: 600 !important;
}

/* Item disabled */
.choices__list--dropdown .choices__item--disabled,
.choices__item--choice.choices__item--disabled {
  color: var(--gi-text-faint) !important;
  opacity: 0.4 !important;
}

/* Search input dentro del dropdown */
.choices__input {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 4px !important;
  font-size: 13px !important;
}

.choices__input::placeholder {
  color: var(--gi-text-faint) !important;
}

/* Flecha del select */
.choices[data-type*="select-one"]::after {
  border-color: var(--gi-text-muted) transparent transparent !important;
  right: 14px !important;
}

.choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--gi-accent) !important;
}

/* Multiselect: tags seleccionados */
.choices__list--multiple .choices__item {
  background: rgba(77, 163, 255, 0.15) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
  color: var(--gi-accent) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin: 2px !important;
  font-size: 12px !important;
}

.choices__button {
  filter: brightness(1.5) !important;
}

/* No results / no choices */
.choices__list--dropdown .choices__list,
.has-no-results,
.has-no-choices {
  color: var(--gi-text-faint) !important;
  padding: 14px !important;
  text-align: center !important;
  font-style: italic;
}

/* Scrollbar del dropdown */
.choices__list--dropdown .choices__list::-webkit-scrollbar {
  width: 6px;
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background: var(--gi-glass-border);
  border-radius: 3px;
}


/* ============================================================
   CHOICES.JS - fixes de layout
   ============================================================ */

/* El wrapper .choices debe ocupar 100% del contenedor */
.choices {
  width: 100% !important;
  display: block !important;
  margin-bottom: 0 !important;
}

/* Dropdown desplegado FLOTA encima (position absolute) */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  margin-top: 4px !important;
}

/* Asegurar que .choices tenga position relative para que el dropdown se ancle bien */
.choices[data-type*="select-one"],
.choices[data-type*="select-multiple"] {
  position: relative !important;
}

/* El inner se ve como un input normal */
.choices__inner {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
}

/* Quitar la "Select driver..." pseudo-opcion grande del dropdown */
.choices__list--dropdown .choices__placeholder,
.choices__list[aria-expanded] .choices__placeholder {
  display: none !important;
}

/* El search input dentro del dropdown */
.choices__input.choices__input--cloned {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text) !important;
  width: calc(100% - 8px) !important;
  margin: 6px 4px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 6px !important;
}

/* Items del dropdown - texto normal, sin italic */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  font-style: normal !important;
  text-align: left !important;
}

/* El item placeholder dentro del dropdown ("Select driver...") oculto */
.choices__list--dropdown .choices__item[data-value=""],
.choices__list[aria-expanded] .choices__item[data-value=""] {
  display: none !important;
}

/* Multiselect items no pueden ser larger */
.choices.is-disabled .choices__inner {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================
   ADD LEG FORM - layout reorganizado + bordes visibles
   ============================================================ */

/* Forzar que el row de Bootstrap respete el layout deseado */
.add-leg-form .row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

/* Driver y Notes ocupan toda la fila */
.add-leg-form .row > .col-md-6:first-child,
.add-leg-form .row > .col-12 {
  grid-column: 1 / -1 !important;
}

/* Fila 2: From City + State + To City + State - 4 columnas */
.add-leg-form .row {
  grid-template-columns: 2fr 1fr 2fr 1fr !important;
}

/* Driver ocupa toda la primera fila */
.add-leg-form .row > .col-md-6 {
  grid-column: 1 / -1 !important;
}

/* From City | State | To City | State */
.add-leg-form .row > .col-md-3:nth-of-type(2) { grid-column: 1 / 2 !important; }  /* From City */
.add-leg-form .row > .col-md-2:nth-of-type(3) { grid-column: 2 / 3 !important; }  /* State From */
.add-leg-form .row > .col-md-3:nth-of-type(4) { grid-column: 3 / 4 !important; }  /* To City */
.add-leg-form .row > .col-md-2:nth-of-type(5) { grid-column: 4 / 5 !important; }  /* State To */

/* Fila 3: Miles | Driver Pay - 2 columnas iguales */
.add-leg-form .row > .col-md-2:nth-of-type(6) { grid-column: 1 / 3 !important; }  /* Miles */
.add-leg-form .row > .col-md-3:nth-of-type(7) { grid-column: 3 / 5 !important; }  /* Driver Pay */

/* Notes ocupa toda la fila */
.add-leg-form .row > .col-12 {
  grid-column: 1 / -1 !important;
}

/* Reset padding de columnas */
.add-leg-form .row > [class*="col-"] {
  padding: 0 !important;
  flex: unset !important;
  max-width: unset !important;
  width: 100% !important;
}

/* INPUTS - borde visible que destaque sobre el card */
.add-leg-form .sf-input,
.add-leg-form .sf-select,
.add-leg-form input[type="text"],
.add-leg-form input[type="number"],
.add-leg-form textarea {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  padding: 11px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  width: 100% !important;
  transition: all 0.15s ease;
}

.add-leg-form .sf-input:focus,
.add-leg-form .sf-select:focus,
.add-leg-form input:focus,
.add-leg-form textarea:focus {
  border-color: var(--gi-accent) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
  outline: none !important;
}

/* Choices.js dentro del add-leg-form también con borde visible */
.add-leg-form .choices__inner {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
}

.add-leg-form .choices.is-focused .choices__inner,
.add-leg-form .choices.is-open .choices__inner {
  border-color: var(--gi-accent) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

/* Card del form: más padding y border más visible */
.add-leg-form {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-top: 16px !important;
}

/* Labels más visibles */
.add-leg-form .sf-label {
  color: var(--gi-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Add Leg button al final, separado */
.add-leg-form .col-12:last-child {
  margin-top: 8px !important;
}

/* Mobile: collapse a 1 columna */
@media (max-width: 768px) {
  .add-leg-form .row,
  .add-leg-form .row > [class*="col-"] {
    grid-template-columns: 1fr !important;
    grid-column: 1 / -1 !important;
  }
}


/* ============================================================
   EDIT LOAD - FINAL STOP DELIVERY card (verde -> azul-gris)
   ============================================================ */

/* Override del fondo verde del Final Stop / Delivery */
.stop-block.delivery,
.stop-block[class*="delivery"],
[class*="stop"][class*="delivery"] {
  background: rgba(15, 23, 42, 0.4) !important;
  border-left: 4px solid var(--gi-success) !important;
  border-top: 1px solid var(--gi-glass-border) !important;
  border-right: 1px solid var(--gi-glass-border) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

/* Override de cualquier card con fondo verde claro hardcoded */
[style*="background:#e8f5e9"]:not(span):not(.badge-paid):not([style*="border-radius:20px"]),
[style*="background: #e8f5e9"]:not(span):not(.badge-paid):not([style*="border-radius:20px"]),
[style*="background:#dcfce7"],
[style*="background: #dcfce7"],
[style*="background:#f0fdf4"],
[style*="background: #f0fdf4"] {
  background: rgba(15, 23, 42, 0.4) !important;
  border-color: var(--gi-glass-border) !important;
}

/* El label "FINAL STOP — DELIVERY" mantiene verde */
.stop-label.delivery,
[class*="stop-label"][class*="delivery"] {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* ============================================================
   CHOICES.JS - z-index fix para dropdown que se esconde
   ============================================================ */

/* El container del select debe tener z-index alto cuando está abierto */
.choices.is-open {
  z-index: 9999 !important;
  position: relative !important;
}

/* Dropdown abierto SIEMPRE por encima de todo */
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded="true"] {
  z-index: 99999 !important;
  position: absolute !important;
}

/* Stops y cards no deben cortar el overflow del dropdown */
.stop-block,
.load-card,
.detail-card,
.add-leg-form,
.form-section,
[class*="stop"]:not(.stop-chip-type):not(.stop-chip-city):not(.stop-chip-detail) {
  overflow: visible !important;
}

/* Bootstrap row también con overflow visible */
.add-leg-form .row,
.stop-block .row,
.row:has(.choices) {
  overflow: visible !important;
}


/* ============================================================
   DRIVER LIST PAGE - driver_list.html dark theme override
   ============================================================ */

/* Cards principales de cada driver */
.load-accordion .accordion-item.load-card,
.load-accordion .load-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
}

.load-accordion .accordion-item.load-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(77, 163, 255, 0.2) !important;
}

/* Botón header del accordion */
.load-accordion .accordion-button {
  background: var(--gi-bg-primary) !important;
  color: var(--gi-text) !important;
  border: none !important;
  padding: 16px 20px !important;
}

.load-accordion .accordion-button:hover {
  background: var(--gi-bg-secondary) !important;
}

.load-accordion .accordion-button:not(.collapsed) {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-accent) !important;
  box-shadow: inset 0 -1px 0 var(--gi-glass-border) !important;
}

.load-accordion .accordion-button::after {
  filter: brightness(0) invert(0.8) sepia(1) saturate(5) hue-rotate(180deg) !important;
}

/* Body del accordion expandido */
.load-accordion .accordion-body {
  background: var(--gi-bg-primary) !important;
  border-top: 1px solid var(--gi-glass-border) !important;
  padding: 20px !important;
}

/* Driver avatar circular */
.driver-avatar {
  background: linear-gradient(135deg, #4DA3FF, #1A56C4) !important;
  box-shadow: 0 2px 8px rgba(77, 163, 255, 0.3) !important;
  color: #fff !important;
}

/* Nombre del driver y O/O badge */
.accordion-button [style*="color:#1A73E8"][style*="font-size:0.9rem"],
.accordion-button .fw-bold[style*="color:#1A73E8"] {
  color: var(--gi-text) !important;
}

/* O/O badge */
.accordion-button span[style*="background:#e8f0fe"][style*="color:#1A73E8"] {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
}

/* Available badge (pill verde clickeable) */
.accordion-button span[onclick*="openAvailModal"][style*="background:#e8f5e9"] {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.accordion-button span[onclick*="openAvailModal"] span[style*="color:#22c55e"] {
  color: var(--gi-success) !important;
}

/* Driver status Active */
.driver-status.active {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.driver-status.inactive {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--gi-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Equipment text en header (Truck | Trailer) */
.accordion-button [style*="color:#adb5bd"] {
  color: var(--gi-text-faint) !important;
}

.accordion-button [style*="color:#344767"][style*="font-size:0.82rem"] {
  color: var(--gi-text) !important;
}

.accordion-button i.text-primary,
.accordion-button [class*="text-primary"] {
  color: var(--gi-accent) !important;
}

/* Driver info chips (Phone, Email, CDL, Dispatch %, Truck, Trailer) */
.info-item {
  background: var(--gi-bg-secondary) !important;
  border-left: 3px solid var(--gi-accent) !important;
  border-top: 1px solid var(--gi-glass-border) !important;
  border-right: 1px solid var(--gi-glass-border) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.info-label {
  color: var(--gi-text-muted) !important;
}

.info-value {
  color: var(--gi-text) !important;
}

/* Truck/Trailer values en azul */
.info-value[style*="color:#1A73E8"] {
  color: var(--gi-accent) !important;
}

.info-value span[style*="color:#1A73E8"] {
  color: var(--gi-accent) !important;
}

.info-value span[style*="color:#67748e"] {
  color: var(--gi-text-muted) !important;
}

/* Documents nested accordion */
#documentsAccordion1 .accordion-item,
#documentsAccordion2 .accordion-item,
[id^="documentsAccordion"] .accordion-item {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 10px !important;
}

[id^="documentsAccordion"] .accordion-button {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text) !important;
}

[id^="documentsAccordion"] .accordion-button:not(.collapsed) {
  background: var(--gi-bg-primary) !important;
}

[id^="documentsAccordion"] .accordion-button .badge.bg-primary {
  background: rgba(77, 163, 255, 0.2) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
}

/* Documents table */
.documents-table {
  background: transparent !important;
  box-shadow: none !important;
}

.documents-table thead th {
  background: var(--gi-bg-primary) !important;
  color: var(--gi-text-muted) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.documents-table tbody td {
  color: var(--gi-text) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.documents-table tbody tr:hover {
  background: rgba(77, 163, 255, 0.05) !important;
}

.documents-table i.text-primary {
  color: var(--gi-accent) !important;
}

.expiry-ok {
  color: var(--gi-success) !important;
  font-weight: 600;
}

.expiry-warning {
  color: var(--gi-danger) !important;
  font-weight: 700;
}

/* ============================================================
   DRIVER ACTION BUTTONS - todos ghost coherentes
   ============================================================ */

/* CONTEXTUALES -> SOLIDO por color (antes eran ghost) */
.driver-info ~ * .btn-success,
.action-buttons .btn-success,
.btn-group-actions .btn-success,
.page-header-card .btn-success,
.documents-table .btn-success {
  background: #22C55E !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}
.btn-success:hover { filter: brightness(1.1); }

.btn-group-actions .btn-primary,
.action-buttons .btn-primary,
.documents-table .btn-primary {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}
.btn-primary:hover { filter: brightness(1.1); }

/* btn-secondary -> navy solido */
.action-buttons .btn-secondary,
.btn-secondary {
  background: #1E2A40 !important;
  color: #EAF0FA !important;
  border: 1px solid #233047 !important;
  font-weight: 700 !important;
}

.action-buttons .btn-danger,
.btn-group-actions .btn-danger,
.documents-table .btn-danger {
  background: #EF4444 !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}
.btn-danger:hover { filter: brightness(1.1); }

/* btn-light (Add Driver = CTA) -> azul solido */
.page-header-card .btn-light {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}
.btn-light:hover { filter: brightness(1.1); }

/* Invite to App / Edit Equipment -> navy solido (secundario) */
a[href*="/invite-app/"],
a[href*="/assign-equipment/"][style*="background:#e8f0fe"],
a[href*="/assign-equipment/"] {
  background: #1E2A40 !important;
  color: #EAF0FA !important;
  border: 1px solid #233047 !important;
}
a[href*="/invite-app/"]:hover,
a[href*="/assign-equipment/"]:hover { filter: brightness(1.15); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  background: var(--gi-bg-primary) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.empty-state i {
  color: var(--gi-text-faint) !important;
}

.empty-state h5 {
  color: var(--gi-text) !important;
}


/* ============================================================
   DRIVER DOCUMENTS TABLE - dark theme completo
   ============================================================ */

/* Tabla de documentos - quitar fondo blanco */
.documents-table,
table.documents-table,
.table-responsive .documents-table {
  background: transparent !important;
  box-shadow: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.documents-table thead tr,
.documents-table thead {
  background: transparent !important;
}

.documents-table thead th {
  background: var(--gi-bg-deep) !important;
  color: var(--gi-text-muted) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  border-top: none !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
}

.documents-table tbody tr {
  background: transparent !important;
}

.documents-table tbody tr:hover {
  background: rgba(77, 163, 255, 0.06) !important;
}

.documents-table tbody td {
  background: transparent !important;
  color: var(--gi-text) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  padding: 12px 16px !important;
}

.documents-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Icono del documento (file) */
.documents-table td i.fa-file,
.documents-table td i[class*="fa-file"] {
  color: var(--gi-accent) !important;
}

/* Fechas expiry */
.documents-table .expiry-ok,
.documents-table td .expiry-ok {
  color: var(--gi-success) !important;
  font-weight: 600 !important;
}

.documents-table .expiry-warning {
  color: var(--gi-danger) !important;
  font-weight: 700 !important;
}

/* Filas con fondo blanco hardcoded */
.documents-table tr[style*="background:#fff"],
.documents-table tr[style*="background: #fff"],
.documents-table tr[style*="background:white"] {
  background: transparent !important;
}

/* Bootstrap table override agresivo - sobrescribir cualquier style:white */
table.table tbody tr td,
.table > :not(caption) > * > * {
  background: transparent !important;
  color: var(--gi-text) !important;
  border-bottom-color: var(--gi-glass-border) !important;
}

table.table tbody tr {
  background: transparent !important;
}

/* Wrapper de la tabla */
.table-responsive {
  background: transparent !important;
  border-radius: 10px !important;
}


/* ============================================================
   MODALS - Update Document, Edit Driver, Create Doc, etc.
   ============================================================ */

/* Modal content (Bootstrap modal) */
.modal-content {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  color: var(--gi-text) !important;
}

.modal-header {
  background: var(--gi-bg-deep) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  padding: 18px 24px !important;
}

.modal-header .modal-title,
.modal-title {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
}

.modal-body {
  background: var(--gi-bg-primary) !important;
  color: var(--gi-text) !important;
  padding: 24px !important;
}

.modal-footer {
  background: var(--gi-bg-primary) !important;
  border-top: 1px solid var(--gi-glass-border) !important;
  padding: 16px 24px !important;
}

.modal-backdrop.show {
  opacity: 0.7 !important;
  background: #000 !important;
}

/* Close button (X) */
.modal .btn-close,
.modal-header .btn-close {
  filter: brightness(0) invert(0.7) !important;
  opacity: 0.7 !important;
}

.modal .btn-close:hover {
  opacity: 1 !important;
}

/* Labels dentro del modal */
.modal label,
.modal .form-label,
.modal .sf-label {
  color: var(--gi-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
}

/* Inputs y selects dentro del modal */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="password"],
.modal select,
.modal textarea,
.modal .form-control,
.modal .form-select {
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus,
.modal .form-control:focus,
.modal .form-select:focus {
  background: var(--gi-bg-secondary) !important;
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-text) !important;
  outline: none !important;
}

.modal input::placeholder,
.modal textarea::placeholder {
  color: var(--gi-text-faint) !important;
}

/* Botones del modal */
.modal .btn-primary,
.modal .btn-sf-save,
.modal button[type="submit"]:not(.btn-secondary):not(.btn-danger) {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
}

.modal .btn-primary:hover,
.modal .btn-sf-save:hover,
.modal button[type="submit"]:not(.btn-secondary):not(.btn-danger):hover {
  filter: brightness(1.1);
}

/* Cancel / secundario en modal -> navy solido */
.modal .btn-secondary,
.modal .btn-sf-cancel,
.modal button[data-bs-dismiss="modal"]:not(.btn-close):not(.btn-primary),
.modal .btn-cancel {
  background: #1E2A40 !important;
  color: #EAF0FA !important;
  border: 1px solid #233047 !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
}

.modal .btn-secondary:hover,
.modal .btn-sf-cancel:hover,
.modal .btn-cancel:hover {
  background: #24324C !important;
  color: #fff !important;
}

/* Danger button en modal */
.modal .btn-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--gi-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
}

.modal .btn-danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

/* Texto descriptivo / hints en modal */
.modal small,
.modal .text-muted,
.modal .form-text {
  color: var(--gi-text-muted) !important;
}

/* Alert dentro del modal */
.modal .alert {
  border: 1px solid var(--gi-glass-border) !important;
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text) !important;
}

.modal .alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--gi-danger) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.modal .alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  color: var(--gi-warning) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.modal .alert-success {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--gi-success) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Spinner color en modal */
.modal .spinner-border {
  color: var(--gi-accent) !important;
}


/* ============================================================
   DRIVER EDIT MODAL - .em-* classes override
   ============================================================ */

/* Body del modal con fondo gris claro */
#actionModal .modal-body {
  background: var(--gi-bg-primary) !important;
  padding: 0 !important;
}

/* Cada sección (Personal, Documentation, Payment) */
.em-section {
  background: var(--gi-bg-primary) !important;
  margin-bottom: 0 !important;
}

/* Header de sección (con fondo gris claro y borde) */
.em-section-header {
  background: var(--gi-bg-deep) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  padding: 12px 24px !important;
}

/* Icono de la sección - mantener gradiente original (se ve bien) */
.em-icon {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Título de sección */
.em-section-title {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
}

/* Body de cada sección */
.em-section-body {
  background: var(--gi-bg-primary) !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

/* Labels */
.em-section-body .sf-label,
.modal .sf-label {
  color: var(--gi-text-muted) !important;
}

/* Inputs */
.em-section-body .sf-input,
.em-section-body .sf-select,
.modal .sf-input,
.modal .sf-select {
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

.em-section-body .sf-input:focus,
.em-section-body .sf-select:focus,
.modal .sf-input:focus,
.modal .sf-select:focus {
  border-color: var(--gi-accent) !important;
  background: var(--gi-bg-secondary) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

.em-section-body .sf-input:disabled,
.modal .sf-input:disabled {
  background: var(--gi-bg-deep) !important;
  color: var(--gi-text-faint) !important;
  border-color: var(--gi-glass-border) !important;
}

/* Pay sections (Owner Op, Per Mile, Per Percentage) */
.pay-section {
  background: var(--gi-bg-secondary) !important;
  border-radius: 10px !important;
}

.pay-section-oo {
  background: rgba(16, 185, 129, 0.08) !important;
  border-left: 4px solid var(--gi-success) !important;
  border-top: 1px solid rgba(16, 185, 129, 0.2) !important;
  border-right: 1px solid rgba(16, 185, 129, 0.2) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.pay-section-pm {
  background: rgba(77, 163, 255, 0.08) !important;
  border-left: 4px solid var(--gi-accent) !important;
  border-top: 1px solid rgba(77, 163, 255, 0.2) !important;
  border-right: 1px solid rgba(77, 163, 255, 0.2) !important;
  border-bottom: 1px solid rgba(77, 163, 255, 0.2) !important;
}

.pay-section-pp {
  background: rgba(245, 158, 11, 0.08) !important;
  border-left: 4px solid var(--gi-warning) !important;
  border-top: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-right: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.pay-section-title {
  color: var(--gi-text) !important;
}

.pay-hint {
  color: var(--gi-text-muted) !important;
}

/* Payment type badges */
.badge-oo {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
}

.badge-pm {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.badge-pp {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.badge-onp {
  background: rgba(167, 139, 250, 0.15) !important;
  color: #A78BFA !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

/* Footer del modal */
#actionModal .modal-footer {
  background: var(--gi-bg-deep) !important;
  border-top: 1px solid var(--gi-glass-border) !important;
  padding: 16px 24px !important;
}

/* Cancel button */
.btn-sf-cancel {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
}

.btn-sf-cancel:hover {
  background: rgba(163, 184, 217, 0.18) !important;
  color: var(--gi-text) !important;
  border-color: rgba(163, 184, 217, 0.4) !important;
}

/* Save button */
.btn-sf-save {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.btn-sf-save:hover {
  background: rgba(77, 163, 255, 0.25) !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ============================================================
   PAYSTUB CHECKBOX CARD - dark theme
   ============================================================ */

/* Card del checkbox "Generate paystubs" */
.pay-section-oo,
.pay-section-pm,
.pay-section-pp {
  margin-top: 14px !important;
  padding: 14px 16px !important;
}

/* Override del fondo verde claro del paystub card */
.pay-section [style*="background:#f0fff4"],
.pay-section [style*="background: #f0fff4"],
.pay-section label[style*="background:#fff"],
.em-section-body [style*="background:#fff"]:not(.modal-content):not(.btn-sf-cancel) {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

/* Cualquier label de checkbox dentro del modal con fondo claro */
.modal label[style*="background"],
.em-section label[style*="background:#fff"],
.em-section-body label.checkbox-card,
.em-section-body label[style*="background:#f"] {
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
}

/* Texto del checkbox label "GENERATE PAYSTUBS FOR THIS DRIVER" */
.pay-section label,
.em-section-body label[style*="cursor:pointer"] {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
}

/* Subtexto del paystub */
.pay-section small,
.pay-section .pay-hint,
.em-section-body small {
  color: var(--gi-text-muted) !important;
}

/* Checkbox propiamente */
.pay-section input[type="checkbox"],
.em-section input[type="checkbox"],
.modal input[type="checkbox"] {
  accent-color: var(--gi-accent) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

/* Owner Operator badge en linea ("Owner Operator" con icono) */
.payment-type-badge.badge-oo,
.em-section-body .payment-type-badge[class*="badge-oo"] {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
}


/* ============================================================
   PAYSTUB SECTION - quitar borde verde y fondo claro
   ============================================================ */

/* Reset completo del pay-section-oo (donde está el checkbox) */
.pay-section-oo {
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-left: none !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-top: 14px !important;
  color: var(--gi-text) !important;
}

.pay-section-pm {
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-left: none !important;
}

.pay-section-pp {
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-left: none !important;
}

/* Todo el texto interior */
.pay-section-oo *,
.pay-section-pm *,
.pay-section-pp * {
  color: var(--gi-text) !important;
}

/* Label "Generate paystubs..." en uppercase */
.pay-section-oo label,
.pay-section-oo > * label {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
  cursor: pointer;
}

/* Subtexto "Uncheck if..." en gris muted */
.pay-section-oo p,
.pay-section-oo small,
.pay-section-oo .text-muted,
.pay-section-oo > p,
.pay-section-oo label + p,
.pay-section-oo label small {
  color: var(--gi-text-muted) !important;
  font-weight: 400 !important;
}


/* ============================================================
   PAYSTUB SECTION - fondo aún más sutil (casi igual al modal)
   ============================================================ */

.pay-section-oo,
.pay-section-pm,
.pay-section-pp {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: none !important;
}

/* Etiqueta del checkbox - más visible */
.pay-section-oo label[for],
.pay-section-oo > label,
.pay-section-pm label[for],
.pay-section-pp label[for] {
  color: var(--gi-text) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}


/* ============================================================
   PAYSTUB CHECKBOX CARD - div interno con inline styles
   ============================================================ */

/* El div interior que tiene background:#f8f9fa inline */
.pay-section-oo > div[style*="background:#f8f9fa"],
.pay-section-oo > div[style*="background: #f8f9fa"],
.pay-section-oo div[style*="margin-top:14px"][style*="background"],
.pay-section-pm > div[style*="background:#f8f9fa"],
.pay-section-pp > div[style*="background:#f8f9fa"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 10px !important;
  border-radius: 0 !important;
}

/* El <p> con color:#67748e inline (subtexto "Uncheck if...") */
.pay-section-oo p[style*="color:#67748e"],
.pay-section-pm p[style*="color:#67748e"],
.pay-section-pp p[style*="color:#67748e"] {
  color: var(--gi-text-muted) !important;
}

/* El <p> wrapper que tiene margin */
.pay-section-oo p[style*="font-size:11px"],
.pay-section-oo p[style*="margin"] {
  color: var(--gi-text-muted) !important;
}


/* ============================================================
   ASSIGN EQUIPMENT PAGE - .eq-* classes dark theme
   ============================================================ */

/* Header del driver */
.eq-page-header {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.eq-driver-name {
  color: var(--gi-text) !important;
}

.eq-driver-sub {
  color: var(--gi-text-muted) !important;
}

/* Avatar - mantener gradiente azul */
.eq-avatar {
  background: linear-gradient(135deg, #1A56C4, #4DA3FF) !important;
  border: 2px solid var(--gi-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(77, 163, 255, 0.3) !important;
}

/* Secciones Trucks y Trailers */
.eq-section {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.eq-section-header {
  border-bottom: 1px solid var(--gi-glass-border) !important;
  background: var(--gi-bg-deep) !important;
}

.eq-section-title {
  color: var(--gi-text) !important;
}

.eq-section-title i {
  color: var(--gi-accent) !important;
}

/* Search inputs */
.eq-search {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 8px !important;
}

.eq-search::placeholder {
  color: var(--gi-text-faint) !important;
}

.eq-search:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

/* Legend bar */
.eq-legend {
  background: var(--gi-bg-secondary) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text-muted) !important;
}

.eq-legend span {
  color: var(--gi-text-muted) !important;
}

/* Rows - estado base */
.eq-row {
  background: var(--gi-bg-primary) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.eq-row:hover:not(.taken):not(.inactive) {
  background: rgba(77, 163, 255, 0.06) !important;
}

/* Row selected (azul) */
.eq-row.selected {
  background: rgba(77, 163, 255, 0.1) !important;
  border-left: 3px solid var(--gi-accent) !important;
}

/* Row current (verde - asignado actualmente) */
.eq-row.current {
  background: rgba(16, 185, 129, 0.08) !important;
  border-left: 3px solid var(--gi-success) !important;
}

/* Row taken (rojo - tomado por otro driver) */
.eq-row.taken {
  background: rgba(239, 68, 68, 0.05) !important;
  opacity: 0.6;
}

/* Row inactive */
.eq-row.inactive {
  background: var(--gi-bg-secondary) !important;
  opacity: 0.5;
}

/* Number e info dentro de row */
.eq-number {
  color: var(--gi-text) !important;
}

.eq-plate,
.eq-type {
  color: var(--gi-text-muted) !important;
}

/* Radio button */
.eq-radio {
  border: 2px solid var(--gi-glass-border) !important;
  background: transparent !important;
}

.eq-radio.checked {
  background: var(--gi-accent) !important;
  border-color: var(--gi-accent) !important;
}

/* Badges */
.eq-badge-available {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.eq-badge-taken {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--gi-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.eq-badge-repair {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.eq-badge-inactive {
  background: var(--gi-bg-secondary) !important;
  color: var(--gi-text-faint) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.eq-badge-current {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
}

/* Driver chip (badge dentro de row taken con info del driver actual) */
.eq-driver-chip {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--gi-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Notes field */
.eq-notes-field,
.eq-notes {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}

.eq-notes-field:focus,
.eq-notes:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

/* Footer del form (Skip + Assign) */
.eq-footer {
  background: var(--gi-bg-primary) !important;
  border-top: 1px solid var(--gi-glass-border) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 12px !important;
  margin-top: 16px !important;
}

/* Skip for now button */
.btn-skip {
  background: rgba(163, 184, 217, 0.08) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

.btn-skip:hover {
  background: rgba(163, 184, 217, 0.15) !important;
  color: var(--gi-text) !important;
}

/* Assign & Continue button - ghost azul */
.btn-assign {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}

.btn-assign:hover {
  filter: brightness(1.1);
}

/* Selected summary "Truck: 08 · Trailer: 2" */
.selected-summary {
  color: var(--gi-accent) !important;
}

/* Scrollbar de la lista */
.eq-list::-webkit-scrollbar {
  width: 6px;
}

.eq-list::-webkit-scrollbar-thumb {
  background: var(--gi-glass-border);
  border-radius: 3px;
}

.eq-list::-webkit-scrollbar-track {
  background: transparent;
}


/* ============================================================
   ASSIGN EQUIPMENT - fixes finales
   ============================================================ */

/* Footer wrapper - el div con inline style "background:#fff" */
.main-content form > div[style*="background:#fff"],
.main-content form > div[style*="background: #fff"],
.main-content form > div[style*="border-radius:12px"][style*="margin-top:16px"] {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

/* Quitar borde verde de Current row */
.eq-row.current {
  background: rgba(16, 185, 129, 0.06) !important;
  border-left: none !important;
}

/* Quitar borde azul de selected row también - usar solo background tint */
.eq-row.selected {
  background: rgba(77, 163, 255, 0.08) !important;
  border-left: none !important;
}

/* Filas Taken - mejorar visibilidad de texto y chip */
.eq-row.taken {
  background: rgba(15, 23, 42, 0.4) !important;
  opacity: 1 !important;  /* quitar el opacity 0.6 */
}

.eq-row.taken .eq-number {
  color: var(--gi-text-faint) !important;
}

.eq-row.taken .eq-plate {
  color: var(--gi-text-faint) !important;
  opacity: 0.7;
}

/* Driver chip dentro de Taken row - más visible */
.eq-row.taken .eq-driver-chip,
.eq-driver-chip {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  font-weight: 600 !important;
}

.eq-row.taken .eq-driver-chip i {
  color: #FCA5A5 !important;
}

/* Badge Taken más visible */
.eq-row.taken .eq-badge-taken {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  font-weight: 700 !important;
}

/* Badge Current igualmente más distintivo (sin borde verde grueso) */
.eq-row.current .eq-badge {
  background: rgba(16, 185, 129, 0.18) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}


/* ============================================================
   ASSIGN EQUIPMENT TAKEN - texto más legible
   ============================================================ */

/* Número de equipment Taken - blanco más legible */
.eq-row.taken .eq-number {
  color: var(--gi-text) !important;
  opacity: 0.85 !important;
}

/* Plate de equipment Taken */
.eq-row.taken .eq-plate {
  color: var(--gi-text-muted) !important;
  opacity: 1 !important;
}

/* Asegurar que .eq-number siempre tenga color claro */
.eq-number {
  color: var(--gi-text) !important;
}

/* Number en filas selected/current también */
.eq-row.selected .eq-number,
.eq-row.current .eq-number {
  color: var(--gi-text) !important;
}


/* ============================================================
   DOCUMENT FORM MODAL - document_form.html dark theme
   ============================================================ */

/* Modal header (blanco) */
.modal-header.bg-white,
.modal .modal-header.bg-white {
  background: var(--gi-bg-deep) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.modal-header .modal-title.text-dark,
.modal .modal-title.text-dark {
  color: var(--gi-text) !important;
}

/* Modal avatar (naranja sólido) → ghost ámbar */
.modal .modal-avatar,
.modal-header .modal-avatar {
  background: rgba(245, 158, 11, 0.2) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: none !important;
}

/* Badge "Create" naranja → ghost ámbar */
.modal .badge.bg-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Modal body con bg-light */
.modal-body.bg-light,
.modal .modal-body.bg-light {
  background: var(--gi-bg-primary) !important;
}

/* Section blocks (CREATE NEW DOCUMENT TYPE / EXISTING) */
.section-block {
  background: var(--gi-bg-primary) !important;
  margin-bottom: 12px !important;
}

.section-header {
  background: var(--gi-bg-deep) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

.section-title {
  color: var(--gi-text) !important;
}

/* Línea gradient naranja debajo del title */
.section-line {
  background: linear-gradient(90deg, var(--gi-warning), rgba(245, 158, 11, 0.3)) !important;
  opacity: 0.5;
}

.section-content {
  background: var(--gi-bg-primary) !important;
}

/* Alert custom naranja (Document types can be assigned...) */
.alert-custom {
  background: rgba(245, 158, 11, 0.08) !important;
  color: var(--gi-text) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-left: 3px solid var(--gi-warning) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.alert-custom i {
  color: var(--gi-warning) !important;
}

/* Input labels */
.input-label {
  color: var(--gi-text-muted) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Input custom */
.form-control-custom {
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
}

.form-control-custom:focus {
  background: var(--gi-bg-secondary) !important;
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-text) !important;
}

.form-control-custom::placeholder {
  color: var(--gi-text-faint) !important;
}

/* Help text (💡 Use descriptive names...) */
.help-text {
  color: var(--gi-text-muted) !important;
}

.help-text i {
  color: var(--gi-warning) !important;
}

/* Documents list - items existentes */
.documents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.document-item {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.document-item:hover {
  background: rgba(77, 163, 255, 0.05) !important;
  border-color: rgba(77, 163, 255, 0.3) !important;
}

.document-icon {
  width: 32px !important;
  height: 32px !important;
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.document-name {
  color: var(--gi-text) !important;
  font-weight: 600 !important;
}

.empty-documents {
  background: transparent !important;
  color: var(--gi-text-muted) !important;
  text-align: center;
  padding: 40px 20px;
}

.empty-documents i.text-muted {
  color: var(--gi-text-faint) !important;
}

/* Modal footer */
.modal-footer.bg-white,
.modal .modal-footer.bg-white {
  background: var(--gi-bg-deep) !important;
  border-top: 1px solid var(--gi-glass-border) !important;
}

/* Cancel button del modal */
.modal .btn.btn-cancel,
.modal-footer .btn.btn-cancel {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
}

.modal .btn.btn-cancel:hover {
  background: rgba(163, 184, 217, 0.18) !important;
  color: var(--gi-text) !important;
}

/* Text danger en validation errors */
.modal .text-danger {
  color: var(--gi-danger) !important;
}

/* Text muted general dentro de modals */
.modal .text-muted,
.modal small.text-muted {
  color: var(--gi-text-muted) !important;
}


/* ============================================================
   DOCUMENT FORM - hover fix + ensure visibility
   ============================================================ */

/* Hover de document-item NO debe ser blanco */
.document-item:hover,
.document-item:focus,
.document-item:active,
.modal .document-item:hover {
  background: rgba(77, 163, 255, 0.12) !important;
  border-color: rgba(77, 163, 255, 0.4) !important;
  color: var(--gi-text) !important;
}

.document-item:hover .document-name,
.modal .document-item:hover .document-name {
  color: var(--gi-text) !important;
}

.document-item:hover .document-icon,
.modal .document-item:hover .document-icon {
  background: rgba(77, 163, 255, 0.25) !important;
  color: var(--gi-accent) !important;
}

/* Asegurar que la sección CREATE NEW DOCUMENT TYPE sea visible (puede estar oculta arriba) */
.section-block:first-child,
.modal .section-block:first-of-type {
  display: block !important;
  visibility: visible !important;
}

/* Si hay scroll dentro del modal, hacerlo visible */
.modal-body {
  overflow-y: auto !important;
  max-height: 70vh !important;
}

/* Modal dialog más alto para que entre todo */
#actionModal .modal-dialog,
.modal-dialog.modal-xl {
  max-height: 90vh !important;
}

#actionModal .modal-content {
  max-height: 90vh !important;
  display: flex;
  flex-direction: column;
}

#actionModal .modal-body {
  flex: 1;
  overflow-y: auto !important;
}

/* Scrollbar del modal */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--gi-glass-border);
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}


/* ============================================================
   DOCUMENT FORM - asegurar visibilidad de Create section
   ============================================================ */

/* Forzar todas las section-block a ser visibles */
.modal .section-block {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: var(--gi-bg-primary) !important;
  margin-bottom: 16px !important;
}

/* Section header visible */
.modal .section-header {
  display: block !important;
  visibility: visible !important;
  background: var(--gi-bg-deep) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  position: relative !important;
}

.modal .section-title {
  display: block !important;
  color: var(--gi-text) !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Section content visible */
.modal .section-content {
  display: block !important;
  padding: 20px !important;
  background: var(--gi-bg-primary) !important;
}

/* Input group custom */
.modal .input-group-custom {
  display: block !important;
  margin-bottom: 12px !important;
}

/* Form control custom (el input "Enter document type name...") */
.modal .form-control-custom,
.modal input.form-control-custom {
  display: block !important;
  width: 100% !important;
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal .form-control-custom:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

.modal .form-control-custom::placeholder {
  color: var(--gi-text-faint) !important;
}

/* Help text con ícono */
.modal .help-text {
  display: block !important;
  color: var(--gi-text-muted) !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

.modal .help-text i {
  color: var(--gi-warning) !important;
}

/* Input label */
.modal .input-label {
  display: block !important;
  color: var(--gi-text-muted) !important;
  margin-bottom: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}


/* ============================================================
   DOCUMENT FORM - hover blanco fix DEFINITIVO
   ============================================================ */

/* Override del hover blanco con MÁXIMA especificidad */
html body div.modal div.modal-content div.modal-body div.section-block div.section-content div.documents-list div.document-item,
html body div.modal-body div.document-item,
.modal-body .document-item {
  background: var(--gi-bg-secondary) !important;
  background-color: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  transition: background 0.15s ease !important;
}

html body div.modal div.modal-content div.modal-body div.section-block div.section-content div.documents-list div.document-item:hover,
html body div.modal-body div.document-item:hover,
.modal-body .document-item:hover,
.document-item:hover {
  background: rgba(77, 163, 255, 0.15) !important;
  background-color: rgba(77, 163, 255, 0.15) !important;
  border-color: rgba(77, 163, 255, 0.4) !important;
  color: var(--gi-text) !important;
}

/* Document name siempre visible */
.document-item .document-name,
.document-item:hover .document-name {
  color: var(--gi-text) !important;
}

/* Document icon visible */
.document-item .document-icon {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
}

.document-item:hover .document-icon {
  background: rgba(77, 163, 255, 0.25) !important;
}


/* ============================================================
   DOCUMENT FORM ITEMS - hover blanco DEFINITIVO con :is() / :where()
   ============================================================ */

/* Nuclear option: TODO el background del item con :not(:hover) y :hover separados */
.modal-body .documents-list .document-item {
  background: var(--gi-bg-secondary) !important;
  background-color: var(--gi-bg-secondary) !important;
  background-image: none !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.modal-body .documents-list .document-item *,
.modal-body .documents-list .document-item .document-name {
  color: var(--gi-text) !important;
}

/* Hover - sin :hover puro, sino con :where para mayor especificidad */
.modal-body .documents-list .document-item:hover,
.modal-body .documents-list .document-item:focus-within,
.modal-body .documents-list .document-item:active {
  background: rgba(77, 163, 255, 0.15) !important;
  background-color: rgba(77, 163, 255, 0.15) !important;
  background-image: none !important;
  border-color: rgba(77, 163, 255, 0.45) !important;
}

.modal-body .documents-list .document-item:hover *,
.modal-body .documents-list .document-item:hover .document-name {
  color: var(--gi-text) !important;
}

/* Document icon */
.modal-body .documents-list .document-item .document-icon {
  background: rgba(77, 163, 255, 0.18) !important;
  background-color: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
}

.modal-body .documents-list .document-item:hover .document-icon {
  background: rgba(77, 163, 255, 0.3) !important;
  background-color: rgba(77, 163, 255, 0.3) !important;
}

/* Eliminar cualquier estilo white inline en items */
.modal-body .document-item[style*="background:white"],
.modal-body .document-item[style*="background:#fff"],
.modal-body .document-item[style*="background: white"],
.modal-body .document-item[style*="background: #fff"] {
  background: var(--gi-bg-secondary) !important;
}


/* ============================================================
   FLEET LIST PAGE - dark theme completo
   ============================================================ */

/* Header banner */
.fleet-header {
  background: linear-gradient(135deg, var(--gi-bg-primary), var(--gi-bg-secondary)) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.fleet-header h5 {
  color: var(--gi-text) !important;
}
.fleet-header p {
  color: var(--gi-text-muted) !important;
}

/* Stat cards */
.fleet-header + * .stat-card,
.row.g-3 .stat-card,
.stat-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  box-shadow: none !important;
  color: var(--gi-text) !important;
}
.stat-card .stat-value,
.stat-card div .stat-value {
  color: var(--gi-text) !important;
}
.stat-card .stat-label,
.stat-card div .stat-label {
  color: var(--gi-text-muted) !important;
}
/* Stat icons: keep their gradient backgrounds but soften them */
.stat-card .stat-icon {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Tabs */
.tab-btn {
  color: var(--gi-text-muted) !important;
  background: none !important;
  border-bottom: 3px solid transparent !important;
}
.tab-btn:hover {
  color: var(--gi-text) !important;
}
.tab-btn.active {
  color: var(--gi-accent) !important;
  border-bottom-color: var(--gi-accent) !important;
}
/* Tabs container border */
div[style*="border-bottom: 2px solid #f0f2f5"] {
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

/* Section cards (Trucks, Trailers containers) */
.section-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  box-shadow: none !important;
}
.section-header {
  background: var(--gi-bg-deep) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.section-header span {
  color: var(--gi-text) !important;
}

/* Vehicle cards (each truck/trailer row) */
.vehicle-card {
  background: transparent !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}
.vehicle-card:last-child {
  border-bottom: none !important;
}
.vehicle-num {
  color: var(--gi-text) !important;
}
.vehicle-meta {
  color: var(--gi-text-muted) !important;
}

/* Status badges */
.status-badge {
  border: 1px solid transparent !important;
}
.status-active {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--gi-success) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.status-repair {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--gi-warning) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
.status-inactive {
  background: rgba(122, 142, 184, 0.12) !important;
  color: var(--gi-text-faint) !important;
  border-color: rgba(122, 142, 184, 0.3) !important;
}

/* Inline status dropdown (small select inside vehicle-card) */
.vehicle-card form select.form-control-sm2 {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 6px !important;
}

/* Document badges */
.doc-badge {
  border: 1px solid transparent !important;
}
.doc-ok {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--gi-success) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}
.doc-warn {
  background: rgba(245, 158, 11, 0.1) !important;
  color: var(--gi-warning) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}
.doc-expired {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--gi-danger) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}
.doc-missing {
  background: rgba(122, 142, 184, 0.1) !important;
  color: var(--gi-text-faint) !important;
  border-color: rgba(122, 142, 184, 0.25) !important;
}

/* Driver assigned chip */
.driver-assigned {
  background: rgba(77, 163, 255, 0.12) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
  border-radius: 6px !important;
}

/* Action buttons (+ Doc, Edit, Delete) - ghost style */
.btn-sm-action {
  border: 1px solid transparent !important;
  transition: all 0.15s ease;
}
.btn-edit {
  background: #1E2A40 !important;
  color: #EAF0FA !important;
  border-color: #233047 !important;
}
.btn-edit:hover {
  background: #24324C !important;
}
.btn-add-doc {
  background: #3B82F6 !important;
  color: #fff !important;
  border-color: transparent !important;
}
.btn-add-doc:hover {
  filter: brightness(1.1);
}
.btn-delete {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #F87171 !important;
  border-color: transparent !important;
}
.btn-delete:hover {
  background: rgba(239, 68, 68, 0.28) !important;
}

/* Inline edit buttons (pencil, trash) next to document badges */
.vehicle-card button[onclick*="toggleForm"][title="Edit"],
.vehicle-card button[style*="color:#1a73e8"] {
  color: var(--gi-accent) !important;
}
.vehicle-card button[style*="color:#E53935"] {
  color: var(--gi-danger) !important;
}

/* Add forms (Add Truck / Edit / Add Doc) */
.add-form {
  background: var(--gi-bg-deep) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 10px !important;
}

/* Form inputs and selects inside add-form */
.add-form .form-control-sm2,
.form-control-sm2 {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 6px !important;
}
.add-form .form-control-sm2:focus,
.form-control-sm2:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
  outline: none !important;
}

/* Form labels */
.add-form .form-group-sm label,
.form-group-sm label {
  color: var(--gi-text-muted) !important;
}

/* Inline edit form (when clicking pencil next to doc) */
.vehicle-card div[id^="edit-truck-doc-"],
.vehicle-card div[id^="edit-trailer-doc-"] {
  background: var(--gi-bg-deep) !important;
  border: 1px solid var(--gi-glass-border) !important;
}
.vehicle-card div[id^="edit-truck-doc-"] label,
.vehicle-card div[id^="edit-trailer-doc-"] label {
  color: var(--gi-text-muted) !important;
}
.vehicle-card div[id^="edit-truck-doc-"] select,
.vehicle-card div[id^="edit-truck-doc-"] input,
.vehicle-card div[id^="edit-trailer-doc-"] select,
.vehicle-card div[id^="edit-trailer-doc-"] input {
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}
.vehicle-card div[id^="edit-truck-doc-"] button[type="submit"],
.vehicle-card div[id^="edit-trailer-doc-"] button[type="submit"] {
  background: rgba(77, 163, 255, 0.2) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
}
.vehicle-card div[id^="edit-truck-doc-"] button[type="button"],
.vehicle-card div[id^="edit-trailer-doc-"] button[type="button"] {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
}

/* Submit buttons (Add Truck, Add Trailer, Add Doc, Save) - ghost azul */
.btn-submit-sm {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
}
.btn-submit-sm:hover {
  filter: brightness(1.1);
}


/* ============================================================
   FLEET LIST - separación visual de cards
   ============================================================ */

/* Container principal con más padding */
body.fleet-page .main-content,
.main-content:has(.fleet-header) {
  padding: 28px !important;
}

/* Header card: gradient más visible + margin bottom mayor */
.fleet-header {
  background: linear-gradient(135deg, var(--gi-bg-primary) 0%, var(--gi-bg-secondary) 100%) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Stats row: gap mayor entre stat cards y margin bottom */
.row.g-3.mb-4,
.row.g-3 {
  margin-bottom: 32px !important;
  gap: 0 !important;
}
.row.g-3 > [class*="col-md"] {
  padding: 0 8px !important;
}

/* Stat cards: borde y sombra para separarse del fondo */
.stat-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease;
}
.stat-card:hover {
  border-color: rgba(77, 163, 255, 0.25) !important;
  transform: translateY(-1px);
}

/* Tabs container: más respiro */
div[style*="border-bottom: 2px solid #f0f2f5"],
div[style*="margin-bottom: 20px"]:has(.tab-btn) {
  border-bottom: 1px solid var(--gi-glass-border) !important;
  margin-bottom: 28px !important;
  padding-bottom: 0 !important;
}

/* Section card (Trucks/Trailers container): sombra y borde definidos */
.section-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
}

/* Section header: distinguido del cuerpo */
.section-header {
  background: rgba(15, 23, 42, 0.5) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  padding: 16px 24px !important;
}
.section-header span {
  color: var(--gi-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Vehicle cards: separación clara entre cada vehículo */
.vehicle-card {
  background: transparent !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  padding: 20px 24px !important;
  transition: background 0.15s ease;
}
.vehicle-card:hover {
  background: rgba(77, 163, 255, 0.03) !important;
}
.vehicle-card:last-child {
  border-bottom: none !important;
}


/* ============================================================
   REPORTS PAGES (loads-by-driver, 1099-by-driver) - dark theme
   ============================================================ */

/* ============ Page header card ============ */
.page-header-card {
  background: linear-gradient(135deg, var(--gi-bg-primary) 0%, var(--gi-bg-secondary) 100%) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
.page-header-card .ph-icon {
  background: rgba(77, 163, 255, 0.18) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
  color: var(--gi-accent) !important;
  box-shadow: none !important;
}
/* En 1099 page, el ph-icon es ámbar */
body[class*="report"] .page-header-card .ph-icon[class*="fa-file-invoice"],
.page-header-card .ph-icon:has(.fa-file-invoice-dollar) {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: var(--gi-warning) !important;
}
.page-header-card h5 {
  color: var(--gi-text) !important;
}
.page-header-card p {
  color: var(--gi-text-muted) !important;
}

/* Back to Reports button */
.btn-back {
  background: rgba(77, 163, 255, 0.12) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}
.btn-back:hover {
  background: rgba(77, 163, 255, 0.22) !important;
  color: var(--gi-accent) !important;
}

/* ============ Filter card ============ */
.filter-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  padding: 22px 26px !important;
}
.filter-card .sf-label {
  color: var(--gi-text-muted) !important;
}
.filter-card .sf-input,
.filter-card .sf-select {
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 8px !important;
}
.filter-card .sf-input:focus,
.filter-card .sf-select:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

/* Generate button - ghost azul */
.btn-generate {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
.btn-generate:hover {
  background: rgba(77, 163, 255, 0.28) !important;
  transform: translateY(-1px);
}

/* ============ Empty state ============ */
.empty-state {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  padding: 50px 30px !important;
  color: var(--gi-text-muted) !important;
}
.empty-state i {
  color: var(--gi-text-faint) !important;
}

/* ============ Year banner (1099 summary) ============ */
.year-banner {
  background: linear-gradient(135deg, var(--gi-bg-primary), var(--gi-bg-secondary)) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-left: 3px solid var(--gi-warning) !important;
  border-radius: 14px !important;
  color: var(--gi-text) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  padding: 20px 24px !important;
}
.year-banner h3 {
  color: var(--gi-text) !important;
}
.year-banner .small {
  color: var(--gi-text-muted) !important;
  opacity: 1 !important;
}
.year-banner .stat-label {
  color: var(--gi-text-muted) !important;
  opacity: 1 !important;
}
.year-banner .stat-value,
.year-banner div[style*="font-size:1.6rem"] {
  color: var(--gi-warning) !important;
}
.year-banner div[style*="opacity:0.85"] {
  color: var(--gi-text-muted) !important;
  opacity: 1 !important;
}

/* ============ Driver banner ============ */
.driver-banner {
  background: linear-gradient(135deg, var(--gi-bg-primary), var(--gi-bg-secondary)) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-left: 3px solid var(--gi-accent) !important;
  border-radius: 14px !important;
  color: var(--gi-text) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
/* 1099 driver banner: borde ámbar */
.year-banner ~ .driver-banner,
.driver-banner.amber {
  border-left-color: var(--gi-warning) !important;
}
.driver-banner h3 {
  color: var(--gi-text) !important;
}
.driver-banner .pt-badge {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
}
.driver-banner .period,
.driver-banner .info {
  color: var(--gi-text-muted) !important;
  opacity: 1 !important;
}
.driver-banner .stat-label {
  color: var(--gi-text-muted) !important;
  opacity: 1 !important;
}
.driver-banner .stat-value {
  color: var(--gi-text) !important;
}
.driver-banner .stat-value.net,
.driver-banner .stat-value.pos {
  color: var(--gi-success) !important;
}
.driver-banner .stat-value.neg {
  color: var(--gi-danger) !important;
}
.driver-banner .stat-value.box1 {
  color: var(--gi-warning) !important;
}
.driver-banner .stats {
  border-top: 1px solid var(--gi-glass-border) !important;
}

/* ============ Report card + table ============ */
.report-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
.report-table thead th {
  background: var(--gi-bg-deep) !important;
  color: var(--gi-text-muted) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.report-table tbody td {
  background: transparent !important;
  color: var(--gi-text) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.report-table tbody tr:hover {
  background: rgba(77, 163, 255, 0.05) !important;
  cursor: pointer;
}
.report-table tfoot td {
  background: rgba(245, 158, 11, 0.08) !important;
  color: var(--gi-text) !important;
  border-top: 2px solid var(--gi-warning) !important;
}

/* Value colors in tables */
.val-green {
  color: var(--gi-success) !important;
}
.val-red {
  color: var(--gi-danger) !important;
}
.val-blue {
  color: var(--gi-accent) !important;
}
.val-orange {
  color: var(--gi-warning) !important;
}
.load-num {
  color: var(--gi-accent) !important;
}

/* Driver link in table */
.driver-link {
  color: var(--gi-accent) !important;
}
.driver-link:hover {
  color: var(--gi-accent-light) !important;
}

/* Badges in tables */
.badge-1099 {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.badge-no-1099 {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
.badge-paid {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
.badge-unpaid {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* "View →" link in table (orange-ish) - convert to ghost ambar */
a[style*="color:#FB8C00"] {
  color: var(--gi-warning) !important;
}

/* Adjustment columns */
.adj-pos { color: var(--gi-success) !important; }
.adj-neg { color: var(--gi-danger) !important; }
.adj-none { color: var(--gi-text-faint) !important; }

/* GRAND TOTAL row */
.report-table tfoot td strong {
  color: var(--gi-text) !important;
}
.report-table tfoot td .val-orange {
  color: var(--gi-warning) !important;
}

/* ============ Print/Export buttons ============ */
.btn-print,
button[onclick="window.print()"] {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-print:hover,
button[onclick="window.print()"]:hover {
  background: rgba(163, 184, 217, 0.18) !important;
  color: var(--gi-text) !important;
}

/* Export CSV link - ghost verde */
a[href*="export=csv"] {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 8px !important;
}
a[href*="export=csv"]:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  color: var(--gi-success) !important;
}


/* ============================================================
   REPORTS DETAIL PAGE - botones de acciones bottom
   ============================================================ */

/* Back to Summary - ghost gris */
a[href*="reports/1099-by-driver"]:not([href*="driver_id"]),
a[href*="?year="][style*="42424a"],
button[onclick*="back"],
a.btn-back-summary {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Download 1099-NEC PDF - ghost ambar (era naranja sólido) */
a[href*="export=pdf"],
a[href*="download"][href*="1099"],
a[href*="1099-nec.pdf"],
a[style*="FB8C00"][style*="background:linear-gradient"],
a[style*="FFA726"][style*="background:linear-gradient"] {
  background: rgba(245, 158, 11, 0.18) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
a[href*="export=pdf"]:hover,
a[href*="download"][href*="1099"]:hover,
a[href*="1099-nec.pdf"]:hover {
  background: rgba(245, 158, 11, 0.28) !important;
  color: var(--gi-warning) !important;
}

/* Export CSV - ghost verde (ya estaba parcial pero refuerzo) */
a[href*="export=csv"],
a[style*="43A047"][style*="background:linear-gradient"],
a[style*="66BB6A"][style*="background:linear-gradient"] {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
a[href*="export=csv"]:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  color: var(--gi-success) !important;
}

/* Print button - ghost gris */
button[onclick="window.print()"],
.btn-print,
button[style*="42424a"][style*="background:linear-gradient"] {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
button[onclick="window.print()"]:hover,
.btn-print:hover {
  background: rgba(163, 184, 217, 0.18) !important;
  color: var(--gi-text) !important;
}

/* Container de los 4 botones - mantener separación */
.action-buttons,
div[style*="display:flex"][style*="gap:10px"][style*="justify-content:center"] {
  gap: 12px !important;
}


/* ============================================================
   REPORTS - Send by Email button (loads-by-driver)
   ============================================================ */

/* Send by Email - convertir azul sólido a ghost azul */
button[onclick*="openEmailModal"],
button[onclick*="email"],
a[onclick*="openEmailModal"],
button.btn-send-email,
button[style*="background:linear-gradient(195deg, #49a3f1"],
button[style*="background:linear-gradient(195deg,#49a3f1"],
button[style*="49a3f1"][style*="1A73E8"] {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
button[onclick*="openEmailModal"]:hover,
button[onclick*="email"]:hover {
  background: rgba(77, 163, 255, 0.28) !important;
  color: var(--gi-accent) !important;
}


/* ============================================================
   PAYROLL LIST PAGE (.pl-* classes) - dark theme
   ============================================================ */

/* Header */
.pl-header {
  background: linear-gradient(135deg, var(--gi-bg-primary), var(--gi-bg-secondary)) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
.pl-header-icon {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
}
.pl-header-title {
  color: var(--gi-text) !important;
}
.pl-header-sub {
  color: var(--gi-text-muted) !important;
}

/* New Paystub button - ghost azul */
.btn-new {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-new:hover {
  filter: brightness(1.1);
  color: #fff !important;
}

/* Filters card */
.pl-filters {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  padding: 18px 22px !important;
}
.pl-filters select {
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
  border-radius: 8px !important;
}
.pl-filters select:focus {
  border-color: var(--gi-accent) !important;
}

/* Filter button - ghost azul */
.btn-filter {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
}
.btn-filter:hover {
  filter: brightness(1.1);
}

/* Clear button - ghost gris */
.btn-clear {
  background: #1E2A40 !important;
  color: #EAF0FA !important;
  border: 1px solid #233047 !important;
  border-radius: 8px !important;
}
.btn-clear:hover {
  background: #24324C !important;
  color: #fff !important;
}

/* Paystub card */
.pl-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.15s ease;
}
.pl-card:hover {
  border-color: rgba(77, 163, 255, 0.3) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

/* Avatar */
.pl-card-avatar {
  background: linear-gradient(135deg, var(--gi-accent), var(--gi-accent-dark)) !important;
  color: #fff !important;
}

/* Paystub number */
.pl-card-num {
  color: var(--gi-accent) !important;
}

/* Driver name */
.pl-card-driver {
  color: var(--gi-text) !important;
}

/* Meta (dates, info) */
.pl-card-meta {
  color: var(--gi-text-muted) !important;
}

/* Badges */
.pl-badge {
  border-width: 1px !important;
}
.pl-badge.draft {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border-color: var(--gi-glass-border) !important;
}
.pl-badge.pending {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--gi-warning) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
.pl-badge.approved {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--gi-success) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.pl-badge.paid {
  background: rgba(77, 163, 255, 0.12) !important;
  color: var(--gi-accent) !important;
  border-color: rgba(77, 163, 255, 0.3) !important;
}
.pl-badge.voided {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--gi-danger) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Net pay */
.pl-card-amount {
  color: var(--gi-success) !important;
}
.pl-card-netlabel {
  color: var(--gi-text-muted) !important;
}

/* View button - ghost azul */
.btn-view {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-view:hover {
  filter: brightness(1.1);
  color: #fff !important;
}

/* Empty state */
.pl-empty {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text-muted) !important;
}
.pl-empty i {
  color: var(--gi-text-faint) !important;
}
.pl-empty a {
  color: var(--gi-accent) !important;
}


/* ============================================================
   PAYROLL DETAIL PAGE (.ps-* .doc-* .sum-* .loads-tbl) - dark
   ============================================================ */

/* Action bar */
.ps-back {
  color: var(--gi-text-muted) !important;
}
.ps-back:hover {
  color: var(--gi-accent) !important;
}

/* Action buttons (Status, Send to Driver) */
.btn-ps {
  border-radius: 8px !important;
  transition: all 0.15s ease;
}
.btn-ps.secondary {
  background: #1E2A40 !important;
  color: #EAF0FA !important;
  border: 1px solid #233047 !important;
}
.btn-ps.secondary:hover {
  background: #24324C !important;
  color: #fff !important;
  opacity: 1 !important;
}
.btn-ps.email {
  background: #3B82F6 !important;
  color: #fff !important;
  border: 0 !important;
}
.btn-ps.email:hover {
  filter: brightness(1.1);
  opacity: 1 !important;
}

/* Status dropdown menu */
.status-dd {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.status-opt {
  color: var(--gi-text) !important;
}
.status-opt:hover {
  background: var(--gi-bg-secondary) !important;
}
.status-opt.cur {
  opacity: 0.4 !important;
}

/* Document card (paystub container) */
.doc-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Header */
.doc-header {
  background: var(--gi-bg-deep) !important;
  border-bottom: 2px solid var(--gi-accent) !important;
}
.company-name {
  color: var(--gi-text) !important;
}
.company-info {
  color: var(--gi-text-muted) !important;
}
.ps-num {
  color: var(--gi-accent) !important;
}
.ps-period {
  color: var(--gi-text-muted) !important;
}

/* Status badges en header */
.ps-badge {
  border: 1px solid transparent !important;
}
.ps-badge.draft {
  background: rgba(163, 184, 217, 0.1) !important;
  color: var(--gi-text-muted) !important;
  border-color: var(--gi-glass-border) !important;
}
.ps-badge.pending {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--gi-warning) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
.ps-badge.approved {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--gi-success) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.ps-badge.paid {
  background: rgba(77, 163, 255, 0.15) !important;
  color: var(--gi-accent) !important;
  border-color: rgba(77, 163, 255, 0.3) !important;
}
.ps-badge.voided {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--gi-danger) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Meta table (Driver, SSN, Address, Email, Type, Issued, Approved) */
.meta-tbl {
  background: transparent !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.meta-tbl td {
  border-right: 1px solid var(--gi-glass-border) !important;
}
.meta-label {
  color: var(--gi-text-muted) !important;
}
.meta-value {
  color: var(--gi-text) !important;
}

/* Summary row (6 cards) */
.summary-row {
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.sum-card {
  border-right: 1px solid var(--gi-glass-border) !important;
}
.sum-label {
  color: var(--gi-text-muted) !important;
}
.sum-card.gross .sum-value {
  color: var(--gi-accent) !important;
}
.sum-card.dispatch .sum-value,
.sum-card.factory .sum-value,
.sum-card.deductions .sum-value {
  color: var(--gi-danger) !important;
}
.sum-card.extras .sum-value {
  color: var(--gi-success) !important;
}
/* Net pay card - ghost azul en lugar de azul sólido */
.sum-card.net {
  background: rgba(77, 163, 255, 0.18) !important;
  border-left: 3px solid var(--gi-accent) !important;
}
.sum-card.net .sum-label {
  color: var(--gi-accent-light) !important;
  opacity: 0.85;
}
.sum-card.net .sum-value {
  color: var(--gi-accent-light) !important;
}

/* Section title */
.sec-title {
  color: var(--gi-text-muted) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}

/* Loads table */
.loads-tbl thead th {
  background: var(--gi-bg-deep) !important;
  color: var(--gi-text-muted) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.loads-tbl tbody td {
  color: var(--gi-text) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  background: transparent !important;
}
.loads-tbl tr.load-row:hover {
  background: rgba(77, 163, 255, 0.05) !important;
}
.loads-tbl tr.load-row.expanded {
  background: rgba(77, 163, 255, 0.1) !important;
  border-left: 3px solid var(--gi-accent) !important;
}
.loads-tbl .load-num {
  color: var(--gi-accent) !important;
}
.loads-tbl .val-green {
  color: var(--gi-success) !important;
}
.loads-tbl .val-red {
  color: var(--gi-danger) !important;
}
.loads-tbl .val-blue {
  color: var(--gi-accent) !important;
}
.chev {
  color: var(--gi-text-muted) !important;
}

/* Empty state row */
.loads-tbl td[colspan] {
  color: var(--gi-text-faint) !important;
}

/* Load detail (expandable) */
.detail-cell {
  background: var(--gi-bg-deep) !important;
  border-bottom: 2px solid var(--gi-accent) !important;
}
.adj-head.extras {
  color: var(--gi-success) !important;
}
.adj-head.deductions {
  color: var(--gi-danger) !important;
}
.adj-tbl th {
  color: var(--gi-text-muted) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.adj-tbl td {
  color: var(--gi-text) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.adj-empty {
  color: var(--gi-text-faint) !important;
}

/* Adjustment buttons */
.btn-add-e {
  background: #22C55E !important;
  color: #fff !important;
  border: 0 !important;
}
.btn-add-d {
  background: #EF4444 !important;
  color: #fff !important;
  border: 0 !important;
}
.btn-edit {
  background: #1E2A40 !important;
  color: #EAF0FA !important;
  border: 1px solid #233047 !important;
}
.btn-del {
  color: #F87171 !important;
}
.btn-del:hover {
  color: #EF4444 !important;
}
.btn-remove {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #F87171 !important;
  border: 0 !important;
}

/* General adjustments */
.gen-adj {
  border-top: 1px solid var(--gi-glass-border) !important;
}
.gen-adj-row {
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.gen-adj-cat {
  color: var(--gi-text) !important;
}
.gen-adj-note {
  color: var(--gi-text-muted) !important;
}

/* Totals row */
.totals-row {
  border-top: 1px solid var(--gi-glass-border) !important;
}
.total-line {
  color: var(--gi-text-muted) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.total-line.net {
  color: var(--gi-text) !important;
  border-top: 2px solid var(--gi-glass-border) !important;
}
.total-line.net .val {
  color: var(--gi-accent) !important;
}

/* ── MODALS (Adjustment + Email) ── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}
.modal-box {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
.modal-head {
  background: var(--gi-bg-deep) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.modal-head h3 {
  color: var(--gi-text) !important;
}
.modal-close {
  color: var(--gi-text-muted) !important;
}
.modal-close:hover {
  color: var(--gi-text) !important;
}

/* Form fields in modals */
.f-field label {
  color: var(--gi-text-muted) !important;
}
.f-field input,
.f-field select {
  background: var(--gi-bg-secondary) !important;
  border: 1.5px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}
.f-field input:focus,
.f-field select:focus {
  border-color: var(--gi-accent) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}

/* Type toggle (Extra / Deduction) */
.type-btn {
  background: var(--gi-bg-secondary) !important;
  border: 2px solid var(--gi-glass-border) !important;
  color: var(--gi-text-muted) !important;
}
.type-btn.extra.active {
  border-color: rgba(16, 185, 129, 0.5) !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--gi-success) !important;
}
.type-btn.deduction.active {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--gi-danger) !important;
}

/* Cancel + Save buttons */
.btn-cancel {
  background: rgba(163, 184, 217, 0.08) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
}
.btn-cancel:hover {
  background: rgba(163, 184, 217, 0.15) !important;
  color: var(--gi-text) !important;
}
.btn-save {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
}
.btn-save:hover {
  background: rgba(77, 163, 255, 0.28) !important;
}

/* Email modal info box */
.modal-body div[style*="background:#f8f9fb"] {
  background: var(--gi-bg-deep) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
}


/* ============================================================
   REFERRAL PAGE (/my-referral/) - dark theme
   ============================================================ */

/* Header con gradient gris - cambiar a dark coherente */
.ref-header {
  background: linear-gradient(135deg, var(--gi-bg-primary), var(--gi-bg-secondary)) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
.ref-header h5 {
  color: var(--gi-text) !important;
}
.ref-header p {
  color: var(--gi-text-muted) !important;
}

/* Stat boxes (Companies referred, Active subscribers, Total discount) */
.stat-box {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  padding: 24px !important;
}
.stat-box .stat-num {
  color: var(--gi-text) !important;
  font-size: 2.4rem !important;
}
.stat-box .stat-num.green {
  color: var(--gi-success) !important;
}
.stat-box .stat-label {
  color: var(--gi-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-top: 8px !important;
}

/* Main referral cards (link card + companies list) */
.ref-card {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Section titles inside cards (h6 with hardcoded color) */
.ref-card h6,
.ref-card h6[style*="color:#344767"],
.ref-card h6[style*="color: #344767"] {
  color: var(--gi-text) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.03em;
}

/* Referral link box (dashed border + link inside) */
.ref-link-box {
  background: var(--gi-bg-deep) !important;
  border: 2px dashed var(--gi-glass-border) !important;
  border-radius: 10px !important;
}
.ref-link-text {
  color: var(--gi-accent) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600;
}

/* Copy link button - ghost azul (era azul sólido) */
.btn-copy {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-copy:hover {
  background: rgba(77, 163, 255, 0.28) !important;
  color: var(--gi-accent) !important;
  opacity: 1 !important;
}

/* Descriptive paragraph below link */
.ref-card p[style*="color:#67748e"],
.ref-card p[style*="color: #67748e"] {
  color: var(--gi-text-muted) !important;
}

/* WhatsApp share button - ghost verde (era verde sólido brillante) */
.whatsapp-btn {
  background: rgba(37, 211, 102, 0.15) !important;
  color: #25D366 !important;
  border: 1px solid rgba(37, 211, 102, 0.4) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.25) !important;
  color: #25D366 !important;
  opacity: 1 !important;
}

/* Companies referred table */
.ref-table {
  background: transparent !important;
}
.ref-table thead th {
  color: var(--gi-text-muted) !important;
  border-bottom: 2px solid var(--gi-glass-border) !important;
  background: transparent !important;
}
.ref-table tbody td {
  color: var(--gi-text) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  background: transparent !important;
}

/* Badges in table */
.ref-table .badge-active {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.ref-table .badge-trial {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Inline strong "Your discount" in table */
.ref-table strong[style*="color:#43A047"],
.ref-table strong[style*="color: #43A047"] {
  color: var(--gi-success) !important;
}
.ref-table span[style*="color:#67748e"],
.ref-table span[style*="color: #67748e"] {
  color: var(--gi-text-muted) !important;
}

/* Empty state "No referrals yet" */
.ref-card div[style*="text-align:center"][style*="color:#67748e"],
.ref-card div[style*="text-align: center"][style*="color: #67748e"] {
  color: var(--gi-text-muted) !important;
  padding: 40px 20px !important;
}


/* ============================================================
   REFERRAL PAGE - fix padding del header (espacio arriba)
   ============================================================ */
.ref-header {
  padding: 28px 32px !important;
  margin-bottom: 24px !important;
}
.ref-header h5 {
  margin: 0 0 6px 0 !important;
  font-size: 1.3rem !important;
}
.ref-header p {
  margin: 0 !important;
  font-size: 0.9rem !important;
}


/* ============================================================
   HELP & FAQ PAGE (/help/ y /help/es/) - dark theme
   ============================================================ */

/* Header con gradient gris */
.help-header {
  background: linear-gradient(135deg, var(--gi-bg-primary), var(--gi-bg-secondary)) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  padding: 28px 32px !important;
}
.help-header h5 {
  color: var(--gi-text) !important;
  font-size: 1.3rem !important;
  margin: 0 0 6px 0 !important;
}
.help-header p {
  color: var(--gi-text-muted) !important;
  font-size: 0.9rem !important;
}

/* Language selector dentro del help-header */
.help-header div[style*="background:rgba(255,255,255"],
.help-header div[style*="background: rgba(255,255,255"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--gi-glass-border) !important;
}
.help-header div[style*="background:rgba(255,255,255"] span,
.help-header div[style*="background: rgba(255,255,255"] span {
  color: var(--gi-text-muted) !important;
}
.help-header a[style*="background:rgba(255,255,255,0.15)"],
.help-header a[style*="background: rgba(255,255,255,0.15)"] {
  background: rgba(77, 163, 255, 0.2) !important;
  border-radius: 6px !important;
}

/* Help contact CTA - era azul brillante sólido */
.help-contact {
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.15), rgba(77, 163, 255, 0.08)) !important;
  border: 1px solid rgba(77, 163, 255, 0.3) !important;
  border-radius: 14px !important;
  color: var(--gi-text) !important;
  padding: 28px 32px !important;
}
.help-contact h6 {
  color: var(--gi-text) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}
.help-contact p {
  color: var(--gi-text-muted) !important;
  opacity: 1 !important;
  font-size: 0.88rem !important;
}

/* WhatsApp button - ghost verde (era verde brillante sólido) */
.btn-whatsapp {
  background: rgba(37, 211, 102, 0.15) !important;
  color: #25D366 !important;
  border: 1px solid rgba(37, 211, 102, 0.4) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.btn-whatsapp:hover {
  background: rgba(37, 211, 102, 0.25) !important;
  color: #25D366 !important;
  opacity: 1 !important;
}

/* FAQ section cards */
.faq-section {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
}

/* Section header */
.faq-section-header {
  background: var(--gi-bg-deep) !important;
  border-bottom: 1px solid var(--gi-glass-border) !important;
  padding: 16px 22px !important;
}
.faq-section-title {
  color: var(--gi-text) !important;
  font-size: 0.95rem !important;
}

/* Section icons - mantener sus gradients (cada categoría tiene su color) */
.faq-section-icon {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* FAQ items */
.faq-item {
  border-bottom: 1px solid var(--gi-glass-border) !important;
}
.faq-question {
  color: var(--gi-text) !important;
  padding: 16px 22px !important;
}
.faq-question:hover {
  background: var(--gi-bg-secondary) !important;
}
.faq-arrow {
  color: var(--gi-text-muted) !important;
}

/* FAQ answer */
.faq-answer {
  color: var(--gi-text-muted) !important;
  background: var(--gi-bg-deep) !important;
  padding: 16px 22px 20px 22px !important;
  border-top: 1px solid var(--gi-glass-border) !important;
  line-height: 1.7 !important;
}
.faq-answer strong {
  color: var(--gi-text) !important;
}
.faq-answer ul li {
  margin-bottom: 6px;
}

/* Tip box (era light blue) */
.faq-answer .tip {
  background: rgba(77, 163, 255, 0.1) !important;
  border-left: 3px solid var(--gi-accent) !important;
  color: var(--gi-text) !important;
  padding: 10px 14px !important;
}

/* Warn box (era light yellow) */
.faq-answer .warn {
  background: rgba(245, 158, 11, 0.1) !important;
  border-left: 3px solid var(--gi-warning) !important;
  color: var(--gi-text) !important;
  padding: 10px 14px !important;
}


/* ============================================================
   AUDIT LOG PAGE (/audit/) - pulir botones y date pickers
   ============================================================ */

/* Export CSV button - ghost azul */
a[href*="audit_log_export_csv"],
a[href*="/audit/export"],
.container-fluid a.btn[style*="background:#4a9af4"] {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
a[href*="audit_log_export_csv"]:hover,
a[href*="/audit/export"]:hover {
  background: rgba(77, 163, 255, 0.28) !important;
  color: var(--gi-accent) !important;
}

/* Apply Filters button - era negro brutal, ghost azul */
button[type="submit"].btn-sm[style*="background:#0f1117"],
form button[type="submit"][style*="background:#0f1117"] {
  background: rgba(77, 163, 255, 0.18) !important;
  color: var(--gi-accent) !important;
  border: 1px solid rgba(77, 163, 255, 0.4) !important;
  border-radius: 8px !important;
}
button[type="submit"].btn-sm[style*="background:#0f1117"]:hover {
  background: rgba(77, 163, 255, 0.28) !important;
}

/* Clear button - ghost gris */
.container-fluid a.btn-sm[style*="background:#f0f0f5"],
a[href*="audit_log_list"][class*="btn"] {
  background: rgba(163, 184, 217, 0.08) !important;
  color: var(--gi-text-muted) !important;
  border: 1px solid var(--gi-glass-border) !important;
  border-radius: 8px !important;
}
.container-fluid a.btn-sm[style*="background:#f0f0f5"]:hover {
  background: rgba(163, 184, 217, 0.15) !important;
  color: var(--gi-text) !important;
}

/* Header h2 "Audit Log" en page */
.container-fluid h2[style*="color:#0f1117"] {
  color: var(--gi-text) !important;
}

/* Card backgrounds - filters + table */
.container-fluid .card.shadow-sm[style*="background:#fff"] {
  background: var(--gi-bg-primary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Filter labels */
.container-fluid label[style*="color:#5a6a8a"] {
  color: var(--gi-text-muted) !important;
}

/* Form inputs/selects en filtros */
.container-fluid .form-control-sm,
.container-fluid .form-select-sm {
  background: var(--gi-bg-secondary) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}
.container-fluid .form-control-sm:focus,
.container-fluid .form-select-sm:focus {
  background: var(--gi-bg-secondary) !important;
  border-color: var(--gi-accent) !important;
  color: var(--gi-text) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
}
.container-fluid .form-control-sm::placeholder {
  color: var(--gi-text-faint) !important;
}

/* Total records label */
.container-fluid span.ms-auto[style*="color:#67748e"] {
  color: var(--gi-text-muted) !important;
}

/* Tabla */
.container-fluid table.table {
  color: var(--gi-text) !important;
  background: transparent !important;
}
.container-fluid table.table thead[style*="background:#f8f9fb"] {
  background: var(--gi-bg-deep) !important;
}
.container-fluid table.table thead tr[style*="color:#5a6a8a"] {
  color: var(--gi-text-muted) !important;
}
.container-fluid table.table tbody tr {
  border-top: 1px solid var(--gi-glass-border) !important;
  background: transparent !important;
}
.container-fluid table.table tbody td {
  background: transparent !important;
  color: var(--gi-text) !important;
}
.container-fluid table.table tbody td[style*="color:#67748e"] {
  color: var(--gi-text-muted) !important;
}
.container-fluid table.table tbody td[style*="color:#0f1117"] {
  color: var(--gi-text) !important;
}

/* Entity link en azul */
.container-fluid table.table tbody td span[style*="color:#0f1117"] {
  color: var(--gi-text) !important;
}

/* Action badges - mantener pero ghost */
.container-fluid span[style*="background:#e6f4ea"][style*="color:#1e7e34"] {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--gi-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.container-fluid span[style*="background:#fff3cd"][style*="color:#856404"] {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gi-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.container-fluid span[style*="background:#f8d7da"][style*="color:#721c24"] {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--gi-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* "X fields changed" summary */
.container-fluid details summary[style*="color:#4a9af4"] {
  color: var(--gi-accent) !important;
}

/* Diff box dentro de details */
.container-fluid details div[style*="background:#f8f9fb"] {
  background: var(--gi-bg-deep) !important;
  border: 1px solid var(--gi-glass-border) !important;
  color: var(--gi-text) !important;
}
.container-fluid details strong[style*="color:#0f1117"] {
  color: var(--gi-text) !important;
}
.container-fluid details span[style*="color:#5a6a8a"] {
  color: var(--gi-text-muted) !important;
}
.container-fluid details span[style*="color:#c0392b"] {
  color: var(--gi-danger) !important;
  opacity: 0.85;
}
.container-fluid details span[style*="color:#1e7e34"] {
  color: var(--gi-success) !important;
}

/* IP column */
.container-fluid table.table tbody td[style*="font-family:Menlo"] {
  color: var(--gi-text-muted) !important;
}

/* "—" empty cells */
.container-fluid span[style*="color:#aaa"][style*="font-style:italic"] {
  color: var(--gi-text-faint) !important;
}

/* Empty state */
.container-fluid table tr td.text-center[style*="color:#aaa"] {
  color: var(--gi-text-muted) !important;
}

/* ============================================================
   GI2 — Componentes del nuevo look (calcado del mockup)
   Un color, un significado. Reutilizable en toda la app.
   ============================================================ */
.gi2-wrap { max-width: 1180px; margin: 0 auto; }
.gi2-card {
  background: #131C2E; border: 1px solid #233047;
  border-radius: 18px; padding: 22px 24px;
}
.gi2-card + .gi2-card { margin-top: 16px; }
.gi2-row { display: flex; gap: 16px; flex-wrap: wrap; }
.gi2-row > * { flex: 1; min-width: 200px; }

.gi2-label { font-size: 12px; font-weight: 600; color: #8A98B5; margin: 0 0 6px; }
.gi2-h1 { font-size: 26px; font-weight: 800; color: #F1F5FB; margin: 4px 0; }
.gi2-muted { color: #8A98B5; font-size: 13px; }
.gi2-divider { height: 1px; background: #233047; border: 0; margin: 18px 0; }

.gi2-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 10px;
  white-space: nowrap;
}
.gi2-pill--blue  { color: #60A5FA; background: rgba(59,130,246,.14); }
.gi2-pill--amber { color: #FBBF24; background: rgba(245,158,11,.14); }
.gi2-pill--red   { color: #F87171; background: rgba(239,68,68,.14); }
.gi2-pill--green { color: #4ADE80; background: rgba(34,197,94,.14); }

.gi2-stat { background: #131C2E; border: 1px solid #233047; border-radius: 18px; padding: 20px 22px; }
.gi2-stat .v { font-size: 34px; font-weight: 800; color: #F1F5FB; line-height: 1.1; margin: 8px 0 4px; }

.gi2-evt { display: flex; align-items: center; gap: 14px; padding: 16px 2px; }
.gi2-evt + .gi2-evt { border-top: 1px solid #233047; }
.gi2-tile {
  width: 44px; height: 44px; border-radius: 12px; background: #1E2A40;
  color: #9DB0CE; display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.gi2-evt .t { font-size: 15px; font-weight: 700; color: #EAF0FA; }
.gi2-evt .s { font-size: 13px; color: #8A98B5; margin-top: 2px; }

.gi2-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: #3B82F6; color: #fff; border: 0;
  border-radius: 14px; padding: 16px; font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.gi2-btn:hover { background: #2563EB; color: #fff; }
.gi2-warn { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #F87171; }

/* ============================================================
   Botones de accion ghost inline -> SOLIDO por color, TODA la app
   (cubre +Add X / New X / acciones en todas las vistas).
   ============================================================ */
a[style*="rgba(77,163,255"], a[style*="rgba(77, 163, 255"],
button[style*="rgba(77,163,255"], button[style*="rgba(77, 163, 255"] {
  background: #3B82F6 !important; color: #fff !important; border: 0 !important;
}
a[style*="rgba(34,197,94"], a[style*="rgba(34, 197, 94"],
button[style*="rgba(34,197,94"], button[style*="rgba(34, 197, 94"] {
  background: #22C55E !important; color: #fff !important; border: 0 !important;
}
a[style*="rgba(245,158,11"], a[style*="rgba(245, 158, 11"],
button[style*="rgba(245,158,11"], button[style*="rgba(245, 158, 11"] {
  background: #F59E0B !important; color: #1A1206 !important; border: 0 !important;
}
a[style*="rgba(239,68,68"], a[style*="rgba(239, 68, 68"],
button[style*="rgba(239,68,68"], button[style*="rgba(239, 68, 68"] {
  background: #EF4444 !important; color: #fff !important; border: 0 !important;
}
a[style*="rgba(77,163,255"]:hover, button[style*="rgba(77,163,255"]:hover,
a[style*="rgba(34,197,94"]:hover, button[style*="rgba(34,197,94"]:hover,
a[style*="rgba(245,158,11"]:hover, button[style*="rgba(245,158,11"]:hover,
a[style*="rgba(239,68,68"]:hover, button[style*="rgba(239,68,68"]:hover {
  filter: brightness(1.1);
}

/* Bootstrap bg-white / bg-light -> superficie navy (app-wide) */
.bg-white, .bg-light {
  background: #131C2E !important;
  color: var(--gi-text) !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Block 1: Typography
   Adds the futuristic cyan-gradient + soft glow + tracked letters to
   page titles, section titles, and KPI numbers. Everything here uses
   !important to win over earlier rules in this file.
   ================================================================= */

/* Topbar title (base.html) — the row that says "Live Ops Center" with
   the neon bolt. Light tracking + cyan glow. Bold gradient only on the
   text characters (not the SVG bolt — that has its own styling). */
.topbar-title {
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #E0F2FE !important;
  text-shadow:
    0 0 6px rgba(56, 189, 248, 0.35),
    0 0 14px rgba(14, 165, 233, 0.15) !important;
}

/* Page header titles (per-screen title in big card at top). Cyan gradient. */
.page-header-title {
  background: linear-gradient(95deg, #E0F2FE 10%, #7DD3FC 45%, #38BDF8 80%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}

/* Section / card titles across the app. Subtle tracking + cyan text tint,
   no gradient (would compete with KPI numbers and the page header). */
.card-title,
.db-card-title,
.section-title,
.form-section-title,
.detail-card-title,
.em-section-title,
.pay-section-title,
.eq-section-title {
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #BAE6FD !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.18) !important;
}

/* Numeric monospace family — applied to KPI numbers, load #, miles, and
   any element marked with .ai-num. Monospace gives the "control panel"
   feel and keeps digits column-aligned. */
.kpi-num,
.ai-num {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'SFMono-Regular',
               ui-monospace, 'Menlo', 'Consolas', monospace !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.25) !important;
}

/* Inline glow accent for the data prefix on load identifiers like #L-1234.
   Apply by wrapping the # in a .ai-hash span (templates can opt-in). */
.ai-hash {
  color: #38BDF8 !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6) !important;
  font-weight: 700 !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Block 2: KPI cards
   Glass-style cyan border, hover glow, shimmer sweep on hover, and
   drop-shadow on icons. Per-variant label colors (active/pending/
   delayed/delivered/revenue) are preserved so semantic color stays.
   ================================================================= */
.kpi-card {
  background:
    linear-gradient(140deg, rgba(56, 189, 248, 0.05) 0%, transparent 55%),
    var(--gi-bg-primary) !important;
  border: 1px solid rgba(56, 189, 248, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.06) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
.kpi-card:hover {
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow:
    0 6px 24px -4px rgba(14, 165, 233, 0.35),
    inset 0 1px 0 rgba(125, 211, 252, 0.12),
    0 0 0 1px rgba(56, 189, 248, 0.22) !important;
  transform: translateY(-3px) !important;
}
/* Shimmer sweep — a soft cyan band crosses the card on hover. Uses ::after
   so the existing card content/layout is untouched. */
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(125, 211, 252, 0.12), transparent);
  pointer-events: none;
  transition: left 0.9s ease;
  z-index: 0;
}
.kpi-card:hover::after { left: 140%; }
/* Make sure interactive content sits above the shimmer pseudo. */
.kpi-card > * { position: relative; z-index: 1; }

/* Icon tile — cyan accent border + soft inner glow. Variant background
   colors below still override the tint so each KPI keeps its identity. */
.kpi-icon {
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  box-shadow:
    0 0 10px rgba(56, 189, 248, 0.12),
    inset 0 0 6px rgba(125, 211, 252, 0.08) !important;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.kpi-card:hover .kpi-icon {
  box-shadow:
    0 0 16px rgba(56, 189, 248, 0.4),
    inset 0 0 8px rgba(125, 211, 252, 0.18) !important;
  transform: scale(1.05);
}
/* Icon symbol itself (FontAwesome <i>, SVG, or emoji-in-span). The glow
   color follows the parent label color so pending icons glow amber, etc. */
.kpi-icon i,
.kpi-icon svg {
  filter: drop-shadow(0 0 4px currentColor);
}
/* Variant-specific icon glow colors (matches the variant label colors). */
.kpi-active .kpi-icon i,
.kpi-active .kpi-icon svg { color: var(--gi-accent); }
.kpi-pending .kpi-icon i,
.kpi-pending .kpi-icon svg { color: var(--gi-warning); }
.kpi-delayed .kpi-icon i,
.kpi-delayed .kpi-icon svg { color: var(--gi-danger); }
.kpi-delivered .kpi-icon i,
.kpi-delivered .kpi-icon svg { color: var(--gi-success); }
.kpi-revenue .kpi-icon i,
.kpi-revenue .kpi-icon svg { color: #A78BFA; }

/* KPI number glow — refresh-of-data pulse. Add the .ai-refreshing class to
   .kpi-num programmatically (or to .kpi-card to pulse all numbers) and the
   number flashes a cyan ring once. Use it from the dashboard JS when the
   periodic KPI poll completes. */
.ai-refreshing {
  animation: aiRefreshPulse 0.9s ease-out 1;
}
@keyframes aiRefreshPulse {
  0%   { text-shadow: 0 0 10px rgba(56, 189, 248, 0.25); }
  40%  { text-shadow: 0 0 18px rgba(56, 189, 248, 0.95), 0 0 4px rgba(255,255,255,0.6); }
  100% { text-shadow: 0 0 10px rgba(56, 189, 248, 0.25); }
}

/* =================================================================
   AI OPERATIONS CENTER — Block 3: Tables, rows, status badges
   Cyan-gradient row separator, hover with left-edge accent and glow,
   table headers tracked + cyan-tinted, status badges with halo.
   ================================================================= */

/* Row separator: faint cyan gradient that fades from accent to transparent
   along the row, so the table reads as a stack of subtle plasma lines.
   Applies to .load-row, .driver-status-row, generic <tr> in app tables,
   and any opt-in element marked .ai-row. */
.load-row,
.driver-status-row,
.ai-row,
.gi-table tbody tr,
table.table tbody tr {
  border-bottom: 1px solid transparent !important;
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(90deg, rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0.06) 40%, transparent 100%) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 1px !important;
  background-position: 0 0, 0 100% !important;
  position: relative;
  transition: background-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease !important;
}
/* Hover state — left-edge cyan accent bar + soft inner glow tinting the row
   without overpowering the cell content. Uses inset shadow so no layout shift. */
.load-row:hover,
.driver-status-row:hover,
.ai-row:hover,
.gi-table tbody tr:hover,
table.table tbody tr:hover {
  background-color: rgba(56, 189, 248, 0.05) !important;
  box-shadow:
    inset 3px 0 0 #38BDF8,
    inset 0 0 20px rgba(56, 189, 248, 0.06) !important;
}
/* Table headers — uppercase tracked label with cyan tint, mirrors the
   card-title styling from block 1. */
.gi-table thead th,
table.table thead th,
.ai-th {
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7DD3FC !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.25) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18) !important;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent) !important;
}

/* Status badges — halo glow per variant. The earlier badge background +
   color rules at lines 628-646 stay; we add the halo on top via shadows
   and a 1px border in the matching tint. The "active" variant pulses
   subtly to suggest "live". */
.status-badge {
  border-radius: 8px !important;
  padding: 3px 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 1px solid transparent !important;
}
.status-badge.status-active {
  border-color: rgba(74, 154, 244, 0.45) !important;
  box-shadow: 0 0 10px rgba(74, 154, 244, 0.35), inset 0 0 6px rgba(74, 154, 244, 0.18) !important;
  text-shadow: 0 0 6px rgba(74, 154, 244, 0.7) !important;
  animation: aiBadgePulse 2.2s ease-in-out infinite;
}
.status-badge.status-pending {
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.30), inset 0 0 6px rgba(251, 191, 36, 0.18) !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.6) !important;
}
.status-badge.status-delayed {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35), inset 0 0 6px rgba(239, 68, 68, 0.18) !important;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.7) !important;
}
.status-badge.status-done,
.status-badge.status-delivered {
  border-color: rgba(34, 197, 94, 0.45) !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.30), inset 0 0 6px rgba(34, 197, 94, 0.18) !important;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.65) !important;
}
@keyframes aiBadgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(74, 154, 244, 0.35), inset 0 0 6px rgba(74, 154, 244, 0.18); }
  50%      { box-shadow: 0 0 16px rgba(74, 154, 244, 0.55), inset 0 0 8px rgba(74, 154, 244, 0.25); }
}

/* Payroll/general badges (paid/unpaid, 1099, OO/PM/PP/ONP, etc.) — give
   them the same halo treatment using currentColor so each keeps its tint. */
.badge-paid,
.badge-unpaid,
.badge-1099,
.badge-no-1099,
.badge-oo,
.badge-pm,
.badge-pp,
.badge-onp {
  border: 1px solid currentColor !important;
  box-shadow: 0 0 8px currentColor, inset 0 0 5px rgba(255,255,255,0.04) !important;
  filter: saturate(1.1);
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Block 4: Buttons (CTAs)
   Primary buttons become cyan->blue gradient CTAs with glow and a
   sweep shimmer on hover. Add-style buttons (.btn-add-*) and quick
   actions (.qa-btn) get the cyan glass border treatment.
   ================================================================= */

/* Primary buttons — glass cyan look (matches the STATUS button look:
   subtle bg + cyan border + uppercase tracking + cyan glow on hover).
   Use the opt-in .ai-cta-solid class instead when a button needs the
   stronger filled-gradient CTA treatment. */
.btn-primary,
.btn-ps,
.btn-create,
.btn-add-stop,
.btn-add-leg,
.btn-add-leg-btn,
.btn-add-leg-toggle,
.btn-add-doc,
.rwi-popup-notify,
.ai-cta {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: var(--gi-radius-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(125, 211, 252, 0.10),
    0 0 0 0 rgba(56, 189, 248, 0) !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.btn-primary:hover,
.btn-ps:hover,
.btn-create:hover,
.btn-add-stop:hover,
.btn-add-leg:hover,
.btn-add-leg-btn:hover,
.btn-add-leg-toggle:hover,
.btn-add-doc:hover,
.rwi-popup-notify:hover,
.ai-cta:hover {
  transform: translateY(-1px) !important;
  background: rgba(56, 189, 248, 0.18) !important;
  color: #F0F9FF !important;
  border-color: rgba(56, 189, 248, 0.85) !important;
  box-shadow:
    0 0 16px rgba(56, 189, 248, 0.40),
    0 0 0 1px rgba(56, 189, 248, 0.55),
    inset 0 0 10px rgba(56, 189, 248, 0.15) !important;
}

/* Opt-in strong CTA — the filled gradient look (use for max emphasis
   like a "Send to driver" hero button). Add class="ai-cta-solid". */
.ai-cta-solid,
.btn-primary.ai-cta-solid,
.ai-cta.ai-cta-solid {
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #0284C7 100%) !important;
  color: #F0F9FF !important;
  border: 1px solid rgba(186, 230, 253, 0.45) !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45), inset 0 1px 0 rgba(224, 242, 254, 0.30) !important;
  text-shadow: 0 0 6px rgba(186, 230, 253, 0.6) !important;
}
.ai-cta-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.6), inset 0 1px 0 rgba(224, 242, 254, 0.45) !important;
  filter: saturate(1.15) brightness(1.05);
}
.btn-primary:active,
.btn-ps:active,
.btn-create:active,
.ai-cta:active {
  transform: translateY(0) !important;
  filter: brightness(0.95);
}

/* Sweep shimmer — a glossy diagonal band passes across primary buttons on
   hover, reinforcing the "live system" feel. */
.btn-primary::before,
.btn-ps::before,
.btn-create::before,
.btn-add-stop::before,
.btn-add-leg::before,
.btn-add-leg-btn::before,
.btn-add-leg-toggle::before,
.btn-add-doc::before,
.rwi-popup-notify::before,
.ai-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-ps:hover::before,
.btn-create:hover::before,
.btn-add-stop:hover::before,
.btn-add-leg:hover::before,
.btn-add-leg-btn:hover::before,
.btn-add-leg-toggle:hover::before,
.btn-add-doc:hover::before,
.rwi-popup-notify:hover::before,
.ai-cta:hover::before {
  left: 130%;
}
/* Make sure button label/icon sit above the shimmer. */
.btn-primary > *,
.btn-ps > *,
.btn-create > *,
.btn-add-stop > *,
.btn-add-leg > *,
.btn-add-leg-btn > *,
.btn-add-leg-toggle > *,
.btn-add-doc > *,
.rwi-popup-notify > *,
.ai-cta > * { position: relative; z-index: 1; }

/* Secondary / outlined variant — same palette but transparent body and
   cyan stroke. Opt-in with .btn-primary.secondary or .ai-cta.secondary. */
.btn-primary.secondary,
.btn-ps.secondary,
.ai-cta.secondary {
  background: rgba(56, 189, 248, 0.08) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow:
    0 0 0 0 transparent,
    inset 0 0 8px rgba(56, 189, 248, 0.10) !important;
  text-shadow: 0 0 4px rgba(56, 189, 248, 0.4) !important;
}
.btn-primary.secondary:hover,
.btn-ps.secondary:hover,
.ai-cta.secondary:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 6px 20px rgba(14, 165, 233, 0.25),
    inset 0 0 10px rgba(56, 189, 248, 0.18) !important;
}

/* Quick action chips (.qa-btn) — glass cyan tile look. */
.qa-btn {
  background: rgba(56, 189, 248, 0.06) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  color: #E0F2FE !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.18s ease;
}
.qa-btn:hover {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
  box-shadow:
    0 4px 16px rgba(14, 165, 233, 0.25),
    inset 0 0 8px rgba(56, 189, 248, 0.18) !important;
  transform: translateY(-1px) !important;
}
.qa-btn-icon {
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}

/* =================================================================
   AI OPERATIONS CENTER — Block 5: Notifications + Sidebar scan
   Notification bell with cyan glow, notification badge with pulsing
   halo, sidebar with subtle scan-line effect, active nav with cyan
   accent.
   ================================================================= */

/* Notification bell button — cyan glow rim. Wins over the inline style on
   base.html by being more specific via #notifBellBtn. */
#notifBellBtn {
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  background: rgba(14, 165, 233, 0.10) !important;
  color: #38BDF8 !important;
  box-shadow:
    inset 0 0 8px rgba(56, 189, 248, 0.12),
    0 0 0 0 rgba(56, 189, 248, 0) !important;
  transition: box-shadow 0.25s ease, background 0.2s ease, transform 0.18s ease !important;
}
#notifBellBtn:hover {
  background: rgba(14, 165, 233, 0.18) !important;
  box-shadow:
    inset 0 0 10px rgba(56, 189, 248, 0.22),
    0 0 16px rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-1px);
}
#notifBellBtn > i {
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.65));
}
/* Pulsing bell whenever the badge is visible (data attribute set by JS or
   class added when there are unread notifs). */
#notifBellBtn.has-unread > i {
  animation: aiBellRing 2.6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes aiBellRing {
  0%, 70%, 100% { transform: rotate(0); }
  74%           { transform: rotate(8deg); }
  78%           { transform: rotate(-7deg); }
  82%           { transform: rotate(6deg); }
  86%           { transform: rotate(-5deg); }
  90%           { transform: rotate(3deg); }
  94%           { transform: rotate(-2deg); }
}

/* Notification badge — keep red center for urgency semantics, surround with
   a pulsing cyan halo so it reads as a live signal instead of a static dot. */
#notifBadge {
  position: relative;
  background: #EF4444 !important;
  border: 2px solid #0F172A !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.55),
    0 0 12px rgba(56, 189, 248, 0.55),
    0 0 4px rgba(239, 68, 68, 0.7) !important;
  animation: aiNotifBadgePulse 1.8s ease-out infinite;
  z-index: 2;
}
@keyframes aiNotifBadgePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.55), 0 0 10px rgba(56, 189, 248, 0.50), 0 0 4px rgba(239, 68, 68, 0.7); }
  50%      { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.10), 0 0 20px rgba(56, 189, 248, 0.85), 0 0 8px rgba(239, 68, 68, 0.9); }
}

/* Notification dropdown panel — cyan glass border. */
#notifPanel {
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.15),
    inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
}
/* Toast bottom-right — match cyan glass look. */
#toast-notification {
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(56, 189, 248, 0.25),
    inset 0 1px 0 rgba(125, 211, 252, 0.10) !important;
  background: linear-gradient(140deg, rgba(56, 189, 248, 0.06), transparent 60%), #131C2E !important;
}

/* Active nav item — cyan left-edge accent + soft cyan tint + inset glow. */
.sidebar-link.active,
.sidebar a.active,
.nav-item.active {
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.02) 80%),
    var(--gi-bg-secondary) !important;
  box-shadow:
    inset 3px 0 0 #38BDF8,
    inset 0 0 16px rgba(56, 189, 248, 0.10) !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
}
.sidebar-link.active i,
.sidebar a.active i,
.nav-item.active i {
  color: #38BDF8 !important;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.65));
}
.sidebar-link:hover i,
.sidebar a:hover i,
.nav-item:hover i {
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.35));
  transition: filter 0.15s ease;
}

/* =================================================================
   AI OPERATIONS CENTER — Block 6: Forms (inputs, selects, focus)
   Inputs become cyan-glass surfaces with tracked uppercase labels and
   a strong neon focus ring. Validation states (invalid/valid) preserve
   semantic color but gain the matching halo.
   ================================================================= */

/* Labels — uppercase tracked, cyan tint, slight glow. Applies to Bootstrap
   .form-label, generic .form-group > label, and any opt-in .ai-label. */
.form-label,
.form-group > label,
.form-group label,
.ai-label {
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7DD3FC !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.25) !important;
  margin-bottom: 6px !important;
}

/* Inputs / selects / textareas — cyan glass surface. */
.form-control,
.form-select,
.form-control-custom,
.form-control-sm2,
input[type="text"]:not([class*="rwi-"]):not(.choices__input),
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea:not(.choices__input),
select {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.03), rgba(11, 18, 32, 0.4)) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  color: #E0F2FE !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.04) !important;
  transition: border-color 0.18s ease, box-shadow 0.22s ease, background 0.18s ease !important;
}
/* Hover (when not focused) */
.form-control:hover:not(:focus),
.form-select:hover:not(:focus),
.form-control-custom:hover:not(:focus),
.form-control-sm2:hover:not(:focus),
input[type="text"]:hover:not(:focus):not([class*="rwi-"]):not(.choices__input),
input[type="email"]:hover:not(:focus),
input[type="number"]:hover:not(:focus),
input[type="password"]:hover:not(:focus),
input[type="search"]:hover:not(:focus),
input[type="tel"]:hover:not(:focus),
input[type="url"]:hover:not(:focus),
input[type="date"]:hover:not(:focus),
input[type="time"]:hover:not(:focus),
input[type="datetime-local"]:hover:not(:focus),
textarea:hover:not(:focus):not(.choices__input),
select:hover:not(:focus) {
  border-color: rgba(56, 189, 248, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(125, 211, 252, 0.06),
    0 0 0 1px rgba(56, 189, 248, 0.10) !important;
}
/* Focus — neon cyan ring + outer glow + slightly brighter background. */
.form-control:focus,
.form-select:focus,
.form-control-custom:focus,
.form-control-sm2:focus,
input[type="text"]:focus:not([class*="rwi-"]):not(.choices__input),
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus:not(.choices__input),
select:focus {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.07), rgba(11, 18, 32, 0.5)) !important;
  border-color: #38BDF8 !important;
  color: #F0F9FF !important;
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.18),
    0 0 16px rgba(14, 165, 233, 0.35),
    inset 0 1px 0 rgba(125, 211, 252, 0.10) !important;
}
/* Placeholder text */
.form-control::placeholder,
.form-select::placeholder,
.form-control-custom::placeholder,
.form-control-sm2::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(189, 211, 230, 0.4) !important;
  font-style: normal !important;
}

/* Native select arrow — give it a faint cyan tint via background gradient. */
.form-select,
select.form-control {
  background-image:
    linear-gradient(45deg, transparent 50%, #38BDF8 50%),
    linear-gradient(135deg, #38BDF8 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat, no-repeat !important;
  padding-right: 30px !important;
  appearance: none !important;
}

/* Validation states — preserve semantic color, add matching halo. */
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid,
textarea.is-invalid {
  border-color: rgba(239, 68, 68, 0.7) !important;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.15),
    0 0 12px rgba(239, 68, 68, 0.35) !important;
}
.form-control.is-valid,
.form-select.is-valid,
input.is-valid,
textarea.is-valid {
  border-color: rgba(34, 197, 94, 0.7) !important;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.15),
    0 0 12px rgba(34, 197, 94, 0.35) !important;
}

/* Checkboxes / radios — cyan accent color (modern browsers). */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: #38BDF8 !important;
}
.form-check-input:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22) !important;
  outline: none !important;
}

/* Choices.js dropdowns — cyan glass container, options hover glow, selected
   chip in cyan. The plugin already auto-inits selects in base.html, so this
   style applies to most selects across the app. */
.choices__inner {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.04), rgba(11, 18, 32, 0.4)) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  color: #E0F2FE !important;
  border-radius: 10px !important;
  min-height: 38px !important;
  transition: border-color 0.18s ease, box-shadow 0.22s ease !important;
}
.choices[data-type*="select-one"]::after {
  border-color: #38BDF8 transparent transparent transparent !important;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: #38BDF8 !important;
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.18),
    0 0 16px rgba(14, 165, 233, 0.35) !important;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: #0F1B33 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(56, 189, 248, 0.15) !important;
  border-radius: 10px !important;
  margin-top: 4px !important;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: #E0F2FE !important;
  padding: 8px 12px !important;
  transition: background 0.12s ease;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0.02)) !important;
  box-shadow: inset 3px 0 0 #38BDF8 !important;
  color: #F0F9FF !important;
}
.choices__input {
  background: rgba(56, 189, 248, 0.06) !important;
  border-radius: 6px !important;
  color: #E0F2FE !important;
  padding: 6px 10px !important;
}
.choices__list--multiple .choices__item {
  background: linear-gradient(135deg, #0EA5E9, #0284C7) !important;
  border: 1px solid rgba(125, 211, 252, 0.55) !important;
  color: #F0F9FF !important;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.45) !important;
  border-radius: 8px !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Block 7: Modals + dialogs + alerts
   Bootstrap modals get the cyan glass treatment with a gradient header,
   neon close button, and backdrop blur. Alerts become halo bars.
   ================================================================= */

/* Modal content panel — cyan glass border + soft outer glow + inset
   highlight + corner gradient light. */
.modal-content {
  background:
    linear-gradient(140deg, rgba(56, 189, 248, 0.04) 0%, transparent 55%),
    #131C2E !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.18),
    inset 0 1px 0 rgba(125, 211, 252, 0.12) !important;
  overflow: hidden;
}

/* Modal header — subtle cyan band + cyan title + bottom edge accent. */
.modal-header {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.08), transparent) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
  padding: 14px 20px !important;
  position: relative;
}
.modal-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.7), transparent);
  pointer-events: none;
}
.modal-title {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  background: linear-gradient(95deg, #E0F2FE 10%, #7DD3FC 50%, #38BDF8 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Modal close button — cyan tinted, glow on hover. Targets both the
   Bootstrap 5 .btn-close and any manual close buttons. */
.modal-header .btn-close,
.modal-header .close,
.modal-header [aria-label="Close"] {
  filter: invert(76%) sepia(43%) saturate(2200%) hue-rotate(170deg) brightness(105%);
  opacity: 0.75 !important;
  transition: filter 0.18s ease, opacity 0.18s ease, transform 0.18s ease !important;
}
.modal-header .btn-close:hover,
.modal-header .close:hover,
.modal-header [aria-label="Close"]:hover {
  opacity: 1 !important;
  filter: invert(80%) sepia(80%) saturate(2500%) hue-rotate(170deg) brightness(115%) drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
  transform: scale(1.08);
}

/* Modal footer — subtle gradient + top edge accent like the header. */
.modal-footer {
  background: linear-gradient(0deg, rgba(56, 189, 248, 0.04), transparent) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.18) !important;
  padding: 12px 20px !important;
  position: relative;
}
.modal-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), transparent);
  pointer-events: none;
}

/* Modal backdrop — blur + cyan-tinted dim for the AI dim-the-room feel. */
.modal-backdrop.show {
  background: radial-gradient(ellipse at center, rgba(2, 132, 199, 0.20) 0%, rgba(0, 0, 0, 0.75) 70%) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Alert blocks — left-edge accent bar in variant color + soft halo. */
.alert {
  border: 1px solid rgba(56, 189, 248, 0.20) !important;
  border-radius: 12px !important;
  padding: 12px 16px 12px 18px !important;
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; width: 3px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.alert-success { box-shadow: 0 0 14px rgba(34, 197, 94, 0.18), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
.alert-warning { box-shadow: 0 0 14px rgba(251, 191, 36, 0.18), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
.alert-danger  { box-shadow: 0 0 14px rgba(239, 68, 68, 0.20), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
.alert-info    { box-shadow: 0 0 14px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255,255,255,0.04) !important; }

/* Custom popups (RWI map popup, dropdown panels) — already styled inline
   in their templates; the .ai-popup opt-in class can apply the same
   cyan glass border to any new popup. */
.ai-popup {
  background:
    linear-gradient(140deg, rgba(56, 189, 248, 0.05) 0%, transparent 55%),
    #131C2E !important;
  border: 1px solid rgba(56, 189, 248, 0.30) !important;
  border-radius: 14px !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(56, 189, 248, 0.16),
    inset 0 1px 0 rgba(125, 211, 252, 0.10) !important;
  color: #E0F2FE !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Block 8: Dropdowns + Action menus
   Bootstrap dropdown menus + the kebab (⋮) action menus on load rows
   become cyan-glass panels with hover-glow items.
   ================================================================= */

/* Dropdown menu container (Bootstrap + any opt-in .ai-menu). */
.dropdown-menu,
.ai-menu {
  background:
    linear-gradient(140deg, rgba(56, 189, 248, 0.05) 0%, transparent 55%),
    #131C2E !important;
  border: 1px solid rgba(56, 189, 248, 0.30) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.15),
    inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
  min-width: 200px;
  overflow: hidden;
  /* Slight entrance scale for the panel when shown via Bootstrap. */
  animation: aiMenuIn 0.18s ease-out;
}
@keyframes aiMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Item base — uppercase tracked label + cyan tinted text + smooth glow. */
.dropdown-item,
.ai-menu-item {
  color: #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  letter-spacing: 0.03em !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
}

/* Item hover/focus — cyan tint + left-edge accent + soft glow. */
.dropdown-item:hover,
.dropdown-item:focus,
.ai-menu-item:hover,
.ai-menu-item:focus {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0.02)) !important;
  color: #F0F9FF !important;
  box-shadow: inset 3px 0 0 #38BDF8, inset 0 0 12px rgba(56, 189, 248, 0.08) !important;
}

/* Item icon (FontAwesome / svg) glow follows current text color so danger
   items (e.g. Cancel Load) still glow red, not cyan. */
.dropdown-item i,
.dropdown-item svg,
.ai-menu-item i,
.ai-menu-item svg {
  width: 14px;
  text-align: center;
  filter: drop-shadow(0 0 3px currentColor);
}

/* Danger items — Cancel load, Delete, Reject. Keep red but with halo. */
.dropdown-item.text-danger,
.dropdown-item.danger,
.ai-menu-item.danger {
  color: #FCA5A5 !important;
}
.dropdown-item.text-danger:hover,
.dropdown-item.danger:hover,
.ai-menu-item.danger:hover {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.02)) !important;
  color: #FECACA !important;
  box-shadow: inset 3px 0 0 #EF4444, inset 0 0 12px rgba(239, 68, 68, 0.10) !important;
}

/* Item divider between sections. */
.dropdown-divider,
.ai-menu-divider {
  height: 1px !important;
  margin: 6px 4px !important;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.35), transparent) !important;
  border: none !important;
}

/* Header / section label inside the menu (Bootstrap .dropdown-header). */
.dropdown-header {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #7DD3FC !important;
  padding: 8px 12px 4px !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.25) !important;
}

/* Kebab trigger button (the ⋮ icon on load rows / driver rows). The button
   itself is usually a plain icon button — give it a hover glow without
   changing the static look so the row stays clean. */
.kebab-btn,
.actions-btn,
.btn-kebab,
[data-bs-toggle="dropdown"][title*="Action"],
[data-bs-toggle="dropdown"].action-trigger {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #7DD3FC !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  transition: background 0.15s ease, border-color 0.18s ease, box-shadow 0.2s ease, color 0.15s ease !important;
}
.kebab-btn:hover,
.actions-btn:hover,
.btn-kebab:hover,
[data-bs-toggle="dropdown"][title*="Action"]:hover,
[data-bs-toggle="dropdown"].action-trigger:hover,
.dropdown.show > .kebab-btn,
.dropdown.show > .actions-btn,
.dropdown.show > .btn-kebab {
  background: rgba(56, 189, 248, 0.10) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #E0F2FE !important;
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.25),
    inset 0 0 6px rgba(56, 189, 248, 0.10) !important;
}
.kebab-btn i,
.actions-btn i,
.btn-kebab i {
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.45));
}

/* =================================================================
   AI OPERATIONS CENTER — Block 9: Sidebar scan + interior surfaces
   Restores the CRT-style scan line on a SAFE inner container so the
   grid layout is preserved. Also styles generic cards, empty states,
   loading spinners, and auth screens to match.
   ================================================================= */

/* Scan line on the inner nav container (.sidebar-nav). The outer .sidebar
   participates in the layout grid so we cannot set overflow:hidden on it.
   .sidebar-nav is purely decorative for the scan strip but ALSO scrollable
   when the nav has many items, so overflow must allow vertical scroll. We
   clip the scan strip with overflow-x hidden + overflow-y auto. */
.sidebar-nav {
  position: relative;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.sidebar-nav::after {
  content: '';
  position: absolute;
  top: -40px; left: 0;
  width: 100%; height: 40px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(56, 189, 248, 0.07) 50%,
    transparent 100%);
  pointer-events: none;
  animation: aiSidebarScan 9s linear infinite;
  z-index: 0;
}
@keyframes aiSidebarScan {
  0%   { top: -40px; }
  100% { top: 100%; }
}
/* Keep the nav links above the scan strip. */
.sidebar-nav > *,
.sidebar-nav .nav-item,
.sidebar-nav .sidebar-link {
  position: relative;
  z-index: 1;
}

/* Nav section label (Main Menu, Analytics, Support, Settings). */
.nav-section {
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #7DD3FC !important;
  opacity: 0.7;
  padding-left: 16px !important;
  margin-top: 16px !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.2) !important;
}

/* Generic cards (.card, .gi-card, .panel) — cyan glass surface. Bootstrap's
   default .card looks bare in the new palette, this fixes that. */
.card,
.gi-card,
.panel {
  background:
    linear-gradient(140deg, rgba(56, 189, 248, 0.04) 0%, transparent 60%),
    var(--gi-bg-primary) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.05) !important;
}
.card-header,
.panel-header {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18) !important;
}
.card-footer,
.panel-footer {
  background: linear-gradient(0deg, rgba(56, 189, 248, 0.04), transparent) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.14) !important;
}

/* Empty states — center icon with cyan glow + tracked label. */
.empty-state {
  color: #94A3B8 !important;
}
.empty-state i,
.empty-state svg {
  color: rgba(56, 189, 248, 0.65) !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.4));
}
.empty-state h5,
.empty-state h4,
.empty-state .es-title {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #BAE6FD !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.25) !important;
}

/* Bootstrap spinners + custom loaders. Cyan with subtle glow. */
.spinner-border,
.spinner-grow {
  color: #38BDF8 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
}

/* Pagination + tabs (Bootstrap). */
.page-link,
.nav-tabs .nav-link {
  background: rgba(56, 189, 248, 0.04) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  color: #BAE6FD !important;
  transition: background 0.15s ease, box-shadow 0.18s ease;
}
.page-link:hover,
.nav-tabs .nav-link:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25), inset 0 0 6px rgba(56, 189, 248, 0.1) !important;
}
.page-item.active .page-link,
.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #0EA5E9, #0284C7) !important;
  border-color: rgba(186, 230, 253, 0.45) !important;
  color: #F0F9FF !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.45), inset 0 1px 0 rgba(224, 242, 254, 0.20) !important;
  text-shadow: 0 0 6px rgba(186, 230, 253, 0.6) !important;
}

/* Auth screens (login, signup, forgot, reset) — wrapper detection by
   .auth-card / .login-card / standalone <main class="auth-*"> as a
   fallback. Adds the AI center brand backdrop + glass form panel. */
.auth-card,
.login-card,
.signup-card,
.forgot-card,
.reset-card,
.auth-panel {
  background:
    radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.10), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(14, 165, 233, 0.08), transparent 50%),
    var(--gi-bg-primary) !important;
  border: 1px solid rgba(56, 189, 248, 0.30) !important;
  border-radius: 18px !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.20),
    inset 0 1px 0 rgba(125, 211, 252, 0.10) !important;
}

/* Tooltip — cyan glass instead of black box. Applies to Bootstrap tooltips. */
.tooltip-inner {
  background: linear-gradient(140deg, rgba(56, 189, 248, 0.10), #131C2E 70%) !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  color: #E0F2FE !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(56, 189, 248, 0.18) !important;
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em !important;
}
.tooltip .tooltip-arrow::before {
  border-top-color: rgba(56, 189, 248, 0.32) !important;
  border-bottom-color: rgba(56, 189, 248, 0.32) !important;
  border-left-color: rgba(56, 189, 248, 0.32) !important;
  border-right-color: rgba(56, 189, 248, 0.32) !important;
}

/* Progress bars (Bootstrap). */
.progress {
  background: rgba(56, 189, 248, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 4px rgba(56, 189, 248, 0.12) !important;
}
.progress-bar {
  background: linear-gradient(90deg, #0EA5E9, #38BDF8) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.55), inset 0 1px 0 rgba(224, 242, 254, 0.25) !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Block 10: Bootstrap button variants + accordions
   Driver list, fleet list and other Bootstrap-heavy pages use
   .btn-light / .btn-outline-light / .btn-secondary / .btn-danger /
   .btn-success / .btn-sm. Block 4 only covered .btn-primary. This
   block aligns the rest with the cyan palette while preserving each
   variant's semantic tint (danger=red, success=green, etc.).
   ================================================================= */
/* All Bootstrap button variants follow the same glass-with-glow recipe as
   .btn-primary above, but each in its own semantic color (cyan / red /
   green / amber / etc.). On hover the border brightens, the bg tint
   intensifies, and a same-color glow ring + inset glow appears. */

/* Cyan (neutral / info) — .btn-light, .btn-outline-light, .btn-secondary,
   .btn-info, generic Bootstrap .btn that doesn't carry a variant. */
.btn-light,
.btn-outline-light,
.btn-secondary,
.btn-info {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
.btn-light:hover,
.btn-outline-light:hover,
.btn-secondary:hover,
.btn-info:hover {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.85) !important;
  color: #F0F9FF !important;
  box-shadow:
    0 0 16px rgba(56, 189, 248, 0.40),
    0 0 0 1px rgba(56, 189, 248, 0.55),
    inset 0 0 10px rgba(56, 189, 248, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Red (danger / delete / destructive) */
.btn-danger {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(254, 202, 202, 0.10) !important;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.20) !important;
  border-color: rgba(239, 68, 68, 0.90) !important;
  color: #FEE2E2 !important;
  box-shadow:
    0 0 18px rgba(239, 68, 68, 0.45),
    0 0 0 1px rgba(239, 68, 68, 0.60),
    inset 0 0 10px rgba(239, 68, 68, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Green (success / approve / activate) */
.btn-success {
  background: rgba(34, 197, 94, 0.10) !important;
  color: #86EFAC !important;
  border: 1px solid rgba(34, 197, 94, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(187, 247, 208, 0.10) !important;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
.btn-success:hover {
  background: rgba(34, 197, 94, 0.20) !important;
  border-color: rgba(34, 197, 94, 0.90) !important;
  color: #DCFCE7 !important;
  box-shadow:
    0 0 18px rgba(34, 197, 94, 0.45),
    0 0 0 1px rgba(34, 197, 94, 0.60),
    inset 0 0 10px rgba(34, 197, 94, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Amber (warning / cancel / pending) */
.btn-warning {
  background: rgba(245, 158, 11, 0.10) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(245, 158, 11, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(254, 215, 170, 0.10) !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
.btn-warning:hover {
  background: rgba(245, 158, 11, 0.20) !important;
  border-color: rgba(245, 158, 11, 0.90) !important;
  color: #FEF3C7 !important;
  box-shadow:
    0 0 18px rgba(245, 158, 11, 0.45),
    0 0 0 1px rgba(245, 158, 11, 0.60),
    inset 0 0 10px rgba(245, 158, 11, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* ─── Override inline-styled buttons across the app ───────────────
 * Many templates use <button style="background:#3B82F6;color:#fff;..."> or
 * similar instead of the .btn-* variants. Since inline style normally
 * beats class selectors, we use attribute selectors + !important so the
 * glass+glow look wins everywhere without having to edit every template.
 * Color picked by which background literal is present. Newer green/red/
 * amber inline literals route to the matching variant.
 * ───────────────────────────────────────────────────────────────── */

/* Cyan glass — blues + neutral grays. Matches with and without space
   between background: and the value, and matches linear-gradient too. */
button[style*="#3B82F6"], a[style*="#3B82F6"],
button[style*="#2563EB"], a[style*="#2563EB"],
button[style*="#4A9AF4"], a[style*="#4A9AF4"],
button[style*="#60A5FA"], a[style*="#60A5FA"],
button[style*="#1D4ED8"], a[style*="#1D4ED8"],
/* Payroll list custom buttons (.btn-new / .btn-filter / .btn-view) and
   any similar in-template class that hardcodes var(--c-blue) or a solid
   color — all become glass cyan with glow on hover. */
html body .btn-new,
html body .btn-filter,
html body .btn-view {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.10) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
html body .btn-new:hover,
html body .btn-filter:hover,
html body .btn-view:hover {
  background: rgba(56, 189, 248, 0.20) !important;
  border-color: rgba(56, 189, 248, 0.90) !important;
  color: #F0F9FF !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.60), inset 0 0 10px rgba(56, 189, 248, 0.18) !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

/* Sidebar brand — GILOAD wordmark with cyan gradient + glow */
.sidebar-brand .brand-icon {
  background: rgba(56, 189, 248, 0.10) !important;
  border: 1px solid rgba(56, 189, 248, 0.50) !important;
  box-shadow:
    0 0 14px rgba(56, 189, 248, 0.35),
    inset 0 0 8px rgba(125, 211, 252, 0.18) !important;
  position: relative;
}
.sidebar-brand .brand-icon img {
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}
.sidebar-brand .brand-name {
  background: linear-gradient(95deg, #E0F2FE 10%, #7DD3FC 55%, #38BDF8 95%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: 0.10em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.45));
}

/* Driver avatar (.driver-avatar) — futuristic glass cyan circle with neon
   ring and glowing initials. Replaces the flat blue circle in driver_list. */
.driver-avatar {
  background:
    radial-gradient(circle at 30% 30%, rgba(125, 211, 252, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.40), rgba(2, 132, 199, 0.65)) !important;
  border: 1.5px solid rgba(125, 211, 252, 0.55) !important;
  color: #F0F9FF !important;
  font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.75) !important;
  box-shadow:
    0 0 14px rgba(56, 189, 248, 0.45),
    inset 0 1px 0 rgba(224, 242, 254, 0.30),
    inset 0 0 8px rgba(56, 189, 248, 0.18) !important;
  position: relative;
  overflow: visible !important;
}
.driver-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.30);
  pointer-events: none;
  animation: driverAvatarRing 2.6s ease-in-out infinite;
}
@keyframes driverAvatarRing {
  0%, 100% { box-shadow: 0 0 6px rgba(56, 189, 248, 0.20); opacity: 0.7; }
  50%      { box-shadow: 0 0 14px rgba(56, 189, 248, 0.40); opacity: 1; }
}

/* Payroll list avatar (.pl-card-avatar) + Load avatar (.load-avatar) +
   any small driver-initials circle that hardcodes a solid color. All
   receive the same futuristic glass cyan disc + halo ring as driver-avatar.
   Each is sized by its own existing rules; we only repaint the bg. */
.pl-card-avatar,
.load-card-avatar {
  background:
    radial-gradient(circle at 30% 30%, rgba(125, 211, 252, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.40), rgba(2, 132, 199, 0.65)) !important;
  border: 1.5px solid rgba(125, 211, 252, 0.55) !important;
  color: #F0F9FF !important;
  font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.75) !important;
  box-shadow:
    0 0 12px rgba(56, 189, 248, 0.45),
    inset 0 1px 0 rgba(224, 242, 254, 0.30),
    inset 0 0 6px rgba(56, 189, 248, 0.18) !important;
  position: relative;
  overflow: visible !important;
}
.pl-card-avatar::after,
.load-card-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.30);
  pointer-events: none;
  animation: driverAvatarRing 2.6s ease-in-out infinite;
}

/* Load avatar (dashboard LOADS card) — same futuristic disc as the
   driver-avatar, sized smaller. The inline gradient on the markup uses
   matching twin colors so the background reads sólido; we replace it
   with the glass cyan disc + halo ring via !important. */
.load-avatar {
  background:
    radial-gradient(circle at 30% 30%, rgba(125, 211, 252, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.40), rgba(2, 132, 199, 0.65)) !important;
  border: 1.5px solid rgba(125, 211, 252, 0.55) !important;
  color: #F0F9FF !important;
  font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.75) !important;
  box-shadow:
    0 0 12px rgba(56, 189, 248, 0.45),
    inset 0 1px 0 rgba(224, 242, 254, 0.30),
    inset 0 0 6px rgba(56, 189, 248, 0.18) !important;
  position: relative;
  overflow: visible !important;
}
.load-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.30);
  pointer-events: none;
  animation: driverAvatarRing 2.6s ease-in-out infinite;
}

/* Driver Status donut — neon halo around the chart + futuristic center text. */
.driver-donut-wrap {
  position: relative;
  filter:
    drop-shadow(0 0 14px rgba(56, 189, 248, 0.25))
    drop-shadow(0 0 4px rgba(125, 211, 252, 0.18));
}
.driver-donut-wrap::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 58%, rgba(56, 189, 248, 0.08) 70%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.driver-donut-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none; z-index: 2;
  text-align: center;
  width: max-content;
}
.driver-donut-total {
  font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  font-size: 32px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, #F0F9FF 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.55);
  letter-spacing: -0.01em;
  line-height: 1;
}
.driver-donut-label {
  text-transform: uppercase !important;
  letter-spacing: 0.30em !important;
  font-size: 9.5px !important;
  color: #7DD3FC !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45) !important;
  margin-top: 6px;
  font-weight: 700;
}

/* Driver Status legend — small dots with halo per status color. */
.driver-legend { margin-top: 6px; }
.driver-legend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px;
  font-size: 11.5px;
}
.driver-legend-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px currentColor;
}
.driver-legend-row:nth-child(1) .driver-legend-dot { background: #A3E635 !important; color: #A3E635; }
.driver-legend-row:nth-child(2) .driver-legend-dot { background: #7DD3FC !important; color: #7DD3FC; }
.driver-legend-row:nth-child(3) .driver-legend-dot { background: #FCD34D !important; color: #FCD34D; }
.driver-legend-row:nth-child(4) .driver-legend-dot { background: #475569 !important; color: #475569; }
.driver-legend-name {
  color: #CBD5E1 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.driver-legend-count {
  font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  font-weight: 700;
  margin-left: auto;
  color: #E0F2FE !important;
}

button[style*="rgba(59,130,246"], a[style*="rgba(59,130,246"],
button[style*="rgba(59, 130, 246"], a[style*="rgba(59, 130, 246"],
button[style*="rgba(74,154,244"], a[style*="rgba(74,154,244"],
button[style*="rgba(74, 154, 244"], a[style*="rgba(74, 154, 244"],
button[style*="rgba(77,163,255"], a[style*="rgba(77,163,255"],
button[style*="rgba(77, 163, 255"], a[style*="rgba(77, 163, 255"],
button[style*="background:#1E2A40"], a[style*="background:#1E2A40"],
button[style*="rgba(255,255,255,0.15)"], a[style*="rgba(255,255,255,0.15)"] {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
button[style*="#3B82F6"]:hover, a[style*="#3B82F6"]:hover,
button[style*="#2563EB"]:hover, a[style*="#2563EB"]:hover,
button[style*="#4A9AF4"]:hover, a[style*="#4A9AF4"]:hover,
button[style*="#60A5FA"]:hover, a[style*="#60A5FA"]:hover,
button[style*="#1D4ED8"]:hover, a[style*="#1D4ED8"]:hover,
button[style*="rgba(59,130,246"]:hover, a[style*="rgba(59,130,246"]:hover,
button[style*="rgba(74,154,244"]:hover, a[style*="rgba(74,154,244"]:hover,
button[style*="background:#1E2A40"]:hover, a[style*="background:#1E2A40"]:hover,
button[style*="rgba(255,255,255,0.15)"]:hover, a[style*="rgba(255,255,255,0.15)"]:hover {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.85) !important;
  color: #F0F9FF !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.40), 0 0 0 1px rgba(56, 189, 248, 0.55), inset 0 0 10px rgba(56, 189, 248, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Red glass — danger / delete / reject */
button[style*="#EF4444"], a[style*="#EF4444"],
button[style*="#DC2626"], a[style*="#DC2626"],
button[style*="#F87171"], a[style*="#F87171"],
button[style*="#B91C1C"], a[style*="#B91C1C"],
button[style*="rgba(239,68,68"], a[style*="rgba(239,68,68"],
button[style*="rgba(239, 68, 68"], a[style*="rgba(239, 68, 68"] {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
button[style*="#EF4444"]:hover, a[style*="#EF4444"]:hover,
button[style*="#DC2626"]:hover, a[style*="#DC2626"]:hover,
button[style*="#F87171"]:hover, a[style*="#F87171"]:hover,
button[style*="#B91C1C"]:hover, a[style*="#B91C1C"]:hover,
button[style*="rgba(239,68,68"]:hover, a[style*="rgba(239,68,68"]:hover,
button[style*="rgba(239, 68, 68"]:hover, a[style*="rgba(239, 68, 68"]:hover {
  background: rgba(239, 68, 68, 0.20) !important;
  border-color: rgba(239, 68, 68, 0.90) !important;
  color: #FEE2E2 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45), 0 0 0 1px rgba(239, 68, 68, 0.60), inset 0 0 10px rgba(239, 68, 68, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Green glass — success / approve / activate / earn rewards / etc. */
button[style*="#22C55E"], a[style*="#22C55E"],
button[style*="#16A34A"], a[style*="#16A34A"],
button[style*="#10B981"], a[style*="#10B981"],
button[style*="#059669"], a[style*="#059669"],
button[style*="#15803D"], a[style*="#15803D"],
button[style*="rgba(34,197,94"], a[style*="rgba(34,197,94"],
button[style*="rgba(34, 197, 94"], a[style*="rgba(34, 197, 94"],
button[style*="rgba(16,185,129"], a[style*="rgba(16,185,129"],
button[style*="rgba(16, 185, 129"], a[style*="rgba(16, 185, 129"],
button[style*="rgba(20, 184, 166"], a[style*="rgba(20, 184, 166"],
button[style*="rgba(20,184,166"], a[style*="rgba(20,184,166"] {
  background: rgba(34, 197, 94, 0.10) !important;
  color: #86EFAC !important;
  border: 1px solid rgba(34, 197, 94, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
button[style*="#22C55E"]:hover, a[style*="#22C55E"]:hover,
button[style*="#16A34A"]:hover, a[style*="#16A34A"]:hover,
button[style*="#10B981"]:hover, a[style*="#10B981"]:hover,
button[style*="#059669"]:hover, a[style*="#059669"]:hover,
button[style*="#15803D"]:hover, a[style*="#15803D"]:hover,
button[style*="rgba(34,197,94"]:hover, a[style*="rgba(34,197,94"]:hover,
button[style*="rgba(34, 197, 94"]:hover, a[style*="rgba(34, 197, 94"]:hover,
button[style*="rgba(16,185,129"]:hover, a[style*="rgba(16,185,129"]:hover,
button[style*="rgba(16, 185, 129"]:hover, a[style*="rgba(16, 185, 129"]:hover,
button[style*="rgba(20, 184, 166"]:hover, a[style*="rgba(20, 184, 166"]:hover,
button[style*="rgba(20,184,166"]:hover, a[style*="rgba(20,184,166"]:hover {
  background: rgba(34, 197, 94, 0.20) !important;
  border-color: rgba(34, 197, 94, 0.90) !important;
  color: #DCFCE7 !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.45), 0 0 0 1px rgba(34, 197, 94, 0.60), inset 0 0 10px rgba(34, 197, 94, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Amber glass — warning / cancel / pending / reject (orange-ish too) */
button[style*="#F59E0B"], a[style*="#F59E0B"],
button[style*="#FBBF24"], a[style*="#FBBF24"],
button[style*="#D97706"], a[style*="#D97706"],
button[style*="#FF7043"], a[style*="#FF7043"],
button[style*="#E8500A"], a[style*="#E8500A"],
button[style*="#FB923C"], a[style*="#FB923C"],
button[style*="#EA580C"], a[style*="#EA580C"],
button[style*="rgba(245,158,11"], a[style*="rgba(245,158,11"],
button[style*="rgba(245, 158, 11"], a[style*="rgba(245, 158, 11"] {
  background: rgba(245, 158, 11, 0.10) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(245, 158, 11, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
button[style*="#F59E0B"]:hover, a[style*="#F59E0B"]:hover,
button[style*="#FBBF24"]:hover, a[style*="#FBBF24"]:hover,
button[style*="#D97706"]:hover, a[style*="#D97706"]:hover,
button[style*="#FF7043"]:hover, a[style*="#FF7043"]:hover,
button[style*="#E8500A"]:hover, a[style*="#E8500A"]:hover,
button[style*="#FB923C"]:hover, a[style*="#FB923C"]:hover,
button[style*="#EA580C"]:hover, a[style*="#EA580C"]:hover,
button[style*="rgba(245,158,11"]:hover, a[style*="rgba(245,158,11"]:hover,
button[style*="rgba(245, 158, 11"]:hover, a[style*="rgba(245, 158, 11"]:hover {
  background: rgba(245, 158, 11, 0.20) !important;
  border-color: rgba(245, 158, 11, 0.90) !important;
  color: #FEF3C7 !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.45), 0 0 0 1px rgba(245, 158, 11, 0.60), inset 0 0 10px rgba(245, 158, 11, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Violet glass — revenue / financial accents */
button[style*="#8B5CF6"], a[style*="#8B5CF6"],
button[style*="#A78BFA"], a[style*="#A78BFA"],
button[style*="#7C3AED"], a[style*="#7C3AED"],
button[style*="#6D28D9"], a[style*="#6D28D9"],
button[style*="rgba(167,139,250"], a[style*="rgba(167,139,250"],
button[style*="rgba(167, 139, 250"], a[style*="rgba(167, 139, 250"],
button[style*="rgba(139,92,246"], a[style*="rgba(139,92,246"],
button[style*="rgba(139, 92, 246"], a[style*="rgba(139, 92, 246"] {
  background: rgba(167, 139, 250, 0.10) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167, 139, 250, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(167, 139, 250, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
button[style*="#8B5CF6"]:hover, a[style*="#8B5CF6"]:hover,
button[style*="#A78BFA"]:hover, a[style*="#A78BFA"]:hover,
button[style*="#7C3AED"]:hover, a[style*="#7C3AED"]:hover,
button[style*="#6D28D9"]:hover, a[style*="#6D28D9"]:hover,
button[style*="rgba(167,139,250"]:hover, a[style*="rgba(167,139,250"]:hover,
button[style*="rgba(167, 139, 250"]:hover, a[style*="rgba(167, 139, 250"]:hover,
button[style*="rgba(139,92,246"]:hover, a[style*="rgba(139,92,246"]:hover,
button[style*="rgba(139, 92, 246"]:hover, a[style*="rgba(139, 92, 246"]:hover {
  background: rgba(167, 139, 250, 0.20) !important;
  border-color: rgba(167, 139, 250, 0.90) !important;
  color: #EDE9FE !important;
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.45), 0 0 0 1px rgba(167, 139, 250, 0.60), inset 0 0 10px rgba(167, 139, 250, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Topbar custom buttons defined inline in base.html — Upload RC,
   Earn Rewards, the icon buttons. Their inline rules win normally,
   we override with !important so they get the glass+glow look. */
.btn-quick-add {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
.btn-quick-add:hover {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.85) !important;
  color: #F0F9FF !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.40), 0 0 0 1px rgba(56, 189, 248, 0.55), inset 0 0 10px rgba(56, 189, 248, 0.15) !important;
  transform: translateY(-1px) !important;
}
.btn-quick-add-ghost {
  background: rgba(56, 189, 248, 0.04) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
}
.btn-quick-add-ghost:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #E0F2FE !important;
  border-color: rgba(56, 189, 248, 0.55) !important;
}

.btn-earn {
  background: rgba(34, 197, 94, 0.10) !important;
  color: #86EFAC !important;
  border: 1px solid rgba(34, 197, 94, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
.btn-earn:hover {
  background: rgba(34, 197, 94, 0.20) !important;
  border-color: rgba(34, 197, 94, 0.90) !important;
  color: #DCFCE7 !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.45), 0 0 0 1px rgba(34, 197, 94, 0.60), inset 0 0 10px rgba(34, 197, 94, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Icon buttons (logout, language switcher chip, etc.) */
.btn-icon {
  background: rgba(56, 189, 248, 0.06) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 8px !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.22s, color 0.18s, transform 0.18s !important;
}
.btn-icon:hover {
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
  color: #F0F9FF !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.30), inset 0 0 6px rgba(56, 189, 248, 0.12) !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Auth pages (login, forgot, reset)
   Futuristic header treatment with glowing logo, gradient-text brand,
   tracked-cyan subtitle, glass inputs, and forced-glass primary button.
   ================================================================= */

/* Logo container — small glass tile + cyan halo behind the app icon. */
.login-header .logo-row { gap: 14px !important; }
.login-header .logo-box {
  position: relative;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.40) !important;
  box-shadow:
    0 0 22px rgba(56, 189, 248, 0.35),
    inset 0 0 12px rgba(125, 211, 252, 0.18),
    inset 0 1px 0 rgba(224, 242, 254, 0.20) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}
.login-header .logo-box img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}
/* Faint animated ring around the logo box — adds the live feel. */
.login-header .logo-box::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  pointer-events: none;
  animation: authLogoRing 3s ease-in-out infinite;
}
@keyframes authLogoRing {
  0%, 100% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.20); opacity: 0.8; }
  50%      { box-shadow: 0 0 20px rgba(56, 189, 248, 0.50); opacity: 1; }
}

/* Brand text — gradient name + tracked subtitle. Both larger than before. */
.login-header .logo-name,
.login-header div.logo-name {
  background: linear-gradient(95deg, #E0F2FE 10%, #7DD3FC 50%, #38BDF8 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
}
.login-header .logo-sub,
.login-header div.logo-sub {
  color: #7DD3FC !important;
  letter-spacing: 0.55em !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.55) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}
.login-header .logo-line {
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.7), transparent) !important;
  margin-top: 8px !important;
  opacity: 1 !important;
}
.login-header .header-note {
  color: #7DD3FC !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.30) !important;
  margin-top: 14px !important;
  opacity: 0.85;
}

/* Page icon (key, id-card, etc.) — glass cyan tile with halo. */
.login-wrapper .page-icon {
  background: rgba(56, 189, 248, 0.10) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow:
    0 0 22px rgba(56, 189, 248, 0.32),
    inset 0 1px 0 rgba(125, 211, 252, 0.15) !important;
  color: transparent !important;
}
.login-wrapper .page-icon i {
  color: #7DD3FC !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.75));
}

/* Inputs — cyan glass with neon focus ring. */
.login-wrapper .sf-input-wrap,
.login-wrapper .input-wrap {
  background: rgba(56, 189, 248, 0.04) !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  border-radius: 10px !important;
}
.login-wrapper .sf-input-wrap:focus-within,
.login-wrapper .input-wrap:focus-within {
  border-color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.10) !important;
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.18),
    0 0 16px rgba(14, 165, 233, 0.30) !important;
}
.login-wrapper .sf-input-wrap > i { color: #7DD3FC !important; }
.login-wrapper .sf-label {
  color: #7DD3FC !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.login-wrapper .page-title {
  background: linear-gradient(95deg, #F0F9FF 10%, #BAE6FD 60%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: 0.02em !important;
  font-weight: 800 !important;
}
.login-wrapper .page-desc { color: #94A3B8 !important; }

/* Primary button (Send Username / Send Reset Link / Sign in / etc.)
   Forced glass cyan even when the template defines its own inline style.
   Specificity wins via the wrapper selector. .btn-login (used by the
   actual login page) is the same look. */
.login-wrapper .btn-primary-gi,
.login-body .btn-primary-gi,
body .btn-primary-gi,
.login-wrapper .btn-login,
.login-body .btn-login,
body .btn-login {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.12), rgba(14, 165, 233, 0.18)) !important;
  color: #E0F2FE !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.65) !important;
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.30),
    inset 0 1px 0 rgba(125, 211, 252, 0.20),
    inset 0 0 14px rgba(56, 189, 248, 0.08) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.2s !important;
  position: relative;
  overflow: hidden;
}
.login-wrapper .btn-primary-gi:hover,
.login-body .btn-primary-gi:hover,
body .btn-primary-gi:hover,
.login-wrapper .btn-login:hover,
.login-body .btn-login:hover,
body .btn-login:hover {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(14, 165, 233, 0.32)) !important;
  border-color: #7DD3FC !important;
  color: #F0F9FF !important;
  box-shadow:
    0 0 28px rgba(56, 189, 248, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.65),
    inset 0 0 18px rgba(56, 189, 248, 0.20) !important;
  transform: translateY(-2px) !important;
}
/* Sweep highlight on hover */
.login-wrapper .btn-primary-gi::before,
.login-body .btn-primary-gi::before,
.login-wrapper .btn-login::before,
.login-body .btn-login::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.login-wrapper .btn-primary-gi:hover::before,
.login-body .btn-primary-gi:hover::before,
.login-wrapper .btn-login:hover::before,
.login-body .btn-login:hover::before {
  left: 140%;
}

/* Back-to-login link — cyan tracked */
.login-wrapper .back-link {
  color: #7DD3FC !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
}
.login-wrapper .back-link:hover {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #F0F9FF !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.30) !important;
}

/* Body container (the card itself) — glass cyan rim and outer drop-shadow
   so the whole panel looks like a holo console. */
.login-wrapper .login-header,
.login-wrapper .login-body {
  background:
    linear-gradient(140deg, rgba(56, 189, 248, 0.05) 0%, transparent 55%),
    #131C2E !important;
  border-left: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-right: 1px solid rgba(56, 189, 248, 0.28) !important;
}
.login-wrapper .login-header {
  border-top: 1px solid rgba(56, 189, 248, 0.32) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
  position: relative;
}
.login-wrapper .login-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.7), transparent);
  pointer-events: none;
}
.login-wrapper .login-body {
  border-bottom: 1px solid rgba(56, 189, 248, 0.32) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.15),
    inset 0 1px 0 rgba(125, 211, 252, 0.10) !important;
}

/* =================================================================
   AI OPERATIONS CENTER — Mobile/responsive safety net
   The uppercase + tracking + extra padding on buttons / labels / cards
   we added makes content wider than the original layouts. On phones
   this can push elements off-screen. Tame those properties below ~768px.
   ================================================================= */
@media (max-width: 768px) {
  .btn-primary, .btn-light, .btn-secondary, .btn-info,
  .btn-danger, .btn-success, .btn-warning, .btn-violet, .btn-purple,
  .btn-ps, .btn-create, .btn-add-stop, .btn-add-leg, .btn-add-leg-btn,
  .btn-add-leg-toggle, .btn-add-doc, .rwi-popup-notify,
  .btn-quick-add, .btn-quick-add-ghost, .btn-earn, .btn-icon,
  .ai-cta, .qa-btn, .accordion-button,
  button[style*="#3B82F6"], a[style*="#3B82F6"],
  button[style*="#EF4444"], a[style*="#EF4444"],
  button[style*="#22C55E"], a[style*="#22C55E"],
  button[style*="#F59E0B"], a[style*="#F59E0B"],
  button[style*="#8B5CF6"], a[style*="#8B5CF6"] {
    letter-spacing: 0.02em !important;
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .page-header-title,
  .card-title, .db-card-title, .section-title,
  .form-section-title, .detail-card-title,
  .em-section-title, .pay-section-title, .eq-section-title {
    letter-spacing: 0.02em !important;
    font-size: 14px !important;
  }
  .form-label, .form-group > label, .ai-label,
  .nav-section, .nav-tabs .nav-link, .dropdown-header,
  .gi-table thead th, table.table thead th, .ai-th {
    letter-spacing: 0.04em !important;
    font-size: 10.5px !important;
  }
  /* Status badges should not wrap on mobile because of letter-spacing. */
  .status-badge {
    letter-spacing: 0.02em !important;
    font-size: 9.5px !important;
    padding: 3px 7px !important;
  }
  /* Modal padding tighter on phones */
  .modal-header { padding: 12px 16px !important; }
  .modal-footer { padding: 10px 16px !important; }
  .modal-content { border-radius: 14px !important; }
  /* Topbar buttons — let them sit on a second row if needed instead of
     overflowing the container. */
  .topbar-right { flex-wrap: wrap !important; gap: 6px !important; }
  /* Auth pages — smaller logo / text on phones */
  .login-header .logo-name, .login-header div.logo-name {
    font-size: 17px !important;
    letter-spacing: 0.10em !important;
  }
  .login-header .logo-sub, .login-header div.logo-sub {
    letter-spacing: 0.30em !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  /* On very small phones cut tracking + uppercase further so buttons /
     labels don't break the layout. */
  .btn-primary, .btn-light, .btn-secondary, .btn-info,
  .btn-danger, .btn-success, .btn-warning, .btn-violet, .btn-purple,
  .ai-cta, .btn-quick-add, .btn-earn, .qa-btn, .accordion-button {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
  }
  .page-header-title { font-size: 13px !important; }
  .card-title, .db-card-title, .section-title { font-size: 12.5px !important; }
}

/* Violet (revenue / financial accents) */
.btn-violet,
.btn-purple {
  background: rgba(167, 139, 250, 0.10) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167, 139, 250, 0.50) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(167, 139, 250, 0.35) !important;
  transition: background 0.18s, border-color 0.2s, box-shadow 0.25s, color 0.2s, transform 0.18s !important;
}
.btn-violet:hover,
.btn-purple:hover {
  background: rgba(167, 139, 250, 0.20) !important;
  border-color: rgba(167, 139, 250, 0.90) !important;
  color: #EDE9FE !important;
  box-shadow:
    0 0 18px rgba(167, 139, 250, 0.45),
    0 0 0 1px rgba(167, 139, 250, 0.60),
    inset 0 0 10px rgba(167, 139, 250, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Bootstrap accordion (driver_list, fleet_list, paystub detail).
   Header is a button — gets the cyan glass treatment. Active item has a
   cyan left-edge accent like the nav active state. */
.accordion-item {
  background: var(--gi-bg-primary) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  overflow: hidden;
}
.accordion-button {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent) !important;
  color: #E0F2FE !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.15s ease, box-shadow 0.22s ease;
}
.accordion-button:hover {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.10), transparent) !important;
  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.05) !important;
}
.accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.02) 70%) !important;
  color: #F0F9FF !important;
  box-shadow:
    inset 3px 0 0 #38BDF8,
    inset 0 0 18px rgba(56, 189, 248, 0.10) !important;
}
.accordion-button:not(.collapsed) i {
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.65));
}
.accordion-button::after {
  filter: invert(76%) sepia(43%) saturate(2200%) hue-rotate(170deg) brightness(105%) !important;
}
.accordion-body {
  background: rgba(11, 18, 32, 0.4) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.10) !important;
  color: #CBD5E1 !important;
}

/* Generic gradient hero / empty-state blocks that hardcoded #fff or
   #f0f7ff backgrounds — overwrite to the navy palette so they don't
   look like leftover light theme. */
.empty-state[style*="#fff"],
.empty-state[style*="#FFF"],
div[style*="background:linear-gradient(135deg,#fff"],
div[style*="background:linear-gradient(135deg, #fff"] {
  background: linear-gradient(140deg, rgba(56, 189, 248, 0.06) 0%, transparent 60%), var(--gi-bg-primary) !important;
  border: 2px dashed rgba(56, 189, 248, 0.35) !important;
  color: #E0F2FE !important;
}