/* Screen-only enhancements. Printed documents retain their physical A4 geometry. */
@media screen and (max-width: 991px) {
    .content-body, .content-body .container-fluid, .content-body .card,
    .content-body .card-body, .content-body [class*="col-"] { min-width: 0; }
    .content-body .table-responsive { max-width: 100%; -webkit-overflow-scrolling: touch; }
    .content-body .card-header { flex-wrap: wrap; gap: 8px; }
    .content-body .select2-container { max-width: 100%; }
    .modal-dialog { max-width: calc(100% - 24px) !important; margin: 12px auto; }
    .modal-content { max-width: 100%; }
    .modal-body { overflow-x: auto; }
    .modal-footer { flex-wrap: wrap; gap: 8px; }
    .select2-dropdown { max-width: calc(100vw - 24px); }
    .select2-results__options { -webkit-overflow-scrolling: touch; }
}
@media screen and (max-width: 767.98px) {
    /* Own the phone shell here as well as in navigation-layout.css. Older
       deployments must not reserve a desktop sidebar column on small screens. */
    html body #main-wrapper { --navigation-width: 5rem; --navigation-height: 5rem; width: 100%; min-width: 0; }
    html body #main-wrapper .content-body,
    html body #main-wrapper.menu-toggle .content-body { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; min-width: 0; transition: none !important; }
    html body #main-wrapper .nav-header { width: 5rem !important; height: 5rem !important; }
    html body #main-wrapper .brand-logo { display: none !important; }
    html body #main-wrapper .header { width: 100% !important; padding-left: 5rem !important; height: 5rem !important; }
    html body #main-wrapper .nav-control { display: flex !important; align-items: center; justify-content: center; left: auto !important; right: 12px !important; width: 44px; height: 44px; padding: 0; }
    html body #main-wrapper .deznav { position: fixed !important; top: 5rem !important; left: 0 !important; width: min(18rem, calc(100vw - 44px)) !important; height: calc(100vh - 5rem) !important; height: calc(100dvh - 5rem) !important; margin: 0 !important; transform: translateX(-105%) !important; visibility: hidden !important; pointer-events: none; z-index: 1061 !important; transition: transform .2s ease !important; }
    html body #main-wrapper.menu-toggle .deznav { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto; }
    html body #main-wrapper .deznav-scroll { height: 100%; overflow-y: auto !important; overscroll-behavior: contain; }
    .mobile-menu-backdrop { position: fixed; inset: 5rem 0 0; width: 100%; border: 0; padding: 0; background: rgba(15,23,42,.35); z-index: 1060; cursor: pointer; }
    .mobile-menu-backdrop[hidden] { display: none !important; }
    #main-wrapper .content-body .container-fluid { padding: 12px; }
    .content-body .card-body, .content-body .invoice-form-body { padding: 12px !important; }
    .content-body .invoice-header, .content-body .invoice-info-section,
    .content-body .status-info { padding: 14px !important; }
    .content-body .action-buttons, .content-body .action-buttons-wrapper,
    .content-body .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .content-body .action-buttons > *, .content-body .row-actions > * { flex: 1 1 auto; margin: 0; }
    .content-body :is(.btn,.action-btn,.btn-action), .modal :is(.btn,button.close) { min-height: 44px; }
    .content-body :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { max-width: 100%; font-size: 16px !important; }
    .content-body .cr-serial-nav { max-width: 100%; }
    .content-body .cr-serial-nav button { min-width: 44px; min-height: 44px; }
    .content-body .dataTables_wrapper :is(.dataTables_filter,.dataTables_length,.dataTables_info,.dataTables_paginate) { float: none; text-align: left; margin: 8px 0; white-space: normal; }
    .content-body .dataTables_filter input { max-width: calc(100vw - 130px); }
    .content-body .pagination { flex-wrap: wrap; }
    .content-body .page-titles, .content-body .page-titles > .d-flex,
    .content-body .card-header > .d-flex { flex-wrap: wrap; gap: 8px; max-width: 100%; }
    .content-body .page-titles .btn, .content-body .card-header .btn { margin: 0 !important; }
    .content-body table.mobile-scroll-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .content-body .invoice-container { padding: 8px; }
    .content-body .invoice-wrapper { padding: 12px; }
    .content-body .invoice-wrapper .inv-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Keep every line's original fields together; no duplicate form inputs. */
    #main-wrapper table.mobile-entry-table { display: block; width: 100% !important; min-width: 0 !important; }
    #main-wrapper table.mobile-entry-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    #main-wrapper table.mobile-entry-table > tbody { display: block; width: 100%; }
    #main-wrapper table.mobile-entry-table > tbody > tr:not([style*="display: none"]):not([style*="display:none"]) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; padding: 12px; margin-bottom: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; }
    #main-wrapper table.mobile-entry-table > tbody > tr:empty { display: none; }
    #main-wrapper table.mobile-entry-table > tbody > tr > td { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0; text-align: left; }
    #main-wrapper table.mobile-entry-table > tbody > tr > td:first-child,
    #main-wrapper table.mobile-entry-table > tbody > tr > td.mobile-entry-wide,
    #main-wrapper table.mobile-entry-table > tbody > tr > td[colspan] { grid-column: 1 / -1; }
    #main-wrapper table.mobile-entry-table td.mobile-entry-wide { overflow-wrap: anywhere; }
    #main-wrapper table.mobile-entry-table td.mobile-entry-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    #main-wrapper table.mobile-entry-table td.mobile-entry-actions::before { flex-basis: 100%; }
    #main-wrapper table.mobile-entry-table td.mobile-entry-actions > :is(button,a) { flex: 1 1 0; min-width: 0; }
    #main-wrapper table.mobile-entry-table .table-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100%; }
    #main-wrapper table.mobile-entry-table .table-actions > :is(button,a) { flex: 1 1 0; min-width: 0; margin: 0 !important; }
    #main-wrapper table.mobile-entry-table td[data-mobile-label]::before { content: attr(data-mobile-label); display: block; font-size: 13px; font-weight: 700; color: #475569; margin: 0 0 4px; }
    #main-wrapper table.mobile-entry-table td :is(input,select,textarea,.select2-container) { width: 100% !important; min-width: 0 !important; max-width: none !important; }
    #main-wrapper table.mobile-entry-table td .select2-selection { min-height: 44px; }
    #main-wrapper .header .header-content { padding-left: 8px; padding-right: 8px; }
    #main-wrapper .header .header-left { min-width: 0; overflow-wrap: anywhere; }
    #main-wrapper .header .header-right { flex-shrink: 0; }
}
@media screen and (min-width: 768px), print {
    .mobile-menu-backdrop { display: none !important; }
}