/* ── Global Navbar Styles ──
   Applied at all screen sizes.
   ─────────────────────────── */
.navbar .container-fluid > .d-flex,
.navbar .container-fluid > .collapse > .d-flex {
    margin-left: auto;
}

/* ── Mobile Responsive Styles ──
   All rules inside @media (max-width: 768px).
   Desktop (>768px) is completely unaffected.
   ─────────────────────────────────────────── */

@media (max-width: 991.98px) {

    /* ── Navbar ── */
    .navbar .navbar-toggler.mobile-toggler {
        display: block !important;
        border-color: rgba(255,255,255,.4);
        padding: .25rem .5rem;
    }
    .navbar .navbar-toggler.mobile-toggler .navbar-toggler-icon {
        filter: invert(1);
        width: 1.2em;
        height: 1.2em;
    }
    .navbar .navbar-collapse .nav-flex,
    .navbar .navbar-collapse > .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        padding: .5rem 0;
        margin-left: 0 !important;
    }
    .navbar .navbar-collapse .nav-link {
        padding: .6rem .9rem !important;
        font-size: .9rem;
        border-radius: 4px;
    }
    .navbar .navbar-collapse .dropdown-menu {
        position: static !important;
        box-shadow: none;
        border: none;
        background: rgba(255,255,255,.08);
        padding-left: 1rem;
    }
    .navbar .navbar-collapse .dropend > .dropdown-menu {
        position: static !important;
        left: auto !important;
        padding-left: 1rem;
    }
    .navbar-brand {
        font-size: .95rem !important;
    }

    /* ── Page container ── */
    .container-fluid {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
    body > .container-fluid {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    /* ── Summary cards (item_detail etc.) ── */
    .summary-card {
        padding: 10px 12px !important;
    }
    .summary-card > .d-flex {
        flex-wrap: wrap !important;
        gap: .75rem 1.5rem !important;
    }
    .summary-item {
        min-width: 28%;
        flex: 1 0 28%;
    }
    .summary-item .value {
        font-size: 1rem !important;
    }
    .summary-item .label {
        font-size: .62rem !important;
    }

    /* ── Tables ── */
    .table {
        font-size: .75rem !important;
    }
    .table th, .table td {
        padding: .35rem .4rem !important;
        white-space: nowrap;
    }
    .table .btn-sm {
        font-size: .65rem !important;
        padding: 2px 6px !important;
    }

    /* ── Filter / search forms ── */
    .card.p-3 form .col-md-2,
    .card.p-3 form .col-md-3,
    .card.p-3 form .col-md-4,
    .card.p-3 form .col-md-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .card.p-3 {
        padding: .75rem !important;
    }

    /* ── Buttons – larger touch targets ── */
    .btn-sm {
        min-height: 32px;
        min-width: 32px;
    }

    /* ── Modals ── */
    .modal-dialog {
        max-width: 100% !important;
        margin: .5rem !important;
    }
    .modal-body {
        padding: .75rem !important;
    }

    /* ── Page header / title area ── */
    h4, h5 {
        font-size: 1rem !important;
    }
    .breadcrumb {
        font-size: .75rem;
    }

    /* ── Badge / chip sizing ── */
    .badge {
        font-size: .65rem !important;
        padding: .2em .45em !important;
    }

    /* ── Section labels ── */
    .section-label {
        font-size: .8rem !important;
    }

    /* ── Grid layout adjustments ── */
    .col-xl-8, .col-xl-4,
    .col-lg-7, .col-lg-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ── Card body padding ── */
    .card-body {
        padding: .6rem !important;
    }

    /* ── Production calendar ── */
    .cal-grid {
        font-size: .6rem !important;
    }

    /* ── Warehouse map ── */
    .loc-cell {
        min-width: 60px !important;
        min-height: 40px !important;
        font-size: .6rem !important;
    }

    /* ── Autocomplete dropdown ── */
    .ac-search-drop {
        max-height: 200px;
    }

    /* ── Movement history panel ── */
    .movement-history .table {
        font-size: .68rem !important;
    }
}

/* ── Tablet Portrait (Samsung Galaxy Tab A11: ~640-800px) ──
   Targets portrait orientation on tablets specifically.
   ──────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {

    /* ── Production Calendar ── */
    .cal-table td.day-cell {
        min-width: 70px !important;
        max-width: 100px !important;
        height: 48px !important;
        padding: 1px 2px !important;
    }
    .cal-table .room-cell {
        min-width: 90px !important;
        max-width: 110px !important;
        font-size: .68rem !important;
    }
    .cal-table thead th {
        font-size: .62rem !important;
        padding: 2px 1px !important;
    }
    .sched-chip {
        font-size: .6rem !important;
        padding: 1px 3px !important;
        line-height: 1.15 !important;
    }
    .sched-chip .prod {
        max-width: 65px !important;
        font-size: .55rem !important;
    }
    .sched-chip .po {
        font-size: .62rem !important;
    }
    .sched-chip .qty {
        font-size: .55rem !important;
    }
    .period-toggle {
        font-size: .5rem !important;
        padding: 0 1px !important;
    }

    /* WO side panel: collapse to bottom or hide */
    .wo-panel {
        width: 100% !important;
        min-width: unset !important;
        max-height: 200px !important;
        border-radius: 8px 8px 0 0 !important;
    }
    .wo-panel-header {
        padding: 6px 10px !important;
        font-size: .78rem !important;
    }
    .wo-card {
        padding: 5px 8px !important;
        margin-bottom: 4px !important;
        font-size: .68rem !important;
    }

    /* Month nav */
    .month-nav .month-title {
        font-size: .9rem !important;
        min-width: 120px !important;
    }
    .month-nav .btn {
        padding: .2rem .5rem !important;
        font-size: .75rem !important;
    }

    /* Legend & filter buttons */
    .cal-cat-btn {
        font-size: .65rem !important;
        padding: 2px 8px !important;
    }
    .legend-dot {
        width: 9px !important;
        height: 9px !important;
    }

    /* Touch-friendly: larger hit areas for chips */
    .sched-chip {
        min-height: 28px !important;
        touch-action: none;
    }

    /* ── General tables on tablet portrait ── */
    .table {
        font-size: .72rem !important;
    }
    .table th, .table td {
        padding: .3rem .35rem !important;
    }

    /* ── Material Hub modal ── */
    .modal-dialog.modal-fullscreen {
        margin: 0 !important;
    }
    .modal-body .table {
        font-size: .7rem !important;
    }

    /* ── WO step detail: room cards ── */
    .card .room-header {
        font-size: .78rem !important;
    }

    /* ── Calendar + WO panel: stack vertically ── */
    .cal-main-layout {
        flex-direction: column !important;
    }
    .cal-main-layout .cal-wrapper {
        order: 1;
    }
    .cal-main-layout .wo-panel {
        order: 2;
        width: 100% !important;
        min-width: unset !important;
        max-height: 180px !important;
        flex-direction: row !important;
        overflow-x: auto !important;
    }
    .cal-main-layout .wo-panel .wo-panel-body {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 6px !important;
    }
    .cal-main-layout .wo-panel .wo-card {
        min-width: 160px;
        flex-shrink: 0;
    }

    /* Stats card: shrink for portrait */
    .card[style*="min-width:720px"] {
        min-width: unset !important;
        width: 100% !important;
    }

    /* ── Navbar: slightly smaller on tablet portrait ── */
    .navbar-brand {
        font-size: .85rem !important;
    }
    .nav-link {
        font-size: .78rem !important;
        padding: .4rem .6rem !important;
    }
}

/* Samsung 11+ tablet fit
   Common CSS viewports are about 800x1280 portrait and 1280x800 landscape.
   The old tablet rule only covered portrait, so landscape tablets kept the
   full desktop chrome and the fixed calendar side panel. */
@media (min-width: 992px) and (max-width: 1368px) and (pointer: coarse),
       (min-width: 992px) and (max-width: 1368px) and (any-pointer: coarse),
       (min-width: 992px) and (max-width: 1368px) and (hover: none) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: .88rem;
    }

    .container-fluid,
    body > .container-fluid,
    .container-fluid.px-4 {
        max-width: 100% !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .container-fluid[style*="padding-right:260px"] {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .navbar {
        margin-bottom: .65rem !important;
    }

    .navbar .container-fluid {
        flex-wrap: wrap !important;
    }

    .navbar-brand {
        font-size: .9rem !important;
        white-space: nowrap;
    }

    .navbar .nav-link {
        font-size: .72rem !important;
        padding: .35rem .42rem !important;
        white-space: nowrap;
    }

    .navbar .dropdown.ms-3 {
        margin-left: .35rem !important;
    }

    .dash-header,
    .d-flex.align-items-center.mb-3,
    .cal-sticky-header .d-flex {
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }

    .dash-header {
        margin-bottom: .75rem !important;
    }

    h4,
    h5,
    .section-title {
        font-size: 1rem !important;
    }

    h6 {
        font-size: .9rem !important;
    }

    .card {
        border-radius: 8px !important;
    }

    .card.p-4,
    .card.p-3 {
        padding: .75rem !important;
    }

    .card-body {
        padding: .65rem !important;
    }

    .btn,
    .form-control,
    .form-select {
        font-size: .82rem !important;
    }

    .btn {
        min-height: 34px;
    }

    .btn-sm,
    .form-control-sm,
    .form-select-sm {
        min-height: 32px;
        font-size: .76rem !important;
    }

    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > table,
    .table-responsive > .table {
        min-width: 860px;
    }

    .table {
        font-size: .72rem !important;
    }

    .table th,
    .table td {
        padding: .3rem .38rem !important;
        vertical-align: middle;
    }

    .badge,
    .st-badge {
        font-size: .64rem !important;
        line-height: 1.15;
    }

    .modal-dialog {
        max-width: calc(100vw - 20px) !important;
        margin: .5rem auto !important;
    }

    .modal-body {
        max-height: calc(100vh - 120px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Dashboard widgets */
    .grid-stack {
        min-height: 0 !important;
        margin-left: -.25rem;
        margin-right: -.25rem;
    }

    .grid-stack-item-content {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .widget-card {
        border-radius: 8px !important;
        padding: 10px !important;
    }

    .widget-card .wc-header {
        margin-bottom: 8px !important;
        gap: 8px;
    }

    .widget-card .wc-header h6 {
        font-size: .8rem !important;
        line-height: 1.2;
    }

    .widget-card .wc-body,
    .mini-table,
    .full-table {
        font-size: .7rem !important;
    }

    .kpi-row {
        gap: 8px !important;
    }

    .kpi-card {
        min-width: 112px !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }

    .kpi-card .kpi-val {
        font-size: 1.45rem !important;
    }

    .kpi-card .kpi-label {
        font-size: .68rem !important;
    }

    .chart-container.small {
        max-height: 170px !important;
    }

    /* Work-order list */
    #mainTable {
        min-width: 1120px;
        font-size: .68rem !important;
    }

    .sort-priority-bar {
        padding: 7px 8px !important;
    }

    .sort-priority-bar select {
        min-width: 112px !important;
    }

    .wo-shortage-sort-wrap {
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .wo-shortage-controls {
        justify-content: flex-start !important;
    }

    .wo-shortage-sort {
        font-size: .62rem !important;
        padding: 2px 6px !important;
    }

    .ship-adjust {
        max-width: 98px !important;
    }

    .mon-grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    }

    .mon-wo-panels,
    .monday-subrow > td > .mon-wo-panels {
        grid-template-columns: 1fr !important;
    }

    .wo-step-statuses {
        min-width: 96px !important;
    }

    /* Production calendar */
    .cal-sticky-header {
        top: 0 !important;
        padding-bottom: .35rem !important;
    }

    .cal-main-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: .5rem !important;
    }

    .cal-main-layout .wo-panel {
        order: 1;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 160px !important;
        flex-direction: column !important;
        margin: 0 0 .25rem 0 !important;
        border-radius: 8px !important;
    }

    .cal-main-layout .cal-wrapper {
        order: 2;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .cal-main-layout .wo-panel .wo-panel-header {
        padding: 6px 10px !important;
        border-radius: 8px 8px 0 0 !important;
        font-size: .76rem !important;
    }

    .cal-main-layout .wo-panel .wo-panel-body {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 6px !important;
        -webkit-overflow-scrolling: touch;
    }

    .cal-main-layout .wo-panel .wo-card {
        flex: 0 0 176px;
        min-width: 176px;
        margin-bottom: 0 !important;
        font-size: .66rem !important;
    }

    .cal-table {
        min-width: 1160px !important;
    }

    .cal-table td.day-cell {
        min-width: 78px !important;
        max-width: 98px !important;
        height: 56px !important;
        padding: 1px 2px !important;
    }

    .cal-table .room-cell {
        min-width: 92px !important;
        max-width: 112px !important;
        font-size: .68rem !important;
    }

    .cal-table thead th,
    .cal-thead-clone th {
        font-size: .62rem !important;
        padding: 2px 1px !important;
    }

    .sched-chip {
        min-height: 26px !important;
        padding: 1px 3px !important;
        font-size: .58rem !important;
        line-height: 1.15 !important;
        touch-action: none;
    }

    .sched-chip .prod {
        max-width: 62px !important;
        font-size: .54rem !important;
    }

    .sched-chip .po {
        font-size: .6rem !important;
    }

    .sched-chip .qty,
    .sched-chip .prog-row {
        font-size: .52rem !important;
    }

    .period-toggle {
        font-size: .5rem !important;
        padding: 0 1px !important;
    }

    .month-nav {
        gap: .25rem !important;
    }

    .month-nav .month-title {
        min-width: 118px !important;
        font-size: .88rem !important;
    }

    .cal-cat-btn {
        font-size: .64rem !important;
        padding: 2px 7px !important;
    }

    .legend-dot {
        width: 9px !important;
        height: 9px !important;
    }

    /* Work-order detail and step pages */
    .stepper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin-bottom: 1rem !important;
    }

    .step-item {
        flex: 0 0 104px !important;
        padding: 10px 4px 6px !important;
    }

    .step-item::after {
        right: -52px !important;
        width: 104px !important;
    }

    .step-circle {
        width: 30px !important;
        height: 30px !important;
        font-size: .76rem !important;
    }

    .step-label {
        font-size: .62rem !important;
        line-height: 1.15;
        white-space: normal;
    }

    /* WO detail: keep the desktop two-column shape in tablet landscape, but
       prevent the right column and wide content from pushing the page wider. */
    .wo-detail-page .row.g-3 {
        align-items: flex-start;
    }

    .wo-detail-page .row.g-3 > .col-md-3 {
        flex: 0 0 260px !important;
        max-width: 260px !important;
        min-width: 0 !important;
    }

    .wo-detail-page .row.g-3 > .col-md-9 {
        flex: 1 1 0 !important;
        max-width: calc(100% - 276px) !important;
        min-width: 0 !important;
    }

    .wo-detail-page .card-header,
    .wo-detail-page .card-body,
    .wo-detail-page .alert {
        min-width: 0;
    }

    .wo-detail-page .card-header.d-flex {
        flex-wrap: wrap !important;
        gap: .4rem !important;
    }

    .wo-detail-page .card-header .ms-auto,
    .wo-detail-page .card-header .ms-2,
    .wo-detail-page .card-header .ms-3 {
        margin-left: 0 !important;
    }

    .wo-detail-page .card-header .btn,
    .wo-detail-page .card-header form {
        margin-top: .15rem;
    }

    .wo-detail-page .table-responsive {
        max-width: 100%;
    }

    .wo-detail-page .table th,
    .wo-detail-page .table td,
    .wo-detail-page .badge,
    .wo-detail-page code,
    .wo-detail-page a {
        overflow-wrap: normal;
        word-break: normal;
    }

    .wo-detail-page #woLabelVerify .table-responsive > table,
    .wo-detail-page #woLabelVerify .table {
        min-width: 0 !important;
        table-layout: fixed;
        width: 100% !important;
    }

    .wo-detail-page #woLabelVerify th,
    .wo-detail-page #woLabelVerify td {
        white-space: normal !important;
    }

    .wo-detail-page #woLabelVerify th:nth-child(1) {
        width: 20% !important;
    }

    .wo-detail-page #woLabelVerify th:nth-child(2) {
        width: 15% !important;
    }

    .wo-detail-page #woLabelVerify th:nth-child(3) {
        width: 45% !important;
    }

    .wo-detail-page #woLabelVerify th:nth-child(4) {
        width: 20% !important;
    }

    .wo-detail-page #woLabelVerify .card-header > span,
    .wo-detail-page #woLabelVerify .card-header form {
        min-width: 0;
    }

    .wo-detail-page #woLabelVerify .card-header form {
        flex-wrap: wrap;
    }

    .wo-detail-page #woLabelVerify .card-header select {
        max-width: 190px;
    }
}

@media (min-width: 992px) and (max-width: 1368px) and (pointer: coarse),
       (min-width: 992px) and (max-width: 1368px) and (any-pointer: coarse),
       (min-width: 992px) and (max-width: 1368px) and (hover: none) {
    .navbar .navbar-toggler.mobile-toggler {
        display: block !important;
        border-color: rgba(255,255,255,.4);
        padding: .25rem .5rem;
    }

    .navbar .navbar-toggler.mobile-toggler .navbar-toggler-icon {
        filter: invert(1);
        width: 1.2em;
        height: 1.2em;
    }

    .navbar-expand-lg .navbar-collapse {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
    }

    .navbar-expand-lg .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }

    .navbar-expand-lg .navbar-collapse.show,
    .navbar-expand-lg .navbar-collapse.collapsing {
        display: block !important;
        width: 100% !important;
    }

    .navbar .navbar-collapse .d-flex,
    .navbar .navbar-collapse .nav-flex {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 2px !important;
        margin-left: 0 !important;
        padding: .5rem 0 !important;
    }

    .navbar .navbar-collapse .nav-link {
        border-radius: 4px;
        font-size: .86rem !important;
        padding: .58rem .8rem !important;
    }

    .navbar .navbar-collapse .dropdown-menu,
    .navbar .navbar-collapse .dropend > .dropdown-menu {
        background: rgba(255,255,255,.08);
        border: 0;
        box-shadow: none;
        left: auto !important;
        padding-left: 1rem;
        position: static !important;
    }
}

@media (min-width: 760px) and (max-width: 991.98px) {
    .dash-header,
    .d-flex.align-items-center.mb-3,
    .cal-sticky-header .d-flex {
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }

    .container-fluid[style*="padding-right:260px"] {
        padding-left: .65rem !important;
        padding-right: .65rem !important;
    }

    .grid-stack {
        min-height: 0 !important;
    }

    .widget-card {
        border-radius: 8px !important;
        padding: 10px !important;
    }

    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #mainTable,
    .table-responsive > table,
    .table-responsive > .table {
        min-width: 860px;
    }

    .cal-main-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: .5rem !important;
    }

    .cal-main-layout .wo-panel {
        order: 1;
        position: static !important;
        width: 100% !important;
        max-height: 170px !important;
        margin-bottom: .35rem !important;
    }

    .cal-main-layout .cal-wrapper {
        order: 2;
        width: 100% !important;
    }

    .cal-table {
        min-width: 1080px !important;
    }

    .stepper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .step-item {
        flex: 0 0 98px !important;
    }

    .row > .col-md-3,
    .row > .col-md-4,
    .row > .col-md-5,
    .row > .col-md-6,
    .row > .col-md-7,
    .row > .col-md-8,
    .row > .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .wo-detail-page .container-fluid.px-4 {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .wo-detail-page .row.g-3 {
        --bs-gutter-x: .5rem;
        --bs-gutter-y: .65rem;
    }

    .wo-detail-page .row.g-3 > .col-md-3,
    .wo-detail-page .row.g-3 > .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .wo-detail-page .col-md-3 .card .table-borderless {
        table-layout: fixed;
        width: 100%;
    }

    .wo-detail-page .col-md-3 .card .table-borderless td:first-child {
        width: 34%;
    }

    .wo-detail-page .col-md-3 .card .table-borderless td:last-child {
        width: 66%;
        overflow-wrap: anywhere;
    }

    .wo-detail-page .card-header.d-flex,
    .wo-detail-page .d-flex.align-items-center.gap-3,
    .wo-detail-page .d-flex.align-items-center.gap-2 {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: .45rem !important;
    }

    .wo-detail-page .card-header .ms-auto,
    .wo-detail-page .card-header .ms-1,
    .wo-detail-page .card-header .ms-2,
    .wo-detail-page .card-header .ms-3 {
        margin-left: 0 !important;
    }

    .wo-detail-page .card-header .btn,
    .wo-detail-page .card-header form {
        margin-top: .2rem;
    }

    .wo-detail-page .card-header form {
        flex-wrap: wrap;
        width: 100%;
    }

    .wo-detail-page .card-header select,
    .wo-detail-page .form-select,
    .wo-detail-page .form-control {
        max-width: 100%;
    }

    .wo-detail-page .card,
    .wo-detail-page .card-body,
    .wo-detail-page .alert {
        min-width: 0;
    }

    .wo-detail-page .table-responsive {
        max-width: 100%;
        overflow-x: auto !important;
    }

    .wo-detail-page .table th,
    .wo-detail-page .table td,
    .wo-detail-page .badge,
    .wo-detail-page code,
    .wo-detail-page a {
        overflow-wrap: normal;
        word-break: normal;
    }

    .wo-detail-page #woLabelVerify .table-responsive {
        overflow-x: visible !important;
    }

    .wo-detail-page #woLabelVerify .table-responsive > table,
    .wo-detail-page #woLabelVerify table,
    .wo-detail-page #woLabelVerify thead,
    .wo-detail-page #woLabelVerify tbody,
    .wo-detail-page #woLabelVerify tr,
    .wo-detail-page #woLabelVerify th,
    .wo-detail-page #woLabelVerify td {
        display: block;
        min-width: 0 !important;
        width: 100% !important;
    }

    .wo-detail-page #woLabelVerify thead {
        display: none;
    }

    .wo-detail-page #woLabelVerify tbody tr {
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        margin-bottom: .55rem;
        padding: .45rem .5rem;
        background: #fff;
    }

    .wo-detail-page #woLabelVerify tbody tr.table-light {
        background: #f8f9fa;
    }

    .wo-detail-page #woLabelVerify tbody td {
        border: 0 !important;
        padding: .22rem 0 !important;
        white-space: normal !important;
    }

    .wo-detail-page #woLabelVerify tbody td::before {
        display: block;
        color: #6c757d;
        font-size: .62rem;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: .08rem;
        text-transform: uppercase;
    }

    .wo-detail-page #woLabelVerify tbody td:nth-child(1)::before {
        content: "Label Claim";
    }

    .wo-detail-page #woLabelVerify tbody td:nth-child(2)::before {
        content: "Label Amount";
    }

    .wo-detail-page #woLabelVerify tbody td:nth-child(3)::before {
        content: "Matched WO Materials";
    }

    .wo-detail-page #woLabelVerify tbody td:nth-child(4)::before {
        content: "Active Check";
    }

    .wo-detail-page #changePathBanner .card-header {
        align-items: flex-start !important;
    }

    .wo-detail-page #changePathBanner .card-body p {
        font-size: .78rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1100px) and (pointer: coarse),
       (min-width: 992px) and (max-width: 1100px) and (any-pointer: coarse),
       (min-width: 992px) and (max-width: 1100px) and (orientation: portrait) {
    .wo-detail-page .container-fluid.px-4 {
        padding-left: .6rem !important;
        padding-right: .6rem !important;
    }

    .wo-detail-page .row.g-3 {
        --bs-gutter-x: .6rem;
        --bs-gutter-y: .7rem;
    }

    .wo-detail-page .row.g-3 > .col-md-3,
    .wo-detail-page .row.g-3 > .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .wo-detail-page #woLabelVerify .table-responsive > table,
    .wo-detail-page #woLabelVerify .table {
        min-width: 0 !important;
        table-layout: fixed;
        width: 100% !important;
    }

    .wo-detail-page #woLabelVerify th,
    .wo-detail-page #woLabelVerify td {
        overflow-wrap: anywhere;
        white-space: normal !important;
    }
}

/* Work-order flow global tablet layer.
   Applies to list, create, detail, step execution, activity, and Monday views. */
@media (min-width: 760px) and (max-width: 1368px) and (pointer: coarse),
       (min-width: 760px) and (max-width: 1368px) and (any-pointer: coarse),
       (min-width: 760px) and (max-width: 1100px) and (orientation: portrait) {
    .wo-flow-page {
        overflow-x: hidden;
    }

    .wo-flow-page .container,
    .wo-flow-page .container-fluid {
        max-width: 100% !important;
        padding-left: .65rem !important;
        padding-right: .65rem !important;
    }

    .wo-flow-page .row {
        --bs-gutter-x: .65rem;
        --bs-gutter-y: .65rem;
        min-width: 0;
    }

    .wo-flow-page [class^="col-"],
    .wo-flow-page [class*=" col-"] {
        min-width: 0;
    }

    .wo-flow-page .card,
    .wo-flow-page .card-body,
    .wo-flow-page .card-header,
    .wo-flow-page .alert,
    .wo-flow-page .border,
    .wo-flow-page .rounded {
        max-width: 100%;
        min-width: 0;
    }

    .wo-flow-page .card-header,
    .wo-flow-page .d-flex.align-items-center.mb-3,
    .wo-flow-page .d-flex.justify-content-between,
    .wo-flow-page .d-flex.align-items-center.py-2,
    .wo-flow-page .d-flex.flex-wrap {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: .45rem !important;
    }

    .wo-flow-page .card-header .ms-auto,
    .wo-flow-page .card-header .ms-1,
    .wo-flow-page .card-header .ms-2,
    .wo-flow-page .card-header .ms-3,
    .wo-flow-page .d-flex.align-items-center.mb-3 .ms-auto {
        margin-left: 0 !important;
    }

    .wo-flow-page .breadcrumb {
        flex-wrap: wrap;
        row-gap: .2rem;
    }

    .wo-flow-page .section-title,
    .wo-flow-page .pkg-section-title {
        line-height: 1.2;
        margin-bottom: .55rem !important;
    }

    .wo-flow-page .btn,
    .wo-flow-page .form-control,
    .wo-flow-page .form-select,
    .wo-flow-page textarea,
    .wo-flow-page input,
    .wo-flow-page select {
        max-width: 100%;
    }

    .wo-flow-page .btn,
    .wo-flow-page .btn-sm {
        white-space: normal;
    }

    .wo-flow-page .btn-group {
        max-width: 100%;
    }

    .wo-flow-page .btn-group.w-100 {
        display: grid !important;
        gap: .35rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wo-flow-page .btn-group.w-100 > .btn,
    .wo-flow-page .btn-group.w-100 > label.btn {
        border-radius: .375rem !important;
        margin: 0 !important;
        min-width: 0;
        white-space: normal;
    }

    .wo-flow-page .form-check-inline {
        margin-bottom: .25rem;
        margin-right: .7rem;
    }

    .wo-flow-page .table-responsive {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .wo-flow-page .table {
        font-size: .72rem !important;
    }

    /* Wrap, but never inside a word. These rules used to say
       `overflow-wrap: anywhere`, which is only safe where a column's width is
       guaranteed — a table-layout:fixed grid, or a card column pinned at 66%,
       where a broken value still lands two readable lines of ten characters.
       An auto-layout table gives no such guarantee: it answers the pressure by
       collapsing the column instead, and then "anywhere" is licence to print
       one character per line. On the Blending step that turned the batch
       column into a 23px ribbon reading G-2-0-2-6-0-1-1-3 downwards, and the
       page stood 26 screens tall. Word-safe wrapping: 0 crushed cells, 13
       screens, and no page anywhere gained so much as a pixel of overflow.
       (Andrew 2026-09-14: item names may wrap to as many lines as they need,
       so long as the page stays under control.) */
    .wo-flow-page .table th,
    .wo-flow-page .table td {
        overflow-wrap: normal;
        padding: .3rem .38rem !important;
        white-space: normal !important;
        word-break: normal;
    }

    .wo-flow-page .table th {
        line-height: 1.15;
    }

    /* The cleaning record is the one checklist on a step page whose boxes
       carry no <label for>, so the 13px box IS the entire tap target — under a
       third of the 44px the touch guidance asks for, in a room where the
       person ticking it is wearing gloves. Every other checkbox on the page
       (30 of them) is paired with a label and is already as big as its text.
       The cell measures 128x77px, so a 30px box costs nothing.

       .pu-case-select on the bottling step is the same shape: four unlabelled
       boxes that choose which cases go to pickup. Swept for the pattern rather
       than fixed one class at a time — across all four step pages and the WO
       detail page these three classes are the only unlabelled ones left. */
    /* A button label is never a paragraph. Chinese has no spaces, so a narrow
       column wraps it one character per line: the 撤销 button on the filling
       step came out 12px wide and 31px tall, two characters stacked. */
    /* Status chips are what an operator reads across a room — Completed, In
       Progress, SOP Ref, Photos — and the site-wide rule pins them at .65rem.
       That is 10.4 CSS px, and this screen packs 1280 px across 9.4 inches, so
       a CSS pixel here is about 29% smaller than the same pixel on a desk
       monitor: the chips render near 7px of desktop-equivalent type. They were
       the single largest source of unreadable text on a step page — 702 of the
       sub-12px nodes on capsule filling. Raising just this one family takes
       that page from 435 sub-12px nodes to 83, and costs 0.8% of page height. */
    .badge,
    .st-badge {
        font-size: 12px !important;
    }

    /* The delete controls on the WO detail page were 9px wide and 16px tall —
       a ✕ set at .65rem. Destructive and unhittable at the same time, which is
       the worst pair to have: a finger that misses is a finger that lands on
       whatever sits beside it. All eight `a.text-danger` on the workflow pages
       are delete actions and nothing else, so the whole class can be given a
       real 32px target — and a margin, because a destructive control should be
       easy to hit on purpose and hard to hit by accident. */
    /* Inline links are 14-17px tall — the height of their own text — and that
       is the whole tap target for an SOP reference, a COA filename, a version
       tag. Vertical padding on an inline element grows the hit box without
       touching the line box, so this costs no page height at all: the WO
       detail page went from 108 targets under 24px to 1, and stayed 7.0
       screens to the pixel.

       5px rather than more because the hit boxes must not start overlapping —
       measured across that page, the closest two stacked links sit 12px apart,
       so 5px of growth on each still leaves them 2px clear. Links that are
       already blocks with their own padding (.btn, .nav-link, .page-link) and
       the delete controls handled just below are left out. A <button> with no
       .btn class is a link wearing a button tag — the "+18 more" toggles on
       the shortage panel are `background:none; border:0; padding:0` — so they
       belong to the same family and take the same treatment — and so does a
       checkbox's own label, whose height is what makes the pair's combined
       target 17px thin rather than narrow. */
    a:not(.btn):not(.nav-link):not(.page-link):not(.text-danger),
    button:not(.btn):not(.btn-close):not(.navbar-toggler):not(.accordion-button),
    .form-check-label {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .form-check-label {
        display: inline-block;
    }

    /* Not every checkbox label carries .form-check-label — the "skip weekends"
       toggle on the step page uses a bare <label> wrapping its input — so the
       structural test catches what the class name misses. Its own rule block:
       a browser without :has() would drop the whole selector list, and the
       rules above must survive that. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* .btn-link is a link that kept the button class, and .p-0 zeroes its
       padding with !important — 撤销 came out 21x16, 📋1 33x19. */
    .btn.btn-link {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* A native select is a tap target too: the column filters on the Work
       Orders header row stood 19px tall. */
    select.form-select-sm {
        min-height: 32px;
    }

    /* Icon buttons are narrow because their glyph is — ✕ measured 28px wide,
       + eighteen — and their content fits, so this is a floor rather than a
       fix for overflow. A minimum box on every button also catches the
       shortage-sort links, which were 22px tall. */
    .btn {
        min-width: 32px;
        min-height: 32px;
    }

    /* The same floor for controls that are not .btn at all. A page outside the
       work-order flow has no body class to hang rules on, so these are written
       against structure: Working Area had 1007 of its 1016 controls under 24px
       before this section stopped being scoped to .wo-flow-page. */
    button:not(.btn):not(.btn-close):not(.navbar-toggler):not(.accordion-button) {
        min-width: 32px;
        min-height: 32px;
    }

    /* A link alone in a table cell is a cell-sized action — the pallet numbers
       on the outbound list were 13px wide — and an inline element ignores
       min-width, so it has to become inline-block to take one. */
    td > a:only-child {
        display: inline-block;
        min-width: 32px;
        text-align: center;
    }

    /* Form controls, including the ones wearing no Bootstrap class at all —
       the outbound filters are bare <input> and <select> elements and came out
       23px tall. */
    .form-control-sm,
    input.form-control,
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input:not([type]),
    select,
    textarea {
        min-height: 32px;
    }

    /* A badge that is a link is still a link, but .badge's own padding carries
       !important and wins — the "BOL attached" chips on the receiving list
       stayed 19px tall until this said so out loud. */
    a.badge {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* Already inline-block, so it can simply be told a height: the purchase
       order links measured 179x21, wide enough to hit but thin. */
    a.d-inline-block {
        min-height: 30px;
    }

    /* A wide table that nobody wrapped in .table-responsive has no way to fit:
       the purchase order list ran 841px inside a 780px portrait viewport and
       took the whole page sideways with it. Giving its parent a scroller keeps
       the overflow inside the table, where it belongs. Pre-existing, not
       introduced here — undoing each rule above moved those 61px by at most 6.
       Own rule block: a browser without :has() drops it and simply keeps the
       behaviour it had before. */
    div:has(> table.table):not(.table-responsive) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* The lone icon link that padding cannot save: ✏ is 16px wide, so its
       width is the limit, not its height. */
    a#dueDateEditBtn {
        display: inline-block;
        min-width: 32px;
        min-height: 32px;
        line-height: 30px;
        text-align: center;
    }

    a.text-danger {
        display: inline-block;
        min-width: 32px;
        min-height: 32px;
        line-height: 30px;
        text-align: center;
        font-size: 14px !important;
        margin-left: 6px;
        border-radius: 4px;
    }

    .btn {
        white-space: nowrap;
    }

    /* A button that refuses to wrap has to be allowed to move to the next
       line instead, or it pushes its row off the screen: holding the labels
       together put 34px of the weighing step's action row past the right edge
       in portrait. */
    .d-flex.align-items-center.ms-auto {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 6px;
    }

    /* A checkbox alone in a table cell cannot have a label — there is nothing
       in the cell to label it with — so the box itself is the whole target.
       That is a structural test rather than a list of class names, which is
       why it catches the row selectors and select-alls on the Work Orders
       list, the bulk residual tables, and the bin picker in one rule: 66
       targets under 24px on the list become 15, with no change to page height
       and no overflow. Checkboxes that DO sit beside a label are left alone;
       their label is already part of the tap target, and growing them would
       only disturb the rows they sit in. */
    td > input[type="checkbox"]:only-child,
    th > input[type="checkbox"]:only-child,
    td > input[type="radio"]:only-child {
        width: 26px;
        height: 26px;
    }

    .wo-flow-page .clean-performed,
    .wo-flow-page .clean-checked,
    .wo-flow-page .pu-case-select {
        width: 30px;
        height: 30px;
        margin-top: 2px;
    }

    .wo-flow-page .table td code,
    .wo-flow-page .table td a,
    .wo-flow-page .badge,
    .wo-flow-page .st-badge {
        overflow-wrap: normal;
        white-space: normal;
    }

    /* …but not when the table already sits in a horizontal scroller. There the
       scroller is what makes the table fit, and breaking mid-word instead
       crushes the columns. On a Galaxy Tab A11+ held portrait (800 CSS px) the
       Work Orders product-name column came out 24 CSS px wide and rendered
       "Deal Supplement Multi Collagen…" one character per line; with 416 rows
       the page stood 58 screens tall. Keeping words whole and letting the
       wrapper scroll measures 16 screens and leaves no cell under six
       characters wide.

       Deliberately NOT clamped with an ellipsis: a truncated column is a
       product name the operator can never finish reading, because the text is
       clipped inside the cell rather than reachable by scrolling. */
    .wo-flow-page .table-responsive > table td,
    .wo-flow-page .table-responsive > .table td,
    .wo-flow-page .table-responsive > .table td code,
    .wo-flow-page .table-responsive > .table td a,
    .wo-flow-page .table-responsive > .table td .badge,
    .wo-flow-page .table-responsive > .table td .st-badge {
        white-space: nowrap !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Headers are exempt: they are two-word labels and may still wrap. Holding
       them on one line let the label set its column's width instead of the
       data — Planned Qty stood 109px wide for "104,166" (40px of ink) and
       Planned Date 116px for a ten-character date. Letting headers run to two
       lines costs 12px of header height once and returns 101px of table
       width. */
    .wo-flow-page .table-responsive > table th,
    .wo-flow-page .table-responsive > .table th {
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* The product name is the one genuinely long value in a row, and on one
       line it claims 529px — more than any two other columns together, blank
       on every row whose name is short. So it wraps, but only at spaces, and
       it gets a fixed track rather than a max-width: a max alone lets the auto
       table layout collapse the column to its longest word (84px, names six
       lines deep). It costs no row height — the status column already stacks
       taller than three lines of name. */
    .wo-flow-page .table-responsive > .table td.wo-col-name {
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        width: 210px;
        min-width: 210px;
        max-width: 210px;
    }

    /* ── Work Orders list: every column pays in height, not width ──────────
       Andrew, 2026-09-14: "很多地方可以缩啊". He was right and my reading was
       wrong — I had measured each column's content *after* forcing it onto one
       line, so of course there was no slack left; that was a tautology, not a
       measurement. A row on this list stands 103px tall because the status
       column stacks four production steps, while most cells spent a single
       15px line of that and bought width with the rest.

       So each cell below wraps between its own chips — never inside a word or
       a code — and takes a fixed track, because allowing a wrap alone changes
       nothing: with table-layout auto and a scroller to grow into, the browser
       keeps every column at max-content. Three hard inline widths in
       work_orders.html set the real floor and are relaxed here for the tablet
       only: a 132px date input, a 112px priority select, a 74px shipped box. */
    .wo-flow-page .table-responsive > .table td.wo-col-type,
    .wo-flow-page .table-responsive > .table td.wo-col-mo,
    .wo-flow-page .table-responsive > .table td.wo-col-sku,
    .wo-flow-page .table-responsive > .table td.wo-col-output,
    .wo-flow-page .table-responsive > .table td.wo-col-material,
    .wo-flow-page .table-responsive > .table td.wo-col-prio,
    .wo-flow-page .table-responsive > .table td.wo-col-due {
        white-space: normal !important;
    }

    /* A chip is the unit that must not break. */
    .wo-flow-page .table-responsive > .table td .badge,
    .wo-flow-page .table-responsive > .table td .st-badge,
    .wo-flow-page .table-responsive > .table td .prio-pill,
    .wo-flow-page .table-responsive > .table td .auto-verify-badge,
    .wo-flow-page .table-responsive > .table td .btn,
    .wo-flow-page .table-responsive > .table td.wo-col-mo > code {
        white-space: nowrap !important;
    }

    /* The SKU is the one code that should break: its hyphens are genuine line
       break opportunities, so BA-MI-MAC0240-A-UPC costs two short lines rather
       than 117px of one. */
    .wo-flow-page .table-responsive > .table td.wo-col-sku > code {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Produced / Shipped: the caption goes above its figure instead of beside
       it, so the column is as wide as the wider of the two rather than both. */
    .wo-flow-page .table-responsive > .table td.wo-col-output > div > .text-muted {
        display: block;
    }

    .wo-flow-page .table-responsive > .table td.wo-col-output .wo-manual-shipped {
        width: 68px !important;
    }

    .wo-flow-page .table-responsive > .table td.wo-col-due .wo-due-date {
        width: 108px !important;
    }

    .wo-flow-page .table-responsive > .table td.wo-col-prio select {
        min-width: 90px !important;
    }

    .wo-flow-page .table-responsive > .table td.wo-col-type { width: 96px; max-width: 96px; }
    .wo-flow-page .table-responsive > .table td.wo-col-mo { width: 76px; max-width: 76px; }
    .wo-flow-page .table-responsive > .table td.wo-col-sku { width: 76px; max-width: 76px; }
    .wo-flow-page .table-responsive > .table td.wo-col-output { width: 86px; max-width: 86px; }
    .wo-flow-page .table-responsive > .table td.wo-col-material { width: 104px; max-width: 104px; }
    .wo-flow-page .table-responsive > .table td.wo-col-prio { width: 98px; max-width: 98px; }
    .wo-flow-page .table-responsive > .table td.wo-col-due { width: 116px; max-width: 116px; }

    /* Label/value cards are the exception: they carry no scroller of their own
       (their min-width is zeroed just below), so wrapping is what keeps them
       inside their column. */
    .wo-flow-page .table-responsive > .table-borderless th,
    .wo-flow-page .table-responsive > .table-borderless td,
    .wo-flow-page .table-responsive > .table-borderless td code,
    .wo-flow-page .table-responsive > .table-borderless td a {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Every order on the Work Orders list carries two panels underneath it —
       material shortage and the WO note — and work_orders.html stacks them
       below 900px. Measured on the tablet that came to 245px per order, or
       73% of the whole page, while the shortage panel usually read "No
       shortage / unmatched material" and the note box was empty. Each panel
       becomes one line, and an untouched note editor sits at one row until it
       is tapped. A note somebody wrote keeps its full height: :placeholder-
       shown matches only while the box is empty. */
    .wo-flow-page .mon-wo-panel {
        display: flex !important;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 10px;
    }

    .wo-flow-page .mon-wo-panel > .mon-lbl {
        flex: none;
        margin: 0 !important;
    }

    .wo-flow-page .wo-note-cell {
        align-items: center !important;
    }

    /* Capped, not greedy: the panel row spans the whole scrolled table width
       (1557px), so a growing textarea pushes Save past the right edge of the
       screen and the operator has to scroll sideways to save what they just
       typed. At 420px the button lands inside the viewport in both
       orientations. */
    .wo-flow-page .wo-note-cell textarea {
        flex: 0 1 420px;
    }

    .wo-flow-page .wo-note-cell textarea:placeholder-shown {
        height: 32px;
        min-height: 32px;
    }

    /* :focus-within on the cell, not only :focus on the box — it also keeps the
       editor open while the Save button has focus, and it is the condition
       that can actually be verified off-screen (a hidden document never
       reports :focus). */
    .wo-flow-page .wo-note-cell textarea:focus,
    .wo-flow-page .wo-note-cell:focus-within textarea {
        height: 76px;
        min-height: 76px;
    }

    .wo-flow-page .wo-note-cell .btn {
        flex: none;
        margin-top: 0 !important;
    }

    .wo-flow-page .table-responsive > table,
    .wo-flow-page .table-responsive > .table {
        min-width: 760px;
    }

    .wo-flow-page .table-borderless,
    .wo-flow-page .table-responsive > .table-borderless {
        min-width: 0 !important;
    }

    .wo-flow-page .modal-dialog {
        max-width: calc(100vw - 18px) !important;
        margin: .5rem auto !important;
    }

    .wo-flow-page .modal-body {
        max-height: calc(100vh - 120px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wo-flow-page .modal-body .row > [class^="col-"],
    .wo-flow-page .modal-body .row > [class*=" col-"] {
        min-width: 0;
    }

    .wo-flow-page .ac-search-drop,
    .wo-flow-page #skuDropdown {
        max-width: calc(100vw - 24px);
    }

    .wo-flow-page .text-truncate {
        min-width: 0;
    }

    .wo-list-page .sort-priority-bar > .d-flex,
    .wo-list-page .wo-shortage-sort-wrap,
    .wo-list-page .wo-shortage-controls {
        flex: 1 1 220px;
        max-width: 100% !important;
    }

    .wo-list-page .sort-priority-bar select {
        min-width: 108px !important;
    }

    .wo-monday-page .chg-row {
        align-items: flex-start;
    }

    .wo-monday-page .chg-item {
        max-width: 100% !important;
        white-space: normal !important;
    }

    .wo-activity-page .note-cell {
        max-width: 260px !important;
    }
}

@media (min-width: 992px) and (max-width: 1368px) and (pointer: coarse),
       (min-width: 992px) and (max-width: 1368px) and (any-pointer: coarse),
       (min-width: 992px) and (max-width: 1368px) and (hover: none) {
    .wo-step-page .row.g-3 > .col-md-3 {
        flex: 0 0 260px !important;
        max-width: 260px !important;
    }

    .wo-step-page .row.g-3 > .col-md-9 {
        flex: 1 1 0 !important;
        max-width: calc(100% - 276px) !important;
        min-width: 0 !important;
    }

    .wo-new-page .row.g-3 > .col-lg-7 {
        flex: 1 1 0 !important;
        max-width: calc(100% - 352px) !important;
        min-width: 0 !important;
    }

    .wo-new-page .row.g-3 > .col-lg-5 {
        flex: 0 0 336px !important;
        max-width: 336px !important;
        min-width: 0 !important;
    }
}

@media (min-width: 760px) and (max-width: 1100px) and (pointer: coarse),
       (min-width: 760px) and (max-width: 1100px) and (any-pointer: coarse),
       (min-width: 760px) and (max-width: 1100px) and (orientation: portrait) {
    .wo-flow-page .row > .col-md-2,
    .wo-flow-page .row > .col-md-3,
    .wo-flow-page .row > .col-md-4,
    .wo-flow-page .row > .col-md-5,
    .wo-flow-page .row > .col-md-6,
    .wo-flow-page .row > .col-md-7,
    .wo-flow-page .row > .col-md-8,
    .wo-flow-page .row > .col-md-9,
    .wo-flow-page .row > .col-md-10,
    .wo-flow-page .row > .col-md-11,
    .wo-flow-page .row > .col-md-12,
    .wo-flow-page .row > .col-lg-5,
    .wo-flow-page .row > .col-lg-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .wo-flow-page .card.p-4 {
        padding: .85rem !important;
    }

    .wo-flow-page .card.p-3 {
        padding: .7rem !important;
    }

    .wo-flow-page .table-responsive > table,
    .wo-flow-page .table-responsive > .table {
        min-width: 720px;
    }

    .wo-step-page .stepper,
    .wo-detail-page .stepper {
        margin-bottom: .75rem !important;
    }

    .wo-step-page .step-item,
    .wo-detail-page .step-item {
        flex: 0 0 96px !important;
    }

    .wo-step-page .step-label,
    .wo-detail-page .step-label {
        font-size: .6rem !important;
    }
}

@media (max-width: 640px) {
    .wo-flow-page .btn-group.w-100 {
        grid-template-columns: 1fr;
    }

    .wo-flow-page .table-responsive > table,
    .wo-flow-page .table-responsive > .table {
        min-width: 680px;
    }

    .wo-flow-page .container,
    .wo-flow-page .container-fluid {
        padding-left: .45rem !important;
        padding-right: .45rem !important;
    }
}