/**
 * PWA Mobile Stability
 * Prevents text overflow, border conflicts, and box collisions across all devices.
 * Load AFTER vrenum-ui.css
 */

/* ─── TOUCH & TAP ─────────────────────────────────────────────────────── */
* {
    -webkit-tap-highlight-color: rgba(254, 60, 114, 0.15);
    -webkit-text-size-adjust: 100%;
}

button, a, input, select, textarea {
    touch-action: manipulation;
}

/* ─── BOX MODEL ENFORCEMENT ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ─── TEXT OVERFLOW PREVENTION ────────────────────────────────────────── */
body {
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

h1, h2, h3, h4, h5, h6,
p, span, label, td, th, li, a, div {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* Long strings (emails, URLs, hashes) */
code, pre, .monospace, [class*="hash"], [class*="address"] {
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* ─── MEDIA CONTAINMENT ───────────────────────────────────────────────── */
img, video, svg, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* ─── BORDER CONFLICT PREVENTION ──────────────────────────────────────── */
.card + .card,
.glass-card + .glass-card,
[class*="card"] + [class*="card"] {
    margin-top: -1px;
}

/* ─── SAFE AREA (notch/island devices) ────────────────────────────────── */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ─── FONT FALLBACK ───────────────────────────────────────────────────── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ─── MOBILE (≤768px) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    .container, .content, .main-content, main, section, .page-content {
        max-width: 100vw;
        overflow-x: hidden;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Cards fill width, no overflow */
    .card, .glass-card, .stat-card, [class*="card"] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
    }

    /* Tables don't break layout */
    table {
        width: 100%;
        table-layout: fixed;
    }

    td, th {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* iOS zoom prevention on inputs */
    input, select, textarea {
        font-size: 16px;
    }

    /* Buttons wrap instead of overflow */
    .btn, button, [class*="btn"] {
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
    }

    /* Flex containers wrap */
    .flex, .d-flex, [style*="display: flex"], [style*="display:flex"] {
        flex-wrap: wrap;
    }

    /* Grids collapse to single column */
    .grid, [class*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Modals go full-width bottom sheet */
    .modal-content, .immersive-modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── SMALL PHONE (320px–375px) ───────────────────────────────────────── */
@media (max-width: 375px) {
    html { font-size: 14px; }

    .container, .content, .main-content, main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card, .glass-card, [class*="card"] {
        padding: 12px;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
}

/* ─── LANDSCAPE PHONE ─────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content, .immersive-modal {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ─── SKELETON LOADING (prevents CLS) ────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text { height: 14px; margin-bottom: 8px; width: 80%; }
.skeleton-title { height: 20px; margin-bottom: 12px; width: 60%; }
.skeleton-card { height: 120px; width: 100%; }

/* ─── PWA STANDALONE MODE ─────────────────────────────────────────────── */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}