/* AutoTrack — Mobile Responsive Styles */

@media (max-width: 768px) {

    /* ── Navigation ───────────────────────────────────────────── */
    .dashboard-nav {
        padding: 10px 0;
    }

    .nav-content {
        padding: 0 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-brand {
        font-size: 1.2rem;
    }

    .nav-menu {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        gap: 0;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .nav-menu::-webkit-scrollbar { display: none; }

    .nav-link {
        white-space: nowrap;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    .user-menu {
        width: 100%;
        justify-content: space-between;
        padding: 4px 0;
    }

    .user-email {
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 60vw;
    }

    /* Original dropdown hidden on mobile — panel is portaled to body by nav.js */
    .nav-item .dropdown-menu {
        display: none !important;
    }

    /* The portaled panel items */
    #nav-dropdown-panel .dropdown-item {
        padding: 14px 20px;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #475569;
        text-decoration: none;
    }

    #nav-dropdown-panel .dropdown-header {
        padding: 10px 20px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    #nav-dropdown-panel .dropdown-divider {
        height: 1px;
        background: #e2e8f0;
        margin: 6px 0;
    }

    #nav-dropdown-panel .dropdown-icon {
        font-size: 1.2rem;
        width: 28px;
        text-align: center;
    }

    #nav-dropdown-panel .dropdown-title {
        font-weight: 500;
        font-size: 0.95rem;
    }

    #nav-dropdown-panel .dropdown-desc {
        font-size: 0.8rem;
        color: #94a3b8;
    }

    /* ── Page Header ──────────────────────────────────────────── */
    .page-header {
        padding: 0 12px;
        margin-bottom: 16px;
    }

    .page-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .vehicle-selector {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 12px 16px !important;
        min-height: 44px;
        border-radius: 8px;
        -webkit-appearance: auto;
        appearance: auto;
    }

    /* ── Stats Grid ───────────────────────────────────────────── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 12px;
        margin-bottom: 16px;
    }

    .stat-card {
        padding: 14px !important;
    }

    .stat-value,
    .big-number {
        font-size: 1.5rem !important;
    }

    /* ── Content Grid (side-by-side → stacked) ────────────────── */
    .content-grid,
    .grid,
    .vehicles-grid,
    .actions-grid,
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Cards ────────────────────────────────────────────────── */
    .dashboard-container,
    .onboarding-container {
        padding: 0 12px;
    }

    .stat-card,
    .vehicle-card,
    .service-history-card,
    .add-service-card,
    .vehicle-form,
    .card {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    /* ── Vehicle Cards (My Garage) ────────────────────────────── */
    .vehicle-grid,
    #vehiclesGrid {
        grid-template-columns: 1fr !important;
        padding: 0 12px;
    }

    .vehicle-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .vehicle-actions button {
        flex: 1;
        min-width: 80px;
        padding: 10px 8px !important;
        font-size: 0.85rem !important;
    }

    /* ── Forms ────────────────────────────────────────────────── */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important; /* prevents iOS zoom on focus */
        min-height: 44px;
        padding: 10px 12px !important;
    }

    .form-group textarea {
        min-height: 80px;
    }

    button[type="submit"],
    .btn-submit,
    .btn-skip,
    .btn-rerun {
        width: 100%;
        padding: 14px !important;
        font-size: 1rem !important;
        min-height: 48px;
    }

    .button-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ── Dashboard widgets ────────────────────────────────────── */
    .widgets-row,
    .widget-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Quick Add wizard ─────────────────────────────────────── */
    .service-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .vehicle-selection-grid {
        grid-template-columns: 1fr !important;
    }

    .progress-steps {
        gap: 4px !important;
    }

    .step-label {
        font-size: 0.7rem !important;
    }

    /* ── Mileage page ─────────────────────────────────────────── */
    .comparison-grid,
    #comparisonGrid {
        grid-template-columns: 1fr !important;
        padding: 0 12px;
    }

    /* ── Maintenance history ──────────────────────────────────── */
    .history-item {
        padding: 12px !important;
    }

    /* ── Onboarding ───────────────────────────────────────────── */
    .onboarding-container {
        margin: 16px auto;
    }

    .step-indicator {
        gap: 10px !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ── Test page ────────────────────────────────────────────── */
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Modals ───────────────────────────────────────────────── */
    .modal-content,
    #editModal .modal-content {
        margin: 10px !important;
        padding: 16px !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ── Tables / timeline ────────────────────────────────────── */
    .timeline-item {
        padding: 12px !important;
    }

    /* ── Misc ─────────────────────────────────────────────────── */
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.1rem !important; }

    .section-label {
        padding: 0 12px;
    }
}

/* Extra small phones */
@media (max-width: 390px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .nav-link {
        padding: 8px 8px !important;
        font-size: 0.8rem !important;
    }

    .service-types-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}