/* Smartphone layout is intentionally kept in one final stylesheet so desktop parity stays intact. */
@media screen and (max-width: 900px) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body { font-size: 13px; }

    button,
    a,
    summary,
    label { touch-action: manipulation; }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100%;
        font-size: 16px !important;
    }

    .app-shell { grid-template-columns: 1fr !important; }
    .main-column {
        grid-column: 1 !important;
        grid-template-rows: auto 40px minmax(0, 1fr) !important;
    }

    .topbar {
        height: auto !important;
        min-height: 106px;
        padding: 7px 8px 8px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        grid-template-rows: 42px 48px;
        gap: 7px 8px !important;
        border-bottom: 1px solid #2b2b2b !important;
    }

    .mobile-menu {
        width: 42px !important;
        height: 42px !important;
        display: inline-grid !important;
        grid-column: 1;
        grid-row: 1;
    }

    .department-selector {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        grid-column: 2;
        grid-row: 1;
    }

    .department-selector select {
        padding-left: 35px !important;
        font-size: 14px !important;
    }

    .topbar-actions {
        min-width: 0;
        grid-column: 3;
        grid-row: 1;
        gap: 5px !important;
    }

    .topbar-tool {
        width: 42px !important;
        height: 42px !important;
    }

    .pavel-funds {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        display: grid !important;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
    }

    .pavel-fund {
        width: auto !important;
        height: 48px !important;
        padding: 0 9px !important;
    }

    .pavel-fund-icon {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
        display: grid !important;
    }

    .pavel-fund-copy { gap: 1px !important; }
    .pavel-fund-copy > span { font-size: 9px !important; }
    .pavel-fund-copy strong { font-size: 14px !important; }

    .sidebar {
        width: min(86vw, 320px) !important;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 18px 0 45px #000b;
    }

    .nav-shell { font-size: 14px; }
    .brand {
        height: 58px !important;
        flex-basis: 58px !important;
        padding: 0 18px !important;
    }

    .user-panel {
        min-height: 92px !important;
        flex: 0 0 92px !important;
        padding: 10px 18px !important;
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        justify-content: stretch !important;
        column-gap: 13px;
    }

    .user-panel img {
        width: 62px !important;
        height: 62px !important;
        grid-column: 1;
        grid-row: 1 / -1;
    }

    .user-role {
        margin: 0 !important;
        align-self: end;
        text-align: left;
        font-size: 11px !important;
    }

    .user-panel strong {
        margin: 2px 0 0 !important;
        align-self: start;
        text-align: left !important;
        font-size: 18px !important;
    }

    .nav-fast-actions {
        padding: 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .fast-action {
        min-width: 0;
        min-height: 48px !important;
        padding: 0 10px !important;
        justify-content: center;
        gap: 8px !important;
        text-align: center;
        font-size: 13px !important;
    }

    .primary-nav { margin-top: 3px !important; }
    .primary-nav .nav-link,
    .primary-nav a.nav-link,
    .nav-footer .nav-link,
    .nav-footer a.nav-link {
        min-height: 46px !important;
        padding: 0 20px !important;
        gap: 16px !important;
        font-size: 14px !important;
    }

    .nav-footer,
    .settings-link { min-height: 50px !important; }

    .workspace-tabs {
        height: 40px !important;
        padding: 0 0 0 7px !important;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .workspace-tabs::-webkit-scrollbar { display: none; }
    .workspace-tab {
        min-width: 110px !important;
        scroll-snap-align: start;
    }

    .workspace-tab a {
        min-height: 39px;
        padding-left: 11px !important;
        display: flex;
        align-items: center;
        font-size: 12px !important;
    }

    .workspace-tab button,
    .workspace-close {
        min-width: 34px !important;
        width: 34px !important;
    }

    .workspace-close {
        position: sticky;
        right: 0;
        flex-basis: 40px !important;
        background: #1b1b1b !important;
        box-shadow: -10px 0 16px #151515;
    }

    .content {
        width: 100%;
        min-width: 0;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .page-stack { gap: 10px; }
    .page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .button,
    .legacy-button,
    .stock-button,
    .finance-button,
    .order-button,
    .task-button,
    .reference-button,
    .company-button,
    .inventory-button,
    .doc-button,
    .tool {
        min-height: 42px !important;
        padding-inline: 12px !important;
        font-size: 13px !important;
    }

    .icon-button,
    .icon-command,
    .field-icon,
    .grid-icon,
    .stock-icon,
    .finance-icon,
    .order-icon,
    .task-icon,
    .inventory-icon {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .modal-backdrop,
    .receipt-stage,
    .cash-stage,
    .task-editor-stage,
    .return-picker-overlay,
    .service-search-stage,
    .checkout-dialog-overlay,
    .quick-customer-overlay,
    .doc-import-overlay,
    .assortment-overlay {
        padding: 0 !important;
        place-items: stretch !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .modal-panel,
    .modal-panel.wide,
    .modal-panel[class*="reference-"],
    .receipt-window,
    .cash-window,
    .task-editor,
    .return-picker,
    .service-search-window,
    .checkout-dialog,
    .quick-customer-dialog,
    .doc-import-dialog,
    .assortment-dialog {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .modal-panel.modal-movable,
    [data-movable-modal].modal-movable { transform: none !important; }
    .modal-drag-handle { cursor: default; user-select: auto; touch-action: manipulation; }
    .modal-window-control { display: none !important; }
    .modal-backdrop.modal-backdrop-minimized,
    [data-movable-modal-overlay].modal-backdrop-minimized {
        inset: 0 !important;
        width: auto !important;
        padding: 0 !important;
        display: grid !important;
        overflow: auto !important;
        background: rgba(0,0,0,.58) !important;
        pointer-events: auto !important;
    }
    .modal-backdrop.modal-backdrop-minimized .modal-panel {
        width: 100% !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
    }
    .modal-backdrop.modal-backdrop-minimized .modal-body { display: block !important; }
    [data-movable-modal-overlay].modal-backdrop-minimized [data-movable-modal] {
        width: 100% !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        display: grid !important;
        border: 0 !important;
    }

    .modal-header,
    .receipt-heading,
    .task-editor > header,
    .checkout-dialog > header,
    .quick-customer-dialog > header,
    .doc-import-dialog > header,
    .assortment-header {
        min-height: 54px !important;
        height: auto !important;
        position: sticky;
        z-index: 10;
        top: 0;
        padding-top: env(safe-area-inset-top) !important;
    }

    .modal-body { overscroll-behavior: contain; }

    .journal-toolbar details[open] nav,
    .sales-toolbar details[open] nav,
    .finance-toolbar details[open] nav,
    .warehouse-toolbar details[open] nav,
    .orders-toolbar details[open] nav,
    .tasks-toolbar details[open] nav,
    .reference-toolbar details[open] nav,
    .reports-toolbar details[open] nav {
        position: fixed !important;
        z-index: 140 !important;
        inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: min(64dvh, 560px) !important;
        padding: 6px !important;
        border: 1px solid #4b4b4b !important;
        background: #202020 !important;
        box-shadow: 0 14px 40px #000d !important;
        overflow-y: auto !important;
    }

    .journal-toolbar details[open] nav > *,
    .sales-toolbar details[open] nav > *,
    .finance-toolbar details[open] nav > *,
    .warehouse-toolbar details[open] nav > *,
    .orders-toolbar details[open] nav > *,
    .tasks-toolbar details[open] nav > *,
    .reference-toolbar details[open] nav > *,
    .reports-toolbar details[open] nav > * {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: flex-start !important;
    }

    /* Home */
    .dashboard-home {
        width: 100%;
        min-width: 0 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        overflow: visible !important;
    }

    .dashboard-actions a,
    .dashboard-actions button { min-height: 44px; }
    .dashboard-order-list,
    .dashboard-chat-list,
    .dashboard-repair-list,
    .dashboard-task-list { max-height: none; }
    .dashboard-empty { min-height: 150px; }

    /* Journals */
    .service-journal,
    .sales-journal,
    .finance-journal,
    .warehouse-journal,
    .orders-journal,
    .assemblies-journal,
    .tasks-journal,
    .references-workspace,
    .reports-workspace,
    .company-workspace,
    .settings-workspace,
    .store-admin {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: calc(100dvh - 170px) !important;
        overflow: visible !important;
    }

    .orders-journal,
    .tasks-journal,
    .reports-workspace,
    .repair-map {
        grid-template-rows: auto !important;
        align-content: start !important;
        gap: 8px !important;
    }

    .journal-toolbar,
    .sales-toolbar,
    .finance-toolbar,
    .warehouse-toolbar,
    .orders-toolbar,
    .assemblies-toolbar,
    .tasks-toolbar,
    .reference-toolbar,
    .reports-toolbar,
    .inventory-titlebar,
    .stock-document > header {
        min-height: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        flex-direction: column;
        gap: 7px !important;
        overflow: visible !important;
    }

    .orders-toolbar,
    .tasks-toolbar,
    .orders-toolbar > *,
    .tasks-toolbar > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .journal-commands,
    .sales-actions,
    .finance-toolbar > div,
    .warehouse-actions,
    .orders-actions,
    .tasks-toolbar > div,
    .reference-toolbar > div,
    .reports-toolbar,
    .inventory-titlebar nav,
    .stock-document > header nav,
    .document-actions {
        width: 100%;
        min-width: 0;
        padding-bottom: 2px;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .warehouse-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .warehouse-actions > .stock-button,
    .warehouse-actions > details,
    .warehouse-actions > details > summary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .warehouse-actions > details > summary {
        min-height: 42px !important;
        justify-content: center !important;
    }

    .journal-commands::-webkit-scrollbar,
    .sales-actions::-webkit-scrollbar,
    .warehouse-actions::-webkit-scrollbar,
    .orders-actions::-webkit-scrollbar,
    .document-actions::-webkit-scrollbar { display: none; }

    .repair-segments,
    .sale-counters,
    .finance-view-switch,
    .order-segments,
    .order-view-tabs,
    .task-segments,
    .reference-tabs,
    .report-tabs,
    .settings-tabs,
    .store-tabs {
        width: 100%;
        min-width: 0;
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .order-segments,
    .task-segments {
        max-width: 100% !important;
    }

    .repair-segments::-webkit-scrollbar,
    .reference-tabs::-webkit-scrollbar,
    .report-tabs::-webkit-scrollbar,
    .settings-tabs::-webkit-scrollbar,
    .store-tabs::-webkit-scrollbar { display: none; }

    .repair-segments button,
    .sale-counters button,
    .finance-view-switch button,
    .order-segments button,
    .order-view-tabs button,
    .task-segments button,
    .reference-tabs button,
    .report-tabs button,
    .settings-tabs button,
    .store-tabs button {
        min-height: 42px !important;
        height: 42px !important;
        flex: 0 0 auto;
        scroll-snap-align: start;
        font-size: 12px !important;
    }

    .sale-counters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .sale-counters button { width: auto !important; min-width: 0 !important; }

    .sales-primary-row {
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    .sales-secondary-row {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 7px !important;
    }

    .sales-period {
        width: 100% !important;
        min-width: 0 !important;
        padding-bottom: 2px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }

    .sales-period::-webkit-scrollbar { display: none; }

    .finance-toolbar > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-bottom: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .finance-toolbar > div:first-child > .finance-button,
    .finance-toolbar > div:first-child > details,
    .finance-toolbar > div:first-child > details > summary {
        width: 100% !important;
        min-width: 0 !important;
    }

    .finance-toolbar > div:first-child > .finance-view-switch {
        grid-column: 1 / -1;
        width: 100% !important;
        height: 42px !important;
    }

    .finance-toolbar > div:first-child > .finance-view-switch button {
        min-width: 0 !important;
        flex: 1 1 50%;
    }

    .finance-toolbar > div:first-child > details > summary,
    .finance-toolbar > div:first-child > .finance-icon {
        width: 100% !important;
        min-height: 42px !important;
    }

    .journal-filterbar,
    .sales-filter,
    .finance-filter,
    .warehouse-filter,
    .orders-filter,
    .tasks-filter,
    .reference-search,
    .report-filters,
    .inventory-tools,
    .list-filter {
        width: 100%;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 7px !important;
        overflow: visible !important;
    }

    .journal-filterbar > label:first-child,
    .sales-filter > label:first-child,
    .finance-filter > label:first-child,
    .warehouse-filter > label,
    .orders-filter > label:first-child,
    .tasks-filter > label:first-child,
    .reference-search > label,
    .inventory-tools > :first-child,
    .list-filter > input:first-child {
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
    }

    .journal-filterbar input,
    .journal-filterbar select,
    .sales-filter input,
    .sales-filter select,
    .finance-filter input,
    .finance-filter select,
    .warehouse-filter input,
    .warehouse-filter select,
    .orders-filter input,
    .orders-filter select,
    .tasks-filter input,
    .tasks-filter select,
    .reference-search input,
    .report-filters input,
    .report-filters select,
    .inventory-tools input,
    .inventory-tools select,
    .list-filter input,
    .list-filter select {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .journal-content,
    .journal-content.with-details,
    .sales-content,
    .finance-content,
    .warehouse-content,
    .orders-content,
    .assemblies-content,
    .tasks-content,
    .company-overview,
    .store-split {
        min-width: 0 !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .legacy-grid,
    .sales-grid,
    .finance-grid,
    .warehouse-grid,
    .orders-grid,
    .assemblies-grid,
    .tasks-grid,
    .reference-grid,
    .report-grid,
    .store-list,
    .table-wrap {
        width: 100%;
        min-width: 0 !important;
        min-height: 260px;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .journal-details,
    .sale-side,
    .finance-side,
    .warehouse-tree,
    .order-side,
    .assembly-side,
    .task-side,
    .store-editor {
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border-left: 1px solid #303030 !important;
    }

    .warehouse-content { grid-template-rows: auto auto !important; }
    .warehouse-grid {
        height: min(62dvh, 560px) !important;
        min-height: 360px !important;
        overflow: auto !important;
        overscroll-behavior: contain;
    }
    .warehouse-tree { max-height: 360px !important; }
    .warehouse-basket-popover,
    .map-drawer {
        position: fixed !important;
        inset: auto 8px 8px 8px !important;
        width: auto !important;
        max-height: min(72dvh, 620px) !important;
        z-index: 80 !important;
    }

    /* Repair and sale documents */
    .repair-map,
    .document-workspace,
    .inventory-document,
    .stock-document,
    .assembly-editor {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: calc(100dvh - 170px) !important;
        overflow: visible !important;
    }

    .repair-map {
        grid-template-rows: auto !important;
        align-content: start !important;
        gap: 8px !important;
    }

    .map-commandbar,
    .document-commandbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .map-title,
    .document-caption {
        min-width: 0;
        flex-wrap: wrap;
    }

    .map-title input,
    .document-caption input { width: min(155px, 44vw) !important; }

    .map-actions {
        width: 100%;
        min-width: 0;
        padding-bottom: 2px;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .map-actions > * { flex: 0 0 auto; }
    .map-actions::-webkit-scrollbar { display: none; }

    .map-head,
    .document-head,
    .document-body,
    .receipt-grid,
    .receipt-panels,
    .map-lower,
    .fault-panels,
    .inventory-head,
    .stock-document-head,
    .assembly-editor,
    .member-card-head,
    .member-card-main,
    .person-editor-top,
    .settings-columns {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
    }

    .map-fields label,
    .document-fields label,
    .document-fields .document-field,
    .document-properties > label,
    .stock-document-head label,
    .inventory-meta label,
    .cash-form > label,
    .cash-form fieldset label,
    .cash-edit-form > label,
    .cash-edit-form fieldset label,
    .task-editor > label,
    .task-editor .date-line,
    .company-editor-form > label,
    .company-fields label,
    .member-card-head label,
    .member-name,
    .member-link,
    .member-price-fields label,
    .service-card-fields label,
    .service-card-fields .member-group-field,
    .person-primary-fields label,
    .person-password-row label {
        width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .document-fields label:has(button),
    .document-fields .document-field,
    .member-code,
    .service-card-fields .service-code,
    .receipt-selection-control {
        grid-template-columns: minmax(0, 1fr) 42px !important;
    }

    .document-fields label:has(button) > span,
    .document-fields .document-field > span,
    .member-code > label,
    .service-card-fields .service-code > span {
        grid-column: 1 / -1;
    }

    .document-fields input,
    .document-fields select,
    .document-properties input,
    .document-properties select,
    .map-fields input,
    .map-fields select,
    .stock-document-head input,
    .stock-document-head select,
    .inventory-meta input,
    .task-editor input,
    .task-editor select,
    .company-editor-form input,
    .member-card-head input,
    .member-card-head select,
    .member-name input,
    .member-price-fields input,
    .member-price-fields select,
    .service-card-fields input,
    .service-card-fields select,
    .person-primary-fields input,
    .person-primary-fields select {
        width: 100%;
        height: 42px !important;
        min-height: 42px !important;
    }

    .document-customer-summary {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .document-customer-summary div {
        min-height: 34px;
        border-left: 0 !important;
        border-bottom: 1px solid #303030;
    }

    .document-customer-summary div:last-child { border-bottom: 0; }
    .document-body { margin-top: 8px; }
    .sale-workspace .document-body { grid-template-rows: auto !important; }
    .sale-workspace .document-lines,
    .sale-workspace .document-aside,
    .sale-workspace .sale-checkout {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .document-lines,
    .map-lines { min-height: 250px !important; }

    .document-linebar,
    .document-linebar.without-discount,
    .document-linebar.with-assortment,
    .document-linebar.with-assortment.without-discount,
    .stock-lines-host .stock-line-editor,
    .stock-lines-host .stock-line-editor.with-assortment,
    .assembly-linebar {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) repeat(3, 42px) !important;
        gap: 5px !important;
    }

    .document-linebar.without-discount { grid-template-columns: minmax(0, 1fr) 42px !important; }
    .document-linebar.with-assortment.without-discount { grid-template-columns: minmax(0, 1fr) 42px 42px !important; }
    .document-linebar input,
    .document-linebar select,
    .assembly-linebar input,
    .assembly-linebar select { height: 42px !important; min-height: 42px !important; }

    .document-linebar button { width: 42px !important; height: 42px !important; }
    .document-aside {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(4, minmax(130px, auto)) !important;
        overflow: visible !important;
    }

    .document-footer,
    .document-footer.sale-checkout,
    .map-footer,
    .stock-document > footer,
    .assembly-workspace footer,
    .task-editor > footer {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px !important;
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .document-paid,
    .document-total,
    .assembly-totals,
    .side-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .checkout-total strong { font-size: 36px !important; }
    .document-pay { min-height: 64px; }
    .map-state { display: grid !important; grid-template-columns: 1fr !important; }
    .map-state select { width: 100% !important; height: 42px !important; }

    .receipt-window { padding: 0 10px 10px !important; }
    .receipt-number { min-width: 0; flex-wrap: wrap; gap: 7px !important; }
    .receipt-number input { width: min(155px, 45vw) !important; }
    .receipt-grid { padding-top: 8px; }
    .receipt-fields label,
    .receipt-field-row,
    .receipt-secondary label,
    .receipt-money label {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .receipt-fields label:has(.field-icon),
    .receipt-fields label:last-child { grid-template-columns: minmax(0, 1fr) 42px 42px !important; }
    .receipt-fields label:has(.field-icon) > span,
    .receipt-fields label:last-child > span { grid-column: 1 / -1; }
    .receipt-device-actions { height: auto !important; margin-left: 0 !important; grid-template-columns: repeat(2, 42px) 1fr 1fr !important; }
    .customer-flags { grid-template-rows: 36px 110px 32px !important; }
    .receipt-panels { height: auto !important; }
    .receipt-left-panels { grid-template-rows: repeat(3, minmax(125px, auto)) !important; }
    .receipt-right-panel { grid-template-rows: auto !important; }
    .receipt-notes { height: auto !important; min-height: 220px; }
    .receipt-actions { height: auto !important; margin-top: 10px !important; grid-template-columns: 42px 1fr !important; }
    .receipt-actions > :not(:first-child):not(:nth-child(2)) { grid-column: 1 / -1; }

    .checkout-amounts,
    .checkout-settings,
    .checkout-denominations {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }

    .checkout-amounts label:first-child,
    .checkout-settings label,
    .checkout-settings label:nth-child(2),
    .checkout-settings > button {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .checkout-settings label { grid-template-columns: 1fr !important; }
    .checkout-settings > button { min-height: 48px; }
    .checkout-denominations { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .checkout-denominations > div { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: 42px; }
    .checkout-dialog > footer,
    .quick-customer-dialog form > footer,
    .doc-import-dialog > footer {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(9px + env(safe-area-inset-bottom)) !important;
        background: #202020;
    }

    .checkout-dialog > footer button,
    .quick-customer-dialog form > footer button,
    .doc-import-dialog > footer button { min-height: 44px !important; }

    /* Finance dialogs and owner balances */
    .cash-window {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .cash-brand { display: none !important; }

    .cash-content {
        width: 100% !important;
        min-width: 0 !important;
        height: 100dvh !important;
        padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
        grid-template-rows: auto auto auto !important;
        align-content: start !important;
        gap: 12px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .cash-content > header {
        min-height: 44px;
        align-items: center !important;
        position: sticky;
        z-index: 5;
        top: 0;
        background: #181818;
    }

    .cash-types {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .cash-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .cash-type-grid button { min-height: 96px !important; }

    .cash-form,
    .cash-edit-form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .cash-form input,
    .cash-form select,
    .cash-edit-form input,
    .cash-edit-form select {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
    }

    .cash-content > footer {
        width: 100% !important;
        padding-top: 10px;
        position: sticky;
        z-index: 5;
        bottom: 0;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 7px !important;
        background: #181818;
    }

    .cash-content > footer > span { display: none; }
    .cash-content > footer .cash-button { min-height: 44px !important; }
    .cash-content > footer .cash-button:last-child { grid-column: 1 / -1; }

    .owner-money-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .owner-money-summary > div {
        min-width: 0 !important;
        border-bottom: 1px solid #303030;
    }

    .owner-money-grid {
        width: 100%;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* Task editor */
    .task-editor-stage { overflow: hidden !important; }
    .task-editor {
        padding-bottom: env(safe-area-inset-bottom);
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .task-editor > label,
    .task-editor .date-line {
        width: auto !important;
        min-width: 0 !important;
        margin: 7px 12px 0 !important;
    }

    .task-editor .importance {
        grid-template-columns: minmax(0, 1fr) 34px !important;
    }

    .task-editor .importance > span { grid-column: 1 / -1; }

    .task-editor .date-line {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    .task-editor .date-line > label {
        min-width: 0;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px;
    }

    .task-editor .quick-dates {
        width: 100%;
        min-width: 0;
        grid-column: 1 !important;
        padding-bottom: 2px;
        justify-content: flex-start !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .task-editor .quick-dates::-webkit-scrollbar { display: none; }
    .task-editor .quick-dates button { min-width: 72px; min-height: 42px !important; flex: 1 0 72px; }

    .task-editor label.task-check {
        grid-template-columns: 24px minmax(0, 1fr) !important;
        align-items: center;
    }

    .task-editor label.task-check input {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .task-editor label.task-check span { grid-column: 2 !important; }

    .task-options {
        width: auto !important;
        min-width: 0 !important;
        margin: 14px 12px 0 !important;
    }

    .task-editor > footer {
        position: sticky !important;
        z-index: 5;
        bottom: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        background: #181818;
    }

    /* Warehouse and inventory */
    .warehouse-controls { overflow: visible !important; }
    .stock-document { grid-template-rows: auto !important; gap: 8px; }
    .stock-document > header > div { flex-wrap: wrap; }
    .stock-lines-host { min-height: 320px !important; }
    .inventory-document { padding: 0 !important; grid-template-rows: auto !important; }
    .inventory-titlebar { align-items: stretch !important; }
    .inventory-caption { white-space: normal !important; flex-wrap: wrap; }
    .inventory-tools > * { grid-column: 1 / -1 !important; }
    .inventory-tools .inventory-button,
    .inventory-tools .inventory-icon { width: 100% !important; }
    .inventory-grid { min-height: 360px !important; }
    .inventory-summary { flex-wrap: wrap; gap: 12px !important; padding: 9px; }
    .store-transfer-context { grid-template-columns: 1fr !important; }

    /* Assemblies */
    .assemblies-journal { grid-template-rows: auto !important; gap: 8px; }
    .assemblies-content { grid-template-columns: 1fr !important; }
    .assembly-side { grid-template-rows: auto !important; }
    .assembly-editor { grid-template-columns: minmax(0, 1fr) !important; }
    .assembly-properties {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px !important;
        border-right: 0 !important;
    }
    .assembly-money { grid-template-columns: 1fr !important; }
    .assembly-workspace {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px 0 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 8px;
    }
    .assembly-linebar {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) 72px 42px 42px !important;
    }
    .assembly-linebar > * { min-width: 0 !important; }
    .assembly-linebar > button:not(.assembly-icon) {
        width: 42px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
    .assembly-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 320px !important;
        overflow-x: auto !important;
    }

    /* Settings, directories and company */
    .settings-pane { min-height: 0 !important; padding: 10px !important; }
    .pane-heading,
    .settings-heading,
    .telegram-account { align-items: stretch !important; flex-direction: column !important; }
    .pane-actions,
    .database-actions,
    .settings-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .settings-rows label,
    .telegram-rule,
    .finance-rule,
    .telegram-login-step,
    .device-layout,
    .backup-upload,
    .permission-groups { grid-template-columns: 1fr !important; }
    .kassatka-status { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .print-grid-head { display: none !important; }
    .print-grid-row {
        min-width: 0 !important;
        padding: 10px;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px;
    }
    .print-grid-row input:not([type="checkbox"]) { width: 100% !important; height: 42px !important; }
    .print-grid-row input[type="checkbox"] { margin-left: 0 !important; }
    .print-grid-row .print-toggle {
        min-height: 34px;
        display: flex !important;
        align-items: center;
        gap: 9px;
        color: #aaa;
    }
    .print-grid-row .print-toggle span { display: inline !important; }

    .company-workspace { padding: 0 !important; }
    .company-overview { padding: 10px !important; }
    .company-primary { grid-template-columns: 1fr !important; }
    .company-logo { width: 100% !important; height: 150px !important; }
    .company-primary dl div,
    .company-requisites { grid-template-columns: 1fr !important; }
    .company-directory-block { min-height: 220px; }
    .company-editor-top { grid-template-columns: 1fr !important; }
    .company-image-editor { width: 100% !important; height: 150px !important; }

    .references-workspace { grid-template-rows: auto !important; gap: 7px; }
    .reference-search > span { padding: 5px 2px; }
    .member-card-main { min-height: 0 !important; }
    .member-picture-column { grid-template-rows: auto !important; }
    .member-picture { min-height: 230px !important; }
    .service-card-fields { min-height: 0 !important; }
    .service-card-fields label:first-child,
    .service-card-fields .member-group-field { width: 100% !important; }
    .person-password-row { grid-template-columns: 1fr !important; }
    .person-picture { width: 100% !important; height: 180px !important; }

    /* Reports and store management */
    .reports-workspace { grid-template-rows: auto !important; gap: 7px; }
    .report-caption,
    .report-footer { min-height: 42px; padding: 8px !important; flex-wrap: wrap; }
    .store-admin { padding: 0 !important; }
    .store-toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px !important; }
    .store-toolbar h1 { grid-column: 1 / -1; }
    .store-toolbar .tool { width: 100%; }
    .store-message { align-items: stretch !important; flex-direction: column; }
    .store-body { overflow: visible !important; }
    .store-content,
    .store-editor { padding: 12px !important; }
    .linked-documents { display: grid !important; grid-template-columns: 1fr; }

    /* Assortment picker */
    .assortment-dialog { grid-template-rows: auto minmax(0, 1fr) !important; }
    .assortment-header {
        padding-inline: 10px !important;
        align-items: flex-start !important;
        flex-direction: column;
    }
    .assortment-heading { padding-top: 7px; }
    .assortment-header-actions { width: 100%; justify-content: flex-start !important; }
    .assortment-header-actions .close { margin-left: auto; }
    .assortment-content {
        grid-template-columns: 1fr !important;
        grid-template-rows: 165px minmax(0, 1fr) !important;
        gap: 7px !important;
        overflow: hidden !important;
    }
    .assortment-groups { grid-row: 1 !important; }
    .assortment-left { grid-row: 2 !important; grid-template-rows: minmax(260px, 1fr) minmax(190px, .7fr) !important; }
    .assortment-header-actions button:not(.close) {
        width: auto !important;
        min-width: 42px;
        height: 42px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
    .assortment-header-actions button.close { width: 42px !important; height: 42px !important; }
    .assortment-search { grid-template-columns: 38px minmax(0, 1fr) 38px !important; }
    .assortment-search input { height: 40px !important; }
    .assortment-cart > header { min-height: 52px; }
    .assortment-cart > header > div { overflow-x: auto; }
}

@media screen and (max-width: 640px) {
    .topbar { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .topbar-tool:not(.company-tool):not(:last-child) { display: none !important; }
    .topbar-actions { gap: 4px !important; }

    .header-actions,
    .journal-filterbar,
    .sales-filter,
    .finance-filter,
    .warehouse-filter,
    .orders-filter,
    .tasks-filter,
    .reference-search,
    .report-filters,
    .list-filter,
    .store-toolbar { grid-template-columns: 1fr !important; }

    .journal-filterbar > *,
    .sales-filter > *,
    .finance-filter > *,
    .warehouse-filter > *,
    .orders-filter > *,
    .tasks-filter > *,
    .reference-search > *,
    .report-filters > *,
    .list-filter > *,
    .store-toolbar > * { grid-column: 1 !important; }

    .ready-repair-row {
        min-height: 74px !important;
        padding: 9px !important;
        grid-template-columns: 65px minmax(0, 1fr) !important;
        gap: 7px !important;
    }
    .ready-repair-row .sum { grid-column: 2; text-align: left !important; }

    .mobile-card-table {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        table-layout: auto !important;
        background: transparent !important;
    }

    .mobile-card-table colgroup,
    .mobile-card-table thead { display: none !important; }
    .mobile-card-table tbody {
        width: 100%;
        padding: 7px;
        display: grid !important;
        gap: 8px;
    }

    .mobile-card-table tbody tr {
        width: 100%;
        min-width: 0;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid #343434;
        border-left: 3px solid #4b6f91;
        border-radius: 4px;
        background: #191919;
        box-shadow: 0 4px 12px #0003;
    }

    .mobile-card-table tbody tr.selected { border-left-color: #55a94e; }
    .mobile-card-table tbody tr:hover { background: #202020; }
    .mobile-card-table tbody tr > td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 52px;
        padding: 8px 9px !important;
        border: 0 !important;
        border-right: 1px solid #2d2d2d !important;
        border-bottom: 1px solid #2d2d2d !important;
        display: grid !important;
        align-content: center;
        gap: 4px;
        overflow: visible !important;
        color: #c0c0c0;
        background: transparent !important;
        text-align: left !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: 12px !important;
    }

    .mobile-card-table tbody tr > td:nth-child(even) { border-right: 0 !important; }
    .mobile-card-table tbody tr > td::before {
        content: attr(data-mobile-label);
        min-height: 11px;
        overflow: hidden;
        color: #707070;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
        font-weight: 600;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .mobile-card-table tbody tr > td[data-mobile-label=""]::before { display: none; }
    .mobile-card-table tbody tr > td.mobile-wide-cell,
    .mobile-card-table tbody tr > td[colspan] {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    .mobile-card-table tbody tr > td.mobile-wide-cell {
        min-height: 58px;
        color: #e0e0e0;
        font-size: 13px !important;
        font-weight: 600;
    }

    .mobile-card-table tbody tr > td:empty { display: none !important; }
    .mobile-card-table tbody tr > td.numeric,
    .mobile-card-table tbody tr > td.number { text-align: left !important; }
    .mobile-card-table tbody tr > td input,
    .mobile-card-table tbody tr > td select { height: 40px !important; min-height: 40px !important; }
    .mobile-card-table tbody tr > td button { min-width: 42px !important; min-height: 40px !important; }
    .mobile-card-table .empty,
    .mobile-card-table .grid-empty,
    .mobile-card-table .assortment-empty { min-height: 100px !important; display: grid !important; place-items: center; }

    /* The stock balance uses Blazor virtualization, so it must keep native
       table semantics. A compact five-column view fits a phone without
       breaking the virtual spacer rows. */
    .warehouse-stock-table {
        width: 100% !important;
        min-width: 0 !important;
        display: table !important;
        table-layout: fixed !important;
    }
    .warehouse-stock-table colgroup { display: table-column-group !important; }
    .warehouse-stock-table thead { display: table-header-group !important; }
    .warehouse-stock-table tfoot { display: none !important; }
    .warehouse-stock-table tbody {
        padding: 0 !important;
        display: table-row-group !important;
    }
    .warehouse-stock-table tr {
        display: table-row !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .warehouse-stock-table th,
    .warehouse-stock-table td {
        display: table-cell !important;
    }
    .warehouse-stock-table col:nth-child(2),
    .warehouse-stock-table col:nth-child(3),
    .warehouse-stock-table col:nth-child(5),
    .warehouse-stock-table col:nth-child(6),
    .warehouse-stock-table col:nth-child(8),
    .warehouse-stock-table col:nth-child(9),
    .warehouse-stock-table th:nth-child(2),
    .warehouse-stock-table th:nth-child(3),
    .warehouse-stock-table th:nth-child(5),
    .warehouse-stock-table th:nth-child(6),
    .warehouse-stock-table th:nth-child(8),
    .warehouse-stock-table th:nth-child(9),
    .warehouse-stock-table td:nth-child(2),
    .warehouse-stock-table td:nth-child(3),
    .warehouse-stock-table td:nth-child(5),
    .warehouse-stock-table td:nth-child(6),
    .warehouse-stock-table td:nth-child(8),
    .warehouse-stock-table td:nth-child(9) {
        display: none !important;
    }
    .warehouse-stock-table col:nth-child(2),
    .warehouse-stock-table col:nth-child(3),
    .warehouse-stock-table col:nth-child(5),
    .warehouse-stock-table col:nth-child(6),
    .warehouse-stock-table col:nth-child(8),
    .warehouse-stock-table col:nth-child(9) {
        width: 0 !important;
        visibility: collapse !important;
    }
    .warehouse-stock-table col:nth-child(1) { width: 42px !important; }
    .warehouse-stock-table col:nth-child(4) { width: calc(100% - 180px) !important; }
    .warehouse-stock-table col:nth-child(7) { width: 56px !important; }
    .warehouse-stock-table col:nth-child(10) { width: 82px !important; }
    .warehouse-stock-table th:nth-child(7) .stock-sort-button span,
    .warehouse-stock-table th:nth-child(10) .stock-sort-button span { font-size: 0; }
    .warehouse-stock-table th:nth-child(7) .stock-sort-button span::after {
        content: "Ост.";
        font-size: 10px;
    }
    .warehouse-stock-table th:nth-child(10) .stock-sort-button span::after {
        content: "Цена";
        font-size: 10px;
    }
    .warehouse-stock-table th:nth-child(7) .stock-sort-button svg,
    .warehouse-stock-table th:nth-child(10) .stock-sort-button svg { display: none !important; }
    .warehouse-stock-table th,
    .warehouse-stock-table td {
        padding-inline: 6px !important;
        font-size: 10px !important;
    }
    .warehouse-stock-table .stock-name-cell strong {
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .warehouse-stock-mobile-summary {
        min-height: 40px;
        padding: 5px 8px;
        border-bottom: 1px solid #34383a;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #1b211a;
    }
    .warehouse-stock-mobile-summary span { min-width: 0; display: grid; gap: 2px; }
    .warehouse-stock-mobile-summary span:last-child { justify-items: end; text-align: right; }
    .warehouse-stock-mobile-summary small { color: #788575; font-size: 8px; text-transform: uppercase; }
    .warehouse-stock-mobile-summary strong {
        overflow: hidden;
        color: #dce7d9;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }
    .warehouse-stock-table.price-editing {
        width: 594px !important;
        min-width: 594px !important;
    }
    .warehouse-stock-table.price-editing col:nth-child(1),
    .warehouse-stock-table.price-editing th:nth-child(1),
    .warehouse-stock-table.price-editing td:nth-child(1) { display: none !important; }
    .warehouse-stock-table.price-editing col:nth-child(8),
    .warehouse-stock-table.price-editing col:nth-child(9),
    .warehouse-stock-table.price-editing th:nth-child(8),
    .warehouse-stock-table.price-editing th:nth-child(9),
    .warehouse-stock-table.price-editing td:nth-child(8),
    .warehouse-stock-table.price-editing td:nth-child(9) { display: table-cell !important; }
    .warehouse-stock-table.price-editing col:nth-child(4) { width: 190px !important; }
    .warehouse-stock-table.price-editing col:nth-child(8),
    .warehouse-stock-table.price-editing col:nth-child(9),
    .warehouse-stock-table.price-editing col:nth-child(10) { width: 102px !important; }

    .document-table,
    .legacy-grid,
    .sales-grid,
    .finance-grid,
    .warehouse-grid,
    .orders-grid,
    .assemblies-grid,
    .tasks-grid,
    .reference-grid,
    .report-grid,
    .store-list,
    .inventory-grid,
    .assortment-table-wrap,
    .assortment-cart-table { overflow-x: hidden !important; }
    .warehouse-grid:has(.warehouse-stock-table.price-editing) { overflow-x: auto !important; }

    .checkout-denominations { grid-template-columns: 1fr !important; }
    .checkout-denominations > div { grid-column: 1; }
    .pavel-fund-icon { display: none !important; }
    .pavel-fund-copy > span { font-size: 8px !important; }
    .pavel-fund-copy strong { font-size: 13px !important; }
    .receipt-device-actions { grid-template-columns: repeat(2, 42px) !important; }
    .receipt-device-actions .legacy-button { grid-column: span 1; }
    .checkout-dialog > footer,
    .quick-customer-dialog form > footer,
    .doc-import-dialog > footer { display: grid !important; grid-template-columns: 1fr 1fr; }
    .checkout-dialog > footer button,
    .quick-customer-dialog form > footer button,
    .doc-import-dialog > footer button { min-width: 0 !important; }
}

@media screen and (max-width: 380px) {
    .topbar { padding-inline: 6px !important; gap: 6px !important; }
    .topbar-tool.company-tool { display: none !important; }
    .home-repair-counters { grid-template-columns: 1fr !important; }
    .mobile-card-table tbody tr { grid-template-columns: 1fr; }
    .mobile-card-table tbody tr > td { border-right: 0 !important; }
    .pavel-fund { padding-inline: 7px !important; }
    .pavel-fund-copy strong { font-size: 12px !important; }
}

@media screen and (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
    .topbar {
        min-height: 56px;
        grid-template-rows: 42px;
    }
    .pavel-funds { display: none !important; }
    .main-column { grid-template-rows: auto 40px minmax(0, 1fr) !important; }
}

/* Mobile workspace v2: an app-like shell and compact work surfaces. */
@media screen and (max-width: 640px) {
    :root {
        --mobile-topbar-height: 56px;
        --mobile-context-height: 42px;
        --mobile-nav-height: 64px;
    }

    body { background: #121314; }

    .main-column {
        grid-template-rows:
            calc(var(--mobile-topbar-height) + env(safe-area-inset-top))
            var(--mobile-context-height)
            minmax(0, 1fr) !important;
    }

    .topbar {
        width: 100%;
        height: calc(var(--mobile-topbar-height) + env(safe-area-inset-top)) !important;
        min-height: calc(var(--mobile-topbar-height) + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) 8px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        border-bottom: 1px solid #2c3032 !important;
        background: #191a1b !important;
    }

    .mobile-menu {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        order: 1;
        border-color: transparent !important;
        border-radius: 6px !important;
        background: transparent !important;
    }

    .mobile-menu:active { background: #292b2d !important; }

    .department-selector {
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        flex: 1 1 auto;
        order: 2;
        border: 0 !important;
        border-radius: 6px !important;
        background: #222426 !important;
    }

    .department-selector select {
        padding: 0 25px 0 34px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px !important;
    }

    .mobile-wallet-button {
        height: 42px;
        min-width: 42px;
        padding: 0 10px;
        flex: 0 0 auto;
        order: 3;
        border: 0;
        border-radius: 6px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #aeb5b9;
        background: transparent;
        cursor: pointer;
        font: inherit;
    }

    .mobile-wallet-button.active,
    .mobile-wallet-button:active {
        color: #75c975;
        background: #223025;
    }

    .mobile-wallet-button svg { width: 20px; height: 20px; }
    .mobile-wallet-button span { font-size: 11px; font-weight: 650; }

    .topbar-actions {
        margin: 0 !important;
        flex: 0 0 auto;
        order: 4;
    }

    .topbar-actions .topbar-tool { display: none !important; }
    .topbar-actions .topbar-tool:last-child {
        width: 42px !important;
        height: 42px !important;
        border: 0 !important;
        border-radius: 6px !important;
        display: grid !important;
        background: transparent !important;
    }

    .topbar-actions .topbar-tool:last-child:active { background: #292b2d !important; }
    .pavel-funds { display: none !important; }

    .workspace-tabs {
        height: var(--mobile-context-height) !important;
        min-height: var(--mobile-context-height) !important;
        padding: 0 8px !important;
        overflow: hidden !important;
        border-bottom: 1px solid #292c2e !important;
        background: #151617 !important;
    }

    .workspace-tab { display: none !important; }
    .workspace-tab.active {
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
        border: 0 !important;
        display: flex !important;
        color: #e3e7e9 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .workspace-tab.active a {
        min-height: var(--mobile-context-height) !important;
        padding: 0 6px !important;
        display: flex;
        align-items: center;
        font-size: 14px !important;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: capitalize;
    }

    .workspace-tab.active button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        border-radius: 6px;
    }

    .workspace-tab.active button svg { width: 15px; height: 15px; }
    .workspace-tabs-fill,
    .workspace-close { display: none !important; }

    .content {
        padding: 8px 8px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 10px) !important;
        background: #141516 !important;
    }

    .app-shell:has(.workspace-page-host.active .document-workspace) .mobile-bottom-nav,
    .app-shell:has(.workspace-page-host.active .repair-map) .mobile-bottom-nav,
    .app-shell:has(.workspace-page-host.active .stock-document) .mobile-bottom-nav,
    .app-shell:has(.workspace-page-host.active .inventory-document) .mobile-bottom-nav,
    .app-shell:has(.workspace-page-host.active .assembly-editor) .mobile-bottom-nav { display: none !important; }
    .content:has(.document-workspace),
    .content:has(.repair-map),
    .content:has(.stock-document),
    .content:has(.inventory-document),
    .content:has(.assembly-editor) { padding-bottom: 8px !important; }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        padding: 4px 5px env(safe-area-inset-bottom);
        border-top: 1px solid #333739;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        align-items: stretch;
        background: rgb(25 26 27 / 96%);
        box-shadow: 0 -8px 24px #0008;
        backdrop-filter: blur(12px);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        min-width: 0;
        padding: 4px 2px 3px;
        border: 0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        color: #8f979c;
        background: transparent;
        text-decoration: none;
        cursor: pointer;
        font: inherit;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active {
        color: #73c86e;
        background: #202922;
    }

    .mobile-bottom-nav svg { width: 21px; height: 21px; }
    .mobile-bottom-nav span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        line-height: 1.1;
    }

    .sidebar {
        z-index: 90 !important;
        width: min(88vw, 340px) !important;
        border-right-color: #3a3d3f !important;
        background: #191a1b !important;
        box-shadow: 24px 0 60px #000d !important;
    }

    .sidebar-scrim { z-index: 80 !important; background: rgb(0 0 0 / 70%) !important; }
    .brand { height: 54px !important; flex-basis: 54px !important; }
    .user-panel {
        min-height: 78px !important;
        flex-basis: 78px !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }
    .user-panel img { width: 48px !important; height: 48px !important; }
    .nav-fast-actions { padding: 7px 10px !important; }
    .fast-action { min-height: 46px !important; border-radius: 6px; }
    .primary-nav .nav-link,
    .primary-nav a.nav-link,
    .nav-footer .nav-link,
    .nav-footer a.nav-link { min-height: 48px !important; }

    .mobile-wallet-scrim {
        position: fixed;
        z-index: 100;
        inset: calc(var(--mobile-topbar-height) + env(safe-area-inset-top)) 0 0;
        border: 0;
        display: block !important;
        background: rgb(0 0 0 / 58%);
    }

    .mobile-wallet-panel {
        position: fixed;
        z-index: 110;
        top: calc(var(--mobile-topbar-height) + env(safe-area-inset-top) + 6px);
        right: 8px;
        left: 8px;
        padding: 14px;
        border: 1px solid #44494b;
        border-radius: 8px;
        display: grid !important;
        gap: 12px;
        color: #dce1e3;
        background: #202223;
        box-shadow: 0 18px 50px #000d;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .15s ease, transform .15s ease;
    }

    .mobile-wallet-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .mobile-wallet-panel > header { display: flex; align-items: center; justify-content: space-between; }
    .mobile-wallet-panel > header > div { display: grid; gap: 2px; }
    .mobile-wallet-panel > header span { color: #8e969a; font-size: 11px; }
    .mobile-wallet-panel > header strong { color: #f0f3f4; font-size: 20px; font-variant-numeric: tabular-nums; }
    .mobile-wallet-panel > header button {
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        display: grid;
        place-items: center;
        color: #aeb5b9;
        background: #2a2d2f;
    }
    .mobile-wallet-panel > header button svg { width: 18px; height: 18px; }
    .mobile-wallet-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mobile-wallet-balance {
        min-width: 0;
        min-height: 72px;
        padding: 10px;
        border: 1px solid #354138;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 9px;
        background: #1b211d;
    }
    .mobile-wallet-balance.card { border-color: #35414b; background: #1b2025; }
    .mobile-wallet-balance-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: grid;
        place-items: center;
        color: #6ec06c;
        background: #263329;
    }
    .mobile-wallet-balance.card .mobile-wallet-balance-icon { color: #78a8d1; background: #242e37; }
    .mobile-wallet-balance-icon svg { width: 18px; height: 18px; }
    .mobile-wallet-balance > span:last-child { min-width: 0; display: grid; gap: 3px; }
    .mobile-wallet-balance small { color: #899095; font-size: 10px; }
    .mobile-wallet-balance strong {
        overflow: hidden;
        color: #e7ebed;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-variant-numeric: tabular-nums;
    }
    .mobile-wallet-balance strong.negative { color: #ff737d; }
    .mobile-wallet-caption { color: #70787c; font-size: 10px; }

    .document-commandbar,
    .map-commandbar,
    .stock-document > header,
    .inventory-titlebar {
        position: sticky !important;
        z-index: 32;
        top: -8px;
        padding: 8px 0 !important;
        border-bottom: 1px solid #34383a;
        background: rgb(22 23 24 / 97%);
        box-shadow: 0 8px 18px #0008;
        backdrop-filter: blur(12px);
    }

    /* Compact action rails keep the working list above the fold. */
    .journal-toolbar,
    .sales-toolbar,
    .finance-toolbar,
    .warehouse-toolbar,
    .orders-toolbar,
    .tasks-toolbar {
        gap: 6px !important;
    }

    .journal-commands,
    .sales-actions,
    .finance-toolbar > div:first-child,
    .warehouse-create,
    .warehouse-actions,
    .orders-actions,
    .tasks-toolbar > div:first-child {
        width: 100%;
        min-width: 0;
        padding: 0 0 2px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }

    .journal-commands::-webkit-scrollbar,
    .sales-actions::-webkit-scrollbar,
    .finance-toolbar > div:first-child::-webkit-scrollbar,
    .warehouse-create::-webkit-scrollbar,
    .warehouse-actions::-webkit-scrollbar,
    .orders-actions::-webkit-scrollbar { display: none; }

    .journal-commands > *,
    .sales-actions > *,
    .finance-toolbar > div:first-child > *,
    .warehouse-create > *,
    .warehouse-actions > *,
    .orders-actions > *,
    .tasks-toolbar > div:first-child > * {
        width: auto !important;
        min-width: max-content !important;
        flex: 0 0 auto !important;
    }

    .journal-commands .legacy-button.green,
    .sales-actions .sale-button.blue,
    .finance-toolbar .finance-button.green,
    .warehouse-create .stock-button.green { order: -2; }

    .journal-commands > .legacy-button:first-child,
    .sales-actions > .sale-button:not(.blue),
    .orders-actions > .order-button:first-child,
    .tasks-toolbar > div:first-child > .task-button:first-child {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
    .journal-commands > .legacy-button:first-child svg,
    .sales-actions > .sale-button:not(.blue) svg,
    .orders-actions > .order-button:first-child svg,
    .tasks-toolbar > div:first-child > .task-button:first-child svg {
        width: 16px !important;
        height: 16px !important;
    }
    .journal-commands > .icon-command,
    .sales-actions > .sale-icon,
    .orders-actions > .order-icon,
    .tasks-toolbar > div:first-child > .task-icon {
        width: 42px !important;
        min-width: 42px !important;
        flex: 0 0 42px !important;
    }
    .journal-commands > [title="Фильтр"],
    .sales-actions > [title="Фильтр"],
    .orders-actions > [title="Фильтр"],
    .tasks-toolbar > div:first-child > [title="Фильтр"] { order: -1; }
    .sales-action-divider { display: none !important; }

    .repair-segments,
    .sale-counters {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scroll-padding-inline: 2px;
        scrollbar-width: none;
    }

    .repair-segments::-webkit-scrollbar,
    .sale-counters::-webkit-scrollbar { display: none; }
    .repair-segments button { min-width: 112px !important; border-radius: 6px !important; border-right-width: 1px !important; }
    .sale-counters button {
        min-width: 145px !important;
        min-height: 48px !important;
        flex: 0 0 145px !important;
        border-radius: 6px !important;
    }

    .sales-overview,
    .warehouse-controls {
        margin-bottom: 7px !important;
        padding: 0 0 7px !important;
        border: 0 !important;
        border-bottom: 1px solid #303436 !important;
        background: transparent !important;
    }

    .sales-secondary-row {
        min-height: 42px;
        padding-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        gap: 6px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sales-secondary-row::-webkit-scrollbar { display: none; }
    .sales-period { width: auto !important; flex: 0 0 auto; }
    .sale-view-tabs { min-width: 170px; flex: 0 0 auto; }

    .date-period-menu {
        width: max-content;
        min-width: max-content !important;
        height: 42px !important;
        gap: 4px !important;
    }
    .date-period-menu > button {
        width: 42px !important;
        height: 42px !important;
        border-radius: 6px !important;
    }
    .date-period-menu > button:nth-child(1) {
        width: 72px !important;
        font-size: 0 !important;
    }
    .date-period-menu > button:nth-child(1)::after {
        content: "Сегодня";
        font-size: 11px;
    }
    .date-period-menu > button:nth-child(2) {
        width: 48px !important;
        font-size: 0 !important;
    }
    .date-period-menu > button:nth-child(2)::after {
        content: "Всё";
        font-size: 11px;
    }
    .date-period-menu > .period-caption {
        width: auto !important;
        max-width: 150px !important;
        margin-left: 2px !important;
        padding-inline: 8px !important;
    }
    .date-period-menu .period-popup {
        position: fixed !important;
        z-index: 145 !important;
        top: auto !important;
        right: 8px !important;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
        left: 8px !important;
        width: auto !important;
        grid-template-columns: 1fr !important;
        border-radius: 8px;
    }
    .date-period-menu .period-popup label { grid-template-columns: 26px minmax(0, 1fr) !important; }
    .date-period-menu .period-popup input { height: 42px !important; }
    .date-period-menu .period-popup button { width: 100% !important; height: 42px !important; }

    .finance-toolbar > div:first-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px auto 42px !important;
        grid-template-rows: 42px 42px !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    .finance-toolbar > div:first-child > .finance-button.green {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .finance-toolbar > div:first-child > .finance-view-switch {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        grid-column: 1;
        grid-row: 2;
    }
    .finance-toolbar > div:first-child > .finance-view-switch button { min-width: 0 !important; flex: 1 1 50% !important; }
    .finance-toolbar > div:first-child > .finance-button:first-child {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        grid-column: 2;
        grid-row: 2;
        font-size: 0 !important;
    }
    .finance-toolbar > div:first-child > .finance-button:first-child svg { width: 16px !important; height: 16px !important; }
    .finance-toolbar > div:first-child > details {
        width: auto !important;
        min-width: max-content !important;
        grid-column: 3;
        grid-row: 2;
    }
    .finance-toolbar > div:first-child > details > summary {
        width: auto !important;
        min-width: max-content !important;
        height: 42px !important;
    }
    .finance-toolbar > div:first-child > .finance-icon {
        width: 42px !important;
        min-width: 42px !important;
        grid-column: 4;
        grid-row: 2;
    }

    .finance-balance {
        width: 100% !important;
        height: auto !important;
        min-height: 56px;
        margin: 0 !important;
        padding: 8px 10px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
        gap: 2px 8px !important;
        border-radius: 6px;
    }

    .finance-balance span { margin: 0 !important; text-align: left; font-size: 9px; text-transform: uppercase; }
    .finance-balance strong { min-width: 0 !important; text-align: left !important; font-size: 13px; }
    .finance-balance span:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .finance-balance span:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .finance-balance span:nth-of-type(3) { grid-column: 3; grid-row: 1; }
    .finance-balance strong:nth-of-type(1) { grid-column: 1; grid-row: 2; }
    .finance-balance strong:nth-of-type(2) { grid-column: 2; grid-row: 2; }
    .finance-balance strong:nth-of-type(3) { grid-column: 3; grid-row: 2; }

    .warehouse-actions {
        display: flex !important;
        justify-content: flex-start !important;
        overflow: auto !important;
    }
    .warehouse-actions > .stock-button,
    .warehouse-actions > details,
    .warehouse-actions > details > summary {
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }
    .warehouse-toolbar > div { flex: 0 0 auto !important; }
    .warehouse-filter:not(.journal) {
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    .warehouse-filter:not(.journal) .warehouse-search {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
        grid-row: 1;
    }
    .warehouse-filter:not(.journal) .home-stock { grid-column: 1 !important; grid-row: 2 !important; }
    .warehouse-filter:not(.journal) > select { grid-column: 2 !important; grid-row: 2 !important; }
    .warehouse-filter:not(.journal) .stock-icon { grid-column: 3 !important; grid-row: 2 !important; }
    .warehouse-filter.journal {
        padding: 0 0 2px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }
    .warehouse-filter.journal > * { width: auto !important; min-width: max-content !important; flex: 0 0 auto !important; }
    .warehouse-filter.journal .warehouse-search { min-width: 220px !important; flex: 1 0 220px !important; }

    .sales-filter,
    .finance-filter,
    .orders-filter,
    .tasks-filter,
    .reference-search,
    .report-filters,
    .list-filter {
        padding: 6px 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }

    .sales-filter > *,
    .finance-filter > *,
    .orders-filter > *,
    .tasks-filter > *,
    .reference-search > *,
    .report-filters > *,
    .list-filter > * {
        width: auto !important;
        min-width: 150px !important;
        flex: 0 0 150px !important;
    }

    .sales-filter > label:first-child,
    .finance-filter > label:first-child,
    .orders-filter > label:first-child,
    .tasks-filter > label:first-child,
    .reference-search > label:first-child { min-width: 230px !important; flex-basis: 230px !important; }
    .sales-filter > button,
    .finance-filter > button,
    .orders-filter > button,
    .tasks-filter > button { min-width: max-content !important; flex-basis: auto !important; }

    /* Rows read as touch-friendly records, not as a desktop spreadsheet. */
    .mobile-card-table tbody { padding: 5px 0 10px !important; gap: 8px !important; }
    .mobile-card-table tbody tr {
        border: 1px solid #34383a !important;
        border-left-width: 1px !important;
        border-radius: 6px !important;
        background: #1b1d1e !important;
        box-shadow: none !important;
    }
    .mobile-card-table tbody tr.selected {
        border-color: #477d4a !important;
        box-shadow: inset 3px 0 #5ab35b !important;
        background: #1c231e !important;
    }
    .mobile-card-table tbody tr > td {
        min-height: 48px !important;
        padding: 7px 9px !important;
        border-color: #2d3032 !important;
        color: #cbd0d2 !important;
        font-size: 12px !important;
    }
    .mobile-card-table tbody tr > td::before { color: #7f878b !important; font-size: 9px !important; }
    .mobile-card-table tbody tr > td.mobile-wide-cell {
        min-height: 54px !important;
        color: #f0f2f3 !important;
        background: #202224 !important;
        font-size: 13px !important;
    }
    .mobile-card-table tbody tr > td.numeric { color: #e7eaeb !important; font-weight: 650; font-variant-numeric: tabular-nums; }
    .mobile-card-table tbody tr > td.sale-row-actions,
    .mobile-card-table tbody tr > td.stock-row-actions,
    .mobile-card-table tbody tr > td.row-actions {
        min-height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 5px;
    }
    .mobile-card-table tbody tr > td.sale-row-actions::before,
    .mobile-card-table tbody tr > td.stock-row-actions::before,
    .mobile-card-table tbody tr > td.row-actions::before { display: none !important; }
    .mobile-card-table tbody tr > td.sale-row-actions button,
    .mobile-card-table tbody tr > td.stock-row-actions button,
    .mobile-card-table tbody tr > td.row-actions button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex: 0 0 40px;
    }

    .repair-grid .mobile-card-table td.flags { display: none !important; }
    .repair-grid .mobile-card-table td.repair-no {
        min-height: 44px !important;
        grid-column: 1 / -1;
        color: #94b9e3 !important;
        background: #202326 !important;
        font-size: 16px !important;
        font-weight: 750;
    }
    .repair-grid .mobile-card-table td:nth-child(5) { grid-column: 1 / -1; }

    .receipt-actions {
        position: sticky !important;
        z-index: 35;
        bottom: -10px !important;
        margin: 10px -10px -10px !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        border-top: 1px solid #3a3e40;
        background: rgb(27 29 30 / 97%);
        box-shadow: 0 -10px 28px #000a;
        backdrop-filter: blur(12px);
    }
    .receipt-actions > .icon-command,
    .receipt-actions > span { display: none !important; }
    .receipt-actions > .legacy-button.green {
        grid-column: 1 / -1 !important;
        order: -1;
    }
    .receipt-actions > .legacy-button.blue,
    .receipt-actions > .legacy-button:last-child { grid-column: auto !important; }
    .receipt-actions > .legacy-button { min-width: 0 !important; min-height: 44px !important; }

    .warehouse-grid { border-radius: 6px; }
    .warehouse-stock-table th { height: 38px !important; background: #222426 !important; }
    .warehouse-stock-table td { min-height: 40px !important; height: 40px !important; }
    .warehouse-stock-table .basket-col button { width: 34px !important; height: 34px !important; border-radius: 5px !important; }
}

@media screen and (max-width: 360px) {
    .mobile-wallet-button { padding-inline: 8px; }
    .mobile-wallet-button span { display: none; }
    .topbar-actions .topbar-tool:last-child { display: none !important; }
    .mobile-card-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .mobile-wallet-balances { grid-template-columns: 1fr; }
}

@media screen and (orientation: landscape) and (max-height: 520px) and (max-width: 640px) {
    :root {
        --mobile-context-height: 36px;
        --mobile-nav-height: 56px;
    }
    .workspace-tab.active a,
    .workspace-tab.active button { min-height: 36px !important; height: 36px !important; }
    .mobile-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button { flex-direction: row; gap: 6px; }
}

/* Mobile workspace v3: purpose-built records, editors and pickers. */
@media screen and (max-width: 640px) {
    html,
    body,
    .app-shell,
    .main-column,
    .content,
    .modal-panel,
    .modal-body,
    .modal-form {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Document commands remain fully visible instead of forming a clipped rail. */
    .document-commandbar {
        position: static !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .document-actions {
        width: 100% !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px 42px !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .document-actions > .doc-button,
    .document-actions > .doc-more,
    .document-actions > .doc-more > summary {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        margin: 0 !important;
    }

    .document-actions > .doc-button:first-child {
        grid-column: 1 / -1;
        min-height: 44px !important;
        height: 44px !important;
        font-weight: 650;
    }

    .document-actions > .doc-button.reserve {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    .document-actions > .document-close {
        grid-column: 3;
        padding: 0 !important;
        font-size: 0 !important;
    }
    .document-actions > .document-close span { display: none !important; }
    .document-actions > .document-close svg { width: 17px !important; height: 17px !important; }
    .document-actions > .doc-more > summary {
        padding: 0 !important;
        justify-content: center !important;
        font-size: 0 !important;
    }
    .document-actions > .doc-more > summary svg { width: 17px !important; height: 17px !important; }
    .document-actions > .doc-more { grid-column: 4; }
    .document-actions:has(.reserve) > .document-close,
    .document-actions:has(.reserve) > .doc-more { grid-row: 3; }
    .document-actions:not(:has(.reserve)) > .document-close,
    .document-actions:not(:has(.reserve)) > .doc-more { grid-row: 2; }

    .document-customer-summary {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .document-customer-summary div {
        min-height: 46px !important;
        padding: 5px 8px !important;
        border-bottom: 0 !important;
        border-left: 1px solid #303436 !important;
        display: grid !important;
        align-content: center;
        gap: 2px !important;
    }
    .document-customer-summary div:first-child { border-left: 0 !important; }
    .document-customer-summary dt,
    .document-customer-summary dd { text-align: left; }

    /* Customer/device lookup keeps the text field wide and groups icon actions. */
    .document-fields .counterparty-field {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }
    .document-fields .counterparty-field > span { grid-column: 1 / -1 !important; }
    .counterparty-field .lookup-search { grid-column: 1 !important; }
    .counterparty-actions {
        grid-column: 2 !important;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 42px;
        gap: 4px !important;
    }
    .counterparty-actions button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
    }

    /* Search gets its own row; tools no longer crush its placeholder. */
    .document-linebar,
    .document-linebar.without-discount,
    .document-linebar.with-assortment,
    .document-linebar.with-assortment.without-discount,
    .line-toolbar {
        min-width: 0 !important;
        padding: 7px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 42px) minmax(0, 1fr) !important;
        grid-template-rows: 42px 42px !important;
        justify-content: start;
        gap: 6px !important;
        border-bottom: 1px solid #303436;
        background: #1a1c1d;
    }
    .document-linebar > .lookup-search,
    .line-toolbar > .lookup-search {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        grid-column: 1 / -1 !important;
    }
    .lookup-search,
    .lookup-search-input { height: 42px !important; }
    .lookup-search-input { grid-template-columns: 34px minmax(0, 1fr) 34px !important; }
    .lookup-search-input input { height: 40px !important; min-height: 40px !important; font-size: 13px; }
    .lookup-search-input button { width: 34px !important; height: 40px !important; min-height: 40px !important; }
    .lookup-results { top: 45px !important; }
    .document-linebar > button,
    .line-toolbar > .icon-command {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .document-lines,
    .map-lines {
        min-height: 0 !important;
        grid-template-rows: auto auto !important;
        overflow: visible !important;
        border-radius: 6px;
    }
    .document-table,
    .line-grid {
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .document-table .document-empty,
    .line-grid .grid-empty {
        min-height: 112px !important;
        height: 112px !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* A document line starts with its name and ends with one clear action row. */
    .document-table .mobile-card-table td.line-number { display: none !important; }
    .document-table .mobile-card-table td.document-line-name {
        min-height: 58px !important;
        grid-column: 1 / -1 !important;
        color: #eef1f2 !important;
        background: #202325 !important;
        font-size: 13px !important;
        font-weight: 650;
    }
    .document-table .mobile-card-table td.document-line-actions {
        min-height: 50px !important;
        grid-column: 1 / -1 !important;
        border-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .document-table .mobile-card-table td.document-line-actions::before { display: none !important; }
    .document-table .mobile-card-table td.document-line-actions button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    /* Journal actions use the full card width; no empty half-cell remains. */
    .warehouse-grid .mobile-card-table td.stock-row-actions {
        grid-column: 1 / -1 !important;
        border-right: 0 !important;
    }

    .mobile-card-table td.row-actions {
        grid-column: 1 / -1 !important;
        border-right: 0 !important;
    }

    /* Orders expose the business information first, without a blank status tile. */
    .orders-grid .mobile-card-table:not(.products-table) td.state-dot { display: none !important; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-number { order: 1; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-date { order: 2; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-type { order: 3; grid-column: 1 / -1 !important; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-counterparty { order: 4; grid-column: 1 / -1 !important; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-department { order: 5; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-total { order: 6; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-state { order: 7; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-due { order: 8; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-note { order: 9; grid-column: 1 / -1 !important; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-number,
    .orders-grid .mobile-card-table:not(.products-table) td.order-date { background: #202426 !important; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-type,
    .orders-grid .mobile-card-table:not(.products-table) td.order-counterparty { color: #eef1f2 !important; font-weight: 650; }
    .orders-grid .mobile-card-table:not(.products-table) td.order-total { color: #9fc6ee !important; font-size: 14px !important; }

    .orders-grid .products-table td.order-product-name,
    .orders-grid .products-table td.order-product-counterparty { grid-column: 1 / -1 !important; }
    .orders-grid .products-table td.order-product-name {
        color: #eef1f2 !important;
        background: #202325 !important;
        font-weight: 650;
    }
    .orders-grid .products-table td.order-product-total { color: #9fc6ee !important; }

    /* Task cards follow the way a person scans them: when, what, for whom, who handles it. */
    .tasks-grid .mobile-card-table td.task-number { order: 1; }
    .tasks-grid .mobile-card-table td.task-date { order: 2; }
    .tasks-grid .mobile-card-table td.task-caption { order: 3; grid-column: 1 / -1 !important; }
    .tasks-grid .mobile-card-table td.task-customer { order: 4; grid-column: 1 / -1 !important; }
    .tasks-grid .mobile-card-table td.task-phone { order: 5; }
    .tasks-grid .mobile-card-table td.task-assignee { order: 6; }
    .tasks-grid .mobile-card-table td.task-reason { order: 7; grid-column: 1 / -1 !important; }
    .tasks-grid .mobile-card-table td.task-done { order: 8; }
    .tasks-grid .mobile-card-table td.task-priority { order: 9; }
    .tasks-grid .mobile-card-table td.task-number,
    .tasks-grid .mobile-card-table td.task-date { background: #202426 !important; }
    .tasks-grid .mobile-card-table td.task-caption {
        min-height: 58px !important;
        color: #eef1f2 !important;
        background: #202325 !important;
        font-size: 13px !important;
        font-weight: 650;
    }
    .tasks-grid .mobile-card-table td.task-done {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .tasks-grid .mobile-card-table td.task-priority .rate-stars { color: #d9a04b; }

    /* Selection is a compact control in reference cards, not a half-width data field. */
    .reference-grid .mobile-card-table tbody tr { position: relative; }
    .reference-grid .mobile-card-table td.select-cell {
        position: absolute !important;
        z-index: 2;
        top: 7px;
        right: 7px;
        width: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        display: grid !important;
        place-items: center;
        background: transparent !important;
    }
    .reference-grid .mobile-card-table td.select-cell::before { display: none !important; }
    .reference-grid .mobile-card-table td:has(> strong) {
        min-height: 58px !important;
        grid-column: 1 / -1 !important;
        padding-right: 54px !important;
        color: #eef1f2 !important;
        background: #202325 !important;
    }

    /* Transfer and stock-document commands stay reachable at phone width. */
    .stock-document:not(.inventory-start) > header nav {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    .stock-document:not(.inventory-start) > header nav > * {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
    }
    .stock-document:not(.inventory-start) > header nav > :first-child { grid-column: 1 / -1; }
    .stock-document:not(.inventory-start) > header nav details > summary {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        justify-content: center !important;
    }

    .stock-lines-host .stock-line-editor,
    .stock-lines-host .stock-line-editor.with-assortment {
        width: 100% !important;
        min-width: 0 !important;
        padding: 7px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 6px !important;
    }
    .stock-lines-host .stock-line-editor:not(.with-assortment) {
        grid-template-columns: minmax(0, 1fr) 42px !important;
    }
    .stock-lines-host .stock-line-editor > select {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        grid-column: 1 / -1 !important;
    }
    .stock-lines-host .stock-line-editor > input[type="number"] {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
    }
    .stock-lines-host .stock-line-editor > button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }
    .stock-lines-host .stock-line-editor > button:last-child {
        padding: 0 !important;
        font-size: 0 !important;
    }
    .stock-lines-host .stock-line-editor > button:last-child svg {
        width: 17px !important;
        height: 17px !important;
    }
    .stock-lines-host .mobile-card-table td:first-child {
        min-height: 58px !important;
        grid-column: 1 / -1 !important;
        color: #eef1f2 !important;
        background: #202325 !important;
    }
    .stock-lines-host .mobile-card-table tr:has(.empty-cell) {
        display: block !important;
        border: 0 !important;
        background: transparent !important;
    }
    .stock-lines-host .mobile-card-table .empty-cell {
        width: 100% !important;
        min-height: 100px !important;
        padding: 12px !important;
        border: 0 !important;
        display: grid !important;
        place-items: center;
        color: #666 !important;
        background: transparent !important;
        text-align: center !important;
    }
    .stock-lines-host .mobile-card-table .empty-cell::before { display: none !important; }

    /* Assembly controls and cards use the same touch layout. */
    .assembly-linebar {
        grid-template-columns: minmax(0, 1fr) 42px 42px !important;
        grid-template-rows: 42px 42px !important;
        gap: 6px !important;
    }
    .assembly-linebar > select {
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }
    .assembly-linebar > .qty { grid-column: 1 !important; }
    .assembly-linebar > button:not(.assembly-icon) { grid-column: 2 !important; }
    .assembly-linebar > .assembly-icon { grid-column: 3 !important; }
    .assembly-table .mobile-card-table td.grip { display: none !important; }
    .assembly-table .mobile-card-table td.assembly-component-name {
        min-height: 58px !important;
        grid-column: 1 / -1 !important;
        color: #eef1f2 !important;
        background: #202325 !important;
        font-weight: 650;
    }
    .assembly-table .mobile-card-table td.assembly-line-actions,
    .assemblies-grid .mobile-card-table td.assembly-row-actions {
        min-height: 50px !important;
        grid-column: 1 / -1 !important;
        border-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .assembly-table .mobile-card-table td.assembly-line-actions::before,
    .assemblies-grid .mobile-card-table td.assembly-row-actions::before { display: none !important; }

    .assemblies-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .assemblies-toolbar > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
    }
    .assemblies-toolbar > button.green {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .reports-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    .reports-toolbar > * {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
    }

    .stock-document {
        align-content: start !important;
        grid-auto-rows: max-content !important;
    }
    .stock-document > header { justify-content: flex-start !important; }
    .stock-document.inventory-start .inventory-start-note { min-height: 190px; }

    .warehouse-grid .mobile-card-table tbody tr { position: relative; }
    .warehouse-grid .mobile-card-table td[data-mobile-label=""]:has(> .stock-level) {
        position: absolute !important;
        z-index: 2;
        top: 14px;
        right: 12px;
        width: 12px !important;
        min-width: 12px !important;
        height: 12px !important;
        min-height: 12px !important;
        padding: 0 !important;
        border: 0 !important;
        display: block !important;
        background: transparent !important;
    }
    .warehouse-grid .mobile-card-table td[data-mobile-label=""]:has(> .stock-level)::before { display: none !important; }

    .service-card-fields .service-code button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center;
    }
    .service-card-fields .service-code button svg { width: 17px !important; height: 17px !important; }
    .service-card-fields .service-fixed {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: center !important;
    }
    .service-card-fields .service-fixed > span { grid-column: 1 / -1 !important; }
    .service-card-fields .service-fixed input[type="checkbox"] {
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        justify-self: center;
    }

    .tasks-grid .mobile-card-table td.task-done::before { content: "Готово" !important; }
    .tasks-grid .mobile-card-table tr:not(:has(td.task-assignee:not(:empty))) td.task-phone {
        grid-column: 1 / -1 !important;
    }

    /* Repair journal cards have an explicit reading order and no ghost cells. */
    .repair-grid .mobile-card-table tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .repair-grid .mobile-card-table td.flags { display: none !important; }
    .repair-grid .mobile-card-table td.repair-no,
    .repair-grid .mobile-card-table td.repair-date,
    .repair-grid .mobile-card-table td.repair-department,
    .repair-grid .mobile-card-table td.repair-status,
    .repair-grid .mobile-card-table td.repair-customer,
    .repair-grid .mobile-card-table td.repair-phone,
    .repair-grid .mobile-card-table td.repair-device,
    .repair-grid .mobile-card-table td.repair-code,
    .repair-grid .mobile-card-table td.repair-master,
    .repair-grid .mobile-card-table td.repair-promised,
    .repair-grid .mobile-card-table td.repair-due { grid-column: auto !important; }

    .repair-grid .mobile-card-table td.repair-no { order: 1; }
    .repair-grid .mobile-card-table td.repair-date { order: 2; }
    .repair-grid .mobile-card-table td.repair-status { order: 3; }
    .repair-grid .mobile-card-table td.repair-department { order: 4; }
    .repair-grid .mobile-card-table td.repair-customer { order: 5; }
    .repair-grid .mobile-card-table td.repair-phone { order: 6; }
    .repair-grid .mobile-card-table td.repair-device { order: 7; grid-column: 1 / -1 !important; }
    .repair-grid .mobile-card-table td.repair-code { order: 8; }
    .repair-grid .mobile-card-table td.repair-master { order: 9; }
    .repair-grid .mobile-card-table td.repair-promised { order: 10; }
    .repair-grid .mobile-card-table td.repair-due { order: 11; }

    .repair-grid .mobile-card-table td.repair-no,
    .repair-grid .mobile-card-table td.repair-date {
        min-height: 52px !important;
        background: #202426 !important;
    }
    .repair-grid .mobile-card-table td.repair-no {
        color: #91b9e4 !important;
        font-size: 15px !important;
        font-weight: 750;
    }
    .repair-grid .mobile-card-table td.repair-status { box-shadow: inset 3px 0 #d9822b; }
    .repair-grid .mobile-card-table td.repair-device {
        min-height: 58px !important;
        color: #edf0f1 !important;
        background: #1f2223 !important;
        font-weight: 650;
    }

    /* Sale cards end with one horizontal action strip. */
    .sales-grid .mobile-card-table:not(.sale-products-table) tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sales-grid .mobile-card-table td.sale-number { order: 1; }
    .sales-grid .mobile-card-table td.sale-date { order: 2; }
    .sales-grid .mobile-card-table td.sale-document { order: 3; }
    .sales-grid .mobile-card-table td.sale-department { order: 4; }
    .sales-grid .mobile-card-table td.sale-customer { order: 5; }
    .sales-grid .mobile-card-table td.sale-author { order: 6; }
    .sales-grid .mobile-card-table td.sale-note { order: 7; grid-column: 1 / -1 !important; }
    .sales-grid .mobile-card-table td.sale-total { order: 8; grid-column: 1 / -1 !important; }
    .sales-grid .mobile-card-table td.sale-paid { order: 9; }
    .sales-grid .mobile-card-table td.sale-debt { order: 10; }
    .sales-grid .mobile-card-table td.sale-row-actions {
        min-height: 50px !important;
        order: 11;
        grid-column: 1 / -1 !important;
        border-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-direction: row !important;
        gap: 6px !important;
    }
    .sales-grid .mobile-card-table td.sale-row-actions button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex: 0 0 40px !important;
    }
    .sales-grid .mobile-card-table td.sale-number,
    .sales-grid .mobile-card-table td.sale-date { background: #202426 !important; }
    .sales-grid .mobile-card-table td.sale-total {
        min-height: 58px !important;
        color: #9fc6ee !important;
        font-size: 16px !important;
    }

    /* Repair line editors are real touch cards rather than a 900px table. */
    .line-grid .repair-lines-table.mobile-card-table {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }
    .line-grid .repair-lines-table.mobile-card-table tbody {
        padding: 7px !important;
        display: grid !important;
        gap: 8px !important;
    }
    .line-grid .repair-lines-table.mobile-card-table tbody tr {
        position: relative;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border: 1px solid #35393b !important;
        border-radius: 6px;
        overflow: hidden;
        background: #1b1d1e !important;
    }
    .line-grid .repair-lines-table.mobile-card-table td.row-no { display: none !important; }
    .line-grid .repair-lines-table.mobile-card-table td.line-name,
    .line-grid .repair-lines-table.mobile-card-table td.line-serial,
    .line-grid .repair-lines-table.mobile-card-table td.line-person,
    .line-grid .repair-lines-table.mobile-card-table td.line-actions {
        grid-column: 1 / -1 !important;
    }
    .line-grid .repair-lines-table.mobile-card-table td.line-name {
        min-height: 58px !important;
        color: #edf0f1 !important;
        background: #202325 !important;
        font-size: 13px !important;
        font-weight: 650;
    }
    .line-grid .repair-lines-table.mobile-card-table td {
        width: auto !important;
        min-width: 0 !important;
        min-height: 62px !important;
        padding: 8px !important;
        border: 0 !important;
        border-right: 1px solid #2e3234 !important;
        border-bottom: 1px solid #2e3234 !important;
        display: grid !important;
        align-content: center;
        gap: 5px;
        overflow: visible !important;
        white-space: normal !important;
    }
    .line-grid .repair-lines-table.mobile-card-table td:nth-child(even) { border-right: 0 !important; }
    .line-grid .repair-lines-table.mobile-card-table td::before {
        content: attr(data-mobile-label);
        color: #7f878b;
        font-size: 9px;
        font-weight: 650;
        text-transform: uppercase;
    }
    .line-grid .repair-lines-table.mobile-card-table td.line-actions {
        min-height: 50px !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        border-right: 0 !important;
    }
    .line-grid .repair-lines-table.mobile-card-table td.line-actions::before { display: none; }
    .line-grid .repair-lines-table.mobile-card-table td input,
    .line-grid .repair-lines-table.mobile-card-table td select {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 8px !important;
        border: 1px solid #363b3d !important;
        background: #17191a !important;
        text-align: left !important;
    }
    .line-grid .repair-lines-table.mobile-card-table td.line-actions button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    /* Assortment picker uses a compact group pane and readable product cards. */
    .assortment-header {
        position: relative !important;
        padding: 10px 58px 8px 10px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }
    .assortment-heading { min-width: 0; padding: 0 !important; }
    .assortment-heading strong { font-size: 16px !important; }
    .assortment-header-actions {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .assortment-header-actions::-webkit-scrollbar { display: none; }
    .assortment-header-actions button:not(.close) {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        flex: 0 0 42px;
        font-size: 0 !important;
    }
    .assortment-header-actions button.close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
    }
    .assortment-header-actions button svg { width: 17px !important; height: 17px !important; }

    .assortment-content {
        padding: 7px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 126px minmax(0, 1fr) !important;
        gap: 7px !important;
        overflow: hidden !important;
    }
    .assortment-groups {
        grid-row: 1 !important;
        min-height: 0 !important;
    }
    .assortment-left {
        grid-row: 2 !important;
        min-height: 0 !important;
        grid-template-rows: minmax(270px, 1fr) 174px !important;
        gap: 7px !important;
    }
    .assortment-search {
        height: 42px !important;
        margin: 5px !important;
        grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    }
    .assortment-search input {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        font-size: 13px;
    }
    .assortment-catalog { grid-template-rows: 52px minmax(0, 1fr) !important; }
    .assortment-table-wrap { min-height: 0 !important; overflow-y: auto !important; }
    .assortment-table.mobile-card-table tbody { padding: 6px !important; gap: 7px !important; }
    .assortment-table.mobile-card-table tbody tr {
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 6px !important;
    }
    .assortment-table.mobile-card-table td.assortment-add-column {
        position: absolute !important;
        z-index: 2;
        top: 10px;
        right: 10px;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        display: grid !important;
        place-items: center;
    }
    .assortment-table.mobile-card-table td.assortment-add-column::before { display: none !important; }
    .assortment-table.mobile-card-table td.assortment-add-column button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border: 1px solid #386f3b !important;
        border-radius: 5px;
        background: #203723 !important;
    }
    .assortment-table.mobile-card-table td.assortment-item-cell {
        min-height: 74px !important;
        padding-right: 62px !important;
        grid-column: 1 / -1 !important;
        color: #eef1f2 !important;
        background: #202325 !important;
    }
    .assortment-table.mobile-card-table td.assortment-item-cell strong {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        line-height: 1.35;
    }
    .assortment-table.mobile-card-table td.assortment-currency-cell { display: none !important; }
    .assortment-table.mobile-card-table td.assortment-price-cell:not(.active-price) { display: none !important; }
    .assortment-table.mobile-card-table td.assortment-stock-cell,
    .assortment-table.mobile-card-table td.assortment-price-cell.active-price {
        min-height: 58px !important;
    }
    .assortment-table.mobile-card-table td.assortment-price-cell.active-price {
        color: #9ec9ee !important;
        background: transparent !important;
        font-size: 14px !important;
        font-weight: 700;
    }
    .assortment-table.mobile-card-table tr:has(.assortment-empty) {
        display: block !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .assortment-table.mobile-card-table .assortment-empty {
        width: 100% !important;
        min-height: 100px !important;
        border: 0 !important;
    }

    .assortment-cart { grid-template-rows: 42px minmax(0, 1fr) 28px !important; }
    .assortment-cart > header { min-height: 42px !important; }
    .assortment-cart > header button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }
    .assortment-cart .mobile-card-table tbody { padding: 5px !important; }
    .assortment-cart .mobile-card-table tbody tr {
        position: relative;
        grid-template-columns: minmax(0, 1fr) 92px !important;
    }
    .assortment-cart .mobile-card-table tbody td:first-child { grid-column: 1 / -1 !important; }
    .assortment-cart .mobile-card-table tbody td:last-child {
        position: absolute !important;
        right: 7px;
        bottom: 7px;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* Product/service editor never inherits a desktop width. */
    .modal-panel.warehouse-member-editor,
    .modal-panel.warehouse-member-editor .modal-body,
    .modal-panel.warehouse-member-editor .member-card-editor {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .modal-panel.warehouse-member-editor .member-card-editor { padding: 10px !important; }
    .member-card-editor > *,
    .member-card-head,
    .member-card-main,
    .member-price-fields,
    .member-picture-column,
    .member-service-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .member-card-head,
    .member-card-main { grid-template-columns: minmax(0, 1fr) !important; }
    .member-card-head label,
    .member-card-head .member-group-field,
    .member-name,
    .member-link,
    .member-price-fields label,
    .member-picture-column > label,
    .member-service-main label {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
    }
    .member-card-head input,
    .member-card-head select,
    .member-name input,
    .member-link input,
    .member-price-fields input,
    .member-price-fields select,
    .member-picture-column input,
    .member-service-main input,
    .member-service-main select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
    }
    .member-card-head .member-code {
        grid-template-columns: minmax(0, 1fr) 42px !important;
    }
    .member-card-head .member-code > span { grid-column: 1 / -1; }
    .member-card-head .member-code button { width: 42px !important; height: 42px !important; }
    .member-editor-tabs {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }
    .member-editor-tabs::-webkit-scrollbar { display: none; }
    .member-editor-tabs button {
        min-width: max-content;
        min-height: 42px !important;
        height: 42px !important;
        flex: 0 0 auto;
    }
    .member-price-fields .member-inline-check,
    .member-service-main .member-inline-check {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: center;
    }
    .member-service-main .service-fixed-prize {
        grid-template-columns: 18px minmax(0, 1fr) !important;
    }
    .member-service-main .service-fixed-prize > span { grid-column: 1 / -1; }
    .member-picture { min-height: 220px !important; }
    .member-card-editor > .modal-actions {
        position: sticky;
        z-index: 6;
        bottom: -10px;
        margin: 10px -10px -10px !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        border-top: 1px solid #373b3d;
        background: rgb(27 29 30 / 97%);
    }
    .member-card-editor > .modal-actions .button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
    }
    .member-card-editor > .modal-actions .primary { grid-column: 1 / -1; order: -1; }

    /* Keep the last journal details and editor actions inside the phone viewport. */
    .tasks-grid .mobile-card-table td.task-done::before {
        flex: 0 0 auto;
        width: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .tasks-grid .mobile-card-table td.task-done > button {
        flex: 0 0 42px;
        width: 42px !important;
        padding: 0 !important;
    }

    .order-side,
    .order-side > * { min-width: 0 !important; max-width: 100% !important; }
    .order-side footer {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .order-side footer > .order-button,
    .order-side footer > .order-icon {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .order-side footer > .green:first-child { grid-column: 1 / -1; }

    .assembly-workspace footer {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }
    .assembly-workspace footer > div {
        width: 100% !important;
        min-width: 0 !important;
    }
    .assembly-workspace footer > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .assembly-workspace footer > div:last-child button {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 7px !important;
    }
    .assembly-workspace footer > div:last-child .green { grid-column: 1 / -1; order: -1; }

    .report-filters {
        padding: 7px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        overflow: visible !important;
    }
    .report-filters > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-column: auto !important;
        flex: none !important;
    }
    .report-filters label {
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start;
        gap: 4px !important;
    }
    .report-filters label.grow,
    .report-filters > button { grid-column: 1 / -1 !important; }
    .report-filters input,
    .report-filters select,
    .report-filters > button { min-height: 42px !important; }
}