/**
 * RoadMonitor Mobile Styles
 * Mobile-specific styles and overrides
 */

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    /* Compressed top bar */
    #topbar {
        top: 8px;
        left: 8px;
        right: 8px;
        gap: 8px;
    }

    #logo {
        padding: 8px 12px;
    }

    #logo-text {
        font-size: 13px;
    }

    #logo-sub {
        display: none;
    }

    #search-wrap {
        max-width: 200px;
    }

    /* Smaller legend */
    #legend {
        bottom: 16px;
        left: 8px;
        padding: 10px 14px;
        min-width: 140px;
    }

    /* Full-screen card */
    #card-overlay {
        width: 100%;
        max-width: 100%;
    }

    /* Smaller metrics */
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .metric-value {
        font-size: 18px;
    }
}

/* Touch-friendly controls */
@media (hover: none) and (pointer: coarse) {
    .ctrl-btn,
    .survey-item,
    .search-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Remove hover effects */
    .survey-item:hover,
    .search-item:hover {
        background: transparent;
    }

    /* Active state instead */
    .survey-item:active,
    .search-item:active {
        background: #f8f9fa;
    }
}

/* Safe area for mobile devices */
@supports (padding: env(safe-area-inset-top)) {
    #topbar {
        top: calc(8px + env(safe-area-inset-top));
    }

    #legend {
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    #info-bar {
        bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* iOS specific adjustments */
@supports (-webkit-touch-callout: none) {
    /* Prevent elastic scrolling */
    #card-overlay,
    #dashboard-overlay {
        -webkit-overflow-scrolling: touch;
    }

    /* Fix input zoom on focus */
    input[type="text"],
    select {
        font-size: 16px;
    }
}