/* ═══════════════════════════════════════════════════════════
   Cloud Craft Trade — Shared Mobile Utilities
   Tüm sayfalardan <link rel="stylesheet" href="/css/mobile-utils.css"> ile bağlanır.
   ═══════════════════════════════════════════════════════════ */

/* Safe Area Insets (notch/dynamic island/home indicator) */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* Prevent horizontal scroll on all mobile */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Responsive media defaults */
img, video, canvas, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* Smooth touch scrolling utility */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* Mobile table horizontal scroll */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
    /* Minimum touch target — WCAG 2.5.8 */
    a, button, [role="button"], input[type="submit"],
    input[type="button"], .btn, .nav-link, .tab-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Safe area padding for fixed elements */
    .safe-bottom {
        padding-bottom: var(--safe-bottom);
    }
    .safe-top {
        padding-top: var(--safe-top);
    }
}

/* ── Galaxy S24 Ultra (≤430px) ── */
@media (max-width: 430px) {
    .container, .main-container, [class*="container"] {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── iPhone 15 Pro / 14 Pro (≤393px) ── */
@media (max-width: 393px) {
    .container, .main-container, [class*="container"] {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ── iPhone 14 / 13 / 12 (≤390px) ── */
@media (max-width: 390px) {
    .container, .main-container, [class*="container"] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ── Small mobile font floor (≤480px) ── */
@media (max-width: 480px) {
    body {
        font-size: max(14px, 1rem);
    }

    small, .text-sm, .text-xs, caption, .label, .meta {
        font-size: max(12px, 0.75rem);
    }
}