/* =========================================================
   Site-wide mobile improvements (all public pages and the
   contractor/supplier dashboards).

   Home and the registration pages carry their own tuned
   overrides in mobile-overrides.css; everything here is
   generic — overflow guards, scrollable tables, stacking
   forms — and scoped inside mobile media queries so the
   desktop design is unaffected.

   Loaded from web/layouts/head.blade.php, after every other
   stylesheet, so its mobile rules win on specificity ties.
   ========================================================= */

/* ---------- Tablet & below (≤991.98px) ---------- */
@media (max-width: 991.98px) {

    html, body { overflow-x: hidden; }

    /* Media never wider than its container */
    img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

    /* Tables scroll inside their own container instead of
       stretching the page. .table-scroll-wrap is added around
       bare tables by mobile-tables.js; Bootstrap's own
       .table-responsive keeps working as before. */
    .table-scroll-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-scroll-wrap > table { margin-bottom: 0; }

    /* Long unbroken strings (emails, IBANs, file names) must
       not force horizontal scroll */
    td, th { word-break: break-word; }

    /* Dashboard cards/panels breathe less on small screens */
    .setting-wrp, .requests-box, .product-wrp { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Phones (≤767.98px) ---------- */
@media (max-width: 767.98px) {

    /* Action rows (Accept / Reject / Negotiate…) wrap instead
       of overflowing */
    .d-flex { flex-wrap: wrap; gap: 8px; }

    /* Buttons with hardcoded inline widths span the row */
    .btn-main { max-width: 100%; white-space: normal; }
    button.btn-main[style*="width"], a.btn-main[style*="width"] { width: 100% !important; }

    /* Forms stack: no fixed-width inputs poking out */
    input, select, textarea, .form-control, .form-select { max-width: 100%; }

    /* The giant desktop offsets above action areas (e.g. the
       order page) shrink to something phone-sized */
    div[style*="margin-top: 100px"] { margin-top: 36px !important; }

    /* Workflow/timeline card rows scroll horizontally as one
       strip rather than squashing */
    .timeline.flex-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    /* Page banners on the static pages (About, Contact, FAQ,
       Terms, Privacy, Procure Material) — backstop for pages
       whose only media queries target the banner title */
    .banner-title { font-size: 30px; line-height: 1.2; }
    .banner-subtitle { font-size: 16px; line-height: 1.4; }

    /* Modals fit the viewport */
    .modal-dialog { margin: 10px; max-width: calc(100% - 20px); }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    .banner-title { font-size: 24px; }
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
}