/*
 * Mobile UX overrides.
 * Loaded after Vite-compiled style.css so these rules win the cascade.
 *
 * Goals:
 *  1. Sidebar stays closed by default (width: 0) — only opens when user toggles.
 *  2. When OPEN (nav.semi-nav), logo and items don't grow/animate on tap.
 *  3. Sub-menu items are full-width tap targets.
 */

/* ---------------------------------------------------------------------------
   .modal-dialog-scrollable + a <form> wrapper — modal cannot be scrolled at all.

   NOT scoped to a media query: this breaks at any viewport where the content is
   taller than the dialog. It was reported on mobile because that is where it bites
   first.

   Bootstrap builds .modal-content as a flex column and expects .modal-header,
   .modal-body and .modal-footer to be its DIRECT children:
       .modal-dialog-scrollable .modal-content { overflow: hidden }
       .modal-dialog-scrollable .modal-body    { overflow-y: auto }

   When a <form> wraps those three (cancellations/_create_modal — the only modal in
   the app built this way, which is why every other modal scrolls fine), the form
   becomes the single flex child. .modal-body then has no height to scroll within, so
   it grows, and .modal-content's overflow:hidden clips it. The content below the fold
   is unreachable and the dialog will not move.

   Fix: let the form participate in the flex column so the body scrolls inside it.
   --------------------------------------------------------------------------- */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;          /* without this a flex item refuses to shrink below content */
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex-shrink: 0;         /* keep the title and the submit row pinned */
}

@media (hover: none), (max-width: 991.98px) {

    /* When the sidebar IS open, keep its width consistent with hover state
       so the hover transition becomes a no-op. */
    nav.semi-nav,
    nav.semi-nav:hover {
        width: var(--sidebar-width) !important;
    }

    /* Kill transitions only on an OPEN sidebar — leave the closed-to-open
       toggle itself alone so it can still animate (or just snap) into view. */
    nav.semi-nav,
    nav.semi-nav * {
        transition: none !important;
        animation: none !important;
    }

    /* Lock logo container at expanded width when sidebar is OPEN.
       Don't touch overflow — leave the original SCSS rules. */
    nav.semi-nav .app-logo,
    nav.semi-nav:hover .app-logo {
        width: 100% !important;
    }

    nav.semi-nav .app-logo .logo,
    nav.semi-nav:hover .app-logo .logo {
        width: 100% !important;
    }

    nav.semi-nav .app-logo .logo img,
    nav.semi-nav:hover .app-logo .logo img {
        width: 180px !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 575.98px) {
    /* List page headers ("Add X" buttons + search bar) — stack everything
       vertically on phones so the labelled buttons don't overflow horizontally. */
    .list-table-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .list-table-header > div,
    .list-table-header > form {
        width: 100% !important;
    }

    /* The button row inside .list-table-header (Add Sale / Add VOIP / etc.)
       — stack those too so each button is a full-width touch target. */
    .list-table-header > div .btn {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    /* Sub-menu items: make the entire <li> clickable, not just the text. */
    nav.semi-nav .main-nav > li > ul > li {
        padding: 0 !important;
        line-height: normal;
    }

    nav.semi-nav .main-nav > li > ul > li > a {
        display: block;
        width: 100%;
        padding: 0.85rem 1.5rem;
        min-height: 44px;
        line-height: 1.4;
        touch-action: manipulation;
    }

    nav.semi-nav .main-nav > li > a {
        min-height: 48px;
        touch-action: manipulation;
    }

    /* Don't grow the parent menu item when it expands — was pushing siblings
       below it down 10-15px on tap. */
    nav.semi-nav .main-nav > li > a[aria-expanded="true"] {
        font-size: 16px !important;
        margin-bottom: 0 !important;
        padding: 0.6rem 1rem !important;
    }

    /* Bootstrap's collapse animation should resolve immediately on mobile. */
    nav.semi-nav .main-nav .collapse,
    nav.semi-nav .main-nav .collapsing {
        transition: none !important;
    }

    /* Footer: the theme pushes it right by the sidebar width and pins its inner
       container to a fixed desktop width (1346px). On a collapsed-sidebar viewport
       that squashes the footer into a narrow strip — reset both so it fills the width. */
    footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    footer .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    /* Stack the copyright and help/tour links, centered, with breathing room
       instead of cramming them onto one squashed row. */
    footer .row {
        row-gap: 8px;
    }

    footer .col-md-3 {
        width: 100%;
    }

    footer .footer-text,
    footer .footer-text.text-end {
        text-align: center !important;
    }

    footer .footer-text .d-flex {
        justify-content: center !important;
    }
}

/* ---------------------------------------------------------------------------
   Audit additions, 2026-07-19.

   This file previously covered only the sidebar, footer and .list-table-header.
   Tables, long tokens and touch targets were unaddressed, which accounted for the
   bulk of the responsive findings. Each rule below collapses a long tail of
   individual issues rather than patching them view by view.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Serial numbers, circuit IDs, FSANs, Passport UUIDs, bank references, URLs and
       filenames are unbreakable tokens that widen their card or table. Nothing in the
       app broke them before. .app-form-url is referenced by settings/hub/application_forms
       but was never defined anywhere. */
    .card code,
    .card dd,
    .table code,
    .font-mono,
    .app-form-url {
        overflow-wrap: anywhere;
    }

    /* Card headers pairing a heading with action buttons: ~14 views use
       .card-header.d-flex with no flex-wrap, so the buttons push the header wider
       than the viewport. */
    .card-header.d-flex,
    .modal-footer.d-flex,
    .alert.d-flex {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    /* Touch targets. .btn-micro (circuits audit table) is padding 1px 4px at 10px
       font — roughly a 14px target, about a third of the usable minimum.
       !important is required: circuits/index.blade.php sets its own values with
       !important from @section('css'), which loads before this file. */
    .btn-micro,
    .btn-xs,
    .btn-sm.py-0,
    .drilldown-link {
        min-height: 40px !important;
        padding: .35rem .5rem !important;
        font-size: .75rem !important;
        line-height: 1.4 !important;
    }

    /* Checkbox columns in bulk-select tables and permission lists. */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Input groups that squeeze a serial/scan field below usable width. */
    .card-body .input-group {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    /* Filter rows built from .col-auto never stack, because col-auto is content-sized.
       Forces one control per row at phone widths. */
    .card-body form.row > .col-auto,
    form.row.align-items-end > .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .card-body form.row > .col-auto .form-control,
    .card-body form.row > .col-auto .form-select,
    form.row.align-items-end > .col-auto .form-control,
    form.row.align-items-end > .col-auto .form-select {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Modals that cannot be scrolled on small or short viewports.

   Reported symptom: on a phone, a modal's content cannot be scrolled.

   Cause: 24 modals use .modal-dialog-centered WITHOUT .modal-dialog-scrollable.
   Bootstrap centres via `display:flex; align-items:center`, so once the content is
   taller than the viewport the dialog overflows EQUALLY above and below. The .modal
   container does scroll (overflow-y:auto), but the overflow above the start of the
   scroll box is unreachable — so the top of the form, and often the footer buttons,
   cannot be reached at all.

   Fixed here rather than by adding .modal-dialog-scrollable to 24 files, so any modal
   added later is covered too.

   The height query matters as much as the width one: a phone in landscape is ~390px
   tall, which is where this bites hardest.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px), (max-height: 600px) {

    /* Anchor to the top instead of centring, so nothing overflows upward. */
    .modal-dialog-centered {
        align-items: flex-start;
    }

    /* Nothing else is needed to make it scroll: .modal already has overflow-y:auto,
       so once the dialog is top-anchored the whole thing is reachable by scrolling the
       modal container. Constraining .modal-content with max-height would NOT work here
       anyway — percentage/inherited heights need a definite parent height, which is why
       Bootstrap's own .modal-dialog-scrollable sets `height`, not `max-height`. */

    /* Document viewers set inline height:80vh / max-width:90vw, which leaves a
       ~320px-wide, ~310px-tall pane for an A4 scan. Give them the full screen. */
    .modal-xl,
    .modal-lg {
        max-width: none !important;
        margin: .5rem;
    }
    .modal-body iframe[style*="vh"],
    .modal-body embed[style*="vh"] {
        height: 70vh !important;
        height: 70dvh !important;
    }
}