/* Shared date filters retain their desktop grid; mobile uses the 500px admin viewport. */
.admin-date-filters { display: grid; grid-template-columns: 200px 200px auto; gap: 10px; }
@media screen and (max-width: 767px) {
    body { overflow-x: visible; }
    body.fixed-nav { padding-top: 56px; }
    #mainNav { padding: 8px; }
    #mainNav .navbar-sidenav .nav-link { font-size: 15px; line-height: 1.4; min-height: 36px; display: flex; align-items: center; }
    #mainNav .navbar-sidenav .nav-item ul { padding-left: 20px; }
    #mainNav .navbar-collapse .navbar-sidenav > .nav-item > .nav-link { padding: 6px 8px !important; }
    .admin-header-search input { min-height: 36px; }
    .content-wrapper { padding-top: 8px; }
    .content-wrapper > .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }
    .content-wrapper .container-fluid > .row { margin-left: 0; margin-right: 0; }
    .content-wrapper .row { margin-left: -4px; margin-right: -4px; }
    .content-wrapper .form-group > select { min-width: 100px; }
    .content-wrapper .row > [class*="col-"] { padding-left: 4px; padding-right: 4px; min-width: 0; }
    .content-wrapper .row > .col-1,
    .content-wrapper .row > .col-2,
    .content-wrapper .row > .col-3,
    .content-wrapper .row > .col-4 { flex: 0 0 50%; max-width: 50%; }
    .content-wrapper .row > .col-5,
    .content-wrapper .row > .col-6,
    .content-wrapper .row > .col-7,
    .content-wrapper .row > .col-8,
    .content-wrapper .row > .col-9,
    .content-wrapper .row > .col-10,
    .content-wrapper .row > .col-11 { flex: 0 0 100%; max-width: 100%; }
    .content-wrapper .card { min-width: 0; }
    .content-wrapper .card-header { padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
    .content-wrapper .card-header > div { float: none !important; min-width: 0; }
    .content-wrapper .card-body { padding: 10px; }
    .content-wrapper .mb-3, .content-wrapper .my-3 { margin-bottom: 10px !important; }
    .content-wrapper .mb-5, .content-wrapper .my-5 { margin-bottom: 16px !important; }
    .content-wrapper .mt-5, .content-wrapper .my-5 { margin-top: 16px !important; }
    .content-wrapper .pl-4 { padding-left: 4px !important; }
    .content-wrapper br + br { display: none; }
    .content-wrapper hr { margin: 10px 0; }
    .content-wrapper p { margin-bottom: 10px; }
    .content-wrapper h1 { font-size: 24px; }
    .content-wrapper h2 { font-size: 20px; }
    .content-wrapper h3 { font-size: 18px; }
    .content-wrapper .form-group { margin-bottom: 10px; }
    .content-wrapper label { line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; }
    .content-wrapper input, .content-wrapper select, .content-wrapper button,
    .content-wrapper .selectize-control { max-width: 100%; min-width: 0; }
    .content-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .content-wrapper select, .content-wrapper button { min-height: 36px; }
    .content-wrapper input[type="checkbox"], .content-wrapper input[type="radio"] { width: 18px; height: 18px; min-height: 0; }
    .content-wrapper img { max-width: 100%; height: auto; }
    .content-wrapper .selectize-input, .content-wrapper .selectize-dropdown { max-width: 100%; overflow-wrap: anywhere; }
    .content-wrapper .form-control { font-size: 15px; }
    .content-wrapper .table-responsive { overflow: visible; min-width: 0; }
    .content-wrapper table { width: 100% !important; max-width: 100%; font-size: 14px; }
    .content-wrapper th, .content-wrapper td { padding: 6px; overflow-wrap: anywhere; white-space: normal !important; }
    .content-wrapper table:not(.admin-table-cards):not(.admin-table-matrix) { table-layout: fixed; }
    .content-wrapper .table { margin-bottom: 10px; }
    .content-wrapper table.list { margin-bottom: 16px; }
    .content-wrapper table.list > tbody > tr > td:first-child { width: 28%; }
    .content-wrapper .text-nowrap { white-space: normal !important; }

    /* Keep the actual headers available for DataTables sorting and select-all. */
    table.admin-table-cards { width: 100% !important; max-width: 100%; font-size: 14px; }
    .admin-table-cards th, .admin-table-cards td { overflow-wrap: anywhere; white-space: normal !important; }
    table.admin-table-cards,
    .admin-table-cards > thead,
    .admin-table-cards > tbody,
    .admin-table-cards > tfoot { display: block; border: 0; min-width: 0; }
    .admin-table-cards > thead > tr { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 6px; }
    .admin-table-cards > thead > tr > th,
    .admin-table-cards > thead > tr > td { display: block; width: auto !important; border: 1px solid #dee2e6; padding: 5px 22px 5px 7px !important; font-size: 12px; background-color: #f4f6f8; }
    .admin-table-cards > thead .admin-header-empty { display: none; }
    .admin-table-cards > thead .sorting_disabled { padding-right: 7px !important; }
    .admin-table-cards > tbody > tr,
    .admin-table-cards > tfoot > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-bottom: 8px; padding: 8px; border: 1px solid #dee2e6; background: #fff; }
    .admin-table-cards > tbody > tr:nth-child(even) { background: #f6f8fa; }
    .admin-table-cards > tbody > tr > td,
    .admin-table-cards > tbody > tr > th,
    .admin-table-cards > tfoot > tr > td,
    .admin-table-cards > tfoot > tr > th { display: block; border: 0; width: auto !important; min-width: 0; padding: 0; text-align: left; }
    .admin-table-cards [data-label]:not([data-label=""])::before { content: attr(data-label); display: block; color: #5c6670; font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
    .admin-table-cards .admin-cell-wide { grid-column: 1 / -1; }
    .admin-table-cards td a { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
    .admin-table-cards .dataTables_empty { grid-column: 1 / -1; }
    .admin-table-cards colgroup { display: none; }
    .admin-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    .admin-table-scroll:focus-visible { outline: 2px solid #007bff; outline-offset: -2px; }
    table.admin-table-matrix { width: max-content !important; min-width: 100%; max-width: none; }

    .content-wrapper .dataTables_wrapper > .row { margin: 0; }
    .content-wrapper .dataTables_wrapper > .row > div { padding: 0; }
    .content-wrapper .dataTables_length, .content-wrapper .dataTables_filter { float: none !important; text-align: left !important; margin: 0 0 8px; }
    .content-wrapper .dataTables_filter label { display: flex; align-items: center; gap: 8px; }
    .content-wrapper .dataTables_filter input { flex: 1; width: 100% !important; margin-left: 0 !important; }
    .content-wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: flex-start !important; }
    .content-wrapper .dataTables_info { padding-top: 4px; white-space: normal; }
    .admin-date-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
    .admin-date-filters input { width: 100%; }
    .admin-date-filters > div:last-child { grid-column: 1 / -1; }
    .admin-date-filters > div:last-child label { display: none; }
    .table-search, .sold-date-filter, .catalogueFilters { flex-wrap: wrap; justify-content: flex-start !important; gap: 6px !important; }
    #productSearch, .catalogueFilters input[type="text"] { min-width: 0 !important; width: 100%; max-width: 100% !important; }
    .table-search label { width: 100%; margin: 0; }
    .table-search #productSearch { flex: 1 1 220px; }
    .pager { margin-bottom: 12px; }
    .table-actions { padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
    .table-actions .left, .table-actions .right, .actions, .actions-more { float: none; }
    .vflex { gap: 10px; }
    .line.half { width: 100%; padding-right: 0; }
    .line { padding-bottom: 8px; }
    .products, form.merge { padding-bottom: 16px; }
    .mp { width: 100%; margin-right: 0; }
    .ms, .mq { width: calc(50% - 5px); }
    .catswrapper { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 6px; overflow: visible; }
    .cats-columns { grid-template-columns: minmax(0, 1fr); }
    .catitem { overflow-wrap: anywhere; }
    .tabber .tabs ul { flex-wrap: wrap; }
    .tabber .tab { padding: 10px 0; }
    .tabber input[type="submit"] { margin-top: 12px; }
    body ul.productphotos { gap: 8px; }
    body ul.productphotos li { width: 100%; min-width: 0; margin: 0; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
    .mobiletable { width: 100%; min-width: 0; }
    .content-wrapper div > .zebra { width: 100%; max-width: 100%; min-height: 0; line-height: 1.4; padding: 6px; overflow: visible; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .content-wrapper .mobiletable .zebra { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 6px 30px 6px 6px; }
    .content-wrapper .mobiletable .zebra > [class*="col-"] { flex: 1 1 0; width: 0; max-width: none; padding: 0; margin-bottom: 0 !important; }
    table.tracking td:nth-child(1) { width: 17%; }
    table.tracking td:nth-child(2) { width: 23%; }
    table.tracking td:nth-child(3) { width: 12%; }
    table.tracking td:nth-child(4) { width: 48%; }
    .mobiletable label { font-size: 12px; }
    .content-wrapper .mobiletable input { width: 100%; padding: 5px; }
    .mobiletable span.more { right: 6px; }
    .productrow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px; margin-bottom: 8px; }
    .productrow .hasThumb { min-width: 0; }
    .productrow .prodname { max-width: none; overflow-wrap: anywhere; }
    .productrow .thumb { flex: 0 0 45px; }
    .productrow .thumb img { width: 45px; }
    .content-wrapper .colorline { display: flex; flex-wrap: wrap; gap: 6px; }
    .content-wrapper .colorline .inputs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .content-wrapper .colorline .label { width: 100%; }
    .productrow .actions { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
    .productrow .custom_order input { width: 64px; }
    .productrow .link.button { width: 36px; height: 36px; line-height: 34px; }
    .productrow .delete { display: inline-block; }
    .deliveryMethod .content { padding: 10px; }
    .deliveryMethod .title { height: auto; min-height: 40px; line-height: 1.3; padding: 10px 10px 10px 40px; }
    .deliveryMethod .title:before { left: 14px; }
    .addressQuarter { width: 100%; margin: 0 0 8px; }
    .popup, .loadingpopup { padding: 12px; max-width: calc(100% - 16px); max-height: 85dvh; overflow: auto; }
    .modal-dialog { max-width: calc(100% - 16px) !important; margin: 8px auto; }
    .modal-body, .modal-header, .modal-footer { padding: 10px; }
    .modal-footer { flex-wrap: wrap; gap: 6px; }
    #invoiceModal > div { max-width: calc(100% - 16px); max-height: 85dvh; padding: 12px !important; overflow: auto; }
    .admin-stat-block { width: 100% !important; padding: 0 0 10px !important; }
    .content-wrapper .analytics-filters { padding: 10px; gap: 8px; }
    .content-wrapper .analytics-filters label { flex: 1 1 180px; min-width: 0; }
    .content-wrapper .analytics-grid, .content-wrapper #analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
    .content-wrapper .analytics-kpi, .content-wrapper #analytics-kpis .analytics-kpi { padding: 10px; min-height: 0; }
    .content-wrapper .analytics-kpi strong { font-size: 22px; overflow-wrap: anywhere; }
    #analytics-report h2, .content-wrapper .analytics-disclosure { margin-top: 16px; }
    .content-wrapper .analytics-table { overflow: visible; }
    .content-wrapper .analytics-table table, .content-wrapper .cart-list-table { white-space: normal; min-width: 0; }
    #analytics-report #cart-list-rows { max-height: none; overflow: visible; }
    .content-wrapper .analytics-sizes-table { overflow-x: auto; }
    .content-wrapper .openai-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
    .content-wrapper .openai-system { margin-top: 12px; }
    .content-wrapper .openai-log { overflow-x: visible; }
    .card-login { margin-top: 16px !important; }
}