/**
 * TideTrack Frontend - Responsive Styles
 * Mobile-first responsive design with breakpoints for tablet and desktop
 */

/* ============================================
   MOBILE BASE STYLES (<768px)
   ============================================ */

/* Mobile/Portrait: Keep panel as a left sidebar, but start collapsed */
@media (max-width: 767px) {
    :root {
        --panel-width: 280px;
    }

    .left-panel {
        /* Override: stay as left sidebar, not bottom drawer */
        top: var(--header-height);
        left: 0;
        right: auto;
        bottom: 0;
        width: var(--panel-width);
        height: auto;
        transform: translateX(calc(-1 * var(--panel-width)));
        /* start collapsed */
    }

    .left-panel.expanded,
    .left-panel:not(.collapsed) {
        transform: translateX(0);
    }

    .left-panel.collapsed {
        transform: translateX(calc(-1 * var(--panel-width)));
    }

    /* Map takes full screen; adjusts when panel is open */
    .map-container {
        left: 0;
        right: 0;
    }

    .left-panel:not(.collapsed)~.map-container {
        left: var(--panel-width);
    }

    /* Larger touch targets */
    .btn {
        min-height: 48px;
        padding: var(--space-3) var(--space-6);
    }

    .form-input,
    .form-select {
        min-height: 48px;
        font-size: var(--text-lg);
    }

    /* Simplified header */
    .app-header {
        padding: 0 var(--space-4);
    }

    .app-header__status {
        display: none;
    }

    .app-header__logo {
        font-size: var(--text-lg);
    }

    /* Map controls — vertical column on mobile (all in one div now) */
    .map-controls {
        top: var(--space-2);
        right: var(--space-2);
    }

    .map-control-btn {
        width: 44px;
        height: 44px;
    }

    /* Move lat/lon readout right so hamburger doesn't cover it */
    .mouse-coords {
        left: 52px;
    }

    /* Legends stacked */
    .map-legends {
        left: var(--space-2);
        bottom: 80px;
        /* Above drawer */
    }

    .map-legend {
        font-size: var(--text-xs);
    }

    /* Route cards simplified */
    .route-card__stats {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .route-stat {
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    /* Time slider simplified */
    .time-slider__controls {
        flex-direction: column;
    }

    .time-slider__input {
        width: 100%;
    }
}

/* ============================================
   TABLET STYLES (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Panel slides in from left */
    .left-panel {
        transform: translateX(calc(-1 * var(--panel-width)));
    }

    .left-panel.expanded,
    .left-panel:not(.collapsed) {
        transform: translateX(0);
    }

    .left-panel.collapsed {
        transform: translateX(calc(-1 * var(--panel-width)));
    }

    /* Map adjusts for panel */
    .map-container {
        left: 0;
    }

    .left-panel.expanded~.map-container,
    .left-panel:not(.collapsed)~.map-container {
        left: var(--panel-width);
    }

    /* Larger touch targets for iPad */
    .btn {
        min-height: var(--touch-target-min);
    }

    .form-input,
    .form-select {
        min-height: var(--touch-target-min);
    }

    /* Map controls — horizontal row on tablet */
    .map-controls {
        flex-direction: row;
    }

    .map-control-btn {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
    }

    /* Move lat/lon readout right so hamburger doesn't cover it */
    .mouse-coords {
        left: 52px;
    }

    /* Header adjustments */
    .app-header__status {
        gap: var(--space-4);
    }

    /* Panel starts collapsed */
    .left-panel {
        transform: translateX(calc(-1 * var(--panel-width)));
    }
}

/* ============================================
   DESKTOP STYLES (1024px+)
   ============================================ */

@media (min-width: 1024px) {

    /* Panel always visible by default */
    .left-panel {
        transform: translateX(0);
    }

    .left-panel.collapsed {
        transform: translateX(calc(-1 * var(--panel-width)));
    }

    /* Map adjusts accordingly */
    .map-container {
        left: var(--panel-width);
    }

    .left-panel.collapsed~.map-container {
        left: 0;
    }

    /* Full header visible */
    .app-header__status {
        display: flex;
    }
}

/* ============================================
   LARGE DESKTOP (1440px+)
   ============================================ */

@media (min-width: 1440px) {

    /* Slightly larger panel */
    :root {
        --panel-width: 360px;
    }

    /* More spacing */
    .panel-content {
        padding: var(--space-6);
    }

    .panel-section {
        margin-bottom: var(--space-10);
    }

    /* Larger map controls */
    .map-control-btn {
        width: 48px;
        height: 48px;
        font-size: var(--text-xl);
    }

    /* Larger legends */
    .map-legend {
        padding: var(--space-4);
        min-width: 180px;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {

    /* Reduce panel height in landscape */
    .left-panel.expanded {
        height: 60vh;
    }

    /* Adjust legends */
    .map-legends {
        bottom: 70px;
    }
}

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

@media print {

    .app-header,
    .left-panel,
    .map-controls,
    .map-legends {
        display: none !important;
    }

    .map-container {
        position: static;
        width: 100%;
        height: 100vh;
    }

    #map {
        page-break-inside: avoid;
    }
}

/* ============================================
   HIGH DPI DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper borders */
    .card,
    .form-input,
    .btn {
        border-width: 0.5px;
    }

    /* Crisper icons */
    .custom-marker {
        border-width: 2px;
    }
}

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

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .btn,
    .form-input,
    .form-select,
    .layer-toggle,
    .route-card {
        min-height: 48px;
    }

    /* Remove hover effects */
    .btn:hover,
    .layer-toggle:hover,
    .route-card:hover {
        transform: none;
    }

    /* Larger tap areas */
    .toggle-switch {
        width: 52px;
        height: 28px;
    }

    .toggle-slider:before {
        height: 24px;
        width: 24px;
    }

    .toggle-switch input:checked+.toggle-slider:before {
        transform: translateX(24px);
    }

    /* Simplified animations */
    * {
        transition-duration: 0.2s !important;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    .left-panel,
    .map-container,
    .toggle-slider,
    .toggle-slider:before,
    .btn,
    .custom-marker {
        transition: none !important;
    }

    .spinner,
    .loading-spinner,
    .map-loading__spinner {
        animation: none !important;
    }

    /* Show static indicator instead */
    .spinner::after,
    .loading-spinner::after {
        content: "...";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ============================================
   DARK MODE SUPPORT (Future)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Placeholder for future dark mode implementation */
    /*
  :root {
    --color-bg-light: #1A2332;
    --color-bg-dark: #0D1117;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #8B949E;
  }
  */
}

/* ============================================
   ACCESSIBILITY - HIGH CONTRAST
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-text-inverse: #FFFFFF;
        --color-bg-light: #FFFFFF;
        --color-bg-dark: #000000;
    }

    .btn,
    .form-input,
    .card,
    .layer-toggle {
        border: 2px solid currentColor;
    }

    .custom-marker {
        border-width: 4px;
    }

    /* Increase contrast for status indicators */
    .status-dot {
        border: 2px solid currentColor;
    }
}

/* ============================================
   SMALL HEIGHT DEVICES
   ============================================ */

@media (max-height: 600px) {

    /* Reduce header height */
    :root {
        --header-height: 48px;
    }

    .app-header {
        padding: 0 var(--space-4);
    }

    .app-header__logo {
        font-size: var(--text-base);
    }

    /* Compact panel sections */
    .panel-section {
        margin-bottom: var(--space-4);
    }

    .card {
        padding: var(--space-3);
        margin-bottom: var(--space-2);
    }

    /* Smaller form elements */
    .form-group {
        margin-bottom: var(--space-3);
    }
}

/* ============================================
   VERY SMALL DEVICES (<375px)
   ============================================ */

@media (max-width: 374px) {

    /* Further reduce spacing */
    .panel-content {
        padding: var(--space-3);
    }

    .app-header {
        padding: 0 var(--space-3);
    }

    /* Smaller text */
    .app-header__logo {
        font-size: var(--text-base);
    }

    /* Stack route stats vertically */
    .route-card__stats {
        grid-template-columns: 1fr;
    }

    /* Smaller buttons */
    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
}