/*
 * Production API v130 responsive foundation.
 *
 * Desktop layouts keep their existing structure. Tablet and phone rules add
 * touch-friendly controls, compact navigation, card-style data tables and
 * bottom-sheet dialogs without changing any workflow or API behavior.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
}

img,
svg {
    max-width: 100%;
}

/* v179: circular header icon buttons must not inherit generic responsive button height. */
.responsive-v130 .icon-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
}

.responsive-v130 .table-wrap {
    max-width: 100%;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

.responsive-v130 .table-wrap > table {
    max-width: none;
}

@media (max-width: 1100px) {
    .responsive-v130 .toolbar,
    .responsive-v130 .main-toolbar,
    .responsive-v130 .actions,
    .responsive-v130 .inline-actions {
        flex-wrap: wrap;
    }

    .responsive-v130 .toolbar > .left,
    .responsive-v130 .toolbar > .right {
        min-width: 0;
    }

    .responsive-v130 .form-grid,
    .responsive-v130 .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .responsive-v130 button,
    .responsive-v130 .btn,
    .responsive-v130 a.btn,
    .responsive-v130 input,
    .responsive-v130 select {
        min-height: 42px;
    }
}

@media (max-width: 820px) {
    .responsive-v130 {
        --responsive-page-gap: 14px;
    }

    .responsive-v130 button,
    .responsive-v130 .btn,
    .responsive-v130 a.btn,
    .responsive-v130 input,
    .responsive-v130 select {
        min-height: 44px;
    }

    .responsive-v130 input,
    .responsive-v130 select,
    .responsive-v130 textarea {
        font-size: 16px !important;
    }

    .responsive-v130 .page,
    .responsive-v130 .admin-page,
    .responsive-v130 .main {
        min-width: 0;
    }

    .responsive-v130 .toolbar,
    .responsive-v130 .main-toolbar {
        gap: 10px;
    }

    .responsive-v130 .toolbar > .left,
    .responsive-v130 .toolbar > .right,
    .responsive-v130 .toolbar .search,
    .responsive-v130 .toolbar .search-box {
        width: 100%;
        min-width: 0 !important;
    }

    .responsive-v130 .toolbar > .right {
        align-items: stretch;
    }

    .responsive-v130 .toolbar > .right > .btn,
    .responsive-v130 .toolbar > .right > button {
        flex: 1 1 auto;
    }

    .responsive-v130 .form-grid,
    .responsive-v130 .grid,
    .responsive-v130 .grid-2,
    .responsive-v130 .grid-3,
    .responsive-v130 .grid2 {
        grid-template-columns: 1fr !important;
    }

    .responsive-v130 .modal-wrap,
    .responsive-v130 .modal-overlay,
    .responsive-v130 .overlay.show,
    .responsive-v130 .modal.show {
        padding: 10px !important;
        align-items: flex-end !important;
    }

    .responsive-v130 .overlay.show {
        z-index: 2100 !important;
    }

    .responsive-v130 .modal-wrap > .modal,
    .responsive-v130 .modal-overlay > .modal,
    .responsive-v130 .overlay > .modal,
    .responsive-v130 .modal-card,
    .responsive-v130 .dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 22px 22px 10px 10px !important;
    }

    .responsive-v130 .modal-header,
    .responsive-v130 .modal-head,
    .responsive-v130 .dialog-head {
        padding: 14px 16px !important;
    }

    .responsive-v130 .modal-body,
    .responsive-v130 .dialog-body {
        padding: 16px !important;
    }

    .responsive-v130 .modal-footer {
        position: sticky;
        bottom: 0;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
        background: rgba(255, 255, 255, .98);
    }

    .responsive-v130 .modal-footer .btn {
        flex: 1 1 0;
    }

    /*
     * Tables with twelve columns or fewer are marked by responsive_v130.js.
     * On phones and portrait tablets each row becomes a readable record card.
     * Dense matrices and audit tables remain horizontally scrollable.
     */
    .responsive-v130 .responsive-table-host {
        overflow: visible !important;
        max-height: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    .responsive-v130 table.responsive-table-cards {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border: 0;
        background: transparent;
    }

    .responsive-v130 table.responsive-table-cards thead {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .responsive-v130 table.responsive-table-cards tbody {
        display: grid;
        gap: 12px;
        width: 100%;
    }

    .responsive-v130 table.responsive-table-cards tbody tr {
        display: grid;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--line, #d7dee7);
        border-radius: 16px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }

    .responsive-v130 table.responsive-table-cards tbody td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: 11px 13px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--line, #e4e7ec) !important;
        background: transparent !important;
        overflow-wrap: anywhere;
    }

    .responsive-v130 table.responsive-table-cards tbody td:last-child {
        border-bottom: 0 !important;
    }

    .responsive-v130 table.responsive-table-cards tbody td::before {
        content: attr(data-mobile-label);
        color: var(--muted, #667085);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .035em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .responsive-v130 table.responsive-table-cards tbody td[colspan] {
        display: block;
        padding: 20px 14px !important;
        text-align: center;
    }

    .responsive-v130 table.responsive-table-cards tbody td[colspan]::before,
    .responsive-v130 table.responsive-table-cards tbody td[data-mobile-label=""]::before {
        display: none;
    }

    .responsive-v130 table.responsive-table-cards tbody td .btn,
    .responsive-v130 table.responsive-table-cards tbody td button {
        max-width: 100%;
    }

    /* Standalone packing screen. */
    .responsive-v130[data-responsive-page="worker-packing"] .top > div:first-child h1,
    .responsive-v130[data-responsive-page="worker-packing"] .top > div:first-child > .muted {
        color: #f8fafc;
    }

    .responsive-v130[data-responsive-page="worker-packing"] .page {
        padding: 12px;
    }

    .responsive-v130[data-responsive-page="worker-packing"] .panel {
        border-radius: 18px;
    }

    .responsive-v130[data-responsive-page="worker-packing"] .detail,
    .responsive-v130[data-responsive-page="worker-packing"] .toolbar {
        padding: 14px;
    }

    .responsive-v130[data-responsive-page="worker-packing"] .card {
        padding: 14px;
    }

    /* Orders screen: keep navigation reachable without shrinking labels. */
    .responsive-v130[data-responsive-page="worker-orders"] .topbar {
        height: auto;
        min-height: 52px;
        padding: 8px 12px;
    }

    .responsive-v130[data-responsive-page="worker-orders"] .header-tabs {
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .responsive-v130[data-responsive-page="worker-orders"] .header-tab,
    .responsive-v130[data-responsive-page="worker-orders"] .topbtn {
        min-height: 40px;
        white-space: nowrap;
    }

    /* QC navigation becomes one compact horizontal mobile bar. */
    .responsive-v130[data-responsive-page="worker-quality"] .app {
        display: block;
    }

    .responsive-v130[data-responsive-page="worker-quality"] .sidebar {
        position: sticky;
        top: 0;
        z-index: 80;
        display: block;
        width: 100%;
        height: auto;
        padding: 8px 10px;
        overflow: hidden;
    }

    .responsive-v130[data-responsive-page="worker-quality"] .brand {
        display: none;
    }

    .responsive-v130[data-responsive-page="worker-quality"] .sidebar-menu {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .responsive-v130[data-responsive-page="worker-quality"] .menu-link {
        width: auto;
        min-width: max-content;
        min-height: 42px;
        margin: 0;
        padding: 10px 12px;
        scroll-snap-align: start;
    }

    .responsive-v130[data-responsive-page="worker-quality"] .main {
        padding: 0 12px 20px;
    }

    .responsive-v130[data-responsive-page="worker-quality"] .top-strip {
        margin: 0 -12px 14px;
        padding: 8px 14px;
    }

    .responsive-v130[data-responsive-page="worker-quality"] .page-title h1 {
        font-size: 18px;
    }

    /* Box-layout editor toolbars scroll instead of leaving the viewport. */
    .responsive-v130[data-responsive-page="admin-box-layouts"] .toolbar.nowrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: thin;
    }

    .responsive-v130[data-responsive-page="admin-box-layouts"] .toolbar.nowrap > * {
        flex: 0 0 auto;
    }

    /* Label designer keeps the canvas model, but all command bars stay usable. */
    .responsive-v130[data-responsive-page="admin-label-designer"] .top-menu,
    .responsive-v130[data-responsive-page="admin-label-designer"] .tool-row,
    .responsive-v130[data-responsive-page="admin-label-designer"] .statusbar {
        max-width: 100vw;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
    }

    .responsive-v130[data-responsive-page="admin-label-designer"] .top-menu {
        display: flex;
        flex-wrap: nowrap;
    }

    .responsive-v130[data-responsive-page="admin-label-designer"] .menu-item,
    .responsive-v130[data-responsive-page="admin-label-designer"] .tool-btn {
        flex: 0 0 auto;
    }

    .responsive-v130[data-responsive-page="admin-label-designer"] .floating-dock {
        position: fixed;
        inset: auto 8px 8px 8px;
        width: auto;
        max-height: min(62dvh, 520px);
    }
}