/* UX01–31: compact controls, clear scope/state, responsive work surfaces. */
.sale-keep-order-reference { min-width: 0; overflow-wrap: anywhere; }
.sale-keep-order-reference a { text-decoration: underline; }
/* Mac app calendar lives in the top layer, independently of WebKit's native popover. */
.xims-date-picker { width: 340px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); box-sizing: border-box; overflow: auto; padding: 18px; margin: auto; border: 1px solid var(--border, #ddd); border-radius: 14px; background: var(--card, #fff); color: var(--text, #334155); box-shadow: 0 12px 40px #0003; }
.xims-date-picker::backdrop { background: #0004; }
.xims-date-picker h3 { margin: 0 0 12px; font-size: 18px; }
.xims-date-picker button { width: auto; min-width: 0; min-height: 34px; margin: 0; padding: 6px; font-size: 14px; line-height: 1.3; border-radius: 7px; }
.xims-date-picker label { margin: 0; font-size: 13px; }
.xims-date-picker input, .xims-date-picker select { min-width: 0; max-width: 100%; margin: 0; padding: 7px; font-size: 16px; border-radius: 7px; }
.xims-date-picker-month { display: grid; grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 1fr) 32px; align-items: center; gap: 6px; margin-bottom: 10px; }
.xims-date-picker-month > label { display: flex; align-items: center; gap: 3px; min-width: 0; }
.xims-date-picker-weekdays, .xims-date-picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.xims-date-picker-weekdays { padding-bottom: 5px; font-size: 13px; color: var(--muted, #64748b); }
.xims-date-picker-grid button { background: transparent; color: var(--text, #334155); box-shadow: none; border: 1px solid transparent; }
.xims-date-picker-grid button[aria-current="date"] { border-color: var(--primary, #42719d); }
.xims-date-picker-grid button[aria-pressed="true"] { background: var(--primary, #42719d); color: #fff; }
.xims-date-picker-grid button:disabled { opacity: .35; cursor: not-allowed; }
.xims-date-picker button:focus-visible { outline: 2px solid var(--focus, #2563eb); outline-offset: 1px; }
.xims-date-picker-manual-label { display: block; margin-top: 12px !important; }
.xims-date-picker-manual-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 4px; }
.xims-date-picker-error { display: block; margin-top: 6px; color: #b91c1c; font-size: 13px; }
.xims-date-picker-error:empty { display: none; }
.xims-date-picker-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
@media print { .xims-date-picker { display: none; } }
.ux-entry-mode { padding: 4px 12px; background: var(--primary-soft, #f6eee8); color: var(--text, #334155); font-size: 12px; }
.ux-entry-mode[hidden] { display: none; }
.ux-section-jumps { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 12px; padding: 3px 0; }
.ux-section-jumps button { width: auto !important; flex: 0 0 auto; min-height: 28px; padding: 4px 9px; font-size: 12px; white-space: nowrap; }
.ux-money-preview { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ux-money-field { display: inline-flex; flex-direction: column; align-items: flex-end; }
.sale-compact-item .sale-parent-toggle { width: auto; min-width: 0; padding: 2px 6px; white-space: nowrap; }
#stockTakingSessionListContent .stock-taking-session-number-button { width: auto; min-width: 0; max-width: none; font-size: 12px; }
.ux-slip-identity { display: block; font-size: 12px; line-height: 1.5; white-space: normal; overflow: visible; text-overflow: clip; font-variant-numeric: tabular-nums; }
.supplier-list-name:has(.ux-slip-identity) { white-space: normal; overflow: visible; }
.dashboard-kpi-value { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-variant-numeric: tabular-nums; font-size: clamp(15px, 1.65vw, 24px); }
.dashboard-kpi-content { min-width: 0; overflow-x: auto; }
.ux-dashboard-details > summary, .ux-secondary-tools > summary, .ux-photo-section > summary, .ux-audit-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 0; }
.ux-dashboard-details:not([open]) { margin-bottom: 12px; }
.ux-photo-section { margin: 10px 0; border-block: 1px solid var(--border); }
.sale-label-with-info { display: flex; align-items: center; gap: 6px; margin: 10px 0 5px; }
.sale-label-with-info > label { flex: 1; min-width: 0; margin: 0; }
.sale-entry-info { position: relative; flex: 0 0 auto; }
.sale-entry-info > summary { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; list-style: none; cursor: pointer; color: var(--primary); font-size: 22px; border-radius: 50%; }
.sale-entry-info > summary::-webkit-details-marker { display: none; }
.sale-entry-info > summary:focus-visible { outline: 2px solid var(--focus, #2563eb); outline-offset: 2px; }
.sale-entry-info-content { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: min(320px, calc(100vw - 64px)); box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, #fff); color: var(--text); box-shadow: 0 4px 16px #0002; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.sale-entry-info-content > p { margin: 0; }
.sale-entry-info-content > p + p { margin-top: 8px; }

/* Fixed values are reference text, never input-shaped boxes. */
input.ui-reference-source, textarea.ui-reference-source, select.ui-reference-source { display: none !important; }
.ui-reference-value, .ui-fixed-value { display: block; min-width: 0; padding: 5px 0; margin: 0 0 8px; border: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; user-select: text; }
.ui-reference-value[hidden] { display: none !important; }
.ui-reference-value + .ux-money-preview { display: none; }
.screen-saleEntry.sale-entry-limited-edit #saleDate + .ui-reference-value,
.screen-saleEntry.sale-entry-limited-edit #saleCustomerSearch + .ui-reference-value { display: none !important; }
td > .ui-reference-value { margin: 0; }
.readonly-box { border: 0; border-radius: 0; padding: 4px 0; background: transparent; min-height: 0; }
.product-child-common-readonly-value { min-height: 0; padding: 5px 0; border: 0; border-radius: 0; background: transparent; }

/* In-flow help avoids clipping in tables, dialogs and narrow iPhone screens. */
body details.ui-info { display: block; width: auto; min-width: 0; margin: 4px 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
body details.ui-info[hidden] { display: none !important; }
body details.ui-info > summary { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 28px; padding: 0; list-style: none; color: var(--primary, #577080); cursor: pointer; font-size: 22px; font-weight: 400; line-height: 1; border-radius: 50%; }
body details.ui-info > summary::-webkit-details-marker { display: none; }
body details.ui-info > summary::before, body details.ui-info > summary::after { content: none; }
body details.ui-info > summary:focus-visible { outline: 2px solid var(--primary, #577080); outline-offset: 2px; }
.ui-info-content { padding: 8px 12px; margin: 4px 0; border-left: 2px solid var(--border); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
body details.ui-info:not([open]) > .ui-info-content { display: none; }
.ui-info-content > [data-ui-help] { margin: 0 !important; }
.ui-info-content p { margin: 0 0 6px; }
@media print { body details.ui-info { display: none; } }
.slip-product-focus-target { outline: 3px solid #f97316; outline-offset: -3px; scroll-margin-top: 160px; }
.slip-product-focus-target > td { background: #fff7ed !important; }
.ux-audit-details { margin: 6px 0; }
.ux-audit-details:has(> .slip-entry-audit-info[hidden]), .ux-audit-details:has(> .slip-entry-audit-info[style*="display: none"]) { display: none; }
.ux-product-compact-main { min-width: 0; flex: 1; }
.ux-product-compare { font-size: 12px; line-height: 1.5; color: var(--muted); white-space: normal; }
.ux-other-actions { position: relative; font-size: 12px; }
.ux-other-actions > summary { cursor: pointer; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; }
.ux-other-actions[open] { padding-bottom: 5px; }
.ux-other-actions button { margin-top: 5px; width: auto !important; }
.ux-modal-close, .selector-open-btn { width: auto !important; flex: 0 0 auto; min-width: 3.5em; white-space: nowrap; }
.sale-accounting-type-disclosure { width: auto; min-width: 0; height: auto; min-height: 28px; padding: 5px 8px; font-size: 12px; white-space: nowrap; }
.stock-adjustment-comparison { white-space: normal; line-height: 1.6; text-align: left; margin-top: 5px; }
.product-inquiry-field-value { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.product-inquiry-management-fields .product-inquiry-field-value { white-space: normal; overflow-wrap: anywhere; }
.ux-inquiry-stock { grid-column: 1 / -1; }
.ux-inquiry-stock .product-inquiry-field-value { white-space: normal; }
.ux-stock-location { display: inline-block; white-space: nowrap; }
.ux-sale-header-grid > div, .ux-sale-items, .ux-sale-sidebar { min-width: 0; }
.ux-print-overlay { position: fixed; inset: 0; padding: 12px; background: #0007; z-index: 100000; display: grid; place-items: center; }
.ux-print-dialog { width: min(100%, 440px); max-height: calc(100dvh - 24px); box-sizing: border-box; overflow: auto; background: var(--card, #fff); color: var(--text, #334155); padding: 20px; border-radius: 12px; box-shadow: 0 8px 32px #0003; }
.ux-print-dialog h3 { margin: 0 0 10px; }
.ux-print-dialog dl { display: grid; grid-template-columns: 5em 1fr; gap: 6px; font-size: 13px; }
.ux-print-dialog dd { margin: 0; overflow-wrap: anywhere; }
.ux-print-dialog .actions { display: flex; gap: 8px; margin-top: 12px; }
.ux-print-dialog .actions button { flex: 1; width: auto; }
.ux-print-destination { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
#saleMixTotals { position: sticky; top: 0; background: var(--card, #fff); white-space: pre-line; padding: 10px; font-weight: bold; font-variant-numeric: tabular-nums; border: 1px solid var(--border); }
#saleMixModal { z-index: 100000 !important; }
#saleMixModal > div { margin: 12px auto !important; width: calc(100% - 24px); max-width: 420px; max-height: calc(100dvh - 24px); box-sizing: border-box; overflow-y: auto; }
#saleMixModal .row { display: flex; flex-wrap: nowrap; gap: 6px; }
#saleMixModal .row button { width: auto; flex: 1; min-width: 0; padding: 6px; font-size: 12px; }

@media (min-width: 1050px) {
  body[data-current-screen="saleEntry"] main { max-width: 1360px; }
  .ux-sale-header-grid { display: grid; grid-template-columns: 150px minmax(180px, 1fr) minmax(220px, 1.4fr) 180px; gap: 12px; align-items: start; }
  .ux-sale-header-grid:has(#saleDate[hidden]), .ux-sale-header-grid:has(#saleDate[style*="display: none"]) { display: none; }
  .ux-sale-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
  .ux-sale-sidebar { border-left: 1px solid var(--border); padding-left: 16px; }
  .ux-sale-sidebar .total-box { margin-top: 0; }
  .ux-sale-sidebar .sale-total-main-row { font-size: 20px; }
  .ux-sale-sidebar .sale-category-total-row { font-size: 12px; }
  .ux-sale-sidebar .invoice-print-save-block { margin: 10px 0; }
  .ux-sale-sidebar .invoice-print-save-block button { min-width: 0; }
}

@media (max-width: 700px) {
  .dashboard-kpi-value { font-size: clamp(12px, 3.35vw, 16px); }
  .stock-selector-modal-header .ux-modal-close { padding: 5px 9px; font-size: 12px; }
  .stock-selector-table th:nth-child(1), .stock-selector-table td:nth-child(1) { width: 110px; white-space: nowrap; word-break: normal; padding-inline: 4px; font-size: 12px; }
  .stock-selector-table th:nth-child(2), .stock-selector-table td:nth-child(2) { width: 30px; padding-inline: 2px; }
  .stock-selector-table th:nth-child(4), .stock-selector-table td:nth-child(4) { width: 38px; }
  .product-inquiry-summary { grid-template-columns: 1fr; }
  .product-inquiry-summary > div:first-child { display: flex; gap: 8px; align-items: start; }
  .product-inquiry-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13px; }
  .ux-slip-button { width: auto !important; max-width: none !important; min-width: 0 !important; text-overflow: clip !important; white-space: nowrap !important; font-size: 12px; }
  table.ux-mobile-table { display: block; width: 100%; min-width: 0 !important; table-layout: auto; border: 0; }
  table.ux-mobile-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.ux-mobile-table > tbody { display: block; }
  table.ux-mobile-table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; padding: 6px; gap: 4px 8px; }
  table.ux-mobile-table > tbody > tr > td { display: block; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 3px 2px; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  table.ux-mobile-table > tbody > tr > td::before { content: attr(data-ux-label); display: block; color: var(--muted); font-size: 10px; }
  table.ux-mobile-table > tbody > tr > td:nth-child(-n+2), table.ux-mobile-table > tbody > tr > td.ux-table-expanded-cell { grid-column: 1 / -1; }
  table.ux-mobile-table > tbody > tr > td.right { white-space: nowrap; font-variant-numeric: tabular-nums; }
  table.ux-mobile-table button { width: auto; }
  table.ux-mobile-table .actions { flex-wrap: wrap; }
  .ux-table-expanded-cell::before { display: none !important; }
}
.ux-purchase-inline-content { border: 0; padding: 0; box-shadow: none; }
.ux-purchase-inline-content > .ux-purchase-repeated-header,
.ux-purchase-inline-content > .ux-purchase-repeated-photo { display: none; }

/* PC: compact 12-column home tiles and a persistent function menu above status. */
.desktop-function-nav { display: none; }
@media (min-width: 1000px) {
  #topMenuCard .home-menu-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
  #topMenuCard .home-menu-tile {
    aspect-ratio: auto; min-height: 82px; padding: 5px 3px; gap: 3px; border-radius: 7px;
  }
  #topMenuCard .home-menu-tile .home-menu-icon { font-size: 24px; }
  #topMenuCard .home-menu-label { font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
  html[data-app-theme="mii"] #topMenuCard .home-menu-tile--mii-image { padding: 5px 3px; }
  html[data-app-theme="mii"] #topMenuCard .home-menu-theme-image {
    position: static; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 7px;
  }
  html[data-app-theme="mii"] #topMenuCard .home-menu-tile--mii-image .home-menu-label {
    position: static; transform: none; width: 100%; min-height: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    white-space: normal; word-break: normal; overflow: visible; line-height: 1.25;
  }
  .desktop-function-nav:not([hidden]) {
    display: flex; flex-wrap: wrap; gap: 2px; padding: 3px 12px;
    position: relative; z-index: 10002; background: var(--card); border-bottom: 1px solid var(--border);
  }
  .desktop-nav-group { position: relative; }
  .desktop-function-nav button {
    width: auto; min-height: 30px; margin: 0; padding: 5px 10px; border: 0; border-radius: 4px;
    background: transparent; color: var(--text); box-shadow: none; font: inherit; font-size: 13px;
    line-height: 1.4; text-align: left;
  }
  .desktop-nav-category { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
  .desktop-nav-category::after { content: "▾"; font-size: 10px; color: var(--muted); }
  .desktop-function-nav button:hover, .desktop-function-nav button[aria-expanded="true"] {
    background: var(--primary-soft); color: var(--text);
  }
  .desktop-function-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .desktop-function-nav button:disabled { opacity: .5; cursor: not-allowed; }
  .desktop-nav-panel {
    position: absolute; top: calc(100% + 3px); left: 0; min-width: 200px; width: max-content;
    max-width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 180px); overflow-y: auto;
    list-style: none; margin: 0; padding: 5px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--card); box-shadow: 0 6px 18px #0002; box-sizing: border-box;
  }
  .desktop-nav-panel[hidden] { display: none; }
  .desktop-nav-panel .desktop-nav-item { width: 100%; min-height: 32px; white-space: normal; }
}
@media print { .desktop-function-nav:not([hidden]) { display: none; } }