/* ─── 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; }