/* ============================================================
   responsive.css — foundational mobile-first responsive fixes.
   Page-level breakpoint tweaks live in style.css; this file
   contains layout-wide foundations only.
   ============================================================ */

/* Phase 1 (T10.1 Foundation): minimal — just ensures the new
   single-document layout renders correctly on all viewports.
   Page-specific fixes are layered in T10.2–T10.7. */

/* Prevent horizontal scroll on small screens caused by full-bleed
   sections that overflow .container width. */
html, body {
    max-width: 100vw;
}

/* Make all images responsive by default. */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure tables in dashboard pages can be horizontally scrolled
   on narrow screens instead of breaking the layout. Wrap any
   <table> in <div class="table-responsive"> for best UX. */
@media (max-width: 767px) {
    .table-responsive table {
        font-size: 0.9rem;
    }
}

/* Mobile navbar: when collapsed, push the menu below the brand
   and give it a usable touch target size. */
@media (max-width: 991px) {
    .navbar {
        height: auto !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .navbar-toggler {
        border: 1px solid #db2326;
        padding: 0.35rem 0.55rem;
    }
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(219, 35, 38, 0.25);
        outline: none;
    }
    .navbar-collapse {
        padding: 1rem 0;
        border-top: 1px solid #f1f1f1;
        margin-top: 0.5rem;
    }
    .navbar-collapse .navbar-nav {
        gap: 0.25rem;
    }
    .navbar-collapse .navbar-nav .nav-item {
        margin: 0.25rem 0;
    }
    .navbar-collapse .navbar-nav .nav-link {
        padding: 0.65rem 0.75rem;
        border-radius: 4px;
    }
    .navbar-collapse .navbar-nav .nav-link.active {
        background-color: rgba(219, 35, 38, 0.08);
        color: #db2326;
    }
    .navbar-collapse .nav-btn {
        display: block;
        width: 100%;
        margin: 0.35rem 0;
    }
    .navbar-collapse .nav-btn .nav-btn-link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.65rem 0.75rem;
    }
}

/* Top-bar: stack phone/email and socials on small screens. */
@media (max-width: 767px) {
    .top-bar .row > [class^="col-"] {
        text-align: center;
    }
    .top-bar .d-flex {
        justify-content: center !important;
    }
    .top-bar .mx-3 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}

/* Modals: full-height on mobile so long forms (signup with KYC)
   are scrollable instead of clipped. */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 0;
        min-height: 100vh;
    }
    .modal-dialog-centered {
        min-height: 100vh;
    }
    .modal-content {
        border-radius: 0;
    }
}

/* Footer: tighten gutters on small screens. */
@media (max-width: 767px) {
    footer .col-md-3 {
        margin-bottom: 1.5rem;
    }
}

/* Wide-desktop / 4K (1920px+): cap container width but allow
   generous gutters so pages don't look stranded. */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
}

/* ============================================================
   Dashboard pages — left nav offcanvas + mobile-friendly tables.
   ============================================================ */

/* Mobile menu toggle button styling. */
.dashboard-nav-toggle {
    text-align: left;
    font-weight: 600;
    color: #333;
    border-color: #d1d5db;
}
.dashboard-nav-toggle .mdi {
    margin-right: 0.5rem;
    font-size: 1.25rem;
    vertical-align: middle;
}

/* Offcanvas drawer body should look like the desktop sidebar. */
.offcanvas .left-navaigation-section .navbar-nav {
    flex-direction: column;
    gap: 0.25rem;
}
.offcanvas .left-navaigation-section .nav-link {
    padding: 0.65rem 0.75rem;
    border-radius: 4px;
    color: #333;
    font-weight: 500;
}
.offcanvas .left-navaigation-section .nav-link.active {
    background-color: rgba(219, 35, 38, 0.08);
    color: #db2326;
}
.offcanvas .left-navaigation-section .nav-link .mdi {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Dashboard tables: horizontal scroll on small screens to avoid layout
   breaks. The page-level styles control desktop appearance; this just
   prevents overflow on narrow viewports. */
@media (max-width: 767px) {
    .shipments-table-wrapper,
    .invoices-table-wrapper,
    .credit-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .shipments-table,
    .invoices-table,
    .credit-table {
        min-width: 640px;
    }

    /* Dashboard quote header: smaller heading, tighter gutters. */
    .quote-header h2 {
        font-size: 1.25rem;
    }

    /* Search/filter toolbar: stack on mobile. */
    .shipments-toolbar .row > [class^="col-"] {
        margin-bottom: 0.5rem;
    }
    .shipments-toolbar .col-md-3.text-end {
        text-align: left !important;
    }
}

/* ============================================================
   Cart page (/cart) — package builder + summary sidebar.
   ============================================================ */

/* Tables (items-table, package-table) horizontal scroll on mobile. */
@media (max-width: 767px) {
    .items-table,
    .summary-card,
    .cart-section .table {
        font-size: 0.9rem;
    }
    .items-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Sticky summary card pinning is wasted screen on mobile —
       let it scroll inline. */
    .summary-card.sticky-top {
        position: static !important;
        top: auto !important;
        margin-top: 1rem;
    }

    /* Tighten gutters between cart sections. */
    .cart-section {
        margin-bottom: 1rem !important;
    }
    .cart-section .row > [class^="col-"] {
        margin-bottom: 0.5rem;
    }
}

/* ============================================================
   Booking page (/booking) — multi-section form.
   ============================================================ */
@media (max-width: 767px) {
    /* Form rows stack with breathing room. */
    #booking-form .row > [class^="col-"],
    .booking-section .row > [class^="col-"] {
        margin-bottom: 0.5rem;
    }

    /* Sea-freight tables and any nested data tables scroll. */
    .sea-freight-section .table,
    .booking-section .table {
        font-size: 0.85rem;
    }
    .sea-freight-section .table-responsive,
    .booking-section .table-responsive {
        margin-bottom: 0.75rem;
    }

    /* Action buttons full-width and stacked. */
    .booking-actions,
    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .booking-actions .btn,
    .form-actions .btn {
        width: 100%;
    }

    /* Service options grid: auto-fill cards on mobile. */
    .service-options-row > [class^="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================================
   Quote / Tracking / Success / Home / About / Contact pages.
   ============================================================ */
@media (max-width: 767px) {
    /* Hero sections: smaller heading, less vertical padding. */
    section#banner,
    section#cover {
        height: auto !important;
        min-height: 320px;
        padding: 2rem 0;
    }
    section#banner h1,
    section#cover h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* Quote-page tab nav scrolls horizontally instead of wrapping. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Quote-result cards full-width. */
    .quote-card,
    .tracking-card {
        margin-bottom: 1rem;
    }
}

/* ============================================================
   Sign-in / Sign-up modals + Profile-Settings page.
   ============================================================ */
@media (max-width: 575px) {
    /* Already-floating modal labels need bigger touch targets. */
    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.25rem + 2px);
    }

    /* Profile settings: form rows stack. */
    .profile-settings-form .row > [class^="col-"] {
        margin-bottom: 0.5rem;
    }
    .profile-settings-form .btn {
        width: 100%;
    }
}

/* Footer headings smaller on mobile. */
@media (max-width: 767px) {
    footer h4 {
        font-size: 1.1rem;
    }
    footer .col-md-3 {
        margin-bottom: 1rem;
    }
}