/* ==========================================================================
   Global responsive layer — back-office (Sneat) and superadmin console.
   Loaded AFTER core/theme/page CSS so it only has to add, never fight.
   Breakpoints follow Bootstrap 5: 1200 (menu becomes off-canvas) · 992 · 768 · 576.
   Page-specific fixes still belong in the page; this is the safety net that
   keeps every screen usable from 320px up.
   ========================================================================== */

/* ── Always on ───────────────────────────────────────────────────────────── */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
.layout-page, .content-wrapper, .container-xxl, .container-fluid { min-width: 0; }
pre, code { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }
.select2-container { max-width: 100%; }
.apexcharts-canvas, .apexcharts-canvas svg { max-width: 100%; }
.dropdown-menu { max-width: calc(100vw - 1rem); }

/* Tables wrapped by responsive.js (or already .table-responsive) scroll
   sideways inside their card instead of stretching the page. */
.table-responsive, .card-datatable, .dt-scroll-wrap { -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }

/* ── ≤ 1199px: menu is off-canvas, content gets the full width ──────────── */
@media (max-width: 1199.98px) {
    .card-datatable { overflow-x: auto; }
    .dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; }
}

/* ── ≤ 991px (tablet) ───────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .nav-tabs, .nav-pills:not(.flex-column) {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }

    .btn-toolbar, .dt-buttons, .dataTables_wrapper .dt-buttons { flex-wrap: wrap; gap: .35rem; }
    .pagination { flex-wrap: wrap; }
}

/* ── ≤ 767px (phone, landscape and down) ────────────────────────────────── */
@media (max-width: 767.98px) {
    .container-xxl, .container-fluid { padding-inline: .75rem; }
    .container-p-y, .container-xxl.container-p-y { padding-block: 1rem !important; }
    .layout-navbar.container-fluid, .layout-navbar { margin-inline: .5rem; }

    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.4rem; }
    h3, .h3 { font-size: 1.2rem; }

    /* Card / page headers: title and actions wrap instead of overflowing. */
    .card-header, .card-footer { flex-wrap: wrap; gap: .5rem; }
    .card-header.d-flex, .card-header .d-flex.justify-content-between,
    .d-flex.justify-content-between.align-items-center:has(> .btn, > .btn-group, > a.btn) {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .card-header > .btn, .card-header .card-header-elements .btn { flex: 0 0 auto; }
    .card-body { padding: 1rem; }

    /* DataTables toolbar: stack length / search / buttons, full-width search. */
    .dataTables_wrapper > .row,
    .dataTables_wrapper .dataTables_wrapper > .row { row-gap: .5rem; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { text-align: center !important; float: none !important; }
    .dataTables_wrapper .dataTables_filter label { width: 100%; display: flex; align-items: center; gap: .5rem; justify-content: center; }
    .dataTables_wrapper .dataTables_filter input { margin-inline-start: 0 !important; flex: 1 1 auto; width: auto !important; min-width: 0; }
    .dataTables_wrapper .dataTables_paginate .pagination { justify-content: center; }
    .dataTables_wrapper .dataTables_paginate .page-link { padding: .35rem .6rem; }

    /* Modals: near full-width, body scrolls, footer buttons wrap. */
    .modal-dialog:not(.modal-fullscreen) { margin: .5rem; max-width: calc(100vw - 1rem); }
    .modal-dialog-scrollable .modal-body, .modal-body { max-height: calc(100vh - 11rem); overflow-y: auto; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer > .btn { flex: 1 1 auto; }

    /* Form rows: labels above inputs, button groups stack evenly. */
    .input-group { flex-wrap: wrap; }
    .input-group > .form-control, .input-group > .form-select { min-width: 0; flex: 1 1 8rem; }
    .btn-group:not(.dropdown):not(.btn-group-vertical) { flex-wrap: wrap; }
    .form-actions, .action-buttons { flex-wrap: wrap; gap: .5rem; }
    .form-actions > .btn, .action-buttons > .btn { flex: 1 1 auto; }

    /* Definition-style rows (invoice / detail views). */
    .table-borderless td, .table-borderless th { white-space: normal; }
    .table > :not(caption) > * > * { padding: .6rem .6rem; }

    /* Footer. */
    .content-footer .footer-container { flex-direction: column; text-align: center; gap: .25rem; }

    /* Tab panes / stat cards sit one-per-row when a view forgot col-12. */
    .row > [class^="col-"]:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not([class*="col-xl"]):not(.col-12):not(.col-6):not(.col-auto):not(.col) { flex: 0 0 auto; }
}

/* ── ≤ 575px extras: bootstrap-select menus, decorative hero blobs ─────── */
@media (max-width: 575.98px) {
    .bootstrap-select .dropdown-menu, .shop-access-picker + .bootstrap-select .dropdown-menu { min-width: 0 !important; max-width: calc(100vw - 1rem); }
    .sp-hero__band, [class*="hero"] { overflow: hidden; }
}

/* ── ≤ 575px (small phone) ──────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    :root { --bs-body-font-size: 15px; }

    /* 16px inputs stop iOS zooming the page on focus (pinch-zoom stays enabled). */
    .form-control, .form-select, .select2-search__field,
    .select2-selection, .dataTables_filter input, .dataTables_length select { font-size: 16px; }

    .navbar-nav-right .navbar-nav { gap: .1rem; }
    .layout-navbar .navbar-nav .nav-link { padding-inline: .45rem; }
    .layout-navbar .navbar-search-wrapper .search-input-wrapper,
    .layout-navbar .nav-item.navbar-search-wrapper { min-width: 0; }
    .layout-navbar .navbar-search-wrapper .nav-item-label,
    .layout-navbar .navbar-search-wrapper .text-body.fw-normal { display: none; }

    .card { border-radius: .6rem; }
    .card-header { padding: .85rem 1rem; }
    .btn:not(.btn-sm):not(.btn-icon):not(.dropdown-toggle):not(.page-link) { padding-inline: .9rem; }
    .toast-container, .swal2-container .swal2-popup { max-width: calc(100vw - 1rem); }
    .swal2-popup { width: calc(100vw - 1.5rem) !important; }

    /* Stat / KPI tiles: two per row at minimum. */
    .row.g-6 > [class*="col-xl-"]:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not(.col-12) { flex: 0 0 auto; width: 100%; }
}

/* ── Touch devices: comfortable targets ─────────────────────────────────── */
@media (pointer: coarse) {
    .btn:not(.btn-xs):not(.btn-sm), .form-control:not(textarea), .form-select { min-height: 40px; }
    .dropdown-item, .menu-link, .page-link { min-height: 40px; display: flex; align-items: center; }
    .page-link { justify-content: center; }
    .form-check-input { width: 1.2em; height: 1.2em; }
}

/* ── Print: never reflow to the mobile rules ────────────────────────────── */
@media print {
    .table-responsive, .card-datatable { overflow: visible !important; }
}


/* ==========================================================================
   DataTables on phones: one card per row (labels come from responsive.js).
   Tablets keep the real table and scroll inside the card.
   ========================================================================== */
@media (max-width: 767.98px) {
    table.dataTable.dt-cards, table.dataTable.dt-cards > tbody,
    table.dataTable.dt-cards > tbody > tr, table.dataTable.dt-cards > tbody > tr > td { display: block; width: 100% !important; }
    table.dataTable.dt-cards > thead, table.dataTable.dt-cards > tfoot { display: none; }
    table.dataTable.dt-cards { border: 0; }
    table.dataTable.dt-cards > tbody > tr {
        background: var(--bs-card-bg, #fff);
        border: 1px solid var(--bs-border-color, #e3e6ec);
        border-radius: .65rem;
        margin: 0 0 .75rem;
        padding: .35rem .85rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    }
    table.dataTable.dt-cards > tbody > tr > td {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem;
        border: 0 !important; background: transparent !important; box-shadow: none !important;
        padding: .5rem 0 !important; text-align: right; white-space: normal; overflow-wrap: anywhere; min-height: 2.25rem;
    }
    table.dataTable.dt-cards > tbody > tr > td + td { border-top: 1px dashed var(--bs-border-color, #eef0f5) !important; }
    table.dataTable.dt-cards > tbody > tr > td::before {
        content: attr(data-label); flex: 0 0 34%; max-width: 40%;
        font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
        color: var(--bs-secondary-color, #8592a3); text-align: left;
    }
    table.dataTable.dt-cards > tbody > tr > td[data-label=""]::before,
    table.dataTable.dt-cards > tbody > tr > td:not([data-label])::before { display: none; }
    table.dataTable.dt-cards > tbody > tr > td > .d-flex { justify-content: flex-end; text-align: left; min-width: 0; }
    table.dataTable.dt-cards > tbody > tr > td .text-truncate { max-width: 100% !important; }
    table.dataTable.dt-cards > tbody > tr > td.dataTables_empty,
    table.dataTable.dt-cards > tbody > tr > td[colspan] { display: block; text-align: center; }
    table.dataTable.dt-cards > tbody > tr > td[colspan]::before { display: none; }
    table.dataTable.dt-cards td.dtr-control::before, table.dataTable.dt-cards th.dtr-control::before { display: none; }
    .card-datatable, .card-datatable.table-responsive { padding-inline: .75rem; overflow-x: visible; }

    /* Gradient page headers (145 views): stack, full-width actions. */
    .page-header-card { padding: 1.1rem 1.15rem !important; border-radius: .75rem; }
    .page-header-card h3, .page-header-card .h3 { font-size: 1.2rem; }
    .page-header-card .sub { font-size: .82rem; }
    .page-header-card > .d-flex:last-child, .page-header-card > div:last-child:not(:first-child) { width: 100%; flex-wrap: wrap; }
    .page-header-card .btn { flex: 1 1 auto; justify-content: center; }
    .stat-tile { padding: .85rem; gap: .65rem; }
    .stat-icon { width: 40px; height: 40px; font-size: 1.2rem; }
}