/* ============================================================================
 * responsive-fix.css
 * Generic mobile/responsive hardening layer. Loaded LAST so it overrides
 * earlier rules. Does NOT change colors, fonts, or visual design — only
 * fixes overflow, stacking, and mobile usability issues.
 * ============================================================================ */

/* 1. Prevent any stray horizontal overflow on the whole page ------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 2. Images and media never exceed their container ---------------------- */
img, video, iframe, svg, canvas, embed, object {
    max-width: 100%;
    height: auto;
}

/* 3. Tables — wrap automatically so they scroll horizontally on mobile --- */
/* Any <table> that isn't already inside a .table-responsive wrapper */
table {
    max-width: 100%;
}

@media (max-width: 768px) {
    /* Make all tables horizontally scrollable on mobile */
    table:not(.no-responsive) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Keep thead/tbody visible inside the scrollable block */
    table:not(.no-responsive) > thead,
    table:not(.no-responsive) > tbody,
    table:not(.no-responsive) > tfoot {
        display: table;
        width: 100%;
    }
}

/* 4. Hard-coded large widths get capped at viewport width --------------- */
.container, .wrapper, .main, main, .content, .page, .page-content {
    max-width: 100%;
}

/* 5. Common grid/flex layouts stack on mobile --------------------------- */
@media (max-width: 768px) {
    .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6,
    .row, .flex-row, .two-col, .three-col, .four-col {
        grid-template-columns: 1fr !important;
        flex-direction: column;
    }

    .col, .col-2, .col-3, .col-4, .col-5, .col-6,
    [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* 6. Sidebars collapse on mobile ---------------------------------------- */
@media (max-width: 992px) {
    .layout-sidebar,
    .sidebar-layout,
    .with-sidebar {
        display: block !important;
    }

    .sidebar, aside.sidebar, .side-nav {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-bottom: 1rem;
    }
}

/* 7. Buttons and inputs — comfortable mobile tap targets ---------------- */
@media (max-width: 768px) {
    button, .btn, input[type="submit"], input[type="button"], a.btn {
        min-height: 44px;
    }

    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], select, textarea {
        max-width: 100%;
        min-height: 44px;
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }
}

/* 8. Typography scales down on small screens --------------------------- */
@media (max-width: 576px) {
    h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }

    body {
        font-size: 15px;
    }
}

/* 9. Padding adjustments on narrow viewports --------------------------- */
@media (max-width: 576px) {
    .container, .wrapper, main, .main-content, .page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card, .panel, .box {
        padding: 12px;
    }
}

/* 10. Pre/code blocks scroll instead of overflow ------------------------ */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
}

/* 11. Long unbreakable strings wrap -------------------------------------- */
p, li, td, th, dt, dd, blockquote, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 12. Modal/dialog width caps ------------------------------------------- */
.modal, .modal-content, .dialog, dialog {
    max-width: 100%;
}

@media (max-width: 768px) {
    .modal, .modal-content, .dialog {
        width: 95%;
        margin: 12px auto;
    }
}

/* 13. Navigation — hide desktop-only items on mobile where marked ------- */
@media (max-width: 768px) {
    .hide-mobile, .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only, .show-mobile {
        display: none !important;
    }
}