/* =========================================
   1. BRAND VARIABLES & THEME
   ========================================= */
/* Disable selection globally */
html, body {
  user-select: none;
}

/* Allow selection for all common interactive elements */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""],
a,
label {
  user-select: text;
}

/* Optional: Allow selection for specific custom UI elements */
.custom-selectable {
  user-select: text;
}

   :root {
    /* Brand Colors */
    --primary: #266e77;       /* Deep Teal - Trust, Safety */
    --primary-dark: #1b535a;  
    --primary-light: #eef7f8; /* Airy, fresh background */
    
    /* Semantic Colors */
    --secondary: #f59e0b;     /* School Bus Amber / Alerts */
    --success: #10b981;       /* Safe / Go / Eco-friendly */
    --danger: #ef4444;        /* Error / Stop */
    --warning-bg: #fffbeb;
    --warning-text: #b45309;
    
    /* UI Colors */
    --bg-app: #f4f7f6;        /* Slightly cool gray for contrast */
    --surface: #ffffff;       /* Card Backgrounds */
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    
    /* Layout & Spacing */
    --radius-sm: 12px;        /* Softened corners for a friendlier UI */
    --radius-md: 20px;
    --radius-lg: 28px;
    --nav-height: 70px;       /* Slightly taller for thumb comfort */
    --header-height: 65px;
    --shadow-soft: 0 8px 24px rgba(38, 110, 119, 0.08);
    --shadow-floating: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* =========================================
   2. GLOBAL RESET & TYPOGRAPHY
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100dvh; 
    width: 100vw;
    overflow: hidden; 
    background-color: var(--bg-app);
    color: var(--text-main);
    line-height: 1.5;
}

h1, h2, h3, h4 {
    color: var(--primary-dark);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h2 { font-size: 1.5rem; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; }

/* UTILITY CLASSES */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.flex-row { display: flex; align-items: center; }
.gap-10 { gap: 10px; }
.hidden { display: none !important; }
.inactive { background-color: #868e96; color:#4b5563 }
.white { filter: brightness(0) invert(1); }
/* Button Pulse */
.pulse-animation {
    /* Set a default fallback color (your original amber/yellow) */
    --pulse-color: 255, 193, 7;
    animation: pulse 1.5s infinite;
}

/* Add this class to your element to make the pulse blue */
.pulse-blue {
    --pulse-color: 0, 123, 255;
}

/* Make it red */
.pulse-red {
    --pulse-color: 220, 53, 69;
}

@keyframes pulse {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.7); 
    }
    70% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 5px rgba(var(--pulse-color), 0);

    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 10px rgba(var(--pulse-color), 0); 
    }
    70% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 5px rgba(var(--pulse-color), 0); 
    }
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.7); 
    }
}

/* Map Marker Pulse */
.marker-pulse-animation {
    animation: marker-bounce-pulse 1.5s infinite alternate ease-in-out;
    /* Optional: Ensure the marker overlays other markers while animating */
    z-index: 1000 !important; 
}

@keyframes marker-bounce-pulse {
    0% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 5px rgba(0,255,0,0.8)); }
    100% { transform: scale(1.2) translateY(-10px); filter: drop-shadow(0 10px 15px rgba(0,255,0,0.4)); }
}

/* =========================================
   MOBILE FORM OPTIMIZATIONS
   ========================================= */

/* 1. Prevent iOS Auto-Zoom */
/* Safari zooms in if inputs are < 16px. This forces them to 16px minimum */
#propose-trip-form .form-control {
    font-size: 16px !important; 
}

/* 2. Google Maps Autocomplete Mobile Fixes */
.pac-container {
    z-index: 9999 !important; /* Ensure it stays above modals/headers */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    /* Prevent it from getting taller than the space above the keyboard */
    max-height: 40vh; 
    overflow-y: auto;
}
.pac-item {
    padding: 12px 10px !important; /* Larger touch targets for fat fingers */
    font-size: 15px !important;
    cursor: pointer;
    border-top: 1px solid var(--border) !important;
}
.pac-item-query {
    font-size: 16px !important;
    color: var(--text-main);
}

/* 3. Mobile Submit Bar */
@media (max-width: 768px) {
    .submit-trip-container {
        position: fixed !important;
        top: auto !important; /* CRITICAL: This kills the desktop top:46px rule */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 15px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0,0,0,0.1);
        border-radius: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
        /* Account for iOS safe area (home bar) */
        padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important; 
    }
    
    /* Add padding to the form so the last card isn't hidden by the fixed submit button */
    #propose-trip-form {
        padding-bottom: 90px !important;
    }

}

/* =========== FONTS================= */

:root {
    /* Define the new base font to match the logo */
    --font-family-base: 'Quicksand', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-family-base);
    
    /* These properties make the text look crisper and more premium on modern screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Ensure your text color contrasts well */
    color: var(--text-primary, #1e293b); 
}

/* Ensure headings explicitly inherit the new font and use the bolder weights */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: 700; /* Bold weight for emphasis */
}

/* You might want to adjust your inputs and buttons to use the font too */
button, input, textarea, select {
    font-family: var(--font-family-base);
}

/* =========================================
   ADMIN UI BUTTONS
   ========================================= */

#admin-switch-btn {
    margin-top:20px;
    margin-bottom:0px;
    font-size: 0.9rem;
}

.admin-replay-btn {
    max-height:25px; font-size:0.9rem;
}

/* Small Icon-Only Buttons for Tables */
.btn-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-small svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.btn-icon-small.btn-edit {
    color: var(--primary);
    border-color: rgba(38, 110, 119, 0.3); /* Faint primary border */
}

.btn-icon-small.btn-edit:hover {
    background: rgba(38, 110, 119, 0.1);
    border-color: var(--primary);
}

.btn-icon-small.btn-delete {
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.3); /* Faint danger border */
}

.btn-icon-small.btn-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
}

/* ================= ALERTS ================ */

.admin-action-alert {
            position: fixed; top: 20px; right: 20px; z-index: 9999;
            background: #fff; border-left: 5px solid var(--primary);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 15px;
            border-radius: 8px; min-width: 300px;
}

/* =========================================
   3. MOBILE APP LAYOUT
   ========================================= */
.app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    z-index: 1000;
}

.app-logo {
    height: 120px;
    object-fit: contain;
}

.app-main-content, .view-container {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-main-content {
    padding-top: calc(var(--header-height) + 15px);
    padding-bottom: calc(var(--nav-height) + 20px);
    padding-left: 15px;
    padding-right: 15px;
    overflow-y: auto;
}

/* =========================================
   4. CARDS & CONTAINERS
   ========================================= */
   
.view-section {
    display: none;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}
.view-section:not(.hidden) { display: block; }

/* Flex Overrides for specific views */
#view-messages.view-section:not(.hidden),
#view-active-trip.view-section:not(.hidden) {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0,0,0,0.02);
}

.auth-card {
    margin-top: 5vh;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* =========================================
   5. BUTTONS & ICONS
   ========================================= */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    min-width:80px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 24px;
    gap: 8px;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(38, 110, 119, 0.25);
}
.btn-primary:active { background-color: var(--primary-dark); transform: scale(0.97); }

.btn-secondary {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--border);
    color: var(--text-main);
}

.btn-danger {
    background-color: var(--danger);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.ui-icon {
    width: 1.4em;
    height: 1.4em;
    vertical-align: middle;
}

.sign-icon {
    width: 80px;
    vertical-align: middle;
}

.ui-btn-icon {
    width: 80%;
}

.ui-thumb {
    height: 0.9em;
    vertical-align: middle;
}

/* =========================================
   6. FORMS & INPUTS
   ========================================= */

#trip-metrics-display {
    display:inline-block;
    background:#1d5a7e3d;
    border-radius: 6px;
    padding: 4px;
    border-width: 1px;
    border-color: #0000002f;
    font-size: 0.9rem;
}
.input-group {
    margin-bottom: 20px;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 8px;
    margin-top: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.label-sub {
    font-size: 0.85em;
    font-weight: normal;
    color: var(--text-muted);
}

input:not([type="checkbox"]):not([type="radio"]), select {
    width: 100%;
    height: 54px;
    padding: 14px 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--text-main);
    background: #f9fafb;
    transition: all 0.2s ease;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.trip-timing-row {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.trip-timing-col { 
    flex: 1; 
    min-width: 200px; /* The minimum width the input needs before it wraps. Adjust as needed! */
}

.recurrence-panel {
    background: var(--bg-app);
    padding: 16px;
    border-radius: var(--radius-sm);
    margin-top: 10px;
}

.day-checkbox-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.checkbox-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
}

/* =========================================
   7. DASHBOARD & IMPACT CARDS
   ========================================= */
/* =========================================
   UPDATED DASHBOARD HEADER & CHAT
   ========================================= */

/* Transforms the header into a contained card */
.dashboard-header { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff7ed; /* Faint orange background */
    border: 2px solid rgba(245, 158, 11, 0.2); /* Faint amber border matching the quick-action cards */
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft);
}

.dashboard-header-text {
    display: flex;
    flex-direction: column;
}

.dashboard-welcome { 
    margin: 0; 
    font-size: 1.8rem; 
    color: var(--primary-dark); 
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.dashboard-subtitle { 
    margin-top: 4px; 
    color: var(--text-muted); 
    font-size: 1rem; 
}

.action-required-header {
    color: #812323;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 15px;
}

/* =======  NOTES ========================= */

/* The Sticky Note Container */
.trip-note-sticky {
    position: relative;
    max-width: 140px; /* Adjust based on your layout */
    background: #feff9c; /* Classic post-it yellow */
    padding: 12px 8px 8px 8px;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.15);
    border-bottom-right-radius: 20px 5px; /* Slight curl effect */
    
    /* Rotation logic via JS variable */
    transform: rotate(var(--note-rotation, -2deg));
    
    /* Small text and 3-line limit */
    font-size: 0.7rem;
    line-height: 1.2;
    color: #333;
    font-family: 'Comic Sans MS', 'Cursive', sans-serif; /* Optional: handwriting vibe */
    text-align: left;
}

.trip-note-sticky.invite {
      background: #fcd7ad; /* different for invites */
}

.trip-note-sticky.personal {
      background: #9ebdff; /* different for personal */
}

/* The Line Clamping (3 lines max) */
.trip-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The Push Pin */
.trip-note-sticky::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #fcc54f, #996300); /* Red pin head */
    border-radius: 50%;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
    z-index: 2;
}

/* =========================================
   DASHBOARD INVITATION CARDS
   ========================================= */

#invitations-container:not(:empty) {
    margin-bottom: 24px;
}

.trip-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-soft, 0 4px 12px rgba(0,0,0,0.04));
    display: flex;
    flex-direction: column;
}

.trip-status-overlay {
    position: relative;
    top: 10%;
    right: 15%;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
    color: grey;
    border: 6px solid grey;
    border-radius: 16px;
    padding: 10px 20px;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    background: transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(1px);
    transform: rotate(5deg);
    transform-origin: center;  
}

/* Add an amber accent border to highlight pending action */
.invite-card {
    border-left: 4px solid var(--secondary); 
}

#invite-modal {
    z-index: 10;
}

#join-modal {
    z-index: 9;
}

#manifest-modal {
    z-index: 8;
}

#requests-modal {
    z-index: 2000;
}

/* nb. view-active trip has z-index of 7 */

#role-scope-modal {
    display:block;
    position:fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
}

#admin-manage-trip-modal {
    z-index: 7;
    top: 0;
}

.trip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.trip-card-header h3 {
    color: var(--primary-dark);
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge {
    color: white; 
    font-size: 0.7em; 
    margin-right: 46px; 
    padding: 2px 6px; 
    border-radius: 6px; 
    font-weight: 600;
}

.badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
}

.badge-primary {
    background: rgba(0, 255, 72, 0.1);
}

.badge-secondary {
    background: rgba(195, 0, 255, 0.1);
}

.badge-tertiary {
    background: rgba(255, 230, 0, 0.1);
}

.badge-quartery {
    background: rgba(0, 140, 255, 0.1);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.trip-card-body p {
    margin: 6px 0;
    font-size: 0.9rem;
    color: var(--text-main);
}

.trip-card-body strong {
    color: var(--text-muted);
    font-weight: 600;
}

/* Invite Action Buttons */
.action-buttons .btn {
    flex: 1; /* Makes buttons equal width */
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.action-buttons .btn:active {
    transform: scale(0.96);
}

.btn-success {
    background-color: var(--success);
    color: white;
    border: 1px solid var(--success);
}

.btn-danger {
    background-color: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

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

/* Vibrant Dark Orange Chat Button */
.dashboard-chat-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #ea5a0c5e; /* Vibrant dark orange */
    color: #ffffff; /* Sets currentColor for the SVG icon */
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.25);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}

.trip-card-chat-btn {
    right: 40px;
    position: absolute;
    display: inline-block;
    top: 40px;
    width: 52px;
    height: 52px;
}

.dashboard-chat-btn:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.2);
}

.dashboard-chat-btn .ui-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Notification Alert Overlay */
.chat-alert-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    background-color: #c60000; 
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff7ed; /* Matches the header's faint orange to create a cutout effect */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
}
.security-banner {
    background-color: var(--warning-bg);
    border: 1px solid var(--secondary);
    border-radius: var(--radius-sm);
    color: var(--warning-text);
    padding: 14px 16px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* =========================================
   ADMIN SWITCH BUTTON
   ========================================= */

.btn-link-danger {
    background: none; border: none; color: var(--danger);
    font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0;
}

.dashboard-quick-actions { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; 
}
.dashboard-action-card { 
    border-radius: var(--radius-md); padding: 24px 12px; text-align: center; 
    border: 2px solid transparent; background: var(--surface); 
    box-shadow: var(--shadow-soft); cursor: pointer; transition: transform 0.2s;
}
.dashboard-action-card:active { transform: scale(0.96); }

.action-icon-wrapper { font-size: 2.2rem; display: block; margin-bottom: 12px; }
.dashboard-action-card.propose { border-color: rgba(16, 185, 129, 0.2); background: #f0fdf4; }
.dashboard-action-card.schedule { border-color: rgba(38, 110, 119, 0.2); background: var(--primary-light); }

.next-trip-card { border-top: 5px solid var(--secondary); }
.next-trip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.next-trip-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;}
.next-trip-badge.upcoming { background: #dcfce7; color: #166534; }
.next-trip-badge.empty { background: var(--border); color: var(--text-muted); }

.impact-card { 
    background: linear-gradient(135deg, #4c8787, #1a2d30);
    color: white; border-radius: var(--radius-md); padding: 24px; 
    box-shadow: 0 12px 24px rgba(38,110,119,0.3); cursor: pointer;
}
.impact-header { display: flex; justify-content: space-between; align-items: center; }
.impact-title { margin:0; font-size:1.25rem; color: #ffffff; }
.impact-subtitle { margin:4px 0 0 0; font-size:0.95rem; opacity:0.85; }
.impact-icon { font-size: 3rem; opacity: 0.9; }

/* =========================================
   FORM CARDS & CHUNKING
   ========================================= */
.form-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--border);
}

.form-section-title {
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bg-app);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ensure inputs take full width gracefully */
.form-card .form-control {
    width: 100%;
}

/* Sticky Action Bar for Mobile */
.submit-trip-container {
    position: absolute;
    top: 46px;
    width: 16%;
    right: 22px;
    padding: 0px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-md);
    z-index: 100;
    margin: 20px -10px -10px -10px; /* Bleed to edges on mobile if needed */
}

/* For smaller labels inside complex rows */
.label-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

/* =========================================
   INBOX GROUP COLORS
   ========================================= */
/* Open Groups (Shades of Orange/Amber) */
.bg-open-1 { background-color: #fffbeb; color: #1f2937; } /* Light */
.bg-open-2 { background-color: #fde68a; color: #1f2937; } /* Medium-Light */
.bg-open-3 { background-color: var(--secondary); color: #ffffff; } /* Dark/Brand */

/* Closed Groups (Shades of Green & Blue) */
.bg-closed-1 { background-color: var(--primary-light); color: #1f2937; } /* Light Teal */
.bg-closed-2 { background-color: #d1fae5; color: #1f2937; } /* Light Green */
.bg-closed-3 { background-color: var(--success); color: #ffffff; } /* Dark Green */
.bg-closed-4 { background-color: var(--primary); color: #ffffff; } /* Dark Teal */

.car-warning { background-color: #929292 !important; color: #000000 !important; } 
.car-offline { background-color: #414141 !important; color: #ffffff !important; }
/* Holidays (calendar) */
.bg-holiday-running { background-color: #3593ca; color: hwb(0 100% 0%); } /* Light */
.bg-holiday-single { background-color: #b351c0; color: #ffffff; } /* Medium-Light */

/* =========================================
   FULL SCREEN OVERLAYS & HEADERS
   ========================================= */
.full-screen-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-app);
    z-index: 2000; /* Extremely high to cover bottom nav and dashboard */
    overflow-y: auto;
}
.flex-column {
    display: flex;
    flex-direction: column;
}

/* Floating Top-Left Header */
.fixed-floating-header {
    position: fixed;
    top: 0; left: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 5px;
    color: black;
    font-weight: bold;
    font-size: 0.9rem; /* Small text */
    z-index: 2010;
    display: flex;
    align-items: center;
}

/* Clear the space under the floating header */
.overlay-content, .padded-chat-container {
    padding-top: 80px; 
    padding-bottom: 20px;
}
.padded-chat-container {
    flex: 1;
    overflow-y: auto;
    padding-left: 15px; padding-right: 15px;
}

/* Text-only Back Button */
.text-btn-back {
    background: transparent;
    border: none;
    color: black;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
}
.text-only-send {
    font-weight: bold; padding: 10px 15px; border-radius: var(--radius-lg);
}

/* =========================================
   INBOX ITEM LAYOUT
   ========================================= */
.inbox-item {
    width: 70%;
    padding: 15px; 
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Alternating Positioning */
.align-left {
    margin-right: auto;
    margin-left: 15px; /* Slight padding from edge */
}
.align-right {
    margin-left: auto;
    margin-right: 15px;
}

.inbox-item-header { font-weight: bold; }
.inbox-item-summary { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* =========================================
   CHAT VIEW LAYOUT (Flexbox approach)
   ========================================= */
/* =========================================
   REPORT MESSAGE BUTTON
   ========================================= */
/* Ensure your message bubble class (e.g., .message-bubble or .chat-message) has this: */
.message-bubble {
    position: relative;
    padding-bottom: 22px; /* Make room so text doesn't overlap the button */
}

/* =========================================
   EDIT MESSAGE BUTTON
   ========================================= */
.msg-edit-btn, .msg-delete-btn {
    position: absolute;
    display:inline-block;
    bottom: 4px;
    right: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.1s ease;
    padding: 2px;
}

.msg-edit-btn:hover, .msg-edit-btn:active {
    opacity: 1;
    transform: scale(1.1);
}

.msg-edit-btn img {
    width: 14px;
    height: 14px;
}

/* Show Edit button ONLY on the user's own messages */
.message-mine, .msg-edit-btn, .msg-delete-btn {
    display: flex; 
}

.msg-report-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.3; /* Keep it subtle so it isn't distracting */
    transition: opacity 0.2s ease, transform 0.1s ease;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-report-btn:hover, .msg-report-btn:active {
    opacity: 1;
    transform: scale(1.2);
}

.msg-report-btn img {
    width: 14px;
    height: 14px;
}

/* Optional: Hide report button on the current user's own messages */
.message-mine {
    display: none; 
}

/* Make the view a full-screen flex container */
#view-messages {
    display: flex;
    flex-direction: column;
    height: 100dvh; /* 100dvh accounts for mobile browser bars natively */
    background: var(--bg-app);
}

/* Header stays at the top */
.chat-header {
    flex-shrink: 0;
    /* (Your existing header styles will apply here) */
}

/* Messages area fills all available space and scrolls */
#chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

/* Input wrapper stays pinned to the bottom */
.chat-input-wrapper {
    flex-shrink: 0;
    background: var(--surface);
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom)); /* Safe area for iPhones */
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.03);
}

.chat-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.chat-input {
    flex: 1;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 10px 15px;
    outline: none;
}

/* =========================================
   8. CHAT INTERFACE
   ========================================= */
#chat-messages-container {
    flex: 1; overflow-y: auto; padding: 20px;
}

.secure-chat-loading { text-align:center; margin-top: 40px; color: var(--text-muted); font-size: 0.95rem; }
.secure-icon-large { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.5;}

.chat-input-row { display: flex; gap: 12px; align-items: center; }
.chat-send-btn { 
    width: 50px; height: 50px; min-height: 50px; border-radius: 50%; padding: 0; 
    display: flex; justify-content: center; align-items: center; border: none; flex-shrink: 0;
}

/* =========================================
   9. ACTIVE TRIP MAP
   ========================================= */
#view-active-trip {
    height: calc(100vh - var(--header-height));
    margin: -15px;
    flex-direction: column;
    position: relative;
    background: #e5e7eb;
    z-index: 7;
}

/* 1. The Wrapper: This handles rotation AND the 3D/Shadow filters */
.rotating-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    transform-origin: center center;
    transition: transform 0.2s linear;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5));
}

.rotating-wrapper.rot-wrap-highlight {
    width:40px;
    height: 40px;
}

.marker-shadow-wrapper {
    /* Apply filters here so the mask doesn't clip them */
    filter: 
        drop-shadow(3px -7px 3px rgba(0, 0, 0, 0.35));
}

.car-marker-img {
    width: 100%;
    height: 100%;
}

/* 2. The Masked Div: This provides the shape and the color */
.color-marker {
    width: 100%;
    height: 100%;
    
    /* The Cookie Cutter */
    -webkit-mask-image: url('/assets/icons/base_marker.png');
    mask-image: url('/assets/icons/base_marker.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;

    /* The 'Ink' - You can set a default here, or override in JS */
    background-color: #3498db; 
}

/* 3. Leaflet Container Fixes */
.custom-driver-icon {
    background: transparent !important;
    border: none !important;
    /* CRITICAL: Allows the 40px shadow to render outside the 30x30 box */
    overflow: visible !important; 
}

#all-img {width:40px;}

#report-issue-btn {
 position: fixed; top: calc(var(--header-height) + 4px); left: 8px; z-index: 10; opacity: 0.4; border-color:white; border-radius:5px;padding:3px
}

#trip-role-change-dropdown, #driver-select-dropdown {
    font-size: 0.9rem; display: inline-block; height:40px; width:80%; padding: 0px 0px 0px 10px;
}

#active-trip-map {
    flex: 1; width: 100%; z-index: 1;
    position: fixed;
    top: calc(var(--header-height));
    min-height: 90vh;
    background-color: #f3f4f6; /* Adds a gray box before tiles load so you know it's there */
}

.re-route {
    /* Your existing styling */
    background-color: rgba(233, 74, 0, 0.95); /* Slightly increased opacity for visibility */
    color: #ffffff;
    box-shadow: -1px 2px 11px 3px rgb(119 97 38 / 25%);
    
    /* NEW: Structural positioning to make it a floating action button */
    position: fixed;
    bottom: 40px; /* Floats above the bottom of the screen */
    left: 50%;
    max-width: 200px;
    transform: translateX(-50%); /* Perfectly centers the button */
    z-index: 100000; /* Ensures it stays on top of the map and other UI elements */
    
    /* NEW: Sizing and interaction polish */
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.re-route:active {
    transform: translateX(-50%) scale(0.95);
}

.re-route:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* =========================================================
   Child Daily Summary Section
========================================================= */

.child-summary-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.child-schedule-row {
    display: flex;
    align-items: stretch;
    background-color: #fefefe; /* Very light slate background */
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

.child-profile-badge {
     width:110px;
    height: 110px;
    border-radius: 50%;
    background: #fff7ed;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 20px auto;
    box-shadow: inset 1px 0px 3px 1px rgb(255 140 0 / 19%);  
}

/* 140px Left Column */
.child-profile-col {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-right: 2px dashed #cbd5e1;
    padding-right: 16px;
    flex-wrap: wrap;
    align-content: center;
    flex-direction: column;
}


/* Right Column (Trips) */
.child-trips-col {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 16px;
    justify-content: center;
}

/* Individual White Trip Cards */
.trip-summary-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trip-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.trip-meta {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.trip-detail-line {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.4;
}

.trip-detail-label {
    font-weight: 600;
    color: #1e293b;
}

/*manifest version */

/* Widen scrollbars for the manifest columns */
.unassigned-pool::-webkit-scrollbar,
.drivers-pool::-webkit-scrollbar {
    width: 14px; /* Increased width for easier grabbing */
}

.unassigned-pool::-webkit-scrollbar-track,
.drivers-pool::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 8px;
}

.unassigned-pool::-webkit-scrollbar-thumb,
.drivers-pool::-webkit-scrollbar-thumb {
    background: #c1c5cb;
    border-radius: 8px;
    border: 3px solid #f3f4f6; /* Creates a slight padding effect */
}

.unassigned-pool::-webkit-scrollbar-thumb:hover,
.drivers-pool::-webkit-scrollbar-thumb:hover {
    background: #9ca3af; /* Darkens on hover */
}

/* Fallback/Standard for Firefox */
.unassigned-pool,
.drivers-pool {
    scrollbar-width: auto; /* 'auto' restores it to standard width rather than thin */
    scrollbar-color: #c1c5cb #f3f4f6;
}

.child-icon-wrapper {
    position: absolute; top: -7; left: 7; width: 50px; height: 80px; z-index: 1; pointer-events: none;
}

.child-name-text {
    pointer-events: none; font-size: 0.75rem;
}

/* Dim children who aren't coming */
.child-token.status-not-coming {
    opacity: 0.5;
    filter: grayscale(0.8);
    border: 1px dashed #ccc;
    background-color: #f9f9f9;
}

/* Make the name strike-through in lists */
.status-not-coming .child-name-text {
    text-decoration: line-through;
    color: #888;
}

/* Container holding the passenger token must have position: relative; */

.status-toggle-btn {
    /* Shape and Size */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    
    /* Colors */
    background-color: #f3f4f6; /* Light grey */
    border: 1px solid #d1d5db; /* 1px border */
    color: #4b5563;            /* Dark grey X */
    
    /* Centering the X */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typography & Interaction */
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    
    /* Positioning (assuming it sits on the top-right of a token) */
    position: absolute;
    top: 0px;
    right: 0px;
    
    /* Smooth hover effect */
    transition: all 0.2s ease;

    display: 'flex';
    align-items: 'center';
    justify-content: 'center';
    cursor: 'pointer';
    z-index: '10';
    pointer-events: 'auto';
    box-shadow: '0 1px 3px rgba(0,0,0,0.1)'
}

.status-toggle-btn:hover {
    background-color: #e5e7eb;
    color: #1f2937;
    transform: scale(1.05); /* Slight pop on hover */
}

.alert-warning {
    background-color: var(--warning-bg); border: 1px solid var(--secondary);
    color: var(--warning-text); padding: 16px; border-radius: var(--radius-sm); margin: 15px;
    font-size: 0.9rem; z-index: 2; position: absolute; top: 70px; left: 0; right: 0;
    box-shadow: var(--shadow-floating);
}

.driver-controls-overlay {
position: fixed;
    top: calc(var(--header-height) + 10px);
    right: calc(50vw - 150px);
    z-index: 900;
    width: 350px;
    align-items: center;
    display: flex; gap: 12px;
}

.map-overlay-bottom {
    position: absolute; bottom: 30px; left: 15px; right: 15px; z-index: 1000;
    display: flex; flex-direction: column; gap: 12px;
}

.map-overlay-btn { position:fixed; top: 10px; right:10px; opacity:0.35 }

/* Ensure the card allows smooth expansion */
.trip-status-card {
    padding: 20px; 
    bottom: -3vh;
    max-height: 90vh;
    box-shadow: var(--shadow-floating); 
    margin-bottom: 0; 
    z-index: 7;
    transition: all 0.3s ease-in-out; /* Smooth height adjustment */
}

.trip-status-card.dashboard-chat-btn {
    top:-10px;
    left:0px;
}

/* Hide collapsible content by default using max-height */
.expandable-section,
.active-checklist {
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* Keep hidden while collapsed */
    margin-top: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease-in-out, 
                margin 0.3s ease;
}

/* State when expanded */
.trip-status-card.is-expanded .expandable-section,
.trip-status-card.is-expanded .active-checklist {
    max-height: 30vh; /* Use ~30% of the screen height, or a fixed value like 250px */
    opacity: 1;
    margin-top: 15px; 
    overflow-y: auto; /* NEW: Adds vertical scrollbar if content exceeds max-height */
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

/* Optional: Make the scrollbar look clean and modern */
.trip-status-card.is-expanded .active-checklist::-webkit-scrollbar {
    width: 6px;
}
.trip-status-card.is-expanded .active-checklist::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}
.trip-status-card.is-expanded .active-checklist::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}
.trip-status-card.is-expanded .active-checklist::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* The Expand Arrow Button */
.expand-arrow-btn {
    width: 80px;
    height: 20px;
    background-color: #f3f4f6; /* Light grey */
    border: 1px solid #4b5563; /* Dark grey border */
    color: #4b5563; /* Dark grey arrow text */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.2s;
    padding: 15px 0px 12px 0px;
    opacity: 0.6;
}

.expand-arrow-btn:hover {
    background-color: #e5e7eb;
}

/* Rotate arrow 180 degrees when expanded */
.trip-status-card.is-expanded .expand-arrow-btn {
    transform: rotate(180deg);
}

.driver-btn {
    color: rgb(34, 34, 34);
    padding: 4px 8px;
    border-radius: 6px;
    border-width: 0px;
    font-size: 0.9em;
    font-weight: bold;
    margin: 0px 0px 5px 5px;
}

.trip-popup-container {
    position: fixed;
    bottom: 80px; /* Above nav bars */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 9999;
    overflow: hidden;
    font-family: 'Quicksand', sans-serif;
}

.trip-popup-header {
    background: var(--bg-main, #266e70);
    color: white;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-close-popup {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.trip-popup-body {
    padding: 16px;
    font-size: 0.95rem;
}

.trip-popup-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

/* Simple Toggle Switch */
.switch-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 8px 12px;
    background: var(--bg-offset);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.switch-label input { display: none; }

.slider {
    position: relative;
    width: 34px;
    height: 18px;
    background-color: #ccc;
    border-radius: 34px;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(16px); }

#role-scope-modal { z-index: 8; }

/* Custom Map Click Popup Panel */
#custom-trip-popup-panel {
    position: absolute;
    top: 20px;
    right: 20px; /* Anchored to top right */
    z-index: 1000;
    border-radius: 12px;
    padding: 16px;
    width: 280px; 
    
    /* VERY IMPORTANT: Ensure buttons can be clicked! */
    pointer-events: auto; 
    
    /* Animation mechanics */
    opacity: 0;
    transform: translateX(120%); /* Start completely off-screen to the right */
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease-in-out;
}

#custom-trip-popup-panel.visible {
    opacity: 1;
    transform: translateX(0); /* Slide smoothly into position */
}

/* Close Button */
.popup-close-btn {
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: rgba(0,0,0,0.1); 
    border: none; 
    color: inherit; 
    cursor: pointer; 
    font-size: 1.4rem; 
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.popup-close-btn:hover {
    background: rgba(0,0,0,0.3);
}

/* Internal formatting shared with previous panels */
#custom-trip-popup-panel .manifest-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
}

#custom-trip-popup-panel .manifest-panel-route {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* =========================================
   Floating Maximise Button
   ========================================= */

.btn-maximise-floating {
    position: fixed;
    /* Positions it dynamically 20px above your bottom navigation */
    bottom: 26px; 
    right: 8px;
    z-index: 1050; /* High enough to float over map and other elements */
    width: 32px;
    height: 34px;
    /* Small, grey, semi-transparent background */
    background: rgba(100, 100, 100, 0.4);
    border: 2px solid rgba(0, 0, 0, 0.4);
    border-style: outset;
    border-radius: 8px;
    padding: 4px;
    cursor: pointer;
    
    display: flex;
    align-items: center;
    gap: 8px;
    
    /* Animation: Big to small quickly */
    animation: popInScale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom right;
}

.btn-maximise-floating:hover {
    background: rgba(100, 100, 100, 0.6);
}

/* Dark rectangle within the button around the writing */
.btn-maximise-text-wrapper {
    border-color: rgba(20, 25, 30, 0.85); /* Dark rectangle */
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.btn-maximise-icon {
    color: white;
    font-size: 26px;
    line-height: 26px;
    opacity: 0.9;
}

/* Big to small animation keyframes */
@keyframes popInScale {
    0% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/*---------------JOIN VIEW ----------------
 ------------ Requests -------------- */

 #requests-list {max-height: 400px; overflow-y: auto;}

 /* --- Main Row Layout --- */

.request-row {
    display: grid;
    grid-template-columns: 1fr auto; /* 1fr pushes info left, auto keeps actions minimal on the right */
    align-items: center;
    gap: 15px;
    border: 1px solid #e0e0e0;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #fafafa;
}

/* --- Left Column: Info --- */
.request-info .requester-name {
    font-size: 1.1em;
}

.request-info .requester-details {
    font-size: 0.9em;
    color: #555;
    margin-top: 4px;
}

/* --- Right Column: Actions --- */
.request-actions {
    display: grid;
    grid-template-columns: 1fr; /* Stacks children vertically */
    gap: 8px; /* Space between Approve and Decline */
    justify-items: stretch; /* Stretches the button to match the label's width if desired. Use 'center' if you want them independent */
}

.request-actions .approve-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* Keeps the checkbox and text centered above the button */
    gap: 5px;
    font-weight: bold;
    color: var(--primary-color);
}

.request-actions .btn-decline-req {
    border-color: #d32f2f;
    color: #d32f2f;
    width: 100%; /* Ensures it fills the grid cell neatly under the approve label */
}

/* =========================================
   Active Trip View Customizations
   ========================================= */

   
/* Square Close Button (50% Opacity 'X' & Border) */
.btn-close-square {
    display: inline-block;
    height: 30px;
    width: 30px;
    right: 5px;
    position: absolute;
    background: rgba(200, 200, 200, 0.1);
    top: 5px;
    border: 2px solid rgba(30, 41, 59, 0.3);
    color: rgba(30, 41, 59, 0.5);
    font-size: 1.4rem;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
    z-index: 20;
}

.btn-close-square:hover {
    background: rgba(30, 41, 59, 0.1);
    color: rgba(30, 41, 59, 0.9);
    border-color: rgba(30, 41, 59, 0.9);
}

/* Make Driver Controls flex to align the new close button horizontally */
.driver-controls-overlay {
    display: flex;
    gap: 12px;
    align-items: right;
}

/* Start/End Trip Buttons reduced by ~30% */
.btn-trip-sm {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    min-height: 38px !important;
}

#start-trip-btn {
    background-color:rgba(42, 129, 66, 0.6);
    user-select: none;
}

.btn-select-replay {
    background-color:rgba(43, 161, 77, 0.6);
}

/* Translucent Glassmorphism Card (50% Opacity Background) */
.translucent-card {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: relative; /* Needed to anchor the absolute close button */
}

/* Position the close button in the top right of the card */
.btn-close-card {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* Ensure the header text doesn't slide under the close button */
.translucent-card .trip-status-header {
    padding-right: 35px; 
}

/* Make the manifest button slightly smaller to match */
.btn-manifest-sm {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    width: auto;
}

/* Solid White Rounded Wrapper for the Progress List */
.member-progress-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    margin-top: 15px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03); /* Gives it slightly more depth */
}

/* ==========================================================================
   Auto-Assign Preview Modal & Interactive Exclusions
   ========================================================================== */

.auto-assign-modal-overlay {
    z-index: 2000;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.auto-assign-modal-content {
    max-width: 500px;
    width: 90%;
    background: var(--bg-app);
    border-radius: 12px;
    padding: 20px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
}

.auto-assign-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.auto-assign-modal-header h4 {
    margin: 0;
    color: var(--primary);
}

.auto-assign-modal-body {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px;
}

.auto-assign-modal-body h5 {
    margin-top: 0;
    margin-bottom: 12px;
}

.auto-assign-driver-card {
    background: var(--surface);
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

.auto-assign-driver-name {
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    color: var(--text-main);
}

.auto-assign-children-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Highly Intuitive Clickable Passenger Pills --- */
.auto-assign-child-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
}

.auto-assign-child-item:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    transform: translateY(-1px);
}

.auto-assign-child-status-icon::before {
    content: "✓";
    color: var(--success, #28a745);
    font-weight: bold;
}

/* --- Visually Clear Excluded State --- */
.auto-assign-child-item.is-excluded {
    opacity: 0.45;
    background: var(--border) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    text-decoration: line-through;
    color: var(--text-muted);
    transform: none;
}

.auto-assign-child-item.is-excluded .auto-assign-child-status-icon::before {
    content: "✕";
    color: var(--danger, #dc3545);
}

.auto-assign-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
    padding-top: 15px;
}

.auto-assign-modal-footer .btn {
    padding: 12px;
}

/* --- Manifest Board Layout --- */

.manifest-container { 
    display: flex; 
    gap: 20px; 
    align-items: stretch; /* CHANGED: Stretches children to fill height */
    height: 60vh;         /* ADDED: Gives the container a relative vertical height */
    min-height: 400px; 
    max-height: 800px;
}

/* --- Segmented Seat Indicator --- */

/* Ensures the segments take on the pulse colors defined by your variables */
.seat-segment.pulse-animation {
    background-color: rgb(var(--pulse-color));
}

/* Glowing green class for full cars */
.seat-segment.glow-green {
    background-color: #28a745;
    box-shadow: 0 0 6px #28a745, 0 0 10px rgba(40, 167, 69, 0.6);
}

/* 1. Highlight the selected passenger */
.child-token.selected {
    outline: none; /* Remove default outline */
    border: 2px solid #007bff !important;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
    transform: translateY(-2px); /* Slight lift effect */
    z-index: 10;
    transition: all 0.2s ease-in-out;
}

/* 2. Highlight the Target Area (The Pool or the Cars) */
.active-target-area {
    position: relative;
    background-color: rgba(0, 123, 255, 0.08) !important;
    /* Use border instead of outline to prevent clipping */
    border: 2px dashed #007bff !important;
    border-radius: 12px;
    /* Add padding so the content doesn't touch the dashed line */
    padding: 10px;
    margin: 5px 0;
    transition: background-color 0.3s ease;
    animation: target-pulse 2s infinite;
}

@keyframes target-pulse {
    0% { border-color: #007bff; }
    50% { border-color: #add8e6; }
    100% { border-color: #007bff; }
}

/* 4. Make empty seats "pop" inside an active area */
.active-target-area .seat-slot.empty {
    border: 1px solid #007bff;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.active-target-area .seat-slot.empty:hover {
    background-color: #eef6ff;
    border-color: #0056b3;
}

/* Left Side: Unassigned Children */
.unassigned-pool { 
    flex: 1; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    align-content: flex-start; 
    padding: 20px; 
    background: #f9f9f9; 
    border-radius: 8px; 
    border: 2px dashed #ccc; 
    overflow-y: auto;     /* ADDED: Allows internal scrolling */
}

/* Right Side: Driver Vehicles */
.drivers-pool { 
    flex: 2; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; 
    align-content: flex-start; /* Keeps grid items packed at the top */
    overflow-y: auto;          /* ADDED: Allows internal scrolling */
    padding-right: 10px;       /* ADDED: Prevents scrollbar from covering content */
}

.child-token {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.child-token:active { 
    cursor: grabbing; 
    transform: scale(1.1); 
}
.child-token svg, .child-token img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}
/* Center the child's name over the icon */
.child-token span {
    position: relative;
    z-index: 2;
    font-size: 0.65rem;
    font-weight: 700;
    color: #333;
    background: rgba(255, 255, 255, 0.85); /* Semi-transparent backing for legibility */
    padding: 2px 6px;
    border-radius: 12px;
    line-height: 1.2;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Optimistic UI Pending States */
.optimistic-pending {
    opacity: 0.55 !important;
    pointer-events: none !important;
    filter: grayscale(40%);
    border: 1px dashed #a0aec0 !important;
    animation: pulseTransform 1.5s infinite ease-in-out;
}

@keyframes pulseTransform {
    0% { transform: scale(1); }
    50% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* --- Car / Driver Container --- */
.car-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #eee;
}
.driver-header {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.driver-header svg, .driver-header img {
    position: absolute; 
    width: auto; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.15; /* Push the car icon to the background */
}
.driver-header span {
    position: relative; 
    z-index: 2; 
    font-weight: bold; 
    font-size: 1.2rem;
    color: #222;
}

/* --- Seat Slots (Dropzones) --- */
.seats-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.seat-slot {
    min-height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 15px;
    transition: background-color 0.3s ease, border 0.3s ease;
}
.seat-slot.empty {
    background-color: #f0f0f0; /* Light grey */
    border: 2px dashed #bbb;
}
.seat-slot.empty.drag-over {
    background-color: #e2e2e2;
    border-color: #888;
}
.seat-slot.assigned {
    background-color: #d4edda; /* Light green */
    border: 2px solid #28a745;
}
.seat-icon {
    width: 36px; 
    height: 36px; 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seat-icon svg { width: 100%; height: 100%; }
.empty-text {
    color: #777;
    font-size: 0.9rem;
    font-style: italic;
    user-select: none;
}

/* =========================================
   10. REWARDS & PROFILE
   ========================================= */

/* =========================================
   REWARD CELEBRATION BANNER
   ========================================= */

/* Base Banner Container */
.reward-announcement-banner {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px) scale(0.9);
    width: 90%;
    max-width: 420px;
    background: rgba(15, 23, 42, 0.95); /* Deep slate glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(16, 185, 129, 0.15); /* Soft emerald glow */
    color: #f8fafc;
    z-index: 2000000;
    opacity: 0;
    pointer-events: none; /* Let clicks pass through to the app */
    
    /* Springy entrance physics */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
}

/* Active Show State */
.reward-announcement-banner.show {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
}

/* Icon Circle */
.reward-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    font-size: 24px;
    background: linear-gradient(135deg, #10b981, #047857); /* Emerald gradient */
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(16, 185, 129, 0.4);
}

/* Content Wrapper */
.reward-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reward-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.reward-msg {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #cbd5e1; /* Soft gray-blue */
}

.reward-msg strong {
    color: #34d399; /* Bright green text highlights */
    font-weight: 600;
}

/* The +KM Badge */
.reward-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

/* =========================================
   TIER UPGRADE MODIFIER (Premium Gold)
   ========================================= */

.tier-up-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(251, 191, 36, 0.4); /* Gold border */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(251, 191, 36, 0.25);
    overflow: hidden;
}

/* Subtle animated shimmer effect over the gold banner */
.tier-up-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-20deg);
    animation: goldShimmer 3s infinite;
}

.tier-up-banner .reward-icon-circle {
    background: linear-gradient(135deg, #fbbf24, #d97706); /* Gold gradient */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(251, 191, 36, 0.5);
}

.tier-up-banner .reward-title {
    color: #fde68a; /* Soft gold text */
}

.tier-up-banner .reward-msg strong {
    color: #fbbf24;
}

.tier-up-banner .reward-badge {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

/* Highlight Text for the Tier Up Message */
.celebrate-text {
    display: block;
    margin-bottom: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulseGlow 2s infinite ease-in-out;
}

/* =========================================
   PARTICLE ANIMATIONS (Leaves/Stars)
   ========================================= */

.coin-particle {
    position: fixed; /* Keep fixed to float across viewport accurately */
    font-size: 24px; /* Size of the emoji */
    z-index: 10000;
    pointer-events: none;
    /* Smooth CSS transition matching the JS timing */
    transition: top 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                left 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s ease-in, 
                opacity 0.8s ease-in;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* =========================================
   KEYFRAMES
   ========================================= */

@keyframes goldShimmer {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; } /* Wait before repeating */
}

@keyframes pulseGlow {
    0%, 100% { text-shadow: 0 0 5px rgba(251, 191, 36, 0.4); }
    50% { text-shadow: 0 0 15px rgba(251, 191, 36, 0.8); }
}

.rewards-hero { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; padding: 32px 20px;}
.rewards-tier-badge { font-weight: 600; font-size: 1rem; background: rgba(255,255,255,0.2); display: inline-block; padding: 6px 16px; border-radius: 20px; backdrop-filter: blur(4px);}

.progress-bar-container { background: var(--border); border-radius: 12px; height: 16px; margin: 16px 0; overflow: hidden; }
.progress-bar-fill { background: var(--success); height: 100%; width: 0%; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

.profile-avatar {
    width: 90px; height: 90px; border-radius: 50%; background: var(--primary-light);
    color: var(--primary); display: flex; align-items: center; justify-content: center;
    font-size: 3rem; margin: 0 auto 20px auto; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* Animated Gauge CSS */
/* Animated Gauge CSS */
.gauge-wrapper {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 20px auto;
    overflow: hidden; /* This crops it to a perfect half-circle */
}

.gauge-background {
    position: absolute;
    top: 0; left: 0;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: #e5e7eb; /* Empty Gray Track */
}

.gauge-fill {
    position: absolute;
    top: 0; left: 0;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: conic-gradient(from 270deg, #ef4444 0deg, #eab308 90deg, #22c55e 180deg, transparent 180deg);
    transform-origin: center;
    transform: rotate(-180deg); /* Start completely hidden at the bottom */
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* NEW: The Needle */
.gauge-needle-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 200px; height: 200px;
    transform-origin: center;
    transform: rotate(-90deg); /* Start pointing all the way to the Left (0 points) */
    transition: transform 1.5s cubic-bezier(0.4, 0.5, 0.2, 1.2); /* Slight bounce effect */
    z-index: 10;
}

.gauge-needle {
    position: absolute;
    top: 15px; 
    left: 98px; /* Centered in the 200px box (200/2 - 4/2) */
    width: 4px;
    height: 85px; 
    background: #1e293b6e; /* Dark needle */
    border-radius: 4px;
}

.gauge-needle-pin {
    position: absolute;
    bottom: -8px; left: 92px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #212e428b;
    z-index: 11;
}

/* Fixed Center Text */
.gauge-center {
    position: absolute;
    bottom: 0; left: 30px;
    width: 140px; height: 70px;
    background: #ffffff; /* Explicitly White */
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
    z-index: 5;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Adds depth */
}

.rewards-points {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b !important; /* EXPLICITLY DARK COLOR */
    line-height: 1;
    margin: 0;
}

/* Leaderboard Interactive Styling */
.leaderboard-item {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.leaderboard-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Pop Forward and Fall Back Animation */
@keyframes popForwardFallback {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    70% { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.celebrate-text {
    display: inline-block; /* Required for CSS transform to work */
    font-size: 1.4rem;     /* Larger font */
    font-weight: bold;
    color: #ffd700;        /* Premium gold color */
    text-shadow: 0 4px 6px rgba(0,0,0,0.4); /* Makes it pop off the background */
    animation: popForwardFallback 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* =========================================
   Clapping Ovation Animation
   ========================================= */

.ovation-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 200px; /* Matches the height of the clap.png */
    z-index: 9999; /* Ensure it covers everything */
    pointer-events: none; /* Let the user click through it if needed */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
    
    /* Animation: Slide up, hold, slide down over 10 seconds */
    transform: translateY(100%);
    animation: ovationSlide 10s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.ovation-hand {
    width: 100px;
    height: auto;
    flex-shrink: 0;
    opacity: 0.5;
    
    /* Negative margin overlaps the hands so there are no awkward gaps */
    margin: 0 -25px; 
    
    /* Turns the PNG into a dark, dramatic silhouette */
    filter: brightness(0.15) contrast(1.2) drop-shadow(0 -4px 6px rgba(0,0,0,0.4));
    
    transform-origin: bottom center;
}

/* 10 Second Timeline Keyframes */
@keyframes ovationSlide {
    0%   { transform: translateY(100%); }       /* Start off-screen */
    5%   { transform: translateY(10px); }       /* Pop up quickly (0.5s) */
    92%  { transform: translateY(10px); }       /* Hold in place for 8.7s */
    100% { transform: translateY(100%); }       /* Drop down off-screen (0.8s) */
}

/* ----------- SPINNER ---------------- */

.modal-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it sits on top of modal content */
    
    /* For your fade effect */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevents clicking while invisible */
}

.modal-loading-overlay.active {
    opacity: 1;
    pointer-events: all; /* Blocks clicks to the modal below */
}

/* ================== TOAST =============== */

/* Toast Container - Top Right positioning */
#toast-container {
    position: fixed;
    top: 90px;
    right: 24px;
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Let clicks pass through the container so we don't block the UI */
    pointer-events: none; 
}

/* Premium Toast Styling */
.toast {
    /* Re-enable clicks on the toast itself so users can click to dismiss */
    pointer-events: auto; 
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px; /* Increased gap slightly to accommodate larger size */
    
    /* 1. TALLER: Increased padding for a chunkier, more robust feel */
    padding: 20px 24px; 
    min-width: 280px;
    max-width: 380px;
    
    /* 2. LARGER TEXT: Bumped up font size and weight */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    
    /* 3. HARDENED CORNERS: Reduced border-radius from 12px to 8px */
    border-radius: 8px; 
    
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    
    /* Smooth slide and fade animation */
    transform: translateX(120%); /* Start off-screen to the right */
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

/* Show State */
.toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* Icon Container */
.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Slightly increased size to match the taller toast */
    width: 32px; 
    height: 32px;
    flex-shrink: 0;
    
    /* 4. SQUARE WITH ROUND EDGES: Changed from 50% to 8px */
    border-radius: 8px; 
    
    /* Space inside the border so the SVG doesn't touch the edges */
    padding: 4px; 
}

/* Ensure SVG icons scale perfectly inside their container */
.toast-icon svg, 
.toast-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================================
   Dynamic Colors based on Toast Type 
   5 & 6. COLORED BACKGROUNDS & MATCHING DARK BORDERS
========================================================= */

/* Success */
.toast.toast-success {
    background: #dcfce7; /* Light green background */
    border: 2px solid #16a34a; /* Darker green border */
    color: #14532d; /* Darkest green for readable text */
}
.toast.toast-success .toast-icon { 
    color: #16a34a; 
    background: #9ec8ac; /* White background makes the icon pop */
    border: 2px solid #16a34a; /* Matching dark border */
}

/* Error */
.toast.toast-error {
    background: #fee2e2;
    border: 2px solid #dc2626;
    color: #7f1d1d;
}
.toast.toast-error .toast-icon { 
    color: #dc2626; 
    background: rgb(198, 138, 138); 
    border: 2px solid #dc2626; 
}

/* Info */
.toast.toast-info {
    background: #dbeafe;
    border: 2px solid #2563eb;
    color: #1e3a8a;
}
.toast.toast-info .toast-icon { 
    color: #2563eb; 
    background: #84a4cf; 
    border: 2px solid #2563eb; 
}

/* Warning */
.toast.toast-warning {
    background: #fef3c7;
    border: 2px solid #d97706;
    color: #78350f;
}
.toast.toast-warning .toast-icon { 
    color: #d97706; 
    background: #eed497; 
    border: 2px solid #d97706; 
}

/* =========================================
   NEW: Message Type Toast Styles 
   ========================================= */

/* Adjust alignment for the message type so the avatar sits correctly */
.toast-message {
    align-items: flex-end; /* Align avatar to bottom of the bubble */
    padding: 12px; 
    /* Optional: If you want the message toast to look purely like a floating chat 
       bubble without the white standard toast background, uncomment the next line */
     background: transparent; box-shadow: none; padding: 0; border:none;
}

.toast-avatar {
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.8em; 
    font-weight: bold; 
    flex-shrink: 0; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toast-message-col {
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    max-width: 85%;
}

.toast-sender-name {
    font-size: 0.75em; 
    color: var(--text-muted, #666666); 
    margin-bottom: 4px; 
    margin-left: 4px;
}

.toast-bubble {
    position: relative; 
    color: var(--text-main, #333333); 
    padding: 10px 14px; 
    border-radius: 16px; 
    border-bottom-left-radius: 4px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 
    word-wrap: break-word;
    font-size: 0.9em;
}

.toast-text-content {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    font-family: inherit;
    flex-grow: 1;
}
/* =========================================
   15. SCHEDULE CALENDAR
   ========================================= */
.calendar-grid {
    display: grid;
    /* CRITICAL FIX: minmax(0, 1fr) prevents columns from stretching beyond screen width */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    box-shadow: var(--shadow-soft);
    width: 100%;
    box-sizing: border-box;
}

.cal-day-header {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.cal-cell {
    border-radius: 8px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
    border: 1px solid transparent;
    min-height: 90px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer; /* Added: Cells are now clickable for day details */
    transition: background-color 0.1s;
}

.cal-cell:active {
    background-color: var(--border); /* Visual feedback when clicking a day */
}

.cal-cell.empty {
    background: transparent;
    cursor: default;
}

.cal-cell.empty:active {
    background: transparent;
}

.cal-cell.today {
    border-color: var(--primary);
    background: var(--primary-light);
}

.cal-date {
    align-self: flex-end; /* Moved to top right */
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

/* Replaced .cal-events-container */
.cal-strips-top {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1; /* Pushes empty space to the bottom */
}

/* Replaced .cal-event */
.cal-event-strip {
    width: 100%;
    height: 14px;
    line-height: 14px;
    margin-bottom: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    
    /* Truncation rules for long event names */
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 0 2px;
    box-sizing: border-box;
    transition: filter 0.1s;
}

/* If you are clicking directly on a trip strip in the day modal or grid */
.cal-event-strip:active {
    filter: brightness(0.85);
}

/* =========================================
   15a. SCHEDULE MODALS & POPUPS
   ========================================= */

   /* =========================================
   15b. SCHEDULE VIEW LAYOUT & MODALS
   ========================================= */

/* Modals */
/* Modals Container */
#schedule-popup-modal {
    align-items: flex-end; 
    padding-bottom: env(safe-area-inset-bottom); 
    z-index: 9999;
    /* Ensure padding for side edges if desired, or set to 0 for edge-to-edge */
    padding-left: 0;
    padding-right: 0;
}

.card .trip-card {
    position: relative;
    margin-bottom: 20px;
    border-radius: 12px;
    border-top: 5px solid #266f77;
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.08);
    background-color: #ffffff;
    padding: 20px;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Modal Content (The sliding drawer) */
#schedule-popup-modal .modal-content {
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    padding: 24px 20px;
    min-height: 95vh;
    width: 100%;
    margin: 0; /* Ensure it sits flush at the bottom */
}

/* =========================================
   OPENING ANIMATIONS
   ========================================= */
@keyframes popupFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popupSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Trigger animations automatically when 'hidden' is removed */
#schedule-popup-modal:not(.hidden) {
    animation: popupFadeIn 0.6s ease-out forwards;
}

#schedule-popup-modal:not(.hidden) .modal-content {
    /* Uses a cubic-bezier for a smooth, native-feeling deceleration */
    animation: popupSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* =========================================
   CLOSING ANIMATIONS (Optional but recommended)
   ========================================= */
@keyframes popupFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes popupSlideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

#schedule-popup-modal.closing {
    animation: popupFadeOut 0.3s ease forwards;
}

#schedule-popup-modal.closing .modal-content {
    animation: popupSlideDown 0.3s ease forwards;
}

#day-detail-modal {
    align-items: center; 
    justify-content: center; 
    z-index: 9998;
}
#day-detail-modal .modal-content {
    padding: 24px 20px; 
    width: 90%; 
    max-width: 400px; 
    border-radius: 10px;
}

.modal-header-spaced {
    margin-bottom: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
.modal-header-spaced h3 {
    margin: 0;
}

#day-detail-body {
    display: flex; 
    flex-direction: column; 
    gap: 10px;
}
.day-detail-empty {
    color: var(--text-muted); 
    text-align: center; 
    margin: 15px 0;
}
.day-detail-icon {
    font-size: 1.1rem; 
    line-height: 1;
}
.day-detail-text {
    font-weight: 500;
}

/* Filters & Navigation */
.schedule-filters-flex {
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap;
}
.schedule-filter-select {
    flex: 1; 
    min-width: 150px;
}

.calendar-header-flex {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px;
}
.cal-nav-btn {
    width: 45px; 
    min-height: 45px; 
    padding: 0;
}
.calendar-header-title {
    margin: 0; 
    font-size: 1.2rem;
}

/* Calendar Grid Elements */
.cal-event-spacer {
    height: 18px; 
    margin-bottom: 2px;
}

.cursor-pointer {
    cursor: pointer;
}

/* Day detail list items inside the new popup */
.day-detail-item {
    padding: 12px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.1s;
}

.day-detail-item[style*="cursor: pointer"]:active {
    transform: scale(0.98);
}


/* =========================================
   11. ADMIN DASHBOARD & MISC (Retained)
   ========================================= */

.compass-wrapper {
    position: fixed;
    bottom: 10px;
    left: 7px;
    z-index: 6;
    display: flex;
    align-items: center;
    
    width: 90px;
    height: 90px;
      
    /* Flexbox centers the text div over the images */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Optional: add a subtle drop shadow to make it attractive */
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
}

.compass-outer,
.compass-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Prevents the user from accidentally dragging the images */
    user-select: none;
    pointer-events: none; 
}

.compass-outer {
    z-index: 1;
}

.compass-inner {
    z-index: 2;
    /* Adds a smooth animation when the driver's bearing changes */
    transition: transform 0.3s ease-out; 
}

.compass-text {
    position: relative;
    z-index: 3; /* Ensures text is always on top */
    
    /* Requested Text Styling */
    color: rgb(156, 7, 2);
    font-weight: bold;
    font-size: 20px;
    font-family: sans-serif;
    
    /* Optional: Adding a slight white text-shadow helps readability over complex compass dials */
    text-shadow: 1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white;
}

.sos-button-wrapper {
    position: fixed; top: 13px; right: 10px; z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Main SOS button */
.sos-action-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 70px;
    height: 40px;
    padding: 0 7px;

    border: none;
    border-radius: 999px;

    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 12px;

    background: linear-gradient(135deg, #ef4444, #b91c1c);
    box-shadow:
        0 5px 15px rgba(185, 28, 28, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    cursor: pointer;
    user-select: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.2s ease,
        opacity 0.2s ease;
}

.sos-action-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 22px rgba(185, 28, 28, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.sos-action-button:active {
    transform: translateY(1px) scale(0.98);
}

.sos-action-button:focus-visible {
    outline: 3px solid rgba(239, 68, 68, 0.35);
    outline-offset: 3px;
}

.sos-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);

    font-size: 12px;
    line-height: 0.8;
}

.sos-button-text {
    line-height: 0.8;
}

/* Active SOS state */
.sos-action-button.sos-active {
    background: linear-gradient(135deg, #dc2626, #7f1d1d);
    animation: sosButtonPulse 1.1s infinite;
}

.sos-action-button.sos-active::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid rgba(239, 68, 68, 0.55);
    animation: sosRingPulse 1.1s infinite;
}

.sos-action-button:disabled {
    cursor: default;
    opacity: 0.9;
}

/* Cancel button */
.sos-cancel-btn {
    height: 34px;
    padding: 0 12px;

    border: 1px solid rgba(185, 28, 28, 0.25);
    border-radius: 999px;

    color: #991b1b;
    background: #fff1f2;

    font-weight: 700;
    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease,
        opacity 0.15s ease;
}

.sos-cancel-btn:hover {
    background: #ffe4e6;
}

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

.sos-cancel-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.hidden {
    display: none !important;
}

@keyframes sosButtonPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

@keyframes sosRingPulse {
    0% {
        transform: scale(0.96);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

.admin-tabs { 
    display: flex; 
    flex-wrap: wrap; /* Allows the buttons to wrap to new lines */
    gap: 8px; 
    margin-bottom: 20px; 
    
    /* Removed overflow-x: auto and scrollbar-width: none 
       since we want wrapping, not scrolling! */
}

.admin-tab-btn { 
    flex-grow: 1; /* Tells the buttons to stretch and evenly fill the row */
    text-align: center; /* Ensures the text stays centered when the button stretches */
    
    /* Your existing button styles */
    background: var(--surface); 
    border: 2px solid var(--border); 
    color: var(--text-muted); 
    padding: 8px 16px; 
    border-radius: 20px; 
    font-weight: 600; 
    font-size: 0.9rem; 
    cursor: pointer; 
    white-space: nowrap; 
    transition: all 0.2s ease; 
}
/* Container - Handles the scrolling */
.admin-table-container { 
    background: var(--surface); 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-soft); 
    border: 1px solid var(--border); 
    overflow-x: auto; /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Enables smooth, momentum-based scrolling on iOS */
    margin-bottom: 20px; 
}

/* Table - Enforces the minimum size */
.admin-table { 
    width: 100%; 
    border-collapse: collapse; 
    min-width: 600px; /* Prevents columns from squishing; triggers the container scroll instead */
}

/* Base Cells - Standard desktop spacing */
.admin-table th, 
.admin-table td { 
    padding: 14px 20px; 
    text-align: left; 
    border-bottom: 1px solid var(--border); 
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .admin-table th, 
    .admin-table td { 
        padding: 10px 12px; /* Reduces padding to fit more data on screen at once */
        font-size: 0.9rem; /* Slightly smaller text for narrower screens */
    }
}

/* Desktop Queries retained */
@media (min-width: 768px) {
    .app-main-content { max-width: 600px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); box-shadow: var(--shadow-floating); background: var(--surface); }
    .app-main-content:has(#view-admin:not(.hidden)) { max-width: 1100px; }
    .btn { width: auto; min-width: 100px; display: inline-flex; margin-left: auto; margin-right: auto; }
}

/* =========================================
   12. ADMIN DASHBOARD SPECIFICS
   ========================================= */
.admin-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.admin-header h2 { margin: 0; font-size: 1.6rem; }

.admin-alert-panel {
    max-height: 25vh; overflow-y: scroll;
    background: var(--warning-bg); border: 1px solid var(--secondary);
    border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px;
    box-shadow: var(--shadow-floating);
}
.admin-alert-title { color: var(--danger); margin: 0 0 12px 0; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }

.admin-map-card {
    padding: 0; overflow: hidden; height: 66vh; display: flex; flex-direction: column;
    border-radius: var(--radius-md); box-shadow: var(--shadow-soft); background: var(--surface);
    border: 1px solid var(--border); margin-bottom: 20px;
}
.admin-map-header {
    padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem;
}
.status-indicator-live { font-size: 0.85rem; color: var(--success); font-weight: 600; display: flex; align-items: center; gap: 6px; }
/* --- COMPACT ADMIN SEARCH CARD --- */
.admin-search-card { 
    padding: 12px 16px; /* Reduced from 20px */
    margin-bottom: 16px; /* Reduced from 24px */
    background: var(--surface); 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-soft); 
    border: 1px solid var(--border); 
}

/* Toggle Switch Styles */
.admin-search-toggle-container { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; font-weight: bold; color: var(--text-main); }
.admin-search-toggle-switch { position: relative; display: inline-block; width: 36px; height: 18px; }
.admin-search-toggle-switch input { opacity: 0; width: 0; height: 0; }
.admin-search-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--primary); transition: .3s; border-radius: 18px; }
.admin-search-toggle-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
.admin-search-toggle-switch input:checked + .admin-search-toggle-slider { background-color: #e65100; /* Distinct color for proximity */ }
.admin-search-toggle-switch input:checked + .admin-search-toggle-slider:before { transform: translateX(18px); }

/* 60% Dimension Compact Inputs/Selects */
.admin-compact-select { 
    font-size: 0.75rem !important; 
    padding: 2px 6px !important; 
    height: 24px !important; 
    line-height: 1 !important; 
    border-radius: 4px; 
    border: 1px solid var(--border); 
    width: 100%; 
}
.admin-compact-input { 
    font-size: 0.8rem !important; 
    padding: 4px 8px !important; 
    height: 30px !important; 
    border-radius: 4px; 
    border: 1px solid var(--border); 
    width: 100%; 
}

.admin-list-footer { 
    margin-top: 8px; /* Reduced from 16px */
    padding-top: 8px; /* Reduced from 16px */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-top: 1px solid var(--border); 
}
.pagination-controls { 
    display: flex; 
    gap: 8px; /* Tighter gap */
    align-items: center; 
}
.pagination-info { 
    font-weight: 700; 
    font-size: 0.85rem; /* Smaller text */
    color: var(--primary-dark); 
}
.admin-footer-btn {
    font-size: 0.75rem !important;
    padding: 2px 8px !important;
    height: 26px !important; /* Forces a very short button */
}

.admin-bulk-import { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--primary-light); padding: 24px; border-radius: var(--radius-md); margin-bottom: 24px; border: 1px solid rgba(38, 110, 119, 0.1);}
.admin-holiday-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* =========================================
   13. MODALS & OVERLAYS
   ========================================= */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(54, 69, 92, 0.418); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px;
    opacity: 1; transition: opacity 0.3s ease;
}
.modal-overlay.hidden { display: none !important; opacity: 0; }

.modal-content {
    background: var(--surface); width: 100%; max-width: 450px; border-radius: var(--radius-lg);
    padding: 32px; box-shadow: var(--shadow-floating); max-height: 90vh; display: flex;
    flex-direction: column; animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); position:fixed; top: 68px;
}
.modal-content-wide { max-width: 800px; }

@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.modal-header h3 { margin: 0; font-size: 1.4rem; display: flex; align-items: center; gap: 8px;}
.modal-close-btn { background: none; border: none; font-size: 2rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0; transition: color 0.2s; right: 20px;
    top: 10px;
    position: absolute; }
.modal-close-btn:hover { color: var(--danger); }

.modal-body { overflow-y: auto; flex: 1; padding-right: 5px; }
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.modal-actions { display: flex; gap: 0.5em; margin-top: 24px; justify-content: flex-end; }
.modal-actions-col { flex-direction: column; }
.modal-actions .btn { flex: 1; min-width:80px }

.replay-controls-wrapper { display: flex; align-items: center; gap: 16px; background: var(--bg-app); padding: 16px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.replay-time-display { font-family: monospace; font-size: 1rem; font-weight: 700; color: var(--primary-dark); min-width: 85px; text-align: right; }


/* Add Child - Mobile-first bottom sheet modal */
.child-selector-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.child-selector-overlay.active {
    display: block;
    opacity: 1;
}

.child-selector-modal {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    max-height: 85vh;
    background: var(--bg-surface, #ffffff);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: bottom 0.3s cubic-bezier(0.1, 0.8, 0.2, 1);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
}

.child-selector-overlay.active .child-selector-modal {
    bottom: 0;
}

.modal-scroll-area {
    overflow-y: auto;
    flex-grow: 1;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* =========================================================
   Admin Manage Trip Modal - Styles
   ========================================================= */

/* Modal Container override for a sharper look */
.admin-trip-modal {
    max-width: 680px; /* Slightly wider for data tables */
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    padding: 0; /* Removes default padding so header sits flush */
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Header Area */
.admin-header {
    background-color: #ffffff;
    padding: 24px 24px 20px 24px;
    border-bottom: 1px solid var(--border-color, #eaeaea);
}

/* KPI Grid & Cards */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.kpi-card {
    padding: 16px 12px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 6px 0;
    line-height: 1;
}

/* KPI States (Soft backgrounds, crisp text) */
.kpi-success { 
    background: #f4fdf8; 
    border-color: #d1f3e0; 
    color: #0d8246; 
}
.kpi-warning { 
    background: #fffcf5; 
    border-color: #fce8b2; 
    color: #b06000; 
}
.kpi-critical { 
    background: #fff5f5; 
    border-color: #fcd6d6; 
    color: #c92a2a; 
}

/* Navigation Tabs */
.admin-tabs {
    display: flex;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color, #eaeaea);
    padding: 0 16px;
}

.admin-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.admin-tab-btn:hover {
    color: var(--primary);
    background: #f0f4f8;
}

.admin-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: #ffffff;
}

/* Content Area */
.admin-tab-content {
    padding: 24px;
    background: #ffffff;
    max-height: 70vh;
    overflow-y: auto;
    color:#222;
}

.admin-tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.admin-tab-pane.active {
    display: block;
}

/* Slim, Professional Alerts */
.admin-alert-banner {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid transparent;
}

.admin-alert-banner.alert-danger {
    background-color: #fff0f0;
    color: #c92a2a;
    border-left-color: #e03131;
}

/* Sharp Table Formatting inside Modal */
.admin-tab-pane .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.admin-tab-pane .table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-color, #eaeaea);
    color: #495057;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-tab-pane .table td {
    padding: 12px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.admin-tab-pane .table tbody tr:hover {
    background-color: #f8f9fa;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Admin Info Cards (Replaces the inline gray backgrounds) */
.admin-info-card {
    background: #f8f9fa;
    border: 1px solid var(--border-color, #eaeaea);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.admin-info-card h5 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--primary);
}
.admin-info-card p {
    margin: 4px 0;
    font-size: 0.95rem;
    font-weight:200;
}

/* Admin Action Button Layout */
.admin-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.admin-actions .action-primary { flex: 2; }
.admin-actions .action-secondary { flex: 1; }

/* Admin Header Typography Helpers */
.admin-header-title { display: flex; justify-content: space-between; align-items: flex-start; }
.trip-title { margin: 0; color: var(--primary); }
.kpi-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; }
.kpi-subtext { font-size: 0.75rem; color: #868e96; }
/* =========================================
   14. BOTTOM NAVIGATION
   ========================================= */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); display: flex;
    justify-content: space-around; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    z-index: 1000; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(0,0,0,0.05);
}

/* Hide the nav when the parent container has the toggle class */
.app-main-content.no-bottom-nav .bottom-nav {
    display: none !important;
}

.no-bottom-nav {
    padding-bottom: 0 !important; /* Overrides the height reserved for the nav */
}

.nav-item {
    background: transparent; border: none; display: flex; flex-direction: column;
    align-items: center; gap: 4px; color: var(--text-muted); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); padding: 8px 12px; flex: 1;
}
.nav-item.active { color: var(--primary); }
.nav-item.active .nav-icon { transform: translateY(-3px) scale(1.1); }
.nav-icon { height: 26px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.nav-item.active .ui-icon { fill: var(--primary); }