TeleEms-Dashboard/src/pages/fleet/FleetOperator.css

/* ─── FLEET OPERATOR LIGHT THEME OVERRIDES ─────────────────────────────────── */

/* 1. Main Dashboard Shell Background & Text Colors */
.fleet-dashboard-container {
  background: #F8FAFC !important;
  /* Elegant light background */
  color: #1E293B !important;
  /* Deep slate gray for body text */
}

/* 2. Top Navigation Bar */
.fleet-dashboard-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

.fleet-dashboard-header h1 {
  color: #0F172A !important;
}

.fleet-dashboard-header .desc,
.fleet-dashboard-header div[style*="color: #94A3B8"],
.fleet-dashboard-header div[style*="color:#94A3B8"] {
  color: #475569 !important;
}

/* 3. Search Bar and Wrapper in Header */
.fleet-search-container,
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"] {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

.fleet-search-container input,
input[placeholder*="Search"] {
  color: #0F172A !important;
}

.fleet-search-container input::placeholder,
input[placeholder*="Search"]::placeholder {
  color: #94A3B8 !important;
}

/* 4. Action Buttons in Header */
.fleet-header-btn,
button[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
button[style*="background:rgba(255, 255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.fleet-header-btn:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

/* Vertical divider in header */
.fleet-header-divider {
  background: #E2E8F0 !important;
}

/* Profile username & user details in header */
.fleet-profile-name,
.fleet-profile-title,
div[style*="color: #fff"][style*="font-size: 0.8rem"],
div[style*="color:#fff"][style*="font-size:0.8rem"],
div[style*="font-size: 0.8rem"][style*="color: #fff"],
div[style*="font-size:0.8rem"][style*="color:#fff"] {
  color: #0F172A !important;
}

/* 5. Sub-page Tab Toggle Selection Pill Containers */
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"][style*="padding: 4px"],
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"][style*="padding:4px"],
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"][style*="padding: 3px"],
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"][style*="padding:3px"] {
  background: #E2E8F0 !important;
  border: 1px solid #CBD5E1 !important;
}

/* Unselected buttons in Tab Toggles */
div[style*="background: rgba(255, 255, 255, 0.03)"] button[style*="background: transparent"],
div[style*="background:rgba(255,255,255,0.03)"] button[style*="background:transparent"],
div[style*="background: rgba(255, 255, 255, 0.03)"] button:not([style*="background: linear-gradient"]),
div[style*="background:rgba(255,255,255,0.03)"] button:not([style*="background:linear-gradient"]) {
  color: #475569 !important;
}

/* 6. Cards and Main Content Panels (Overriding semi-transparent dark blocks) */
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.08)"],
div[style*="background: rgba(255, 255, 255, 0.02)"][style*="border: 1px solid rgba(255, 255, 255, 0.07)"],
div[style*="background:rgba(255,255,255,0.02)"][style*="border:1px solid rgba(255,255,255,0.07)"],
div[style*="background: rgba(255, 255, 255, 0.01)"][style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
div[style*="background:rgba(255,255,255,0.01)"][style*="border:1px solid rgba(255,255,255,0.08)"],
div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(255,255,255,0.07)"],
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.07)"],
div[style*="background: rgba(255,255,255,0.02)"][style*="border: 1px solid rgba(255,255,255,0.06)"],
div[style*="background:rgba(255,255,255,0.02)"][style*="border:1px solid rgba(255,255,255,0.06)"],
.glass {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03), 0 2px 8px rgba(15, 23, 42, 0.01) !important;
}

/* Card titles inside components */
.fleet-dashboard-content h1,
.fleet-dashboard-content h2,
.fleet-dashboard-content h3,
.fleet-dashboard-content h4,
.fleet-dashboard-content .card-title {
  color: #0F172A !important;
}

/* Overriding white texts to clean slate-dark */
span[style*="color: #fff"],
span[style*="color:#fff"],
div[style*="color: #fff"],
div[style*="color:#fff"],
h3[style*="color: #fff"],
h3[style*="color:#fff"],
h1[style*="color: #fff"],
h1[style*="color:#fff"] {
  color: #0F172A !important;
}

/* Secondary descriptions */
div[style*="color: #E2E8F0"],
div[style*="color:#E2E8F0"],
span[style*="color: #E2E8F0"],
span[style*="color:#E2E8F0"],
div[style*="color: #F1F5F9"],
div[style*="color:#F1F5F9"] {
  color: #1E293B !important;
}

/* Muted labels & dates */
div[style*="color: #94A3B8"],
div[style*="color:#94A3B8"],
span[style*="color: #94A3B8"],
span[style*="color:#94A3B8"],
p[style*="color: #94A3B8"],
p[style*="color:#94A3B8"],
div[style*="color: #64748B"],
div[style*="color:#64748B"] {
  color: #475569 !important;
}

/* 7. Inner Stats Grid and Blocks (e.g. Station detail stats cards) */
div[style*="background: #040B16"],
div[style*="background:#040B16"] {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

div[style*="background: #040B16"] div[style*="color: #fff"],
div[style*="background:#040B16"] div[style*="color:#fff"] {
  color: #0F172A !important;
}

/* Separator lines in cards */
div[style*="border-bottom: 1px solid rgba(255,255,255,0.04)"],
div[style*="border-bottom:1px solid rgba(255,255,255,0.04)"],
div[style*="border-top: 1px solid rgba(255,255,255,0.04)"],
div[style*="border-top:1px solid rgba(255,255,255,0.04)"],
div[style*="border-top: 1px solid rgba(255,255,255,0.06)"],
div[style*="border-top:1px solid rgba(255,255,255,0.06)"] {
  border-color: #E2E8F0 !important;
}

/* 8. Forms & Inputs */
/* Field Labels */
label[style*="color: #64748B"],
label[style*="color:#64748B"],
label[style*="color: #475569"],
label[style*="color:#475569"] {
  color: #475569 !important;
}

/* Input Fields and Select Dropdowns */
input[style*="background: rgba(255, 255, 255, 0.04)"],
input[style*="background:rgba(255,255,255,0.04)"],
select[style*="background: rgba(255, 255, 255, 0.04)"],
select[style*="background:rgba(255,255,255,0.04)"],
textarea[style*="background: rgba(255, 255, 255, 0.04)"],
textarea[style*="background:rgba(255,255,255,0.04)"] {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

input[style*="background: rgba(255, 255, 255, 0.04)"]:focus,
select[style*="background: rgba(255, 255, 255, 0.04)"]:focus,
textarea[style*="background: rgba(255, 255, 255, 0.04)"]:focus {
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1) !important;
}

/* Select options backgrounds */
option[style*="background: #0F172A"],
option[style*="background:#0F172A"],
option[style*="background: #0D1526"],
option[style*="background:#0D1526"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* Optgroups */
optgroup {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* 9. Secondary Buttons (e.g. Cancel, Edit, Sync, etc) */
button[style*="background: rgba(255, 255, 255, 0.04)"],
button[style*="background:rgba(255,255,255,0.04)"],
button[style*="background: rgba(255,255,255,0.03)"],
button[style*="background:rgba(255,255,255,0.03)"] {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

button[style*="background: rgba(255, 255, 255, 0.04)"]:hover,
button[style*="background:rgba(255,255,255,0.04)"]:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

/* 10. Modals */
/* Background backdrop layer */
div[style*="background: rgba(0,0,0,0.7)"],
div[style*="background:rgba(0,0,0,0.7)"],
div[style*="background: rgba(0,0,0,0.75)"],
div[style*="background:rgba(0,0,0,0.75)"] {
  background: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(8px) !important;
}

/* Modal box wrapper styling */
div[style*="background: #0F172A"][style*="border: 1px solid rgba(255,255,255,0.1)"],
div[style*="background:#0F172A"][style*="border:1px solid rgba(255,255,255,0.1)"],
div[style*="background: #0D1526"][style*="border: 1px solid rgba(255,255,255,0.1)"],
div[style*="background:#0D1526"][style*="border:1px solid rgba(255,255,255,0.1)"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
  color: #1E293B !important;
}

/* Modal Inner Header */
div[style*="background: linear-gradient(135deg,rgba(6,182,212,0.12),transparent)"],
div[style*="background:linear-gradient(135deg,rgba(6,182,212,0.12),transparent)"] {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), transparent) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Modal close button */
div[style*="background: #0F172A"] button[style*="background: rgba(255, 255, 255, 0.05)"],
div[style*="background:#0F172A"] button[style*="background:rgba(255,255,255,0.05)"],
div[style*="background: #0D1526"] button[style*="background: rgba(255, 255, 255, 0.06)"],
div[style*="background:#0D1526"] button[style*="background:rgba(255,255,255,0.06)"] {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

/* GPS input coordination section in modal */
div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(255,255,255,0.06)"],
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"],
div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(16,185,129,0.3)"] {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

/* 11. Tables inside components */
table th {
  color: #475569 !important;
  background: #F1F5F9 !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

table tr {
  border-bottom: 1px solid #E2E8F0 !important;
}

table tr:hover {
  background: #F8FAFC !important;
}

/* 12. Crew Scheduling Page Specific Items */
/* Roster timeline assignments list containers */
div[style*="background: rgba(6,182,212,0.04)"][style*="border: 1px solid rgba(6,182,212,0.08)"],
div[style*="background:rgba(6,182,212,0.04)"][style*="border:1px solid rgba(6,182,212,0.08)"] {
  background: rgba(6, 182, 212, 0.06) !important;
  border: 1px solid rgba(6, 182, 212, 0.15) !important;
}

div[style*="background: rgba(59,130,246,0.04)"][style*="border: 1px solid rgba(59,130,246,0.08)"],
div[style*="background:rgba(59,130,246,0.04)"][style*="border:1px solid rgba(59,130,246,0.08)"] {
  background: rgba(59, 130, 246, 0.06) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
}

div[style*="background: rgba(16,185,129,0.04)"][style*="border: 1px solid rgba(16,185,129,0.08)"],
div[style*="background:rgba(16,185,129,0.04)"][style*="border:1px solid rgba(16,185,129,0.08)"] {
  background: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

/* 13. Empty / Placeholder States */
div[style*="border: 1px dashed rgba(255,255,255,0.08)"],
div[style*="border:1px dashed rgba(255,255,255,0.08)"],
div[style*="border: 1px dashed rgba(255,255,255,0.1)"],
div[style*="border:1px dashed rgba(255,255,255,0.1)"] {
  background: #FFFFFF !important;
  border: 1px dashed #CBD5E1 !important;
}

/* 14. Broad Wildcard Overrides (Ensuring 100% full light theme coverage) */
.fleet-dashboard-content div[style*="rgba(255, 255, 255, 0.0"],
.fleet-dashboard-content div[style*="rgba(255,255,255,0.0"],
.fleet-dashboard-content div[style*="rgba(255, 255, 255, 0.1"],
.fleet-dashboard-content div[style*="rgba(255,255,255,0.1"] {
  background: #FFFFFF !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #1E293B !important;
}

.fleet-dashboard-content div[style*="color: #fff"],
.fleet-dashboard-content div[style*="color:#fff"],
.fleet-dashboard-content div[style*="color: #FFFFFF"],
.fleet-dashboard-content div[style*="color:#FFFFFF"],
.fleet-dashboard-content div[style*="color: rgb(255, 255, 255)"],
.fleet-dashboard-content p[style*="color: #fff"],
.fleet-dashboard-content p[style*="color:#fff"],
.fleet-dashboard-content span[style*="color: #fff"],
.fleet-dashboard-content span[style*="color:#fff"] {
  color: #0F172A !important;
}

.fleet-dashboard-content div[style*="color: rgb(148, 163, 184)"],
.fleet-dashboard-content div[style*="color: #94A3B8"],
.fleet-dashboard-content div[style*="color:#94A3B8"] {
  color: #475569 !important;
}

.fleet-dashboard-content input,
.fleet-dashboard-content select,
.fleet-dashboard-content textarea {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* 15. Global Uniform Font Family */
.fleet-dashboard-container,
.fleet-dashboard-container *,
.sidebar,
.sidebar * {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 16. Custom Stations Search Input override (High-specificity to beat broad content overrides) */
.fleet-dashboard-content .stations-search-input,
.fleet-dashboard-content input.stations-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  color: #0F172A !important;
}

.fleet-dashboard-content .stations-search-input:focus,
.fleet-dashboard-content input.stations-search-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}