:root {
    --namcor-bg: #111;
    --namcor-accent: #008080;
    --namcor-radius: 7px; /* Your requested low curve */
}

/* --- UPDATED TYPOGRAPHY TO MATCH MANAGER.CSS --- */

/* 1. Remove the old Trench/NeueHaas font-face if it exists */

/* 2. Apply the Manager App Font Stack */
body, html, button, input, select, textarea, .modal-content * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em !important; /* Matches the clean Manager look */
}





/* 4. Optimization for Driver Readability */
.analytics-card, .receipt-modal {
    font-weight: 600; /* Slightly bolder for better contrast against vibrations */
}

#modal-total {
    
    font-weight: 800; /* Make the money pop */
    letter-spacing: -0.05em;
}

/* Apply to all modal and login elements */
.nova-modal-content, 
.login-box, 
.menu-btn, 
.nova-btn-rect, 
input {
    border-radius: var(--namcor-radius) !important;
}

/* RESET & BASE */
* { box-sizing: border-box; user-select: none; -webkit-font-smoothing: antialiased; }
body { 
    margin: 0; 
   /* Update your CSS variables or body tag */
/* Replace Inter with Quicksand */
/* Swap these out to test */
        
        /* font-family: 'Baloo 2', sans-serif; */
        /* font-family: 'Dosis', sans-serif; */
    -webkit-font-smoothing: antialiased; /* Makes the roundness look crisper */
    overflow: hidden; 
    background: #F4F4F4; /* Tesla ambient background */
    touch-action: manipulation;
}



.nova-logo-img {
    width: 100px;      /* Adjust this width to fit your logo's design */
    height: auto;      /* Maintains aspect ratio */
    display: block;
    margin: 0 auto 10px auto; /* Centers the logo and adds space below */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.2)); /* Optional: adds depth */
}

/* Ensure the sub-header (DRIVER) stays aligned under the image */
.driver-sub {
    margin-top: 0;

    letter-spacing: 4px;
    text-align: center;
}


#login-id, #login-pin {
    transition: all 0.2s ease;
    cursor: pointer;
}

#login-id:focus, #login-pin:focus {
    outline: none;
}

/* Style for the active field being controlled by the numpad */
.input-active {
    border: 2px solid #008080 !important;
    background-color: #f0f4ff !important;
}


.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
	overflow: hidden;
}


/* Left Panel (Dashboard/Settings) */
.left-panel {
    width: 500px; /* Use a fixed pixel width for smooth sliding */
    flex-shrink: 0;
    height: 100%;
    background: #000;
    position: relative;
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    border-right: 1px solid #222;
    overflow: visible; /* CRITICAL: Allows the tab to stick out */
    display: flex;
    flex-direction: column;
}

/* Collapsed State */
.left-panel.collapsed {
    margin-left: -500px; /* Matches the width exactly */
}
.panel-toggle-tab {
    position: absolute;
    right: -25px; /* Floats outside the 400px width */
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 60px;
    background: #111;
    border: 1px solid #333;
    border-left: none;
    border-radius: 0 7px 7px 0; /* Your 7px radius */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #008080;
    box-shadow: 4px 0 8px rgba(0,0,0,0.5);
    z-index: 1001;
}

/* BOTTOM MENU - ICON TRAY STYLE */
.bottom-menu { 
    display: flex; 
    background: #FFF; 
    border-top: 1px solid #EEE; 
    padding: 0; 
    gap: 0; 
    width: 100%; /* Ensure it fills the 40% panel exactly */
    flex-shrink: 0; /* Prevents the menu tray itself from squishing vertically */
}

.menu-btn { 
    flex: 1; 
    min-width: 0; 
    padding: 20px 0; /* Vertical padding for a taller touch area */
    border: none; 
    background: #F5F5F5; 
    border-radius: 0 !important; /* Namcor 2px standard */
    font-size: 18px; /* Increased for icon visibility */
    cursor: pointer; 
    color: #666; 
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-btn i {
    transition: transform 0.2s ease;
}

.menu-btn:hover i {
    transform: translateY(-2px);
}

.menu-btn.active { 
    background: #000; 
    color: #008080; /* Tesla Blue highlight */
}

.menu-btn.logout { 
    background: #FFF; 
    color: #E82127; 
    border-left: 1px solid #EEE; 
}

/* Right Panel (GPS) */
.right-panel {
    flex: 1; /* FORCES GPS TO FILL REMAINING SPACE */
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* LOGIN SCREEN - TESLA PIN-TO-DRIVE STYLE */
/* --- CENTERED & FLOATING LOGIN --- */
.login-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: white;/* Subtle dimming to make the box 'pop' */
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* Logic for hiding the overlay */
.login-overlay.hidden { 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-box { 
     background: rgba(255, 255, 255, 1); 
    padding: 40px;
    width: 460px; /* Smaller, device-like footprint */
    text-align: center; 
    color: #111; 
    border-radius: 7px; /* Namcor Standard */
}

.chart-container {
    margin-top: 15px;
    /* Optional: subtle fade in animation when the app loads */
    animation: fadeIn 0.8s ease-out;
}

#profitYieldChart {
    /* Ensures the canvas doesn't look blurry on high-res mobile screens */
    width: 100% !important;
    height: 100% !important;
}

.nova-logo {
    font-size: 56px; /* Slightly scaled down for the smaller box */
    font-weight: 800; 
    margin: 0;
    color: #a1a1a1; 
    letter-spacing: -3px;
}

.driver-sub { 
    font-weight: 700; 
    letter-spacing: 6px; 
    margin-top: -5px; 
    color: #AAA; 
    font-size: 10px; 
    text-transform: uppercase;
    margin-bottom: 30px;
}

/* NUMPAD - PIN INPUT */
.pin-grid input { 
    background: #F7F7F7; 
    border: 1px solid #EEE; 
    padding: 15px; 
    width: 100%; 
    font-size: 28px; 
    text-align: center; 
    color: #000; 
    border-radius: 7px; 
    margin-bottom: 20px;
    letter-spacing: 12px; 
    font-weight: 600;
}

.numpad { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 12px; 
    width: 100%; 
}

.numpad button {
    background: #FFF; 
    border: 1px solid #EEE; 
    color: #111; 
    padding: 20px;
    font-size: 20px; 
    border-radius: 7px; 
    cursor: pointer; 
    transition: background 0.1s, transform 0.1s;
    font-weight: 600;
}

.numpad button:active { 
    background: #F0F0F0; 
    transform: scale(0.95); 
}

.numpad .go { background: #008080; border-color: #008080; color: #FFF; }
.numpad .clear { background: #E82127; border-color: #E82127; color: #FFF; }
/* LEFT PANEL CONTENT */
.top-nav { 
    padding: 25px; background: #FFF; border-bottom: 1px solid #F0F0F0; 
    display: flex; justify-content: space-between; align-items: center; 
}
.logo-small { font-weight: 800; letter-spacing: 1px; color: #000; text-transform: uppercase; }
.connection-status { font-size: 10px; font-weight: 900; color: #E82127; text-transform: uppercase; }
.connection-status.online { color: #28A745; }

.content-scroll { flex: 1; overflow-y: auto; padding: 10px; background: #FFF; }
.view-section { display: none; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* STATS & DASHBOARD */
.stats-ticker { display: flex; gap: 12px; margin-bottom: 25px; }
.stat-card { 
    background: #F9F9F9; flex: 1; padding: 18px; border-radius: 7px; 
    border: 1px solid #EEE; text-align: left; 
}
.stat-card label { display: block; font-size: 9px; color: #888; text-transform: uppercase; font-weight: 800; margin-bottom: 4px; }
.stat-card span { font-size: 20px; font-weight: 700; color: #000; }

/* ORDER & JOB CARDS */
.order-card {
    background: #FFF; border: 1px solid #EEE; border-radius: 7px; padding: 20px;
    margin-bottom: 12px; cursor: pointer; border-left: 4px solid #008080; transition: 0.2s;
}
.order-card:hover { border-color: #DDD; box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.order-header { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 6px; color: #000; }
.order-route { font-size: 13px; color: #666; font-weight: 500; }
.order-price { font-size: 18px; color: #008080; font-weight: 800; }

.job-card {
    background: #F9F9F9; padding: 20px; border-radius: 7px; border-left: 5px solid #008080;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* SETTINGS UI */
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid #F0F0F0; }
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #E0E0E0; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #008080; }
input:checked + .slider:before { transform: translateX(20px); }



.modal-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #999; font-weight: 800; }
.modal-body { font-size: 28px; font-weight: 600; margin-bottom: 25px; color: #000; }
.pin-display { font-size: 48px; letter-spacing: 12px; color: #008080; font-weight: 800; margin: 30px 0; }

.btn-modal { flex: 1; padding: 20px; border: 1px solid #EEE; border-radius: 7px; font-weight: 700; cursor: pointer; text-transform: uppercase; font-size: 12px; }
.btn-primary { background: #000; color: #fff; border: none; }
.btn-secondary { background: #F5F5F5; color: #000; border: none; }

/* ANALYTICS & LEDGERS */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.stat-row { background: #F9F9F9; padding: 20px; border-radius: 7px; border: 1px solid #EEE; display: flex; flex-direction: column; }
.status-badge { display: inline-block; padding: 6px 12px; border-radius: 7px; font-size: 11px; font-weight: 800; color: white; text-transform: uppercase; }
.phase-PICKUP { background: #FFC107; color: #000; }
.phase-DROPOFF { background: #28A745; }

.tx-row { display: flex; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #F7F7F7; font-size: 14px; font-weight: 500; }
.tx-amount { font-weight: 700; color: #28A745; }

/* NAMCOR CUSTOM ELEMENTS */
.tesla-clock {  sans-serif; font-size: 20px; font-weight: 600; color: #000; background: #F5F5F5; padding: 6px 15px; border-radius: 7px; }
.greeting-text { font-size: 10px; letter-spacing: 2px; color: #AAA; font-weight: 800; text-transform: uppercase; }

/* GPS MARKERS */
.pulse-marker-driver { border-radius: 50% !important; background: #008080; border: 3px solid #FFF; box-shadow: 0 0 15px rgba(62, 106, 225, 0.5); }
.pulse-marker-dest { border-radius: 50% !important; background: #E82127; border: 3px solid #FFF; box-shadow: 0 0 15px rgba(232, 33, 39, 0.5); }

/* Ensure the setting row handles the flex layout for the custom select */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #F0F0F0;
}

.setting-row span {
    font-size: 14px;
    font-weight: 500;
    color: #111;
}

/* Custom Select Wrapper constrained for the row */
.tesla-select-wrapper {
    position: relative;
    width: 140px; /* Thinner for the settings row */
    user-select: none;
}

/* Hidden Logic remains the same */
.tesla-select-checkbox { display: none; }

.tesla-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F7F7F7;
    padding: 8px 12px;
    border: 1px solid #EEE;
    border-radius: 7px; /* Namcor Standard */
    font-size: 13px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
}

.tesla-select-trigger:hover { background: #FFF; border-color: #008080; }

/* The Overlay */
.tesla-select-options {
    position: absolute;
    top: calc(100% + 5px);
    right: 0; /* Align to the right edge of the row */
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #EEE;
    border-radius: 7px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 9999;
}

.tesla-select-checkbox:checked ~ .tesla-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tesla-select-options li {
    padding: 12px 15px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    text-align: right;
}

.tesla-select-options li:hover {
    background: #F5F5F5;
    color: #008080;
}

.tesla-chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid #008080;
    border-bottom: 2px solid #008080;
    transform: rotate(45deg);
    margin-left: 10px;
    margin-bottom: 2px;
}

/* VIEW SECTION BASE */
#view-dashboard {
    background-color: #FFFFFF;
    color: #111;
    padding: 40px 30px; /* Balanced padding for a side panel */
    height: 100%;
    overflow-y: auto;
}

/* Limit content width so it doesn't stretch awkwardly */
.dash-content-container {
    max-width: 480px; 
    margin: 0 auto;
}

/* HEADER: Compact for side-panel */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.greeting-text {
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: #A1A1A1;
    text-transform: uppercase;
}

.tesla-text {
    font-size: 28px;
    font-weight: 600;
    margin: 2px 0 0 0;
    letter-spacing: -0.5px;
	color: #a1a1a1;
}

.tesla-clock {
    font-size: 16px;
    font-weight: 700;
    color: #008080; /* Signature Blue Clock */
    background: #F4F4F4;
    padding: 4px 10px;
    border-radius: 7px; /* Namcor Standard */
}

/* CORE POD: Stacked or tight-wrap for narrow panels */
.tesla-core-pod {
    display: flex;
    flex-direction: column; /* Stacked is cleaner for side panels */
    gap: 25px;
    margin-bottom: 40px;
    align-items: center;
}

/* SPEED GAUGE: Scaled down to fit */
.circular-gauge {
    width: 160px;
    height: 160px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circular-gauge::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #EEE;
    border-top: 2px solid #008080;
}

.gauge-value {
    font-size: 52px;
    font-weight: 600;
}

/* ACTIVE MANIFEST: Centered and clean */
.active-manifest-glass {
    width: 100%;
    text-align: center;
    border-top: 1px solid #F0F0F0;
    padding-top: 25px;
}

.glass-label {
    font-size: 11px;
    font-weight: 800;
    color: #008080;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

#dash-job-id {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

#dash-job-target {
    font-size: 14px;
    color: #888;
    margin: 8px 0 15px 0;
}

/* STATS GRID: 2x2 Layout (Much better for 40% width panels) */
.tesla-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px; /* Creates the separator lines */
    background-color: #F0F0F0; /* Line color */
    border: 1px solid #F0F0F0;
}

.tesla-pill {
    background: #FFF; /* Blocks out the background to show lines */
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
}

.pill-icon { color: #008080; }

.pill-content label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    color: #A1A1A1;
    margin-bottom: 2px;
}

.pill-content span {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

/* VIEW SECTION BASE */
/* --- View Section Header Fixes --- */
#view-analytics h2 {
    color: #1d1d1f !important; /* Manager Dark Text */
    font-weight: 700 !important;
}

/* --- The Modern Chart Container --- */
.chart-container {
    background: #ffffff !important;
    border: 1px solid #f2f2f7 !important;
    border-radius: 12px !important; /* Softer corners for the main pod */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.chart-container label {
    color: #86868b !important; /* Apple-style dim text */
    font-weight: 800;
}

/* --- Rate Items (The 3-Column Row) --- */
.rate-item-modern {
    flex: 1;
    background: #f5f5f7;
    padding: 12px 5px;
    border-radius: 7px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rate-item-modern label {
    font-size: 9px;
    font-weight: 800;
    color: #86868b;
    letter-spacing: 0.5px;
}

.rate-item-modern span {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
}

/* --- Stat Cards (The 2x2 Grid) --- */
.stat-card-tech {
    background: #ffffff !important;
    border: 1px solid #f2f2f7 !important;
    border-radius: 7px !important;
    padding: 15px !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: transform 0.2s ease;
}

.stat-card-tech:active {
    transform: scale(0.98);
}

.stat-card-tech label {
    font-size: 9px;
    font-weight: 800;
    color: #86868b !important;
    letter-spacing: 0.5px;
}

.stat-card-tech span {
    font-size: 18px;
    font-weight: 800;
    color: #1d1d1f !important;
}

/* Special Case: Net Earnings Color */
#an-net {
    color: #008080 !important; /* Keep Teal for profit */
}

/* --- Recent Manifests Ledger --- */
.ledger-container {
    margin-top: 20px;
    background: #ffffff !important;
    border: 1px solid #f2f2f7 !important;
    border-radius: 12px !important;
    padding: 15px !important;
}

.section-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #86868b;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f2f7;
    padding-bottom: 8px;
}

/* --- Export Button --- */
.btn-tesla-outline {
    background: #1d1d1f !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}

.btn-tesla-outline:hover {
    opacity: 0.9;
}

/* GPS PANEL CONTAINER */


#map-engine {
    width: 100%;
    height: 100%;
}

/* The container for your GPS map */
#gps-panel {
    width: 100%;
    height: 100%;
}

/* THE OVERLAY LAYER */
.hud-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 100%;
    pointer-events: none; /* Allows interacting with map through overlay */
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	z-index: 1100; /* Higher than Leaflet's default 1000 */
    pointer-events: none; /* Allows clicks to "pass through" to the map if needed */
}

/* Ensure buttons within the HUD can still be clicked */
.hud-overlay button {
    pointer-events: auto;
    border-radius: 7px; /* Lower curve as per your preference */
}

/* NAVIGATION INSTRUCTION (Top Center) */
.nav-instruction {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 7px; /* Namcor Standard */
    padding: 20px;
    width: fit-content;
    min-width: 240px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.dist-to-turn {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #008080; /* Tesla Blue */
}

.turn-direction {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* STATS CLUSTERS (Floating corners) */
.hud-stats-left, .hud-stats-right {
    position: absolute;
    bottom: 120px; /* Space for speedometer */
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: auto;
}

.hud-stats-left { left: 30px; }
.hud-stats-right { right: 30px; text-align: right; }


.hud-item span {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    text-shadow: 0 0 20px rgba(0, 128, 128, 0.6);
}

/* SPEEDOMETER (Bottom Center) */
.speedometer {
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
	text-shadow: 0 0 20px rgba(0, 128, 128, 0.6);
}

#hud-speed {
    font-size: 80px;
    font-weight: 600;
    color: #000;
    line-height: 1;
}

.speedometer label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #888;
    letter-spacing: 2px;
}

/* MAIN ACTION BUTTON (Floating Tesla Button) */
.action-btn-float {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #FFF;
    border: none;
    padding: 18px 60px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 7px; /* Namcor Standard */
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    pointer-events: auto;
}

.action-btn-float:active {
    transform: translateX(-50%) scale(0.96);
}

/* --- System Modal Overhaul --- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(8px);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-white-card {
    background: white;
    border-radius: 7px; /* Container Spec */
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border: 1px solid #ddd;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

/* --- Animated Status Icon (Tesla Red Pulse) --- */
.notif-icon {
    font-size: 1.2rem;
    background: rgba(232, 33, 39, 0.1); /* Namcor Red Tint */
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    margin: 0 auto 10px;
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0% { box-shadow: 0 0 0 0 rgba(232, 33, 39, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(232, 33, 39, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 33, 39, 0); }
}

@keyframes slideInRight {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Pulsing effect while moving */
.is-moving {
    animation: vehiclePulse 1s infinite alternate;
}

@keyframes vehiclePulse {
    from { transform: scale(1); box-shadow: 0 0 5px #008080; }
    to { transform: scale(1.2); box-shadow: 0 0 15px #008080; }
}

#gps-panel {
    width: 100%;
    height: 100vh; /* Or 100% if inside a flex container */
    filter: none !important; /* Removes any accidental dark filters */
    background: #f4f4f4; /* Light background while tiles load */
}

/* Fix for Leaflet tiles to fill the div */
.leaflet-container {
    width: 100%;
    height: 100%;
}

/* Ensure the vehicle marker stands out against a lighter map */
.custom-div-icon div {
    background: #008080; 
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Add shadow for visibility */
}

/* The Container stays the same */
.tesla-arrow-container {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 6px rgba(62, 106, 225, 0.9));
    transition: transform 0.2s ease-out;
}

/* The New Indented Arrow Shape */
.tesla-arrow {
    width: 20px;
    height: 26px;
    background: red; /* Tesla Blue */
    /* This creates the sharp tip and the indented rear 'M' shape */
    clip-path: polygon(50% 0%, 100% 100%, 50% 82%, 0% 100%);
    position: relative;
}

/* Gradient Overlay for a 3D effect */
.tesla-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%);
}

#notif-order-id {
    font-weight: 800;
    color: #008080; /* Matching your Tesla Blue */
    padding: 2px 8px;

    letter-spacing: 1px;
    display: inline-block;
    margin-left: 5px;
}

.modal-close-x {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 5px;
    line-height: 1;
}

.modal-close-x:hover {
    color: #fff; /* Highlights on hover like the Tesla UI */
}

/* CSS logic to support the JS above */
.tesla-select-checkbox { display: none; }

#transaction-list {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Tight gaps like a technical HUD */
    padding: 10px 0;
}

.transaction-card {
    background: #0a0a0a; /* Deep black */
    border: 1px solid #1c1c1c; /* Subtle border */
    border-radius: 7px; /* Your specific preference */
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
	pointer-events: auto; /* Ensure it accepts clicks */
    cursor: pointer;
}

.transaction-card:hover {
    border-color: #008080; /* Glow on hover */
    background: #111;
}

.t-id {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.t-status {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 7px;
}

/* Tesla Status Colors (Neon/Vibrant) */
.status-completed { color: #008080; border-left: 2px solid #008080; padding-left: 10px; }
.status-pending { color: #E82127; border-left: 2px solid #E82127; padding-left: 10px; }
.status-ready { color: #00FFC2; border-left: 2px solid #00FFC2; padding-left: 10px; }

.t-dest {
    font-size: 12px;
    color: #ccc;
}


@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}


.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 10px;
}

.stat-card-mini {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 7px; /* Low curve for Namcor */
    border-left: 3px solid #008080;
    display: flex;
    flex-direction: column;
}

.stat-card-mini label {
    font-size: 10px;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.stat-card-mini span {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.rate-card-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px; /* Low curve for Namcor */
    display: flex;
    justify-content: space-around;
    padding: 10px;
}

.rate-item {
    text-align: center;
}

.rate-item label {
    display: block;
    font-size: 9px;
    color: #888;
    margin-bottom: 2px;
}

.rate-item span {
    font-weight: bold;
    color: #A1A1A1;
    font-size: 14px;
}

/* Surge Animation */
.surge-active {
    color: #008080 !important; /* Tesla Blue */
    text-shadow: 0 0 10px rgba(62, 106, 225, 0.5);
    animation: surgePulse 2s infinite;
}

@keyframes surgePulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.chart-container label {
    font-size: 10px;
    color: #666;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

#tesla-line-chart {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(62, 106, 225, 0.4));
}

#chart-line {
    transition: d 0.5s ease-in-out; /* Smooth transition when data updates */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-tesla-outline {
    background: transparent;
    border: 1px solid #008080; /* Tesla Blue */
    color: #008080;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 7px; /* Less curve as requested */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-tesla-outline:hover {
    background: rgba(62, 106, 225, 0.1);
    color: #fff;
    border-color: #fff;
}

.btn-tesla-outline .icon {
    font-style: normal;
    font-size: 14px;
}

/* Live Manifest Cards (Mini) */
.manifest-card-mini {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 7px; /* Low curve */
}

/* Current Manifest Card (Large) */
.manifest-card-large {
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.9), rgba(15, 15, 20, 0.9));
    border: 1px solid rgba(62, 106, 225, 0.3);
    padding: 30px;
    border-radius: 7px;
    position: relative;
}

.status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #008080;
    font-size: 10px;
    padding: 4px 8px;
    letter-spacing: 1px;
    font-weight: bold;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 5px;
}

.info-row label { color: #666; font-size: 11px; }
.info-row span { color: #fff; font-weight: bold; }

.btn-danger-outline {
    background: transparent;
    border: 1px solid #ff4444;
    color: #ff4444;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 1px;
}


input:checked + .slider { background-color: #008080; }
input:checked + .slider:before { transform: translateX(22px); }

/* Status Text Animation */
.status-online {
    color: #008080 !important;
    text-shadow: 0 0 8px rgba(62, 106, 225, 0.5);
    font-weight: 800;
}

/* Pulsating Effect for Pickup/Destination Pins */
.tesla-pin-destination {
    width: 20px;
    height: 20px;
    background: #008080;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(62, 106, 225, 0.4);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(62, 106, 225, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(62, 106, 225, 0); }
    100% { box-shadow: 0 0 0 0 rgba(62, 106, 225, 0); }
}

/* Apply this to your modal overlay/backdrop */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(240, 240, 242, 0.7); /* Light Grey Frost */
    backdrop-filter: blur(10px); /* The "Frosty" effect */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Button Hover Effects */
button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

#pin-modal {
    display: none; /* Controlled by JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Dim background */
    z-index: 10000; /* Must be higher than map (usually 400-1000) */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* Premium Namcor look */
}

.pin-container {
    background: white;
    padding: 30px;
    border-radius: 7px; /* Namcor Standard */
    width: 320px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}



#pin-modal-title {
    color: #fff;
    letter-spacing: 2px;
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

#pin-modal-subtitle {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 25px;
}

/* 3. PIN Display (The Dots) */
.pin-display {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.pin-dot {
    width: 14px;
    height: 14px;
    border: 2px solid #444;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.pin-dot.filled {
    background: #008080; /* Tesla Blue */
    border-color: #008080;
    box-shadow: 0 0 10px rgba(62, 106, 225, 0.5);
}

/* 4. Numeric Keypad (Grid Layout) */
.nova-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: none; /* JS switches this to flex */
    justify-content: center;
    align-items: center;
    z-index: 20000 !important; /* Higher than everything else */
    backdrop-filter: blur(8px);
}

.nova-modal-content {
    background: white;
    padding: 30px;
    border-radius: 7px; /* Namcor Standard */
    width: 320px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    color: #333;
}

/* Keypad Grid Fix */
.numeric-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.numeric-keypad button {
    height: 60px;
    font-size: 20px;
    border-radius: 7px; /* Namcor Standard */
    border: 1px solid #eee;
    background: #f9f9f9;
    cursor: pointer;
}

.key-clear { color: #ff4444 !important; }
.key-back { color: #aaa !important; }

/* 5. Success/Error Feedback Animations */
.success-flash {
    border-color: #00ff88 !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

.error-shake {
    animation: shake 0.4s ease-in-out;
    border-color: #ff4444 !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* Manifest Section Styling */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

/* The Manifest Card */
.manifest-card {
    background: #111; /* Deep Black */
    border: 1px solid #333;
    border-left: 4px solid #008080; /* Brand Blue Accent */
    border-radius: 7px; /* Low curve as requested */
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.manifest-card:hover {
    background: #1a1a1a;
    border-color: #444;
    transform: translateX(4px);
}

/* Card Typography */
.manifest-id {
    font-size: 10px;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.manifest-cargo {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
}

.manifest-dest {
    font-size: 12px;
    color: #aaa;
}

/* Payout Pill */
.payout-tag {

}

/* Empty State / Searching */
.empty-state {
    text-align: center;
    color: #555;
    padding: 40px;
    font-style: italic;
    border: 1px dashed #333;
}


/* Modal Content Box */

/* Header Section */
.modal-header {
    background: #151515;
    padding: 24px;
    border-bottom: 1px solid #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
	border-radius: 7px;
}

.offer-label {
    color: #555;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.offer-payout {
    color: #008080;
    font-size: 28px;
    font-weight: 800;
}

/* User Profile Section */
.customer-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.cust-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #008080;
    background: #111;
}

/* Route Info (The Line Logic) */
.route-visualizer {
    position: relative;
    border-left: 2px solid #008080;
    margin: 0 35px 20px 45px;
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.route-stop { position: relative; }

.route-stop::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: #0d0d0d;
    border: 2px solid #008080;
    border-radius: 50%;
}

.route-label {
    display: block;
    font-size: 12px;
    color: #aaa;
    text-transform: uppercase;
}

.route-address {
    color: #666;
	padding-top: 5px;
    font-size: 18px;
    font-weight: 500;
}

/* AI Data Grid */
.ai-estimates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border: 1px solid #222;
	border-radius: 7px;
    margin: 0 20px;
}

.estimate-box {
    padding: 15px;
    text-align: center;
}

/* Buttons */
.modal-actions {
}


.btn-decline:hover { background: #ff4444; color: white; border-color: #ff4444; }


.btn-accept:hover { background: #2e54b6; box-shadow: 0 0 15px rgba(62, 106, 225, 0.4); }


/* Active Mission Card - Sharp Industrial Style */
.mission-status-card {
    background: #0a0a0a;
    border: 1px solid #222;
    border-top: 4px solid #008080;
    padding: 20px;
    margin: 10px;
	border-radius: 7px;
}

.mission-header-alt {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #222;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.cyber-label {
    font-size: 10px;
    color: #008080;
    letter-spacing: 2px;
    font-weight: bold;
}

.mission-title { margin: 5px 0; color: #fff; font-size: 20px; }

.mission-payout-alt {
    font-size: 24px;
    color: #008080;
    font-weight: 800;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: #111;
    padding: 15px;
    border: 1px solid #222;
    border-radius: 7px;
}

.grid-item label {
    display: block;
    font-size: 9px;
    color: #555;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.grid-item span { color: #eee; font-size: 13px; font-weight: 500; }

/* Route Box Visibility Fix */
.route-box-alt {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03); /* Slight lift from background */
    border-left: 2px solid #222;
}

.route-step-alt { 
    display: flex; 
    gap: 15px; 
    align-items: flex-start; 
    margin-bottom: 5px;
}

.route-step-alt label {
    display: block;
    font-size: 9px;
    color: #008080; /* Use Namcor Blue for labels */
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.route-step-alt p {
    color: #ffffff; /* Pure white for addresses */
    font-size: 13px;
    margin: 0;
}

/* Icons */
.dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.dot.blue { background: #008080; box-shadow: 0 0 10px rgba(62, 106, 225, 0.5); }
.dot.gray { background: #666; }

.route-line-alt {
    width: 1px;
    height: 30px;
    background: #333;
    margin-left: 4.5px;
}

.btn-abort {
    width: 100%;
    background: transparent;
    border: 1px solid #333;
    color: #666;
    padding: 12px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 1px;
    transition: 0.2s;
}

.btn-abort:hover { background: #ff4444; color: #fff; border-color: #ff4444; }

.btn-danger, .btn-tesla-small {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 7px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 11px;
    transition: filter 0.2s;
}

.btn-danger:hover { filter: brightness(1.2); }


.security-border {
    border: 2px solid #E13E3E !important; /* Safety Red */
    background: #0a0a0a;
    border-radius: 7px; /* Minimal curve */
    padding: 30px;
    text-align: center;
}

.nova-btn-rect {
    background: #008080;
    color: white;
    border: none;
    padding: 12px 24px;
    font-weight: bold;
    border-radius: 7px; /* Sharp edges */
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    text-transform: uppercase;
}

.security-stats {
    background: #fff;
    padding: 15px;
    margin: 20px 0;
    text-align: left;
}

.highlight-red { color: #E13E3E; }
.highlight-blue { color: #008080; }

.tesla-progress-zone {
    width: 100%;
    padding: 20px 0; /* Wider feel by removing side padding in container */
    color: #fff;
}

/* Big Hero Number like Tesla's Autopilot UI */
.progress-hero {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.progress-hero span {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -1px;
}

.progress-hero small {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Thinner, sleeker track */
.tesla-track {
    width: 100%;
    height: 3px; /* Very thin for that premium look */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    margin: 15px 0;
}

.tesla-fill {
    height: 100%;
    width: 0%;
    background: #008080; /* Solid, high-end Blue */
    box-shadow: 0 0 12px rgba(62, 106, 225, 0.6);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tesla-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#dash-progress-fill {
    height: 100%;
    background: #007AFF; /* Tesla/Namcor Blue */
    border-radius: 7px;  /* Match your brand guidelines */
    transition: width 0.5s ease-in-out; /* Smooth movement */
}

.metric-highlight {
    font-size: 12px;
    font-weight: 600;
    color: #eee;
}

.metric-sub {
    font-size: 11px;
    color: #555;
}

/* Range Slider Customization */
input[type=range] {
    -webkit-appearance: none;
    background: #333;
    height: 4px;
    border-radius: 7px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    background: #008080;
    border-radius: 50%; /* Fixed 2px curve as per instructions */
    cursor: pointer;
}

/* Theme Classes */
.dark-theme { background-color: #000; color: #fff; }
.light-theme { background-color: #f5f5f5; color: #333; }


#receipt-modal {
    /* Layout */
    display: none; /* Controlled by JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* Layering & Visuals */
    z-index: 999999 !important; /* Higher than GPS/Sidebars */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    
    /* Centering */
    align-items: center;
    justify-content: center;
}

#receipt-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

/* Show properly as flex when JS sets display: block */
#receipt-modal[style*="display: block"] {
    display: flex !important;
}

.receipt-content {
    background: #050505;
    border: 1px solid #1c1c1c;
    border-top: 2px solid #008080; /* Tesla Blue accent */
    border-radius: 7px; /* 2px curve */
    padding: 30px;
    width: 350px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    color: white;
}

.receipt-header h2 { 
    margin: 10px 0; 
    font-weight: 300; 
    letter-spacing: 1px; 
}

.receipt-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    border-bottom: 1px solid #111;
    padding-bottom: 8px;
}

.receipt-row .label { 
    font-size: 0.65rem; 
    color: #666; 
    letter-spacing: 1px; 
    margin-bottom: 4px; 
    text-transform: uppercase;
}

.receipt-row .value { 
    font-size: 0.9rem; 
    color: #eee; 
}

.total-row { 
    border-top: 1px solid #222; 
    padding-top: 15px; 
    margin-top: 20px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-row .value { 
    font-size: 1.2rem; 
    color: #008080; 
    font-weight: bold; 
}

.close-btn {
    width: 100%;
    background: #fff;
    color: #000;
    border: none;
    padding: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 7px;
    margin-top: 10px;
    text-transform: uppercase;
}

.close-btn:hover {
    background: #eee;
}
/* --- SECURITY MODAL (FROSTED OVERLAY) --- */
#security-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Updated to use your Frost/Blur theme */
    background: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    display: none; /* Flex when active */
    justify-content: center;
    align-items: center;
    z-index: 10005; /* Must stay above login-overlay (9999) */
}

.nova-modal-content {
    background: #fff; /* Pure Black per theme */
    border-radius: 7px; /* Namcor 2px Curve */
    padding: 20px;
    width: 380px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
}

/* Red Alert Line for Security */
.security-border {
    border-top: 4px solid #E82127; /* Solid Red */
}

/* Icon and Typography Colors */
.security-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

#security-modal-title {
    color: #000; /* White */
    letter-spacing: 2px;
    margin-bottom: 10px;
}

#security-modal-body {
    color: #a1a1a1; /* Brand Grey */
    font-size: 14px;
    line-height: 1.5;
}

/* Stat Colors */
.highlight-red { color: #E82127; font-weight: bold; }
.highlight-blue { color: #008080; font-weight: bold; }

/* Dismiss Button */
.nova-btn-rect {
    background: #008080; /* Blue */
    color: white;
    border: none;
    padding: 15px 25px;
    margin-top: 25px;
    width: 100%;
    font-weight: 700;
    cursor: pointer;
    border-radius: 7px; /* Namcor 2px Curve */
    transition: opacity 0.2s;
}

.nova-btn-rect:active {
    opacity: 0.8;
}
/* 1. THE OVERLAY: Pure White with heavy blur to isolate the task */
#accept-modal {
    display: none; 
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(255, 255, 255, 0.85) !important; /* Brighter, cleaner than 0.6 */
    backdrop-filter: blur(12px) saturate(180%); /* Makes the background feel "expensive" */
    z-index: 20000 !important;
    align-items: center;
    justify-content: center;
}

/* 2. THE CARD: Using your 7px requirement + The "Stuck" Border */
#accept-modal .modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 360px;
    padding: 35px 25px;
    border-radius: 7px !important; 
    border-top: 8px solid #000; /* Solid Black top border for that 'Kernel' feel */
    box-shadow: 0 30px 60px rgba(0,0,0,0.12); /* Softer, deeper shadow */
    text-align: center;
}

/* 3. THE INFO GRID: Clean lines, no boxes */
.modal-details {
    margin: 20px 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

#job-payout {
    font-size: 42px; /* Huge, bold price */
    font-weight: 900;
    color: #000;
    letter-spacing: -2px;
    margin-bottom: 10px;
}

/* 4. ACTIONS: The "Stuck" Layout */
.modal-actions {
    display: flex;
    flex-direction: column; /* Stacked buttons feel more modern and easier to hit */
    gap: 10px;
    margin-top: 30px;
}

/* Primary Accept Button (Black Block) */
.btn-accept {
    width: 100%;
    background: #000; /* Changed to Black to match the top border */
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 7px !important;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.1s active;
}

.btn-accept:active {
    transform: scale(0.98); /* Tactile feedback */
}

/* Secondary Decline Button (Text only) */
.btn-decline {
    width: 100%;
    background: transparent;
    color: #bbb; /* Faded out so it doesn't distract from the money */
    border: none;
    padding: 12px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.btn-decline:hover {
    color: #666;
}

#abort-modal {
    display: none; /* Flex when active */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important; /* Dim the background */
    z-index: 100000 !important; /* Sit on top of everything */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}





/* Tesla Sonar Pulse Animation */
@keyframes sonar-pulse {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.pulse-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulse-ring {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: sonar-pulse 2s infinite;
}

/* Pickup: Blue Glow | Delivery: Green Glow */
.pickup-pulse { border: 2px solid #007AFF; background: rgba(0, 122, 255, 0.2); }
.delivery-pulse { border: 2px solid #10b981; background: rgba(16, 185, 129, 0.2); }

/* The "Directional Wedge" */
.direction-hint {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid white; /* Pointy bit */
    top: -12px;
	    transition: transform 0.1s linear; /* Makes the needle "sweep" smoothly */
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.3)); /* Premium Tesla depth */
}

#orders-list {
    display: flex;
    flex-direction: column; /* Forces the vertical stack */
    gap: 10px; /* Space between cards */
    padding: 10px;
    overflow-y: auto; /* Allows scrolling if many orders come in */
    max-height: 80vh; 
}

/* Add a hover effect for that premium Namcor feel */
.manifest-card:hover {
    background: #222 !important;
    border-color: #007AFF !important;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

#dash-progress-fill {
    transition: width 0.5s ease-in-out;
}

#dash-progress-fill {
	color: blue;
}

#dash-dist-to-target {
	color: #a1a1a1;
}

.leaflet-marker-icon {
    transition: transform 0.1s linear; /* Helps smooth out high-speed jitter */
}



.hud-stats-left { left: 30px; }
.hud-stats-right { right: 30px; text-align: right; }

/* 3. SPEEDOMETER - The 'Nova' Core */


/* 4. DATA STYLING - Minimalist & Pro */
.hud-item label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
	color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
}

.hud-item span {
    font-size: 22px; /* Bigger, bolder numbers */
    font-weight: 300; /* Light weight looks more high-end */
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

#hud-speed {
    font-size: 72px; /* Giant speed like the Tesla Model 3 */
    font-weight: 200;
    line-height: 0.8;
}

.speedometer label {
    font-size: 14px;
    color: #007AFF;
    letter-spacing: 4px;
    margin-top: 10px;
    opacity: 0.8;
}

/* 5. ADDING THE '7px' ACCENT LINE - Floating underline flow */
.hud-item::after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background: #007AFF;
    margin-top: 8px;
    border-radius: 7px; /* 7px radius on the accent lines */
    opacity: 0.6;
}

.hud-stats-right .hud-item::after {
    margin-left: auto; /* Align accent to the right for the right panel */
}


/* 1. Add Transition to your existing HUD styles */
.hud-stats-left, .hud-stats-right, .speedometer {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Let users click through numbers to the map */
}

/* 2. The 'Hidden' State Logic */
.hud-hidden {
    opacity: 0 !important;
    pointer-events: none; /* Prevents interaction while hidden */
    /* Optional: Slight downward shift so it 'pops' up when appearing */
    transform: translateY(10px); 
}

/* Directions: Elements slide toward the screen edges when hiding */
.hud-stats-left.hud-hidden {
    transform: translateX(-30px);
}

.hud-stats-right.hud-hidden {
    transform: translateX(30px);
}

.speedometer.hud-hidden {
    /* translate(-50%) maintains your horizontal centering while sliding down */
    transform: translate(-50%, 40px); 
}



/* Container logic */
#current-manifest-view {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply the "Tesla Glass" look only when floating */
#sidebar.collapsed .mission-status-card {
    background: rgba(0, 0, 0, 1);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 15px;
    transform: scale(0.9); /* Slightly smaller */
    border-radius: 7px;     /* Maintain your 7px border radius */
}

/* Hide non-essential details when floating to keep it clean */
#sidebar.collapsed .mission-grid, 
#sidebar.collapsed .mission-footer {
    display: none; 
}

/* Make the title smaller when floating */
#sidebar.collapsed .mission-title {
    font-size: 16px;
    margin-bottom: 5px;
}

#sidebar.collapsed .route-box-alt {
    margin-top: 10px;
    padding: 5px 0;
}

/* Add this to your styles */
#manifest-verify-btn {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.active-pulse {
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(62, 106, 225, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(62, 106, 225, 0); }
    100% { box-shadow: 0 0 0 0 rgba(62, 106, 225, 0); }
}


#conn-status {
    transition: color 0.3s ease;

}

/* Add a small blinking dot next to it via JS or CSS if desired */
.status-online::before {
    content: "●";
    margin-right: 5px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}


/* Hide scrollbar for Chrome, Safari and Opera */
.orders-list::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.orders-list {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    
    /* Ensure the list has a fixed height so only it scrolls */
    max-height: calc(100vh - 120px); 
    overflow-y: auto;
}


/* Futuristic Floating Scrollbar */
.content-scroll::-webkit-scrollbar {
    width: 2px; /* Ultra thin line */
}

/* Hide the track - we want the bar to "float" in the dark space */
.content-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* The Neon Thumb */
.content-scroll::-webkit-scrollbar-thumb {
    background: #008080; /* Your Namcor Blue */
    border-radius: 7px;
    /* This creates the "Neon Glow" effect */
    box-shadow: 0 0 10px rgba(62, 106, 225, 0.8), 
                0 0 5px rgba(62, 106, 225, 0.5);
    border: none;
}

/* Subtle pulse on hover */
.content-scroll::-webkit-scrollbar-thumb:hover {
    background: #5c85ff;
    box-shadow: 0 0 15px rgba(92, 133, 255, 1), 
                0 0 20px rgba(92, 133, 255, 0.6);
}

/* Make it look like a thin laser line when not moving */
.content-scroll {
    scrollbar-width: thin;
    scrollbar-color: #008080 transparent;
    /* Smooth out the scrolling feel */
    scroll-behavior: smooth;
}

/* --- NOVA CHARTING CORE --- */

:root {
    --chart-bg: rgba(0, 0, 0, 0.2);
    --chart-border: rgba(255, 255, 255, 0.05);
}

/* Container for Large Analytics Blocks */
.chart-container-large {

    border: 1px solid var(--chart-border);
    border-radius: 7px !important; /* Brand standard curve */
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.chart-container-large:hover {
    border-color: rgba(62, 106, 225, 0.3); /* Subtle glow on hover */
}

/* Header Typography */
.chart-label {
    display: block;
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* Legend Styling */
.chart-legend {
    display: flex;
    gap: 15px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chart-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-legend i {
    font-size: 8px; /* Small status dots */
}

/* Canvas Wrapper for Zoom/Pan handling */
.canvas-wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

/* Footer Timeline labels */
.axis-footer {
    display: flex; 
    justify-content: space-between; 
    margin-top: 15px; 
    color: var(--text-mute); 
    font-size: 9px; 
    letter-spacing: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
}

/* Specific styling for the small visual pods */
.visual-pod .chart-container {

    border-radius: 7px;
    border: 1px solid var(--chart-border);
}

/* Scrollbar styling for the chart area (if overflow occurs during zoom) */
.canvas-wrapper::-webkit-scrollbar {
    height: 4px;
}
.canvas-wrapper::-webkit-scrollbar-thumb {
 
    border-radius: 7px;
}

/* Flashing for HUD Alerts */
@keyframes hud-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.flash-warning {
    color: #ffcc00 !important; /* Yellow */
    animation: hud-pulse 0.8s infinite;
    font-weight: bold;
}

.flash-success {
    color: #28a745 !important; /* Green */
    animation: hud-pulse 0.5s infinite; /* Faster flash for arrived */
    font-weight: bold;
}
/* Namcor 7px Tooltip Styling */
.namcor-tooltip {
    background: #1a1a1a !important;
    color: white !important;
    border: 1px solid #333 !important;
    border-radius: 7px !important; /* Design Requirement */
    
    font-size: 11px;
    padding: 8px 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.namcor-tooltip::before {
    border-top-color: #333 !important;
}

/* Pulse Animations */
.pulse-ring {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    animation: pulse-animation 2s infinite;
}
.pickup-pulse { border: 2px solid #008080; }
.delivery-pulse { border: 2px solid #10b981; }

@keyframes pulse-animation {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes pulse-red {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.pulse-alert {
    animation: pulse-red 1s infinite;
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(232, 33, 39, 0.5);
}

#an-gross {
    display: block !important;
    visibility: visible !important;
    color: #2d3436; /* Dark slate for readability */
    font-weight: bold;
    min-height: 1.2em;
    opacity: 1 !important;
}

#an-fuel {
    display: block !important;
    visibility: visible !important;
    color: #2d3436; /* Dark slate for readability */
    font-weight: bold;
    min-height: 1.2em;
    opacity: 1 !important;
}

/* Ensure the parent container isn't clipping the 7px corners */
.analytics-card {
    border-radius: 7px;
    overflow: visible; 
    padding: 10px;
}
/* Container for the new layout */
.mission-offer-card {
    width: 90%;
    max-width: 650px; /* Wider, more horizontal */
    background: #111 !important;
    border: 1px solid #333;
    padding: 0 !important; /* We use internal padding for cleaner lines */
    overflow: hidden;
    border-radius: 7px;
}

.mission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid #222;
}

.system-badge {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--namcor-accent);
    font-weight: 800;
}

.offer-payout {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Horizontal split */
    gap: 30px;
    padding: 25px;
}

.mission-identity h2 {
    font-size: 24px;
    margin: 0 0 5px 0;
    color: #fff;
}

.merchant-tag {
    color: #3E6AE1;
    font-size: 14px;
    font-weight: 600;
}

.ai-tag {
    display: inline-block;
    margin-top: 15px;
    font-size: 9px;
    padding: 4px 8px;
    border: 1px solid #3E6AE1;
    color: #3E6AE1;
    border-radius: 4px;
}

/* Logistics Column */
.logistics-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.logistics-item label {
    display: block;
    font-size: 9px;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.logistics-item span {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* Route Path Visualization */
.route-path {
    position: relative;
    padding-left: 20px;
}

.path-stop {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot.pickup { background: #3E6AE1; }
.dot.dropoff { background: var(--namcor-accent); }

/* Action Buttons */
.mission-actions {
    display: flex;
    border-top: 1px solid #222;
}

.mission-actions button {
    flex: 1;
    height: 60px;
    border: none;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-decline {
    background: transparent;
    color: #666;
}

.btn-accept {
    background: #fff;
    color: #000;
}

.btn-accept:active {
    background: var(--namcor-accent);
    color: #fff;
}

/* Security Specific Skinning */
.security-card {
    border: 2px solid #e74c3c !important; /* Tesla uses a red border for critical alerts */
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.2);
}

.security-header {
    background: rgba(231, 76, 60, 0.1) !important;
    border-bottom: 1px solid rgba(231, 76, 60, 0.3) !important;
}

.alert-text {
    color: #e74c3c !important;
    font-weight: 900;
}

.security-description {
    color: #888;
    font-size: 13px;
    margin-top: 10px;
    line-height: 1.4;
}

/* Technical Diagnostic Look */
.diagnostic-box {
    background: #000;
    padding: 15px;
    border-radius: 4px; /* Slightly sharper for technical data */
    border: 1px solid #222;
}

.diagnostic-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diagnostic-line label {
    margin: 0;
}

.path-line-horizontal {
    height: 1px;
    background: #222;
    margin: 12px 0;
}

.value-red {
    color: #e74c3c !important;
    font-family: 'Courier New', monospace; /* Monospace feels more 'system-like' */
}

/* The Big Red Button */
.btn-security-close {
    background: #e74c3c !important;
    color: white !important;
    width: 100%;
    height: 65px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
}

.btn-security-close:hover {
    background: #c0392b !important;
}

/* Receipt Specific Styling */
.receipt-id {
    font-size: 18px;
    font-weight: 200;
    color: #888;
    letter-spacing: 1px;
}

.section-label {
    font-size: 10px;
    color: #444;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

/* Timeline Logic */
.timeline-container {
    border-left: 1px solid #222;
    padding-left: 15px;
    margin-left: 5px;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.time-label {
    font-size: 9px;
    color: #666;
}

.time-value {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}

/* Status Pill */
.status-pill {
    display: inline-block;
    margin-top: 20px;
    padding: 5px 12px;
    background: #3E6AE1;
    color: white;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* Address & Financials Column */
.address-block {
    margin-bottom: 15px;
}

.address-block label {
    font-size: 9px;
    color: #555;
    display: block;
}

.address-block span {
    font-size: 12px;
    color: #ccc;
    line-height: 1.4;
}

.financial-summary {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #222;
}

.financial-summary label {
    font-size: 10px;
    color: #3E6AE1;
    font-weight: 800;
}

#modal-total {
    font-size: 32px;
    color: #fff;
    font-weight: 200; /* Thin 'Tesla' font weight for totals */
}

.btn-receipt-close {
    background: #222 !important;
    color: #fff !important;
    width: 100%;
    height: 60px;
    border: none;
    font-weight: 800;
}

/* Abort Modal Specifics */
.abort-card {
    border: 1px solid #444 !important;
}

.abort-header {
    background: rgba(255, 0, 0, 0.05) !important;
    border-bottom: 1px solid #222 !important;
}

.danger-tag {
    border-color: #ff4444 !important;
    color: #ff4444 !important;
    margin-top: 10px;
}

.abort-warning-box {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    padding: 15px;
}

.abort-warning-box p {
    margin: 0;
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}

/* Button Logic */
.btn-abort-confirm {
    background: #ff4444 !important; /* Urgent Red */
    color: white !important;
    font-weight: 800;
    flex: 1.2 !important; /* Make the confirm button slightly wider than 'Resume' */
}

.btn-abort-confirm:active {
    background: #b30000 !important;
}

/* Matches your other 'Decline' buttons */
.btn-decline {
    background: transparent;
    color: #666;
    flex: 1;
}

.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
}

.transaction-card {
    background: #0a0a0a; /* Slightly darker than main bg for depth */
    border: 1px solid #1a1a1a;
    border-radius: 7px;
    padding: 12px 15px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.transaction-card:hover {
    border-color: #008080;
    background: #111;
}

.transaction-card:active {
    transform: scale(0.98);
}

/* Status Badges */
.t-status {
    text-transform: uppercase;
    display: inline-block;
}

.status-claimed { background: #3E6AE1; color: white; }
.status-in_transit { background: #2ecc71; color: white; }
.status-completed { background: #555; color: #aaa; }
.status-revoked { background: #e74c3c; color: white; }
.status-pending { background: #f1c40f; color: black; }

/* Section Label Update */
.section-label {
    font-size: 9px;
    font-weight: 900;
    color: #444;
    letter-spacing: 2px;
    margin-bottom: 12px;
    display: block;
}

/* Modern Rate Items */
.rate-item-modern {
    flex: 1;
    background: #111;
    border: 1px solid #1a1a1a;
    padding: 12px;
    border-radius: 7px;
    text-align: center;
}

.rate-item-modern label {
    display: block;
    font-size: 8px;
    font-weight: 900;
    color: #444;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.rate-item-modern span {
    font-size: 16px;
    font-weight: 200;
    color: #ccc;
}

/* Stat Cards (Grid) */
.stat-card-tech {
    background: #0a0a0a;
    border-left: 2px solid #1a1a1a; /* Subtle sidebar accent */
    padding: 15px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-card-tech label {
    font-size: 9px;
    font-weight: 800;
    color: #555;
    letter-spacing: 1px;
}

.stat-card-tech span {
    font-size: 22px;
    font-weight: 200;
    color: var(--namcor-accent);
}

/* Ensure the chart canvas looks sharp */
#profitYieldChart {
    filter: drop-shadow(0px 4px 10px rgba(0, 128, 128, 0.2));
}

/* Marketplace Mission Cards */
.manifest-card-tech {
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    border-radius: 7px;
    margin-bottom: 12px;
    position: relative;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s;
    overflow: hidden;
}

.manifest-card-tech:active { transform: scale(0.98); }
.manifest-card-tech:hover { border-color: #333; }
.manifest-card-tech.is-stackable { border-left: 3px solid var(--namcor-accent); }

.stack-tag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--namcor-accent);
    color: white;
    font-size: 8px;
    font-weight: 900;
    padding: 3px 8px;
    letter-spacing: 1px;
    border-radius: 0 0 0 7px;
}

.manifest-body {
    display: flex;
    padding: 18px;
    justify-content: space-between;
    align-items: center;
}

.manifest-id-badge {
    font-size: 10px;
    color: #444;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.route-info { display: flex; flex-direction: column; gap: 4px; }

.route-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.route-row label { font-size: 8px; font-weight: 900; color: #444; width: 35px; }
.route-row span { color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.route-row.dest span { color: #fff; font-weight: 600; }

.manifest-meta {
    margin-top: 12px;
    font-size: 9px;
    color: #333;
    letter-spacing: 0.5px;
    font-family: monospace;
}

.payout-container { text-align: right; }
.payout-amount { font-size: 26px; font-weight: 200; color: #fff; line-height: 1; }
.payout-container label { font-size: 8px; font-weight: 900; color: #444; letter-spacing: 1px; }

/* Empty State */
.empty-state-tech {
    text-align: center;
    padding: 60px 20px;
    background: #050505;
    border: 1px dashed #1a1a1a;
    border-radius: 7px;
    color: #444;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Settings Grouping */
/* --- Settings Header --- */
#view-settings h2 {
    color: #1d1d1f !important; /* Manager Dark Text */
    font-weight: 700 !important;
}

/* --- Group Labels --- */
.settings-group-label {
    font-size: 10px;
    font-weight: 800;
    color: #86868b; /* Muted Apple Gray */
    letter-spacing: 1.2px;
    margin: 25px 0 10px 5px;
    text-transform: uppercase;
}

/* --- Settings Panel (The Card) --- */
.settings-panel {
    background: #ffffff;
    border: 1px solid #f2f2f7;
    border-radius: 12px;
    padding: 5px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
}

/* --- Row Logic --- */
.setting-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #f2f2f7;
}

.setting-row-modern:last-child {
    border-bottom: none;
}

/* Information Text */
.s-info label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 2px;
}

.s-info span {
    display: block;
    font-size: 11px;
    color: #86868b;
    font-weight: 500;
}

/* --- Segmented Control (Metric/Imperial) --- */
.segmented-control {
    background: #f5f5f7;
    padding: 3px;
    border-radius: 8px;
    display: flex;
    gap: 2px;
}

.segmented-control button {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 800;
    color: #86868b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.segmented-control button.active {
    background: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- The Tesla Switch (Toggle) --- */
.tesla-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.tesla-switch input { opacity: 0; width: 0; height: 0; }

.tesla-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e5e5ea;
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 34px;
}

.tesla-slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 2px; bottom: 2px;
    background-color: white;
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

input:checked + .tesla-slider {
    background-color: #008080; /* Namcor Teal */
}

input:checked + .tesla-slider:before {
    transform: translateX(20px);
}

/* --- Range Sliders --- */
.tesla-range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #e5e5ea;
    border-radius: 10px;
    outline: none;
}

.tesla-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Text labels inside sliders */
#view-settings label[style*="color: #fff"] {
    color: #1d1d1f !important;
}

/* --- Restart Button --- */
#view-settings .btn-tesla-outline {
    background: #f5f5f7 !important;
    color: #ff3b30 !important; /* Urgent Red for system restart */
    border: none !important;
    padding: 15px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    margin-top: 30px !important;
}
/* --- TESLA V12 TOP-DOWN NOTIFICATION --- */
#job-notification {
    position: fixed;
    /* 1. Positioning: Center it horizontally at the top */
    top: -150px; /* Start hidden above the screen */
    left: 50%;
    transform: translateX(-50%); /* Keeps it perfectly centered */
    
    /* 2. Style: Tesla High-Contrast Dark Mode */
    width: 90%;
    max-width: 450px;
    background: #ffffff; /* Tesla uses white for active alerts, or #111 for dark */
    color: #000;
    border-radius: 7px; /* Your 7px standard */
    padding: 16px 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    z-index: 20000; /* Above EVERYTHING */
    
    /* 3. The Animation FIX */
    transition: top 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* Professional "Snap" ease */
}

/* When the 'visible' class is added via JS */
#job-notification.visible {
    top: 20px; /* Slide down to 20px from the top */
}

/* Internal Layout */
.notif-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notif-actions {
    margin-top: 15px;
    display: none; /* Hidden for system alerts */
    gap: 10px;
}

.notif-actions.has-buttons {
    display: flex;
}

/* Primary "Tesla Blue" Action Button */
.btn-notif-accept {
    flex: 1;
    background: #0080FF; /* Tesla UI Blue */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
}

.btn-notif {
    flex: 1;
    background: #0080FF; /* Tesla UI Blue */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
}

/* --- TESLA V12 SYSTEM MODAL REDESIGN --- */

/* Backdrop with high-end glass blur */
#modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7); /* Deepened for higher contrast */
    backdrop-filter: blur(15px) saturate(180%); /* Tesla-style high-clarity blur */
    z-index: 12000; /* Above all other HUD elements */
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-out;
}

/* Modal Container: The "OLED" Look */
#modal-container {
    background: #000 !important; /* Absolute Black */
    border: 1px solid #1c1c1c !important; /* Geometric edge */
    border-radius: var(--namcor-radius) !important; /* Locked to your 7px standard */
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    position: relative;
    max-width: 420px;
    width: 90%;
}

/* Tesla Vertical Stack Buttons */
.tesla-modal-content button {
    transition: filter 0.2s ease, transform 0.1s ease;
    outline: none;
    border: none;
    display: block;
    width: 100%;
}

.tesla-modal-content button:active {
    transform: scale(0.98);
    filter: brightness(1.2);
}

/* Secondary Button (Cancel/Abort) */
.btn-tesla-secondary {
    background: #1c1c1c !important;
    color: #ffffff !important;
    padding: 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    border-radius: 7px !important;
    text-transform: uppercase;
}

/* Close 'X' - Tesla Minimalist Style */
.modal-close-x {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    color: #444;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}

.modal-close-x:hover {
    color: #fff;
}

/* Ensure the list allows scrolling and doesn't squash children */
#orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto; /* Enable scrolling */
    flex-grow: 1;
    padding-bottom: 20px;
    height: 100%; /* Occupy available space */
}

/* Prevent cards from shrinking */
.manifest-card-tech {
    flex-shrink: 0 !important; /* THE FIX: Stops the browser from squishing the card */
    min-height: 140px; /* Enforce a consistent height */
    background: #0a0a0a;
    border: 1px solid #1c1c1c;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.2s ease;
}

/* Scrollbar Styling (Tesla/Chrome style) */
#orders-list::-webkit-scrollbar {
    width: 4px;
}
#orders-list::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 10px;
}



/* 1. THE SONAR KEYFRAMES */
@keyframes sonar-wave-pulse {
    0% { 
        opacity: 0; 
        transform: scale(0.2); 
        stroke-width: 1;
        stroke-opacity: 1;
    }
    15% { 
        opacity: 1; 
        transform: scale(0.8); 
        stroke-width: 2;
        stroke-opacity: 1;
    }
    100% { 
        opacity: 0; 
        transform: scale(1.6); 
        stroke-width: 0.5;
        stroke-opacity: 0;
    }
}

/* 2. THE INNER GLOW KEYFRAMES */
@keyframes offer-pulse-expand {
    0% { transform: scale(0.5); opacity: 0; }
    20% { opacity: 0.6; }
    100% { transform: scale(4); opacity: 0; }
}

/* 3. THE 1KM RADIUS CIRCLE (SVG) */
.pulsing-intercept-ring {
    animation: sonar-wave-pulse 3s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    transform-origin: center;
    transform-box: fill-box; /* PREVENTS JUMPING */
    pointer-events: none;
    stroke-dasharray: 4, 8;
}

/* 4. THE MARKER & PRICE UNIT (HTML) */
.marketplace-pulse-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
    animation: sonar-wave-pulse 3s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 5. THE INNER ORANGE GLOW */
.offer-pulse-ring {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 149, 0, 0.3);
    border-radius: 50%;
    animation: offer-pulse-expand 3s infinite;
    pointer-events: none;
}