/* Ys Comindo Service - Tracking/Maps Mobile Hotfix
   Versi: 20260606v1
   Aman untuk live: hanya CSS tampilan maps HP.
*/

@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .map-page,
    .tracking-page,
    .tracking-map-page,
    .maps-page,
    .map-wrapper,
    .tracking-wrapper,
    .operational-map-wrapper,
    .customer-map-wrapper,
    .technician-map-wrapper,
    .order-tracking-wrapper,
    .location-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 10px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
    }

    .content,
    .main-content,
    .dashboard-content,
    main,
    section {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #map,
    #trackingMap,
    #operationalMap,
    #customerMap,
    #technicianMap,
    #orderMap,
    #locationMap,
    .map-container,
    .tracking-map,
    .customer-map,
    .technician-map,
    .operational-map,
    .order-map,
    .location-map,
    .leaflet-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 360px !important;
        min-height: 300px !important;
        max-height: 420px !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        transform: none !important;
        inset: auto !important;
    }

    .leaflet-pane,
    .leaflet-map-pane,
    .leaflet-tile-pane,
    .leaflet-overlay-pane,
    .leaflet-marker-pane,
    .leaflet-shadow-pane,
    .leaflet-tooltip-pane,
    .leaflet-popup-pane {
        z-index: auto !important;
    }

    .leaflet-control-container {
        position: relative !important;
        z-index: 5 !important;
    }

    .leaflet-top,
    .leaflet-bottom {
        z-index: 8 !important;
    }

    .leaflet-control-zoom {
        margin: 8px !important;
    }

    .leaflet-control-attribution {
        font-size: 9px !important;
        max-width: 70% !important;
        white-space: normal !important;
    }

    .leaflet-popup-content {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        margin: 10px 12px !important;
    }

    .map-card,
    .tracking-card,
    .location-card,
    .order-location-card,
    .customer-location-card,
    .technician-location-card,
    .route-card {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 0 12px 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
    }

    .map-info,
    .tracking-info,
    .location-info,
    .order-map-info,
    .customer-map-info,
    .technician-map-info,
    .route-info {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        padding: 11px !important;
        border-radius: 14px !important;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        z-index: 3 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .map-info p,
    .tracking-info p,
    .location-info p,
    .order-map-info p,
    .customer-map-info p,
    .technician-map-info p,
    .route-info p,
    .map-info span,
    .tracking-info span,
    .location-info span,
    .order-map-info span {
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
    }

    .tracking-header,
    .map-header,
    .location-header,
    .order-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .tracking-header h1,
    .tracking-header h2,
    .map-header h1,
    .map-header h2,
    .location-header h1,
    .location-header h2 {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    .tracking-actions,
    .map-actions,
    .location-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .tracking-actions a,
    .tracking-actions button,
    .map-actions a,
    .map-actions button,
    .location-actions a,
    .location-actions button {
        flex: 1 1 auto !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        border-radius: 10px !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .mobile-bottom-nav {
        z-index: 50 !important;
    }

    .wa-float,
    .floating-whatsapp {
        z-index: 45 !important;
    }

    .tracking-page,
    .tracking-map-page,
    .maps-page,
    .map-page {
        padding-bottom: 84px !important;
    }
}

@media (max-width: 420px) {
    #map,
    #trackingMap,
    #operationalMap,
    #customerMap,
    #technicianMap,
    #orderMap,
    #locationMap,
    .map-container,
    .tracking-map,
    .customer-map,
    .technician-map,
    .operational-map,
    .order-map,
    .location-map,
    .leaflet-container {
        height: 320px !important;
        min-height: 280px !important;
        max-height: 360px !important;
        border-radius: 14px !important;
    }

    .map-card,
    .tracking-card,
    .location-card,
    .order-location-card {
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .map-info,
    .tracking-info,
    .location-info,
    .order-map-info {
        font-size: 11px !important;
        padding: 10px !important;
    }
}