/* =============================================================================
   responsive.css — mobile / tablet rules for the whole site.

   Rules of this file (see tasks/todo-responsive-design.md):
   - Everything lives inside @media (max-width: 991.98px) — desktop (>= 992px) is never touched.
   - Configure Metronic instead of overriding it. No !important except to beat an inline style,
     and every such rule says which page needs it.
   - Never edit style.bundle*.css / scripts.bundle.js.
   ============================================================================= */

@media (max-width: 991.98px) {

    /* ---- Shell -------------------------------------------------------------- */

    /* Guard only — NOT a fix. On a real phone an element wider than the screen still makes the
       layout viewport expand (measured: innerWidth 482 on a 390px iPhone), which zooms the page out
       AND drags the parked sidebar drawer into view. Always remove the overflow at its source.
       On <body> ONLY: it propagates to the viewport, so window still scrolls (sticky header,
       scroll-top, KTScroll keep working). On both html+body the body becomes the scroller and
       window.scrollY is stuck at 0. */
    body {
        overflow-x: hidden;
    }

    /* Defensive: a closed drawer is parked just outside the device edge, so any future overflow that
       widens the layout viewport would expose it ("side menu stays open"). Keep it unreachable until
       Metronic actually opens it. Transition/animation is unaffected — visibility flips instantly. */
    .app-sidebar.drawer:not(.drawer-on) {
        visibility: hidden;
    }

    .app-sidebar.drawer.drawer-on {
        visibility: visible;
    }

    /* Toolbar: page title / breadcrumb on one line, action buttons wrap below it on phones. */
    #kt_app_toolbar_container {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    #kt_app_toolbar_container > .d-flex.align-items-center {
        flex-wrap: wrap;
    }

    /* ---- Shared page patterns (list / report skeleton) ---------------------- */

    /* 2.1 Search card: keyword input on its own line, then the Search / Clear / Advanced buttons wrap. */
    #search-form .card-body > .d-flex.align-items-center {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    #search-form .card-body > .d-flex.align-items-center > .position-relative {
        flex: 1 1 100%;
    }

    #search-form .card-body > .d-flex.align-items-center > .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* !important is needed here only because Bootstrap's .me-5 / .ms-2 utilities are themselves
       !important; on phones the spacing comes from `gap` instead. */
    #search-form .card-body > .d-flex.align-items-center > .d-flex > .btn,
    [data-kt-customer-table-toolbar="base"] > * {
        margin-inline: 0 !important;
    }

    /* 2.2 / 2b.1 Title + sort/columns/export toolbar under the search card.
       Anchored on the page SKELETON, not on [data-kt-customer-table-toolbar="base"]: only 14 of the
       186 _SortForm partials carry that attribute, so keying on it missed 172 pages (e.g. /Activity),
       where the sort Select2 then hung ~107px off the screen edge. Every index/report page nests
       #search-form > .d-flex.flex-wrap.flex-stack > .d-flex.flex-wrap.my-1 > .d-flex.my-0. */
    #search-form .d-flex.flex-wrap.flex-stack > .d-flex.flex-wrap.my-1,
    #search-form .d-flex.flex-wrap.flex-stack > .d-flex.flex-wrap.my-1 > .d-flex.my-0,
    [data-kt-customer-table-toolbar="base"] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    /* Two toolbar controls per row (dropdown .menu panels are positioned, so excluded). */
    #search-form .d-flex.flex-wrap.flex-stack > .d-flex.flex-wrap.my-1 > .d-flex.my-0 > :not(.menu),
    [data-kt-customer-table-toolbar="base"] > :not(.menu) {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        margin-inline: 0 !important; /* beats Bootstrap's own !important .ms-2 / .me-5 utilities */
    }

    /* select2 writes an inline pixel width measured from the desktop layout. */
    #search-form .d-flex.flex-wrap.flex-stack .select2-container,
    [data-kt-customer-table-toolbar="base"] .select2-container {
        width: 100% !important;
    }

    /* ---- Tap targets (WCAG 2.2 2.5.8: 24px minimum) ------------------------- */

    /* R1. The "إظهار المحذوف" switch is w-30px h-20px in 62 views — 20px tall is below the minimum
       and it is the control most often mis-tapped on a phone. Grow it on phones only. */
    .form-check-input {
        min-height: 24px;
    }

    .form-check.form-switch .form-check-input {
        min-width: 44px;
        height: 24px;
    }

    /* R2. Dashboard widget refresh/close icons render 14x18px and sit side by side, so "close" is
       easy to hit by accident. Grow the hit area, not the icon. */
    .kt-nav__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
    }

    /* R7. Expand/collapse toggles carry .mw-20px (max-width:20px !important), so the tap target is
       20px wide on 26 views (e.g. /Activity/Screen/*). !important is required to beat that utility. */
    .btn.btn-icon.mw-20px {
        max-width: 24px !important;
        min-width: 24px;
    }

    /* R3. Select2's clear (×) button. */
    .select2-selection__clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        min-height: 24px;
    }

    /* ---- Readability -------------------------------------------------------- */

    /* R4. News ticker is .73rem (10.6px) and sits in the layout, so it is on every page.
       Desktop keeps its size; phones get ~11.7px. The separator is a decorative bullet. */
    .news-ticker__item {
        font-size: 0.8rem;
    }

    /* 2b.2 Page-toolbar action buttons (@section actions) wrap with even spacing. */
    #kt_app_toolbar_container > .d-flex.align-items-center {
        gap: 0.5rem;
    }

    #kt_app_toolbar_container > .d-flex.align-items-center > .btn,
    #kt_app_toolbar_container > .d-flex.align-items-center > a.btn {
        margin-inline: 0 !important;
    }

    /* 2.3 Table caption (total + pager) must not scroll away with the wide table:
       keep it pinned to the visible area of the horizontal scroller. */
    #list .table-responsive > .table > caption {
        display: block;
        position: sticky;
        right: 0;
        width: calc(100vw - 3rem);
        max-width: 100%;
    }

    /* 2.4 / 2b.3 Pager: wrap instead of overflowing, and compact enough that a 146-page pager
       does not take three lines above the first record. (A proper fix is fewer page links from
       DropsPagerTagHelper; this keeps the markup untouched.) */
    #list .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
    }

    #list .pagination .page-link {
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.4rem;
        font-size: 0.85rem;
    }

    /* 3.1 Dashboard widgets (Home / ControlPanel). Gridstack switches to its own one-column
       mode under 768px, but the container also carries Bootstrap's `.row` (display:flex), which
       shrinks the `width:auto` items to a sliver. Restore block flow and let content set height.
       !important: gridstack's one-column rules and generated [data-gs-*] sizes are !important. */
    .grid-stack.grid-stack-one-column-mode {
        display: block;
    }

    .grid-stack.grid-stack-one-column-mode > .grid-stack-item {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 1rem;
    }

    .grid-stack.grid-stack-one-column-mode > .grid-stack-item > .grid-stack-item-content {
        position: relative;
        left: 0;
        right: 0;
        height: auto;
    }

    /* Action-button cells stay on one line inside the scroller. */
    #list .table td > .btn,
    #list .table td > a.btn {
        white-space: nowrap;
    }
}

/* 2.5 Bare col-N (no breakpoint) inside search / modal forms: one field per line on phones only. */
@media (max-width: 575.98px) {
    #search-form .row > [class^="col-"]:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not([class*="col-xl"]),
    #search-form .row > [class*=" col-"]:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not([class*="col-xl"]),
    .modal-body .row > [class^="col-"]:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not([class*="col-xl"]),
    .modal-body .row > [class*=" col-"]:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not([class*="col-xl"]) {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* =============================================================================
   2c. Stacked-card lists on phones.

   Only tables that responsive-tables.js marked `.drops-stack` are affected; every other table
   (matrix reports with colspan/rowspan, headerless tables, opt-outs) keeps horizontal scrolling.
   Breakpoint must stay in sync with BREAKPOINT in responsive-tables.js.
   ============================================================================= */
@media (max-width: 767.98px) {

    .table-responsive > table.drops-stack,
    table.drops-stack {
        width: 100%;
        min-width: 0;
    }

    table.drops-stack,
    table.drops-stack > tbody,
    table.drops-stack > tbody > tr,
    table.drops-stack > tbody > tr > td {
        display: block;
        width: auto;
    }

    table.drops-stack > thead {
        display: none; /* the header text is reprinted per cell via [data-label] */
    }

    /* One card per record. */
    table.drops-stack > tbody > tr {
        border: 1px solid var(--bs-border-color);
        border-radius: 0.625rem;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.75rem;
        overflow: hidden; /* keeps the status colour stripe inside the rounded corner */
    }

    /* Label on the start side, value on the end side. */
    table.drops-stack > tbody > tr > td {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        justify-content: space-between;
        text-align: start !important; /* list cells are .text-center for the desktop grid */
        border: 0;
        border-bottom: 1px dashed var(--bs-border-color);
        padding: 0.5rem 0.25rem !important; /* .gy-7/.gs-7 desktop cell padding is far too big here */
        min-width: 0 !important; /* .min-w-200px etc. are what make the desktop table wide */
    }

    table.drops-stack > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    table.drops-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-weight: 600;
        color: var(--bs-gray-700);
    }

    /* A cell hidden by the column picker (initTableColumns/showHideColumn) stays hidden. */
    table.drops-stack > tbody > tr > td.d-none {
        display: none !important;
    }

    /* Empty-state / "no records" rows have one cell and no label — let them fill the card. */
    table.drops-stack > tbody > tr > td:only-child {
        justify-content: center;
    }
}