/* Shared mobile styles — loaded globally from base.html.
   Standardized breakpoints: 768px (phone/small tablet), 480px (small phone). */

/* Global overflow guard — prevents rogue horizontal scroll on any page */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fluid hero typography utility */
.fluid-h1 {
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.1;
}

/* Horizontal scroll wrapper for wide tables */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll > table {
    min-width: 600px;
}

/* ===== Phone / small tablet (<= 768px) ===== */
@media (max-width: 768px) {
    /* Ensure tap targets meet the 44px iOS/Android guideline.
       Scoped to interactive elements; uses min-height so existing padding is preserved. */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"],
    .cal-nav-btn {
        min-height: 44px;
    }

    /* Fixed-size icon buttons need width bumped too */
    .sidenav-toggle {
        width: 44px;
        height: 44px;
    }

    /* Prevent iOS Safari from auto-zooming on focused inputs < 16px */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: max(16px, 1rem);
    }

    /* Common container padding fallback so content never kisses the edges */
    .container,
    .page-wrap,
    .section-inner {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Images/videos should never overflow their parent on mobile */
    img, video {
        max-width: 100%;
        height: auto;
    }

    /* Auth pages (login/register): keep card away from screen edges on narrow phones */
    .auth-form-wrapper {
        margin: 32px auto;
        padding: 0 16px;
    }
    .auth-card {
        padding: 24px;
    }
}

/* ===== Small phone (<= 480px) ===== */
@media (max-width: 480px) {
    /* Slightly tighter body copy on small screens */
    body {
        font-size: 0.95rem;
    }
}