/* ================================================================
   USLNC Mobile Foundation — static/mobile.css
   Shared responsive utilities included by all application pages.
   Load AFTER page-specific stylesheets so utilities can override.
   ================================================================ */

/* ── Prevent horizontal overflow on the entire page ── */
html {
    overflow-x: hidden;
}

/* ── Larger base font for comfortable mobile reading ──
   18px root scales all em/rem values up ~12% vs browser default 16px.
   Sub-text at 0.85em becomes ~15.3px instead of ~13.6px.
   Desktop font sizes are unaffected (rule is scoped to ≤768px). */
@media (max-width: 768px) {
    html {
        font-size: 18px;
    }
}

/* ── Utility: show/hide by viewport ── */
.show-mobile         { display: none !important; }
.show-mobile-flex    { display: none !important; }

@media (max-width: 768px) {
    .hide-mobile         { display: none !important; }
    .show-mobile         { display: block !important; }
    .show-mobile-flex    { display: flex !important; }
    .full-width-mobile   { width: 100% !important; min-width: 0 !important; }
    .text-center-mobile  { text-align: center !important; }
    .stack-mobile        { flex-direction: column !important; }
}

/* ── Horizontal-scroll wrapper for wide data tables ──
   Usage:  <div class="table-scroll-wrapper"><table>…</table></div> */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.table-scroll-wrapper > table {
    min-width: 540px;
}

/* ── Touch-friendly minimum tap targets (WCAG 2.5.5) ── */
@media (max-width: 991px) {
    .nav-mobile-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* General buttons: ensure 44 px height so fingers can tap them */
    button:not(.nav-mobile-toggle):not([class*="toggle"]):not([class*="tab"]),
    .btn:not([class*="tab"]),
    [role="button"]:not([class*="tab"]) {
        min-height: 44px;
    }

    /* touch-action on interactive elements reduces 300 ms click delay */
    button, a, [role="button"], input, select, textarea {
        touch-action: manipulation;
    }
}

/* ── iOS / Android zoom prevention ──
   Font sizes below 16 px trigger auto-zoom on iOS Safari.
   This rule runs last so it overrides most per-page overrides.
   Pages that deliberately use large fonts are not affected. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ── Generic modal / overlay sizing on mobile ──
   Keeps modals from overflowing the viewport. */
@media (max-width: 768px) {
    .modal-overlay > div,
    .modal-content,
    .modal-panel,
    .modal-body {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 480px) {
    .modal-overlay > div,
    .modal-content,
    .modal-panel,
    .modal-body {
        padding: 20px 16px !important;
    }
}

/* ── Action-button rows: stack vertically on very small screens ── */
@media (max-width: 480px) {
    .action-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .action-buttons .btn,
    .action-buttons button {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ── Form grid helpers ── */
@media (max-width: 768px) {
    .form-row,
    .form-grid {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .form-row > *,
    .form-grid > * {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ── Card / panel padding reduction on small screens ── */
@media (max-width: 480px) {
    .card,
    .panel,
    .section-card {
        padding: 16px !important;
        border-radius: 8px !important;
    }
}

/* ── Prevent long words from overflowing narrow containers ── */
@media (max-width: 768px) {
    p, li, td, th, label, span.overflow-safe {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}