/* ============================================
   RESPONSIVE OVERRIDES
   NXRC Track Day - Mobile & Tablet UI
   ============================================ */

/* ── Global Breakpoints ── */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Tablet (md) */
@media (max-width: 992px) {
    .navbar-container {
        padding: 0 var(--spacing-md);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Mobile (sm) */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 2rem;
        /* Increased from 1.5rem */
        --control-height: 48px;
        --spacing-mobile-edge: 1.5rem;
        /* New variable for edge spacing */
    }

    .container,
    .dashboard-content {
        padding: 0 var(--spacing-mobile-edge) !important;
        /* Used new variable with !important override */
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Typography */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Layout & Grid Stacking */
    .grid-2,
    .grid-3,
    .grid-4,
    .stats-grid,
    .vehicle-grid,
    .dashboard-grid,
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Cards */
    .card-body {
        padding: 1rem;
    }

    .card-stat .stat-value {
        font-size: 2rem;
    }

    /* Forms */
    .form-control,
    .form-select {
        font-size: 16px;
        /* Prevent iOS zoom */
    }

    /* Tables - Horizontal Scroll */
    .table-responsive {
        border: none;
        margin: 0 -1rem;
        width: calc(100% + 2rem);
        padding: 0 1rem;
    }

    /* Submit Lap Specifics */
    .time-input-group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .time-part select {
        width: 70px;
        font-size: 1.5rem;
    }

    .time-preview-enhanced {
        font-size: 2.5rem;
        padding: 0.75rem 1.5rem;
        width: 100%;
        text-align: center;
    }

    .time-separator {
        display: none;
        /* Hide colons on very small screens if stacked */
    }

    /* Buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-submit-lap {
        font-size: 1.25rem;
        padding: 1.25rem;
    }

    /* Profile / Dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .user-profile-header {
        flex-direction: column;
        text-align: center;
    }

    .user-avatar-lg {
        margin: 0 auto 1rem;
    }
}

/* Extra Small (xs) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .time-part select {
        width: 60px;
        font-size: 1.25rem;
    }
}

/* ── Utility Classes for Mobile ── */
@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }

    .mobile-block {
        display: block !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-mt-1 {
        margin-top: 1rem !important;
    }

    .mobile-mb-1 {
        margin-bottom: 1rem !important;
    }
}