/* Additional responsive styles for City Dog Tracker */

/* Enhanced mobile-first responsive design */
@media (max-width: 767px) {
    /* Mobile timetable styling with smooth animations */
    #mobile-timetable {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(4px);
        background-color: white;
    }
    
    /* Mobile map optimization */
    #map {
        height: calc(100vh - 160px); /* Account for header and ferry buttons */
    }
    
    /* Prevent body scroll when timetable is open */
    body.timetable-open {
        overflow: hidden;
    }
    
    /* Enhanced touch targets */
    .ferry-button,
    .touch-button {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Mobile-optimized timetable items */
    #mobile-timetable-list .flex {
        padding: 1rem 0.5rem;
    }
    
    #mobile-timetable-list h4 {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    #mobile-timetable-list .text-xs {
        font-size: 0.875rem;
    }
    
    /* Status indicators mobile optimization */
    #connection-status span,
    #last-update span {
        display: none;
    }
    
    #connection-status,
    #last-update {
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Tablet specific styles */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Adjust timetable panel width for tablets */
    #timetable-panel {
        width: 320px;
    }
    
    /* Optimize ferry buttons for tablet */
    .ferry-button {
        padding: 0.75rem 1.5rem;
    }
}

/* Large desktop styles */
@media (min-width: 1024px) {
    /* Wider timetable panel for large screens */
    #timetable-panel {
        width: 384px;
    }
    
    /* Enhanced spacing */
    .ferry-button {
        padding: 0.875rem 1.75rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .ferry-marker,
    .terminal-marker {
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* Status indicators in dark mode */
    #connection-status,
    #last-update {
        background-color: rgba(31, 41, 55, 0.9);
        color: white;
    }
    
    /* Mobile timetable in dark mode - override only the main background */
    #mobile-timetable {
        background-color: white !important;
    }
    
    /* Don't override internal styling - let it match desktop */
}

/* Landscape orientation on mobile */
@media (max-width: 767px) and (orientation: landscape) {
    /* Adjust mobile timetable height in landscape */
    #mobile-timetable {
        max-height: 50vh;
    }
    
    /* Optimize header in landscape */
    header {
        padding: 0.5rem 1rem;
    }
    
    header h1 {
        font-size: 1.25rem;
    }
    
    header p {
        font-size: 0.75rem;
    }
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    .mobile-timetable-overlay,
    .ferry-button,
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus states for keyboard navigation */
.ferry-button:focus,
.touch-button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .ferry-button {
        border: 2px solid currentColor;
    }
    
    #connection-status,
    #last-update {
        border: 1px solid currentColor;
    }
}