/* Shared screen-only accessibility and small-screen layout. Receipts keep their print layout. */
@media screen {
    .mobile-nav-backdrop { display: none; }
    .notification-toggle { border: 0; background: transparent; cursor: pointer; }
    .hov.notification-open .one { display: block; }
    .mobile-nav-close { display: none; }
}

@media screen and (min-width: 768px) {
    .admin-topbar .hov:hover .one { display: block; }
}

@media screen and (max-width: 767.98px) {
    .stock-filter-card .card-header { flex-wrap: wrap; gap: 12px; }
    .stock-filter-card .card-header h5 { width: 100%; overflow-wrap: anywhere; }
    .stock-filter-card .card-header > .ml-auto { width: 100%; margin-left: 0 !important; flex-wrap: wrap; gap: 6px; }
    .stock-filter-card .card-header .btn { flex: 1 1 110px; margin: 0 !important; min-height: 44px; }
    .stock-filter-card .card-body { padding: 12px; }
    .stock-filter-card form.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stock-filter-card form.row > .col { padding: 0; min-width: 0; width: 100%; max-width: 100%; }
    .stock-filter-card form .form-control { width: 100%; }
    table[data-mobile-cards], table[data-mobile-cards] > tbody { display: block !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; }
    table[data-mobile-cards] > thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    table[data-mobile-cards] > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #dce3e8; border-radius: 8px; background: #fff !important; }
    table[data-mobile-cards] > tbody > tr > td,
    table[data-mobile-cards] > tbody > tr > td.d_no { display: flex !important; flex-direction: column; min-width: 0; width: auto !important; max-width: 100%; padding: 7px 0 !important; border: 0; border-bottom: 1px solid #edf0f2; background: transparent !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
    table[data-mobile-cards] > tbody > tr > td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: #5a6772; margin-bottom: 4px; }
    table[data-mobile-cards] > tbody > tr > td[data-mobile-primary] { order: -2; font-size: 16px; font-weight: 600; }
    table[data-mobile-cards] > tbody > tr > td[data-mobile-actions] { order: -1; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    table[data-mobile-cards] > tbody > tr > td[data-mobile-actions]::before { flex: 0 0 100%; }
    table[data-mobile-cards] > tbody > tr > td > .d-md-none,
    table[data-mobile-cards] > tbody > tr > td.d_m { display: none !important; }
    table[data-mobile-cards] [data-mobile-actions] a, table[data-mobile-cards] [data-mobile-actions] button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    table[data-mobile-cards] > tbody > tr.mobile-summary-row { display: block; }
    table[data-mobile-cards] > tbody > tr.mobile-summary-row > td { display: block !important; }
    table[data-mobile-cards] > tbody > tr.mobile-summary-row > td::before { display: none; }
    table[data-mobile-cards] > tbody > tr.mobile-summary-row > td[data-label]::before { display: block; }
    table[data-mobile-cards] > tbody > tr.pos.mobile-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    table[data-mobile-cards] > tbody > tr.pos.mobile-summary-row:not(.d-none) { display: grid; }
    table[data-mobile-cards] > tbody > tr.pos.mobile-summary-row > td::before { content: attr(data-label); display: block; }
    table[data-mobile-cards] > tbody > tr.pos.mobile-summary-row:has(> th) { display: none !important; }
    table[data-mobile-cards] > tbody > tr > td.d-none { display: none !important; }
    table[data-mobile-cards] > tfoot { display: block; width: 100%; }
    table[data-mobile-cards] > tfoot > tr { display: flex; flex-wrap: wrap; justify-content: space-between; }
    table[data-mobile-cards] > tfoot > tr > td { width: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    img { max-width: 100%; }
    .row > [class*="col-"] { min-width: 0; }
    .mobile-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mobile-table-scroll:focus { outline: 2px solid #007bff; outline-offset: 2px; }
    .mobile-table-scroll > table { display: table; overflow: visible; margin-bottom: 0; }
    html, body { min-width: 0; }
    .layout-wrapper, .layout-wrapper.ml_0 { margin-left: 0 !important; }
    .layout-wrapper #wrapper, .layout-wrapper #content { min-width: 0; max-width: 100%; }
    .layout-wrapper .l_sidebar, .layout_s .l_sidebar, .layout_s .l_sidebar:hover {
        left: -280px !important; width: 270px; max-width: 85vw; margin-left: 0 !important;
        height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
        transition: left .2s ease; z-index: 1040;
    }
    .mobile-nav-open .layout-wrapper .l_sidebar { left: 0 !important; }
    .mobile-nav-open { overflow: hidden; }
    .mobile-nav-open .mobile-nav-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1039;
    }
    .mobile-nav-close { display: block; margin: 8px 8px 0 auto; min-width: 44px; min-height: 44px; }
    .l_sidebar .sidebar-logo img, .l_sidebar .c_title h5 { opacity: 1 !important; }
    .l_sidebar .ui-scrollpanel-wrapper { height: auto; float: none; overflow: visible; }
    .l_sidebar .ui-scrollpanel-content { height: auto; width: 100%; overflow: visible; }
    .l_sidebar .layout-menu, .l_sidebar .layout-menu-container { width: 100%; }
    .l_sidebar .layout-menu a, .l_sidebar .layout-menu span { min-height: 44px; }
    .admin-topbar { display: flex; height: auto !important; min-height: 0; padding: 8px !important; gap: 8px;
        background: #f6fafd !important; color: #263445; }
    .admin-topbar #desktop-nav-controls { display: none !important; }
    .admin-topbar > .row { padding: 0; gap: 8px; }
    .admin-topbar .topbar-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .admin-topbar .topbar-shortcuts > .add_one { width: auto; max-width: none; }
    .admin-topbar .topbar-search { grid-column: 1 / -1; }
    .admin-topbar .topbar-shortcuts .btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
    .admin-topbar #it_ser #f_ser { position: relative; margin: 0 !important; padding-left: 12px !important; }
    .admin-topbar #myUL_top { left: 0 !important; top: 100% !important; width: 100% !important; }
    .admin-topbar .add_one { padding: 0; }
    .admin-topbar .add_one:empty { display: none; }
    .admin-topbar .topbar-account { order: -1; gap: 6px !important; padding: 0; flex-wrap: nowrap; justify-content: space-between !important; }
    .admin-topbar .topbar-account > * { flex: 0 0 auto; }
    .admin-topbar .topbar-account .btn, .admin-topbar .notification-toggle { min-width: 36px; height: 40px; padding: 8px; }
    .admin-topbar .topbar-account a[title="POS Mode"] { display: block; width: 40px !important; height: 40px !important; }
    .admin-topbar #myid { margin-left: 0; max-width: 36px; }
    .admin-topbar #myid .profile-toggle > p { display: none; }
    .admin-topbar #myid .profile-toggle { gap: 0 !important; min-height: 40px; }
    .admin-topbar #myid .name { width: min(260px, calc(100vw - 24px)); }
    .admin-topbar .notification-toggle .badge { right: -4px; top: -2px; max-width: 38px; overflow: hidden; font-size: 10px; padding: 3px; }
    .admin-topbar .name { right: 0 !important; left: auto !important; transform: none !important; }
    .admin-topbar .hov { position: relative; }
    .admin-topbar .one { position: fixed !important; top: 12px !important; right: 8px !important;
        left: 8px; width: auto; transform: none !important; max-height: 75vh !important; z-index: 1045; }
    .admin-topbar .notify { width: auto; }
    .admin-topbar .one h4 { font-size: 1.1rem; }
    .modal-dialog { width: auto !important; max-width: calc(100% - 16px) !important; margin: 8px auto !important; }
    .modal-content { min-width: 0; }
    .modal-body { overflow-wrap: anywhere; }
    .modal-footer { flex-wrap: wrap; gap: 6px; }
    input.form-control, select.form-control, textarea.form-control, .custom-select { font-size: 16px; max-width: 100%; }
    textarea { max-width: 100%; }
    .btn, button, select, input[type="submit"], input[type="button"] { min-height: 40px; }
    .btn { white-space: normal; }
    input[type="checkbox"], input[type="radio"] { min-width: 18px; min-height: 18px; }
    .table input.form-control, .table select.form-control { min-width: 90px; }
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input { width: auto; max-width: 65%; }
    .pagination { flex-wrap: wrap; }
    .page-item .page-link { padding: 10px 13px; }
    .bgLog { min-height: 100vh !important; background-attachment: scroll !important; }
    .bgLog .card .px-5, .bgLog .card .px-4 { padding-left: 16px !important; padding-right: 16px !important; }
    .main-top-w3l .header-right ul { display: flex; flex-wrap: wrap; padding: 0; justify-content: center; }
    .main-top-w3l .header-right ul li { width: auto; padding: 8px; }
    .main-top-w3l .header-most-top { overflow-wrap: anywhere; }
    .header-right a { display: inline-block; min-height: 32px; }
    .single-right-left, .checkout-right, .checkout-left { min-width: 0; max-width: 100%; }
}

@media print {
    .mobile-nav-backdrop, .mobile-nav-close { display: none !important; }
    .mobile-table-scroll { overflow: visible !important; max-width: none !important; }
}