/* Phone presentation only. The short coarse-pointer landscape clause covers
   rotated phones (e.g. 844 x 390), without changing tablet/PC layouts.
   Keep this query in sync with mobile_tables.js. No rules outside this gate. */
@media screen and (max-width: 767px), screen and (max-width: 899px) and (max-height: 480px) and (pointer: coarse) {
    body:is(.admin-page, .user-page, .platform-owner-page) {
        --pp-control-height: 44px;
        padding-left: 0;
    }

    /* Natural document height: only tables and tab strips pan sideways. */
    body:is(.admin-page, .user-page) .container {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        overflow: visible !important;
    }
    body:is(.admin-page, .user-page) .container > div,
    body.user-page :is(.pos-shell, .pos-cart-panel, .pos-product-panel, .van-sales-layout, .van-sales-main, .flex-workspace-grid, .flex-editor-card, .flex-summary-card),
    body.user-page[data-business-profile] :is(#salesEntry, #printingWorkspaceTab, #printJobQueueTab, #printJobStatusTab, [data-flex-module-tab]) {
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    /* One compact shell across Admin and all operator editions. */
    body:is(.admin-page, .user-page) > .header {
        min-height: 0;
        margin: 0;
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
        font-size: 1rem;
        line-height: 1.3;
    }
    body:is(.admin-page, .user-page) > .user-info {
        display: grid;
        gap: 6px;
        margin: 0;
        padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
        font-size: .82rem;
        text-align: left;
    }
    body:is(.admin-page, .user-page) > .user-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    body:is(.admin-page, .user-page) > .user-info > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
    body:is(.admin-page, .user-page) .user-info > div { min-width: 0; }
    body:is(.admin-page, .user-page) :is(#companyNameHeader, #branchNameHeader, #userName) {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        line-height: 1.35;
    }
    body:is(.admin-page, .user-page) .user-actions {
        display: contents;
    }
    body:is(.admin-page, .user-page) .user-actions #userName {
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(34vw, 180px);
        width: auto;
        margin-left: 2px;
        overflow-wrap: anywhere;
        text-align: left;
    }
    body:is(.admin-page, .user-page) .user-actions > span {
        flex: 0 1 auto;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
    }
    body:is(.admin-page, .user-page) .user-actions button { margin: 0; }
    body:is(.admin-page, .user-page) .user-actions > button[onclick="logout()"] { margin-left: auto; }
    body:is(.admin-page, .user-page) .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: flex-start;
        padding: max(4px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
        min-height: 52px;
    }
    body:is(.admin-page, .user-page) .topbar-title {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: .95rem;
        line-height: 1.3;
    }
    body:is(.admin-page, .user-page) .hamburger {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 8px;
    }
    body:is(.admin-page, .user-page) .sidebar {
        width: min(300px, calc(100vw - 48px)) !important;
        height: 100dvh;
        max-height: 100dvh;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        overflow-y: auto;
        z-index: 1000;
    }
    body:is(.admin-page, .user-page) .sidebar :is(.sidebar-title, .nav-text, .submenu-arrow) { display: inline; }
    body:is(.admin-page, .user-page) .sidebar .nav-link {
        justify-content: flex-start;
        white-space: normal;
        font-size: .85rem;
        text-align: left;
    }
    body:is(.admin-page, .user-page) .sidebar .nav-icon { flex: 0 0 20px; margin-right: 10px; }
    body:is(.admin-page, .user-page) .sidebar .sidebar-header { justify-content: space-between; }
    body:is(.admin-page, .user-page) .sidebar .submenu.open {
        position: static;
        min-width: 0;
        background: transparent;
        box-shadow: none;
    }
    body:is(.admin-page, .user-page) .sidebar .nav-link::after { content: none; }

    body:is(.admin-page, .user-page) .sidebar.sidebar-collapsed,
    body.sidebar-collapsed:is(.admin-page, .user-page) .sidebar {
        width: 72px !important;
        padding: max(12px, env(safe-area-inset-top)) 6px max(12px, env(safe-area-inset-bottom));
    }
    body:is(.admin-page, .user-page) .sidebar.sidebar-collapsed,
    body.sidebar-collapsed:is(.admin-page, .user-page) .sidebar { overflow-x: visible; }
    body:is(.admin-page, .user-page) .sidebar.sidebar-collapsed .sidebar-header,
    body.sidebar-collapsed:is(.admin-page, .user-page) .sidebar .sidebar-header { justify-content: center; }
    body:is(.admin-page, .user-page) .sidebar.sidebar-collapsed :is(.sidebar-title, .nav-text, .submenu-arrow, .submenu),
    body.sidebar-collapsed:is(.admin-page, .user-page) .sidebar :is(.sidebar-title, .nav-text, .submenu-arrow, .submenu) { display: none; }
    body:is(.admin-page, .user-page) .sidebar.sidebar-collapsed .nav-link,
    body.sidebar-collapsed:is(.admin-page, .user-page) .sidebar .nav-link { justify-content: center; }
    body:is(.admin-page, .user-page) .sidebar.sidebar-collapsed .nav-link .nav-icon,
    body.sidebar-collapsed:is(.admin-page, .user-page) .sidebar .nav-link .nav-icon { margin-right: 0; }
    body:is(.admin-page, .user-page) .sidebar .collapse-btn {
        background: #123b5d;
        color: #dbeafe;
        border-color: rgba(147, 197, 253, 0.34);
    }
    body:is(.admin-page, .user-page) .sidebar .collapse-btn:hover,
    body:is(.admin-page, .user-page) .sidebar .collapse-btn:focus-visible,
    body:is(.admin-page, .user-page) .sidebar .collapse-btn:active {
        background: #18577a;
        color: #ffffff;
        border-color: rgba(186, 230, 253, 0.72);
    }

    /* Keep real tables, complete columns and native bidirectional touch pan.
       Masks are passive edge fades: no overlay intercepts cell controls. */
    body:is(.admin-page, .user-page, .platform-owner-page) .pp-mobile-scroll {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        scrollbar-gutter: auto;
        overscroll-behavior-x: contain;
    }
    .pp-mobile-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .pp-mobile-scroll[data-scroll-edges="right"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), #0004); mask-image: linear-gradient(to right, #000 calc(100% - 14px), #0004); }
    .pp-mobile-scroll[data-scroll-edges="left"] { -webkit-mask-image: linear-gradient(to right, #0004, #000 14px); mask-image: linear-gradient(to right, #0004, #000 14px); }
    .pp-mobile-scroll[data-scroll-edges="both"] { -webkit-mask-image: linear-gradient(to right, #0004, #000 14px, #000 calc(100% - 14px), #0004); mask-image: linear-gradient(to right, #0004, #000 14px, #000 calc(100% - 14px), #0004); }
    .pp-mobile-table-wrap { margin-bottom: 12px; }
    body:is(.admin-page, .user-page, .platform-owner-page) .pp-mobile-scroll > table {
        display: table !important;
        width: max-content !important;
        min-width: 100%;
        max-width: none !important;
        table-layout: auto !important;
        overflow: visible;
        margin-bottom: 0;
    }
    body:is(.admin-page, .user-page, .platform-owner-page) .pp-mobile-scroll :is(th, td) {
        padding: 9px 10px;
        font-size: .8rem !important;
        line-height: 1.4;
        max-width: 22rem;
        overflow: visible;
        text-overflow: clip;
    }
    body:is(.admin-page, .user-page, .platform-owner-page) .pp-mobile-scroll th { white-space: nowrap; }
    body:is(.admin-page, .user-page, .platform-owner-page) .pp-mobile-scroll td { white-space: normal; overflow-wrap: break-word; }
    /* Undo the older Flex card transformation, retaining genuine table roles. */
    body:is(.admin-page, .user-page) .pp-mobile-scroll thead { display: table-header-group !important; }
    body:is(.admin-page, .user-page) .pp-mobile-scroll tbody { display: table-row-group !important; }
    body:is(.admin-page, .user-page) .pp-mobile-scroll tr {
        display: table-row !important;
        width: auto;
        margin: 0;
        padding: 0;
    }
    body:is(.admin-page, .user-page) .pp-mobile-scroll :is(th, td) { display: table-cell !important; width: auto; }
    body:is(.admin-page, .user-page) .pp-mobile-scroll :is(.flex-job-table, .flex-queue-table) td::before { content: none; }
    body:is(.admin-page, .user-page) .pp-mobile-scroll .flex-job-table { min-width: 1050px; }
    body.user-page #salesEntry .pos-cart-table :is(th, td) { display: table-cell !important; }
    body.user-page #salesEntry .pos-cart-table { min-width: 780px; }
    body.user-page #salesEntry .pos-qty-control {
        width: auto;
        min-width: 150px;
        grid-template-columns: 44px minmax(58px, 1fr) 44px;
    }
    body.user-page #salesEntry .pos-qty-input { min-width: 58px; }
    body:is(.admin-page, .user-page) .pp-mobile-scroll :is(input, select) { min-width: 85px; }
    body:is(.admin-page, .user-page) .pp-mobile-scroll :is(.flex-size-inputs, .flex-dimension-inputs) { min-width: 210px; }
    body:is(.admin-page, .user-page) .pp-mobile-scroll :is(.flex-description-input, .flex-product-select) { min-width: 180px; }

    body:is(.admin-page, .user-page) :is(.purchase-subnav, .accounts-subnav, .promotion-main-tabs) {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 4px;
    }
    body:is(.admin-page, .user-page) :is(.purchase-subnav, .accounts-subnav, .promotion-main-tabs) > button { flex: 0 0 auto; white-space: nowrap; }

    /* Practical touch sizing; input fonts avoid automatic iOS focus zoom. */
    body:is(.admin-page, .user-page, .platform-owner-page) button {
        min-height: 44px !important;
        min-width: 44px !important;
        height: auto;
        white-space: normal;
    }
    body:is(.admin-page, .user-page, .platform-owner-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        min-height: 44px;
        max-width: 100%;
        font-size: 16px !important;
    }
    body:is(.admin-page, .user-page) label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; align-content: center; }
    body:is(.admin-page, .user-page) input:is([type="checkbox"], [type="radio"]) { width: 22px; height: 22px; flex-shrink: 0; }

    /* Shared forms/filters retain their field order and labels. */
    body:is(.admin-page, .user-page) :is(.admin-sales-filters, .inventory-filters, .inventory-history-filters, .report-summary-filters, .tax-day-filters,
        #salesReportTab > .filters:not(.table-pager), #userCollectionSection > .filters:not(.table-pager),
        #salesSummaryUserTab > .filters:not(.table-pager), #customerTab > .filters:not(.table-pager),
        #userPurchaseHistoryPanel > .filters:not(.table-pager)) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: end;
        gap: 10px;
        padding: 12px;
        min-width: 0;
    }
    body:is(.admin-page, .user-page) :is(.admin-sales-filters, .inventory-filters, .inventory-history-filters, .report-summary-filters, .tax-day-filters,
        #salesReportTab > .filters:not(.table-pager), #userCollectionSection > .filters:not(.table-pager),
        #salesSummaryUserTab > .filters:not(.table-pager), #customerTab > .filters:not(.table-pager),
        #userPurchaseHistoryPanel > .filters:not(.table-pager)) > label {
        flex: 1 1 145px;
        width: auto;
        min-width: 0 !important;
        max-width: 100%;
    }
    body:is(.admin-page, .user-page) :is(.admin-sales-filters, .inventory-filters, .inventory-history-filters, .report-summary-filters, .tax-day-filters,
        #salesReportTab > .filters:not(.table-pager), #userCollectionSection > .filters:not(.table-pager),
        #salesSummaryUserTab > .filters:not(.table-pager), #customerTab > .filters:not(.table-pager),
        #userPurchaseHistoryPanel > .filters:not(.table-pager)) > label {
        display: grid;
        gap: 4px;
    }
    body:is(.admin-page, .user-page) :is(.admin-sales-filters, .inventory-filters, .inventory-history-filters, .report-summary-filters, .tax-day-filters,
        #salesReportTab > .filters:not(.table-pager), #userCollectionSection > .filters:not(.table-pager),
        #salesSummaryUserTab > .filters:not(.table-pager), #customerTab > .filters:not(.table-pager),
        #userPurchaseHistoryPanel > .filters:not(.table-pager)) > label :is(input, select, textarea) {
        width: 100%;
        min-width: 0;
    }
    body:is(.admin-page, .user-page) :is(.admin-sales-filters, .inventory-filters, .inventory-history-filters, .report-summary-filters, .tax-day-filters,
        #salesReportTab > .filters:not(.table-pager), #userCollectionSection > .filters:not(.table-pager),
        #salesSummaryUserTab > .filters:not(.table-pager), #customerTab > .filters:not(.table-pager),
        #userPurchaseHistoryPanel > .filters:not(.table-pager)) > button {
        flex: 0 1 auto;
        white-space: nowrap;
    }
    body:is(.admin-page, .user-page) :is(.admin-sales-filters, .inventory-filters, .inventory-history-filters, .report-summary-filters, .tax-day-filters,
        #salesReportTab > .filters:not(.table-pager), #userCollectionSection > .filters:not(.table-pager),
        #salesSummaryUserTab > .filters:not(.table-pager), #customerTab > .filters:not(.table-pager),
        #userPurchaseHistoryPanel > .filters:not(.table-pager)) > button:first-of-type { margin-left: 0; }
    body:is(.admin-page, .user-page) :is(.filters, .card, .panel, .modal-card, .modal-content) :is(input, select, textarea) { min-width: 0; }
    body.user-page #stockTabUser .inventory-filters { display: flex; flex-wrap: wrap; }
    body.user-page #stockTabUser .inventory-filters label { flex-basis: 100%; max-width: 100%; }
    body:is(.admin-page, .user-page) :is(.form-grid, .promotion-form-grid, .flex-settings-grid, .flex-inline-fields, .flex-customer-row, .flex-module-editor-footer) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    body:is(.admin-page, .user-page) :is(.card, .panel, .flex-list-card, .flex-editor-card, .flex-summary-card) { min-width: 0; padding: 12px; }
    body:is(.admin-page, .user-page) :is(.salary-module-grid, .accounts-category-form, .pl-filter-card, .pl-summary-grid) { grid-template-columns: minmax(0, 1fr); }
    body:is(.admin-page, .user-page) :is(.salary-module-grid, .form-grid, .card, .panel) > * { min-width: 0; }
    body:is(.admin-page, .user-page) :is(.page-heading, .panel-title, .flex-section-heading, .flex-workspace-header, .accounts-dashboard-heading) {
        min-width: 0;
        min-height: 0;
        flex-wrap: wrap;
        gap: 10px;
    }
    body:is(.admin-page, .user-page) :is(h2, h3) { overflow-wrap: anywhere; }
    body:is(.admin-page, .user-page) .page-heading h2 { font-size: 1.25rem; }
    body:is(.admin-page, .user-page) :is(.flex-row-actions, .form-actions, .card-actions) { flex-wrap: wrap; gap: 8px; }
    body:is(.admin-page, .user-page) .table-pager {
        flex-wrap: nowrap !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-width: 0;
        padding: 0;
        margin: var(--pp-space-2) 0 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
    }
    body:is(.admin-page, .user-page) .table-pager > button { flex: 0 0 44px; white-space: nowrap; margin-left: 0; }
    body:is(.admin-page, .user-page) .table-pager > span {
        min-width: 0;
        margin-inline: auto;
        white-space: nowrap;
        text-align: center;
    }

    /* Canonical metrics, without clipping long currency amounts or labels. */
    body.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
        gap: 10px;
    }
    body.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card { min-width: 0; min-height: 128px; padding: 12px; }
    body.admin-page :is(#dashboardTab, #adminEditionDashboardTab, #gymPanelTab:where(.gym-dashboard)) .metric-card :is(strong, .metric-value, .metric-label) {
        white-space: normal;
        overflow-wrap: anywhere;
        overflow: visible;
        text-overflow: clip;
    }
    body.admin-page :is(.accounts-dashboard-grid, .capital-funds-panel, .flex-admin-dashboard-grid) { grid-template-columns: minmax(0, 1fr); }

    /* Van's existing sequence, with a clear compact mobile hierarchy. */
    body.user-page[data-business-profile="van_sales"] .van-workspace-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 12px;
    }
    body.user-page[data-business-profile="van_sales"] .van-workspace-heading > :is(.van-workspace-eyebrow, h2, .van-live-time, .van-document-chip) {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    body.user-page[data-business-profile="van_sales"] .van-workspace-heading h2 { font-size: 1.3rem; margin: 0; }
    body.user-page[data-business-profile="van_sales"] :is(.van-sales-layout, .van-customer-grid) { grid-template-columns: minmax(0, 1fr); }
    body.user-page[data-business-profile="van_sales"] :is(.van-sales-card, .van-checkout-card) { padding: 12px; }
    body.user-page[data-business-profile="van_sales"] .van-card-heading { flex-wrap: wrap; gap: 8px; }
    body.user-page[data-business-profile="van_sales"] .van-heading-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    body.user-page[data-business-profile="van_sales"] .van-product-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    body.user-page[data-business-profile="van_sales"] :is(.van-product-search-field, .van-barcode-field) { grid-column: 1 / -1; }
    body.user-page[data-business-profile="van_sales"] .van-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.user-page[data-business-profile="van_sales"] .van-primary-actions { grid-template-columns: minmax(0, 1fr); }
    body.user-page :is(.van-total-list, .pos-total-box, .flex-totals-list) > div { gap: 10px; flex-wrap: wrap; }
    body.user-page[data-business-profile="flex_printing"] :is(.flex-workspace-grid, .flex-production-footer, .flex-primary-actions) { grid-template-columns: minmax(0, 1fr); }
    body.user-page[data-business-profile="flex_printing"] .flex-primary-actions .flex-create-job-btn { grid-column: 1; }
    body.user-page[data-business-profile="flex_printing"] :is(.flex-workspace-title, .flex-document-state, .flex-workspace-header-actions) { flex-wrap: wrap; min-width: 0; }
    body.user-page .pos-shell:not(.van-sales-shell) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 12px; }
    body.user-page .pos-cart-panel { display: flex; flex-direction: column; }
    body.user-page .pos-total-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px; }
    body.user-page .pos-total-box > div { display: flex; grid-column: 1; justify-content: space-between; align-items: baseline; }
    body.user-page .pos-total-box .pos-grand-total { padding: 10px; }
    body.user-page :is(.pos-cart-table-wrap, .flex-job-table-wrap) { min-height: 0; }
    body.user-page :is(.pos-product-panel, .pos-product-workspace) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto !important;
        height: auto;
        overflow: visible;
    }
    body.user-page .pos-scan-row { grid-template-columns: minmax(0, 1fr); }
    /* Reserve the existing barcode icon's space after shared input padding. */
    body.user-page[data-business-profile="retail_pos"] #barcodeInput { padding-left: 2.35rem; }
    body.user-page :is(.pos-quick-products, .pos-calculator, .pos-search-results-panel) { min-width: 0; height: auto; }
    body.user-page .pos-quick-products .quick-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(76px, auto); }
    body.user-page .pos-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.user-page .pos-more-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.user-page .pos-cart-table:has(.pos-cart-empty-cell) { height: auto; }
    body.user-page .pos-cart-empty-state {
        width: min(260px, calc(100vw - 64px));
        min-height: 140px;
        height: auto;
        padding: 16px;
    }
    body.user-page .pos-cart-empty-cell { height: auto; }
    body:is(.admin-page, .user-page) .flex-job-table td:nth-child(-n+2) input { min-width: 180px; }
    body.user-page :is(.pos-panel-head, .pos-product-panel-head) { flex-wrap: wrap; gap: 8px; }

    /* Shared dialog shells: bounded frame, scrolling body, reachable actions. */
    body:is(.admin-page, .user-page) :is(.modal-overlay, .admin-dialog-overlay, .pos-dialog-overlay, .flex-modal-overlay) {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        height: 100dvh;
        align-items: center;
    }
    body:is(.admin-page, .user-page) :is(.modal-card, .modal-content, .admin-dialog, .pos-dialog, .flex-modal) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
        overflow: auto;
        padding: 12px;
    }
    body:is(.admin-page, .user-page) :is(.admin-dialog, .pos-dialog) { display: flex; flex-direction: column; }
    body:is(.admin-page, .user-page) :is(.admin-dialog-header, .pos-dialog-title, .admin-dialog-actions, .pos-dialog-actions) { flex: 0 0 auto; }
    body:is(.admin-page, .user-page) :is(.admin-dialog-body, .pos-dialog-body) { min-height: 0; min-width: 0; overflow: auto; }
    body:is(.admin-page, .user-page) :is(.modal-actions, .admin-dialog-actions, .pos-dialog-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
    body:is(.admin-page, .user-page) :is(.modal-actions, .admin-dialog-actions, .pos-dialog-actions) > button { flex: 1 1 auto; }
    body:is(.admin-page, .user-page) :is(.admin-dialog-body, .pos-dialog-body) :is(input, select, textarea) { max-width: 100%; }
    body.auth-page { padding-bottom: env(safe-area-inset-bottom); }
    body.auth-page .public-auth-header { padding-top: max(12px, env(safe-area-inset-top)); }
    body.auth-page :is(input, select) { font-size: 16px; min-height: 44px; }
}