/**
 * Mobile & Accessibility Enhancements
 * Added as part of Phase 2 improvements
 */

/* ============================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ============================================ */

/* Mobile breakpoints */
@media (max-width: 640px) {
    /* Main control panel - make collapsible on mobile */
    .control-panel-mobile {
        max-width: calc(100vw - 2rem);
        width: 100%;
    }

    /* Reduce padding on mobile */
    .control-panel-mobile {
        padding: 1rem !important;
    }

    /* Stack buttons vertically on very small screens */
    .bottom-buttons-mobile {
        flex-direction: column;
        width: auto;
    }

    .bottom-buttons-mobile button {
        width: 100%;
    }

    /* Make city modal full screen on mobile */
    .city-modal-mobile {
        max-height: 85vh;
        max-width: 95vw;
        margin: 1rem;
    }

    /* Reduce font sizes slightly */
    h1 {
        font-size: 1.25rem !important;
    }

    /* Make touch targets larger (min 44px) */
    button,
    select,
    input[type="checkbox"],
    input[type="range"],
    .city-chip {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ensure checkboxes are touchable */
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* Hide less critical text on very small screens */
    .hide-on-mobile {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Even more compact on very small screens */
    .control-panel-mobile {
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        max-width: none;
    }

    /* Make legend text smaller */
    #legend-labels {
        font-size: 8px;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    .control-panel-mobile {
        max-width: 24rem;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus indicators for keyboard navigation */
*:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Better focus for buttons */
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Focus for checkboxes */
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip to main content link (for screen readers) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* Better contrast for disabled elements */
button:disabled,
select:disabled,
input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ensure sufficient color contrast */
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] input:focus-visible {
    outline-color: var(--accent-hover);
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   LOADING SKELETON SCREENS
   ============================================ */

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.skeleton {
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background: linear-gradient(
        90deg,
        var(--border) 25%,
        rgba(255, 255, 255, 0.2) 50%,
        var(--border) 75%
    );
    background-size: 200% 100%;
    border-radius: 4px;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 2rem;
    margin-bottom: 0.5rem;
    width: 70%;
}

.skeleton-button {
    height: 2.5rem;
    width: 100%;
}

/* Loading state for control panel */
.loading-state .control-content {
    opacity: 0.3;
    pointer-events: none;
}

/* ============================================
   IMPROVED TOUCH INTERACTIONS
   ============================================ */

/* Remove tap highlight on mobile */
button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}

/* Better button press feedback */
button:active {
    transform: scale(0.98);
}

.city-chip:active {
    transform: translateY(0) scale(0.95);
}

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

@media print {
    /* Hide UI elements when printing */
    .glass-panel,
    .fixed,
    .absolute,
    button {
        display: none !important;
    }

    /* Ensure map is visible */
    #map {
        width: 100%;
        height: 100vh;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .skeleton {
        animation: none;
        opacity: 0.7;
    }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: high) {
    .glass-panel {
        border: 2px solid var(--text-primary);
        backdrop-filter: none;
        background: var(--bg-panel);
    }

    button {
        border: 2px solid currentColor;
    }

    *:focus-visible {
        outline-width: 3px;
    }
}

/* ============================================
   LANDSCAPE MOBILE OPTIMIZATION
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Make control panel scrollable in landscape */
    .control-panel-mobile {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
    }

    /* Hide help text in landscape to save space */
    .landscape-hide {
        display: none;
    }
}

/* ============================================
   COLLAPSIBLE PANEL (Mobile)
   ============================================ */

.panel-collapsed {
    transform: translateX(calc(-100% + 3rem));
}

.panel-toggle {
    position: absolute;
    right: -2.5rem;
    top: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
    display: none;
}

@media (max-width: 640px) {
    .panel-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   IMPROVED SELECT DROPDOWNS
   ============================================ */

select {
    cursor: pointer;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    appearance: none;
}

[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* ============================================
   TOAST NOTIFICATIONS (for ErrorHandler)
   ============================================ */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    pointer-events: none;
}

.toast-container > * {
    pointer-events: all;
    margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
    .toast-container {
        top: auto;
        bottom: 5rem;
        left: 1rem;
        right: 1rem;
    }
}