/* ===================================================================
 * styles-responsive.css
 * Purpose: Mobile, tablet (641-1024), wide-monitor (1440+) responsive rules + horizontal-overflow safeguard
 * Extracted from styles.css during the Apr 2026 split (task #23).
 * =================================================================== */
/* Mobile responsiveness enhancements */
/* Global horizontal-overflow safeguard — added in responsive pass (Apr 2026).
   Wide flex/toolbar children (BOQ, Takeoff) were pushing the viewport sideways
   on phones. min-width:0 lets flex children shrink; overflow-x:clip prevents
   the body from being a horizontal scroll container while still allowing
   .table-responsive wrappers to scroll horizontally as intended. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}
body > * {
    min-width: 0;
}

@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Mobile rules lifted out of .tab-pane scope (Apr 2026 responsive pass).
       Previously these were nested inside `.tab-pane { … }` using CSS-nesting
       syntax, which silently scoped iOS-zoom prevention and 44px touch
       targets to the BOQ tabs view only. */
    .form-control,
    .form-select,
    .input-group .form-control {
        font-size: 16px; /* prevent iOS Safari zoom on focus */
    }

    .btn {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .toast-container {
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* Tablet band — first-class for on-site workflows (BOQ, Takeoff, PO, Catalog).
   Added in Apr 2026 responsive pass. Targets the 641–1024px iPad band that
   no other rule covered. */
@media (min-width: 641px) and (max-width: 1024px) {
    .container,
    .container-md,
    .container-lg {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .form-control,
    .form-select {
        font-size: 16px;
    }

    .btn {
        min-height: 40px;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* Per-surface tablet rules for PO, Projects, Admin — Apr 2026 responsive pass.
   These pages have no dedicated CSS file and were inheriting the desktop
   layout on iPads. Wrap their data tables in a horizontal scroll container
   and tighten the card grid for the iPad portrait sweet spot. */
@media (min-width: 641px) and (max-width: 1024px) {
    /* PO line-items table + Projects card grid + Admin tables */
    .po-page .table,
    .po-detail .table,
    .projects-page .table,
    .admin-page .table,
    table.admin-table {
        font-size: 0.92rem;
    }

    .po-page .table-responsive,
    .projects-page .table-responsive,
    .admin-page .table-responsive,
    body[class*="admin"] .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Projects card grid: prefer 2-up on iPad portrait, 3-up on landscape. */
    .projects-page .row-cols-md-2 > [class*="col-"],
    .projects-page .row-cols-lg-3 > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* Wide-monitor polish — added in Apr 2026 responsive pass.
   Caps reading widths so marketing copy doesn't stretch to 80+ chars,
   while leaving data tables free to use the extra width and showing
   more columns at once on PO / Projects / Admin. */
@media (min-width: 1440px) {
    .landing-page .lp-section .container,
    .landing-page .lp-hero .container,
    .auth-container,
    .lead {
        max-width: 1200px;
    }

    p,
    .lp-feature-card p,
    .lp-section-subtitle {
        max-width: 70ch;
    }

    /* Let data-heavy tables breathe on wide monitors instead of getting
       capped by the default Bootstrap container width. */
    .po-page .container,
    .projects-page .container,
    .admin-page .container,
    body[class*="admin"] .container {
        max-width: 1600px;
    }

    .po-page .table,
    .projects-page .table,
    .admin-page .table,
    table.admin-table {
        white-space: nowrap; /* keep more columns visible without wrapping */
    }
}