/* ==========================================================================
   GLOBAL APP STYLES & LAYOUT (From layouts/app.blade.php)
   ========================================================================== */
:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 72px;
    --sidebar-bg: #132418; /* Elegant deep forest green from logo */
    --sidebar-text: #a8bfae; /* Soft sage green */
    --sidebar-active-bg: #1e3827; /* Dark green selection highlight */
    --sidebar-active-text: #ffffff;
    --topbar-height: 60px;
    --accent: #e88323; /* Logo vibrant orange */
    --accent-hover: #d1721b;
    --accent-yellow: #eea92f; /* Logo golden yellow (decorative only, low text contrast) */
    --accent-yellow-text: #92400e; /* Dark amber-gold — use for text/badges instead of accent-yellow */
    --accent-green: #339146; /* Logo primary green (decorative dots/borders, ~4:1 contrast) */
    --accent-green-text: #1a7a4a; /* Darker green for text/buttons/badges — proper AA contrast */
    --accent-green-dark: #1e3827; /* Deep forest green from logo ribbon shadow */

    /* Bootstrap 5.3 theme variable overrides so every default component
       (badges, outline buttons, pagination, form checks, links, nav-pills,
       progress bars, spinners) picks up the Discoveryland palette instead
       of Bootstrap's default blue/gray/cyan. Uses the *-text shades so
       text/badges/buttons keep AA-readable contrast. */
    --bs-primary: #e88323;
    --bs-primary-rgb: 232, 131, 35;
    --bs-secondary: #1a7a4a;
    --bs-secondary-rgb: 26, 122, 74;
    --bs-info: #92400e;
    --bs-info-rgb: 146, 64, 14;
    --bs-success: #1a7a4a;
    --bs-success-rgb: 26, 122, 74;
    --bs-dark: #132418;
    --bs-dark-rgb: 19, 36, 24;
    --bs-link-color: #e88323;
    --bs-link-color-rgb: 232, 131, 35;
    --bs-link-hover-color: #d1721b;
    --bs-link-hover-color-rgb: 209, 114, 27;
}

/* ── Bootstrap component polish (buttons, badges, forms, pagination, nav) ── */
.btn { border-radius: 8px; font-weight: 500; }
.btn-secondary {
    background-color: var(--accent-green-text) !important;
    border-color: var(--accent-green-text) !important;
    color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #145c38 !important;
    border-color: #145c38 !important;
}
.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
}
.btn-outline-secondary {
    --bs-btn-color: var(--accent-green-text);
    --bs-btn-border-color: var(--accent-green-text);
    --bs-btn-hover-bg: var(--accent-green-text);
    --bs-btn-hover-border-color: var(--accent-green-text);
    --bs-btn-active-bg: var(--accent-green-text);
    --bs-btn-active-border-color: var(--accent-green-text);
}
.btn-check:checked + .btn,
.btn.active,
.btn:active {
    box-shadow: none;
}
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.form-check-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 131, 35, 0.15) !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--accent-green-text) !important;
    border-color: var(--accent-green-text) !important;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--accent) !important;
}
.page-link { color: var(--accent); }
.page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
}
.progress-bar { background-color: var(--accent); }
.progress-bar.bg-success { background-color: var(--accent-green-text) !important; }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--accent) !important; }

/* ── Theme Button & Accent Overrides ── */
.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #d1721b !important;
    border-color: #d1721b !important;
}
.text-primary {
    color: var(--accent) !important;
}
.border-primary {
    border-color: var(--accent) !important;
}
.user-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff6ed !important;
    color: #2b2b2b !important;
    padding: 5px 14px 5px 6px !important;
    border-radius: 999px !important;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.user-badge:hover, .user-badge:focus {
    background: #ffecd9 !important;
    box-shadow: 0 0 0 1px rgba(232, 131, 35, 0.25);
}
.user-badge-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.user-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}
.user-badge-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b2b2b;
}
.user-badge-role {
    font-size: 0.7rem;
    color: var(--accent);
    font-weight: 500;
}
.sidebar-brand h6 {
    color: var(--accent-yellow) !important;
}
.sidebar-menu a.active {
    border-left: 3px solid var(--accent-yellow) !important;
}

body { background: #f4f6fb; font-family: 'Segoe UI', sans-serif; }

/* ── Sidebar ───────────────────────────────── */
#sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.25s ease, transform 0.25s ease;
}
.sidebar-brand {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sidebar-brand h5 { color: #fff; font-weight: 700; margin: 0; font-size: 1rem; }
.sidebar-brand small { color: var(--sidebar-text); font-size: 0.75rem; }

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.9rem 1.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    text-decoration: none;
    transition: background 0.15s ease;
    white-space: nowrap;
    position: relative;
}
.sidebar-profile:hover {
    background: rgba(255,255,255,0.05);
}
.sidebar-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sidebar-profile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}
.sidebar-profile-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-profile-role {
    color: var(--sidebar-text);
    font-size: 0.72rem;
}

.sidebar-menu { padding: 0.75rem 0; list-style: none; margin: 0; }
.sidebar-menu .menu-label {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
    color: rgba(168, 191, 174, 0.55); padding: 1.1rem 1.6rem 0.5rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.sidebar-menu li { padding: 0 0.85rem; margin-bottom: 0; }
.sidebar-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 0.5rem 0.9rem; color: var(--sidebar-text);
    text-decoration: none; font-size: 0.875rem; border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    position: relative;
}
.sidebar-menu a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.sidebar-menu a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    box-shadow: 0 4px 14px rgba(232, 131, 35, 0.35);
}
.sidebar-menu a.active .sidebar-count {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}
.sidebar-menu a .bi { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }

/* ── Main area ─────────────────────────────── */
#main { margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left 0.25s ease; }

/* ── Topbar ────────────────────────────────── */
#topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid #e8ebf0;
    display: flex; align-items: center;
    padding: 0 1.5rem;
    position: sticky; top: 0; z-index: 999;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
#topbar .page-title { font-weight: 600; font-size: 1rem; flex: 1; color: #1f2430; }

.topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    color: #5b6472;
    font-size: 1.05rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.topbar-icon-btn:hover, .topbar-icon-btn:focus {
    background: #f1f3f8;
    color: var(--accent);
}
.topbar-divider {
    width: 1px;
    height: 24px;
    background: #e8ebf0;
    margin: 0 2px;
}

/* ── Content ───────────────────────────────── */
.content-area { padding: 1.5rem; }

/* ── Cards ─────────────────────────────────── */
.card { border: 1px solid #e8ebf0; border-radius: 12px; box-shadow: none; }
.card-header { background: #fff; border-bottom: 1px solid #e8ebf0; font-weight: 600; padding: 1rem 1.25rem; }

/* ── Stat cards ─────────────────────────────── */
.stat-card {
    background: #fff; border-radius: 12px; padding: 1.2rem 1.5rem;
    border: 1px solid #e8ebf0;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    display: block;
    color: inherit;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border-color: var(--accent);
    cursor: pointer;
}
.stat-card .stat-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.8rem; color: #6c757d; }

/* ── Focus overrides ─────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: none !important;
}

/* ── Tables ─────────────────────────────────── */
.table th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.05em; color: #6c757d; background: #f8f9fa; }
.table td { vertical-align: middle; }

/* ── Badges ─────────────────────────────────── */
.badge-active   { background: #f0faf5; color: var(--accent-green); font-weight: 500; }
.badge-completed{ background: #eaf3ec; color: var(--accent-green-dark); font-weight: 500; }
.badge-inactive { background: #fef3f2; color: #b42318; font-weight: 500; }
.badge-pending  { background: #fffaeb; color: #b54708; font-weight: 500; }

/* ── Alerts ─────────────────────────────────── */
.alert { border-radius: 10px; border: none; font-size: 0.875rem; }

/* ── Font weight utilities (Bootstrap 5 missing these) ── */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 991px) {
    #sidebar {
        width: var(--sidebar-width) !important;
        transform: translateX(-100%);
    }
    #sidebar.open { transform: translateX(0); }
    #main { margin-left: 0 !important; }

    #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 999;
    }
    #sidebar-backdrop.show { display: block; }

    /* Branch/Classroom page header: the title and "Add Trip" button sit
       side-by-side and only wrap to their own lines when the title happens
       to be long enough to force it — so the layout looked different from
       page to page (e.g. "Satellite" stayed inline, "Blooming Buds -
       Morning" wrapped). Always stack them on mobile for a consistent
       look, with the button full-width for an easy tap target. */
    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header-row h5 {
        text-align: left;
        width: 100%;
    }
    .page-header-row .btn {
        width: 100%;
    }

    /* Topbar title was wrapping to 2-3 lines on narrow screens (its flex
       sibling buttons/badge don't shrink, so the title got squeezed into a
       tiny width) which broke the topbar's fixed height. Truncate instead,
       and hide the user's name/role text to give the title more room. */
    #topbar { padding: 0 1rem; gap: 8px; }
    #topbar .page-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .user-badge-text { display: none; }
    .user-badge { padding: 5px !important; }

    /* Bus Occupancy filter: two side-by-side width:auto <select>s overflow
       a narrow card, which drags the whole page's scrollable width wider
       and clips everything else (table columns, the selects themselves)
       to that oversized layout instead of the visible screen. Stack them
       full-width instead. */
    #bus-occupancy-filter {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    #bus-occupancy-filter select {
        width: 100% !important;
    }
    #bus-occupancy-body .btn {
        white-space: nowrap;
    }
}

/* ── DataTables Overrides ───────────────────── */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.5rem;
}
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    outline: none;
    margin-left: 0.5rem;
    background-color: #fff;
    color: #495057;
    transition: border-color 0.15s ease-in-out;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--accent) !important;
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    padding: 0.25rem 1.75rem 0.25rem 0.75rem;
    font-size: 0.85rem;
    outline: none;
    background-color: #fff;
    color: #495057;
}
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--accent) !important;
}
.dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
    color: #6c757d;
    padding-top: 0.5rem;
}
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.5rem;
}
.dataTables_wrapper .page-link {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    color: var(--accent);
    border-color: #e8ebf0;
}
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.dataTables_wrapper .page-link:focus {
    box-shadow: none;
}
table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}
table.dataTable thead th {
    border-bottom: 1px solid #e8ebf0 !important;
}

/* ==========================================================================
   LOGIN PAGE ANIMATED STYLES (From auth/login.blade.php)
   ========================================================================== */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.login-body {
    background: linear-gradient(-45deg, #132418, #1e3827, #23432e, #1a3020);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Wraps every decorative animated element (bubbles, birds, clouds, arrows)
   so it can be clipped with overflow:hidden WITHOUT also clipping
   position:fixed siblings like .driver-login-fab — a fixed element gets
   clipped to the box of any overflow:hidden ancestor it's nested inside,
   even though it's positioned relative to the viewport, so that clipping
   has to happen on a wrapper the fab isn't inside, not on <body> itself. */
.sky-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Animated Background Particles */
.bg-bubbles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.bubble {
    position: absolute;
    background: rgba(232, 131, 35, 0.08);
    bottom: -150px;
    width: 40px; height: 40px;
    border-radius: 50%;
    animation: floatUp 25s infinite linear;
}
.bubble:nth-child(1) { left: 10%; width: 80px; height: 80px; animation-delay: 0s; animation-duration: 18s; }
.bubble:nth-child(2) { left: 20%; width: 120px; height: 120px; animation-delay: 2s; animation-duration: 22s; }
.bubble:nth-child(3) { left: 25%; width: 60px; height: 60px; animation-delay: 4s; }
.bubble:nth-child(4) { left: 40%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 20s; background: rgba(51, 145, 70, 0.08); }
.bubble:nth-child(5) { left: 70%; width: 90px; height: 90px; animation-delay: 7s; }
.bubble:nth-child(6) { left: 80%; width: 120px; height: 120px; animation-delay: 3s; animation-duration: 16s; background: rgba(51, 145, 70, 0.06); }
.bubble:nth-child(7) { left: 90%; width: 70px; height: 70px; animation-delay: 12s; }

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
        border-radius: 50%;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-1200px) rotate(600deg);
        opacity: 0;
        border-radius: 20%;
    }
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 28px;
    padding: 3rem 2.75rem 2.5rem;
    width: 100%;
    max-width: 430px;
    box-shadow:
        0 40px 90px rgba(8, 20, 12, 0.45),
        0 8px 28px rgba(8, 20, 12, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
    animation: cardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    z-index: 2;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}
.login-card::before {
    content: '';
    position: absolute;
    top: -1px; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(22, 163, 74, 0.5), transparent);
    border-radius: 50%;
}
.login-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: #132418;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}
.login-subheading {
    font-size: 0.85rem;
    color: #64748b;
}
.login-card .form-label {
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.01em;
}
.input-group {
    border: 1.5px solid rgba(19, 36, 24, 0.1);
    border-radius: 13px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    background: rgba(248, 250, 249, 0.8);
}
.input-group:focus-within {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.13) !important;
    background: #fff;
}
.input-group-text {
    border: none !important;
    background-color: transparent !important;
    color: #16a34a;
    padding-left: 1rem;
}
.login-card .form-control {
    border: none !important;
    background: transparent !important;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    font-size: 0.95rem;
}
.login-card .form-control:focus {
    box-shadow: none !important;
    background: transparent !important;
}
.login-card .form-check-input:checked {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}
.login-card .form-check-input:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.15) !important;
}
.btn-login {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff; border: none;
    padding: 12px; font-weight: 600; border-radius: 13px;
    width: 100%; transition: all 0.25s ease; font-size: 16px;
    letter-spacing: 0.01em;
}
.btn-login:hover {
    background: linear-gradient(135deg, #15803d, #116932);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.35);
}
.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.2);
}
.login-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.82rem;
}
.login-footer-links a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}
.login-footer-links a:hover {
    color: #16a34a;
}
.login-footer-links .divider-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: #cbd5e1;
}

/* ── Driver Login corner button ── */
.driver-login-fab {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}
.driver-login-fab i { font-size: 0.95rem; color: #eea92f; }
.driver-login-fab:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
@media (max-width: 480px) {
    .driver-login-fab { top: 14px; right: 14px; padding: 0.5rem 0.9rem; font-size: 0.78rem; }
}

/* ── Gliding Arrows Animation (birds are generated by js/birds.js) ── */
.arrow-glider {
    position: absolute;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e88323"><path d="M12 2L1 21h22L12 2zm0 4l7.5 13h-15L12 6z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: rotate(45deg);
}
.arrow-1 {
    animation: glide-arrow-1 20s linear infinite;
    top: 60%;
    left: -5%;
}
.arrow-2 {
    animation: glide-arrow-2 28s linear infinite;
    animation-delay: 8s;
    top: 75%;
    left: -5%;
}

@keyframes glide-arrow-1 {
    0% { transform: translate(-10vw, 0) rotate(45deg) scale(0.8); opacity: 0; }
    10% { opacity: 0.15; }
    90% { opacity: 0.15; }
    100% { transform: translate(110vw, -150px) rotate(45deg) scale(0.8); opacity: 0; }
}
@keyframes glide-arrow-2 {
    0% { transform: translate(-10vw, 0) rotate(45deg) scale(0.6); opacity: 0; }
    10% { opacity: 0.12; }
    90% { opacity: 0.12; }
    100% { transform: translate(110vw, -80px) rotate(45deg) scale(0.6); opacity: 0; }
}

/* ==========================================================================
   STUDENT FORM STYLES (From students/_form.blade.php)
   ========================================================================== */
.form-section-card {
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    height: 100%;
}
.form-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.75rem;
}
.form-section-title i {
    color: var(--accent, #e88323);
    font-size: 1.2rem;
}
.form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.4rem;
}
.form-control, .form-select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    transition: all 0.15s ease-in-out;
    background-color: #f8fafc;
}
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--accent, #e88323);
    box-shadow: none;
}
.form-control::placeholder {
    color: #94a3b8;
}
.map-wrapper {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.active-toggle-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   STUDENT IMPORT STYLES (From students/import.blade.php)
   ========================================================================== */
.upload-zone {
    border: 2px dashed #c5cfee;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    background: #fafbff;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent);
    background: #fdf5ee;
}
.upload-zone .upload-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
}
.step-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.col-pill {
    background: #fff6ed; color: var(--accent);
    border-radius: 6px; padding: 2px 10px;
    font-size: 0.78rem; font-weight: 600;
    display: inline-block; margin: 2px;
}
.col-pill.optional { background: #f0faf5; color: #1a7a4a; }
#file-name-display { font-size: 0.85rem; color: var(--accent); margin-top: 0.5rem; }
.progress-bar-import { display: none; }

/* ==========================================================================
   ROUTE MAP STYLES (From routes/map.blade.php)
   ========================================================================== */
#map { height: calc(100vh - 160px); min-height: 500px; border-radius: 12px; }
.map-sidebar {
    height: calc(100vh - 160px);
    min-height: 500px;
    overflow-y: auto;
    border-radius: 12px;
}
.stop-card {
    border-left: 3px solid var(--accent);
    background: #fff;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.stop-card:hover { background: #fff6ed; }
.stop-card.active { background: #fff6ed; border-left-color: var(--accent-yellow); }
.stop-card.picked-up { border-left-color: var(--accent-green); background: #f0faf5; }
.stop-badge {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
    background: var(--accent); flex-shrink: 0;
}
.stop-badge.picked-up { background: var(--accent-green); }
.traffic-on  { background: #e6f9f0; color: #1a7a4a; }
.traffic-off { background: #fff8e6; color: #b54708; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
#no-key-warning { display: none; }

/* ==========================================================================
   ERROR 403 STYLES (From errors/403.blade.php)
   ========================================================================== */
.error-body {
    background: linear-gradient(135deg, #132418 0%, #1e3827 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #f8fafc;
}
.error-card {
    background: rgba(19, 36, 24, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 3.5rem 2.5rem;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    text-align: center;
    animation: fadeIn 0.6s ease-out;
}
.icon-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2.8rem;
    color: #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.15);
    animation: pulse 2s infinite;
}
.error-code {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ef4444;
    margin-bottom: 0.5rem;
}
.error-title {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #ffffff;
}
.error-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}
.btn-action {
    font-weight: 600;
    border-radius: 12px;
    padding: 0.8rem 1.8rem;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
}
.btn-home {
    background: #e88323; /* Matching logo orange */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(232, 131, 35, 0.3);
}
.btn-home:hover {
    background: #d1721b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 131, 35, 0.4);
    color: #ffffff;
}
.btn-login:hover {
    color: #ffffff;
    transform: translateY(-2px);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── Inline Style Replacements ── */
.brand-logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}
.brand-panel-small {
    font-size: 0.7rem;
}
.sidebar-menu .sidebar-logout-item {
    margin-top: auto;
    margin-bottom: 0;
    padding: 1rem 0.85rem 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.sidebar-logout-item a:hover {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #ff9494 !important;
}
.sidebar-logout-btn {
    all: unset;
    width: 100%;
    cursor: pointer;
}
.impersonation-alert {
    background-color: #fffbeb;
    color: #b45309;
    border-bottom: 1px solid #fde68a !important;
}
.impersonation-btn-stop {
    background-color: #f59e0b;
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    text-decoration: none;
}
.login-logo-img {
    height: 100px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* ── Collapsible Sidebar (icon-only rail on desktop) ──
   Desktop-only: a mobile viewport uses its own off-canvas open/close system
   (see the max-width:991px block below), and must never inherit a stale
   "collapsed" preference saved from a prior desktop session on the same
   browser — that combination is what made the sidebar unusable on mobile,
   showing an icon-only rail with no way to fully open it. */
@media (min-width: 992px) {
    body.collapsed-sidebar #sidebar {
        width: var(--sidebar-collapsed-width);
    }
    body.collapsed-sidebar #main {
        margin-left: var(--sidebar-collapsed-width) !important;
    }
    body.collapsed-sidebar .sidebar-brand {
        padding: 1.2rem 0;
        justify-content: center;
    }
    body.collapsed-sidebar .brand-logo-img {
        height: 34px;
        width: 34px;
        max-width: 34px;
        object-fit: contain;
    }
    body.collapsed-sidebar .sidebar-brand > div,
    body.collapsed-sidebar #sidebar .link-text,
    body.collapsed-sidebar #sidebar .sidebar-count {
        display: none;
    }
    body.collapsed-sidebar .sidebar-menu .menu-label {
        height: 0;
        padding: 10px 1.2rem 0;
        margin: 6px 0;
        font-size: 0;
        color: transparent;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    body.collapsed-sidebar .sidebar-menu li.menu-label:first-child {
        border-top: none;
        margin-top: 0;
    }
    /* !important is required here: several sidebar links carry Bootstrap's
       .justify-content-between utility class inline (for the badge normally
       shown next to them), and Bootstrap compiles its utilities with
       !important by default — a plain override never wins against that. */
    body.collapsed-sidebar .sidebar-menu a {
        justify-content: center !important;
        padding: 0.75rem 0;
    }
    body.collapsed-sidebar .sidebar-menu a > span.d-flex {
        justify-content: center !important;
        gap: 0 !important;
    }
    body.collapsed-sidebar .sidebar-profile {
        justify-content: center;
        padding: 0.9rem 0;
    }
}

/* Flyout label shown on hover while the desktop sidebar is collapsed.
   This can't be a pure-CSS ::after positioned off the edge of the nav
   item — #sidebar has overflow-x:hidden (needed for its own vertical
   scrollbar), which clips anything positioned past its right edge before
   it can ever become visible. A single tooltip element living outside
   the sidebar's DOM, positioned via JS on hover, escapes that clipping. */
#sidebar-tooltip {
    position: fixed;
    background: var(--sidebar-active-bg);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 2000;
}
#sidebar-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   DASHBOARD DRILL-DOWN (Branch grid / Classroom grid / Route list)
   ========================================================================== */
.dash-grid-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    padding: 1.35rem 1.35rem 1.15rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}
.dash-grid-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent), var(--accent-yellow));
}
.dash-grid-card.theme-green::before { background: linear-gradient(90deg, var(--accent-green), var(--accent-green-text)); }
.dash-grid-card.theme-amber::before { background: linear-gradient(90deg, var(--accent-yellow), var(--accent)); }
.dash-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16,24,40,0.10);
    border-color: #f1e4d4;
}
.dash-grid-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.dash-grid-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    box-shadow: 0 6px 14px rgba(232,131,35,0.25);
}
.dash-grid-icon.theme-green { background: linear-gradient(135deg, var(--accent-green), var(--accent-green-text)); box-shadow: 0 6px 14px rgba(51,145,70,0.25); }
.dash-grid-icon.theme-amber { background: linear-gradient(135deg, var(--accent-yellow), var(--accent)); box-shadow: 0 6px 14px rgba(238,169,47,0.25); }
.dash-grid-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.15rem; line-height: 1.25; }
.dash-grid-subtitle { font-size: 0.78rem; color: #94a3b8; }
.dash-grid-chevron { color: #cbd5e1; font-size: 1.1rem; transition: transform .2s ease, color .2s ease; flex-shrink: 0; margin-top: 0.4rem; }
.dash-grid-card:hover .dash-grid-chevron { color: var(--accent); transform: translateX(3px); }
.dash-grid-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.dash-grid-stat {
    display: flex; align-items: center; gap: 5px;
    background: #f8f9fb; border-radius: 8px;
    padding: 4px 10px; font-size: 0.76rem; font-weight: 600; color: #475569;
}
.dash-grid-stat i { color: var(--accent); font-size: 0.85rem; }

/* Route list (classroom drill-down) — timeline-style rows, same idiom as
   the Route Details stop timeline elsewhere in the app. */
.route-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f1f3f8;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.route-row + .route-row { margin-top: 0.65rem; }
.route-row:hover { box-shadow: 0 6px 16px rgba(16,24,40,0.06); border-color: #e8ebf0; }
.route-row-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: #fff;
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}
.route-row-icon.type-drop { background: linear-gradient(135deg, var(--accent-yellow), #b54708); }
.route-row-body { flex: 1; min-width: 0; }
.route-row-title { font-weight: 700; font-size: 0.95rem; color: #1e293b; }
.route-row-meta { font-size: 0.78rem; color: #94a3b8; margin-top: 1px; }
.route-row-metrics { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.route-time-pill {
    display: flex; flex-direction: column; align-items: center;
    background: #f8f9fb; border-radius: 10px; padding: 6px 12px; min-width: 68px;
}
.route-time-pill .val { font-weight: 700; font-size: 0.92rem; color: #1e293b; }
.route-time-pill .lbl { font-size: 0.65rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }

body.dark-theme .dash-grid-card { background: #161b22; border-color: #21262d; }
body.dark-theme .dash-grid-card:hover { border-color: #30363d; }
body.dark-theme .dash-grid-title { color: #f1f3f8; }
body.dark-theme .dash-grid-stat { background: #1f242c; color: #c9d1d9; }
body.dark-theme .route-row { background: #161b22; border-color: #21262d; }
body.dark-theme .route-row-metrics > .d-flex.gap-1 { border-top-color: #21262d; }
body.dark-theme .route-row-title { color: #f1f3f8; }
body.dark-theme .route-time-pill { background: #1f242c; }
body.dark-theme .route-time-pill .val { color: #f1f3f8; }

@media (max-width: 767px) {
    .route-row { flex-wrap: wrap; }
    .route-row-metrics { justify-content: flex-start; width: 100%; margin-left: calc(44px + 1rem); }

    /* The 3 time pills and the edit/route/print button group are siblings
       in the same wrapping flex row, which left one pill stranded alone on
       its own line and the buttons floating below with no visual relation
       to anything. Give the pills equal width so all 3 always share one
       row, and pull the buttons into their own clearly-separated row. */
    .route-row-metrics .route-time-pill {
        flex: 1 1 0;
        min-width: 0;
    }
    .route-row-metrics > .d-flex.gap-1 {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px solid #f1f3f8;
    }
}

/* ── Theme Switcher: Dark Theme Overrides ── */
body.dark-theme {
    background: #0f1319;
    color: #e2e8f0;
}
body.dark-theme #topbar {
    background: #161b22;
    border-bottom-color: #21262d;
    color: #fff;
}
body.dark-theme #topbar .btn {
    color: #e2e8f0;
}
body.dark-theme #topbar .page-title {
    color: #f1f3f8;
}
body.dark-theme .topbar-icon-btn {
    color: #8b949e;
}
body.dark-theme .topbar-icon-btn:hover, body.dark-theme .topbar-icon-btn:focus {
    background: #21262d;
    color: var(--accent);
}
body.dark-theme .topbar-divider {
    background: #21262d;
}
body.dark-theme .user-badge-name {
    color: #f1f3f8;
}
body.dark-theme .card {
    background: #161b22;
    border-color: #21262d;
    color: #e2e8f0;
}
body.dark-theme .card-header {
    background: #161b22;
    border-bottom-color: #21262d;
    color: #fff;
}
body.dark-theme .table th {
    background: #1f242c;
    color: #8b949e;
}
body.dark-theme .table {
    color: #e2e8f0;
    border-color: #21262d;
}
body.dark-theme .table-hover tbody tr:hover {
    background-color: #21262d;
}
body.dark-theme .form-control, body.dark-theme .form-select {
    background-color: #1f242c;
    border-color: #30363d;
    color: #fff;
}
body.dark-theme .form-control:focus, body.dark-theme .form-select:focus {
    background-color: #1f242c;
}
body.dark-theme .dataTables_wrapper .dataTables_filter input,
body.dark-theme .dataTables_wrapper .dataTables_length select {
    background-color: #1f242c;
    border-color: #30363d;
    color: #fff;
}
body.dark-theme .form-section-card {
    background: #161b22;
    border-color: #21262d;
}
body.dark-theme .form-section-title {
    color: #fff;
    border-bottom-color: #21262d;
}
body.dark-theme .active-toggle-container {
    background: #1f242c;
    border-color: #30363d;
}
body.dark-theme .text-muted {
    color: #8b949e !important;
}
body.dark-theme .modal-content {
    background-color: #161b22;
    border-color: #21262d;
    color: #e2e8f0;
}
body.dark-theme .modal-header, body.dark-theme .modal-footer {
    border-color: #21262d;
}
body.dark-theme .alert-warning {
    background-color: #2c2100;
    color: #f59e0b;
    border-color: #453300;
}
body.dark-theme .stop-card {
    background: #161b22;
    border-left-color: var(--accent);
}
body.dark-theme .stop-card:hover {
    background: #1f242c;
}
body.dark-theme .stop-card.active {
    background: #1f242c;
}
body.dark-theme .user-badge {
    background: #2c1a0c !important;
    color: var(--accent) !important;
}
.dropdown-menu {
    border-radius: 12px;
    padding: 6px;
    min-width: 190px;
}
.dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
body.dark-theme .dropdown-menu {
    background-color: #161b22;
    border-color: #21262d;
}
body.dark-theme .dropdown-item {
    color: #e2e8f0;
}
body.dark-theme .dropdown-item:hover {
    background-color: #21262d;
    color: #fff;
}

/* ==========================================================================
   DARK THEME — form page wrappers, stat cards & pastel inline badges
   Many pages set their own background via inline style="..." (form card
   bodies, stat-icon chips, timeline badges) rather than a class, so plain
   .card overrides above don't reach them — these need !important to win
   over the inline style.
   ========================================================================== */
body.dark-theme .card-body[style*="#fafbfd"] {
    background-color: #161b22 !important;
}
body.dark-theme .stat-card {
    background: #161b22;
    border-color: #21262d;
}
body.dark-theme .stat-card .stat-label {
    color: #8b949e;
}
/* Pastel icon/badge chips (e.g. style="background:#fff1e6;color:#e88323")
   used across stat cards, route timelines and map info windows — swap the
   light pastel fill for a translucent dark one; the accent text color on
   top already reads fine against dark, so it's left alone. */
body.dark-theme [style*="background:#e6f9f0"],
body.dark-theme [style*="background: #e6f9f0"] { background: rgba(26, 122, 74, 0.18) !important; }
body.dark-theme [style*="background:#fff8e6"],
body.dark-theme [style*="background: #fff8e6"] { background: rgba(181, 71, 8, 0.18) !important; }
body.dark-theme [style*="background:#fff1e6"],
body.dark-theme [style*="background: #fff1e6"] { background: rgba(232, 131, 35, 0.18) !important; }
body.dark-theme [style*="background:#eaf3ec"],
body.dark-theme [style*="background: #eaf3ec"] { background: rgba(30, 56, 39, 0.35) !important; }
body.dark-theme [style*="background:#eff6ff"],
body.dark-theme [style*="background: #eff6ff"] { background: rgba(29, 78, 216, 0.18) !important; }
body.dark-theme [style*="background:#fff6ed"],
body.dark-theme [style*="background: #fff6ed"] { background: rgba(232, 131, 35, 0.18) !important; }
body.dark-theme [style*="background:#fdf0ff"],
body.dark-theme [style*="background: #fdf0ff"] { background: rgba(147, 51, 234, 0.18) !important; }
body.dark-theme [style*="background:#f8f9fa"],
body.dark-theme [style*="background: #f8f9fa"],
body.dark-theme [style*="background:#f5f5f5"],
body.dark-theme [style*="background: #f5f5f5"],
body.dark-theme [style*="background:#f1f5f9"],
body.dark-theme [style*="background: #f1f5f9"] { background: #1f242c !important; }
body.dark-theme [style*="background:#e8ebf0"],
body.dark-theme [style*="background: #e8ebf0"] { background: #21262d !important; }
body.dark-theme [style*="border:1px solid #bfdbfe"] { border-color: #2b3a5c !important; }
body.dark-theme code[style*="background:#fff"] { background: #1f242c !important; color: #e2e8f0 !important; }

/* Bootstrap's bg-light/text-dark combo (used as neutral info badges
   throughout tables/cards) is unreadable once the page background goes
   dark — the badge itself needs to become the dark surface. */
body.dark-theme .bg-light.text-dark,
body.dark-theme .badge.bg-light {
    background-color: #21262d !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}