/* =========================================================
   MOBILE RESPONSIVE — TOUCH OPTIMIZED
   ========================================================= */

/* =========================================================
   TABLET (768px and below)
   ========================================================= */

@media (max-width: 768px) {
    /* Increase touch targets */
    button,
    a,
    input,
    select,
    textarea {
        min-height: 48px;
        min-width: 48px;
    }

    /* Adjust spacing for smaller screens */
    :root {
        --panel-pad: 16px;
        --gap: 12px;
    }

    /* Typography scaling for mobile */
    html {
        font-size: 15px;
    }

    /* Main layout adjustment */
    .main-layout {
        flex-direction: column;
    }

    /* Sidebars stack on mobile */
    .sidebar-left,
    .sidebar-right {
        width: 100% !important;
        max-width: none;
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        right: 0;
        height: auto;
        max-height: 50vh;
        overflow-y: auto;
        z-index: 50;
        border-bottom: 1px solid var(--panel-border);
        background: var(--panel);
        transform: translateY(-100%);
        transition: transform 0.3s var(--ease);
    }

    .sidebar-left.active,
    .sidebar-right.active {
        transform: translateY(0);
    }

    /* Hide sidebar toggle buttons initially */
    .sidebar-toggle {
        display: flex !important;
    }

    /* Map takes full width */
    .map-area {
        width: 100%;
        height: 100%;
    }

    /* Adjust topbar for mobile */
    .topbar-nav {
        flex-wrap: wrap;
        gap: 2px;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Partner logos hide on small screens */
    .partner-logos {
        display: none;
    }

    /* Adjust panel sections */
    .panel-section {
        padding: 14px;
    }

    /* Adjust controls */
    .control-panel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Form elements */
    input,
    select,
    textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Modals/overlays */
    .modal {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 100px);
    }

    /* Lists and tables */
    .panel-block {
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Adjust shadows for performance */
    * {
        box-shadow: none !important;
    }

    .btn,
    .info-card,
    .status-banner {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* =========================================================
   SMALL PHONES (480px and below)
   ========================================================= */

@media (max-width: 480px) {
    /* Reduce padding further */
    :root {
        --panel-pad: 12px;
        --gap: 8px;
        --topbar-h: 60px;
    }

    html {
        font-size: 14px;
    }

    /* Topbar compact */
    .topbar {
        padding: 0 12px;
    }

    .brand-link {
        gap: 8px;
    }

    .app-logo {
        width: 32px;
        height: 32px;
    }

    .app-brand h1 {
        font-size: 16px;
    }

    .app-brand p {
        font-size: 11px;
    }

    /* Hide non-essential navigation */
    .nav-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Download dropdown compact */
    #dlTrigger {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Sidebar optimizations */
    .sidebar-left,
    .sidebar-right {
        max-height: 60vh;
    }

    /* Panel content */
    .panel-section {
        padding: 12px;
    }

    .panel-title-row h2 {
        font-size: 16px;
    }

    /* Buttons smaller on very small screens */
    .btn {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 44px;
    }

    .btn-lg {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Context chips */
    .context-chip {
        font-size: 12px;
        padding: 4px 8px;
    }

    /* Forms */
    label {
        font-size: 13px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
        padding: 10px;
    }

    /* Info cards */
    .info-card {
        padding: 12px;
    }

    .info-card h3 {
        font-size: 12px;
    }

    .info-row {
        padding: 6px 0;
        gap: 6px;
    }

    .info-label,
    .info-value {
        font-size: 12px;
    }

    /* Notifications container */
    .notifications-container {
        max-width: calc(100vw - 16px);
        top: 10px !important;
        right: 8px !important;
        left: auto !important;
    }

    .toast {
        padding: 12px;
    }

    .toast-message {
        font-size: 13px;
    }

    /* Floating windows */
    .floating-window {
        width: 90vw !important;
        max-width: calc(100vw - 20px);
    }

    /* Charts */
    .chart-container {
        height: 300px;
    }
}

/* =========================================================
   LANDSCAPE MODE (Tablets)
   ========================================================= */

@media (max-width: 1024px) and (orientation: landscape) {
    .sidebar-left,
    .sidebar-right {
        max-height: 70vh;
    }

    .main-layout {
        grid-template-columns: auto 1fr auto;
    }

    .sidebar-left {
        width: 280px;
        transform: translateX(-100%);
    }

    .sidebar-right {
        width: 280px;
        transform: translateX(100%);
    }
}

/* =========================================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    a,
    input,
    select {
        min-height: 48px;
        min-width: 48px;
    }

    /* Remove hover effects on touch devices */
    button:hover,
    a:hover {
        transform: none;
    }

    /* Add active states instead */
    button:active,
    a:active {
        opacity: 0.8;
    }

    /* Increase spacing */
    .btn {
        padding: 12px 16px;
    }

    /* Remove hover-triggered tooltips */
    [data-tooltip] {
        display: none;
    }

    /* Touch-friendly dropdowns */
    .dropdown-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
    }
}

/* =========================================================
   SAFE AREA INSETS (Notch Support)
   ========================================================= */

@supports (padding: max(0px)) {
    .topbar {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    .notifications-container {
        top: max(20px, env(safe-area-inset-top));
        right: max(20px, env(safe-area-inset-right));
        left: max(20px, env(safe-area-inset-left));
    }

    .main-layout {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* =========================================================
   HIGH DPI SCREENS (Retina)
   ========================================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Use larger fonts */
    body {
        font-size: 16px;
    }

    /* Adjust shadows for clarity */
    .btn,
    .info-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* =========================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================= */

/* Disable transitions on low-power devices */
@media (prefers-reduced-motion: reduce) {
    .sidebar-left,
    .sidebar-right {
        transform: none;
        display: none;
    }

    .sidebar-left.active,
    .sidebar-right.active {
        display: block;
    }
}

/* =========================================================
   VIEWPORT ORIENTATION
   ========================================================= */

@media (orientation: portrait) {
    .main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .sidebar-left,
    .sidebar-right {
        position: fixed;
        top: var(--topbar-h);
        width: 100%;
        z-index: 50;
    }
}

@media (orientation: landscape) {
    .topbar {
        padding: 0 16px;
    }

    .brand-link {
        gap: 8px;
    }

    .app-brand p {
        display: none;
    }
}

/* =========================================================
   PRINT STYLES
   ========================================================= */

@media print {
    .topbar,
    .sidebar-left,
    .sidebar-right,
    .notifications-container,
    .sidebar-toggle {
        display: none !important;
    }

    .main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .map-area {
        width: 100%;
        height: auto;
    }
}

/* =========================================================
   INPUT FOCUS (Prevent iOS zoom)
   ========================================================= */

input,
select,
textarea {
    font-size: 16px !important; /* Prevent iOS zoom on input focus */
}

/* =========================================================
   GESTURE SUPPORT
   ========================================================= */

/* Support for touch-action */
.map-area {
    touch-action: manipulation;
}

button,
a,
input {
    touch-action: manipulation;
}

/* Prevent double-tap zoom on buttons */
.btn,
button,
a {
    -webkit-touch-callout: none;
}