/**
 * Elite Dispatch - Clean Light Theme
 * White background, black text, professional styling
 */

/* ==========================================================================
   CSS VARIABLES - LIGHT PALETTE
   ========================================================================== */

:root {
    /* Core Colors */
    --mc-bg: #ffffff;
    --mc-bg-subtle: #ffffff;
    --mc-bg-muted: #ffffff;
    --mc-bg-panel: #ffffff;

    /* Accent Colors */
    --mc-sky: #0ea5e9;
    --mc-sky-muted: #0284c7;
    --mc-emerald: #10b981;
    --mc-amber: #f59e0b;
    --mc-rose: #f43f5e;

    /* Text Colors */
    --mc-text-primary: #0f172a;
    --mc-text-secondary: #475569;
    --mc-text-muted: #94a3b8;

    /* Status Colors */
    --mc-status-green: #22c55e;
    --mc-status-yellow: #eab308;
    --mc-status-red: #ef4444;

    /* Borders */
    --mc-border: #e2e8f0;
    --mc-border-hover: #cbd5e1;

    /* Shadows */
    --mc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --mc-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

    /* Gradients */
    --mc-gradient-panel: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    --mc-gradient-sidebar: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --mc-gradient-header: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);

    /* Ops-UI redesign tokens (light) */
    --mc-ok:#16a34a;        --mc-ok-bg:#dcfce7;
    --mc-warn:#d97706;      --mc-warn-bg:#fef3c7;
    --mc-danger:#dc2626;    --mc-danger-bg:#fee2e2;
    --mc-accent:#4f46e5;    --mc-accent-2:#059669;
    --mc-tile:#ffffff;      --mc-tile-2:#fafbfc;   --mc-tile-border:#e5e7eb;
    --mc-label:#9ca3af;
    --mc-vip-bg:#facc15;    --mc-vip-text:#3b2c00;
}

/* ==========================================================================
   GLOBAL FILAMENT OVERRIDES - LIGHT THEME ONLY
   ==========================================================================
   Each selector is scoped to `html:not(.dark)` so the !important light
   values ONLY fire in light mode. When dark mode is on (html.dark),
   these selectors don't match, and Filament's stock dark utilities
   (plus our explicit `html.dark .fi-X` overrides at the end of this
   file) take over cleanly.
   ========================================================================== */

/* Body and main wrappers */
html:not(.dark) body,
html:not(.dark) .fi-body,
html:not(.dark) .fi-layout {
    background-color: #ffffff !important;
    color: #111111 !important;
}

/* Top bar / header */
html:not(.dark) .fi-topbar {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #e5e7eb !important;
}

/* Page header (breadcrumbs + title + actions) — transparent, sits on page bg */
html:not(.dark) .fi-header,
html:not(.dark) .fi-header-heading,
html:not(.dark) .fi-page-header {
    background-color: transparent !important;
    color: #111111 !important;
    border-color: transparent !important;
}

html:not(.dark) .fi-header-heading,
html:not(.dark) .fi-page-header-heading {
    color: #111111 !important;
}

/* Page heading text */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6 {
    color: #111111 !important;
}

/* General text */
p, span, div, label, td, th, li, a {
    color: inherit;
}

/* Tables */
html:not(.dark) .fi-ta-table,
html:not(.dark) .fi-ta-row,
html:not(.dark) .fi-ta-cell,
html:not(.dark) .fi-ta-header-cell,
html:not(.dark) .fi-ta-content {
    background-color: #ffffff !important;
    color: #111111 !important;
}

html:not(.dark) .fi-ta-header-cell {
    color: #374151 !important;
    font-weight: 600 !important;
}

html:not(.dark) .fi-ta-row:hover {
    background-color: #f9fafb !important;
}

/* Table text */
html:not(.dark) .fi-ta-text,
html:not(.dark) .fi-ta-text-item {
    color: #111111 !important;
}

/* Cards and sections — all white, no grey shading */
html:not(.dark) .fi-section,
html:not(.dark) .fi-section-content,
html:not(.dark) .fi-card,
html:not(.dark) .fi-wi-card {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #e5e7eb !important;
}

html:not(.dark) .fi-section-header {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

html:not(.dark) .fi-section-header-heading,
html:not(.dark) .fi-section-header-description {
    color: #111111 !important;
}

/* Forms */
html:not(.dark) .fi-fo-field-wrp,
html:not(.dark) .fi-input,
html:not(.dark) .fi-input-wrp,
html:not(.dark) .fi-select,
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #d1d5db !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #9ca3af !important;
}

html:not(.dark) .fi-fo-field-wrp label {
    color: #374151 !important;
}

/* Modals */
html:not(.dark) .fi-modal-content,
html:not(.dark) .fi-modal-header,
html:not(.dark) .fi-modal-body,
html:not(.dark) .fi-modal-footer {
    background-color: #ffffff !important;
    color: #111111 !important;
}

/* Notifications */
html:not(.dark) .fi-notification {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #e5e7eb !important;
}

/* Breadcrumbs */
html:not(.dark) .fi-breadcrumbs li,
html:not(.dark) .fi-breadcrumbs a {
    color: #6b7280 !important;
}

/* Navigation tabs */
html:not(.dark) .fi-tabs-tab {
    color: #6b7280 !important;
}

html:not(.dark) .fi-tabs-tab[aria-selected="true"] {
    color: #111111 !important;
}

/* Stats widgets */
html:not(.dark) .fi-wi-stats-overview-stat {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-label {
    color: #6b7280 !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-value {
    color: #111111 !important;
}

/* Dropdown menus */
html:not(.dark) .fi-dropdown-panel {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

html:not(.dark) .fi-dropdown-list-item-label {
    color: #111111 !important;
}

/* Info lists */
html:not(.dark) .fi-in-entry,
html:not(.dark) .fi-in-entry-wrp {
    color: #111111 !important;
}

html:not(.dark) .fi-in-entry-wrp-label {
    color: #6b7280 !important;
}

/* Pagination */
html:not(.dark) .fi-pagination-item {
    color: #111111 !important;
}

/* Search */
html:not(.dark) .fi-global-search-input {
    background-color: #ffffff !important;
    color: #111111 !important;
}

/* Empty states */
html:not(.dark) .fi-ta-empty-state {
    background-color: #ffffff !important;
    color: #6b7280 !important;
}

/* ==========================================================================
   SIDEBAR STYLING - WHITE
   ========================================================================== */

html:not(.dark) .fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
}

html:not(.dark) .fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 1rem !important;
}

html:not(.dark) .fi-sidebar-header a {
    color: #111111 !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
}

.fi-sidebar-nav-groups {
    padding: 0.75rem !important;
}

.fi-sidebar-item {
    margin-bottom: 0.125rem !important;
}

html:not(.dark) .fi-sidebar-item-button {
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.875rem !important;
    transition: all 0.15s ease !important;
    color: #374151 !important;
}

html:not(.dark) .fi-sidebar-item-button:hover {
    background: #f3f4f6 !important;
    color: #111111 !important;
}

.fi-sidebar-item-button.fi-active {
    background: var(--mc-sky) !important;
    color: white !important;
}

html:not(.dark) .fi-sidebar-group-label {
    color: #6b7280 !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 0.875rem 0.375rem !important;
}

/* Sidebar icons */
html:not(.dark) .fi-sidebar-item-button svg {
    color: #6b7280 !important;
}

html:not(.dark) .fi-sidebar-item-button:hover svg {
    color: #111111 !important;
}

.fi-sidebar-item-button.fi-active svg {
    color: white !important;
}

/* ==========================================================================
   MAIN CONTENT AREA — light theme only
   ========================================================================== */

html:not(.dark) .fi-main {
    background: #ffffff !important;
}

.fi-page {
    padding: 1rem !important;
}

.fi-main-ctn {
    max-width: 100% !important;
}

/* ==========================================================================
   PANEL CARDS
   ========================================================================== */

.mc-panel {
    background: var(--mc-bg-panel);
    border: 1px solid var(--mc-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--mc-shadow);
}

.mc-panel-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--mc-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--mc-bg-panel);
}

.mc-panel-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mc-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.mc-panel-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-weight: 600;
}

.mc-panel-body {
    padding: 1rem;
}

/* ==========================================================================
   STATUS INDICATORS - WITH PULSE ANIMATION
   ========================================================================== */

.mc-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.mc-status-dot.green {
    background: var(--mc-status-green);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: mc-pulse-green 2s infinite;
}

.mc-status-dot.yellow {
    background: var(--mc-status-yellow);
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4);
    animation: mc-pulse-yellow 2s infinite;
}

.mc-status-dot.red {
    background: var(--mc-status-red);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    animation: mc-pulse-red 1.5s infinite;
}

@keyframes mc-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes mc-pulse-yellow {
    0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(234, 179, 8, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}

@keyframes mc-pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================================================
   TIER BADGES
   ========================================================================== */

.mc-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.mc-tier.tier-A { background: #2563eb; }
.mc-tier.tier-B { background: #059669; }
.mc-tier.tier-C { background: #d97706; }

.mc-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mc-tier-badge.tier-A { background: rgba(37, 99, 235, 0.1); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.3); }
.mc-tier-badge.tier-B { background: rgba(5, 150, 105, 0.1); color: #059669; border: 1px solid rgba(5, 150, 105, 0.3); }
.mc-tier-badge.tier-C { background: rgba(217, 119, 6, 0.1); color: #d97706; border: 1px solid rgba(217, 119, 6, 0.3); }

/* ==========================================================================
   VIP BADGE
   ========================================================================== */

.mc-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   STATUS PILLS
   ========================================================================== */

.mc-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.mc-status-pill.pending { background: rgba(234, 179, 8, 0.1); color: #b45309; }
.mc-status-pill.assigned { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.mc-status-pill.in_progress { background: rgba(16, 185, 129, 0.1); color: #059669; }
.mc-status-pill.completed { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.mc-status-pill.cancelled { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

/* ==========================================================================
   DRIVER CLOCK GAUGE (10-Hour Shift)
   ========================================================================== */

.mc-clock-gauge {
    position: relative;
    width: 80px;
    height: 48px;
}

.mc-clock-gauge svg {
    width: 100%;
    height: 100%;
}

.mc-clock-value {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mc-text-primary);
}

.mc-clock-label {
    font-size: 0.5rem;
    color: var(--mc-text-muted);
    text-transform: uppercase;
}

/* ==========================================================================
   INTELLIGENCE FEED ITEMS
   ========================================================================== */

.mc-intel-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.5rem;
    background: var(--mc-bg-muted);
    border-left: 3px solid transparent;
    margin-bottom: 0.5rem;
    transition: all 0.15s ease;
}

.mc-intel-item:hover {
    background: var(--mc-bg-subtle);
}

.mc-intel-item.green { border-left-color: var(--mc-status-green); }
.mc-intel-item.yellow { border-left-color: var(--mc-status-yellow); }
.mc-intel-item.red { border-left-color: var(--mc-status-red); background: rgba(239, 68, 68, 0.05); }

.mc-intel-content {
    flex: 1;
    min-width: 0;
}

.mc-intel-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mc-text-primary);
    margin-bottom: 0.25rem;
}

.mc-intel-detail {
    font-size: 0.75rem;
    color: var(--mc-text-secondary);
}

.mc-intel-time {
    font-size: 0.625rem;
    color: var(--mc-text-muted);
    margin-top: 0.375rem;
}

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

.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mc-btn-primary {
    background: var(--mc-sky);
    color: white;
}

.mc-btn-primary:hover {
    background: var(--mc-sky-muted);
}

.mc-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.mc-btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

.mc-btn-ghost {
    background: transparent;
    color: var(--mc-text-secondary);
    border: 1px solid var(--mc-border);
}

.mc-btn-ghost:hover {
    background: var(--mc-bg-muted);
    border-color: var(--mc-border-hover);
}

.mc-btn-swap {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #1f2937;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

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

.mc-btn-dismiss {
    background: var(--mc-bg-muted);
    color: #64748b;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    min-width: 1.75rem;
}

.mc-btn-dismiss:hover {
    background: #e2e8f0;
    color: #475569;
}

/* ==========================================================================
   DRIVER CARDS
   ========================================================================== */

.mc-driver-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--mc-bg);
    border: 1px solid var(--mc-border);
    transition: all 0.15s ease;
}

.mc-driver-card:hover {
    border-color: var(--mc-sky);
    background: var(--mc-bg-subtle);
}

.mc-driver-card.busy {
    border-color: var(--mc-status-green);
    background: rgba(34, 197, 94, 0.05);
}

.mc-driver-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: white;
    flex-shrink: 0;
}

.mc-driver-avatar.tier-A { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.mc-driver-avatar.tier-B { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.mc-driver-avatar.tier-C { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }

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

.mc-driver-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-driver-meta {
    font-size: 0.6875rem;
    color: var(--mc-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   MAP CONTAINER
   ========================================================================== */

.mc-map-container {
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--mc-bg-muted);
}

.mc-map-container #map-canvas {
    height: 350px;
    width: 100%;
}

/* ==========================================================================
   STATUS HUB TABLE
   ========================================================================== */

.mc-status-hub {
    width: 100%;
    font-size: 0.8125rem;
}

.mc-status-hub-header {
    display: grid;
    grid-template-columns: 70px 120px 90px 140px 1fr 80px 90px 100px;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--mc-bg-muted);
    border-bottom: 1px solid var(--mc-border);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mc-status-hub-row {
    display: grid;
    grid-template-columns: 70px 120px 90px 140px 1fr 80px 90px 100px;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mc-border);
    align-items: center;
    transition: background 0.15s ease;
}

.mc-status-hub-row:hover {
    background: var(--mc-bg-subtle);
}

.mc-job-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--mc-text-muted);
}

.mc-flight-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--mc-sky);
    font-weight: 500;
}

.mc-route {
    font-size: 0.75rem;
    color: var(--mc-text-secondary);
}

.mc-route-arrow {
    color: var(--mc-text-muted);
    margin: 0 0.25rem;
}

.mc-delay {
    font-size: 0.75rem;
    font-weight: 600;
}

.mc-delay.on-time { color: var(--mc-status-green); }
.mc-delay.delayed { color: #b45309; }
.mc-delay.late { color: var(--mc-status-red); }

/* ==========================================================================
   FATIGUE GAUGE (Driver Profile)
   ========================================================================== */

.mc-fatigue-gauge {
    position: relative;
    width: 180px;
    height: 100px;
    margin: 0 auto;
}

.mc-fatigue-value {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.mc-fatigue-hours {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mc-text-primary);
    line-height: 1;
}

.mc-fatigue-label {
    font-size: 0.625rem;
    color: var(--mc-text-muted);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.mc-fatigue-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.mc-fatigue-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--mc-text-muted);
}

/* ==========================================================================
   ROSTER CHART (14-Day)
   ========================================================================== */

.mc-roster-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 0.375rem;
}

.mc-roster-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-radius: 6px;
    background: var(--mc-bg-muted);
    transition: all 0.15s ease;
}

.mc-roster-day.today {
    border: 2px solid var(--mc-sky);
    background: rgba(14, 165, 233, 0.05);
}

.mc-roster-day-label {
    font-size: 0.5625rem;
    color: var(--mc-text-muted);
    text-transform: uppercase;
}

.mc-roster-day-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mc-text-primary);
    margin: 0.125rem 0;
}

.mc-roster-bar {
    width: 100%;
    height: 40px;
    background: var(--mc-border);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.mc-roster-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 3px;
    transition: height 0.3s ease;
}

.mc-roster-bar-fill.green { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); }
.mc-roster-bar-fill.yellow { background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%); }
.mc-roster-bar-fill.red { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); }

.mc-roster-hours {
    font-size: 0.5625rem;
    color: var(--mc-text-muted);
    margin-top: 0.25rem;
}

/* ==========================================================================
   CERTIFICATION BADGES
   ========================================================================== */

.mc-cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: var(--mc-bg-muted);
    border: 1px solid var(--mc-border);
    transition: all 0.15s ease;
}

.mc-cert-badge:hover {
    border-color: var(--mc-sky);
}

.mc-cert-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-cert-icon.vip { background: rgba(251, 191, 36, 0.15); color: #b45309; }
.mc-cert-icon.touring { background: rgba(16, 185, 129, 0.15); color: #059669; }
.mc-cert-icon.bus { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.mc-cert-icon.daytrip { background: rgba(168, 85, 247, 0.15); color: #7c3aed; }

.mc-cert-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mc-text-primary);
}

.mc-cert-desc {
    font-size: 0.6875rem;
    color: var(--mc-text-muted);
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

.mc-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mc-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.mc-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.mc-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

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

.mc-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--mc-text-muted);
}

.mc-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1400px) {
    .mc-status-hub-header,
    .mc-status-hub-row {
        grid-template-columns: 70px 100px 80px 120px 1fr 70px 80px 90px;
        gap: 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 1200px) {
    .mc-roster-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* ==========================================================================
   EXPIRY CARDS — Traffic-light compliance indicators
   ========================================================================== */

.mc-expiry-card {
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--mc-border);
    background: var(--mc-bg-muted);
    transition: all 0.15s ease;
}

.mc-expiry-card:hover {
    background: var(--mc-bg-subtle);
}

.mc-expiry-card.valid {
    border-left-color: var(--mc-status-green);
}

.mc-expiry-card.expiring {
    border-left-color: var(--mc-status-yellow);
}

.mc-expiry-card.expired {
    border-left-color: var(--mc-status-red);
    background: rgba(239, 68, 68, 0.05);
}

.mc-expiry-card-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mc-text-muted);
    margin-bottom: 0.25rem;
}

.mc-expiry-card-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mc-text-primary);
}

.mc-expiry-card-number {
    font-size: 0.75rem;
    color: var(--mc-text-secondary);
    margin-top: 0.125rem;
    font-family: 'JetBrains Mono', monospace;
}

.mc-expiry-card-status {
    font-size: 0.6875rem;
    font-weight: 600;
    margin-top: 0.375rem;
}

.mc-expiry-card.valid .mc-expiry-card-status { color: var(--mc-status-green); }
.mc-expiry-card.expiring .mc-expiry-card-status { color: var(--mc-status-yellow); }
.mc-expiry-card.expired .mc-expiry-card-status { color: var(--mc-status-red); }

/* ==========================================================================
   PROFILE TABS — Tab navigation for profile pages
   ========================================================================== */

.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--mc-border);
    margin-bottom: 1.25rem;
}

.profile-tab {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mc-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

.profile-tab:hover {
    color: var(--mc-text-primary);
}

.profile-tab.active {
    color: var(--mc-sky);
    border-bottom-color: var(--mc-sky);
}

.profile-tab-content {
    display: none;
}

.profile-tab-content.active {
    display: block;
}

/* ==========================================================================
   PHOTO GRID — Vehicle/entity photo gallery
   ========================================================================== */

.mc-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.mc-photo-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mc-bg-muted);
    border: 1px solid var(--mc-border);
    aspect-ratio: 4/3;
    transition: all 0.15s ease;
}

.mc-photo-card:hover {
    border-color: var(--mc-sky);
    box-shadow: var(--mc-shadow-lg);
}

.mc-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-photo-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* ==========================================================================
   TIMELINE — Event history timeline
   ========================================================================== */

.mc-timeline {
    position: relative;
    padding-left: 2rem;
}

.mc-timeline::before {
    content: '';
    position: absolute;
    left: 0.625rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mc-border);
}

.mc-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}

.mc-timeline-item:last-child {
    padding-bottom: 0;
}

.mc-timeline-dot {
    position: absolute;
    left: -1.625rem;
    top: 0.375rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mc-border);
    border: 2px solid var(--mc-bg-panel);
}

.mc-timeline-dot.accident { background: var(--mc-status-red); }
.mc-timeline-dot.damage { background: #f97316; }
.mc-timeline-dot.service { background: var(--mc-sky); }
.mc-timeline-dot.inspection { background: var(--mc-status-green); }
.mc-timeline-dot.incident { background: var(--mc-status-yellow); }
.mc-timeline-dot.other { background: var(--mc-text-muted); }

.mc-timeline-content {
    padding: 0.75rem 1rem;
    background: var(--mc-bg-muted);
    border-radius: 8px;
    border: 1px solid var(--mc-border);
}

.mc-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.mc-timeline-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mc-text-primary);
}

.mc-timeline-date {
    font-size: 0.6875rem;
    color: var(--mc-text-muted);
}

.mc-timeline-desc {
    font-size: 0.8125rem;
    color: var(--mc-text-secondary);
    margin-top: 0.25rem;
}

.mc-timeline-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--mc-text-muted);
}

.mc-severity-badge {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mc-severity-badge.minor { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.mc-severity-badge.moderate { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.mc-severity-badge.major { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

/* ==========================================================================
   SENSITIVE DATA TOGGLE — Collapsible section for PPS/bank/credentials
   ========================================================================== */

.mc-sensitive-toggle {
    border: 1px solid var(--mc-border);
    border-radius: 8px;
    overflow: hidden;
}

.mc-sensitive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--mc-bg-muted);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.mc-sensitive-header:hover {
    background: var(--mc-bg-subtle);
}

.mc-sensitive-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mc-text-primary);
}

.mc-sensitive-header-icon {
    width: 16px;
    height: 16px;
    color: var(--mc-text-muted);
    transition: transform 0.2s ease;
}

.mc-sensitive-body {
    padding: 1rem;
    border-top: 1px solid var(--mc-border);
}

/* ==========================================================================
   DATA REVIEW PAGE — Category stats and review table
   ========================================================================== */

.mc-stats-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.mc-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--mc-bg-muted);
    border: 1px solid var(--mc-border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mc-text-primary);
}

.mc-stat-chip-count {
    font-size: 1rem;
    font-weight: 700;
}

.mc-review-badge {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mc-review-badge.pending { background: rgba(234, 179, 8, 0.1); color: #b45309; }
.mc-review-badge.keep { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.mc-review-badge.discard { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

/* ==========================================================================
   FORM SECTIONS — Subtle grey background, white inputs
   ========================================================================== */

/* Fieldsets (Requirements, Pricing, etc.) — light theme only */
html:not(.dark) .fi-fieldset {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    border-radius: 0.75rem !important;
}

/* Inputs stay white in LIGHT mode only */
html:not(.dark) .fi-section input,
html:not(.dark) .fi-section textarea,
html:not(.dark) .fi-section select,
html:not(.dark) .fi-section .fi-input-wrp,
html:not(.dark) .fi-section .fi-select-input,
html:not(.dark) .fi-fieldset input,
html:not(.dark) .fi-fieldset textarea,
html:not(.dark) .fi-fieldset select,
html:not(.dark) .fi-fieldset .fi-input-wrp,
html:not(.dark) .fi-fieldset .fi-select-input {
    background-color: #ffffff !important;
}

/* Repeater items — light theme only */
html:not(.dark) .fi-fo-repeater-item {
    background-color: #ffffff !important;
}

/* Two-column booking form — force equal height columns */
.fi-fo-component-ctn [class*="grid-cols-2"] {
    align-items: stretch !important;
}

.fi-fo-component-ctn [class*="grid-cols-2"] > div {
    display: flex !important;
    flex-direction: column !important;
}

.fi-fo-component-ctn [class*="grid-cols-2"] > div > .fi-section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.fi-fo-component-ctn [class*="grid-cols-2"] > div > .fi-section > .fi-section-content-ctn {
    flex: 1 !important;
}

/* Page background — light theme only. THIS was the smoking gun for the
   "page backgrounds stuck white" issue: an unscoped !important `.fi-page`
   rule that overrode every page in dark mode. Now scoped properly. */
html:not(.dark) .fi-page,
html:not(.dark) .fi-main-ctn {
    background-color: #ffffff !important;
}

/* Section cards = white in light mode only */
html:not(.dark) .fi-section-content-ctn,
html:not(.dark) .fi-fo-component-ctn,
html:not(.dark) .fi-fieldset-wrp {
    background-color: #ffffff !important;
}

/* Section header labels — light theme */
html:not(.dark) .fi-section-header {
    background-color: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* VIAs repeater — light theme only */
html:not(.dark) .fi-fo-repeater .fi-fo-repeater-item {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
}

/* Toggle buttons selected state — stronger emphasis */
.fi-fo-toggle-buttons button[aria-pressed="true"] {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.3) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   USER MENU — sharp corners (no rounded pill)
   Filament 3.x bottom-left user menu trigger + dropdown button
   ========================================================================== */

.fi-user-menu,
.fi-user-menu button,
.fi-user-menu [role="button"],
.fi-sidebar-footer,
.fi-sidebar-footer button,
.fi-sidebar-footer [role="button"],
.fi-dropdown-trigger,
.fi-dropdown-trigger button {
    border-radius: 0 !important;
}


/* ==========================================================================
   GLOBAL CHECKBOX FIX
   Filament's Tailwind preflight applies `appearance: none` to every
   `<input type="checkbox">`. That's fine for Filament's own checkboxes
   (they have custom .fi-checkbox-input styling), but raw inputs in our
   custom Livewire pages (Add Shift modal, Tour modal SDG, etc.) end up
   as empty squares that never show their checked state. This rule
   re-enables native rendering for any checkbox that isn't styled by
   Filament — opt-out via a `.fi-` ancestor or explicit class.
   ========================================================================== */
input[type="checkbox"]:not([class*="fi-"]):not(.choices__input) {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
    cursor: pointer;
    border: 1px solid #9ca3af;
    border-radius: 3px;
    background: white;
    flex-shrink: 0;
}

input[type="checkbox"]:not([class*="fi-"]):not(.choices__input):focus {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}

input[type="checkbox"]:not([class*="fi-"]):not(.choices__input):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   FILAMENT BULK-CHECKBOX TICK FIX
   The narrower rule above excluded `[class*="fi-"]` so Filament could keep
   its custom styling. But Filament's own checkboxes (bulk-select column,
   form checkboxes) are also rendering empty across the panel — the SVG
   tick isn't surfacing. Force native rendering for every checkbox so the
   checked state is always visible. Indeterminate state on the bulk header
   no longer renders as a minus dash, but visibility > aesthetics.
   ========================================================================== */
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    accent-color: #6366f1;
    background-image: none !important;
}

/* ==========================================================================
   DARK MODE — Cool Midnight (Zinc) palette
   ==========================================================================
   Filament adds class="dark" to the <html> element when the user toggles
   dark mode (or when their OS prefers dark, if so configured on the panel).
   Two layers below:
     A. Re-bind every --mc-* variable to its Zinc-dark equivalent. Anywhere
        in the codebase that reads var(--mc-bg) etc. flips automatically.
     B. Override the most common HARD-CODED light values used in inline
        styles across the bespoke pages (Scheduler, Tour Planner, Control
        Hub). Inline styles beat plain selectors, so we use attribute
        selectors + !important to win the cascade.
   ========================================================================== */
.dark {
    /* Core surfaces — Slate-navy ramp matching the Arison reference. */
    --mc-bg: #0f172a;             /* slate-900 — page background */
    --mc-bg-subtle: #1e293b;      /* slate-800 — cards / surfaces */
    --mc-bg-muted: #1e293b;       /* slate-800 — alt surface */
    --mc-bg-panel: #1e293b;       /* slate-800 — panel */

    /* Accent — royal blue (Arison's CTA colour, not sky-cyan) */
    --mc-sky: #3b82f6;            /* blue-500 */
    --mc-sky-muted: #2563eb;      /* blue-600 */
    --mc-emerald: #34d399;        /* emerald-400 */
    --mc-amber: #fbbf24;          /* amber-400 */
    --mc-rose: #fb7185;           /* rose-400 */

    /* Text — white for headings, slate-300 for body, slate-400 for muted. */
    --mc-text-primary: #f8fafc;   /* slate-50 */
    --mc-text-secondary: #cbd5e1; /* slate-300 */
    --mc-text-muted: #94a3b8;     /* slate-400 */

    /* Status colors — keep semantic, brighter on dark for AA. */
    --mc-status-green: #10b981;   /* emerald-500 — Completed badges */
    --mc-status-yellow: #f59e0b;  /* amber-500 */
    --mc-status-red: #ef4444;     /* red-500 — Cancelled badges */

    /* Borders */
    --mc-border: #334155;         /* slate-700 */
    --mc-border-hover: #475569;   /* slate-600 */

    /* Shadows — deeper alpha so they read against dark surfaces */
    --mc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --mc-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);

    /* Gradients */
    --mc-gradient-panel: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --mc-gradient-sidebar: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --mc-gradient-header: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);

    /* Ops-UI redesign tokens (dark) */
    --mc-ok:#22c55e;        --mc-ok-bg:rgba(34,197,94,.12);
    --mc-warn:#f59e0b;      --mc-warn-bg:rgba(245,158,11,.10);
    --mc-danger:#f87171;    --mc-danger-bg:rgba(239,68,68,.12);
    --mc-accent:#6366f1;    --mc-accent-2:#10b981;
    --mc-tile:#0e1727;      --mc-tile-2:#0b1422;   --mc-tile-border:#1e293b;
    --mc-label:#475569;
    --mc-vip-bg:rgba(250,204,21,.18);    --mc-vip-text:#fde047;
}

/* ── B. Inline-style overrides ───────────────────────────────────────────
   Each rule targets a hard-coded light value used heavily in the bespoke
   page templates. The counts come from a grep audit; if a new template
   adds another light shade, add the case here. !important is required
   because we're competing with element-level style="..." attributes. */

/* Pure white surfaces → dark panel */
.dark [style*="background: white"],
.dark [style*="background:white"],
.dark [style*="background: #fff"],
.dark [style*="background:#fff"],
.dark [style*="background: #ffffff"] {
    background: var(--mc-bg-subtle) !important;
}

/* Light gray surfaces (gray-50/100/200) → muted dark */
.dark [style*="background: #f9fafb"],
.dark [style*="background: #f3f4f6"],
.dark [style*="background: #f0f0f0"],
.dark [style*="background: #e5e7eb"] {
    background: var(--mc-bg-muted) !important;
}

/* Subtle warm tints (Day Notes amber) → low-opacity amber on dark */
.dark [style*="background: #fef3c7"],
.dark [style*="background: #fffbeb"],
.dark [style*="background: #fef9c3"] {
    background: rgba(245, 158, 11, 0.12) !important;
}

/* Subtle cool tints (Events row, info panels) */
.dark [style*="background: #eff6ff"],
.dark [style*="background: #dbeafe"],
.dark [style*="background: #e0e7ff"] {
    background: rgba(59, 130, 246, 0.12) !important;
}

/* Subtle green / red tints */
.dark [style*="background: #f0fdf4"],
.dark [style*="background: #ecfdf5"],
.dark [style*="background: #dcfce7"] {
    background: rgba(34, 197, 94, 0.12) !important;
}
.dark [style*="background: #fee2e2"],
.dark [style*="background: #fef2f2"],
.dark [style*="background: #fecaca"] {
    background: rgba(239, 68, 68, 0.12) !important;
}

/* Body text colors */
.dark [style*="color: #111827"],
.dark [style*="color: #1f2937"],
.dark [style*="color: #111111"],
.dark [style*="color:#111111"],
.dark [style*="color: #000"],
.dark [style*="color:#000"] {
    color: var(--mc-text-primary) !important;
}
.dark [style*="color: #374151"],
.dark [style*="color: #4b5563"] {
    color: var(--mc-text-secondary) !important;
}
.dark [style*="color: #6b7280"],
.dark [style*="color: #9ca3af"] {
    color: var(--mc-text-muted) !important;
}

/* Light border colors used inline */
.dark [style*="border-color: #e5e7eb"],
.dark [style*="border-color: #d1d5db"],
.dark [style*="border: 1px solid #e5e7eb"],
.dark [style*="border: 1px solid #d1d5db"],
.dark [style*="border: 1px solid #e2e8f0"] {
    border-color: var(--mc-border) !important;
}

/* Tinted-bar borders (Notes amber, Events blue) — match the new tints */
.dark [style*="border: 1px solid #fde68a"],
.dark [style*="border: 1px solid #fcd34d"] {
    border-color: rgba(245, 158, 11, 0.35) !important;
}
.dark [style*="border: 1px solid #bfdbfe"],
.dark [style*="border: 1px solid #93c5fd"] {
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* Form inputs / selects that hard-code white background */
.dark input[style*="background: white"],
.dark select[style*="background: white"],
.dark textarea[style*="background: white"] {
    background: var(--mc-bg-muted) !important;
    color: var(--mc-text-primary) !important;
    border-color: var(--mc-border) !important;
}

/* Checkbox accent-color — bump for dark contrast */
.dark input[type="checkbox"] {
    accent-color: #38bdf8;
}

/* ==========================================================================
   DARK MODE — FORCED FILAMENT OVERRIDES (Zinc)
   ==========================================================================
   The earlier "FILAMENT OVERRIDES - WHITE BACKGROUND" block in this file
   uses `!important` to force white on every Filament component. That was
   correct for the original light-only design but it NUKES Filament's
   stock dark utilities when the user toggles dark mode — leaving the
   login form with white inputs on a dark card, the Control Hub tables
   with invisible header text, etc.
   The rules below win the cascade against those by using `html.dark .fi-X`
   (3 simple classes vs 1) AND `!important`. They re-paint every
   Filament-stock component in Zinc-dark values.
   ========================================================================== */

html.dark body,
html.dark .fi-body,
html.dark .fi-layout {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

html.dark .fi-topbar {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Page headings — these were INVISIBLE in the previous attempt because
   Filament's .fi-header-heading sits on .fi-resource-list-page-heading
   and several other classes I missed. Cast a wide net. */
html.dark .fi-header,
html.dark .fi-page-header,
html.dark .fi-resource-page-header {
    background-color: transparent !important;
    border-color: transparent !important;
}
html.dark .fi-header-heading,
html.dark .fi-page-header-heading,
html.dark .fi-resource-list-page-heading,
html.dark .fi-page-heading,
html.dark .fi-page h1,
html.dark .fi-page h2,
html.dark .fi-modal-heading,
html.dark .fi-section-heading {
    color: #ffffff !important;
}

html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
    color: #ffffff !important;
}

/* Body text everywhere else — sweep the common Tailwind text classes
   Filament uses. The earlier light theme's `color: #111111 !important`
   on Filament wrappers nukes Filament's own dark utilities; re-paint. */
html.dark .fi-body p,
html.dark .fi-body span:not([class*="fi-color"]):not([class*="fi-badge"]),
html.dark .fi-body div:not([class*="fi-color"]):not([class*="fi-badge"]):not([class*="bg-"]),
html.dark .fi-body label,
html.dark .fi-body td,
html.dark .fi-body th,
html.dark .fi-body li {
    color: inherit;
}

/* Tables */
html.dark .fi-ta-table,
html.dark .fi-ta-row,
html.dark .fi-ta-cell,
html.dark .fi-ta-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark .fi-ta-header-cell {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
html.dark .fi-ta-row:hover {
    background-color: #283449 !important;
}
/* Table text — the previous attempt missed Filament's TextColumn wrapper
   classes, so rows came out invisible. Cast wide here. */
html.dark .fi-ta-text,
html.dark .fi-ta-text-item,
html.dark .fi-ta-text-item-label,
html.dark .fi-ta-cell .fi-text,
html.dark .fi-ta-cell-text,
html.dark .fi-ta-record-content,
html.dark .fi-ta-record-content > *:not([class*="fi-badge"]):not([class*="fi-color"]) {
    color: #f8fafc !important;
}

/* Cards & sections — the BIG one. Login card lives here. */
html.dark .fi-section,
html.dark .fi-section-content,
html.dark .fi-card,
html.dark .fi-wi-card {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark .fi-section-header {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark .fi-section-header-heading,
html.dark .fi-section-header-description {
    color: #f8fafc !important;
}

/* Forms — the previous attempt left WHITE BARS under each input on the
   login form. Those bars are the field-wrapper itself + the hint/error
   text containers, all unscoped. Cover every wrap class Filament uses
   so the entire form column reads as one consistent dark band. */
html.dark .fi-fo-field-wrp,
html.dark .fi-fo-field-wrp-content,
html.dark .fi-fo-field-wrp-helper-text,
html.dark .fi-fo-field-wrp-error-message,
html.dark .fi-fo-field-wrp-label-wrapper,
html.dark .fi-fo-component-ctn {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border-color: transparent !important;
}
html.dark .fi-input,
html.dark .fi-input-wrp,
html.dark .fi-select,
html.dark .fi-input-wrp-input,
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #283449 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}
html.dark .fi-fo-field-wrp label,
html.dark .fi-fo-field-wrp-label,
html.dark label {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

/* Modals */
html.dark .fi-modal-content,
html.dark .fi-modal-header,
html.dark .fi-modal-body,
html.dark .fi-modal-footer {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Notifications */
html.dark .fi-notification {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Breadcrumbs + tabs */
html.dark .fi-breadcrumbs li,
html.dark .fi-breadcrumbs a,
html.dark .fi-tabs-tab {
    color: #94a3b8 !important;
}
html.dark .fi-tabs-tab[aria-selected="true"] {
    color: #f8fafc !important;
    background-color: #283449 !important;
}

/* Stats widgets */
html.dark .fi-wi-stats-overview-stat {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark .fi-wi-stats-overview-stat-label {
    color: #94a3b8 !important;
}
html.dark .fi-wi-stats-overview-stat-value {
    color: #f8fafc !important;
}

/* Dropdowns */
html.dark .fi-dropdown-panel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark .fi-dropdown-list-item-label {
    color: #f8fafc !important;
}

/* Info lists */
html.dark .fi-in-entry,
html.dark .fi-in-entry-wrp {
    color: #f8fafc !important;
}
html.dark .fi-in-entry-wrp-label {
    color: #94a3b8 !important;
}

/* Pagination + search + empty states */
html.dark .fi-pagination-item {
    color: #f8fafc !important;
}
html.dark .fi-global-search-input {
    background-color: #283449 !important;
    color: #f8fafc !important;
}
html.dark .fi-ta-empty-state {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}

/* Sidebar */
html.dark .fi-sidebar,
html.dark .fi-sidebar-nav,
html.dark .fi-sidebar-group {
    background-color: #0a1020 !important;
    border-color: #334155 !important;
}
html.dark .fi-sidebar-item a,
html.dark .fi-sidebar-item-label,
html.dark .fi-sidebar-group-label {
    color: #cbd5e1 !important;
}
html.dark .fi-sidebar-item-active a,
html.dark .fi-sidebar-item-active .fi-sidebar-item-label {
    color: #ffffff !important;
    background-color: #3b82f6 !important;
}

/* ==========================================================================
   TOUR PLANNER GANTT — weekend & driver-row pastels
   ==========================================================================
   The Touring Gantt sets driver-row backgrounds + weekend backgrounds
   inline from a JS color array (RC[]). The light pastels look terrible
   on dark. Catch each hex via attribute selector and replace with a
   low-opacity tint of the same hue.
   ========================================================================== */

/* ALL day-cells → uniform slate-800 surface, regardless of weekend or
   driver-row color. Earlier attempt mapped each pastel back to a low-
   opacity tint of its hue, which produced a horrible patchwork. The
   reference designs (Google Calendar dark + the project Gantt) prove
   a uniform dark grid with coloured BARS on top reads cleaner. */
html.dark .day-cell { background: #1e293b !important; }

/* All driver-cell backgrounds collapse to a single navy. The row-tier
   identity is now carried by the driver name colour + tour bar colour,
   not by the cell tint. */
html.dark .driver-cell {
    background: #1a2538 !important;
    color: #f8fafc !important;
    border-left-color: #3b82f6 !important;
}

/* Weekend day-headers stay slightly darker than weekdays for a sub-
   second visual cue, without going to a coloured tint. */
html.dark .gantt-day-header { background: #1e293b !important; color: #cbd5e1 !important; }
html.dark .gantt-day-header.weekend { background: #18243b !important; color: #64748b !important; }
html.dark .unassigned-day { background: #1a2538 !important; }
html.dark .unassigned-day.weekend { background: #18243b !important; }
html.dark .unassigned-label { color: #f8fafc !important; background: #0a1020 !important; }

/* Tour bars KEEP their colours — leave them entirely alone here. */

/* Scheduler page — Working Today bar, Events row, day notes. */
html.dark .driver-bar { background: #1e293b !important; border-color: #334155 !important; }
html.dark .driver-bar .label { color: #94a3b8 !important; }
html.dark .driver-chip { background: #283449 !important; color: #f8fafc !important; }

/* Filter chips — keep the row dark but let chip pill colours pass through. */
html.dark .chip,
html.dark .fi-tabs-tab:not([aria-selected="true"]) {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* Date-strip pills on the Bookings page (Mon/Tue/Wed/...). Those are
   Filament buttons; cover the wrap so they don't render as pure white. */
html.dark .fi-btn[type="button"][wire\:click*="goToDay"],
html.dark .fi-btn-color-gray:not([aria-selected="true"]) {
    background-color: #283449 !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* ==========================================================================
   THE REMAINING WHITE-PAGE CULPRITS
   ==========================================================================
   These are the classes that survived my first dark-mode pass because they
   sit further down in elite-theme.css with `!important` rules. Without
   matching `html.dark` overrides they stay white in dark mode, leaving
   every page with a white canvas behind dark cards. Bruno's screenshots
   are all variants of this same root cause.
   ========================================================================== */
html.dark .fi-page,
html.dark .fi-main,
html.dark .fi-main-ctn,
html.dark .fi-page-content {
    background-color: #0f172a !important;
}

html.dark .fi-section-content-ctn,
html.dark .fi-fo-component-ctn,
html.dark .fi-fieldset,
html.dark .fi-fieldset-wrp,
html.dark .fi-fo-repeater-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Form inputs INSIDE a .fi-section / .fi-fieldset — the legacy CSS hits
   them with a separate set of selectors that we have to mirror. */
html.dark .fi-section input,
html.dark .fi-section textarea,
html.dark .fi-section select,
html.dark .fi-section .fi-input-wrp,
html.dark .fi-section .fi-select-input,
html.dark .fi-fieldset input,
html.dark .fi-fieldset textarea,
html.dark .fi-fieldset select,
html.dark .fi-fieldset .fi-input-wrp,
html.dark .fi-fieldset .fi-select-input {
    background-color: #283449 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Toggle buttons (selected) — keep the blue accent but bump the contrast
   so it reads on a dark fieldset. */
html.dark .fi-fo-toggle-buttons button[aria-pressed="true"] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Row hover — slate-700, not the default ugly grey. */
html.dark .fi-ta-row:hover,
html.dark tr:hover {
    background-color: #243049 !important;
}

/* Borders that show up as invisible grey in dark mode (Roster grid, divider
   strokes). Use a subtle navy-grey so dividers are visible without harshness. */
html.dark hr,
html.dark .fi-ta-cell,
html.dark .fi-ta-row,
html.dark .fi-section-content-ctn > * + *,
html.dark .border,
html.dark [class*="border-gray-"] {
    border-color: #334155 !important;
}

/* Bespoke pages (Roster, Touring) draw their own grid lines via inline
   border colours like #e5e7eb. Catch those too. */
html.dark [style*="border-color: #e5e7eb"],
html.dark [style*="border-color:#e5e7eb"],
html.dark [style*="border: 1px solid #e5e7eb"],
html.dark [style*="border-bottom: 1px solid #e5e7eb"],
html.dark [style*="border-right: 1px solid #e5e7eb"] {
    border-color: #334155 !important;
}

/* The big tile titles ("Mission Control", "Bookings", "Customers", "Test
   Driver 10", etc.) that Bruno reports as "still white" — those use the
   default Tailwind h1/h2 classes within the Filament wrappers. Force
   white at the deepest selector so all of them read. */
html.dark .fi-page h1,
html.dark .fi-page h2,
html.dark .fi-page-header h1,
html.dark .fi-page-header h2,
html.dark .fi-resource-page-header h1,
html.dark .fi-main h1,
html.dark .fi-main h2 {
    color: #ffffff !important;
}

/* ==========================================================================
   BESPOKE-PAGE SWEEP
   ==========================================================================
   Bruno's latest batch pinpointed concrete classes in the custom views
   (Scheduler date strip, Tour Planner Gantt header, Roster, Driver detail
   subsections, Calendar tab "today" highlight). Each rule below fixes one
   specific class that was hardcoded for the light theme.
   ========================================================================== */

/* SCHEDULER — date-strip pills (Mon/Tue/Wed/…) */
html.dark .date-card {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: transparent !important;
}
html.dark .date-card:hover {
    background: rgba(59, 130, 246, 0.10) !important;
    border-color: #3b82f6 !important;
}
html.dark .date-card.selected {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}
html.dark .date-card.today { border-color: #22c55e !important; }
html.dark .date-card .job-count { background: rgba(255, 255, 255, 0.10) !important; }

/* Prev / Today / Next + Go-to-date buttons */
html.dark .date-nav-btn {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark .date-nav-btn:hover { background: rgba(59, 130, 246, 0.10) !important; }

/* TOUR PLANNER — Gantt header strip + month bar (this is what was making
   the "Tour Driver 1 row" look white — it's actually the GANTT HEADER row
   that sits above it, with hardcoded white/gray-50 backgrounds). */
html.dark .gantt-header-cell {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark .gantt-day-header {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
    border-right-color: #243049 !important;
}
html.dark .gantt-day-header.weekend {
    background: #18243b !important;
    color: #64748b !important;
}
html.dark .gantt-day-header.today {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #60a5fa !important;
    border-bottom-color: #3b82f6 !important;
}
html.dark .gantt-month-cell,
html.dark .gantt-month-corner {
    background: #18243b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* Driver name cell colour (was #1f2937 — invisible on dark) */
html.dark .driver-cell { color: #f8fafc !important; }
html.dark .unassigned-label {
    background: #0a1020 !important;
    color: #fbbf24 !important;
    border-top-color: #334155 !important;
}

/* ROSTER — dividing lines + weekend column backgrounds were missing in
   dark mode (Roster cells had no defined background, so weekend columns
   inherited white from somewhere up the tree). */
html.dark .roster-cell {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}
html.dark .roster-cell:hover { background: rgba(59, 130, 246, 0.10) !important; }

/* CALENDAR tab buttons + the "today" cell highlight Bruno called out as
   "ugly grey" — swap to industry-standard subtle blue tint. */
html.dark .cal-tab { color: #94a3b8 !important; }
html.dark .cal-tab.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}

/* DRIVER DETAIL — subsection labels were using --mc-text-muted; bump
   to text-secondary so "ATTRIBUTES" / "RECENT TRIPS" actually read. */
html.dark .dp-doc-section-title { color: #cbd5e1 !important; }

/* ── INDUSTRY-STANDARD HOVER (3rd attempt — actually visible this time) ─
   Previous attempts used 0.08 opacity which was nearly invisible. This
   time: 20% opacity royal-blue tint, applied everywhere interactive.
   Also covers the .month-day:hover on the Calendar tab (Bruno's "ugly
   grey" complaint maps to that selector). */
html.dark .fi-ta-row:hover,
html.dark tr:hover,
html.dark .fi-tabs-tab:not([aria-selected="true"]):hover,
html.dark .fi-dropdown-list-item:hover,
html.dark .fi-sidebar-item a:hover,
html.dark .date-card:hover,
html.dark .cal-tab:hover,
html.dark .month-day:hover,
html.dark .date-nav-btn:hover,
html.dark button:not([aria-selected="true"]):not(.fi-btn-color-primary):hover {
    background-color: rgba(59, 130, 246, 0.20) !important;
}

/* Calendar tab "today" highlight — was the light-blue/grey Bruno called
   out. Use the same blue tint as hover, slightly weaker. */
html.dark .month-day.today {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
}
html.dark .month-day.other-month {
    background-color: #0a1020 !important;
    opacity: 0.5 !important;
}
html.dark .month-day {
    border-color: rgba(51, 65, 85, 0.5) !important;
}

/* TOUR DRIVER 1 ROW (whited-out) — anchor at the row container. The first
   row was inheriting white from somewhere because .gantt-driver-row had
   no background in dark mode AND :first-of-type might pick up a wrapper
   default. Belt-and-braces: every gantt-driver-row stays transparent so
   only the .day-cell backgrounds (which we already darken) show. */
html.dark .gantt-driver-row,
html.dark .gantt-driver-row:first-child,
html.dark .gantt-driver-row:first-of-type,
html.dark .gantt-unassigned-row {
    background: transparent !important;
}

/* SOFTER DIVIDING LINES — Bruno called the previous slate-700 borders
   "too harsh". Drop opacity to ~40% so they're visible but not harsh. */
html.dark .gantt-day-header,
html.dark .gantt-month-cell,
html.dark .gantt-header-cell,
html.dark .day-cell,
html.dark .driver-cell,
html.dark .roster-cell {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

/* ROSTER row separators — the Roster grid uses an inline grid but no
   horizontal dividers, leaving driver rows running together. Force a
   bottom border on every cell at the same softness as above. */
html.dark .roster-cell {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* BOOKINGS — the date-strip wrapper itself. The .date-nav container sits
   in a Filament section that's getting a white background somewhere; the
   wrapper needs to be transparent so the page bg shows through. */
html.dark .date-nav { background: transparent !important; border-color: transparent !important; }

/* EVENTS row on Bookings — Bruno asked for different styling. Match the
   muted dark-blue aesthetic, not the saturated red from earlier. */
html.dark .events-bar,
html.dark [class*="events-row"] {
    background: #1a2538 !important;
    border-color: #334155 !important;
}
html.dark .event-chip {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #93c5fd !important;
}

/* Catch-all: any element with inline `style="background: white"` that
   isn't a coloured tour bar or status pill flips to a dark surface.
   This deliberately runs LAST so the more-targeted rules above win where
   they apply, and this catches whatever leaked through. */
html.dark [style*="background: white"]:not(.tour-bar):not(.fi-color-*):not([class*="bg-"]),
html.dark [style*="background:white"]:not(.tour-bar):not(.fi-color-*):not([class*="bg-"]),
html.dark [style*="background-color: white"]:not(.tour-bar):not(.fi-color-*),
html.dark [style*="background-color:#fff"]:not(.tour-bar):not(.fi-color-*) {
    background: #1e293b !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   GOOGLE PLACES (.pac-container) — DARK MODE
   ==========================================================================
   Google injects `.pac-container` straight into <body>, outside the Filament
   layout tree. None of our selectors above reach it because they're scoped
   under html.dark .fi-* etc. The dropdown therefore stayed white-on-white
   in dark mode (Bruno: "the google dropdown is still light so i cant see").
   These rules target the global selector — they apply ONLY when
   <html class="dark"> is set, so light mode is unaffected.
   ========================================================================== */
html.dark .pac-container {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
    font-family: 'Inter', sans-serif !important;
}
html.dark .pac-item {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-top: 1px solid #334155 !important;
    padding: 6px 10px !important;
}
html.dark .pac-item:hover,
html.dark .pac-item-selected {
    background-color: #334155 !important;
    color: #f8fafc !important;
}
html.dark .pac-item-query {
    color: #f8fafc !important;
    font-weight: 600 !important;
}
html.dark .pac-matched {
    color: #60a5fa !important;
    font-weight: 700 !important;
}
html.dark .pac-icon {
    filter: invert(0.85) brightness(1.1) !important;
}