/* Shared palette taken from the shop's original logo. */
.product-label-dialog { width: min(740px,calc(100vw - 20px)); padding: 0; overflow: hidden; scrollbar-gutter: auto; }
.product-label-dialog>.dialog-head { position: relative; top: auto; margin: 0; padding: 18px 22px; flex-shrink: 0; }
.product-label-dialog>.dialog-head h2 { margin: 0; font-size: 21px; }
.product-label-dialog>.dialog-head .close { min-width: 44px; min-height: 44px; }
.product-label-dialog>iframe { display: block; border: 0; width: 100%; height: min(72dvh,calc(92dvh - 84px),760px); background: var(--canvas); }
.product-qr-section { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 20px; align-items: center; padding: 18px; margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); }
.product-qr-section>img { width: 128px; height: 128px; background: white; image-rendering: pixelated; }
.product-qr-section h3 { margin: 0 0 8px; font-size: 15px; }
.product-qr-section strong { font-size: 13px; overflow-wrap: anywhere; }
.product-qr-section .unit-hint { font-size: 12px; color: #53656d; line-height: 1.6; }
.product-qr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.product-qr-actions a { min-height: 44px; font-size: 12px; }
@media(max-width:480px){.product-qr-section{grid-template-columns:minmax(0,1fr)}.product-qr-section>img{justify-self:center}}
/* Keep individual category choices distinct when hovered or selected. */
#category-options, #category-filter-options, #status-filter-options { padding: 6px; }
#category-options>button, #category-filter-options>button, #status-filter-options>button { border-radius: 6px; }
#category-options>button+button, #category-filter-options>button+button, #status-filter-options>button+button { margin-top: 5px; }
#category-filter-picker input { width: 100%; height: 44px; margin: 0; padding: 11px 46px 11px 12px; font-size: 13px; }
#category-filter-picker #category-filter-toggle { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; background: transparent; justify-content: center; }
#category-filter-picker .filter-value { display: none; }
#category-filter-picker .filter-arrow { position: static; padding: 0; } #status-filter-toggle .filter-arrow { position: absolute; inset: 0 -1px 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; padding: 0; }
#category-filter-options button { min-height: 44px; font-size: 14px; line-height: 1.5; }
#category-filter-options .picker-highlight { background: var(--selection-soft); color: var(--selection-ink); box-shadow: inset 3px 0 var(--selection); }
:root {
  --accent: #963639;
  --accent-hover: #7f292c;
  --accent-soft: #f8eeee;
  --accent-border: #d9aaac;
  --accent-shadow: #96363915;
  --accent-shadow-strong: #96363922;
  --focus: #ae5a5e;
  --ink: #26383d;
  --muted: #65747a;
  --canvas: #f5f6f7;
  --surface-subtle: #f8f9fa;
  --line: #e3e7e9;
  --hover: #f8f2f2;
  --edit-ink: #355d75;
  --edit-surface: #edf3f7;
  --edit-border: #c5d5df;
  --edit-hover: #dfeaf1;
  --save-surface: #35624f;
  --save-hover: #2a5141;
  --save-focus: #658d7b;
  --selection: #285e66;
  --selection-hover: #204d54;
  --selection-soft: #edf5f5;
  --selection-border: #b7d0d2;
  --selection-ink: #234f56;
  --selection-focus: #5f969d;
}

.logo { gap: 11px; color: var(--ink); letter-spacing: -.7px; flex-shrink: 0; }
.logo-image { display: block; width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; }
.logo>span { min-width: 0; }
.logo small { font-size: 9px; line-height: 1.5; letter-spacing: .4px; color: var(--muted); }
.logo b { color: var(--muted); }
.nav.active { background: var(--accent-soft); }
.sidebar .nav.active { color: var(--accent); }
.sidebar a.nav.active::after {
  content: "";
  display: block;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin: auto 0 auto auto;
  border-radius: 50%;
  background: var(--accent);
}
.sidebar .nav:not(.active):hover { background: var(--surface-subtle); color: var(--ink); }
.eyebrow, h1>span { color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:not(.primary):not(.danger):focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Edit is a separate action; shared .edit controls also include delete/upload/view. */
button.action-edit {
  color: var(--edit-ink);
  background: var(--edit-surface);
  border: 1px solid var(--edit-border);
  box-shadow: none;
}
button.action-edit:hover { color: #294d63; background: var(--edit-hover); border-color: #9fb9ca; }
button.action-edit:active { background: #d3e2ec; }
button.action-edit:focus-visible { outline: 2px solid #4b718c; outline-offset: 2px; }
.warehouse-card button.action-edit { padding-left: 10px; padding-right: 10px; }
.warehouse-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
button.action-track, button.action-receive {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid; border-radius: 7px; padding: 8px 11px;
  font-size: 12px; font-weight: 600; min-height: 34px; box-shadow: none;
}
button.action-track { color: var(--selection-ink); background: var(--selection-soft); border-color: var(--selection-border); }
button.action-track:hover { background: #dfecee; border-color: #8db5bb; }
button.action-receive { color: #315d48; background: #edf5ef; border-color: #bed5c6; }
button.action-receive:hover { background: #dcece1; border-color: #8ab49a; }
button.action-track::before, button.action-receive::before { content: ""; width: 17px; height: 17px; flex: 0 0 17px; background: center / 17px 17px no-repeat; }
button.action-track::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23285e66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='4' r='2'/%3E%3Ccircle cx='15' cy='16' r='2'/%3E%3Cpath d='M7 4h6a3 3 0 0 1 0 6H7a3 3 0 0 0 0 6h6'/%3E%3C/svg%3E"); }
button.action-receive::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23315d48' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v9m-3-3 3 3 3-3M3 10v7h14v-7M3 10l3-3m11 3-3-3'/%3E%3C/svg%3E"); }
.document-actions>button { min-height: 34px; vertical-align: middle; }
.document-actions>button+button { margin-inline-start: 8px; }
.document-actions>button.action-track, .document-actions>button.action-receive { padding: 7px 10px; font-size: 11px; }
/* Purchase tracking: current positions, a new movement, then audit history. */
#tracking-dialog { width: min(960px, 94vw); max-width: 960px; }
#tracking-dialog>.dialog-head { flex-wrap: wrap; gap: 12px; }
#tracking-dialog>.dialog-head>div:first-child { flex: 1; min-width: 0; }
#tracking-dialog .tracking-tabs { flex: 0 0 100%; padding: 0; margin: 4px 0 0; gap: 8px; }
#tracking-dialog .tracking-tabs>button { min-height: 40px; }
#tracking-dialog .tracking-tabs>button:disabled { cursor: not-allowed; }
#tracking-dialog [role="tabpanel"][hidden] { display: none; }
#tracking-dialog #tracking-form, #tracking-dialog .tracking-history-section { margin-top: 18px; }
#tracking-dialog #tracking-notice { padding: 10px 12px; margin: 12px 0; border-radius: 7px; color: var(--save-surface); background: #edf6f0; }
#tracking-notice:empty, #tracking-load-error:empty { display: none; }
@media(max-width:540px) { #tracking-dialog .tracking-tabs { gap: 5px; } #tracking-dialog .tracking-tabs>button { flex: 1; min-width: 0; padding: 8px 6px; font-size: 11px; line-height: 1.5; } } separately from its transaction status. */
.document-record-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 7px; }
.document-record-meta>small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.document-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.document-title-line>h2 { min-width: 0; overflow-wrap: anywhere; }
#detail-dialog>.dialog-head>div:first-child, #arrival-receipt-form>.dialog-head>div:first-child, #carrier-invoice-detail>.dialog-head>div:first-child { min-width: 0; flex: 1; }
@media(max-width:540px) { .document-title-line { gap: 8px; } .document-title-line>h2 { flex-basis: 100%; } }
.tracking-current-section>h3, #tracking-form>h3, .tracking-history-section>h3 { font-size: 16px; margin: 0 0 8px; }
#tracking-summary { max-height: none; overflow: visible; }
#tracking-summary .tracking-position { background: #fff; padding: 18px; margin: 14px 0; border-radius: 10px; }
.tracking-position-head>strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.tracking-position-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 16px 0 12px; }
.tracking-position-metric { padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); min-width: 0; }
.tracking-position-metric:last-child { background: var(--selection-soft); border-color: var(--selection-border); }
#tracking-summary .tracking-position-metric small { margin: 0 0 6px; line-height: 1.5; }
.tracking-position-metric strong { font-size: 16px; overflow-wrap: anywhere; }
.tracking-location-list { margin: 0; border-top: 1px solid var(--line); }
.tracking-location-list>div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0 0; font-size: 12px; }
.tracking-location-list dt { color: var(--muted); overflow-wrap: anywhere; }
.tracking-location-list dd { margin: 0; flex-shrink: 0; font-weight: 600; }
#tracking-form { background: var(--surface-subtle); padding: 20px; border: 1px solid var(--line); border-radius: 10px; margin-top: 24px; }
#tracking-items .tracking-item-row { background: #fff; padding: 16px; border-radius: 8px; margin: 16px 0 10px; }
.tracking-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tracking-row-head>strong { font-size: 12px; }
.tracking-item-row .tracking-quantity { grid-column: 1 / -1; width: 100%; max-width: 240px; }
#tracking-add-item { display: flex; margin: 12px 0 22px auto; color: var(--ink); }
.tracking-proof-heading { font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; margin: 0 0 16px; }
.tracking-history-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
#tracking-events .tracking-document { background: #fff; border-left: 3px solid var(--selection-border); padding: 16px; }
#tracking-events .tracking-event { background: var(--surface-subtle); }
.tracking-event>strong { font-size: 13px; line-height: 1.6; }
#tracking-events .tracking-event-route { padding: 9px 11px; background: #fff; border-radius: 6px; color: var(--selection-ink); }
#tracking-events .tracking-event-quantity { display: inline-block; font-weight: 700; color: var(--ink); margin-right: 12px; }
.tracking-event>small { display: block; margin: 10px 0; }
@media(max-width:720px) { .tracking-position-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .tracking-position-metric:first-child { grid-column: 1 / -1; } #tracking-form, #tracking-summary .tracking-position { padding: 14px; } .tracking-item-row .tracking-quantity { max-width: none; } }
.product-detail-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; font-size: 12px; color: var(--muted); }
.product-detail-summary>.badge{ display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 5px 9px; margin: 0; box-sizing: border-box; font-size: 10px; line-height: 16px; }
.product-detail-section { border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 14px 0; background: #fff; }
.product-detail-section h3 { margin: 0 0 16px; font-size: 14px; color: var(--ink); }
.product-stock-summary, #product-detail-content .supply-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.stock-metric, #product-detail-content .supply-summary-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-subtle); min-width: 0; }
.stock-metric small, #product-detail-content .supply-summary-card small { display: block; font-size: 11px; color: var(--muted); line-height: 1.6; }
.stock-metric strong, #product-detail-content .supply-summary-card strong { display: block; margin-top: 8px; font-size: 19px; color: var(--ink); overflow-wrap: anywhere; }
.stock-metric-free { background: var(--selection-soft); border-color: var(--selection-border); }
.stock-metric-free strong { color: var(--selection-ink); }
#product-detail-content .product-supply-section { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; }
#product-detail-content .product-supply-section>h3 { font-size: 15px; }
#product-detail-content .warehouse-detail-table { margin-top: 14px; }
.product-placement-history { border: 1px solid var(--line); border-radius: 9px; padding: 14px; margin-top: 22px; }
.product-placement-history summary { cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 600; }
.product-placement-history>p { margin-top: 12px; }
@media(max-width:540px) { .product-stock-summary, #product-detail-content .supply-summary { grid-template-columns: 1fr; } .stock-metric { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .stock-metric strong { margin: 0; } }
.product-detail-section .product-detail-grid { margin: 0; gap: 18px 22px; }
#product-detail-content>.warehouse-detail-stock { margin-top: 22px; }
#product-detail-content .product-stock-total { background: var(--selection-soft); color: var(--selection-ink); padding: 12px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; margin: 12px 0; }
.warehouse-card .warehouse-card-actions>.edit { margin: 0; padding: 7px 10px; }
/* A muted green confirmation action, independent of the primary brand color. */
button.primary.action-save {
  background: var(--save-surface);
  border-color: var(--save-surface);
  color: #fff;
  border-radius: 8px;
  gap: 9px;
  box-shadow: inset 0 1px 0 #ffffff18, 0 2px 4px #25493914;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
button.primary.action-save::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 5px;
  background: #ffffff17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 10 3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
button.primary.action-save:hover { background: var(--save-hover); border-color: var(--save-hover); }
button.primary.action-save:active { background: #234536; box-shadow: inset 0 1px 3px #18342633; }
button.primary.action-save:focus-visible { outline: 2px solid var(--save-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { button.primary.action-save { transition: none; } }
/* Selected navigation is distinct from brand actions and save/delete controls. */
:is(.stock-tabs>button, #orders-tab, #receipts-tab, #cashier-tab, #history-tab, #balance-tab, #procurement-mode, #invoice-mode).selected-option {
  color: #fff;
  background: var(--selection);
  border-color: var(--selection);
  box-shadow: none;
}
:is(.stock-tabs>button, #orders-tab, #receipts-tab, #cashier-tab, #history-tab, #balance-tab, #procurement-mode, #invoice-mode).selected-option:hover {
  color: #fff;
  background: var(--selection-hover);
  border-color: var(--selection-hover);
}
:is(.stock-tabs>button, #orders-tab, #receipts-tab, #cashier-tab, #history-tab, #balance-tab, #procurement-mode, #invoice-mode):not(.selected-option):hover {
  color: var(--selection-ink);
  background: var(--selection-soft);
  border-color: var(--selection-border);
}
:is(.stock-tabs>button, #orders-tab, #receipts-tab, #cashier-tab, #history-tab, #balance-tab, #procurement-mode, #invoice-mode):focus-visible,
.sale-cart-tab:focus-visible { outline: 2px solid var(--selection-focus); outline-offset: 3px; }
.sale-cart-tab.selected-option {
  color: var(--selection-ink);
  background: var(--selection-soft);
  border-color: var(--selection-border);
  box-shadow: none;
}
.sale-cart-tab.selected-option .sale-cart-number,
.sale-cart-tab.selected-option small { color: #4d6a70; }
.sidebar .nav.active, .mobile-navigation .nav.active {
  color: var(--selection-ink);
  background: var(--selection-soft);
  box-shadow: inset 3px 0 0 var(--selection);
}
.note-brand-logo { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto 12px; }
.note-item-amounts { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.note-item-amounts>p { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.note-item-amounts>strong { flex-shrink: 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sale-note .note-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px dashed var(--line); padding-top: 12px; margin: 14px 0 10px; }
.note-total>strong { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sale-note .note-payment-heading { font-weight: 600; margin: 0 0 5px; }
.note-payment-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; line-height: 1.6; }
.note-payment-row>span:last-child { flex-shrink: 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.note-payment-summary { border-top: 1px dotted var(--line); margin-top: 6px; padding-top: 6px; }
.cart-sync-status { margin: 0 24px 16px; padding: 9px 12px; border-radius: 6px; background: var(--surface-subtle); color: var(--muted); font-size: 11px; }
.cart-sync-status[data-state="error"] { color: #805c12; background: #fff8e7; }
@media (max-width: 720px) { .cart-sync-status { margin-left: 16px; margin-right: 16px; } }

/* The large login panel uses charcoal, keeping red to small accents. */
.login-page .brand-panel { background: #26383d; }
.login-page .brand-image { display: block; width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; }
.login-page .brand { gap: 14px; }
.login-page .light { color: #d6dfe1; }
.login-page .brand-copy>.eyebrow { color: #e0b9bb; }
.login-page .brand-copy p { color: #cad4d7; }
.login-page .brand-foot { color: #a9b9bd; }
.login-page .lines span { border-color: #ffffff24; background: linear-gradient(#ba737544, #26383d00); }
.login-page .lines span:nth-child(5) { background: linear-gradient(#ba73757a, #26383d00); }
.login-page .local-tag { color: var(--muted); background: #fff; }
.login-page .form-content .eyebrow { color: var(--accent); }
.login-page .form-content>p { color: var(--muted); }
.login-page .password-field button { color: var(--muted); }

@media (max-width: 1100px) and (min-width: 721px) {
  .logo { font-size: 20px; gap: 9px; }
  .logo-image { width: 48px; height: 48px; flex-basis: 48px; }
}
@media (max-width: 720px) {
  .logo-image { width: 48px; height: 48px; flex-basis: 48px; }
  .sidebar { min-height: 80px; }
  .logo small { font-size: 9px; }
}
@media (max-width: 570px) {
  .login-page .brand-image { width: 56px; height: 56px; }
  .login-page .brand-panel { padding: 18px 25px; }
  .login-page .form-panel { min-height: calc(100dvh - 92px); }
}
@media print {
  #receipt-print-settings { display: none !important; }
  .note-brand-logo { width: 64px; height: 64px; break-inside: avoid; }
  .note-item-amounts { gap: 2mm; }
  .note-item-amounts>strong { font-size: 10px; }
  .sale-note .note-total { padding-top: 2mm; margin: 2mm 0; font-size: 12px; }
  .note-payment-row { font-size: 10px; gap: 2mm; }
}
.receipt-print-settings fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 18px 0; min-width: 0; }
.receipt-print-settings legend { font-weight: 600; font-size: 13px; padding: 0 6px; }
.receipt-offset-control { display: block; margin: 18px 0 8px; font-weight: 600; }
.receipt-offset-control input { display: block; width: min(100%, 180px); margin-top: 8px; font-variant-numeric: tabular-nums; }
.receipt-quality-options { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.receipt-quality-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.direct-print-guide { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 18px 0; background: var(--surface-subtle, #f5f6f7); }
.direct-print-guide h3 { margin: 0 0 10px; font-size: 14px; }
.direct-print-guide p { font-size: 12px; line-height: 1.7; }
.direct-print-guide p+p { margin-top: 8px; }
.receipt-print-settings .check { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 13px; }
.android-print-guide { background: var(--canvas, #f5f6f7); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 18px 0; }
.android-print-guide h3 { margin: 0 0 10px; font-size: 14px; }
.android-print-guide p, .android-print-guide li { font-size: 12px; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.android-print-guide ol { margin: 12px 0; padding-left: 20px; }
.android-print-guide li { margin-bottom: 9px; }
.android-print-guide a { color: var(--accent); }
.thermal-preview-dialog { width: min(530px, 94vw); }
@media screen {
  .thermal-preview-stage { background: #edf0f2; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 14px; }
  .thermal-paper-ruler { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; max-width: 464px; margin: 0 auto 8px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .thermal-paper-ruler>span:first-child, .thermal-paper-ruler>span:last-child { position: relative; padding-bottom: 5px; }
  .thermal-paper-ruler>span:first-child::after, .thermal-paper-ruler>span:last-child::after { content: ''; position: absolute; bottom: -7px; left: 0; height: 8px; border-left: 1px solid #879399; }
  .thermal-paper-ruler>span:last-child::after { left: auto; right: 0; }
  .thermal-preview-paper { position: relative; width: 100%; max-width: 464px; margin: 0 auto; padding: 0; overflow: hidden; background: #fff; box-shadow: 0 2px 8px #26383d18; }
  .thermal-preview-paper img { position: relative; left: var(--thermal-screen-left, 8.62069%); display: block; width: var(--thermal-screen-width, 82.758621%); max-width: none; height: auto; margin: 0; padding: 0; background: #fff; image-rendering: pixelated; }
  #thermal-paper-summary { margin-top: 10px; line-height: 1.7; }
}
.thermal-preview-paper img[hidden] { display: none; }
#thermal-preview-dialog[data-computer-quality="smooth"] .thermal-preview-paper img { image-rendering: auto; }
.receipt-print-link { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; text-decoration: none; font-size: 12px; font-weight: 600; }
.receipt-print-link.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.receipt-print-link[hidden] { display: none; }
#note-dialog .dialog-actions { flex-wrap: wrap; }
#note-dialog .dialog-actions [hidden], .receipt-native-status[hidden] { display: none; }
.receipt-native-status { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); }
.receipt-native-status p { margin: 0; color: #53656d; font-size: 12px; line-height: 1.6; }
.receipt-native-status p.error { color: #9b3434; }
#note-dialog .receipt-print-link { min-height: 42px; font-size: 13px; }
#thermal-preview-dialog .dialog-actions { flex-wrap: wrap; }
@media screen {
  dialog { --dialog-inset: 28px; scroll-padding-block-start: calc(var(--dialog-inset) + 72px); }
  dialog .dialog-head {
    position: sticky;
    top: calc(-1 * var(--dialog-inset));
    z-index: 20;
    margin: calc(-1 * var(--dialog-inset)) calc(-1 * var(--dialog-inset)) 18px;
    padding: var(--dialog-inset) var(--dialog-inset) 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 6px 10px -10px #26383d55;
  }
  dialog .dialog-head .close { flex-shrink: 0; align-self: flex-start; min-width: 36px; min-height: 36px; }
  dialog.image-preview-dialog { --dialog-inset: 18px; }
}
@media screen and (max-width: 720px) {
  dialog { --dialog-inset: 22px; }
  dialog.image-preview-dialog { --dialog-inset: 18px; }
}
@media print {
  .sale-note, .sale-note * { color: #000 !important; border-color: #000 !important; }
  body[data-thermal-print-ready="true"]>dialog#note-dialog { display: none !important; }
  body[data-thermal-print-ready="true"]>dialog#thermal-preview-dialog {
    display: block !important; visibility: visible !important; position: absolute;
    /* Physical roll frame; per-device horizontal calibration applies to the
       image only. The driver still determines the actual printable area. */
    left: 0; right: auto; top: 0; margin: 0; padding: 0; width: 58mm;
    box-sizing: border-box; max-width: 100%; height: auto; max-height: none;
    border: 0; box-shadow: none; overflow: visible; scrollbar-gutter: auto;
    background: #fff; color: #000;
  }
  body[data-thermal-print-ready="true"] #thermal-preview-dialog * { visibility: visible !important; }
  body[data-thermal-print-ready="true"] #thermal-preview-dialog .no-print { display: none !important; }
  body[data-thermal-print-ready="true"] .thermal-preview-paper { width: 48mm; max-width: 100%; padding: 0; margin: 0 auto; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
  body[data-thermal-print-ready="true"] .thermal-preview-paper img { display: block; width: 44mm; max-width: 100%; height: auto; margin: 0 auto; padding: 0; border: 0; box-shadow: none; image-rendering: pixelated; print-color-adjust: exact; -webkit-print-color-adjust: exact; transform: translateX(var(--thermal-print-offset, 0mm)); }
  body[data-thermal-print-ready="true"] #thermal-preview-dialog[data-browser-width="46"] .thermal-preview-paper img { width: 46mm; }
  body[data-thermal-print-ready="true"] #thermal-preview-dialog[data-browser-width="48"] .thermal-preview-paper img { width: 48mm; }
  body[data-thermal-print-ready="true"] #thermal-preview-dialog[data-computer-quality="smooth"] .thermal-preview-paper img { image-rendering: auto; }
}

/* Product stock views share data; changing tabs only changes visibility. */
.product-stock-area { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
#product-detail-content .product-stock-tabs { padding: 0 0 16px; margin: 0; gap: 8px; }
.product-stock-tabs>button { flex: 1; min-width: 0; min-height: 42px; white-space: normal; line-height: 1.5; padding: 10px 12px; }
#product-detail-content .product-stock-panel { margin: 0; padding: 0; border: 0; border-radius: 0; }
#product-detail-content .product-stock-panel[hidden] { display: none; }
.product-stock-panel>h3 { margin: 0 0 10px; font-size: 15px; }
.product-stock-panel>.unit-hint { margin: 0 0 14px; }
#product-detail-content .product-stock-panel .warehouse-detail-table { max-height: none; }
.product-stock-panel:focus-visible { outline: 2px solid var(--selection-focus); outline-offset: 4px; }
@media(max-width:540px) { #product-detail-content .product-stock-tabs { gap: 6px; } .product-stock-tabs>button { padding: 8px 6px; font-size: 11px; min-height: 48px; } }

/* PO references open the purchase document in a separate browser tab. */
.supply-po-link { text-decoration: none; }
.supply-po-new-tab { display: inline-block; margin-left: 5px; font-size: 11px; font-weight: 400; color: var(--muted); }

/* Purchase document: clear summary with focused, persistent tab panels. */
#detail-dialog { width: min(960px, 94vw); max-width: 960px; }
#detail-dialog>.dialog-head { flex-wrap: wrap; gap: 12px; }
#detail-dialog .po-detail-tabs { flex: 0 0 100%; padding: 0; margin: 4px 0 0; gap: 8px; }
#detail-dialog .po-detail-tabs>button { min-height: 40px; padding: 10px 18px; }
#document-detail-tabs[hidden], #detail-content .po-detail-panel[hidden], #document-detail-actions[hidden] { display: none; }
.po-overview { border: 1px solid var(--line); background: var(--surface-subtle); border-radius: 10px; padding: 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px 20px; margin-bottom: 24px; }
.po-supplier, .po-overview-status { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.po-overview small, .po-item-card small { font-size: 11px; color: var(--muted); line-height: 1.6; }
.po-supplier>strong { font-size: 16px; overflow-wrap: anywhere; }
.po-status { display: inline-flex; padding: 5px 9px; font-size: 11px; font-weight: 600; border-radius: 6px; color: var(--selection-ink); background: var(--selection-soft); border: 1px solid var(--selection-border); }
.po-status-cancelled { background: #fbefef; color: #944146; border-color: #e4c8ca; }
.po-metadata { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 0; }
.po-metadata>div { min-width: 0; }
.po-metadata dt { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.po-metadata dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.po-overview-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.po-overview-metrics>div { min-width: 0; }
.po-overview-metrics small, .po-overview-metrics strong { display: block; }
.po-overview-metrics strong { font-size: 19px; margin-top: 6px; overflow-wrap: anywhere; }
.po-overview-metrics>div:first-child strong { color: var(--selection-ink); }
#detail-content .po-detail-panel>h3 { font-size: 16px; margin: 0 0 8px; }
.po-detail-panel>.unit-hint { margin: 0 0 18px; line-height: 1.7; }
.po-item-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 14px 0; }
.po-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.po-item-identity { min-width: 0; }
.po-item-identity>strong { display: block; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.po-item-identity>small { display: block; margin-top: 6px; }
.po-item-value { flex-shrink: 0; text-align: right; }
.po-item-value>small, .po-item-value>strong { display: block; }
.po-item-value>strong { font-size: 15px; margin-top: 5px; }
.po-item-quantities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.po-item-quantities>div { background: var(--surface-subtle); border-radius: 7px; padding: 10px 12px; min-width: 0; }
.po-item-quantities small, .po-item-quantities strong { display: block; }
.po-item-quantities strong { font-size: 15px; margin-top: 6px; overflow-wrap: anywhere; }
.po-unit-price { margin: 12px 0 0; font-size: 11px; color: var(--muted); }
.po-note, .po-cancel-note { border-radius: 8px; padding: 14px; margin: 18px 0; background: var(--surface-subtle); }
.po-note h4 { margin: 0 0 8px; font-size: 12px; }
.po-note p, .po-cancel-note p { font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.po-cancel-note { background: #fbefef; color: #944146; }
.po-cancel-note>strong, .po-cancel-note>small { display: block; margin: 6px 0; }
.po-documents-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#detail-content .po-documents-grid>:is(.supplier-po-section,.supplier-payment-section) { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
#detail-content .po-documents-grid h3 { font-size: 14px; margin: 0 0 12px; }
.po-documents-grid :is(.supplier-po-section,.supplier-payment-section) p { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.po-documents-grid input[type=file] { max-width: 100%; }
.po-documents-grid .po-carrier-invoices { grid-column: 1 / -1; }
.po-invoice-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 10px; text-align: left; white-space: normal; }
.po-invoice-identity { min-width: 0; }
.po-invoice-identity strong, .po-invoice-identity small { display: block; overflow-wrap: anywhere; }
.po-invoice-link>.badge { flex-shrink: 0; }
.po-process-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 16px 0; }
.po-process-heading, .po-receipt-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.po-process-heading h4 { font-size: 14px; margin: 0; }
.po-process-card>.unit-hint { line-height: 1.7; margin: 10px 0 0; }
.po-receipt-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-top: 14px; background: var(--surface-subtle); }
.po-receipt-card p { font-size: 12px; margin: 8px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.po-empty { font-size: 12px; color: var(--muted); padding: 12px; background: var(--surface-subtle); border-radius: 7px; }
#detail-content>.po-audit { font-size: 10px; color: var(--muted); margin: 20px 0 0; }
.po-detail-panel:focus-visible { outline: 2px solid var(--selection-focus); outline-offset: 4px; }
@media(max-width:720px) { .po-documents-grid { grid-template-columns: 1fr; } }
@media(max-width:540px) {
 #detail-dialog .po-detail-tabs>button { flex: 1; min-width: 0; padding: 9px 6px; font-size: 11px; }
 .po-overview { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
 .po-overview-status { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
 .po-overview-metrics { grid-template-columns: 1fr; }
 .po-overview-metrics>div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .po-overview-metrics strong { font-size: 17px; margin: 0; }
 .po-item-card, .po-process-card { padding: 14px; }
 .po-item-head { flex-direction: column; gap: 12px; }
 .po-item-value { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .po-item-value>strong { margin: 0; }
 .po-item-quantities { gap: 6px; }
 .po-item-quantities>div { padding: 9px 7px; }
 .po-item-quantities small { font-size: 10px; }
 .po-item-quantities strong { font-size: 13px; }
}

/* Product catalog keeps everyday work above the fold. */
.product-catalog-page .content { padding-top: 30px; }
.product-catalog-page .intro { gap: 18px; margin-bottom: 20px; }
.product-catalog-page h1 { font-size: 32px; margin-top: 8px; }
.product-catalog-page .intro p { margin-bottom: 0; }
.product-catalog-page .product-header-actions { align-items: center; flex-shrink: 0; gap: 8px; }
.product-catalog-page #add-product { background: #fff; color: var(--ink); border-color: var(--selection-border); font-weight: 600; }
.product-catalog-page #add-product:hover { background: var(--selection-soft); }
.catalog-settings { position: relative; font-size: 12px; }
.catalog-settings>summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; padding: 11px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); white-space: nowrap; }
.catalog-settings>summary::-webkit-details-marker { display: none; }
.catalog-settings>summary:hover { background: var(--surface-subtle); }
.catalog-settings>summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.catalog-settings[open]>summary { border-color: var(--selection-border); }
.catalog-settings-options { position: absolute; right: 0; top: calc(100% + 7px); min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 8px 24px #26383d16; z-index: 25; }
.catalog-settings:not([open])>.catalog-settings-options { display: none; }
.catalog-settings-options>button { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: 11px 12px; font-size: 12px; }
.catalog-settings-options>button:hover { background: var(--surface-subtle); }
.product-catalog-page .catalog-stats { gap: 12px; margin: 0 0 20px; }
.product-catalog-page .catalog-stats>article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; min-width: 0; }
.product-catalog-page .catalog-stats>article::after { display: none; }
.product-catalog-page .catalog-stats>article>span { font-size: 12px; margin: 0; line-height: 1.5; }
.product-catalog-page .catalog-stats strong { font-size: 25px; margin: 0; line-height: 1.2; }
.product-catalog-page .catalog>.section-head { padding: 18px 24px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
.product-catalog-page .catalog>.section-head p { margin-top: 5px; margin-bottom: 0; }
.catalog-filter-label { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 7px; }
.product-catalog-page .catalog>.filters { padding-bottom: 14px; }
.product-catalog-page .catalog-search-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 16px; }
.product-catalog-page .catalog-search-row>.search { flex: 1 1 220px; min-width: 0; width: auto; }
#reset-product-filters { font-size: 12px; padding: 10px 12px; min-height: 42px; color: var(--selection-ink); border-color: var(--selection-border); }
#reset-product-filters[hidden] { display: none; }
.product-catalog-page .catalog-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.product-catalog-page .catalog-product-actions { width: 96px; white-space: nowrap; }
.product-more-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); font-size: 22px; color: var(--muted); border-radius: 7px; line-height: 1; }
.product-more-button[aria-expanded=true] { background: var(--surface-subtle); border-color: var(--selection-border); color: var(--selection-ink); }
.product-row-menu { position: fixed; width: 180px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 8px 24px #26383d20; z-index: 50; }
.product-row-menu[hidden] { display: none; }
.product-row-menu>button { display: block; width: 100%; border: 0; text-align: left; font-size: 12px; padding: 11px 12px; color: #98464b; border-radius: 5px; }
.product-row-menu>button:hover, .product-row-menu>button:focus-visible { background: #fbefef; }
.product-catalog-page .scope-note { margin-top: 18px; }
@media(max-width:850px) { .product-catalog-page .intro { flex-wrap: wrap; } }
@media(max-width:720px) {
 .product-catalog-page .content { padding-top: 24px; }
 .product-catalog-page h1 { font-size: 28px; }
 .product-catalog-page .product-header-actions { width: 100%; }
 .product-catalog-page .product-header-actions>#add-product { flex: 1; }
 .catalog-settings { flex: 1; min-width: 0; }
 .catalog-settings>summary { padding: 11px 10px; gap: 7px; font-size: 11px; }
 .catalog-settings-options { min-width: 180px; }
 .product-catalog-page .catalog-stats { gap: 8px; }
 .product-catalog-page .catalog-stats>article { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
 .product-catalog-page .catalog-stats>article>span { font-size: 10px; }
 .product-catalog-page .catalog-stats strong { font-size: 22px; }
 .product-catalog-page .catalog>.section-head { padding: 18px 16px; }
 .product-catalog-page .catalog-search-row { padding-bottom: 16px; }
 .product-catalog-page #reset-product-filters { margin-left: auto; }
}
.product-catalog-page .catalog>.filters .filter-toggle { height: 44px; }

#thermal-preview-dialog [hidden] { display: none; }
@media screen {
 #thermal-preview-dialog[data-preview-target=direct] .thermal-browser-help,
 #thermal-preview-dialog[data-preview-target=rawbt] .thermal-browser-help { display: none; }
}
#thermal-send[aria-disabled=true] { opacity: .6; cursor: default; }
#thermal-hml-send[aria-disabled=true] { opacity: .6; cursor: default; }
.receipt-local-mode[hidden],.receipt-queue-mode[hidden],.android-local-guide[hidden],.direct-print-guide[hidden] { display: none; }
.android-local-guide { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #f8fafb; margin: 16px 0; }
.android-local-guide h3 { font-size: 14px; margin-bottom: 10px; }
.android-local-guide p { font-size: 12px; line-height: 1.7; margin-bottom: 12px; }
.printer-target-control { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.printer-target-caption { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.printer-target-picker { position: relative; }
.printer-target-picker>button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; font-weight: 400; }
.printer-target-picker>button>span:first-child { min-width: 0; overflow-wrap: anywhere; }
.printer-target-options { width: 100%; max-height: 240px; overflow-y: auto; z-index: 5; }
.printer-target-options button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; width: 100%; }
.printer-target-options small { font-size: 11px; color: var(--muted); }
.printer-target-options[hidden], .printer-pairing[hidden], #thermal-printer-target[hidden] { display: none; }
.printer-manage-button { margin-top: 10px; }
.printer-manager-dialog { width: min(680px,calc(100vw - 36px)); }
.printer-manager-list { display: grid; gap: 12px; margin: 18px 0 24px; }
.printer-device-card { display: flex; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.printer-device-card strong,.printer-device-card small { display: block; overflow-wrap: anywhere; }
.printer-device-card small { margin-top: 5px; color: var(--muted); }
.printer-state { display: inline-flex; margin-top: 8px; border-radius: 6px; padding: 5px 8px; font-size: 11px; background: #edf0f2; color: #52616b; }
.printer-state.is-online { background: #e9f4ed; color: #2e6149; }
.printer-device-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.printer-pairing { background: #f3f6f8; border: 1px solid #d7e0e6; padding: 18px; border-radius: 10px; margin: 18px 0; }
.printer-pairing h3 { font-size: 15px; margin-bottom: 12px; }
.printer-pairing p,.printer-pairing li { font-size: 12px; line-height: 1.7; }
.printer-pairing ol { padding-left: 20px; margin: 12px 0; }
.printer-pair-code { display: block; font: 600 20px monospace; letter-spacing: 1px; overflow-wrap: anywhere; margin: 12px 0; color: #354d5c; }
.printer-manager-footer { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
@media (max-width:600px) { .printer-device-card { flex-direction: column; }.printer-device-actions { justify-content: flex-start; }.printer-pair-code { font-size: 17px; } }
@media screen {
  #receipt-print-settings:not([data-print-mode="direct"]) .receipt-printer-destination,
  #receipt-print-settings:not([data-print-mode="direct"]) .direct-print-guide,
  #receipt-print-settings:not([data-print-mode="winlocal"]) .windows-local-guide,
  #receipt-print-settings:not([data-print-mode="local"]) .android-local-guide,
  #receipt-print-settings:not([data-print-mode="browser"]) .receipt-browser-calibration,
  #receipt-print-settings:not([data-print-mode="rawbt"]) .android-print-guide > ol,
  #receipt-print-settings:not([data-print-mode="rawbt"]) .android-print-guide > fieldset,
  #receipt-print-settings:not([data-print-mode="rawbt"]) .android-print-guide > h3,
  #receipt-print-settings:not([data-print-mode="rawbt"]) .android-print-guide > p:not(.unit-hint),
  #thermal-preview-dialog[data-preview-target="winlocal"] .thermal-browser-help,
  #thermal-preview-dialog[data-preview-target="local"] .thermal-browser-help { display: none; }
}
/* Catalog readability; the same product rows become cards on narrow screens. */
.product-catalog-page .intro p, .product-catalog-page .catalog>.section-head p { color: #5c6d74; }
.product-catalog-page .catalog th { font-size: 11px; letter-spacing: .45px; color: #53656d; padding: 15px 16px; }
.product-catalog-page .catalog td { font-size: 13px; padding: 18px 16px; }
.product-catalog-page .product-name-link { font-size: 14px; line-height: 1.55; }
.product-catalog-page .product-cell>div { min-width: 0; }
.product-catalog-page .product-cell small { font-size: 12px; color: #5c6d74; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; margin-top: 5px; }
.product-catalog-page .catalog-filter-label { font-size: 12px; color: #53656d; }
.product-catalog-page .filter-toggle, .product-catalog-page #search { font-size: 13px; }
.product-catalog-page #search::placeholder { color: #64757c; }
.product-catalog-page .catalog .table-footer { font-size: 12px; color: #5c6d74; }
.product-catalog-page .catalog-price-heading, .product-catalog-page :is(.catalog-product-buy,.catalog-product-sell) { text-align: right; }
.product-catalog-page .catalog-row-actions>.action-edit { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.catalog-filter-tools, .catalog-cell-label { display: none; }
.product-catalog-page .catalog>#catalog-filter-panel[hidden] { display: none; }
@media screen and (max-width:1000px) {
  .product-catalog-page .content { padding-top: 20px; }
  .product-catalog-page .intro { margin-bottom: 16px; gap: 12px; flex-direction: column; align-items: stretch; }
  .product-catalog-page .intro>div>p { display: none; }
  .product-catalog-page h1 { font-size: 28px; margin-bottom: 4px; }
  .product-catalog-page .product-header-actions { width: 100%; }
  .product-catalog-page .product-header-actions>#add-product { flex: 1; min-height: 44px; }
  .product-catalog-page .catalog-settings { flex: 1; min-width: 0; }
  .product-catalog-page .catalog-settings>summary { min-height: 44px; font-size: 12px; }
  .product-catalog-page .catalog-stats { gap: 8px; margin-bottom: 16px; }
  .product-catalog-page .catalog-stats>article { flex-direction: column; align-items: flex-start; padding: 10px; gap: 5px; }
  .product-catalog-page .catalog-stats>article>span { font-size: 11px; color: #53656d; }
  .product-catalog-page .catalog-stats strong { font-size: 21px; }
  .product-catalog-page .catalog>.section-head { padding: 16px; }
  .product-catalog-page .catalog>.section-head h2 { font-size: 16px; }
  .product-catalog-page .catalog>.section-head p { display: none; }
  .product-catalog-page .catalog>.section-head .button { min-height: 40px; font-size: 12px; }
  .catalog-filter-tools { display: flex; gap: 12px; align-items: center; padding: 0 16px 12px; }
  #toggle-catalog-filters { min-height: 44px; flex: 0 0 auto; padding: 10px 12px; font-size: 13px; }
  #toggle-catalog-filters[aria-expanded=true] { background: var(--selection-soft); border-color: var(--selection-border); color: var(--selection-ink); }
  #toggle-catalog-filters[aria-expanded=true] .catalog-filter-chevron { transform: rotate(180deg); }
  .catalog-filter-count { font-size: 11px; padding: 3px 6px; background: var(--selection-soft); color: var(--selection-ink); border-radius: 5px; }
  .catalog-filter-count[hidden] { display: none; }
  #catalog-filter-summary { min-width: 0; overflow-wrap: anywhere; color: #5c6d74; font-size: 12px; line-height: 1.5; }
  .product-catalog-page .catalog>#catalog-filter-panel { grid-template-columns: 1fr; gap: 12px; margin: 0 16px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-subtle); }
  .product-catalog-page .catalog-search-row { padding: 0 16px 16px; }
  .product-catalog-page .catalog-search-row>.search { flex-basis: 100%; }
  .product-catalog-page .catalog-product-list { overflow: visible; }
  .product-catalog-page .catalog-product-list table { display: block; width: 100%; white-space: normal; }
  .product-catalog-page .catalog-product-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .product-catalog-page #products { display: grid; gap: 12px; padding: 0 16px 16px; }
  .product-catalog-page #products>tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: 'identity identity' 'category status' 'buy sell' 'actions actions'; gap: 14px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; }
  .product-catalog-page #products>tr>td { display: block; border: 0; padding: 0; min-width: 0; white-space: normal; }
  .product-catalog-page .catalog-product-identity { grid-area: identity; }
  .product-catalog-page .product-cell { align-items: flex-start; gap: 12px; }
  .product-catalog-page .product-icon { flex: 0 0 44px; width: 44px; height: 48px; }
  .product-catalog-page .product-name-link { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .product-catalog-page .product-cell small { font-size: 12px; }
  .product-catalog-page .catalog-product-category { grid-area: category; align-self: center; }
  .product-catalog-page .catalog-product-status { grid-area: status; justify-self: end; align-self: center; }
  .product-catalog-page .catalog-product-status .badge { display: inline-flex; align-items: center; min-height: 26px; font-size: 11px; padding: 5px 9px; }
  .catalog-cell-label { display: block; font-size: 12px; line-height: 1.5; color: #5c6d74; margin-bottom: 4px; font-weight: 400; }
  .product-catalog-page .catalog-product-buy { grid-area: buy; text-align: left; }
  .product-catalog-page .catalog-product-sell { grid-area: sell; text-align: left; }
  .product-catalog-page :is(.catalog-product-buy,.catalog-product-sell) { border-top: 1px solid var(--line)!important; padding-top: 12px!important; }
  .product-catalog-page :is(.catalog-product-buy,.catalog-product-sell) .catalog-cell-value { display: block; font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .product-catalog-page .catalog-product-actions { grid-area: actions; width: auto; padding-top: 2px!important; }
  .product-catalog-page .catalog-row-actions { justify-content: stretch; gap: 8px; }
  .product-catalog-page .catalog-row-actions>.action-edit { flex: 1; min-height: 44px; padding: 10px 8px; }
  .product-catalog-page .product-more-button { width: 44px; height: 44px; flex: 0 0 44px; }
  .product-catalog-page .catalog .table-footer { padding: 14px 16px; flex-wrap: wrap; gap: 8px; line-height: 1.5; }
}

/* Product entry shares the catalog's quiet surfaces and readable type. */
@media screen {
  #product-dialog { width: min(800px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; scrollbar-gutter: auto; }
  #product-form { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); min-height: 0; }
  #product-form>.dialog-head { position: relative; top: auto; margin: 0; padding: 22px 28px 18px; flex-shrink: 0; box-shadow: none; }
  #product-form>.dialog-head h2 { font-size: 23px; }
  #product-form .close { width: 44px; min-height: 44px; color: #53656d; border: 1px solid var(--line); border-radius: 8px; }
  #product-form .product-form-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 20px 28px 24px; background: var(--surface-subtle); scroll-padding-block: 18px; scrollbar-width: thin; scrollbar-color: #b8c0c4 var(--surface-subtle); }
  #product-form .product-form-body::-webkit-scrollbar { width: 8px; }
  #product-form .product-form-body::-webkit-scrollbar-thumb { border: 2px solid var(--surface-subtle); border-radius: 8px; background: #b8c0c4; }
  #product-form .product-form-help { font-size: 13px; color: #53656d; margin: 0 0 16px; }
  #product-form .product-form-section { min-width: 0; margin: 0 0 20px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  #product-form .product-form-section>legend { font-size: 15px; font-weight: 600; padding: 0 7px; color: var(--ink); }
  #product-form .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 16px; }
  #product-form .form-grid>* { min-width: 0; }
  #product-form .full { grid-column: 1/-1; }
  #product-form label { font-size: 13px; line-height: 1.5; color: #53656d; }
  #product-form .product-optional { font-size: 11px; color: #65747a; font-weight: 400; margin-left: 4px; }
  #product-form input:not([type=checkbox]):not([type=file]), #product-form textarea { width: 100%; font-size: 14px; min-height: 44px; padding: 11px 12px; }
  #product-form input::placeholder, #product-form textarea::placeholder { color: #65747a; opacity: 1; }
  #product-form .category-picker { margin-top: 7px; }
  #product-form .category-picker input { margin: 0; padding-right: 46px!important; }
  #product-form .category-picker>button { top: 0; right: 0; width: 44px; height: 44px; padding: 0; }
  #product-form .unit-options { max-height: 200px; z-index: 10; }
  #product-form .unit-options button { min-height: 44px; font-size: 14px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  #product-form .unit-options .picker-highlight { background: var(--selection-soft); color: var(--selection-ink); box-shadow: inset 3px 0 var(--selection); }
  #product-form .unit-hint, #product-form .product-section-help { color: #5c6d74; font-size: 12px; line-height: 1.6; }
  #product-form .product-section-help { margin: 0 0 16px; }
  #product-form .cross-section-fields { background: var(--surface-subtle); padding: 14px; }
  #product-form .cross-section-fields .form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  #product-form .cross-section-fields legend { font-size: 13px; } #product-form .product-active-control { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 20px; }
  #product-form .check { min-height: 36px; color: var(--ink); cursor: pointer; }
  #product-form .check input { width: 18px; height: 18px; flex-shrink: 0; } #product-form .product-active-control>small { display: block; padding-left: 27px; color: #5c6d74; font-size: 12px; line-height: 1.6; }
  #product-form .image-section { padding: 0; border: 0; }
  #product-form .image-heading { font-size: 13px; color: var(--ink); }
  #product-form #image-count { font-size: 12px; color: #5c6d74; }
  #product-form .image-upload { min-height: 44px; font-size: 13px; }
  #product-form .image-upload:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  #product-form .image-remove { width: 32px; height: 32px; }
  #product-form .image-card small { font-size: 12px; color: #5c6d74; }
  #product-form .dimension-input-hint { font-size: 12px; }
  #product-form>.dialog-actions { flex-shrink: 0; padding: 16px 28px; margin: 0; background: #fff; gap: 12px; }
  #product-form>.dialog-actions>button { min-height: 44px; font-size: 14px; }
  #product-discard-dialog { max-width: 440px; }
  #product-discard-dialog p { color: #53656d; font-size: 14px; }
  #product-discard-dialog .dialog-actions { flex-wrap: wrap; }
  #product-discard-dialog button { min-height: 44px; }
}
@media screen and (max-width: 600px) {
  #product-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  #product-form { max-height: calc(100dvh - 18px); }
  #product-form>.dialog-head { padding: 16px; }
  #product-form>.dialog-head h2 { font-size: 21px; }
  #product-form .product-form-body { padding: 16px 12px 20px; }
  #product-form .product-form-section { padding: 14px 12px 16px; }
  #product-form .form-grid, #product-form .cross-section-fields .form-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  #product-form .cross-section-fields { padding: 12px; }
  #product-form input:not([type=checkbox]):not([type=file]), #product-form textarea { font-size: 16px; }
  #product-form .product-optional { font-size: 12px; }
  #product-form>.dialog-actions { padding: 12px 16px; gap: 10px; }
  #product-form>.dialog-actions>button { flex: 1; padding-inline: 10px; }
}
/* Product QR lookup: local decoding, with accessible camera and photo alternatives. */
.product-catalog-page #scan-product-qr{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;background:#fff}
.product-qr-scanner{width:min(640px,94vw);max-height:92dvh;box-sizing:border-box;padding:28px;overflow:auto}
.product-qr-scanner .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.product-qr-scanner h2{margin:0;font-size:21px}
.product-qr-scanner .qr-close{min-width:44px;min-height:44px;font-size:24px}
.product-qr-scanner .qr-intro{color:var(--muted);line-height:1.6;margin:0 0 18px}
.product-qr-scanner .qr-view{position:relative;min-height:210px;border:1px solid var(--line);border-radius:14px;background:var(--surface-subtle);overflow:hidden;display:grid;place-items:center}
.product-qr-scanner .qr-placeholder{padding:28px 20px;display:grid;gap:10px;text-align:center;color:var(--muted);font-size:14px}
.product-qr-scanner .qr-placeholder>span:first-child{font-size:48px;color:var(--accent)}
.product-qr-scanner .qr-placeholder strong{color:var(--ink);font-size:16px}
.product-qr-scanner video{display:block;width:100%;max-height:340px;object-fit:contain;background:#202b2e}
.product-qr-scanner [hidden]{display:none!important}
.product-qr-scanner .qr-camera-note,.product-qr-scanner .qr-privacy{font-size:13px;line-height:1.6;color:var(--muted)}
.product-qr-scanner .qr-actions{display:flex;gap:10px;flex-wrap:wrap}
.product-qr-scanner button{min-height:44px}
.product-qr-scanner .qr-start{background:var(--accent-soft);color:var(--accent);border-color:#dfc4c5}
.product-qr-scanner button:disabled{opacity:.55;cursor:not-allowed}
.product-qr-scanner .qr-status{padding:12px 14px;border-radius:9px;background:#edf3f4;color:var(--selection);line-height:1.6;font-size:14px;min-height:22px}
.product-qr-scanner .qr-error{background:#fff3ef;color:#963d2c}
.product-qr-scanner details{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}
.product-qr-scanner summary{cursor:pointer;line-height:1.6;color:var(--ink)}
.product-qr-scanner .qr-manual{margin-top:14px;display:grid;gap:8px}
.product-qr-scanner .qr-manual>div{display:flex;gap:10px}
.product-qr-scanner .qr-manual input{min-width:0;flex:1;width:100%;min-height:44px;box-sizing:border-box}
@media(max-width:720px){.product-qr-scanner{padding:22px}.product-qr-scanner .qr-manual>div{flex-wrap:wrap}.product-qr-scanner .qr-manual button{width:100%}}
.product-qr-scanner{width:min(660px,94vw)}
.product-qr-scanner .qr-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:6px}
.product-qr-scanner .qr-intro{margin-bottom:20px;font-size:14px}
.product-qr-scanner .qr-camera-section{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.product-qr-scanner .qr-view{border:0;border-radius:0;min-height:180px;background:var(--surface-subtle)}
.product-qr-scanner .qr-placeholder{gap:8px;padding:22px;font-size:13px;line-height:1.6}
.product-qr-scanner .qr-placeholder .qr-target{display:grid;place-items:center;justify-self:center;width:56px;height:56px;font-size:32px;line-height:1;border:2px solid var(--accent-border);border-radius:12px;background:white;margin-bottom:4px}
.product-qr-scanner .qr-camera-controls{padding:14px 16px;display:flex;align-items:center;gap:18px;border-top:1px solid var(--line)}
.product-qr-scanner .qr-camera-note{margin:0;flex:1;font-size:12px;line-height:1.6}
.product-qr-scanner .qr-actions{flex-shrink:0}
.product-qr-scanner .qr-start{background:var(--accent);border-color:var(--accent);color:white;padding-inline:18px}
.product-qr-scanner .qr-start:hover:not(:disabled){background:var(--accent-hover)}
.product-qr-scanner .qr-photo-section{padding:18px 0;display:grid;gap:12px}
.product-qr-scanner .qr-photo-section h3{font-size:14px;margin:0 0 5px;color:var(--ink)}
.product-qr-scanner .qr-photo-section p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}
.product-qr-scanner .qr-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product-qr-scanner .qr-photo-actions button{background:white;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;min-width:0;padding:10px}
.product-qr-scanner .qr-capture:before{content:'';width:17px;height:13px;border:1.7px solid currentColor;border-radius:3px;background:radial-gradient(circle at center,transparent 2.5px,currentColor 3px,currentColor 3.8px,transparent 4px)}
.product-qr-scanner .qr-upload:before{content:'↑';font-size:19px;line-height:16px;border-bottom:1.7px solid currentColor;width:17px;padding-bottom:2px}
.product-qr-scanner .qr-status{margin:0 0 18px;padding:12px 14px;border:1px solid #dce7e9;font-size:13px;line-height:1.65}
.product-qr-scanner .qr-status.qr-error{border-color:#efd8cd}
.product-qr-scanner details{margin-top:0;padding-top:16px}
.product-qr-scanner summary{font-size:13px;font-weight:600;min-height:28px}
.product-qr-scanner .qr-privacy{margin:16px 0 0;font-size:11px;line-height:1.7}
.product-qr-scanner button:focus-visible,.product-qr-scanner summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(max-width:480px){.product-qr-scanner .qr-camera-controls{align-items:stretch;flex-direction:column;gap:12px}.product-qr-scanner .qr-actions,.product-qr-scanner .qr-actions button{width:100%}.product-qr-scanner .qr-view{min-height:160px}.product-qr-scanner .qr-placeholder{padding:18px}.product-qr-scanner .qr-photo-actions{gap:8px}.product-qr-scanner .qr-photo-actions button{font-size:12px}}
.product-barcode-field{min-width:0;display:grid;gap:8px;align-content:start}
.product-barcode-field>label{margin:0}
.product-barcode-controls{display:flex;gap:8px;align-items:stretch}
.product-barcode-controls input{flex:1;min-width:0;width:100%;margin:0}
.product-barcode-controls button{flex-shrink:0;min-height:44px;background:white;font-size:12px;padding:10px 12px}
#product-barcode-status{margin:0;font-size:12px;color:var(--selection);line-height:1.6;overflow-wrap:anywhere}
#product-barcode-status:empty{display:none}
.product-barcode-scanner .qr-target{font-family:monospace;letter-spacing:-4px}
@media(max-width:480px){.product-barcode-controls{flex-wrap:wrap}.product-barcode-controls button{width:100%}}
.product-catalog-page #scan-catalog-barcode{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;background:#fff}
@media(max-width:480px){.product-catalog-page #scan-product-qr,.product-catalog-page #scan-catalog-barcode{flex:1 1 130px;font-size:12px}}


#category-filter-picker #category-filter-toggle{position:relative;right:auto;bottom:auto;width:100%;height:44px;min-height:44px;padding:11px 44px 11px 12px;border:1px solid var(--line);background:white;justify-content:flex-start}
#category-filter-picker .filter-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#category-filter-picker .filter-arrow{position:absolute;inset:0 -1px 0 auto;display:flex;align-items:center;justify-content:center;width:44px;padding:0}
#category-filter-picker .search-dropdown-panel{padding:0;overflow:hidden;max-height:none}
#category-filter-picker .search-dropdown-head{padding:10px;border-bottom:1px solid var(--line);background:white}
#category-filter-picker .search-dropdown-head input{height:40px;min-height:40px;padding:9px 12px;border-radius:7px;background:var(--surface-subtle);font-size:13px}
#category-filter-picker .search-dropdown-list{padding:6px;overflow-y:auto;max-height:min(260px,35dvh);overscroll-behavior:contain;scrollbar-width:thin}
#category-filter-picker .search-dropdown-list>button{display:block;width:100%;text-align:left;border-radius:6px;min-height:44px;padding:10px 12px;font-size:14px;border:0;white-space:normal;overflow-wrap:anywhere}
#category-filter-picker .search-dropdown-list>button+button{margin-top:5px}
#category-filter-picker .search-dropdown-list .selected-option{font-weight:600;background:var(--selection-soft);color:var(--selection-ink)}
#category-filter-picker .search-dropdown-list .picker-highlight{background:var(--accent-soft);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
#category-filter-picker .search-dropdown-panel>.picker-empty{margin:0;padding:16px;font-size:13px;line-height:1.6}

#product-form .category-picker .search-dropdown-panel{padding:0;overflow:hidden;max-height:none}
#product-form .category-picker .search-dropdown-head{padding:10px;border-bottom:1px solid var(--line);background:white}
#product-form .category-picker .search-dropdown-head input{height:40px;min-height:40px;padding:9px 12px;border-radius:7px;background:var(--surface-subtle);font-size:13px}
#product-form .category-picker .search-dropdown-list{padding:6px;overflow-y:auto;max-height:min(260px,35dvh);overscroll-behavior:contain;scrollbar-width:thin}
#product-form .category-picker .search-dropdown-list>button{display:block;width:100%;text-align:left;border-radius:6px;min-height:44px;padding:10px 12px;font-size:14px;border:0;white-space:normal;overflow-wrap:anywhere}
#product-form .category-picker .search-dropdown-list>button+button{margin-top:5px}
#product-form .category-picker .search-dropdown-list .selected-option{font-weight:600;background:var(--selection-soft);color:var(--selection-ink)}
#product-form .category-picker .search-dropdown-list .picker-highlight{background:var(--accent-soft);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
#product-form .category-picker .search-dropdown-panel>.picker-empty{margin:0;padding:16px;font-size:13px;line-height:1.6}

#product-form .category-picker>.product-dropdown-toggle{position:relative;inset:auto;width:100%;height:44px;min-height:44px;padding:10px 44px 10px 12px;border:1px solid var(--line);border-radius:8px;background:white;display:flex;align-items:center;justify-content:flex-start;text-align:left;font-size:13px;font-weight:400;color:var(--ink)}
#product-form .product-dropdown-toggle .filter-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#product-form .product-dropdown-toggle .filter-arrow{position:absolute;inset:0 0 0 auto;width:44px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
#product-form .product-dropdown-toggle:disabled{background:var(--surface-subtle);color:var(--muted);cursor:not-allowed;opacity:.7}
#product-form .category-picker>input[hidden]{display:none!important}
#product-form .category-picker .search-dropdown-head input{width:100%;margin:0;padding:9px 12px;box-sizing:border-box}
#product-form .category-picker .search-dropdown-panel{width:100%;box-sizing:border-box;z-index:30}

#product-form .product-dropdown-toggle.dropdown-placeholder .filter-value{color:var(--muted)}

/* Match ordinary product input metrics, including the larger mobile font. */
#product-form .product-field>label{display:block}
#product-form .product-field>.category-picker{display:block;width:100%;margin-top:7px;line-height:1.5}
#product-form .category-picker>.product-dropdown-toggle{height:45px;min-height:45px;font-size:14px;line-height:21px;padding:11px 44px 11px 12px;border-radius:7px;box-sizing:border-box}
@media(max-width:720px){#product-form .category-picker>.product-dropdown-toggle{height:48px;min-height:48px;font-size:16px;line-height:24px}}