/* ===================================================================
   SHARED MOBILE PRIMITIVES — added 2026-07-30
   See docs/mobile/ for the per-page notes.

   Loaded from Pages/Shared/Menu.cshtml, right after menu.css, so every page
   that renders the shared header gets these. menu.css owns the responsive
   HEADER; this file owns responsive rules for page CONTENT that are not
   specific to one page.

   Rules that only make sense for a single page (ArticleBrowse's filter
   disclosure, ArticleInfo's #fullcontent cap, the .productsContainer gutter)
   stay in that page's own <style> block.

   HARD RULE: everything here lives inside a max-width media query. Desktop
   must stay pixel-identical.
   =================================================================== */

/* ===================================================================
   Compact-header band (<=1129px). Separate from the 768px block below because
   this is where menu.css switches the header to its compact form, not where
   phone layout starts.
   =================================================================== */
@media (max-width: 1129px) {

    /* style.css sets `.productsContainer { padding: 0 210px }` — 420px of gutter
       sized for a desktop window. Below the compact-header breakpoint that alone
       forced the legacy #container table to 699px and shifted the WHOLE page,
       shared header included, off to the right, clipping the cart total.

       1129px rather than 768px because between 769 and 1129 the two-column desktop
       layout still fits comfortably once the gutter is gone (measured at 900px:
       1062px needed vs an 877px content box, and dropping the gutter brings it to
       exactly 877px). Without this the whole band was silently clipped, since
       menu.css sets overflow-x: hidden on html/body below 1129.

       Shared because ArticleBrowse and Package both use this container. */
    .productsContainer {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 768px) {

    /* --- Touch targets ------------------------------------------------
       WCAG/Apple minimum is 44x44. These controls are shared across the
       article pages (and any future page using the same markup), so they are
       sized once here instead of being repeated per page.

       Sized with min-height / min-width / padding / line-height — never
       `display`. Several of these elements are shown and hidden by page
       scripts via inline `display`, and an `!important` display rule here
       would outrank that and break the show/hide behaviour. This is not
       hypothetical: setting `display:flex !important` on ArticleBrowse's
       filter rows made every manufacturer permanently visible, so the
       "Visa mer"/"Visa mindre" button relabelled itself but nothing moved.
       ------------------------------------------------------------------ */

    .breadcrumb-link {
        display: inline-block;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    /* Quantity stepper (product cards, product page, cart lines).

       The line-height needs BOTH the two-class selector and !important. The pages set
       `.qty-counter-spin-number .qty-counter-decrement { line-height: 16px }` and
       `... .qty-counter-increment { line-height: 20px }`, which outranks a single-class
       rule here — and those page <style> blocks render after this file, so equal
       specificity would lose too. Left unfixed the boxes are correctly 44px and aligned
       but the glyphs sit near the top of each box at two DIFFERENT heights (16 vs 20),
       which reads as a crooked stepper. */
    .qty-counter-decrement,
    .qty-counter-increment,
    .qty-counter-spin-number .qty-counter-decrement,
    .qty-counter-spin-number .qty-counter-increment {
        min-width: 44px;
        min-height: 44px;
        line-height: 44px !important;
        text-align: center;
    }

    .qty-counter-output {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Primary action button ("Lägg i kundvagn" and friends) */
    .site-button-new {
        min-height: 44px;
    }

    /* Favourite / compare icon buttons */
    .favorite-div,
    .compare-div {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* --- DevExtreme pager --------------------------------------------
       Two separate problems, both generic to any grid:

       1. Every page link renders on one `white-space: nowrap` line
          ("1 2 3 4 5 . . . 112"), giving the pager a ~341px min-content that
          the surrounding legacy table inherits. Below ~374px viewport that
          was the widest thing on the page. Let the numbers wrap.

       2. The chips are ~29x30. DevExtreme paints the selected page as a
          filled circle sized by the element itself, so bumping min-height /
          line-height to 44px blows it up into a huge disc and pushes the
          next-page arrow onto its own line. Grow the TOUCH area with a
          centred transparent ::after instead, and add small side margins so
          neighbouring hit areas don't overlap.
       ------------------------------------------------------------------ */
    .dx-datagrid-pager .dx-pages,
    .dx-datagrid-pager .dx-page-indexes,
    .dx-datagrid-pager .dx-page-sizes {
        white-space: normal !important;
    }

    .dx-datagrid-pager .dx-page,
    .dx-datagrid-pager .dx-page-size,
    .dx-datagrid-pager .dx-navigate-button {
        position: relative;
        margin-left: 3px;
        margin-right: 3px;
    }

    .dx-datagrid-pager .dx-page::after,
    .dx-datagrid-pager .dx-page-size::after,
    .dx-datagrid-pager .dx-navigate-button::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* --- DevExtreme grid header-filter / group expander --------------
       The header-filter funnel is ~20x20 and the group chevron ~16x16, both far
       below the 44px minimum. Neither can be sized directly: the chevron sits in a
       fixed 30px grid column and the funnel inside the column header, so growing
       either changes the grid's own layout.

       Same transparent centred ::after trick as the pager above — DevExtreme draws
       both glyphs with ::before, so ::after is free. Written once here rather than
       per grid (it was page-local on OrderStatus first, then Attest needed it too).
       ------------------------------------------------------------------ */
    .dx-datagrid .dx-datagrid-group-closed,
    .dx-datagrid .dx-datagrid-group-opened,
    .dx-datagrid .dx-header-filter {
        position: relative;
    }

    .dx-datagrid .dx-datagrid-group-closed::after,
    .dx-datagrid .dx-datagrid-group-opened::after,
    .dx-datagrid .dx-header-filter::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* --- Action button rows ------------------------------------------
       .buttons-container (customerStyles.css) is a right-aligned flex row. On a
       phone a row of 3-4 buttons either overflows or squeezes each below a usable
       width, so stack them full-width instead. Used by the cart and the attest
       detail page.

       flex-basis 100% rather than a column direction so the container's own
       justify-content/gap keep working unchanged on desktop.
       ------------------------------------------------------------------ */
    .buttons-container {
        flex-wrap: wrap;
    }

    .buttons-container > .dx-button {
        flex: 1 1 100%;
        min-height: 44px;
    }

    .buttons-container > .dx-button .dx-button-content {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- DevExtreme dropdown popups ----------------------------------
       Popups render in a body-level overlay, so they are not reachable from a
       page-scoped selector and are easy to forget. Default list rows are 24px. */
    .dx-selectbox-popup-wrapper .dx-list-item,
    .dx-dropdowneditor-overlay .dx-list-item {
        min-height: 44px;
    }

    .dx-selectbox-popup-wrapper .dx-list-item-content,
    .dx-dropdowneditor-overlay .dx-list-item-content {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* --- Legacy left-menu shell -------------------------------------
       Some pages (the /customer_settings/* family) render the legacy shell with a
       two-column content row: td#leftmenu beside td#content. At 430px that split the
       viewport 219 / 221, so the settings form was clipped and the page scrolled
       horizontally. Stack them.

       Scoped with :has(> td#leftmenu) so it only touches rows that actually have a left
       menu — td#content is the main content cell on EVERY page and must not be blanket
       display:block'd. Also note this targets table#container (the legacy shell), not
       Contact's own table.container, which has its own page-local rule.
       ------------------------------------------------------------------ */
    #container > tbody > tr:has(> td#leftmenu),
    #container > tbody > tr:has(> td#leftmenu) > td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* --- Hardcoded 800px content wrappers ----------------------------
       Four pages in the /customer_settings/* family wrap their content in a
       literal `<div style="width: 800px">`: settings, delivery, messages and
       CartFieldMapping. Measured at 430px, that alone put the legacy #container
       table at 803-823px on each of them.

       Matched on the inline style rather than a class because these divs have no
       class to hook. The attribute-substring selector only matches elements that
       literally carry that width, so it cannot catch anything else by accident;
       both spacings are listed since the markup is inconsistent.

       max-width is 100cqw, not 100%: a percentage resolves against the legacy
       auto-width table cell, which is itself sized by this content.
       ------------------------------------------------------------------ */
    #fullcontent [style*="width: 800px"],
    #fullcontent [style*="width:800px"] {
        width: auto !important;
        max-width: 100cqw !important;
        box-sizing: border-box;
    }

    /* --- `calc(100vw - 265px)` containers -----------------------------
       Pages/Shared/_CustomerDepartmentGrid.cshtml (and four admin pages) wrap their
       grid in `<div class="boxcontainer" style="max-width: calc(100vw - 265px)">`.
       The 265px reserves room for the left menu — but on mobile that menu is stacked
       ABOVE the content, so nothing needs reserving and the subtraction just eats the
       screen: at a 430px viewport it resolves to 165px, which crushed the departments
       grid to 180px with 12px-wide columns and no scroller to reach them.

       This only shows up with data. With an empty grid DevExtreme collapses to roughly
       the same 180px on its own, which is why an earlier pass mistook it for a benign
       empty-state artifact — it took impersonating a user whose customer actually has
       departments to see it.

       100cqw rather than 100vw for the usual reason: vw includes the scrollbar.
       ------------------------------------------------------------------ */
    #fullcontent [style*="100vw - 265px"] {
        max-width: calc(100cqw - 20px) !important;
    }

    /* --- DevExtreme form controls: touch targets ---------------------
       DevExtreme renders text buttons at 28px and text inputs at ~32px. This
       same pair had already been written page-locally on Settings, CustomerChange,
       OrderStatus and DeliveryAddresses, so it belongs here instead.

       Scoped to #fullcontent so it only affects page content, and expressed as
       min-height so it cannot shrink anything that is already larger.

       Deliberately NOT applied to the pager: those chips are `.dx-page` /
       `.dx-navigate-button`, not `.dx-button`, and forcing height on them blows
       the selected page into a giant filled disc — they get a transparent
       ::after hit area further up this file instead.
       ------------------------------------------------------------------ */
    #fullcontent .dx-button {
        min-height: 44px;
    }

    #fullcontent input.dx-texteditor-input {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Plain (non-DevExtreme) selects. Bootstrap's .form-control gives them no vertical
       padding, so at the inherited 13px font they render about 18px tall - measured on
       /customer_settings/CartFieldMapping, where the DevExtreme rule above does not
       apply because these are ordinary <select> elements. */
    #fullcontent select {
        min-height: 44px;
    }

    /* --- Legacy left menu: headings and links ------------------------
       Once the shell is stacked (rule above) the left menu spans the full width,
       but its .h5 section headings carry a hardcoded `width: 219px` — the width of
       the old desktop column. The grey bars stopped a third of the way across a
       full-width white panel, which reads as an unfinished layout.

       The links themselves are `display: inline` at 15px tall and 60-100px wide,
       far below the 44px touch minimum, and only the text itself is tappable.
       Making them block-level gives a full-width target for the whole row.

       display is set WITHOUT !important on purpose: these are static nav links
       today, but an !important display would outrank any inline show/hide a script
       might apply, which is exactly what broke ArticleBrowse's "Visa mer" button.
       ------------------------------------------------------------------ */
    #leftmenu .h5 {
        width: auto !important;
    }

    #leftmenu a {
        display: block;
        min-height: 44px;
        line-height: 44px;
    }
}