/* Custom CSS & Theme Definitions for Tech Tracking Indonesia V2 */

:root {
    --bg-primary: #090d16;
    --bg-card: #0f172a;
    --border-color: #1e293b;
    --text-primary: #f8fafc;
    --text-muted: #94a3b8;
    --accent-indigo: #6366f1;
}

[data-theme="light"] {
    --bg-primary: #f1f5f9;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #0f172a;
    --text-muted: #64748b;
    --accent-indigo: #4f46e5;
}

[data-theme="cyberpunk"] {
    --bg-primary: #0d0221;
    --bg-card: #19053c;
    --border-color: #ff007f;
    --text-primary: #00f0ff;
    --text-muted: #bd00ff;
    --accent-indigo: #ff007f;
}

[data-theme="emerald"] {
    --bg-primary: #022c22;
    --bg-card: #064e3b;
    --border-color: #059669;
    --text-primary: #ecfdf5;
    --text-muted: #6ee7b7;
    --accent-indigo: #10b981;
}

/* Glassmorphism Header & Card Styles */
.glass-header {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 41, 59, 0.8);
}

.glass-panel {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(30, 41, 59, 0.8);
}

/* Floating Telematics HUD Glass Panel */
.hud-glass-panel {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.35);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Map Overlay Buttons */
.map-overlay-btn {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(51, 65, 85, 0.8);
    transition: all 0.2s ease-in-out;
}

.map-overlay-btn:hover {
    background: rgba(79, 70, 229, 0.8);
    border-color: rgba(99, 102, 241, 1);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

.map-overlay-btn.active {
    background: #4f46e5;
    border-color: #6366f1;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
}

/* Collapsible Sidebar Mechanics */
.sidebar-collapsed {
    width: 4.5rem !important;
}

.sidebar-collapsed .nav-text,
.sidebar-collapsed .nav-header-group,
.sidebar-collapsed .nav-badge,
.sidebar-collapsed .sidebar-company-info {
    display: none !important;
}

.sidebar-collapsed nav button {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile Off-Canvas Sidebar Drawer Mechanics (< 1024px) */
@media (max-width: 1023px) {
    aside#sidebar-admin,
    aside#sidebar-customer {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        width: 17rem !important;
        max-width: 85vw !important;
        background-color: #0f172a !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.9) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    aside#sidebar-admin.sidebar-mobile-open,
    aside#sidebar-customer.sidebar-mobile-open {
        transform: translateX(0) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Speedometer Glowing Pulse Rings */
.pulse-ring-emerald {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-ring-emerald-anim 2s infinite;
}

@keyframes pulse-ring-emerald-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.pulse-ring-amber {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulse-ring-amber-anim 2s infinite;
}

@keyframes pulse-ring-amber-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(245, 158, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Leaflet Map Custom Overrides */
.leaflet-popup-content-wrapper {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 30px rgba(0,0,0,0.6) !important;
}

.leaflet-popup-tip {
    background: rgba(15, 23, 42, 0.95) !important;
}

/* Input Range Playback Scrubber Custom Styling */
input[type=range].playback-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #4f46e5;
    border: 2px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
}

/* Responsive Map Floating HUD Card & Collapse State (Update: 2026-10-02) */
.hud-glass-panel {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-glass-panel.hud-collapsed {
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
    padding: 0.45rem 0.75rem !important;
}

.hud-glass-panel.hud-collapsed .hud-header-container {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.hud-glass-panel.hud-collapsed .hud-collapsible-content {
    display: none !important;
}

/* Playback Bar Mobile Collapse State */
.hud-glass-panel.playback-collapsed {
    padding: 0.45rem 0.75rem !important;
}

.hud-glass-panel.playback-collapsed .playback-collapsible-content {
    display: none !important;
}

/* Mobile Fleet Drawer Overlay & Backdrop (< 1024px) */
@media (max-width: 1023px) {
    .map-fleet-sidebar-container {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 450 !important;
        width: 280px !important;
        max-width: 85vw !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8) !important;
    }

    .map-fleet-sidebar-container.open {
        transform: translateX(0) !important;
    }
}

/* Mobile Responsive HUD & Map Fixes (< 640px) (Update: 2026-10-02) */
@media (max-width: 639px) {
    .hud-glass-panel {
        width: calc(100vw - 1rem) !important;
        max-width: 320px !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
        padding: 0.65rem 0.75rem !important;
    }

    .hud-glass-panel.hud-collapsed {
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
        padding: 0.4rem 0.65rem !important;
    }

    .map-overlay-btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 10px !important;
    }

    #customer-account-switcher {
        max-width: 170px;
    }
    
    #customer-account-switcher select {
        max-width: 120px !important;
        text-overflow: ellipsis;
    }
}

/* Mobile Natural Full-Page Scrolling (< 768px) */
@media (max-width: 767px) {
    html, body {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        -webkit-tap-highlight-color: transparent;
    }

    .app-viewport-wrapper,
    .app-body-container {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    main {
        height: auto !important;
        overflow-y: visible !important;
        padding-bottom: 8rem !important; /* 128px bottom clearance for mobile dock */
    }

    header#global-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }

    /* Prevent forced auto-zoom on iOS Safari when tapping input fields */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Universal Mobile Responsive Modal Dialog Scroller */
div[id^="modal-"] {
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)) !important;
}

div[id^="modal-"] > div {
    max-height: calc(100dvh - 3rem) !important;
    max-height: calc(100vh - 3rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* Mobile Touch Scrollable Tables */
.table-container,
.overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y;
}

/* Mobile Bottom Navigation Dock Safe Area Support */
#mobile-bottom-nav-dock {
    bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
}