/* ========================================
   MOBILE RESPONSIVENESS STYLES
   Add this to all HTML pages for mobile support
   ======================================== */

/* Mobile Breakpoints:
   - Small phones: < 480px
   - Phones: < 768px
   - Tablets: < 1024px
   - Desktop: >= 1024px
*/

/* ========================================
   HEADER BAR - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {
    .header-bar {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 12px 16px !important;
        gap: 12px;
        height: auto !important;
    }

    .header-bar>div:first-child {
        width: 100%;
    }

    .header-bar h1 {
        font-size: 16px !important;
    }

    .header-bar p {
        font-size: 11px !important;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    .logo-container img {
        height: 32px !important;
    }
}

/* ========================================
   FLOATING PANELS - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {

    /* Hide floating panels on mobile by default */
    .floating-panel {
        display: none !important;
    }

    /* Keep legend visible but smaller */
    .floating-panel.bottom-4.right-4 {
        display: block !important;
        width: auto !important;
        max-width: 180px;
        padding: 12px !important;
        bottom: 8px !important;
        right: 8px !important;
        font-size: 11px;
    }

    .floating-panel h3 {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .floating-panel .space-y-2 {
        gap: 6px;
    }

    .floating-panel .text-xs {
        font-size: 10px !important;
    }

    /* RIPE Atlas reference - keep visible but smaller */
    .fixed.bottom-4.left-4 {
        bottom: 8px !important;
        left: 8px !important;
    }

    .fixed.bottom-4.left-4 a {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    .fixed.bottom-4.left-4 svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ========================================
   DRAWERS - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {

    /* Make drawers full width on mobile */
    .node-detail-panel,
    #probeDrawer {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Adjust drawer header */
    #probeDrawer .p-6 {
        padding: 16px !important;
    }

    /* Smaller flag in drawer */
    #probeDrawer .w-16.h-16 {
        width: 48px !important;
        height: 48px !important;
    }

    #probeDrawer h2 {
        font-size: 18px !important;
    }

    #probeDrawer p {
        font-size: 12px !important;
    }

    /* Grid adjustments */
    #probeDrawer .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   MAP - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {
    #map {
        height: 100vh !important;
        height: 100dvh !important;
        /* Dynamic viewport height for mobile browsers */
    }

    /* Zoom controls */
    .leaflet-control-zoom {
        margin-right: 8px !important;
        margin-top: 60px !important;
    }

    .leaflet-control-zoom a {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 18px !important;
    }

    /* Attribution */
    .leaflet-control-attribution {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
}

/* ========================================
   MARKERS - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {
    .custom-marker {
        transform: scale(0.8);
    }

    .marker-dot {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ========================================
   REPORTS DRAWER - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {
    .reports-drawer .drawer-content {
        width: 100% !important;
    }

    .reports-drawer table {
        font-size: 12px !important;
    }

    .reports-drawer th,
    .reports-drawer td {
        padding: 8px 6px !important;
    }

    /* Hide some columns on very small screens */
    .reports-drawer th:nth-child(4),
    .reports-drawer td:nth-child(4),
    .reports-drawer th:nth-child(5),
    .reports-drawer td:nth-child(5) {
        display: none;
    }
}

/* ========================================
   LOADING OVERLAY - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {

    #loading,
    #loadingOverlay {
        padding: 20px;
    }

    #loading .h-12.w-12 {
        height: 40px !important;
        width: 40px !important;
    }

    #loading-text,
    #loadingOverlay p {
        font-size: 14px !important;
    }
}

/* ========================================
   NODE STATISTICS PANEL - Mobile
   ======================================== */
@media (max-width: 768px) and (min-width: 480px) {

    /* On landscape tablets, show node stats in a better position */
    #nodeStatsPanel {
        display: block !important;
        top: auto !important;
        bottom: 80px !important;
        left: 8px !important;
        width: 240px !important;
        max-height: 300px;
        overflow-y: auto;
    }
}

/* ========================================
   CHARTS - Mobile Responsive
   ======================================== */
@media (max-width: 768px) {

    #latencyChart,
    #nodeRttChart,
    #nodeChangeChart {
        height: 160px !important;
    }

    .apexcharts-canvas {
        max-width: 100% !important;
    }
}

/* ========================================
   PROBE ANALYSIS TABLE - Mobile
   ======================================== */
@media (max-width: 768px) {
    #nodeProbeTable table {
        font-size: 11px !important;
    }

    #nodeProbeTable td,
    #nodeProbeTable th {
        padding: 6px 8px !important;
    }
}

/* ========================================
   BUTTONS & INTERACTIONS - Mobile
   ======================================== */
@media (max-width: 768px) {

    /* Increase touch target sizes */
    button,
    .close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Larger close buttons */
    .node-detail-panel .close-btn,
    #probeDrawer button[onclick*="close"] {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ========================================
   STATISTICS CARDS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .grid-cols-3>div {
        padding: 12px !important;
    }

    .grid-cols-3 .text-2xl {
        font-size: 20px !important;
    }
}

/* ========================================
   SMALL PHONES - Extra Compact
   ======================================== */
@media (max-width: 480px) {

    /* Even more compact spacing */
    .p-6 {
        padding: 12px !important;
    }

    .p-5 {
        padding: 10px !important;
    }

    .p-4 {
        padding: 8px !important;
    }

    /* Smaller text */
    .text-2xl {
        font-size: 18px !important;
    }

    .text-xl {
        font-size: 16px !important;
    }

    .text-lg {
        font-size: 14px !important;
    }

    /* Compact legend */
    .floating-panel.bottom-4.right-4 {
        max-width: 140px;
        padding: 8px !important;
    }

    .floating-panel .w-3.h-3 {
        width: 10px !important;
        height: 10px !important;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {

    /* Adjust for landscape mode */
    .header-bar {
        padding: 8px 16px !important;
    }

    .floating-panel.bottom-4.right-4 {
        bottom: 4px !important;
        right: 4px !important;
    }

    .fixed.bottom-4.left-4 {
        bottom: 4px !important;
        left: 4px !important;
    }
}

/* ========================================
   TOUCH OPTIMIZATIONS
   ======================================== */
@media (hover: none) and (pointer: coarse) {

    /* Touch device optimizations */
    .hover\:bg-gray-100:hover,
    .hover\:bg-gray-50:hover {
        background-color: inherit;
    }

    /* Larger tap targets */
    a,
    button,
    .legend-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================
   ACCESSIBILITY - High Contrast
   ======================================== */
@media (prefers-contrast: high) {
    .floating-panel {
        border: 2px solid #000 !important;
    }

    .marker-dot {
        border: 2px solid #000 !important;
    }
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Uncomment if you want dark mode support */
    /*
    body {
        background: #1a1a1a;
    }

    .floating-panel,
    .header-bar,
    #probeDrawer,
    .node-detail-panel {
        background: #2d2d2d !important;
        color: #ffffff !important;
    }

    .floating-panel h3,
    .text-gray-900 {
        color: #ffffff !important;
    }

    .text-gray-500,
    .text-gray-600 {
        color: #cccccc !important;
    }
    */
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {

    .header-bar,
    .floating-panel,
    .fixed,
    #probeDrawer,
    .node-detail-panel,
    button {
        display: none !important;
    }

    #map {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }
}