/*
 * Global Nexus — Mobile Responsiveness Fixes
 * Loaded on every page to ensure small-screen compatibility.
 * Targets phones ≤ 640px, with extra attention to ≤ 400px (iPhone SE, small Androids).
 */

/* ─── 1. Base: stop horizontal overflow on every page ─── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ─── 2. Root font-size scaling — the single most impactful mobile fix.
        All Tailwind utility classes use rem, so reducing the root size
        proportionally shrinks every padding, margin, and font on the page.
        16px = normal desktop size. ─── */
@media (max-width: 480px) {
    html { font-size: 14.5px; }  /* ~91% of desktop → gentle reduction */
}
@media (max-width: 400px) {
    html { font-size: 13.5px; }  /* ~84% — noticeable but not jarring */
}
@media (max-width: 360px) {
    html { font-size: 12.5px; }  /* ~78% — for very small Androids */
}
@media (max-width: 320px) {
    html { font-size: 12px; }    /* minimum – old iPhone SE / Galaxy A series */
}

/* ─── 3. Container & card padding ─── */
@media (max-width: 480px) {

    /* Tailwind p-6 / p-8 → tighten on mobile */
    .p-6  { padding: 0.875rem !important; }
    .p-8  { padding: 1rem    !important; }
    .p-10 { padding: 1.25rem !important; }
    .p-12 { padding: 1.5rem  !important; }

    .px-6  { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
    .px-8  { padding-left: 1rem     !important; padding-right: 1rem     !important; }
    .px-10 { padding-left: 1.25rem  !important; padding-right: 1.25rem  !important; }

    .py-6  { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
    .py-8  { padding-top: 1rem     !important; padding-bottom: 1rem     !important; }
    .py-10 { padding-top: 1.25rem  !important; padding-bottom: 1.25rem  !important; }
    .py-12 { padding-top: 1.5rem   !important; padding-bottom: 1.5rem   !important; }

    /* Section gaps */
    .gap-6 { gap: 0.75rem !important; }
    .gap-8 { gap: 1rem    !important; }
}

/* ─── 4. Forms — prevent iOS auto-zoom & ensure full-width inputs ─── */
/*
 * CRITICAL: Never let input font-size drop below 16px, even though we
 * reduced html font-size above. iOS Safari zooms the viewport when any
 * input has font-size < 16px. Use absolute px, not rem.
 */
input, textarea, select {
    font-size: 16px !important;
    max-width: 100%;
}

/* ─── 5. Images & media — never overflow ─── */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ─── 6. Buttons — tap-friendly minimum size ─── */
@media (max-width: 640px) {
    button, a.button, [role="button"], [type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ─── 7. Dashboard: main content area small-screen adjustments ─── */
@media (max-width: 640px) {

    /* Main scrollable content area — add bottom breathing room for floating nav */
    main.flex-1,
    .main-content {
        padding-bottom: 5rem;
    }

    /* Dashboard stat/info cards — compact on tiny screens */
    .dashboard-card,
    [class*="rounded-xl"].p-4,
    [class*="rounded-2xl"].p-4 {
        padding: 0.75rem !important;
    }

    /* Transfer quick-stat grids */
    .grid.grid-cols-3 {
        gap: 0.5rem !important;
    }
    .grid.grid-cols-4 {
        gap: 0.5rem !important;
    }
}

/* ─── 8. Tables — horizontal scroll instead of overflow ─── */
@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ─── 9. Modal dialogs & cards — full-width on tiny screens ─── */
@media (max-width: 480px) {
    /* Cap max-width so cards don't bleed past the viewport edge */
    .max-w-md,
    .max-w-lg,
    .max-w-xl,
    .max-w-2xl {
        max-width: calc(100vw - 1.5rem) !important;
    }
}

/* ─── 10. Register / Login form cards ─── */
@media (max-width: 400px) {
    /* Stepper and step content on very small screens */
    .step-content {
        padding: 0.75rem !important;
        min-height: 260px !important;
    }

    /* Logo / icon containers */
    .logo-container img,
    header img {
        height: 2rem !important;
    }
}

/* ─── 11. Floating bottom nav (dashboard) — safe on small screens ─── */
@media (max-width: 360px) {
    /* Compress the 5-icon bottom nav on very tiny phones */
    .fixed.bottom-2.left-4.right-4 {
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 0.375rem !important;
    }
    .fixed.bottom-2.left-4.right-4 span {
        display: none !important;   /* hide labels, keep icons only */
    }
    .fixed.bottom-2.left-4.right-4 a {
        padding: 0.5rem 0.25rem !important;
    }
}

/* ─── 12. Section spacers ─── */
@media (max-width: 480px) {
    .section-gap,
    .mb-8  { margin-bottom: 1.25rem !important; }
    .mb-10 { margin-bottom: 1.5rem  !important; }
    .mb-12 { margin-bottom: 1.75rem !important; }
    .mt-8  { margin-top: 1.25rem    !important; }
    .mt-10 { margin-top: 1.5rem     !important; }
    .mt-12 { margin-top: 1.75rem    !important; }
}

/* ─── 13. Very small screens (≤ 350px) — last resort ─── */
@media (max-width: 350px) {
    body {
        font-size: 13px;
    }
    h1 { font-size: 1.2rem  !important; }
    h2 { font-size: 1.05rem !important; }
    h3 { font-size: 0.95rem !important; }

    .p-4 { padding: 0.625rem !important; }
    .p-6 { padding: 0.75rem  !important; }
    .p-8 { padding: 0.875rem !important; }

    .text-sm  { font-size: 0.75rem  !important; }
    .text-base { font-size: 0.8125rem !important; }
}