/* ============================================================
   responsive.css — Consolidated mobile & tablet layer (Task #181)

   Single source of truth for the site-wide responsive *behaviour*
   that previously lived ad-hoc across many files. Per-page files keep
   their own layout media queries; this layer adds the cross-cutting
   concerns that must be consistent everywhere:
     - comfortable touch targets (~44px) on phones/tablets
     - >=16px form inputs so iOS never auto-zooms on focus
     - dynamic-viewport heights so modals/panels respect mobile chrome
     - defensive guards against horizontal overflow

   Canonical breakpoints used site-wide (keep new media queries on these):
     480px  — small phones
     768px  — phones / portrait tablets (hamburger boundary)
     1024px — landscape tablets
     1280px — small desktops

   Loaded LAST in base.html so it can refine earlier rules on small
   screens. Source order (not !important) does the heavy lifting; the
   only !important is the iOS-zoom font-size guard, which must win
   regardless of per-page input styling.
   ============================================================ */

/* ---- Global overflow guards (all viewports) -------------------- */
/* Media must never push the viewport wider than the screen. */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Belt-and-braces: the document itself never scrolls sideways. */
html,
body {
    max-width: 100%;
}

/* ---- Dynamic viewport for overlays (all viewports) ------------- */
/* dvh accounts for the mobile address bar; vh is the safe fallback. */
.modal-content {
    max-height: 92vh;
    max-height: 92dvh;
}

.modal-box {
    max-height: 88vh;
    max-height: 88dvh;
}

.modal-overlay,
.modal {
    max-height: 100vh;
    max-height: 100dvh;
}

/* ============================================================
   Tablet & phone (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    /* Wide data tables stay readable by scrolling rather than
       squashing or overflowing their container. */
    .stats-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Decorative ambient glows use large fixed pixel widths anchored
       from one edge, which pushes the document wider than the screen
       on narrow viewports. Clamp them to the viewport — they are
       purely cosmetic (pointer-events:none, behind content). */
    .page-ambient-glow,
    .hero-ambient-glow,
    .hero-ambient-glow-orange {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
    }
}

/* ============================================================
   Phones / portrait tablets (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* ---- iOS zoom guard: every text-entry control >= 16px ------ */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Give those same controls a comfortable tap height. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    select {
        min-height: 44px;
    }

    textarea {
        min-height: 88px;
    }

    /* ---- Touch targets: text/link controls -------------------- */
    .button,
    .btn,
    .button-auth,
    .auth-submit,
    .nav-link,
    .nav-dropdown-toggle,
    .nav-dropdown-menu a,
    .user-dropdown-content a,
    .user-dropdown-btn,
    .tab-btn,
    .admin-shell-nav__link,
    .text-link,
    .email-verify-action {
        min-height: 44px;
    }

    /* Links/buttons that lay out as inline-flex need cross-axis
       centering so the larger min-height reads as a real target. */
    .button,
    .btn,
    .button-auth,
    .auth-submit,
    .nav-link,
    .nav-dropdown-toggle,
    .nav-dropdown-menu a,
    .user-dropdown-content a,
    .tab-btn,
    .admin-shell-nav__link,
    .email-verify-action {
        display: inline-flex;
        align-items: center;
    }

    .nav-dropdown-menu a,
    .user-dropdown-content a {
        display: flex;
    }

    /* ---- Touch targets: square icon buttons ------------------- */
    .mobile-menu-toggle,
    .close,
    .auth-close,
    .modal-x,
    .modal-close,
    .reveal-btn,
    .pwd-toggle-btn,
    .email-verify-dismiss,
    .cover-edit-btn,
    .avatar-edit-btn,
    .social-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Keep in-field reveal/toggle buttons centred after the size bump. */
    .reveal-btn,
    .pwd-toggle-btn {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ============================================================
   Small phones (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
    /* Edge padding stays tight but never zero so content never
       touches the screen edge. */
    .content-wrapper,
    .app-content {
        padding-left: var(--space-3, 0.75rem);
        padding-right: var(--space-3, 0.75rem);
    }

    /* Stacked auth/profile action rows go full width for easy tapping. */
    .form-actions .button,
    .form-actions .btn {
        width: 100%;
    }
}