/* ============================================
   FleetControl — Premium Design System v2.0
   Professional Fleet Management Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* === CSS Variables === */
:root {
    --fc-primary: #2563eb;
    --fc-primary-hover: #1d4ed8;
    --fc-primary-light: #eff6ff;
    --fc-primary-gradient: linear-gradient(135deg, #2563eb, #7c3aed);
    --fc-secondary: #333333;
    --fc-sidebar-bg: #0f172a;
    --fc-header-bg: #ffffff;
    --fc-border-accent: #dbeafe;
    --fc-page-glow: rgba(37, 99, 235, 0.08);

    --fc-dark: #0f172a;
    --fc-dark-lighter: #1e293b;
    --fc-dark-soft: #334155;

    --fc-success: #059669;
    --fc-success-light: #ecfdf5;
    --fc-warning: #d97706;
    --fc-warning-light: #fffbeb;
    --fc-danger: #dc2626;
    --fc-danger-light: #fef2f2;
    --fc-info: #0891b2;
    --fc-info-light: #ecfeff;

    --fc-bg: #f8fafc;
    --fc-surface: #ffffff;
    --fc-surface-hover: #f1f5f9;
    --fc-border: #e2e8f0;
    --fc-border-light: #f1f5f9;

    --fc-text: #0f172a;
    --fc-text-secondary: #475569;
    --fc-text-muted: #94a3b8;

    --fc-sidebar-width: 250px;
    --fc-sidebar-collapsed: 0px;
    --fc-header-height: 60px;

    --fc-radius: 12px;
    --fc-radius-sm: 8px;
    --fc-radius-lg: 16px;
    --fc-radius-xl: 20px;
    --fc-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --fc-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --fc-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --fc-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --fc-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    --fc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --fc-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === GLOBAL === */
html { font-size: 14px; }

body, body.no-skin {
    font-family: var(--fc-font) !important;
    background: var(--fc-bg) !important;
    color: var(--fc-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    margin: 0 !important;
    padding: 0 !important;
}

body.fc-app-shell {
    background:
        radial-gradient(circle at top right, var(--fc-page-glow), transparent 24%),
        linear-gradient(180deg, #f8fafc 0%, #f4f7fb 100%) !important;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--fc-primary); transition: var(--fc-transition); }
a:hover { color: var(--fc-primary-hover); text-decoration: none; }

/* === HEADER / NAVBAR === */
#navbar.navbar,
.navbar.navbar-default {
    background: color-mix(in srgb, var(--fc-header-bg) 92%, #ffffff 8%) !important;
    border: none !important;
    border-bottom: 1px solid var(--fc-border) !important;
    box-shadow: var(--fc-shadow-sm) !important;
    min-height: var(--fc-header-height) !important;
    margin-bottom: 0 !important;
    position: sticky !important;
    top: 0;
    z-index: 1030 !important;
    transition: margin-left var(--fc-transition-slow), width var(--fc-transition-slow) !important;
}

@media (min-width: 992px) {
    #navbar.navbar,
    .navbar.navbar-default {
        margin-left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }
}

@media (max-width: 991px) {
    #navbar.navbar,
    .navbar.navbar-default {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .fc-mobile-toggle {
        display: inline-flex !important;
    }
}

.navbar-container,
.navbar-container.flexnav,
#navbar-container {
    min-height: var(--fc-header-height) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
}

.nav-user-photo {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--fc-border) !important;
    object-fit: cover !important;
}

.user-info {
    font-weight: 600 !important;
    color: var(--fc-text) !important;
    font-size: 13px !important;
    margin-left: 8px !important;
}

.ace-nav > li > a {
    padding: 0 12px !important;
    height: var(--fc-header-height) !important;
    line-height: var(--fc-header-height) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.fc-user-mobile-label {
    display: none;
}

@media (max-width: 991px) {
    .user-info {
        display: none !important;
    }
    .fc-user-mobile-label {
        display: inline-block !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        max-width: 85px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fc-user-caret {
        display: inline-block !important;
        font-size: 11px !important;
        color: #64748b !important;
        margin-left: 3px !important;
    }
    .ace-nav > li > a.fc-user-trigger {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 999px !important;
        padding: 3px 10px !important;
        gap: 6px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    .ace-nav > li > a {
        height: auto !important;
        line-height: normal !important;
        padding: 4px 6px !important;
        min-height: 0 !important;
    }
    .ace-nav > li {
        height: auto !important;
        line-height: normal !important;
    }
    .ace-nav {
        height: auto !important;
        line-height: normal !important;
        display: flex !important;
        align-items: center !important;
    }
}


/* === SIDEBAR === */
#sidebar,
#sidebar.sidebar {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fc-sidebar-bg) 92%, #000 8%) 0%, color-mix(in srgb, var(--fc-sidebar-bg) 82%, #020617 18%) 100%) !important;
    border-right: none !important;
    box-shadow: 4px 0 10px rgba(0,0,0,0.1) !important;
    width: var(--fc-sidebar-width) !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1031 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
}

#sidebar .nav-list,
#sidebar .nav.nav-list {
    padding: 8px 10px !important;
    margin: 0 !important;
    list-style: none !important;
}

#sidebar .nav-list > .nav-item,
#sidebar .nav-list > li {
    margin-bottom: 1px !important;
    list-style: none !important;
}

#sidebar .nav-list .nav-link,
#sidebar .nav-list > li > a {
    color: #94a3b8 !important;
    padding: 10px 14px !important;
    border-radius: var(--fc-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: var(--fc-transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#sidebar .nav-list .nav-link:hover,
#sidebar .nav-list > li > a:hover {
    background: var(--fc-dark-lighter) !important;
    color: #ffffff !important;
}

#sidebar .nav-list .nav-link.active,
#sidebar .nav-list .nav-link:focus,
#sidebar .nav-list > li.active > a {
    background: var(--fc-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

#sidebar .nav-list .nav-link i,
#sidebar .nav-list > li > a > i {
    width: 20px !important;
    text-align: center !important;
    font-size: 15px !important;
    opacity: 0.75;
    flex-shrink: 0 !important;
}

#sidebar .nav-list .nav-link:hover i,
#sidebar .nav-list .nav-link.active i {
    opacity: 1;
}

/* Sidebar submenu */
#sidebar .submenu { background: rgba(0,0,0,0.15) !important; border-radius: var(--fc-radius-sm) !important; }

/* === MAIN CONTENT === */
.main-content {
    background: var(--fc-bg) !important;
    margin-left: var(--fc-sidebar-width) !important;
    min-height: 100vh !important;
    transition: var(--fc-transition-slow) !important;
}

.main-content::before {
    content: '';
    display: block;
    height: 12px;
}

.main-content-inner {
    padding: 0 !important;
}

/* === BREADCRUMBS === */
.breadcrumbs,
.breadcrumbs.ace-save-state {
    background: transparent !important;
    padding: 20px 24px 0 !important;
    border: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.breadcrumb > li,
.breadcrumb > li.active {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--fc-text) !important;
    letter-spacing: -0.3px !important;
}

/* === PAGE CONTENT === */
.page-content {
    padding: 16px 24px 24px !important;
    background: transparent !important;
    margin: 0 !important;
}

/* === WIDGET BOX (primary layout element) === */
.widget-box {
    background: var(--fc-surface) !important;
    border: 1px solid var(--fc-border-accent) !important;
    border-radius: var(--fc-radius) !important;
    box-shadow: var(--fc-shadow-sm) !important;
    overflow: visible;
    margin-bottom: 20px !important;
}

.widget-box:hover {
    box-shadow: var(--fc-shadow-md) !important;
}

.widget-box.collapsed .widget-body { display: none; }

.widget-header {
    background: var(--fc-surface) !important;
    border-bottom: 1px solid var(--fc-border-light) !important;
    padding: 14px 20px !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.widget-header h3,
.widget-header .widget-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--fc-text) !important;
}

.widget-body { padding: 0 !important; background: var(--fc-surface) !important; }
.widget-main { padding: 20px !important; overflow-x: auto !important; }

.widget-main > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* === APP PAGE SYSTEM === */
.fc-page-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fc-page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 45%, #0ea5e9 100%);
    color: #fff;
    border-radius: var(--fc-radius-lg);
    padding: 24px 26px;
    box-shadow: var(--fc-shadow-lg);
}

.fc-page-hero::after {
    content: '';
    position: absolute;
    inset: auto -60px -80px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    filter: blur(2px);
}

.fc-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fc-page-hero h2 {
    margin: 14px 0 8px !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    color: #fff !important;
}

.fc-page-hero p {
    margin: 0 !important;
    max-width: 760px;
    color: rgba(255,255,255,0.88) !important;
    font-size: 14px;
}

.fc-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.fc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: var(--fc-transition);
}

.fc-chip:hover,
.fc-chip.is-active {
    background: #fff;
    color: var(--fc-dark) !important;
}

.fc-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.fc-metric-card {
    background: var(--fc-surface);
    border: 1px solid var(--fc-border-accent);
    border-radius: var(--fc-radius);
    padding: 18px;
    box-shadow: var(--fc-shadow-sm);
    min-height: 126px;
}

.fc-metric-card__value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--fc-text);
    margin-bottom: 10px;
}

.fc-metric-card__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-text-secondary);
}

.fc-panel {
    background: var(--fc-surface);
    border: 1px solid var(--fc-border-accent);
    border-radius: var(--fc-radius);
    box-shadow: var(--fc-shadow-sm);
    overflow: hidden;
}

.fc-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--fc-border-light);
}

.fc-panel__title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--fc-text) !important;
}

.fc-panel__sub {
    font-size: 13px;
    color: var(--fc-text-secondary);
}

.fc-panel__body {
    padding: 18px 20px 20px;
}

.fc-stack-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fc-list-item {
    border-radius: var(--fc-radius-sm);
    padding: 14px 16px;
    border-left: 4px solid var(--fc-border);
}

.fc-list-item h4 {
    margin: 0 0 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--fc-text) !important;
}

.fc-list-item p {
    margin: 0 !important;
    font-size: 13px;
    color: var(--fc-text-secondary);
}

.fc-list-item--danger {
    background: var(--fc-danger-light);
    border-left-color: var(--fc-danger);
}

.fc-list-item--warning {
    background: var(--fc-warning-light);
    border-left-color: var(--fc-warning);
}

.fc-list-item--info {
    background: var(--fc-primary-light);
    border-left-color: var(--fc-primary);
}

.fc-list-item--success {
    background: var(--fc-success-light);
    border-left-color: var(--fc-success);
}

.fc-empty {
    background: var(--fc-success-light);
    color: #065f46;
    border-radius: var(--fc-radius-sm);
    padding: 14px 16px;
    font-weight: 600;
}

.fc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.fc-form-grid .form-group {
    margin-bottom: 0 !important;
}

.fc-form-grid .form-group--full {
    grid-column: 1 / -1;
}

.fc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.fc-table-card {
    border: 1px solid var(--fc-border-light);
    border-radius: var(--fc-radius-sm);
    overflow: hidden;
}

.fc-table-card .table {
    margin-bottom: 0 !important;
}

.fc-table-card .table > thead > tr > th {
    background: #f8fafc;
    color: var(--fc-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--fc-border) !important;
}

.fc-table-card .table > tbody > tr > td {
    vertical-align: top;
}

.fc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.fc-status-badge--danger {
    background: var(--fc-danger-light);
    color: var(--fc-danger);
}

.fc-status-badge--warning {
    background: var(--fc-warning-light);
    color: var(--fc-warning);
}

.fc-status-badge--info {
    background: var(--fc-primary-light);
    color: var(--fc-primary);
}

.fc-status-badge--success {
    background: var(--fc-success-light);
    color: var(--fc-success);
}

.fc-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fc-text-muted);
}

.fc-value-lg {
    font-size: 26px;
    font-weight: 800;
    color: var(--fc-text);
}

.fc-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.fc-inline-form .form-control {
    min-width: 140px;
}

.fc-thumb-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.fc-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.fc-stat-strip__item {
    background: #fff;
    border: 1px solid var(--fc-border-light);
    border-radius: var(--fc-radius-sm);
    padding: 14px;
}

.fc-stat-strip__item strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
    color: var(--fc-text);
}

.fc-stat-strip__item span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.fc-topbar-left,
.fc-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fc-topbar-context {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fc-topbar-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--fc-primary-light);
    color: var(--fc-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fc-topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fc-text);
}

.fc-topbar-subtitle {
    font-size: 12px;
    color: var(--fc-text-secondary);
}

.fc-user-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid var(--fc-border) !important;
    box-shadow: var(--fc-shadow-sm) !important;
}

.fc-topbar-icon {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fc-text);
    box-shadow: var(--fc-shadow-sm);
    transition: var(--fc-transition);
}

.fc-topbar-icon:hover {
    transform: translateY(-1px);
    box-shadow: var(--fc-shadow-md);
    color: var(--fc-primary);
}

.fc-topbar-icon .notification-badge,
.fc-topbar-icon .am-badge {
    position: absolute;
    top: -4px;
    right: -3px;
}

.fc-vehicle-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--fc-border);
    color: var(--fc-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.fc-mobile-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    background: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: var(--fc-shadow-sm);
}

.fc-mobile-toggle .icon-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--fc-text);
    margin: 2px 0;
}

.fc-site-banner,
.fc-empty-state {
    border-radius: var(--fc-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fc-site-banner__icon,
.fc-empty-state__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.fc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.site-card {
    display: block;
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--fc-shadow-sm);
    transition: var(--fc-transition-slow);
}

.site-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--fc-shadow-lg);
    border-color: var(--fc-border-accent);
}

.site-card.active {
    border-color: color-mix(in srgb, var(--fc-primary) 55%, #fff 45%);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.site-card.inactive {
    opacity: 0.75;
}

.site-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--fc-text);
    margin-bottom: 2px;
}

.site-status {
    font-size: 12px;
    color: var(--fc-text-secondary);
}

.fc-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(16,185,129,0.16), transparent 24%),
        linear-gradient(135deg, #0f172a 0%, #172554 45%, #1d4ed8 100%);
}

.fc-auth-hero {
    color: #fff;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fc-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.fc-auth-brand__mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px);
}

.fc-auth-brand__title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fc-auth-brand__sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.72;
}

.fc-auth-copy h1 {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.fc-auth-copy p {
    margin: 0;
    max-width: 540px;
    color: rgba(255,255,255,0.82);
    font-size: 16px;
}

.fc-auth-points {
    display: grid;
    gap: 14px;
    margin-top: 28px;
    max-width: 520px;
}

.fc-auth-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}

.fc-auth-point i {
    margin-top: 2px;
}

.fc-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.fc-auth-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
    padding: 34px 30px 30px;
}

.fc-auth-card__top {
    text-align: center;
    margin-bottom: 24px;
}

.fc-auth-card__logo {
    width: 78px;
    height: 78px;
    object-fit: contain;
    margin-bottom: 14px;
}

.fc-auth-card__title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    color: var(--fc-text);
}

.fc-auth-card__sub {
    color: var(--fc-text-secondary);
    font-size: 14px;
}

.fc-auth-form .form-group {
    margin-bottom: 14px;
}

.fc-auth-form .form-control {
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--fc-border);
    box-shadow: none;
    padding: 12px 14px;
    font-size: 14px;
}

.fc-auth-form .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    border-radius: 14px !important;
    font-size: 14px !important;
}

.fc-auth-note {
    margin-top: 18px;
    text-align: center;
    color: var(--fc-text-muted);
    font-size: 12px;
}

@media (max-width: 991px) {
    #sidebar,
    #sidebar.sidebar {
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
        box-shadow: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 14px !important;
    }

    .breadcrumbs,
    .breadcrumbs.ace-save-state {
        padding: 16px 14px 0 !important;
    }

    .fc-page-hero {
        padding: 20px 18px;
    }

    .fc-page-hero h2 {
        font-size: 24px !important;
    }

    .fc-auth-shell {
        grid-template-columns: 1fr;
    }

    .fc-auth-hero {
        padding: 26px 20px 10px;
    }

    .fc-auth-copy h1 {
        font-size: 34px;
    }

    .fc-auth-panel {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .navbar-container,
    .navbar-container.flexnav,
    #navbar-container {
        padding: 0 12px !important;
    }

    .fc-form-grid {
        grid-template-columns: 1fr;
    }

    .fc-panel__head,
    .fc-panel__body,
    .widget-main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .fc-page-hero h2 {
        font-size: 22px !important;
    }

    .fc-metric-card__value {
        font-size: 26px;
    }

    .fc-inline-form {
        flex-direction: column;
        align-items: stretch;
    }

    .fc-form-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .fc-form-actions .btn {
        justify-content: center;
    }

    .fc-app-topbar {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .fc-topbar-left,
    .fc-topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .fc-mobile-toggle {
        display: inline-flex;
    }

    .fc-auth-card {
        padding: 26px 18px 22px;
        border-radius: 22px;
    }

    .fc-auth-copy h1 {
        font-size: 28px;
    }

    .fc-auth-copy p {
        font-size: 14px;
    }
}

/* === BUTTONS === */
.btn {
    font-family: var(--fc-font) !important;
    font-weight: 600 !important;
    border-radius: var(--fc-radius-sm) !important;
    transition: var(--fc-transition) !important;
    border: none !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.btn:active { transform: scale(0.97); }

.btn-primary,
.btn-primary:active,
.btn-primary.active {
    background: var(--fc-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--fc-primary-hover) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-1px);
}

.btn-success, .btn-success:focus, .btn-success.focus,
.btn-success:active, .btn-success.active,
.btn-success:active:hover, .btn-success.focus:hover,
.btn-success:focus:hover, .btn-success:focus:active,
.btn-success:hover,
.open > .btn-success.dropdown-toggle,
.open > .btn-success.dropdown-toggle.focus,
.open > .btn-success.dropdown-toggle:active,
.open > .btn-success.dropdown-toggle:focus,
.open > .btn-success.dropdown-toggle:hover {
    background: var(--fc-success) !important;
    border-color: var(--fc-success) !important;
    color: #fff !important;
}

.btn-danger { background: var(--fc-danger) !important; color: #fff !important; }
.btn-warning { background: var(--fc-warning) !important; color: #fff !important; }
.btn-info { background: var(--fc-info) !important; color: #fff !important; }

.btn-xs { padding: 5px 10px !important; font-size: 11px !important; border-radius: 6px !important; }
.btn-sm { padding: 7px 14px !important; font-size: 12px !important; }
.btn-lg { padding: 12px 24px !important; font-size: 15px !important; }

.btn-block {
    width: 100% !important;
    justify-content: center !important;
    border-radius: var(--fc-radius) !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
}

/* === FORM CONTROLS === */
.form-control,
select.form-control,
input.form-control,
textarea.form-control {
    font-family: var(--fc-font) !important;
    border: 1.5px solid var(--fc-border) !important;
    border-radius: var(--fc-radius-sm) !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    transition: var(--fc-transition) !important;
    background: var(--fc-surface) !important;
    color: var(--fc-text) !important;
    height: auto !important;
    line-height: 1.5 !important;
    box-shadow: var(--fc-shadow-sm) !important;
}

.form-control:focus {
    border-color: var(--fc-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

label, .control-label {
    font-weight: 600 !important;
    color: var(--fc-text-secondary) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
}

/* === TABLES === */
.table { font-family: var(--fc-font) !important; border-collapse: separate !important; border-spacing: 0 !important; }

.table > thead > tr > th {
    background: var(--fc-bg) !important;
    border-bottom: 2px solid var(--fc-border) !important;
    border-top: none !important;
    color: var(--fc-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
}

.table > tbody > tr > td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--fc-border-light) !important;
    border-top: none !important;
    font-size: 13px !important;
    color: var(--fc-text) !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover > td {
    background: var(--fc-surface-hover) !important;
}

.table-responsive,
.widget-main .table-responsive,
.fc-table-responsive {
    border: 1px solid var(--fc-border-light) !important;
    border-radius: var(--fc-radius) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px;
}

.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
    border-color: var(--fc-border-light) !important;
}

/* DataTables integration */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--fc-radius-sm) !important;
    border: 1.5px solid var(--fc-border) !important;
    padding: 6px 10px !important;
    font-family: var(--fc-font) !important;
}

/* === ALERTS === */
.alert {
    border-radius: var(--fc-radius-sm) !important;
    border: none !important;
    font-family: var(--fc-font) !important;
    font-size: 13px !important;
    padding: 14px 18px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.alert-success { background: var(--fc-success-light) !important; color: #065f46 !important; border-left: 4px solid var(--fc-success) !important; }
.alert-danger { background: var(--fc-danger-light) !important; color: #991b1b !important; border-left: 4px solid var(--fc-danger) !important; }
.alert-warning { background: var(--fc-warning-light) !important; color: #92400e !important; border-left: 4px solid var(--fc-warning) !important; }
.alert-info { background: var(--fc-info-light) !important; color: #155e75 !important; border-left: 4px solid var(--fc-info) !important; }

/* === MODALS === */
.modal-content {
    border-radius: var(--fc-radius-lg) !important;
    border: none !important;
    box-shadow: var(--fc-shadow-xl) !important;
    overflow: hidden !important;
}
.modal-header { border-bottom: 1px solid var(--fc-border-light) !important; padding: 18px 24px !important; }
.modal-header .modal-title { font-weight: 700 !important; font-size: 16px !important; }
.modal-body { padding: 24px !important; }
.modal-footer { border-top: 1px solid var(--fc-border-light) !important; padding: 14px 24px !important; }

/* === SITE CARDS (sites/index) === */
.site-card {
    background: var(--fc-surface) !important;
    border: 1.5px solid var(--fc-border) !important;
    border-radius: var(--fc-radius) !important;
    padding: 20px !important;
    transition: var(--fc-transition) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: block !important;
    height: 100% !important;
}
.site-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--fc-shadow-lg) !important;
    border-color: var(--fc-primary) !important;
}
.site-card.active {
    border-color: var(--fc-success) !important;
    background: linear-gradient(135deg, #ecfdf5, #ffffff) !important;
}
.site-card .site-name { font-size: 15px !important; font-weight: 600 !important; color: var(--fc-text) !important; }
.site-card .site-status { font-size: 12px !important; color: var(--fc-text-muted) !important; }

.fc-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 16px !important;
}

/* === DROPDOWNS === */
.dropdown-menu {
    border-radius: var(--fc-radius-sm) !important;
    box-shadow: var(--fc-shadow-lg) !important;
    border: 1px solid var(--fc-border) !important;
    padding: 6px !important;
    animation: dropIn 0.15s ease-out !important;
}
.dropdown-menu > li > a {
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    transition: var(--fc-transition) !important;
    color: var(--fc-text) !important;
}
.dropdown-menu > li > a:hover { background: var(--fc-surface-hover) !important; }

/* === PAGINATION === */
.pagination > li > a, .pagination > li > span {
    border-radius: var(--fc-radius-sm) !important;
    margin: 0 2px !important;
    font-family: var(--fc-font) !important;
    font-size: 13px !important;
    border: 1px solid var(--fc-border) !important;
    color: var(--fc-text) !important;
    padding: 6px 12px !important;
}
.pagination > .active > a, .pagination > .active > span {
    background: var(--fc-primary) !important;
    border-color: var(--fc-primary) !important;
    color: #fff !important;
}

/* === FOOTER === */
.footer {
    background: var(--fc-surface) !important;
    border-top: 1px solid var(--fc-border) !important;
    margin-left: var(--fc-sidebar-width) !important;
    padding: 12px 24px !important;
}
.footer-content, .footer-inner {
    font-family: var(--fc-font) !important;
    font-size: 12px !important;
    color: var(--fc-text-muted) !important;
}

/* === NOTIFICATION POPUP === */
.notification-popup {
    border-radius: var(--fc-radius) !important;
    box-shadow: var(--fc-shadow-xl) !important;
    border: 1px solid var(--fc-border) !important;
    background: var(--fc-surface) !important;
    max-width: 420px !important;
}

#notificationPopup {
    position: fixed !important;
    top: 76px !important;
    right: 18px !important;
    width: min(420px, calc(100vw - 24px)) !important;
    z-index: 1050 !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
#sidebar::-webkit-scrollbar-thumb { background: #334155; }

/* === STATUS BADGES === */
.badge-active, .bgColor_on { background: var(--fc-success-light) !important; color: var(--fc-success) !important; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 600 !important; }
.badge-inactive, .bgColor_off, .bgColor_Off { background: var(--fc-danger-light) !important; color: var(--fc-danger) !important; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 600 !important; }

/* === TABS === */
.nav-tabs { border-bottom: 2px solid var(--fc-border) !important; }
.nav-tabs > li > a {
    border: none !important;
    border-radius: var(--fc-radius-sm) var(--fc-radius-sm) 0 0 !important;
    font-family: var(--fc-font) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--fc-text-secondary) !important;
    padding: 10px 16px !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: var(--fc-primary) !important;
    border-bottom: 2px solid var(--fc-primary) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* === PANEL (dashboard cards) === */
.panel {
    border: 1px solid var(--fc-border) !important;
    border-radius: var(--fc-radius) !important;
    box-shadow: var(--fc-shadow-sm) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}
.panel > .panel-title {
    background: var(--fc-surface) !important;
    border-bottom: 1px solid var(--fc-border-light) !important;
    border-radius: var(--fc-radius) var(--fc-radius) 0 0 !important;
    font-family: var(--fc-font) !important;
    font-weight: 600 !important;
}
.panel > .panel-body { background: var(--fc-surface) !important; }

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.35s ease-out; }

.fc-shell-banner {
    background: linear-gradient(135deg, color-mix(in srgb, var(--fc-primary) 92%, #0f172a 8%), color-mix(in srgb, var(--fc-secondary) 70%, #1e293b 30%));
    color: #fff;
    border-radius: var(--fc-radius-lg);
    padding: 24px;
    box-shadow: var(--fc-shadow-lg);
}

.fc-inline-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: inherit;
    font-size: 12px;
    font-weight: 600;
}

.fc-page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fc-empty-state {
    text-align: center;
    padding: 48px 18px;
    border: 1px dashed var(--fc-border);
    border-radius: var(--fc-radius-lg);
    background: rgba(255,255,255,0.6);
}

.fc-page-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    border-radius: var(--fc-radius-lg);
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239,246,255,0.9));
    border: 1px solid var(--fc-border-accent);
    box-shadow: var(--fc-shadow-sm);
    margin-bottom: 18px;
}

.fc-page-hero__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--fc-text);
}

.fc-page-hero__subtitle {
    margin: 8px 0 0;
    color: var(--fc-text-secondary);
    font-size: 14px;
}

.fc-page-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--fc-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fc-toolbar__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fc-legacy-shell .widget-header,
.fc-site-home .widget-header,
.fc-vehicle-page .widget-header {
    padding: 18px 20px !important;
}

.fc-tabbar,
.fc-vehicle-tabs .tab {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: 999px;
    background: #eaf1fb;
    width: fit-content;
    margin-bottom: 18px;
}

.fc-tabbar .tablinks,
.fc-vehicle-tabs .tablinks {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--fc-text-secondary);
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: var(--fc-transition);
}

.fc-tabbar .tablinks.active,
.fc-vehicle-tabs .tablinks.active,
.fc-tabbar .tablinks:hover,
.fc-vehicle-tabs .tablinks:hover {
    background: #fff;
    color: var(--fc-primary);
    box-shadow: var(--fc-shadow-sm);
}

.fc-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.fc-media-grid > [class*="col-"],
.fc-media-grid > .col-lg-3,
.fc-media-grid > .col-md-3,
.fc-media-grid > .col-sm-12,
.fc-media-grid > .col-xs-12,
.fc-media-grid > .col-md-6,
.fc-media-grid > .col-lg-4 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.fc-media-card,
.fc-media-grid a[href*="/driver/detail"],
.fc-media-grid a[href*="/vehicle/detail"] {
    display: block;
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-lg);
    overflow: hidden;
    box-shadow: var(--fc-shadow-sm);
    transition: var(--fc-transition);
    color: var(--fc-text);
    text-decoration: none !important;
}

.fc-media-card:hover,
.fc-media-grid a[href*="/driver/detail"]:hover,
.fc-media-grid a[href*="/vehicle/detail"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--fc-shadow-lg);
    border-color: var(--fc-border-accent);
}

.fc-media-card img,
.fc-media-grid a[href*="/driver/detail"] img,
.fc-media-grid a[href*="/vehicle/detail"] img,
.fc-media-grid [onclick^="openModalVeh"] img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

.fc-media-card__body,
.fc-media-grid a[href*="/driver/detail"] > div:last-child,
.fc-media-grid a[href*="/vehicle/detail"] > div:last-child,
.fc-media-grid [onclick^="openModalVeh"] > div:last-child {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fc-text);
}

.fc-site-home .widget-main {
    padding: 24px !important;
}

.fc-site-home .col-lg-12 > a.col-xs-12,
.fc-site-home .col-lg-12 > a[class*="text-center"] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    margin-top: 12px !important;
    border-radius: var(--fc-radius) !important;
    border: 1px solid var(--fc-border) !important;
    padding: 14px 16px !important;
    line-height: 1.35 !important;
    font-size: 14px;
    box-shadow: var(--fc-shadow-sm);
    transition: var(--fc-transition);
}

.fc-site-home .col-lg-12 > a.col-xs-12:hover,
.fc-site-home .col-lg-12 > a[class*="text-center"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--fc-shadow-md);
    filter: saturate(1.02);
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    #sidebar, #sidebar.sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        width: var(--fc-sidebar-width) !important;
    }
    #sidebar.display, #sidebar.sidebar-display {
        transform: translateX(0) !important;
    }
    .main-content {
        margin-left: 0 !important;
    }
    .footer {
        margin-left: 0 !important;
    }
    .page-content {
        padding: 12px 14px 20px !important;
    }
    .breadcrumbs, .breadcrumbs.ace-save-state {
        padding: 14px 14px 0 !important;
    }
    .breadcrumb > li, .breadcrumb > li.active {
        font-size: 18px !important;
    }
    .fc-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 12px !important;
    }
    #notificationPopup {
        top: 68px !important;
        right: 12px !important;
    }
}

@media (max-width: 600px) {
    .fc-card-grid {
        grid-template-columns: 1fr !important;
    }
    .page-content { padding: 10px 10px 16px !important; }
    .breadcrumbs, .breadcrumbs.ace-save-state { padding: 10px 10px 0 !important; }
    .widget-main { padding: 14px !important; }
    .table > thead > tr > th, .table > tbody > tr > td { padding: 8px 10px !important; font-size: 12px !important; }
    .navbar-container,
    .navbar-container.flexnav,
    #navbar-container {
        padding: 0 12px !important;
    }
    .user-info {
        display: none !important;
    }
    #notificationPopup {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        top: 64px !important;
    }
    .fc-page-actions {
        align-items: stretch;
    }
    .fc-page-actions .btn,
    .fc-page-actions a.btn {
        width: 100%;
        justify-content: center;
    }
    .fc-page-hero {
        padding: 18px 16px;
    }
    .fc-page-hero__title {
        font-size: 20px;
    }
    .fc-media-grid {
        grid-template-columns: 1fr;
    }
    .fc-tabbar,
    .fc-vehicle-tabs .tab {
        width: 100%;
        border-radius: 18px;
    }
    .fc-tabbar .tablinks,
    .fc-vehicle-tabs .tablinks {
        flex: 1 1 calc(50% - 10px);
        text-align: center;
    }
}

/* === Ace Admin overrides (layout fixes) === */
.main-container { background: var(--fc-bg) !important; }
.main-container::before, .main-container::after { display: none !important; }
#sidebar::before { display: none !important; }
.sidebar-toggle { display: none !important; }

/* Fix content not using full width */
.main-content .page-content .row { margin-left: 0 !important; margin-right: 0 !important; }
.page-content > .row > .col-xs-12 { padding-left: 0 !important; padding-right: 0 !important; }

/* Fix Ace sidebar backgrounds */
.sidebar:before, .menu-toggler + .sidebar.responsive:before { background: none !important; }
.nav-list > li > a { border: none !important; }
.nav-list > li { border: none !important; }
.nav-list li.active > a::after { display: none !important; }

/* Ace menu toggler on small screens */
.menu-toggler, .navbar-toggle.menu-toggler, .fc-mobile-toggle, #menu-toggler {
    z-index: 1032 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--fc-radius-sm) !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.menu-toggler .icon-bar, .navbar-toggle.menu-toggler .icon-bar, .fc-mobile-toggle .icon-bar, #menu-toggler .icon-bar {
    background: #0f172a !important;
    border-radius: 2px !important;
}

/* ============================================================
   FC COMPONENT SYSTEM — Global Authoritative Defaults
   Ensures correct contrast across all pages that use
   @section('styles') overrides. High specificity wins.
   ============================================================ */

/* --- Tab bar ------------------------------------------------ */
.fc-tab-bar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: #f1f5f9;          /* clearly light grey, NOT white */
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 5px;
    width: fit-content;
    max-width: 100%;
}
.fc-tab-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #334155;               /* dark slate — WCAG AA on #f1f5f9 */
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.fc-tab-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.fc-tab-btn.active {
    background: #fff;
    color: #0f172a;               /* very dark on white — max contrast */
    box-shadow: 0 2px 8px rgba(15,23,42,.12);
}
.fc-tab-panel { display: none; }
.fc-tab-panel.active { display: block; }

/* --- Section cards ------------------------------------------ */
.fc-section-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.fc-section-header {
    padding: 13px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;               /* near-black on #f8fafc */
}

/* --- Tables ------------------------------------------------- */
.fc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fc-table thead th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;               /* medium slate on #f8fafc bg */
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    white-space: nowrap;
}
.fc-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;               /* dark on white */
    vertical-align: middle;
}
.fc-table tbody tr:last-child td { border-bottom: none; }
.fc-table tbody tr:hover         { background: #f8fafc; }

/* Overdue/warning row tints — text must stay readable */
.fc-table tbody tr.bg-red    { background: #fff1f2 !important; border-left: 3px solid #ef4444; }
.fc-table tbody tr.bg-red td { color: #991b1b; }
.fc-table tbody tr.bg-orange    { background: #fff7ed !important; border-left: 3px solid #f97316; }
.fc-table tbody tr.bg-orange td { color: #9a3412; }
.fc-table tbody tr.row_color    { background: #fefce8; }

/* Overdue/warning on form-control divs */
.form-control.bg-red    { background: #fff1f2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }
.form-control.bg-orange { background: #fff7ed !important; color: #9a3412 !important; border-color: #fdba74 !important; }
.form-control.bg-green  { background: #f0fdf4 !important; color: #166534 !important; border-color: #86efac !important; }

/* --- Buttons ----------------------------------------------- */
.fc-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #fff;                  /* white on purple — 7:1 contrast */
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    transition: opacity .2s, transform .15s;
    text-decoration: none;
}
.fc-save-btn:hover    { opacity: .88; transform: translateY(-1px); color: #fff; text-decoration: none; }
.fc-save-btn:focus    { outline: 2px solid #7c3aed; outline-offset: 2px; }
.fc-save-btn.fc-update-btn  { background: linear-gradient(135deg, #0d9488, #0f766e); }
.fc-save-btn.fc-edit-btn    { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.fc-save-btn.fc-danger-btn  { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.fc-save-btn.fc-outline-btn {
    background: transparent;
    border: 1.5px solid #7c3aed;
    color: #7c3aed;
}
.fc-save-btn.fc-outline-btn:hover { background: #7c3aed; color: #fff; }

/* --- Hero banner ------------------------------------------- */
.fc-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #7c3aed 100%);
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.fc-hero h1 {
    margin: 0 0 3px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;                  /* white on dark — ~15:1 */
}
.fc-hero p {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,.75); /* still 4.5:1+ on dark bg */
}
.fc-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.25);
    transition: background .2s;
}
.fc-btn-back:hover { background: rgba(255,255,255,.25); color: #fff; text-decoration: none; }

/* --- Filter card ------------------------------------------- */
.fc-filter-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.fc-filter-card label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;               /* dark on #f8fafc */
    text-transform: uppercase;
    letter-spacing: .4px;
}
.fc-filter-card select,
.fc-filter-card input[type=date],
.fc-filter-card input[type=text] {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    color: #1e293b;               /* dark on white input */
    background: #fff;
}

/* --- Status / driver toggle bar ---------------------------- */
.fc-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}
.fc-status-bar__label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;               /* dark on light grey */
}
.fc-status-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fc-status-bar__text {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

/* --- License expiry card pills ----------------------------- */
.fc-expiry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.fc-expiry-card {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
}
.fc-expiry-card__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;               /* on white */
    margin-bottom: 4px;
}
.fc-expiry-card__value {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;               /* dark on white */
}
.fc-expiry-card.status-red    { background: #fff1f2; border-color: #fca5a5; }
.fc-expiry-card.status-red    .fc-expiry-card__label { color: #be123c; }
.fc-expiry-card.status-red    .fc-expiry-card__value { color: #991b1b; }
.fc-expiry-card.status-orange { background: #fff7ed; border-color: #fdba74; }
.fc-expiry-card.status-orange .fc-expiry-card__label { color: #c2410c; }
.fc-expiry-card.status-orange .fc-expiry-card__value { color: #9a3412; }
.fc-expiry-card.status-ok     { background: #f0fdf4; border-color: #86efac; }
.fc-expiry-card.status-ok     .fc-expiry-card__label { color: #15803d; }
.fc-expiry-card.status-ok     .fc-expiry-card__value { color: #166534; }

/* --- Badge chips ------------------------------------------- */
.fc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.fc-badge-red    { background: #fee2e2; color: #b91c1c; }
.fc-badge-orange { background: #fed7aa; color: #c2410c; }
.fc-badge-green  { background: #dcfce7; color: #15803d; }
.fc-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.fc-badge-slate  { background: #f1f5f9; color: #475569; }

/* --- Profile form layout ----------------------------------- */
.fc-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 24px;
}
.fc-field-row {
    margin-bottom: 14px;
}
.fc-field-row label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;               /* on white page */
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}
.fc-field-row .form-control {
    color: #1e293b !important;    /* always dark on white input */
    background: #fff !important;
    border-color: #cbd5e1 !important;
}
.fc-field-row .form-control[readonly],
.fc-field-row .form-control:disabled {
    background: #f8fafc !important;
    color: #334155 !important;    /* dark on very light grey */
}

/* --- Shift table day highlight ----------------------------- */
.fc-table th.today {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-bottom-color: #93c5fd !important;
}
.bgColor_on  { background: #f0fdf4; color: #166534 !important; }
.bgColor_Off { background: #fef2f2; color: #991b1b !important; }

/* ============================================================
   FleetControl UI compatibility layer
   Keeps legacy Blade pages readable while they adopt the shared UI.
   This layer changes presentation only; form names, IDs, JS hooks,
   routes, and business logic remain untouched.
   ============================================================ */
:root {
    --fc-focus: #2563eb;
    --fc-dark-text: #172033;
    --fc-muted-text: #5b6b82;
    --fc-panel: #ffffff;
}

/* Legacy Bootstrap/Ace containers become calm, readable panels. */
.widget-body,
.widget-main,
.bootstrap.snippet,
.panel,
.card,
.well {
    color: var(--fc-dark-text);
}

.widget-main,
.panel,
.card,
.well {
    border-color: var(--fc-border) !important;
    border-radius: var(--fc-radius-lg) !important;
    box-shadow: var(--fc-shadow-sm) !important;
}

.widget-main,
.panel-body,
.card-body,
.well {
    background: var(--fc-panel) !important;
}

/* Consistent controls with visible text on light backgrounds. */
.form-control,
select.form-control,
textarea.form-control,
input.form-control,
.select2-container .select2-selection {
    min-height: 38px;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--fc-dark-text) !important;
    box-shadow: none !important;
}

.form-control::placeholder { color: #718096 !important; opacity: 1; }
.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--fc-focus) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
    outline: none !important;
}

label,
.control-label,
.form-group > label {
    color: var(--fc-dark-text);
    font-weight: 650;
}

/* Older buttons inherit a clear, high-contrast modern treatment. */
.btn:not(.btn-link),
button.btn:not(.btn-link),
input[type="submit"].btn {
    border-radius: 9px !important;
    font-weight: 650 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:not(.btn-link):hover,
button.btn:not(.btn-link):hover,
input[type="submit"].btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--fc-shadow-sm);
}

.btn-primary,
.btn-primary:hover,
.btn-info,
.btn-info:hover {
    background: var(--fc-primary) !important;
    border-color: var(--fc-primary) !important;
    color: #fff !important;
}

/* Tables remain usable on narrow screens and keep contrast. */
.table-responsive,
.table-responsivee,
.fc-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--fc-radius);
}

table.table,
table.fc-table,
.fc-table {
    width: 100%;
    color: var(--fc-dark-text) !important;
    background: #fff !important;
    border-color: var(--fc-border) !important;
}

table.table thead th,
table.fc-table thead th,
.fc-table th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: var(--fc-border) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.table tbody td,
table.fc-table tbody td,
.fc-table td {
    color: var(--fc-dark-text) !important;
    border-color: var(--fc-border-light) !important;
    vertical-align: middle;
}

table.table tbody tr:hover,
table.fc-table tbody tr:hover,
.fc-table tbody tr:hover {
    background: #f8fbff !important;
}

/* Existing tab buttons become a consistent segmented control. */
.tab,
.fc-tab-bar,
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px;
    background: #eef2ff;
    border: 1px solid #dbeafe;
    border-radius: 13px;
}

.tablinks,
.fc-tab-btn,
.nav-tabs > li > a {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #334155 !important;
    font-weight: 750 !important;
    padding: 9px 14px !important;
}

.tablinks:hover,
.tablinks.active,
.fc-tab-btn:hover,
.fc-tab-btn.active,
.nav-tabs > li.active > a {
    background: var(--fc-primary) !important;
    color: #fff !important;
}

/* Alerts and validation messages remain readable in every theme. */
.alert {
    border-radius: 10px !important;
    border-width: 1px !important;
    color: var(--fc-dark-text) !important;
}
.alert-danger { background: #fff1f2 !important; border-color: #fda4af !important; color: #9f1239 !important; }
.alert-warning { background: #fffbeb !important; border-color: #fcd34d !important; color: #92400e !important; }
.alert-success { background: #ecfdf5 !important; border-color: #86efac !important; color: #166534 !important; }

/* Modal contrast and spacing. */
.modal-content {
    border: 1px solid var(--fc-border) !important;
    border-radius: var(--fc-radius-lg) !important;
    box-shadow: var(--fc-shadow-xl) !important;
    color: var(--fc-dark-text);
}
.modal-header,
.modal-footer { border-color: var(--fc-border-light) !important; }

/* Mobile layout: prevent legacy fixed widths from creating horizontal overflow. */
@media (max-width: 767px) {
    .main-content { margin-left: 0 !important; }
    #sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    body.menu-open #sidebar { transform: translateX(0); }
    .page-content { padding: 14px !important; }
    .fc-hero { padding: 18px !important; border-radius: 14px; }
    .fc-hero h1 { font-size: 18px; }
    .row [class*="col-xs-"],
    .row [class*="col-sm-"],
    .row [class*="col-md-"],
    .row [class*="col-lg-"] { max-width: 100%; }
    .form-group { margin-bottom: 14px; }
    .table-responsive, .table-responsivee { margin-bottom: 12px; }
    .btn { max-width: 100%; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* --- Sidebar contrast and navigation polish ---------------- */
/* A dark navigation rail gives the light content area a clear anchor and
   keeps labels readable even when a custom light sidebar color is stored. */
#sidebar,
#sidebar.sidebar,
body.fc-app-shell #sidebar {
    background:
        radial-gradient(circle at 15% 0%, rgba(37,99,235,.22), transparent 28%),
        linear-gradient(180deg, #0b1220 0%, #111c31 52%, #0f172a 100%) !important;
    color: #dbeafe !important;
}

#sidebar .fc-sidebar-brand {
    background: rgba(15,23,42,.32) !important;
    border-bottom-color: rgba(148,163,184,.16) !important;
}

#sidebar .fc-sidebar-brand div[style*="color: #fff"],
#sidebar .fc-sidebar-brand div[style*="color: #e2e8f0"] {
    color: #f8fafc !important;
}

#sidebar .fc-sidebar-brand div[style*="color: #64748b"],
#sidebar .fc-sidebar-brand div[style*="color: #475569"] {
    color: #93c5fd !important;
}

#sidebar .fc-sidebar-brand div[style*="background: rgba(255,255,255,0.05)"] {
    background: rgba(30,41,59,.78) !important;
    border-color: rgba(148,163,184,.18) !important;
}

#sidebar .nav-list .nav-link,
#sidebar .nav-list > li > a {
    color: #b8c7dc !important;
}

#sidebar .nav-list .nav-link:hover,
#sidebar .nav-list > li > a:hover {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

#sidebar .nav-list .nav-link.active,
#sidebar .nav-list > li.active > a {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(37,99,235,.32) !important;
}

#sidebar .nav-list .nav-link i,
#sidebar .nav-list > li > a > i {
    color: #9fb3ce !important;
}

#sidebar .nav-list .nav-link:hover i,
#sidebar .nav-list .nav-link.active i {
    color: #ffffff !important;
}

#sidebar .nav-list > li > div,
#sidebar .nav-list > li > div[style*="color: #475569"] {
    color: #93a9c4 !important;
}

/* Keep the brand area stable while only the navigation list scrolls. */
#sidebar,
#sidebar.sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#sidebar .fc-sidebar-brand {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    background: #0f1b2d !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, .22) !important;
}

#sidebar .fc-sidebar-brand > div:last-child {
    background: #17243a !important;
    border-color: #30435f !important;
}

#sidebar .nav-list,
#sidebar .nav.nav-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 24px !important;
}

/* Shift month navigation: one row on desktop, horizontal scroll on small screens. */
.fc-shifts-page .nav.nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 8px !important;
    margin: 0 0 16px !important;
    background: #eef2ff !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 14px !important;
    scrollbar-width: thin;
}

.fc-shifts-page .nav.nav-tabs > li {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.fc-shifts-page .nav.nav-tabs > li > a {
    display: block !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #243b5a !important;
    font-weight: 700 !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    background: transparent !important;
}

.fc-shifts-page .nav.nav-tabs > li > a:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.fc-shifts-page .nav.nav-tabs > li > a.active,
.fc-shifts-page .nav.nav-tabs > li.active > a {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37,99,235,.25) !important;
}

/* Generated shift tables are wider than the viewport; scroll the data area,
   not the whole page, so the month selector and table headings remain usable. */
.fc-shifts-page #shifts-data,
.fc-shifts-page #reporting-shifts-data,
.fc-shifts-page .table-responsive1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
    border-radius: 12px;
}

.fc-shifts-page #shifts-data > table,
.fc-shifts-page #reporting-shifts-data > table {
    min-width: 980px !important;
}

/* Dashboard card treatment: neutral surfaces plus colored accents are easier
   to scan than a different saturated background for every card. */
.fc-quick,
.fc-card,
.fc-stat,
.fc-panel,
.fc-section,
.site-card,
.fc-driver-card,
.fc-veh-card {
    background: #ffffff !important;
    border-color: #dbe5f0 !important;
}

.fc-quick:hover,
.fc-card:hover,
.fc-stat:hover,
.site-card:hover,
.fc-driver-card:hover,
.fc-veh-card:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 14px 32px rgba(15,23,42,.10) !important;
}

/* ==========================================================================
   Header Notification Popup - Modern Styling
   ========================================================================== */
.notification-popup {
    border-radius: var(--fc-radius, 12px) !important;
    border: 1px solid var(--fc-border, #e2e8f0) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
}

.notification-popup h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--fc-dark, #0f172a) !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--fc-border, #e2e8f0) !important;
}

.notification-popup .close-btn {
    font-size: 24px !important;
    color: var(--fc-text-secondary, #64748b) !important;
    transition: var(--fc-transition, all 0.2s) !important;
}

.notification-popup .close-btn:hover {
    color: var(--fc-danger, #dc2626) !important;
}

/* ==========================================================================
   Global Modal Modernization System
   Applies clean modern styling to all modal popups across the platform
   ========================================================================== */
.modal.fade .modal-dialog {
    transform: translateY(-16px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-out;
}
.modal.in .modal-dialog,
.modal.show .modal-dialog {
    transform: translateY(0) scale(1) !important;
}

.modal-backdrop {
    z-index: 1050 !important;
    background-color: #0f172a !important;
    opacity: 0.65 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.modal {
    z-index: 1055 !important;
}

.modal-dialog {
    z-index: 1056 !important;
    margin: 30px auto !important;
}

.modal-content {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
}

.modal-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    padding: 16px 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h3,
.modal-header h5 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-header .close {
    color: #ffffff !important;
    opacity: 0.75 !important;
    text-shadow: none !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    margin: -4px -4px -4px auto !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.modal-header .close:hover {
    opacity: 1 !important;
    background: rgba(239, 68, 68, 0.9) !important;
    color: #ffffff !important;
}

.modal-body {
    padding: 24px 22px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
}

.modal-body label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
}

.modal-body .form-control {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-body .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

.modal-footer {
    padding: 14px 22px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.modal-footer .btn {
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
}

.modal-footer .btn-default {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.modal-footer .btn-default:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.modal-footer .btn-primary,
.modal-footer .btn-success {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

.modal-footer .btn-primary:hover,
.modal-footer .btn-success:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* === FLASH / TOAST NOTIFICATION BANNERS === */
.fc-flash {
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
}
.fc-flash-success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #6ee7b7 !important;
}
.fc-flash-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
}
.fc-flash-error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
}

/* === BRANDED PULSING LOGO LOADER OVERLAY & DOUBLE-CLICK GUARD === */
.fc-loader-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s ease !important;
}

.fc-loader-backdrop.fc-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.fc-loader-dialog {
    background: #ffffff;
    border-radius: 20px;
    padding: 26px 34px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(226, 232, 240, 0.9);
    transform: scale(0.92);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 220px;
    max-width: 85vw;
    text-align: center;
}

.fc-loader-backdrop.fc-active .fc-loader-dialog {
    transform: scale(1);
}

.fc-loader-pulse-container {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.fc-loader-ring,
.fc-loader-ring-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.28);
    animation: fcPulseWave 1.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    pointer-events: none;
}

.fc-loader-ring-2 {
    animation-delay: 0.6s;
}

@keyframes fcPulseWave {
    0% {
        transform: scale(0.75);
        opacity: 0.95;
    }
    50% {
        opacity: 0.45;
    }
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

.fc-loader-badge {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 10px 20px -3px rgba(37, 99, 235, 0.45);
    animation: fcLogoHeartbeat 1.8s infinite ease-in-out;
}

@keyframes fcLogoHeartbeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 14px 26px -2px rgba(37, 99, 235, 0.65);
    }
}

.fc-loader-brand-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    line-height: 1.2;
}

.fc-loader-status {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.fc-loader-dots .fc-dot {
    display: inline-block;
    animation: fcDotBlink 1.4s infinite;
}

.fc-loader-dots .fc-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.fc-loader-dots .fc-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes fcDotBlink {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.fc-btn-loading {
    pointer-events: none !important;
    cursor: wait !important;
    opacity: 0.82 !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

.fc-loader-spinner {
    display: inline-block !important;
    animation: fa-spin 0.8s infinite linear !important;
}

/* === MOBILE DRIVER APPLICATION & RESPONSIVE CONTAINMENT === */
@media (max-width: 991px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .fc-app-shell,
    .main-container,
    .main-content,
    .page-content {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Ensure table responsive containers always enable horizontal scrolling on small screens */
.table-responsive,
.fc-table-responsive,
table.table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

/* Action and Timer Rows for Clock In/Out Driver View */
.fc-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
    width: 100%;
}

.fc-action-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.fc-action-card label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .7px;
    display: block;
    margin-bottom: 10px;
}

.fc-clock-btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    transition: opacity .2s, transform .15s;
}

.fc-clock-btn:hover:not(:disabled) {
    opacity: .92;
    transform: translateY(-1px);
}

.fc-clock-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.fc-btn-clockin {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.35) !important;
}

.fc-btn-clockout {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(239,68,68,.35) !important;
}

.fc-btn-status {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(245,158,11,.35) !important;
}

.fc-geo-msg {
    font-size: 12px;
    margin-top: 8px;
    min-height: 18px;
}

.fc-timer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    margin-bottom: 20px;
}

.fc-timer-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.fc-timer-card label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .7px;
    display: block;
    margin-bottom: 6px;
}

.fc-timer-val {
    font-size: 26px;
    font-weight: 900;
    color: #7c3aed;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
    .fc-action-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .fc-action-card {
        padding: 12px 10px;
        border-radius: 12px;
    }
    .fc-action-card label {
        font-size: 10px;
        margin-bottom: 8px;
    }
    .fc-clock-btn {
        font-size: 13px;
        padding: 11px 8px;
        border-radius: 10px;
        gap: 6px;
    }
    .fc-timer-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .fc-timer-card {
        padding: 12px 10px;
        border-radius: 12px;
    }
    .fc-timer-val {
        font-size: 20px;
    }
    .page-content {
        padding: 10px 8px 30px !important;
    }
}

@media (max-width: 380px) {
    .fc-action-row {
        grid-template-columns: 1fr;
    }
    .fc-clock-btn {
        font-size: 14px;
        padding: 12px 10px;
    }
}

/* Universal mobile safety for modals, canvas, and media across all driver views */
@media (max-width: 767px) {
    .modal-dialog {
        width: auto !important;
        max-width: 96vw !important;
        margin: 10px auto !important;
    }
    .modal-content {
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    .signature-block {
        max-width: 100% !important;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================
   MOBILE HEADER, STATUS BAR SAFE-AREA & USER PILL ENCLOSURE
   ============================================================ */
@media (max-width: 991px) {
    /* 1. Android / iOS Status Bar & Notification Bar Offset (moves whole header down) */
    #navbar.navbar,
    .navbar.navbar-default {
        padding-top: max(32px, env(safe-area-inset-top, 32px)) !important;
        height: auto !important;
        min-height: 0 !important;
        background: #ffffff !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
        overflow: visible !important;
    }

    /* 2. Container Fully Encloses Both Topbar Rows with proper padding */
    #navbar-container,
    .navbar-container,
    .navbar-container.flexnav {
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 14px 12px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .fc-app-topbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Row 1: Site Context & Toggle */
    .fc-topbar-left {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .fc-topbar-context {
        flex: 1 !important;
        min-width: 120px !important;
    }

    .fc-topbar-title {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.2 !important;
    }

    .fc-topbar-subtitle {
        font-size: 11px !important;
        color: #64748b !important;
    }

    .fc-vehicle-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    /* 3. Hamburger Menu Button: Crisp White Box with Dark Slate Bars */
    .menu-toggler,
    .navbar-toggle.menu-toggler,
    .fc-mobile-toggle,
    #menu-toggler {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1.5px solid #cbd5e1 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        float: none !important;
    }

    .menu-toggler .icon-bar,
    .navbar-toggle.menu-toggler .icon-bar,
    .fc-mobile-toggle .icon-bar,
    #menu-toggler .icon-bar {
        display: block !important;
        width: 20px !important;
        height: 2.5px !important;
        background: #0f172a !important; /* Bold, dark slate lines */
        border-radius: 999px !important;
        margin: 2px 0 !important;
    }

    /* Row 2: Notifications, Messages, and User Profile Pill */
    .fc-topbar-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
        height: 42px !important;
        overflow: visible !important;
    }

    .fc-topbar-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1.5px solid #cbd5e1 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        color: #0f172a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
    }

    /* 4. User Avatar Pill: Clean, Compact, Exactly 42px Height Aligned with Icons */
    .ace-nav {
        display: inline-flex !important;
        align-items: center !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        line-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        background: transparent !important;
    }

    .ace-nav > li {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        line-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .ace-nav > li > a,
    .ace-nav > li.light-blue > a,
    .ace-nav > li > a.fc-user-trigger,
    a.fc-user-trigger {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        line-height: 42px !important;
        padding: 0 12px 0 5px !important;
        background: #ffffff !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 999px !important; /* Perfect Pill */
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #0f172a !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .ace-nav > li > a:hover,
    .ace-nav > li.light-blue > a:hover {
        background: #f8fafc !important;
        border-color: #94a3b8 !important;
    }

    .ace-nav > li > a .nav-user-photo {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        border: 2px solid #7c3aed !important;
        object-fit: cover !important;
        margin: 0 !important;
    }

    .ace-nav > li > a .user-info {
        display: none !important;
    }

    .ace-nav > li > a .fc-user-mobile-label {
        display: inline-block !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0f172a !important; /* High contrast dark text, not white! */
        max-width: 95px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .ace-nav > li > a .fc-user-caret {
        display: inline-block !important;
        font-size: 11px !important;
        color: #475569 !important; /* Dark slate caret, not white! */
        margin-left: 2px !important;
        line-height: 1 !important;
    }

    /* 5. Hide redundant top role pill on mobile per user request */
    .fc-topbar-role {
        display: none !important;
    }

    /* 6. Symmetrical full-width content on all mobile screens */
    .main-container,
    .main-content,
    .main-content-inner,
    .page-content,
    .page-content > .row,
    .page-content > .row > .col-xs-12 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .page-content {
        padding: 12px 14px !important;
    }

    .fc-page-shell,
    .fc-card,
    .fc-panel,
    .dd-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 7. Mobile Off-Canvas Drawer Sidebar: full width, crystal-clear icons & text */
    #sidebar,
    #sidebar.sidebar,
    #sidebar.responsive,
    #sidebar.menu-min,
    .menu-min #sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 285px !important;
        min-width: 285px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 100050 !important;
        background: #0f172a !important;
        box-shadow: none !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* When Opened */
    body.fc-sidebar-open #sidebar,
    #sidebar.fc-sidebar-open,
    #sidebar.display {
        transform: translateX(0) !important;
        visibility: visible !important;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.6) !important;
    }

    /* Backdrop */
    .fc-sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(3px);
        z-index: 100040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    body.fc-sidebar-open .fc-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Close button visible in mobile drawer */
    .fc-sidebar-close-btn {
        display: flex !important;
    }

    /* Ensure every nav item inside the drawer is clearly visible */
    #sidebar .nav-list {
        padding: 10px 12px !important;
        width: 100% !important;
    }

    #sidebar .nav-list > li {
        width: 100% !important;
        display: block !important;
        margin-bottom: 3px !important;
    }

    #sidebar .nav-list > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        color: #cbd5e1 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        background: transparent !important;
        border: none !important;
    }

    #sidebar .nav-list > li > a i {
        font-size: 17px !important;
        width: 24px !important;
        text-align: center !important;
        color: #94a3b8 !important;
        flex-shrink: 0 !important;
    }

    #sidebar .nav-list > li > a span {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #e2e8f0 !important;
        white-space: nowrap !important;
        font-size: 14px !important;
    }

    #sidebar .nav-list > li > a:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    #sidebar .nav-list > li.active > a {
        background: var(--fc-primary, #2563eb) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    }

    #sidebar .nav-list > li.active > a i,
    #sidebar .nav-list > li.active > a span {
        color: #ffffff !important;
    }
}

@media (min-width: 992px) {
    .fc-sidebar-backdrop {
        display: none !important;
    }
    .fc-sidebar-close-btn {
        display: none !important;
    }
}