:root {
  --canvas: #eef2f6;
  --surface: #ffffff;
  --surface-muted: #f7f9fb;
  --ink: #15212d;
  --muted: #667789;
  --line: #d9e1e8;
  --line-strong: #bfccd7;
  --blue: #1f4f7a;
  --blue-strong: #123958;
  --blue-soft: #e8f1fa;
  --teal: #19786d;
  --shadow: 0 8px 24px rgba(20, 42, 64, .08);
  --radius: 10px;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-family: "Segoe UI", Tahoma, "Noto Sans Thai", sans-serif; font-size: 14px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.office-topbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line-strong); box-shadow: 0 1px 0 rgba(15, 35, 55, .02); }
.office-topbar-inner { min-height: 58px; width: min(1680px, 100%); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 22px; }
.brand { min-width: 196px; display: inline-flex; align-items: center; gap: 9px; color: #173b5a; font-size: 16px; font-weight: 700; white-space: nowrap; }
.brand b { color: var(--teal); }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f4f7a, #19786d); border-radius: 7px; font-size: 11px; letter-spacing: .04em; }
.main-nav { min-width: 0; flex: 1; display: flex; align-items: stretch; overflow-x: auto; }
.nav-link { min-height: 58px; padding: 0 12px; display: inline-flex; align-items: center; color: #526476; font-size: 13px; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.main-nav-separator { min-height: 58px; padding: 0 3px; display: inline-flex; align-items: center; color: #c3ced8; font-size: 16px; font-weight: 400; user-select: none; }
.nav-new-order { appearance: none; background: transparent; border-top: 0; border-right: 0; border-left: 0; cursor: pointer; font-family: inherit; }
.nav-link:hover { background: #f6f9fc; color: var(--blue); }
.nav-link.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.user-menu { display: inline-flex; align-items: center; gap: 11px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.user-menu a { color: var(--blue); font-weight: 700; }
/* R185: small, consistently visible patch indicator at the top-right. */
.app-patch-label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid #dbe3ea;
  background: #f5f8fb;
  color: #68798a;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.office-shell { width: min(1680px, calc(100vw - 36px)); margin: 18px auto 36px; }
.public-body { background: linear-gradient(145deg, #e9eff5, #fbfcfd); }
.public-shell { width: min(800px, calc(100vw - 34px)); margin: 42px auto; }
.notice { position: relative; margin-bottom: 14px; padding: 10px 42px 10px 13px; border: 1px solid; border-radius: 8px; font-size: 13px; font-weight: 600; transition: opacity 260ms ease, transform 260ms ease; }
.notice.is-dismissing { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.notice-close { position: absolute; top: 7px; right: 9px; width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: currentColor; font-size: 19px; line-height: 1; font-weight: 800; cursor: pointer; opacity: .68; }
.notice-close:hover { background: rgba(255,255,255,.48); opacity: 1; }
.notice-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .notice { transition-duration: 1ms; } }
.notice-success { color: #0c684d; background: #e7f7ef; border-color: #b8e4cd; }
.notice-error { color: #a12b2b; background: #fff0f0; border-color: #efc3c3; }

/* Reusable office components */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.page-title { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.page-subtitle, .muted { color: var(--muted); }
.page-subtitle { margin: 4px 0 0; font-size: 13px; }
.eyebrow { margin: 0 0 3px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 700; transition: .14s ease; }
.button.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.button.primary:hover { background: var(--blue-strong); border-color: var(--blue-strong); }
.button.secondary { color: #304e67; background: #fff; border-color: #cbd8e3; }
.button.secondary:hover { color: var(--blue); border-color: #8facbf; background: #f9fbfd; }
.button.ghost { color: #456178; background: transparent; border-color: transparent; }
.button.ghost:hover { background: #edf3f8; }
.button.danger { color: #9d2525; background: #fff7f7; border-color: #efc7c7; }
.button.compact { min-height: 29px; padding: 4px 8px; font-size: 12px; }
.button.full { width: 100%; }

.button:disabled,
.button[aria-disabled="true"] {
  color: #718293;
  background: #e5ebf1;
  border-color: #cbd4dd;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}
.button.primary:disabled,
.button.primary[aria-disabled="true"],
.button.primary:disabled:hover,
.button.primary[aria-disabled="true"]:hover {
  color: #738295;
  background: #dfe6ed;
  border-color: #c4cfd9;
}
.button.secondary:disabled,
.button.secondary[aria-disabled="true"],
.button.secondary:disabled:hover,
.button.secondary[aria-disabled="true"]:hover {
  color: #8a98a6;
  background: #f0f3f6;
  border-color: #d4dce4;
}
input, select, textarea { width: 100%; color: var(--ink); background: #fff; border: 1px solid #c7d3de; border-radius: 6px; outline: none; }
input, select { min-height: 34px; padding: 6px 9px; }
textarea { min-height: 82px; padding: 8px 9px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #5b9aca; box-shadow: 0 0 0 3px rgba(55, 128, 188, .15); }
label { display: flex; flex-direction: column; gap: 5px; color: #43576a; font-size: 12px; font-weight: 700; }
label.check-label { flex-direction: row; align-items: center; gap: 8px; padding-top: 4px; }
label.check-label input { width: auto; min-height: auto; }
.stack-form { display: flex; flex-direction: column; gap: 13px; }
.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-note { margin: 0; color: var(--muted); font-size: 12px; }

/* Orders workbench */
.orders-shell { padding: 0; overflow: hidden; }
.orders-toolbar { padding: 15px 17px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.filter-row { display: grid; grid-template-columns: 180px minmax(260px, 1fr) 185px auto; gap: 10px; align-items: end; }
.filter-row .search-wrap { position: relative; }
.search-wrap input { padding-left: 31px; }
.search-wrap::before { content: "⌕"; position: absolute; z-index: 1; top: 7px; left: 10px; color: #7990a2; font-size: 18px; line-height: 1; }
.status-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.status-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.status-chip { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; color: #506174; background: #f4f7fa; border: 1px solid #dce5ec; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-chip:hover { background: #e9f1f8; color: var(--blue); }
.status-chip.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }
.toolbar-check { flex-direction: row; align-items: center; gap: 6px; color: #63778a; font-size: 12px; white-space: nowrap; }
.toolbar-check input { width: auto; min-height: auto; }
.orders-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #f8fafc; }
.orders-summary div { padding: 11px 17px; border-right: 1px solid var(--line); }
.orders-summary div:last-child { border-right: 0; }
.orders-summary span { display: block; color: #6b7e8f; font-size: 11px; }
.orders-summary strong { display: block; margin-top: 3px; color: #1a344a; font-size: 17px; }
.orders-scroll { max-height: calc(100vh - 275px); min-height: 450px; overflow: auto; background: #fff; }
.orders-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.orders-table col.date { width: 88px; }.orders-table col.customer { width: 210px; }.orders-table col.items { width: auto; }.orders-table col.total { width: 125px; }.orders-table col.payment { width: 165px; }.orders-table col.delivery { width: 155px; }.orders-table col.address { width: 310px; }
.orders-table thead th { position: sticky; top: 0; z-index: 4; padding: 9px 10px; color: #506579; background: #f1f5f8; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line); text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.orders-table thead th:last-child { border-right: 0; }
.orders-table tbody td { padding: 9px 10px; vertical-align: top; border-bottom: 1px solid #e0e7ed; border-right: 1px solid #e5ebf0; background: #fff; }
.orders-table tbody td:last-child { border-right: 0; }
.orders-table tr:hover td { filter: brightness(.982); }
.order-row[data-order-url], .order-row[data-order-modal-url] { cursor: pointer; }
.order-row[data-order-url]:focus, .order-row[data-order-modal-url]:focus { outline: 3px solid rgba(45, 117, 177, .42); outline-offset: -3px; }
.order-row[data-order-url]:focus td { position: relative; z-index: 1; }
.order-row .customer-link { position: relative; z-index: 2; }
.orders-table .month-divider td { padding: 10px 12px; color: #24475f; background: #d6e6f2; border-top: 1px solid #bfd1df; border-right: 0; border-bottom: 1px solid #b6cad9; font-size: 13px; font-weight: 800; }
.orders-table .month-divider strong { margin-left: 7px; color: #173d5c; font-size: 14px; }
.orders-table .month-divider small { margin-left: 10px; color: #5c7890; font-weight: 600; }
.month-label { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 7px; color: #1d597e; background: #eff7fc; border: 1px solid #b7d4e7; border-radius: 4px; font-size: 10px; font-weight: 900; }
/* Order row colors follow payment status first, then fulfillment status only after full payment. */
.order-row.state-awaiting_summary td { color: #26333d; background: #fff; }
.order-row.state-new_order td,
.order-row.state-awaiting_payment td { color: #26333d; background: #eaf5ff; }
.order-row.state-new_order:hover td,
.order-row.state-awaiting_payment:hover td { background: #e2f0fc; }
.order-row.state-paid_waiting td { color: #26333d; background: #f1ebff; }
.order-row.state-paid_waiting:hover td { background: #eee9fc; }
.order-row.state-name_printed td,
.order-row[data-payment-status="paid"][data-fulfillment-status="name_printed"] td { color: #26333d; background: #fff0dd; }
.order-row.state-name_printed:hover td,
.order-row[data-payment-status="paid"][data-fulfillment-status="name_printed"]:hover td { background: #ffe8c9; }
.order-row.state-held td,
.order-row[data-payment-status="paid"][data-fulfillment-status="held"] td { color: #177548; background: #e7f7ec; }
.order-row.state-held .items-cell,
.order-row.state-held .order-total strong,
.order-row[data-payment-status="paid"][data-fulfillment-status="held"] .items-cell,
.order-row[data-payment-status="paid"][data-fulfillment-status="held"] .order-total strong { color: #177548; }
.order-row.state-shipped td,
.order-row[data-payment-status="paid"][data-fulfillment-status="shipped"] td,
.order-row[data-payment-status="paid"][data-fulfillment-status="cancelled"] td { color: #26333d; background: #fff; }
.order-row.state-separate td { color: #b22929; background: #fff0f0; }
.order-row.state-separate .items-cell, .order-row.state-separate .order-total strong { color: #b22929; }

/* Hard payment-priority fallbacks for rows updated by AJAX. */
.order-row[data-payment-status="awaiting_summary"] td { color: #26333d; background: #fff; }
.order-row[data-payment-status="pending"] td { color: #26333d; background: #eaf5ff; }
.order-row[data-payment-status="pending"]:hover td { background: #e2f0fc; }
/* R177: partial receipts use blue-green, distinct from pending transfer blue.
   Attribute rules override state-awaiting_payment on loaded and AJAX rows. */
.order-row[data-payment-status="partial"] td { color: #263f43; background: #dcf3f0; }
.order-row[data-payment-status="partial"]:hover td { background: #c8eae5; }
.order-row[data-payment-status="awaiting_summary"] .items-cell,
.order-row[data-payment-status="awaiting_summary"] .order-total strong,
.order-row[data-payment-status="pending"] .items-cell,
.order-row[data-payment-status="pending"] .order-total strong,
.order-row[data-payment-status="partial"] .items-cell,
.order-row[data-payment-status="partial"] .order-total strong { color: #394c5c; }
.order-date { color: #617688; font-size: 12px; font-weight: 700; white-space: nowrap; }
.customer-cell a { display: block; font-weight: 800; color: #204d70; overflow-wrap: anywhere; }
.customer-cell small { display: block; margin-top: 2px; color: #7d8d9c; font-size: 11px; }
.items-cell { color: #394c5c; font-size: 12px; line-height: 1.44; white-space: pre-line; overflow-wrap: anywhere; }
.order-total { text-align: right; white-space: nowrap; }.order-total strong { display: block; color: #163b59; font-size: 14px; }.order-total small { color: #718292; font-size: 10px; }
.tag-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }.tag { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 1.25; }.tag.payment-awaiting_summary { color: #425466; background: #eef2f5; }.tag.payment-pending { color: #8a5a0d; background: #ffedbf; }.tag.payment-paid { color: #0b654c; background: #d8f3e5; }.tag.payment-partial { color: #11655f; background: #c4e8e2; }.tag.order-new { color: #4a6173; background: #e6edf3; }.tag.order-sent { color: #8d5a09; background: #fff0c7; }.tag.delivery { color: #3b5c75; background: #e8eef4; }.tag.delivery-held { color: #147343; background: #d6f0df; }.tag.delivery-name-printed { color: #9a4b04; background: #ffe3bd; }.tag.delivery-shipped { color: #53616d; background: #e9ecef; }.tag.separate { color: #aa2525; background: #ffdede; }
.address-col { color: #556a7c; font-size: 11px; line-height: 1.42; white-space: pre-line; }
.empty-table { padding: 48px 18px; text-align: center; color: var(--muted); }

/* Editor */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }.editor-main { display: flex; flex-direction: column; gap: 14px; }.editor-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; }.form-section { padding: 16px; }.form-section h2 { margin: 0; color: #1d3951; font-size: 15px; }.form-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }.form-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }.customer-panel { position: relative; }.customer-suggestions { display: none; position: absolute; z-index: 30; top: 60px; right: 0; left: 0; overflow: hidden; background: #fff; border: 1px solid #bfcdda; border-radius: 7px; box-shadow: 0 12px 24px rgba(18, 44, 70, .16); }.customer-suggestions.show { display: block; }.customer-suggestions button { width: 100%; display: flex; justify-content: space-between; gap: 9px; padding: 9px 11px; color: #253d51; background: #fff; border: 0; border-bottom: 1px solid #e8edf1; text-align: left; }.customer-suggestions button:hover { background: #eef5fb; }.customer-suggestions strong, .customer-suggestions small { display: block; }.customer-suggestions small { color: #718394; font-size: 11px; }.customer-alert { margin-top: 10px; }.alert-box { padding: 9px 10px; color: #1b694f; background: #eaf8f0; border: 1px solid #bde6cf; border-radius: 6px; font-size: 12px; }.alert-box.warn { color: #8a5a0d; background: #fff8e9; border-color: #efdb9b; }
.address-pick-row { display: flex; gap: 7px; }.address-pick-row select { min-width: 0; flex: 1; }.address-pick-row button { flex: 0 0 auto; }
.items-editor { display: flex; flex-direction: column; gap: 8px; }
.item-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 140px 31px; gap: 8px; padding: 10px; border: 1px solid #dce5ec; border-radius: 7px; background: #fbfcfd; }
.item-number { width: 22px; height: 22px; margin-top: 6px; display: grid; place-items: center; color: #376282; background: #e5eff8; border-radius: 50%; font-size: 11px; font-weight: 800; }
.item-field input { min-height: 32px; }
.price-field input { text-align: right; }
.paste-box { min-height: 96px; grid-column: 2 / 4; padding: 10px; color: #496a80; background: #fbfdff; border: 1px dashed #99bdd5; border-radius: 7px; font-size: 12px; cursor: text; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.paste-box:hover { background: #f4faff; border-color: #6da5ca; }
.paste-box:focus { outline: 3px solid rgba(61, 135, 194, .13); border-color: #3e8ac0; background: #f1f9ff; }
.paste-box-main { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 6px 10px; color: #426a85; border-radius: 5px; text-align: center; }
.paste-box-main p { margin: 0; }
.paste-box-main b { color: #1d5e8b; }
.paste-icon { width: 24px; height: 24px; display: inline-grid; place-items: center; flex: 0 0 auto; color: #2e79a9; background: #e8f4fb; border: 1px solid #bcdced; border-radius: 50%; font-size: 16px; font-weight: 800; line-height: 1; }
.paste-tools { display: flex; justify-content: center; margin-top: 3px; }
.file-picker-toggle { padding: 1px 0; color: #49728f; background: transparent; border: 0; border-bottom: 1px solid #a9c6d9; border-radius: 0; font-size: 12px; line-height: 1.45; cursor: pointer; }
.file-picker-toggle:hover { color: #155d8c; border-bottom-color: #4e97c5; }
.file-picker-toggle:focus-visible { outline: 2px solid rgba(61, 135, 194, .26); outline-offset: 3px; border-radius: 3px; }
/* R116: when a product image exists, hide the paste instruction and keep file picker below the thumbnails. */
.paste-box.has-images,
.paste-box:has(.image-preview-item) {
  min-height: 0;
}
.paste-box.has-images .paste-box-main,
.paste-box:has(.image-preview-item) .paste-box-main {
  display: none;
}
.paste-box.has-images .image-preview,
.paste-box:has(.image-preview-item) .image-preview {
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: 6px;
}
.paste-box.has-images .paste-tools,
.paste-box:has(.image-preview-item) .paste-tools {
  justify-content: center;
  margin-top: 2px;
}
.paste-box.has-images .file-picker-toggle,
.paste-box:has(.image-preview-item) .file-picker-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file-picker-panel { max-width: 500px; margin: 8px auto 0; padding-top: 8px; border-top: 1px dashed #c8dbe8; }
.file-picker-panel[hidden] { display: none; }
.item-file-input { display: block; width: 100%; max-width: 100%; min-height: 32px; color: #344f65; background: #fff; }
.image-preview { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.image-preview-item { position: relative; width: 54px; height: 54px; display: block; }
.image-preview-item .image-thumbnail, .image-preview-item > img { width: 54px; height: 54px; display: block; object-fit: cover; border: 1px solid #cad6df; border-radius: 5px; }
.image-remove { position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; display: grid; place-items: center; padding: 0; color: #fff; background: #b93636; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(63, 25, 25, .22); font-size: 15px; font-weight: 700; line-height: 1; }
.image-remove:hover { background: #8d1f1f; }
.icon-button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: #a53030; background: #fff2f2; border: 1px solid #f2c5c5; border-radius: 5px; font-size: 17px; line-height: 1; }
.keyboard-help { margin: 1px 0 0; color: #768798; font-size: 11px; }
.totals-card { padding: 16px; }.totals-card h2 { margin: 0 0 9px; font-size: 14px; }.total-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; color: #506577; font-size: 13px; }.total-line strong { color: #1c354b; }.total-line.grand { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: #19496f; font-size: 15px; font-weight: 800; }.total-line.grand strong { color: #0e4c78; font-size: 22px; }.summary-input { text-align: right; font-size: 16px; font-weight: 800; }
/* R186: zero amounts are placeholders, not prefilled editable values. */
.summary-input::placeholder { color: #9aa9b8; font-weight: 400; opacity: 1; }.summary-link-card { padding: 16px; }.summary-link-card h2 { margin: 0 0 9px; font-size: 14px; }.summary-link-card input { font-size: 11px; }.summary-link-card .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.section-divider { margin: 11px 0; border: 0; border-top: 1px solid var(--line); }

/* General tables and lists */
.table-wrap { overflow: auto; }.data-table { width: 100%; border-collapse: collapse; }.data-table th { padding: 9px 10px; color: #566d80; background: #f3f7fa; border-bottom: 1px solid #cedae3; text-align: left; font-size: 11px; }.data-table td { padding: 10px; vertical-align: top; border-bottom: 1px solid #e3eaf0; }.data-table .money-cell { text-align: right; white-space: nowrap; }.data-table tr:hover td { background: #f9fbfc; }.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }.metric { padding: 14px; }.metric span { display: block; color: #6f8190; font-size: 11px; }.metric strong { display: block; margin-top: 3px; color: #1d4869; font-size: 21px; }.metric small { color: #6d8090; }.two-column { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, 1fr); gap: 14px; }.simple-list { display: flex; flex-direction: column; }.simple-list > div, .simple-list > a { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e2e8ed; }.simple-list > div:last-child, .simple-list > a:last-child { border-bottom: 0; }.simple-list span { flex: 1; color: #5a6d7e; }.simple-list em { margin-left: auto; color: #204e71; font-style: normal; font-weight: 700; }
.activity-log-table { min-width: 1120px; }
.activity-time { width: 142px; white-space: nowrap; }
.activity-action { width: 210px; color: #173f60; font-weight: 700; }
.activity-entity { width: 145px; color: #476174; white-space: nowrap; }
.activity-detail { min-width: 360px; max-width: 760px; color: #3d5669; line-height: 1.65; overflow-wrap: anywhere; }
.customer-table a { color: #1d4d73; font-weight: 800; }.address-card { margin: 0 0 9px; padding: 10px; background: #f7fafc; border: 1px solid #dce5ec; border-radius: 7px; }.address-card strong, .address-card span { display: block; }.address-card span { color: #708293; font-size: 12px; }.address-card p { margin: 6px 0 0; white-space: pre-line; color: #445b6c; font-size: 12px; }.history-list { display: flex; flex-direction: column; }.history-list a { display: grid; grid-template-columns: 105px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e2e8ed; }.history-list a:last-child { border-bottom: 0; }.history-list span { color: #6f8293; font-size: 12px; }.history-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.history-list em { color: #254f6f; font-style: normal; font-size: 12px; }

/* Public summary and login */
.login-card, .public-card { padding: 26px; background: #fff; border: 1px solid #d5e0e8; border-radius: 12px; box-shadow: var(--shadow); }.login-card { width: min(420px, 100%); margin: 70px auto; }.login-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 13px; color: #fff; background: linear-gradient(135deg, #1f4f7a, #19786d); border-radius: 9px; font-size: 13px; font-weight: 800; }.login-card h1, .public-card h1 { margin: 0 0 5px; color: #163d5d; }.login-card > p { margin: 0 0 21px; color: var(--muted); }.public-brand { color: #1b405f; font-size: 18px; font-weight: 800; }.public-brand span { color: var(--teal); }.public-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }.public-items { margin-top: 18px; border-top: 1px solid var(--line); }.public-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }.public-item h2 { margin: 0; font-size: 15px; }.public-item strong { color: #1b4f76; }.public-image-grid { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }.public-image-grid img { width: 76px; height: 76px; object-fit: cover; border: 1px solid #d3dee6; border-radius: 6px; }.public-total { margin-top: 15px; }.public-total div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; color: #506375; }.public-total .grand { margin-top: 7px; padding-top: 12px; color: #104a75; border-top: 1px solid var(--line); font-size: 17px; font-weight: 800; }.public-payment-note { margin-top: 18px; padding: 14px; background: #eef6fb; border: 1px solid #d1e1ee; border-radius: 8px; }.public-payment-note h2 { margin: 0 0 5px; font-size: 15px; }.public-payment-note p { margin: 0 0 9px; color: #506579; }.success-note { color: #146a4d; background: #eaf8f0; border-color: #c6ead5; }.small-note { font-size: 11px; }


.customer-name-line, .address-cell { display: flex; align-items: flex-start; gap: 5px; }
.customer-name-line .customer-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-inline.copy-icon { width: 23px; height: 23px; flex: 0 0 auto; display: inline-grid; place-items: center; padding: 0; color: #416883; background: #f5f9fc; border: 1px solid #cbdbe7; border-radius: 4px; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; }
.copy-inline.copy-icon:hover { color: #134a73; background: #e6f2fb; border-color: #9fc3dc; }
.copy-inline.copy-icon.is-copied { color: #157a49; background: #e8f8ef; border-color: #a9ddbf; }
.customer-cell .held-expand-button { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 0; color: #197348; background: transparent; border: 0; font-size: 11px; font-weight: 800; cursor: pointer; }
.customer-cell .held-expand-button:hover { color: #0f5734; text-decoration: underline; }
.table-status-control { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.quick-status-select { width: 100%; min-width: 0; padding: 5px 24px 5px 7px; color: #28465d; background: rgba(255,255,255,.78); border: 1px solid #b9ccd9; border-radius: 5px; font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1.25; cursor: pointer; }
.quick-status-select:hover { background: #fff; border-color: #789db8; }
.quick-status-select:focus { outline: 2px solid rgba(55, 132, 184, .25); outline-offset: 1px; }
.quick-status-select.is-saving { opacity: .58; cursor: progress; }
.toolbar-hint { color: #667c8d; font-size: 11px; font-weight: 600; }
.held-detail-row td { padding: 0 !important; background: #f3fbf6 !important; border-right: 0 !important; }
.held-detail-content { padding: 11px 14px 13px 108px; color: #35586b; }
.held-detail-title { margin-bottom: 7px; color: #15643c; font-size: 12px; font-weight: 900; }
.held-order-list { display: grid; gap: 6px; max-width: 880px; }
.held-order-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 7px 9px; background: #fff; border: 1px solid #cde8d6; border-radius: 5px; }
.held-order-line strong, .held-order-line span { display: block; }.held-order-line strong { color: #1d5d3a; font-size: 11px; }.held-order-line span { margin-top: 2px; color: #516c7c; font-size: 11px; white-space: pre-line; }.held-order-line small, .held-order-line b { display: block; text-align: right; }.held-order-line small { color: #718696; font-size: 10px; }.held-order-line b { margin-top: 2px; color: #1d5d3a; font-size: 11px; }.held-empty { color: #617a8b; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) { .office-topbar-inner { gap: 10px; }.brand { min-width: auto; }.brand > span:last-child { display: none; }.user-menu span { display: none; }.filter-row { grid-template-columns: 160px minmax(180px, 1fr) 160px auto; }.editor-grid { grid-template-columns: minmax(0, 1fr) 285px; }.orders-table col.address { width: 250px; } }
@media (max-width: 820px) { .office-shell { width: min(100% - 20px, 1680px); margin-top: 10px; }.office-topbar-inner { padding: 0 10px; }.main-nav { order: 3; width: 100%; }.office-topbar-inner { flex-wrap: wrap; min-height: 58px; padding-bottom: 0; gap: 0 10px; }.nav-link { min-height: 40px; padding: 0 9px; }.filter-row { grid-template-columns: 1fr 1fr; }.filter-row .search-wrap { grid-column: 1 / -1; }.status-filter-row { align-items: flex-start; flex-direction: column; }.orders-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.orders-summary div:nth-child(even) { border-right: 0; }.orders-scroll { max-height: none; min-height: 0; }.editor-grid, .two-column { grid-template-columns: 1fr; }.editor-side { position: static; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid.two, .form-grid.three { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .main-nav-separator { min-height: 40px; padding: 0 2px; } }
@media (max-width: 560px) { body { font-size: 13px; }.page-toolbar { align-items: flex-start; flex-direction: column; }.filter-row { grid-template-columns: 1fr; }.filter-row .search-wrap { grid-column: auto; }.filter-row .button { width: 100%; }.orders-summary div { padding: 9px 11px; }.orders-summary strong { font-size: 15px; }.orders-table { min-width: 925px; }.orders-scroll { border-top: 1px solid var(--line); }.item-row { grid-template-columns: 23px minmax(0, 1fr) 29px; }.item-field { grid-column: 2; }.price-field { grid-column: 2; }.paste-box { grid-column: 2; }.item-file-input { width: 100%; }.icon-button { grid-column: 3; grid-row: 1; }.item-number { margin-top: 5px; }.history-list a { grid-template-columns: 1fr; gap: 3px; }.public-shell { width: min(100% - 20px, 800px); margin: 16px auto; }.public-card, .login-card { padding: 20px; }.public-item { grid-template-columns: 1fr; } }

/* Order editor modal */
body.order-modal-open { overflow: hidden; }
.order-modal[hidden] { display: none; }
.order-modal { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 18px; }
.order-modal-backdrop { position: absolute; inset: 0; background: rgba(18, 32, 46, .48); backdrop-filter: blur(2px); }
.order-modal-dialog { position: relative; z-index: 1; width: min(1480px, 100%); height: min(93vh, 1080px); overflow: hidden; background: #f4f7fa; border: 1px solid rgba(209, 222, 233, .92); border-radius: 12px; box-shadow: 0 24px 64px rgba(10, 27, 43, .35); }
.order-modal-content { height: 100%; overflow: auto; overscroll-behavior: contain; }
.modal-loading, .modal-failure { min-height: 180px; display: grid; place-content: center; gap: 11px; padding: 26px; color: #516779; text-align: center; }
.modal-failure strong { color: #9d2525; font-size: 16px; }
.modal-failure .button { justify-self: center; }
.order-form-fragment.is-modal-fragment { min-height: 100%; padding: 0 16px 18px; }
.modal-order-header { position: sticky; z-index: 20; top: 0; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 -16px 14px; padding: 13px 16px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #d5e0e8; box-shadow: 0 2px 9px rgba(23, 47, 68, .06); backdrop-filter: blur(8px); }
.modal-order-header h2 { margin: 0; color: #173d5d; font-size: 19px; }
.modal-order-header p:not(.eyebrow) { margin: 2px 0 0; color: #687c8d; font-size: 12px; }
.modal-order-header-actions,
.order-page-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-order-header-actions { flex: 0 0 auto; }
.editor-delete-order-button { white-space: nowrap; }
.editor-delete-order-button:hover,
.editor-delete-order-button:focus-visible {
  color: #fff;
  background: #b43838;
  border-color: #b43838;
}
.modal-close-button { flex: 0 0 auto; }
.modal-form-feedback { display: none; margin: 0 0 12px; padding: 9px 11px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; }
.modal-form-feedback.is-visible { display: block; }
.modal-form-feedback.is-error { color: #9c2727; background: #fff1f1; border-color: #f1c8c8; }
.modal-form-feedback.is-success { color: #146a4d; background: #eaf8f0; border-color: #c2e7d1; }
.order-form-fragment.is-modal-fragment .editor-side { top: 14px; }
.order-form-fragment.is-modal-fragment .summary-link-card { margin-bottom: 2px; }
.order-form-fragment.is-modal-fragment .keyboard-help { padding-bottom: 4px; }

@media (max-width: 820px) {
  .order-modal { padding: 0; }
  .order-modal-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .order-form-fragment.is-modal-fragment { padding: 0 10px 14px; }
  .modal-order-header { margin-right: -10px; margin-left: -10px; padding: 11px 10px; }
  .modal-order-header h2 { font-size: 17px; }
  .modal-order-header-actions { width: 100%; justify-content: flex-end; }
  .modal-order-header-actions .button { flex: 1 1 auto; }
  .order-page-header-actions { width: 100%; justify-content: stretch; }
  .order-page-header-actions .button { flex: 1 1 auto; }
}

/* R6: orders table readability and search label alignment */
.page-title { font-size: 25px; }
.filter-row .search-wrap { position: relative; }
.search-wrap input { padding-left: 9px; }
.search-wrap::before { content: none; }
.search-label { display: inline-flex; align-items: center; gap: 4px; }
.search-label-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; color: #66879f; font-size: 17px; font-weight: 700; line-height: 1; }
.orders-table thead th { padding: 11px 10px; font-size: 13px; letter-spacing: .01em; }
.items-cell { font-size: 13px; line-height: 1.5; }
.address-col { font-size: 13px; line-height: 1.5; }
.customer-cell a { font-size: 13px; }



/* R7: quick status updates happen in-place; never animate the orders list. */
.quick-status-feedback {
  display: none;
  color: #16734c;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.quick-status-feedback.is-visible { display: inline-block; }


/* R9: distinguish an address copied from a customer's stored profile from an order snapshot. */
.address-source-note {
  display: block;
  margin-top: 4px;
  color: #526d86;
  font-size: .74rem;
  line-height: 1.25;
}
.address-source-hint,
.address-autofill-note {
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px solid #bcd8f5;
  border-radius: 8px;
  background: #eff7ff;
  color: #28557d;
  font-size: .86rem;
  line-height: 1.45;
}
.customer-alert .address-autofill-note {
  margin-top: 8px;
}

/* R10: drag-and-drop order sequencing by sale round */
.filter-row { grid-template-columns: 180px minmax(260px, 1fr) auto; }
.orders-table col.drag { width: 42px; }
.orders-table .drag-col { padding-right: 4px; padding-left: 4px; text-align: center; }
.orders-table .drag-cell { padding: 7px 4px; text-align: center; vertical-align: middle; }
.order-drag-handle { width: 28px; height: 30px; display: inline-grid; place-items: center; padding: 0; color: #557388; background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 18px; font-weight: 800; line-height: 1; cursor: grab; touch-action: none; }
.order-drag-handle:hover { color: #1d5d8b; background: #eaf3fa; border-color: #b7d2e4; }
.order-drag-handle:focus-visible { outline: 3px solid rgba(53, 130, 186, .25); outline-offset: 1px; }
.order-drag-handle:active { cursor: grabbing; }
.order-drag-handle.is-saving { opacity: .45; cursor: progress; }
.order-row.is-dragging td { opacity: .32; }
/* Rows between the source and target slide aside while an order is dragged. */
.orders-table tr.is-order-drag-preview > td {
  transform: translateY(var(--order-row-motion-y, 0px));
  transition: transform 180ms cubic-bezier(.2, .78, .2, 1), box-shadow 160ms ease;
  will-change: transform;
}
.orders-table tbody.is-order-reorder-committing tr.is-order-drag-preview > td { transition: none; }
.order-row.is-drop-before td {
  border-top: 3px solid #1f78b4 !important;
  box-shadow: inset 0 3px 0 rgba(31, 120, 180, .08);
}
.order-row.is-drop-after td {
  border-bottom: 3px solid #1f78b4 !important;
  box-shadow: inset 0 -3px 0 rgba(31, 120, 180, .08);
}
.orders-table .sale-round-divider td { padding: 8px 12px; color: #294c68; background: #eaf3f9; border-right: 0; border-bottom: 1px solid #c4d6e4; font-size: 12px; }
.orders-table .sale-round-divider strong { margin-left: 7px; color: #173d5c; font-size: 13px; }
.orders-table .sale-round-divider small { margin-left: 10px; color: #648096; font-weight: 600; }
.sale-round-label { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px; color: #245a83; background: #d8e9f6; border: 1px solid #bdd5e8; border-radius: 4px; font-size: 10px; font-weight: 900; }
.orders-table .sale-round-divider.is-drop-target td { color: #125f3c; background: #e5f7ed; border-top: 3px solid #278658; border-bottom: 3px solid #278658; }
.orders-table .sale-round-divider.is-drop-target .sale-round-label { color: #11693e; background: #d3f0df; border-color: #9fd6b4; }
.orders-reorder-feedback { display: none; position: sticky; z-index: 8; top: 0; margin: 10px 14px -2px; padding: 8px 10px; color: #126440; background: #e7f8ee; border: 1px solid #b9e4ca; border-radius: 7px; font-size: 12px; font-weight: 800; box-shadow: 0 5px 12px rgba(34, 90, 61, .09); }
.orders-reorder-feedback.is-visible { display: block; }
.orders-reorder-feedback.is-error { color: #962d2d; background: #fff0f0; border-color: #edc5c5; }
.held-detail-content { padding-left: 148px; }

@media (max-width: 1050px) {
  .filter-row { grid-template-columns: 160px minmax(180px, 1fr) auto; }
}
@media (max-width: 560px) {
  .orders-table { min-width: 970px; }
  .orders-table .sale-round-divider small,
  .orders-table .month-divider small { display: none; }
  .held-detail-content { padding-left: 58px; }
}


/* R12/R129: compact insert row at the end of every sale round, with a clearer soft-accent button style */
.orders-table .sale-round-add-row td {
  padding: 4px 12px;
  color: #17566b;
  background: #e7f8fb;
  border-right: 0;
  border-bottom: 1px solid #9fd3df;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
}
.orders-table .sale-round-add-row:hover td,
.orders-table .sale-round-add-row:focus td {
  color: #0d4f66;
  background: #d8f1f7;
}
.orders-table .sale-round-add-row:focus {
  outline: 3px solid rgba(44, 156, 181, .28);
  outline-offset: -3px;
}
.sale-round-add-icon {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 6px;
  color: #fff;
  background: #2c9eb5;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -2px;
}
.orders-table .sale-round-add-row strong {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}
.orders-table .sale-round-add-row small {
  margin-left: 8px;
  color: #71899b;
  font-size: 10px;
}
.orders-table .sale-round-add-row.is-drop-target td {
  color: #125f3c;
  background: #e5f7ed;
  border-top: 3px solid #278658;
  border-bottom: 3px solid #278658;
}
.orders-table .sale-round-add-row.is-drop-target .sale-round-add-icon {
  background: #278658;
}
@media (max-width: 560px) {
  .orders-table .sale-round-add-row small { display: none; }
}


/* R14: compact orders header with a dedicated summary panel */
.orders-page-heading {
  align-items: flex-end;
  margin-bottom: 8px;
}
.orders-page-heading .eyebrow { margin-bottom: 1px; }
.orders-page-heading .page-title { line-height: 1.12; }
.orders-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: 14px;
}
.orders-workspace > * { min-width: 0; }
.orders-shell { overflow: hidden; }
.orders-toolbar {
  padding: 10px 12px 9px;
}
.orders-toolbar .filter-row {
  grid-template-columns: 154px minmax(240px, 1fr) auto auto;
  gap: 8px;
}
.orders-toolbar .status-filter-row {
  gap: 8px;
  margin-top: 8px;
}
.orders-toolbar .toolbar-hint {
  color: #728596;
  font-size: 11px;
  white-space: nowrap;
}
.toolbar-new-order { white-space: nowrap; }
.orders-scroll {
  min-height: 420px;
  max-height: calc(100vh - 214px);
  border-top: 1px solid var(--line);
}
.orders-table col.date { width: 78px; }
.orders-table col.customer { width: 182px; }
.orders-table col.total { width: 108px; }
.orders-table col.payment { width: 145px; }
.orders-table col.delivery { width: 137px; }
.orders-table col.address { width: 272px; }
.orders-summary-panel {
  position: sticky;
  top: 73px;
  overflow: hidden;
}
.orders-summary-heading {
  padding: 13px 14px 11px;
  background: linear-gradient(135deg, #f6fafc, #eef5f9);
  border-bottom: 1px solid #dbe6ed;
}
.orders-summary-heading .eyebrow {
  margin-bottom: 2px;
  color: #3d6686;
  font-size: 10px;
}
.orders-summary-heading h2 {
  margin: 0;
  color: #173d5b;
  font-size: 17px;
  letter-spacing: -.01em;
}
.orders-summary-heading p:not(.eyebrow) {
  margin: 3px 0 0;
  color: #6d8191;
  font-size: 11px;
}
.orders-summary-list {
  display: grid;
  margin: 0;
  padding: 2px 14px 8px;
}
.orders-summary-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e5edf2;
}
.orders-summary-list > div:last-child { border-bottom: 0; }
.orders-summary-list dt {
  color: #62788a;
  font-size: 11px;
  font-weight: 700;
}
.orders-summary-list dd {
  margin: 0;
  color: #183c59;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
.orders-summary-list dd.is-paid { color: #16724c; }
.orders-summary-list dd.is-pending { color: #9b6120; }
.orders-summary-list dd.is-held { color: #1b6f50; }

@media (max-width: 1240px) {
  .orders-workspace { grid-template-columns: minmax(0, 1fr) 236px; }
  .orders-toolbar .filter-row { grid-template-columns: 140px minmax(195px, 1fr) auto auto; }
  .orders-table col.customer { width: 165px; }
  .orders-table col.address { width: 245px; }
}
@media (max-width: 1060px) {
  .orders-workspace { grid-template-columns: 1fr; }
  .orders-summary-panel { position: static; }
  .orders-summary-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; padding-top: 8px; }
  .orders-summary-list > div { display: block; padding: 7px 0; border-bottom: 0; }
  .orders-summary-list dd { margin-top: 2px; text-align: left; }
}
@media (max-width: 760px) {
  .orders-toolbar .filter-row { grid-template-columns: 1fr 1fr; }
  .orders-toolbar .filter-row .search-wrap { grid-column: 1 / -1; }
  .orders-toolbar .filter-row .toolbar-new-order { grid-column: 1 / -1; }
  .orders-toolbar .toolbar-hint { display: none; }
  .orders-summary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orders-scroll { max-height: none; min-height: 0; }
}


/* R16: sale rounds are managed directly; shipping batches are intentionally hidden. */
.month-divider-content,
.sale-round-divider-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.month-add-sale-round {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 4px 8px;
  color: #205878;
  background: #fff;
  border-color: #aac8dc;
  font-size: 11px;
}
.month-add-sale-round:hover { background: #f7fcff; border-color: #699cbc; }
.sale-round-edit-button {
  width: 28px;
  height: 27px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: #285d7e;
  background: #f8fbfd;
  border: 1px solid #b9d1e1;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.sale-round-edit-button:hover { color: #143f5c; background: #fff; border-color: #7aa5bf; }
.sale-round-edit-button.table-edit { width: 31px; height: 29px; }
.round-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 7px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.round-status-open { color: #126440; background: #e7f8ee; border-color: #b9e4ca; }
.round-status-closed { color: #6b5a1d; background: #fff7dc; border-color: #ead89b; }
.round-status-archived { color: #5c6670; background: #f0f3f5; border-color: #d6dde2; }
.sale-rounds-panel { padding: 0; overflow: hidden; }
.sale-rounds-table th:last-child, .sale-rounds-table td:last-child { width: 58px; text-align: center; }

body.sale-round-modal-open { overflow: hidden; }
.sale-round-modal[hidden] { display: none; }
.sale-round-modal { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 18px; }
.sale-round-modal-backdrop { position: absolute; inset: 0; background: rgba(18, 32, 46, .48); backdrop-filter: blur(2px); }
.sale-round-modal-dialog { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(90vh, 780px); overflow: auto; background: #f6f9fb; border: 1px solid rgba(209, 222, 233, .92); border-radius: 12px; box-shadow: 0 24px 64px rgba(10, 27, 43, .35); }
.sale-round-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px 13px; background: #fff; border-bottom: 1px solid #d5e0e8; }
.sale-round-modal-header h2 { margin: 0; color: #173d5d; font-size: 19px; }
.sale-round-modal-header p:not(.eyebrow) { margin: 3px 0 0; color: #687c8d; font-size: 12px; }
.sale-round-modal-fragment { padding: 0 18px 18px; }
.sale-round-form { margin-top: 14px; }
.sale-round-modal-feedback { display: none; margin-top: 12px; padding: 9px 11px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; }
.sale-round-modal-feedback.is-visible { display: block; }
.sale-round-modal-feedback.is-error { color: #9c2727; background: #fff1f1; border-color: #f1c8c8; }
.sale-round-modal-feedback.is-success { color: #146a4d; background: #eaf8f0; border-color: #c2e7d1; }
.sale-round-order-count { margin: -1px 0 0; padding: 8px 10px; color: #335a76; background: #edf5fa; border: 1px solid #d1e1eb; border-radius: 7px; font-size: 12px; }
.sale-round-modal-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.sale-round-modal-actions-spacer { flex: 1; }

@media (max-width: 640px) {
  .month-divider-content,
  .sale-round-divider-content { align-items: flex-start; }
  .month-divider-content small,
  .sale-round-divider-content small { display: none; }
  .sale-round-modal { padding: 0; }
  .sale-round-modal-dialog { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0; }
  .sale-round-modal-fragment { padding: 0 12px 14px; }
  .sale-round-modal-header { padding: 13px 12px; }
  .sale-round-modal-actions { flex-wrap: wrap; }
  .sale-round-modal-actions-spacer { display: none; }
  .sale-round-modal-actions .button.primary { margin-left: auto; }
}

/* R19: larger readable UI and an always-ready item entry row. */
:root { --app-font-size: 15px; }
body { font-size: var(--app-font-size); line-height: 1.52; }
.brand { font-size: 17px; }
.nav-link { font-size: 14px; }
.user-menu { font-size: 13px; }
.page-title { font-size: 27px; }
.page-subtitle { font-size: 14px; }
.button { font-size: 14px; }
.button.compact { font-size: 13px; }
input, select, textarea { font-size: 15px; }
label { font-size: 13px; }
.form-note { font-size: 13px; }
.form-section h2 { font-size: 17px; }
.form-section-head p { font-size: 13px; }
.modal-order-header h2 { font-size: 21px; }
.modal-order-header p:not(.eyebrow) { font-size: 13px; }
.totals-card h2, .summary-link-card h2 { font-size: 16px; }
.total-line { font-size: 14px; }
.total-line.grand { font-size: 17px; }
.total-line.grand strong { font-size: 24px; }
.keyboard-help { font-size: 12px; }
.paste-box { font-size: 13px; }
.item-number { font-size: 12px; }
.item-row.is-standby-item {
  border-color: #9ec7df;
  background: linear-gradient(90deg, #f3faff, #fbfdff);
  box-shadow: inset 3px 0 0 #4a93c3;
}
.item-row.is-standby-item .item-number {
  color: #fff;
  background: #3b83b1;
  font-size: 14px;
}
.item-row.is-standby-item .paste-box {
  color: #54758c;
  background: rgba(255, 255, 255, .88);
  border-color: #99c5df;
}
.item-row.is-standby-item .item-field > input,
.item-row.is-standby-item .price-field > input {
  background: #fff;
  border-color: #9fc7df;
}
.orders-table thead th { font-size: 14px; }
.orders-table .month-divider td { font-size: 14px; }
.orders-table .month-divider strong { font-size: 16px; }
.orders-table .sale-round-divider td { font-size: 13px; }
.orders-table .sale-round-divider strong { font-size: 14px; }
.orders-table .sale-round-add-row td,
.orders-table .sale-round-add-row strong { font-size: 12px; }
.items-cell { font-size: 14px; line-height: 1.55; }
.address-col { font-size: 14px; line-height: 1.55; }
.customer-cell a { font-size: 14px; }
.order-date { font-size: 13px; }
.order-total strong { font-size: 15px; }
.quick-status-select { font-size: 13px; }
.address-source-note { font-size: 12px; }
.held-detail-title { font-size: 13px; }
.held-order-line strong, .held-order-line span, .held-order-line b { font-size: 12px; }
.data-table th { font-size: 13px; }
.data-table td { font-size: 14px; }
.metric span { font-size: 13px; }
.metric strong { font-size: 23px; }
.address-card span, .address-card p, .history-list span, .history-list em { font-size: 13px; }
.public-item h2, .public-payment-note h2 { font-size: 17px; }
.public-total .grand { font-size: 19px; }

@media (max-width: 560px) {
  body { font-size: 15px; }
  .page-title { font-size: 24px; }
  .orders-table thead th { font-size: 13px; }
}

/* R20: prevent duplicate bills by offering an existing order in the same sale round. */
.customer-duplicate-order-choice { margin-top: 10px; }
.duplicate-order-choice-panel {
  overflow: hidden;
  color: #25445b;
  background: #f8fbfe;
  border: 1px solid #a8cbe1;
  border-radius: 9px;
  box-shadow: 0 5px 15px rgba(30, 76, 108, .08);
}
.duplicate-order-choice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px 9px;
  background: #e9f5fc;
  border-bottom: 1px solid #c7dfec;
}
.duplicate-order-choice-head strong { display: block; color: #13517a; font-size: 14px; }
.duplicate-order-choice-head small { display: block; margin-top: 2px; color: #55758b; font-size: 12px; }
.duplicate-choice-dismiss {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  color: #56758b;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 22px;
  line-height: 1;
}
.duplicate-choice-dismiss:hover { color: #173d5d; background: rgba(255,255,255,.72); }
.duplicate-order-choice-intro { margin: 0; padding: 9px 12px 4px; color: #60798a; font-size: 12px; }
.duplicate-order-list { display: grid; gap: 7px; padding: 7px 12px 10px; }
.duplicate-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid #d6e4ec;
  border-radius: 7px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.duplicate-order-card:hover,
.duplicate-order-card:focus-visible {
  background: #f7fcff;
  border-color: #8cc6e7;
  box-shadow: 0 5px 15px rgba(28, 83, 120, .12);
}
.duplicate-order-card:focus-visible { outline: 3px solid rgba(56, 141, 190, .22); outline-offset: 2px; }
.duplicate-order-card:active { transform: translateY(1px); }
.duplicate-order-card.is-append-recommended { border-left: 4px solid #2e9a68; }
.duplicate-order-card.is-separate-recommended { border-left: 4px solid #df9a2e; }
.duplicate-order-card-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.duplicate-order-card-topline strong { color: #1d405a; font-size: 13px; }
.duplicate-order-card-topline span { color: #5d7485; font-size: 12px; text-align: right; }
.duplicate-order-card p { margin: 5px 0; overflow: hidden; color: #2e4b60; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.duplicate-order-card-meta { display: flex; align-items: center; gap: 12px; color: #668092; font-size: 12px; }
.duplicate-order-card-meta b { color: #173f5e; font-size: 13px; }
.duplicate-order-card-main > small { display: block; margin-top: 4px; color: #778d9c; font-size: 11px; }
.duplicate-order-card-action { align-self: stretch; display: flex; align-items: center; }
.duplicate-order-card-action .button { white-space: nowrap; }
.duplicate-order-choice-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #d8e5ec;
}
.duplicate-order-choice-footer small { color: #667f90; font-size: 11px; line-height: 1.35; }
.duplicate-order-confirmed {
  padding: 9px 11px;
  color: #146a4d;
  background: #eaf8f0;
  border: 1px solid #bfe4cf;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}
.duplicate-order-confirmed.is-warning {
  color: #8a5a0d;
  background: #fff8df;
  border-color: #ead28c;
}

@media (max-width: 680px) {
  .duplicate-order-card { grid-template-columns: 1fr; }
  .duplicate-order-card-action { align-self: auto; }
  .duplicate-order-card-action .button { width: 100%; justify-content: center; }
  .duplicate-order-choice-footer { align-items: stretch; flex-direction: column; }
  .duplicate-order-choice-footer .button { justify-content: center; }
  .duplicate-order-card-topline { align-items: flex-start; flex-direction: column; gap: 2px; }
  .duplicate-order-card-topline span { text-align: left; }
}

/* R21: quiet autosave feedback in the order editor. */
.order-autosave-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-top: 4px;
  color: #718394;
  font-size: 12px;
  font-weight: 700;
  transition: color .18s ease, opacity .18s ease;
}
.order-autosave-status.is-saving { color: #24648f; }
.order-autosave-status.is-saved { color: #18724f; }
.order-autosave-status.is-warning { color: #9a671a; }
.order-autosave-status.is-error { color: #a12d2d; }

@media (max-width: 560px) {
  .order-autosave-status { font-size: 11px; }
}


/* R22: show per-item prices and make shipping editable directly in the order table. */
.items-summary { white-space: pre-line; }
.shipping-inline-editor {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed #c6d6e2;
}
.shipping-inline-display {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
  padding: 1px 2px;
  color: #436075;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}
.shipping-inline-display strong { color: #254d69; font-weight: 800; }
.shipping-inline-display:hover,
.shipping-inline-display:focus-visible { color: #0f527f; background: #e7f3fb; outline: 0; }
.shipping-inline-display:hover strong,
.shipping-inline-display:focus-visible strong { color: #0f527f; }
.shipping-inline-pencil { margin-left: 2px; color: #66849a; font-size: 12px; opacity: .72; }
.shipping-inline-display:hover .shipping-inline-pencil,
.shipping-inline-display:focus-visible .shipping-inline-pencil { opacity: 1; }
.shipping-inline-form { display: inline-flex; align-items: center; gap: 4px; }
.shipping-inline-form[hidden] { display: none; }
.shipping-inline-input {
  width: 82px;
  min-height: 27px;
  padding: 3px 6px;
  color: #173f5a;
  background: #fff;
  border: 1px solid #80accb;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}
.shipping-inline-save,
.shipping-inline-cancel {
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #c2d4df;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.shipping-inline-save { color: #166a42; background: #e8f7ed; border-color: #acd7bb; }
.shipping-inline-cancel { color: #9e3131; background: #fff1f1; border-color: #efc6c6; }
.shipping-inline-editor.is-saving { opacity: .64; pointer-events: none; }
.order-row.state-held .shipping-inline-display,
.order-row.state-held .shipping-inline-display strong { color: #177548; }
.order-row.state-separate .shipping-inline-display,
.order-row.state-separate .shipping-inline-display strong { color: #b22929; }

/* R23: Paste-first image area; file chooser stays available without taking over the row. */
.item-row.is-standby-item .paste-box-main { color: #40677f; }
.item-row.is-standby-item .file-picker-toggle { color: #3f7190; }
@media (max-width: 560px) {
  .paste-box { min-height: 90px; }
  .paste-box-main { min-height: 45px; padding-right: 4px; padding-left: 4px; }
  .file-picker-panel { max-width: 100%; }
}

/* R24: make monthly and sale-round insertion landmarks clearer in the order worksheet. */
.orders-table .month-divider td {
  padding: 12px 14px;
  color: #ffffff;
  background: linear-gradient(100deg, #1b4d70 0%, #236783 52%, #237a78 100%);
  border-top: 1px solid #153e5c;
  border-bottom: 1px solid #153e5c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(20, 60, 84, .14);
}
.orders-table .month-divider strong {
  margin-left: 8px;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: .01em;
}
.orders-table .month-divider small {
  margin-left: 10px;
  color: rgba(241, 250, 255, .84);
  font-weight: 700;
}
.month-label {
  min-height: 23px;
  padding: 3px 8px;
  color: #dff7f4;
  background: rgba(6, 37, 57, .32);
  border-color: rgba(230, 250, 248, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 10px;
}
.month-add-sale-round {
  min-height: 31px;
  padding: 5px 10px;
  color: #174d68;
  background: #ffffff;
  border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 2px rgba(5, 34, 52, .16);
  font-size: 12px;
}
.month-add-sale-round:hover,
.month-add-sale-round:focus-visible {
  color: #103d56;
  background: #e8fbf9;
  border-color: #ffffff;
  outline: 0;
}

/* The insertion row is intentionally taller and visually separate from the data rows. */
.orders-table .sale-round-add-row td {
  min-height: 46px;
  padding: 10px 14px;
  color: #11546a;
  background: linear-gradient(90deg, #d6f2f7 0%, #edfafd 58%, #e8f7f1 100%);
  border-top: 1px solid #8fd0dc;
  border-bottom: 2px solid #83c4d1;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: inset 4px 0 0 #28a0b8;
}
.orders-table .sale-round-add-row:hover td,
.orders-table .sale-round-add-row:focus td {
  color: #0a4a5e;
  background: linear-gradient(90deg, #c9edf4 0%, #e2f7fc 55%, #ddf4ec 100%);
  border-top-color: #63b7c8;
  border-bottom-color: #63b7c8;
  box-shadow: inset 5px 0 0 #1f91aa, 0 2px 7px rgba(31, 145, 170, .14);
}
.orders-table .sale-round-add-row:focus {
  outline: 3px solid rgba(40, 160, 184, .30);
  outline-offset: -3px;
}
.sale-round-add-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #2aa9c2, #269f8d);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(31, 145, 170, .22);
  font-size: 19px;
}
.orders-table .sale-round-add-row strong {
  color: inherit;
  font-size: 13px;
  font-weight: 900;
}
.orders-table .sale-round-add-row small {
  margin-left: 10px;
  color: #5c8198;
  font-size: 11px;
  font-weight: 700;
}
.orders-table .sale-round-add-row.is-drop-target td {
  color: #0f653f;
  background: #dcf5e7;
  border-top: 3px solid #278658;
  border-bottom: 3px solid #278658;
  box-shadow: inset 5px 0 0 #278658;
}
.orders-table .sale-round-add-row.is-drop-target .sale-round-add-icon {
  background: #278658;
}

@media (max-width: 560px) {
  .orders-table .month-divider td { padding: 10px 11px; }
  .orders-table .month-divider strong { font-size: 14px; }
  .orders-table .sale-round-add-row td { min-height: 42px; padding: 9px 11px; }
  .orders-table .sale-round-add-row small { display: none; }
}


/* R25: wider identity columns, practical drag gaps, and closable file chooser. */
.orders-table col.date { width: 102px; }
.orders-table col.customer { width: 236px; }
.orders-table col.items { width: 315px; }

/* This overlay is positioned in the animated empty gap. It makes the large visual
   insertion space an actual drop target rather than a purely decorative preview. */
.order-drop-gap-overlay {
  position: fixed;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 24px;
  color: #17648e;
  background: rgba(225, 244, 253, .88);
  border: 2px dashed #2784ba;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(18, 92, 138, .16), inset 0 0 0 1px rgba(255, 255, 255, .72);
  pointer-events: auto;
  transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}
.order-drop-gap-overlay[hidden] { display: none; }
.order-drop-gap-overlay span {
  padding: 3px 9px;
  color: #0c5b85;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(82, 156, 197, .44);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(13, 74, 109, .08);
}

.file-picker-panel {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
  padding: 8px 9px 9px;
  background: #f8fbfd;
  border: 1px dashed #b9d4e4;
  border-radius: 6px;
}
.file-picker-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #55738a;
  font-size: 12px;
  font-weight: 700;
}
.file-picker-close {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  color: #8e3e3e;
  background: #fff5f5;
  border: 1px solid #e8bcbc;
  border-radius: 5px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.file-picker-close:hover,
.file-picker-close:focus-visible {
  color: #752626;
  background: #ffe8e8;
  border-color: #d98b8b;
  outline: 0;
}
.file-picker-panel .item-file-input { max-width: 100%; }

@media (max-width: 1240px) {
  .orders-table col.date { width: 96px; }
  .orders-table col.customer { width: 214px; }
  .orders-table col.items { width: 290px; }
}
@media (max-width: 560px) {
  .orders-table { min-width: 1240px; }
  .orders-table col.date { width: 96px; }
  .orders-table col.customer { width: 214px; }
  .orders-table col.items { width: 290px; }
  .order-drop-gap-overlay span { font-size: 11px; }
}

/* R27: direct order deletion from the orders table. */
.orders-table col.drag { width: 48px; }
.orders-table .drag-cell { padding: 7px 3px; }
.order-row-actions { display: grid; justify-items: center; gap: 4px; }
.order-delete-button {
  width: 28px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #a52f2f;
  background: #fff5f5;
  border: 1px solid #edc9c9;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.order-delete-button:hover { color: #fff; background: #b43838; border-color: #b43838; }
.order-delete-button:focus-visible { outline: 3px solid rgba(180, 56, 56, .24); outline-offset: 1px; }
.order-delete-button:disabled { opacity: .55; cursor: progress; }
.order-row.is-order-deleting > td { opacity: .52; transition: opacity .14s ease; }



/* R28: in-app confirmation dialog for destructive actions. */
.app-confirm-dialog[hidden] { display: none; }
.app-confirm-dialog {
  position: fixed;
  z-index: 360;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}
.app-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 32, 46, .52);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .16s ease;
}
.app-confirm-panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  padding: 22px;
  color: #263d50;
  background: #fff;
  border: 1px solid #d5e2ec;
  border-radius: 13px;
  box-shadow: 0 24px 68px rgba(9, 25, 42, .32);
  opacity: 0;
  transform: translateY(9px) scale(.985);
  transition: opacity .16s ease, transform .16s ease;
}
.app-confirm-dialog.is-open .app-confirm-backdrop { opacity: 1; }
.app-confirm-dialog.is-open .app-confirm-panel { opacity: 1; transform: translateY(0) scale(1); }
.app-confirm-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  align-self: start;
  color: #ab2d2d;
  background: #fff1f1;
  border: 1px solid #f0c9c9;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.app-confirm-content { min-width: 0; }
.app-confirm-content h2 {
  margin: 1px 0 7px;
  color: #173d5d;
  font-size: 20px;
  line-height: 1.35;
}
.app-confirm-message {
  margin: 0;
  color: #526d81;
  font-size: 14px;
  line-height: 1.6;
}
.app-confirm-warning {
  margin-top: 12px;
  padding: 9px 10px;
  color: #8b3030;
  background: #fff6f6;
  border: 1px solid #f1d1d1;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}
.app-confirm-warning::before { content: '⚠ '; }
.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.button.danger,
.app-confirm-accept {
  color: #fff;
  background: #b43838;
  border-color: #a52f2f;
}
.button.danger:hover,
.button.danger:focus-visible,
.app-confirm-accept:hover,
.app-confirm-accept:focus-visible {
  color: #fff;
  background: #922525;
  border-color: #7e1f1f;
}
.app-confirm-accept:focus-visible,
.app-confirm-cancel:focus-visible {
  outline: 3px solid rgba(45, 117, 177, .28);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .app-confirm-dialog { padding: 12px; }
  .app-confirm-panel { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 17px; border-radius: 11px; }
  .app-confirm-icon { width: 40px; height: 40px; font-size: 19px; }
  .app-confirm-content h2 { font-size: 18px; }
  .app-confirm-actions { margin-top: 15px; }
  .app-confirm-actions .button { flex: 1 1 120px; }
}

/* R29: Warm sale-round headers. The month divider remains the cool-blue primary landmark;
   sale rounds use a restrained terracotta/sand band for a clear second-level hierarchy. */
.orders-table .sale-round-divider td {
  padding: 9px 13px;
  color: #6b3d2a;
  background: linear-gradient(90deg, #f7dfcb 0%, #fff2e8 55%, #f7e4d4 100%);
  border-top: 1px solid #d9ac8a;
  border-bottom: 1px solid #d8b193;
  box-shadow: inset 5px 0 0 #c97648, inset 0 1px 0 rgba(255, 255, 255, .68);
}
.orders-table .sale-round-divider strong {
  color: #6b3823;
  font-size: 14px;
  letter-spacing: .005em;
}
.orders-table .sale-round-divider small {
  color: #93614a;
  font-weight: 700;
}
.sale-round-label {
  min-height: 21px;
  padding: 2px 7px;
  color: #fff8f2;
  background: linear-gradient(135deg, #b9663d, #a94f32);
  border-color: #a14b2f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 1px rgba(106, 49, 27, .16);
}
.orders-table .sale-round-divider .sale-round-edit-button.table-edit {
  color: #8c4b2f;
  background: rgba(255, 251, 247, .92);
  border-color: #d9aa89;
  box-shadow: 0 1px 1px rgba(109, 54, 31, .08);
}
.orders-table .sale-round-divider .sale-round-edit-button.table-edit:hover,
.orders-table .sale-round-divider .sale-round-edit-button.table-edit:focus-visible {
  color: #6d321f;
  background: #fff4ea;
  border-color: #bf7650;
  outline: 0;
}
.orders-table .sale-round-divider.is-drop-target td {
  color: #0f653f;
  background: #dcf5e7;
  border-top: 3px solid #278658;
  border-bottom: 3px solid #278658;
  box-shadow: inset 5px 0 0 #278658;
}
.orders-table .sale-round-divider.is-drop-target .sale-round-label {
  color: #fff;
  background: #278658;
  border-color: #1f7049;
}

@media (max-width: 560px) {
  .orders-table .sale-round-divider td { padding: 8px 10px; }
}


/* R30: sales summary rows and a warmer rose–apricot sale-round gradient.
   Month bands remain the cool primary landmark; the sale-round band is now a softer
   gradient with a clearer, professional hierarchy instead of the previous brick tone. */
.orders-table .sale-round-divider td {
  padding: 10px 13px;
  color: #60314c;
  background: linear-gradient(102deg, #f8dce8 0%, #fee8d2 48%, #f3dff3 100%);
  border-top: 1px solid #e3b7c9;
  border-bottom: 1px solid #dfbccd;
  box-shadow: inset 5px 0 0 #b64b75, inset 0 1px 0 rgba(255,255,255,.76);
}
.orders-table .sale-round-divider strong { color: #5f2947; }
.orders-table .sale-round-divider small { color: #8c5d72; }
.sale-round-label {
  color: #fff;
  background: linear-gradient(135deg, #a64369 0%, #c7607c 48%, #d67c57 100%);
  border-color: #9a3e63;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 1px rgba(94, 35, 63, .16);
}
.orders-table .sale-round-divider .sale-round-edit-button.table-edit,
.orders-table .sale-round-divider .sale-round-edit-button {
  color: #8f3d61;
  background: rgba(255,255,255,.82);
  border-color: #e0a8bf;
  box-shadow: 0 1px 1px rgba(92, 38, 60, .08);
}
.orders-table .sale-round-divider .sale-round-edit-button.table-edit:hover,
.orders-table .sale-round-divider .sale-round-edit-button.table-edit:focus-visible,
.orders-table .sale-round-divider .sale-round-edit-button:hover,
.orders-table .sale-round-divider .sale-round-edit-button:focus-visible {
  color: #69223f;
  background: #fff8fb;
  border-color: #bd6586;
  outline: 0;
}
.orders-table .sale-round-divider.is-drop-target td {
  color: #0f653f;
  background: #dcf5e7;
  border-top: 3px solid #278658;
  border-bottom: 3px solid #278658;
  box-shadow: inset 5px 0 0 #278658;
}
.orders-table .sale-round-divider.is-drop-target .sale-round-label {
  color: #fff;
  background: #278658;
  border-color: #1f7049;
}

.orders-table .sale-round-summary-row td {
  padding: 7px 13px;
  color: #6b4960;
  background: linear-gradient(90deg, #fff9fb 0%, #fffdf9 49%, #fbf7fd 100%);
  border-right: 0;
  border-bottom: 1px solid #ebdbe3;
}
.sale-round-summary-content,
.month-summary-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sale-round-summary-label-wrap,
.month-summary-label-wrap,
.sale-round-summary-total,
.month-summary-total {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.sale-round-summary-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  color: #8d3c60;
  background: #fdebf2;
  border: 1px solid #edc6d5;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}
.sale-round-summary-count,
.month-summary-count {
  color: #8b7180;
  font-size: 12px;
  font-weight: 700;
}
.sale-round-summary-total span,
.month-summary-total span {
  color: #8d7180;
  font-size: 12px;
  font-weight: 700;
}
.sale-round-summary-total strong {
  color: #7f3155;
  font-size: 14px;
}
.sale-round-summary-total em,
.month-summary-total em {
  color: #8a7280;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.orders-table .month-summary-row td {
  padding: 9px 13px;
  color: #1f4e61;
  background: linear-gradient(100deg, #e3f1f3 0%, #edf5fa 51%, #e9f5f0 100%);
  border-top: 1px solid #bad6d8;
  border-right: 0;
  border-bottom: 2px solid #a9cdd0;
  box-shadow: inset 5px 0 0 #277b7b;
}
.month-summary-label {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  color: #fff;
  background: linear-gradient(135deg, #215a78, #237d78);
  border: 1px solid #246e73;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
}
.month-summary-label-wrap > strong {
  color: #1c4d66;
  font-size: 13px;
}
.month-summary-total strong {
  color: #145d67;
  font-size: 15px;
}
.orders-table .sale-round-summary-row.is-drop-target td {
  color: #0f653f;
  background: #dcf5e7;
  border-top: 2px solid #278658;
  border-bottom: 2px solid #278658;
}

@media (max-width: 560px) {
  .sale-round-summary-content,
  .month-summary-content { gap: 8px; }
  .sale-round-summary-count,
  .month-summary-count { display: none; }
  .orders-table .sale-round-summary-row td,
  .orders-table .month-summary-row td { padding: 8px 10px; }
  .sale-round-summary-total strong,
  .month-summary-total strong { font-size: 13px; }
}


/* R31: keep destructive controls away from the drag handle. */
.orders-table col.actions { width: 54px; }
.orders-table .order-actions-col {
  padding-right: 6px;
  padding-left: 6px;
  text-align: center;
}
.orders-table .order-delete-cell {
  padding: 7px 6px;
  text-align: center;
  vertical-align: middle;
}
.orders-table .drag-cell {
  text-align: center;
  vertical-align: middle;
}
.orders-table .order-delete-cell .order-delete-button {
  display: inline-grid;
}
@media (max-width: 560px) {
  .orders-table col.actions { width: 50px; }
}


/* R32: keep the worksheet inside its work area, make aggregate totals react to inline edits,
   and clarify the customer-profile versus order-edit click zones. */
.orders-table { width: 100%; max-width: 100%; }
.orders-table col.drag { width: 42px; }
.orders-table col.date { width: 90px; }
.orders-table col.customer { width: 175px; }
.orders-table col.items { width: auto; }
.orders-table col.total { width: 106px; }
.orders-table col.payment { width: 136px; }
.orders-table col.delivery { width: 128px; }
.orders-table col.address { width: 180px; }
.orders-table col.actions { width: 44px; }
.orders-table .order-actions-col,
.orders-table .order-delete-cell { padding-right: 4px; padding-left: 4px; }

/* The name row is deliberately a distinct profile-link zone. Clicking below the dashed
   boundary still uses the existing row handler to open the order editor. */
.orders-table .customer-name-line {
  min-height: 31px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px dashed #9bb7c9;
}
.orders-table .customer-name-line .customer-link {
  display: block;
  padding: 1px 0;
}
.orders-table .customer-cell .held-expand-button { margin-top: 0; }

/* Keep the compact worksheet usable before horizontal scrolling is needed. The summary
   panel moves below the table sooner, preserving an adequate product column on laptops. */
@media (max-width: 1360px) {
  .orders-workspace { grid-template-columns: 1fr; }
  .orders-summary-panel { position: static; }
  .orders-summary-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; padding-top: 8px; }
  .orders-summary-list > div { display: block; padding: 7px 0; border-bottom: 0; }
  .orders-summary-list dd { margin-top: 2px; text-align: left; }
  .orders-table col.address { width: 220px; }
}
@media (max-width: 1120px) {
  .orders-table { min-width: 1050px; }
}
@media (max-width: 760px) {
  .orders-table { min-width: 1000px; }
  .orders-table col.date { width: 88px; }
  .orders-table col.customer { width: 168px; }
  .orders-table col.address { width: 205px; }
}

/* R33: widen the Facebook customer column by 140px. Because the product column is the
   flexible column, it contracts by the same 140px while the worksheet keeps its current width. */
@media (min-width: 761px) {
  .orders-table col.customer { width: 315px; }
}

/* R34: rebalance the worksheet columns and strengthen table grid lines.
   Customer column gives back 50px to the flexible product column on desktop. */
@media (min-width: 761px) {
  .orders-table col.customer { width: 265px; }
  .orders-table col.items { width: auto; }
}

/* Darker grid lines improve row/column boundaries without changing status fills. */
.orders-table thead th {
  border-bottom-color: #9caebd;
  border-right-color: #b3c1cc;
}
.orders-table tbody td {
  border-bottom-color: #bcc9d3;
  border-right-color: #c3ced7;
}
.orders-table .month-divider td {
  border-top-color: #9cb8cb;
  border-bottom-color: #93b0c3;
}
.orders-table .sale-round-divider td {
  border-top-color: #d0afc1;
  border-bottom-color: #c9a7b9;
}
.orders-table .sale-round-summary-row td {
  border-bottom-color: #d6c1cc;
}
.orders-table .month-summary-row td {
  border-top-color: #9fc5c8;
  border-bottom-color: #88b2b7;
}


/* R35: make the insert row a clearly separate primary action, and keep the
   always-ready item row collapsed until the user explicitly asks to add one. */
.orders-table .sale-round-add-row td {
  padding: 10px 12px;
  background: #fbfdff;
  border-top: 9px solid #ffffff;
  border-right: 0;
  border-bottom: 1px solid #9fc9dd;
  cursor: pointer;
}
.sale-round-add-content {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  color: #155574;
  background: linear-gradient(105deg, #e3f6ff 0%, #edfaff 52%, #e6f7f2 100%);
  border: 1px solid #8fc2da;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 2px 5px rgba(22, 99, 138, .10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.orders-table .sale-round-add-row:hover .sale-round-add-content,
.orders-table .sale-round-add-row:focus .sale-round-add-content {
  color: #0f4d6e;
  background: linear-gradient(105deg, #d6f2ff 0%, #e6f8ff 52%, #d8f5eb 100%);
  border-color: #4a9ac2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 5px 12px rgba(22, 99, 138, .16);
  transform: translateY(-1px);
}
.orders-table .sale-round-add-row:focus { outline: 0; }
.orders-table .sale-round-add-row:focus .sale-round-add-content { outline: 3px solid rgba(47, 132, 181, .24); outline-offset: 2px; }
.sale-round-add-icon {
  width: 25px;
  height: 25px;
  margin: 0;
  color: #fff;
  background: linear-gradient(135deg, #1e7aa8, #197c72);
  box-shadow: 0 2px 5px rgba(23, 102, 135, .24);
  font-size: 20px;
}
.sale-round-add-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.orders-table .sale-round-add-row strong { color: inherit; font-size: 14px; font-weight: 900; }
.orders-table .sale-round-add-row small { margin: 0; color: #4f758b; font-size: 11px; font-weight: 700; }
.sale-round-add-hint {
  margin-left: auto;
  padding: 3px 8px;
  color: #2a728f;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(104, 167, 196, .54);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.orders-table .sale-round-add-row.is-drop-target td {
  background: #f7fffa;
  border-top-color: #ffffff;
  border-bottom-color: #278658;
  box-shadow: none;
}
.orders-table .sale-round-add-row.is-drop-target .sale-round-add-content {
  color: #0f653f;
  background: #dcf5e7;
  border: 2px solid #278658;
  box-shadow: inset 5px 0 0 #278658;
}
.orders-table .sale-round-add-row.is-drop-target .sale-round-add-icon { background: #278658; }

/* Summary rows are quiet, read-only ledger footers rather than action rows. */
.orders-table .sale-round-summary-row td {
  padding: 5px 14px;
  color: #715567;
  background: #fdfbfc;
  border-top: 1px dashed #d8bfcf;
  border-bottom: 1px solid #e5d7df;
  cursor: default;
}
.orders-table .sale-round-summary-row:hover td { filter: none; }
.sale-round-summary-label { min-height: 18px; color: #8a4a69; background: #faeef3; border-color: #e7c8d6; font-size: 10px; }
.sale-round-summary-count { color: #8d7481; font-size: 11px; }
.sale-round-summary-total span { color: #8e7481; font-size: 11px; }
.sale-round-summary-total strong { color: #7d3c5a; font-size: 13px; }
.orders-table .month-summary-row td {
  padding-top: 8px;
  border-top: 7px solid #ffffff;
  cursor: default;
}

/* A collapsed standby item is intentionally not a paste target. It becomes an
   editable item only after the explicit "เพิ่มรายการสินค้า" click. */
.item-row-editor { display: contents; }
.standby-item-expand { display: none; }
.item-row.is-standby-item {
  display: block;
  padding: 0;
  overflow: hidden;
  border-color: #91bed8;
  background: linear-gradient(105deg, #edf9ff, #f7fdff 58%, #eefaf5);
  box-shadow: inset 4px 0 0 #3a91bd;
}
.item-row.is-standby-item .item-row-editor { display: none; }
/* The very first blank row of a new/empty order stays open. It is still a
   standby row (so it is ignored when empty), but it is ready for typing or
   Ctrl+V without the user having to click the add-item control first. */
.item-row.is-standby-item.is-standby-open {
  display: grid;
  padding: 10px;
}
.item-row.is-standby-item.is-standby-open .item-row-editor { display: contents; }
.item-row.is-standby-item.is-standby-open .standby-item-expand { display: none; }
.item-row.is-standby-item.is-standby-open .paste-box,
.item-row.is-standby-item.is-standby-open .item-field > input,
.item-row.is-standby-item.is-standby-open .price-field > input { pointer-events: auto; }
.item-row.is-standby-item .standby-item-expand {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  color: #1d607f;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}
.item-row.is-standby-item .standby-item-expand:hover,
.item-row.is-standby-item .standby-item-expand:focus-visible {
  color: #104c6e;
  background: rgba(216, 243, 255, .82);
  outline: 0;
}
.item-row.is-standby-item .standby-item-expand span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2b83b1, #237a72);
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.item-row.is-standby-item .paste-box,
.item-row.is-standby-item .item-field > input,
.item-row.is-standby-item .price-field > input { pointer-events: none; }

/* A brief highlight confirms the row that received a saved append after reload. */
.order-row.is-focus-target td {
  animation: order-focus-pulse 2.35s ease both;
  box-shadow: inset 0 0 0 2px rgba(43, 133, 188, .78);
}
@keyframes order-focus-pulse {
  0% { background-color: #cdeeff; }
  25% { background-color: #e4f6ff; }
  72% { background-color: #e8f5fc; }
  100% { box-shadow: inset 0 0 0 0 rgba(43, 133, 188, 0); }
}

@media (max-width: 560px) {
  .orders-table .sale-round-add-row td { padding: 8px 9px; border-top-width: 7px; }
  .sale-round-add-content { min-height: 42px; padding: 8px 10px; }
  .orders-table .sale-round-add-row small,
  .sale-round-add-hint { display: none; }
  .item-row.is-standby-item .standby-item-expand { min-height: 44px; }
}

/* R38: customer book management modal and safe customer merge workflow. */
.customers-table .customer-list-row { cursor: pointer; }
.customers-table .customer-list-row:focus { outline: 3px solid rgba(43, 126, 177, .32); outline-offset: -3px; }
.customers-table .customer-list-row:hover td { background: #edf7fc; }
.customers-table .customer-table { color: #1d4d73; }
.customers-table .customer-table strong { font-weight: 850; }

body.customer-modal-open { overflow: hidden; }
.customer-modal[hidden] { display: none; }
.customer-modal { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: 18px; }
.customer-modal-backdrop { position: absolute; inset: 0; background: rgba(18, 32, 46, .52); backdrop-filter: blur(2px); }
.customer-modal-dialog { position: relative; z-index: 1; width: min(980px, 100%); max-height: min(92vh, 980px); overflow: auto; background: #f5f8fb; border: 1px solid rgba(209, 222, 233, .96); border-radius: 12px; box-shadow: 0 24px 64px rgba(10, 27, 43, .36); }
.customer-modal-header { position: sticky; z-index: 4; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px 13px; background: rgba(255,255,255,.97); border-bottom: 1px solid #d5e0e8; box-shadow: 0 2px 9px rgba(23, 47, 68, .05); backdrop-filter: blur(8px); }
.customer-modal-header h2 { margin: 0; color: #173d5d; font-size: 21px; }
.customer-modal-header p:not(.eyebrow) { margin: 3px 0 0; color: #617789; font-size: 13px; font-weight: 750; }
.customer-modal-body { padding: 15px 18px 20px; }
.customer-modal-feedback { display: none; margin: 0 0 12px; padding: 9px 11px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 750; }
.customer-modal-feedback.is-visible { display: block; }
.customer-modal-feedback.is-error { color: #9c2727; background: #fff1f1; border-color: #f1c8c8; }
.customer-modal-feedback.is-success { color: #146a4d; background: #eaf8f0; border-color: #c2e7d1; }
.customer-modal-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
.customer-modal-metrics > div { min-height: 68px; padding: 10px 11px; background: linear-gradient(135deg,#f9fcfe,#edf6fa); border: 1px solid #d1e0e8; border-radius: 8px; }
.customer-modal-metrics span { display: block; color: #6b8191; font-size: 11px; font-weight: 750; }
.customer-modal-metrics strong { display: block; margin-top: 3px; color: #1e5577; font-size: 18px; }
.customer-modal-section { margin-top: 12px; padding: 14px; background: #fff; border: 1px solid #d7e2e9; border-radius: 9px; }
.customer-modal-section h3 { margin: 0; color: #234c69; font-size: 16px; }
.customer-modal-section .form-section-head { margin-bottom: 10px; }
.customer-modal-section .form-section-head p { font-size: 12px; }
.customer-modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.customer-modal-actions > span { flex: 1; }
.customer-address-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.customer-modal-address-card { padding: 10px; background: #f7fafc; border: 1px solid #dce5ec; border-radius: 7px; }
.customer-modal-address-card strong, .customer-modal-address-card small { display: block; }
.customer-modal-address-card small { margin-top: 1px; color: #6f8292; font-size: 11px; }
.customer-modal-address-card p { margin: 7px 0 0; color: #3e586b; font-size: 12px; line-height: 1.55; white-space: pre-line; }
.customer-merge-section { border-color: #efc7cc; background: linear-gradient(135deg,#fffafb,#fff5f5); }
.customer-merge-warning { padding: 9px 10px; color: #8a3b43; background: #fff0f1; border: 1px solid #efc6cb; border-radius: 7px; font-size: 12px; line-height: 1.5; }
.customer-merge-suggestions { overflow: hidden; margin-top: 6px; background: #fff; border: 1px solid #d1dfe8; border-radius: 7px; }
.customer-merge-suggestions:empty { display: none; }
.customer-merge-suggestions button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; color: #294d67; background: #fff; border: 0; border-bottom: 1px solid #e5ecf1; text-align: left; }
.customer-merge-suggestions button:last-child { border-bottom: 0; }
.customer-merge-suggestions button:hover { background: #edf7fc; }
.customer-merge-suggestions small { color: #778b99; }
.customer-merge-empty { display: block; padding: 9px 10px; color: #7d8992; font-size: 12px; }
.customer-merge-selected { margin-top: 8px; padding: 8px 10px; color: #176044; background: #eaf8f0; border: 1px solid #bfe6d0; border-radius: 7px; font-size: 12px; font-weight: 800; }
.customer-modal-history { overflow: auto; max-height: 260px; border: 1px solid #dce6ed; border-radius: 7px; }
.customer-history-line { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-bottom: 1px solid #e5edf2; }
.customer-history-line:last-child { border-bottom: 0; }
.customer-history-line > span { color: #6f8292; font-size: 12px; }
.customer-history-line > strong { overflow: hidden; color: #34536a; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.customer-history-line > em { color: #214f70; font-size: 12px; font-style: normal; font-weight: 850; white-space: nowrap; }

@media (max-width: 720px) {
  .customer-modal { padding: 0; }
  .customer-modal-dialog { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0; }
  .customer-modal-header { padding: 13px 12px; }
  .customer-modal-body { padding: 12px; }
  .customer-modal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-address-list { grid-template-columns: 1fr; }
  .customer-history-line { grid-template-columns: 92px minmax(0,1fr); }
  .customer-history-line > em { grid-column: 2; }
}

/* R39 — Customer merge collapse and internal order summary modal */
.customer-merge-section { padding: 0; overflow: hidden; }
.customer-merge-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  color: #7f3640;
  background: linear-gradient(135deg, #fffafb, #fff4f5);
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.customer-merge-toggle:hover { background: linear-gradient(135deg, #fff4f5, #ffecef); }
.customer-merge-toggle > span:first-child { min-width: 0; }
.customer-merge-toggle strong,
.customer-merge-toggle small { display: block; }
.customer-merge-toggle strong { font-size: 16px; }
.customer-merge-toggle small { margin-top: 3px; color: #98626a; font-size: 12px; font-weight: 650; line-height: 1.35; }
.customer-merge-toggle-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; color: #9c4350; background: #fff; border: 1px solid #efc7cc; border-radius: 50%; font-size: 19px; font-weight: 800; line-height: 1; transition: transform .16s ease, background .16s ease; }
.customer-merge-section.is-expanded .customer-merge-toggle-icon { transform: rotate(180deg); background: #fff0f1; }
.customer-merge-panel { padding: 0 14px 14px; background: linear-gradient(135deg,#fffafb,#fff5f5); border-top: 1px solid #f2d5d8; }
.customer-merge-panel[hidden] { display: none; }
.customer-merge-panel .customer-merge-warning { margin-top: 13px; }

.customer-history-line {
  width: 100%;
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) auto 16px;
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  color: inherit;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e5edf2;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .14s ease, box-shadow .14s ease;
}
.customer-history-line:last-child { border-bottom: 0; }
.customer-history-line:hover { background: #edf7fc; box-shadow: inset 3px 0 0 #2b83ab; }
.customer-history-line:focus-visible { position: relative; z-index: 1; outline: 2px solid #4f98bd; outline-offset: -2px; }
.customer-history-line > i { align-self: center; color: #51819a; font-size: 20px; font-style: normal; font-weight: 800; line-height: 1; }

body.order-summary-modal-open { overflow: hidden; }
.order-summary-modal[hidden] { display: none; }
.order-summary-modal { position: fixed; z-index: 245; inset: 0; display: grid; place-items: center; padding: 18px; }
.order-summary-modal-backdrop { position: absolute; inset: 0; background: rgba(18,32,46,.54); backdrop-filter: blur(2px); }
.order-summary-modal-dialog { position: relative; z-index: 1; width: min(900px, 100%); max-height: min(92vh, 980px); overflow: auto; background: #f4f8fb; border: 1px solid rgba(209,222,233,.96); border-radius: 12px; box-shadow: 0 24px 64px rgba(10,27,43,.36); }
.order-summary-modal-header { position: sticky; z-index: 4; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px 13px; background: rgba(255,255,255,.97); border-bottom: 1px solid #d5e0e8; box-shadow: 0 2px 9px rgba(23,47,68,.05); backdrop-filter: blur(8px); }
.order-summary-modal-header h2 { margin: 0; color: #173d5d; font-size: 21px; }
.order-summary-modal-header p:not(.eyebrow) { margin: 3px 0 0; color: #617789; font-size: 13px; font-weight: 750; }
.order-summary-modal-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.order-summary-modal-body { padding: 15px 18px 20px; }
.order-summary-status-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.order-summary-items-section { padding: 14px; background: #fff; border: 1px solid #d7e2e9; border-radius: 9px; }
.order-summary-items-section .form-section-head { margin-bottom: 8px; }
.order-summary-item-list { display: grid; gap: 9px; }
.order-summary-item-card { padding: 11px; background: #f8fbfd; border: 1px solid #dbe6ed; border-radius: 8px; }
.order-summary-item-main { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.order-summary-item-main h3 { margin: 0; color: #304f65; font-size: 14px; line-height: 1.45; }
.order-summary-item-main strong { flex: 0 0 auto; color: #184d73; font-size: 14px; }
.order-summary-image-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.order-summary-image-grid a { display: block; line-height: 0; }
.order-summary-image-grid img { width: 84px; height: 84px; object-fit: cover; background: #eaf0f4; border: 1px solid #c9d9e4; border-radius: 7px; }
.order-summary-image-grid a:hover img { border-color: #4f91b7; box-shadow: 0 0 0 2px rgba(79,145,183,.14); }
.order-summary-modal-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 12px; }
.order-summary-total-card,
.order-summary-delivery-card { padding: 14px; background: #fff; border: 1px solid #d7e2e9; border-radius: 9px; }
.order-summary-total-card h3,
.order-summary-delivery-card h3 { margin: 0 0 8px; color: #234c69; font-size: 15px; }
.order-summary-total-card > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: #506779; font-size: 13px; }
.order-summary-total-card > div strong { color: #274d69; text-align: right; }
.order-summary-total-card .order-summary-grand { margin-top: 7px; padding-top: 10px; color: #163f5e; border-top: 1px solid #d9e4ea; font-size: 16px; font-weight: 850; }
.order-summary-total-card .order-summary-grand strong { color: #174d75; }
.order-summary-delivery-card p { min-height: 54px; margin: 0; color: #405b70; font-size: 13px; line-height: 1.55; white-space: pre-line; }
.order-summary-delivery-card small { display: block; margin-top: 10px; color: #627a8d; font-size: 12px; }
.order-summary-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; padding: 12px 14px; background: linear-gradient(135deg,#eff8fc,#e9f3fa); border: 1px solid #cadde9; border-radius: 9px; }
.admin-only-note { margin-right: auto; color: #557083; font-size: 12px; font-weight: 750; }

@media (max-width: 820px) {
  .order-summary-modal { padding: 0; }
  .order-summary-modal-dialog { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0; }
  .order-summary-modal-header { padding: 13px 12px; }
  .order-summary-modal-header-actions { justify-content: flex-start; }
  .order-summary-modal-body { padding: 12px; }
  .order-summary-modal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .customer-history-line { grid-template-columns: 86px minmax(0,1fr) 14px; }
  .customer-history-line > em { grid-column: 2; }
  .customer-history-line > i { grid-column: 3; grid-row: 1 / span 2; }
  .order-summary-modal-header { flex-direction: column; }
  .order-summary-modal-header-actions { width: 100%; }
  .order-summary-modal-header-actions .button { flex: 1; }
  .order-summary-item-main { align-items: flex-start; flex-direction: column; gap: 3px; }
}


/* R40: customer-book search stays reachable and unused customer records can be removed safely. */
.customer-book-panel { overflow: visible; }
.customer-search-sticky {
  position: sticky;
  z-index: 24;
  top: 66px;
  margin: -16px -16px 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #d9e4ec;
  box-shadow: 0 5px 10px rgba(21, 54, 78, .06);
  backdrop-filter: blur(7px);
}
.customer-search-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.customer-search-form input { min-width: 0; flex: 1; }
.customer-table-scroll { overflow: auto; }
.customer-empty-delete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  color: #714047;
  background: linear-gradient(135deg, #fff8f8, #fff1f3);
  border: 1px solid #efc8cd;
  border-radius: 8px;
}
.customer-empty-delete strong { display: block; color: #7e3039; font-size: 13px; }
.customer-empty-delete p { margin: 4px 0 0; color: #855960; font-size: 12px; line-height: 1.5; }
@media (max-width: 820px) {
  .customer-search-sticky { top: 98px; }
}
@media (max-width: 560px) {
  .customer-search-sticky { top: 92px; margin-right: -16px; margin-left: -16px; }
  .customer-search-form { align-items: stretch; flex-direction: column; }
  .customer-search-form .button { width: 100%; }
  .customer-empty-delete { align-items: stretch; flex-direction: column; }
  .customer-empty-delete .button { width: 100%; }
}

/* R41 — Similar customer-name review. These are suggestions only; no record is merged automatically. */
.customers-table .customer-list-row.has-similar-name td:first-child {
  box-shadow: inset 4px 0 0 #d18b35;
}
.customer-similar-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 6px;
  color: #82511c;
  background: linear-gradient(135deg, #fff4d9, #ffe9be);
  border: 1px solid #efcd89;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}
.customer-similar-section {
  padding: 0;
  overflow: hidden;
  border-color: #e8cb91;
  background: linear-gradient(135deg, #fffdf7, #fff8e9);
}
.customer-similar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  color: #77511c;
  background: linear-gradient(135deg, #fffdf7, #fff3d6);
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.customer-similar-toggle:hover { background: linear-gradient(135deg, #fff8e9, #ffedc5); }
.customer-similar-toggle > span:first-child { min-width: 0; }
.customer-similar-toggle strong,
.customer-similar-toggle small { display: block; }
.customer-similar-toggle strong { font-size: 16px; }
.customer-similar-toggle small { margin-top: 3px; color: #8a6a37; font-size: 12px; font-weight: 650; line-height: 1.35; }
.customer-similar-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.customer-similar-toggle-meta b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #754b12;
  background: #fff;
  border: 1px solid #e8c77f;
  border-radius: 50%;
  font-size: 13px;
}
.customer-similar-toggle-meta i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #855a21;
  background: #fff;
  border: 1px solid #e8c77f;
  border-radius: 50%;
  font-size: 19px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  transition: transform .16s ease, background .16s ease;
}
.customer-similar-section.is-expanded .customer-similar-toggle-meta i { transform: rotate(180deg); background: #fff4d9; }
.customer-similar-panel {
  padding: 0 14px 14px;
  background: linear-gradient(135deg, #fffdf7, #fff8e9);
  border-top: 1px solid #f0dbad;
}
.customer-similar-panel[hidden] { display: none; }
.customer-similar-warning {
  margin-top: 13px;
  padding: 9px 10px;
  color: #755626;
  background: #fff8e9;
  border: 1px solid #f0d69a;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
}
.customer-similar-list {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}
.customer-similar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ecd9aa;
  border-radius: 8px;
}
.customer-similar-info { min-width: 0; }
.customer-similar-info strong,
.customer-similar-info small,
.customer-similar-info em { display: block; }
.customer-similar-info strong { overflow: hidden; color: #5b421c; font-size: 13px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.customer-similar-info small { margin-top: 2px; color: #7d7058; font-size: 11px; }
.customer-similar-info em { margin-top: 4px; color: #9a6b29; font-size: 11px; font-style: normal; font-weight: 700; }
.customer-similar-empty-hint { max-width: 230px; color: #8a7048; font-size: 11px; line-height: 1.45; text-align: right; }
@media (max-width: 560px) {
  .customer-similar-row { align-items: stretch; flex-direction: column; }
  .customer-similar-row .button { width: 100%; }
  .customer-similar-empty-hint { max-width: none; text-align: left; }
}


/* R43: end-of-round actions share one compact row. The primary add-order action
   no longer spans the full worksheet, and a nearby control creates a new sale
   round in the same month without returning to the month header. */
.orders-table .sale-round-add-row td {
  padding: 9px 12px;
  cursor: default;
}
.sale-round-add-content {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sale-round-add-order-button,
.sale-round-add-round-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 13px;
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.sale-round-add-order-button {
  flex: 0 1 560px;
  width: min(560px, 100%);
  color: #155574;
  background: linear-gradient(105deg, #e3f6ff 0%, #edfaff 52%, #e6f7f2 100%);
  border: 1px solid #8fc2da;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 2px 5px rgba(22, 99, 138, .10);
}
.sale-round-add-order-button:hover,
.sale-round-add-order-button:focus-visible {
  color: #0f4d6e;
  background: linear-gradient(105deg, #d6f2ff 0%, #e6f8ff 52%, #d8f5eb 100%);
  border-color: #4a9ac2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 5px 12px rgba(22, 99, 138, .16);
  outline: 0;
  transform: translateY(-1px);
}
.sale-round-add-round-button {
  flex: 0 0 214px;
  color: #6d3455;
  background: linear-gradient(105deg, #fff4f8 0%, #fff4e9 54%, #f9efff 100%);
  border: 1px solid #e2b4c8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(106, 51, 84, .09);
}
.sale-round-add-round-button:hover,
.sale-round-add-round-button:focus-visible {
  color: #56253f;
  background: linear-gradient(105deg, #ffeaf3 0%, #ffeeda 54%, #f3e4fb 100%);
  border-color: #bf6f91;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px rgba(106, 51, 84, .15);
  outline: 0;
  transform: translateY(-1px);
}
.sale-round-add-order-button .sale-round-add-icon {
  flex: 0 0 auto;
}
.sale-round-add-copy,
.sale-round-add-round-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}
.sale-round-add-order-button strong,
.sale-round-add-round-button strong {
  color: inherit;
  font-size: 14px;
  font-weight: 900;
}
.sale-round-add-order-button small,
.sale-round-add-round-button small {
  margin: 0;
  color: inherit;
  opacity: .74;
  font-size: 11px;
  font-weight: 700;
}
.sale-round-add-round-icon {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #b34e74, #d77a5e);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(127, 48, 86, .20);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.orders-table .sale-round-add-row.is-drop-target td {
  background: #f7fffa;
  border-top-color: #ffffff;
  border-bottom-color: #278658;
  box-shadow: none;
}
.orders-table .sale-round-add-row.is-drop-target .sale-round-add-content { background: transparent; }
.orders-table .sale-round-add-row.is-drop-target .sale-round-add-order-button {
  color: #0f653f;
  background: #dcf5e7;
  border: 2px solid #278658;
  box-shadow: inset 5px 0 0 #278658;
}
.orders-table .sale-round-add-row.is-drop-target .sale-round-add-order-button .sale-round-add-icon { background: #278658; }

@media (max-width: 760px) {
  .sale-round-add-content { flex-wrap: wrap; }
  .sale-round-add-order-button { flex: 1 1 100%; width: 100%; max-width: none; }
  .sale-round-add-round-button { flex: 1 1 210px; }
}
@media (max-width: 560px) {
  .orders-table .sale-round-add-row td { padding: 8px 9px; }
  .sale-round-add-order-button,
  .sale-round-add-round-button { min-height: 44px; padding: 8px 10px; }
  .sale-round-add-order-button small,
  .sale-round-add-round-button small { display: none; }
}


/* R44: move selected customer orders without deleting the source customer. */
.customer-move-warning {
  margin-top: 13px;
  padding: 9px 10px;
  color: #215d77;
  background: #edf8fc;
  border: 1px solid #bfdde8;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
}
.customer-move-orders-section {
  margin-top: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cddfe8;
  border-radius: 8px;
}
.customer-move-orders-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px 8px;
  background: linear-gradient(135deg, #f8fcfe, #eff8fb);
  border-bottom: 1px solid #d9e7ed;
}
.customer-move-orders-head strong,
.customer-move-orders-head small { display: block; }
.customer-move-orders-head strong { color: #234f68; font-size: 13px; }
.customer-move-orders-head small { margin-top: 2px; color: #718695; font-size: 11px; }
.customer-move-selection-count {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #356176;
  background: #fff;
  border: 1px solid #ccdde6;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.customer-move-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 10px;
  color: #234c67;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.customer-move-select-all input,
.customer-move-order-row input { width: 16px; height: 16px; accent-color: #1e7895; }
.customer-move-order-list {
  max-height: 235px;
  overflow: auto;
  border-top: 1px solid #e0ebf0;
}
.customer-move-order-row {
  display: grid;
  grid-template-columns: 18px 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 8px 10px;
  color: #304f63;
  background: #fff;
  border-bottom: 1px solid #e6eef2;
  cursor: pointer;
  transition: background .14s ease;
}
.customer-move-order-row:last-child { border-bottom: 0; }
.customer-move-order-row:hover { background: #f1f9fc; }
.customer-move-order-row:has(input:checked) { background: #eaf7fb; }
.customer-move-order-date { color: #6c8190; font-size: 11px; white-space: nowrap; }
.customer-move-order-detail { min-width: 0; }
.customer-move-order-detail strong,
.customer-move-order-detail small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-move-order-detail strong { color: #31556b; font-size: 12px; }
.customer-move-order-detail small { margin-top: 1px; color: #7b909d; font-size: 10px; }
.customer-move-order-row em { color: #1c5877; font-size: 12px; font-style: normal; font-weight: 850; white-space: nowrap; }
.customer-move-actions { margin-top: 10px; }
.customer-merge-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 15px 0 10px;
  color: #9a626a;
  font-size: 11px;
  font-weight: 800;
}
.customer-merge-divider::before,
.customer-merge-divider::after { content: ''; height: 1px; flex: 1; background: #efcfd3; }
.app-confirm-dialog[data-tone="primary"] .app-confirm-icon {
  color: #1a6889;
  background: #eaf7fb;
  border-color: #b9dce9;
}
.app-confirm-dialog[data-tone="primary"] .app-confirm-warning {
  color: #245c73;
  background: #f0f9fc;
  border-color: #c9e4ed;
}
.app-confirm-dialog[data-tone="primary"] .app-confirm-accept {
  color: #fff;
  background: #1f6e92;
  border-color: #1a607f;
}
.app-confirm-dialog[data-tone="primary"] .app-confirm-accept:hover,
.app-confirm-dialog[data-tone="primary"] .app-confirm-accept:focus-visible {
  color: #fff;
  background: #175a78;
  border-color: #124b66;
}
@media (max-width: 720px) {
  .customer-move-orders-head { align-items: flex-start; }
  .customer-move-order-row { grid-template-columns: 18px 72px minmax(0, 1fr); }
  .customer-move-order-row em { grid-column: 3; }
}

/* R45: balance end-of-round actions. The order button takes the remaining
   workspace width while the new-sale-round button keeps its compact desktop
   width and uses the neutral white action treatment from the month header. */
@media (min-width: 761px) {
  .sale-round-add-content {
    width: 100%;
  }

  .sale-round-add-order-button {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .sale-round-add-round-button {
    flex: 0 0 214px;
    width: 214px;
    color: #235c79;
    background: #ffffff;
    border-color: #a9c9da;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 5px rgba(27, 91, 122, .08);
  }

  .sale-round-add-round-button:hover,
  .sale-round-add-round-button:focus-visible {
    color: #164d6c;
    background: #f6fbfe;
    border-color: #5d9abb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 5px 12px rgba(27, 91, 122, .14);
  }

  .sale-round-add-round-icon {
    background: linear-gradient(135deg, #1e7893, #2b9a9a);
    box-shadow: 0 2px 5px rgba(25, 111, 139, .22);
  }
}
.shipping-charge-line { grid-column: 1; display: block; text-align: left; }
.shipping-inline-pencil { grid-column: 2; grid-row: 1; }
.remote-area-charge-line { color: #9a5b00; font-size: 12px; }
.shipping-total-charge-line { color: #29506a; font-size: 12px; font-weight: 800; }
.remote-area-charge-waived { color: #617383; font-size: 12px; font-weight: 700; }

/* R167 — compact positive-action remote destination control. */
.remote-area-surcharge-panel {
  padding-top: 11px;
  padding-bottom: 11px;
  color: #7b4900;
  background: linear-gradient(135deg, #fff7db, #fff1c3);
  border: 1px solid #e8c45c;
  box-shadow: inset 4px 0 0 #d89a13;
}
.remote-area-surcharge-panel[hidden] { display: none !important; }
.remote-area-surcharge-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.remote-area-surcharge-warning-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: #c67c00;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}
.remote-area-surcharge-heading > div { min-width: 0; }
.remote-area-surcharge-heading h2 { margin: 0; color: #784600; font-size: 14px; }
.remote-area-surcharge-heading p { margin: 2px 0 0; font-size: 11px; line-height: 1.35; }
.remote-area-surcharge-heading b { color: #9d5200; }
.remote-area-surcharge-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 0 34px;
  color: #674718;
  font-size: 13px;
  font-weight: 800;
}
.remote-area-surcharge-control > input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #bb7600;
  cursor: pointer;
}
.remote-area-surcharge-control > label {
  cursor: pointer;
}
.remote-area-surcharge-input-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.remote-area-surcharge-input-wrap input { width: 86px; min-height: 32px; padding: 4px 7px; }
.remote-area-surcharge-panel.is-disabled { background: linear-gradient(135deg, #f8f5e9, #f3eedc); box-shadow: inset 4px 0 0 #9e8b5d; }
.remote-area-surcharge-panel.is-disabled .remote-area-surcharge-control { color: #746b58; }
.remote-area-total-line { color: #986000; }
.remote-area-total-line strong { color: #8a5700; }

@media (max-width: 680px) {
  .remote-area-surcharge-control { margin-left: 0; }
}


/* R47: intentional customer reassignment inside an existing order */
.customer-name-control {
  display: flex;
  align-items: end;
  gap: 8px;
}
.customer-name-control > label {
  min-width: 0;
  flex: 1 1 auto;
}
.customer-change-button {
  flex: 0 0 auto;
  min-height: 34px;
  white-space: nowrap;
}
.customer-panel.is-customer-locked #facebook_name {
  color: #294b65;
  background: #eef4f8;
  border-color: #c7d7e3;
  cursor: default;
}
.customer-panel.is-customer-replacement-active #facebook_name {
  color: #1d3951;
  background: #fffdf7;
  border-color: #d6b96e;
  box-shadow: 0 0 0 3px rgba(217, 167, 55, .12);
}
.customer-change-hint {
  margin: 7px 0 0;
  color: #64788a;
  font-size: 12px;
  line-height: 1.45;
}
.customer-panel.is-customer-replacement-active .customer-change-hint {
  color: #8a5a0d;
}
@media (max-width: 640px) {
  .customer-name-control { align-items: stretch; flex-direction: column; }
  .customer-change-button { width: 100%; }
}

/* R48: yellow sale-round headers and a deliberate locked-customer badge.
   Sale rounds are a warm secondary hierarchy, distinct from the cool month band
   without looking like warning or delete actions. */
.orders-table .sale-round-divider td {
  color: #5b4817;
  background: linear-gradient(102deg, #fff4b6 0%, #fff9dc 48%, #ffeab0 100%);
  border-top-color: #dfbd55;
  border-bottom-color: #e4cb79;
  box-shadow: inset 5px 0 0 #d3a621, inset 0 1px 0 rgba(255,255,255,.84);
}
.orders-table .sale-round-divider strong { color: #59440e; }
.orders-table .sale-round-divider small { color: #856a22; }
.sale-round-label {
  color: #fffdf2;
  background: linear-gradient(135deg, #c99816 0%, #e2b42d 50%, #d19d18 100%);
  border-color: #b98a11;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 1px 1px rgba(111,83,15,.18);
}
.orders-table .sale-round-divider .sale-round-edit-button.table-edit,
.orders-table .sale-round-divider .sale-round-edit-button {
  color: #80611a;
  background: rgba(255,255,255,.84);
  border-color: #e1c56c;
  box-shadow: 0 1px 1px rgba(103,78,13,.10);
}
.orders-table .sale-round-divider .sale-round-edit-button.table-edit:hover,
.orders-table .sale-round-divider .sale-round-edit-button.table-edit:focus-visible,
.orders-table .sale-round-divider .sale-round-edit-button:hover,
.orders-table .sale-round-divider .sale-round-edit-button:focus-visible {
  color: #5f470d;
  background: #fffdf4;
  border-color: #cda736;
  outline: 0;
}

/* Existing-order customer names are a read-only label, not a text field. */
.customer-name-control > .customer-name-field {
  min-width: 0;
  flex: 1 1 auto;
}
.customer-name-label {
  display: block;
  margin-bottom: 5px;
  color: #43576a;
  font-size: 13px;
  font-weight: 700;
}
.customer-name-badge {
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 8px 11px;
  overflow: hidden;
  color: #294b65;
  background: linear-gradient(135deg, #f1f6fa, #e9f1f6);
  border: 1px solid #c7d7e3;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  cursor: default;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.customer-name-badge[hidden] { display: none; }
.customer-name-edit-input[type="hidden"] { display: none !important; }
.customer-name-edit-input:not([type="hidden"]) {
  display: block;
  width: 100%;
  min-height: 39px;
}
.customer-panel.is-customer-locked #facebook_name { display: none; }
.customer-panel.is-customer-replacement-active .customer-name-badge { display: none; }
.customer-panel.is-customer-replacement-active #facebook_name:not([type="hidden"]) {
  color: #1d3951;
  background: #fffdf7;
  border-color: #d6b96e;
  box-shadow: 0 0 0 3px rgba(217, 167, 55, .12);
}
@media (max-width: 640px) {
  .customer-name-control > .customer-name-field { width: 100%; }
}

/* R49 — reusable customer delivery-information management */
.customer-delivery-section { scroll-margin-top: 18px; }
.customer-delivery-section-head { align-items: flex-start; }
.customer-delivery-section-head .button { flex: 0 0 auto; white-space: nowrap; }
.customer-delivery-create-form { margin: 0 0 11px; }
.customer-delivery-editor { padding: 11px; background: linear-gradient(135deg, #f7fbfe, #edf7f4); border: 1px solid #b9d9e5; border-radius: 8px; }
.customer-delivery-editor[hidden] { display: none !important; }
.customer-delivery-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.customer-delivery-default-check { min-height: 38px; margin: 0; padding: 0 9px; border: 1px solid #d1e0e8; border-radius: 6px; background: #fff; white-space: nowrap; }
.customer-delivery-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.customer-address-list { align-items: start; }
.customer-delivery-card { position: relative; min-height: 106px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.customer-delivery-card:hover { border-color: #abc9da; box-shadow: 0 4px 12px rgba(31, 74, 105, .07); }
.customer-delivery-card.is-editing { grid-column: 1 / -1; background: #f8fcff; border-color: #6fb2d1; box-shadow: 0 7px 18px rgba(31, 94, 126, .12); }
.customer-delivery-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.customer-delivery-card-head > div:first-child { min-width: 0; }
.customer-delivery-default-badge { display: inline-block; margin: 0 0 0 5px; padding: 2px 6px; color: #146a4d; background: #e6f7ed; border: 1px solid #bfe5d0; border-radius: 999px; font-size: 10px; font-weight: 800; vertical-align: 1px; }
.customer-delivery-card-actions { display: inline-flex; flex: 0 0 auto; gap: 5px; }
.customer-delivery-card-actions .button { padding: 5px 7px; font-size: 11px; }
.customer-delivery-card .customer-delivery-editor { margin-top: 10px; }
.customer-delivery-card.is-editing > p { display: none; }
.customer-delivery-card.is-editing .customer-delivery-card-actions { opacity: .68; pointer-events: none; }
.customer-delivery-card p { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .customer-delivery-section-head { flex-direction: column; align-items: stretch; }
  .customer-delivery-section-head .button { width: 100%; }
  .customer-delivery-form-grid { grid-template-columns: 1fr; }
  .customer-delivery-default-check { min-height: auto; padding: 8px 9px; }
  .customer-delivery-card-head { flex-direction: column; }
  .customer-delivery-card-actions { width: 100%; }
  .customer-delivery-card-actions .button { flex: 1; }
}

/* R50: PrintOrder control below the Facebook name in the order worksheet. */
.orders-table .customer-order-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 24px;
}
.orders-table .order-print-button,
.orders-table .copy-summary-link-button {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #295a78;
  background: #f7fbfe;
  border: 1px solid #b7cedd;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
}
.orders-table .order-print-button:hover,
.orders-table .copy-summary-link-button:hover {
  color: #123f5c;
  background: #e7f3fa;
  border-color: #78aeca;
}
.orders-table .order-print-button:focus-visible,
.orders-table .copy-summary-link-button:focus-visible {
  outline: 3px solid rgba(49, 123, 165, .26);
  outline-offset: 1px;
}
.orders-table .copy-summary-link-button {
  cursor: pointer;
}
.orders-table .copy-summary-link-button svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orders-table .copy-summary-link-button.is-loading {
  opacity: .68;
  cursor: wait;
}
.orders-table .copy-summary-link-button.is-copied {
  color: #0b684d;
  background: #e7f7ef;
  border-color: #a5d9be;
}
.orders-table .customer-order-tools .held-expand-button {
  margin: 0;
}

/* R61 — order table address alignment, full-image item previews, and delivery status cleanup. */
.orders-table .address-col {
  vertical-align: top;
  white-space: normal;
}
.orders-table .address-cell {
  margin: 0;
  padding: 0;
}
.orders-table .address-cell-text {
  display: block;
  min-width: 0;
  margin: 0;
  white-space: pre-line;
}

/* Fixed height keeps a neat row; width follows the original file proportion. */
.image-preview { align-items: flex-start; }
.image-preview-item {
  width: fit-content;
  height: 72px;
  max-width: 100%;
  flex: 0 0 auto;
}
.image-preview-item .image-thumbnail,
.image-preview-item > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 72px;
  object-fit: contain;
  background: #f3f7fa;
}
.order-summary-image-grid,
.public-image-grid { align-items: flex-start; }
.order-summary-image-grid a {
  width: fit-content;
  height: 96px;
  max-width: 100%;
  flex: 0 0 auto;
}
.order-summary-image-grid img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 96px;
  object-fit: contain;
  background: #f3f7fa;
}
.public-image-grid img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 84px;
  object-fit: contain;
  background: #f3f7fa;
}



/* R62 — restore the outlined printer icon and use a green sale-round sales summary. */
.orders-table .order-print-icon {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orders-table .order-print-icon path {
  fill: none;
  stroke: currentColor;
}

/* The sale-round sales footer is positive sales information, not a destructive alert. */
.orders-table .sale-round-summary-row td {
  color: #3f6f50;
  background: #fbfefb;
  border-top-color: #b9d9c3;
  border-bottom-color: #d6eadb;
}
.sale-round-summary-label {
  color: #1d7240;
  background: #e7f7eb;
  border-color: #bfe3ca;
}
.sale-round-summary-count { color: #4f7960; }
.sale-round-summary-total span { color: #527e63; }
.sale-round-summary-total strong { color: #13723a; }
.sale-round-summary-total em { color: #5f8069; }

/* R64 — public customer order summary */
.public-body { background: linear-gradient(160deg, #edf4f8 0%, #f9fbfc 52%, #eef7f3 100%); }
.public-shell { width: min(860px, calc(100vw - 28px)); margin: 34px auto 48px; }
.customer-summary-card { overflow: hidden; color: #183047; background: #fff; border: 1px solid #d6e2eb; border-radius: 16px; box-shadow: 0 14px 34px rgba(28, 57, 80, .11); }
.customer-summary-header { padding: 25px 28px 22px; background: linear-gradient(135deg, #f7fbff 0%, #eef8f5 100%); border-bottom: 1px solid #dbe7ee; }
.customer-summary-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #1d3d59; line-height: 1.2; }
.customer-summary-shop { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }.customer-summary-shop b { color: #19786d; }
.customer-summary-by { color: #7b8c9c; font-size: 12px; font-weight: 700; }.facebook-logo { width: 20px; height: 20px; object-fit: contain; }.customer-summary-facebook-name { color: #275472; font-size: 13px; font-weight: 800; }
.customer-summary-kicker { margin: 25px 0 3px; color: #1a7167; font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }.customer-summary-header h1 { margin: 0; color: #173d5d; font-size: clamp(22px, 5vw, 30px); line-height: 1.25; overflow-wrap: anywhere; }
.customer-summary-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }.customer-summary-meta > div { padding: 10px 11px; background: rgba(255, 255, 255, .72); border: 1px solid #d6e4ec; border-radius: 9px; }.customer-summary-meta span, .customer-summary-section-heading > span { display: block; color: #718496; font-size: 11px; font-weight: 700; }.customer-summary-meta strong { display: block; margin-top: 2px; color: #25455f; font-size: 13px; overflow-wrap: anywhere; }
.customer-summary-status { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }.customer-summary-status .tag { min-height: 25px; padding: 4px 8px; border-radius: 999px; font-size: 11px; }
.customer-summary-section { padding: 24px 28px; border-bottom: 1px solid #e0e9ef; }.customer-summary-section:last-child { border-bottom: 0; }.customer-summary-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }.customer-summary-section-heading h2 { margin: 0; color: #1b415f; font-size: 17px; line-height: 1.25; }.customer-summary-section-heading > span { flex: 0 0 auto; text-align: right; }
.customer-summary-table-wrap { overflow-x: auto; border: 1px solid #d8e4eb; border-radius: 9px; }.customer-summary-table { width: 100%; min-width: 360px; border-collapse: collapse; background: #fff; }.customer-summary-table th { padding: 9px 12px; color: #5d7387; background: #f4f8fb; border-bottom: 1px solid #d8e4eb; text-align: left; font-size: 11px; font-weight: 800; }.customer-summary-table th:last-child, .customer-summary-table td:last-child { width: 132px; text-align: right; white-space: nowrap; }.customer-summary-table td { padding: 11px 12px; border-bottom: 1px solid #e4ebf0; color: #294257; font-size: 14px; vertical-align: top; overflow-wrap: anywhere; }.customer-summary-table tbody tr:last-child td { border-bottom: 0; }.customer-summary-table td:last-child { color: #145381; font-weight: 800; }
.customer-summary-totals { margin: 12px 0 0; padding: 0; }.customer-summary-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 5px 2px; color: #576f82; font-size: 13px; }.customer-summary-totals dt, .customer-summary-totals dd { margin: 0; }.customer-summary-totals dd { color: #2a4d66; font-weight: 800; white-space: nowrap; }.customer-summary-totals .customer-summary-grand-total { margin-top: 8px; padding: 12px 2px 2px; color: #173d5d; border-top: 1px solid #d7e2e9; font-size: 18px; font-weight: 900; }.customer-summary-totals .customer-summary-grand-total dd { color: #0e5f7d; font-size: 20px; }
.customer-payment-section { background: #fbfdff; }.customer-account-name { margin: -3px 0 13px; color: #5b7081; font-size: 13px; }.customer-account-name strong { color: #234b69; }.customer-bank-list { display: grid; gap: 8px; }.customer-bank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: #fff; border: 1px solid #dbe6ed; border-radius: 9px; }.customer-bank-row span, .customer-bank-row strong { display: block; }.customer-bank-row span { color: #62798d; font-size: 12px; font-weight: 700; }.customer-bank-row strong { margin-top: 1px; color: #1e445f; font-size: 15px; letter-spacing: .025em; }.summary-copy-button { min-height: 30px; flex: 0 0 auto; padding: 4px 8px; color: #255b80; background: #fff; border: 1px solid #bdd2e0; border-radius: 6px; font-size: 11px; font-weight: 800; }.summary-copy-button:hover { color: #123f62; background: #eef7fb; border-color: #80abc4; }
.customer-promptpay-card { display: grid; grid-template-columns: minmax(0, 1fr) 164px; align-items: center; gap: 18px; margin-top: 14px; padding: 15px; background: #edf8f5; border: 1px solid #c7e8dc; border-radius: 11px; }.customer-promptpay-details { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }.customer-promptpay-label { color: #18736a; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }.customer-promptpay-details strong { color: #1a4661; font-size: 17px; }.customer-promptpay-details > span:not(.customer-promptpay-label) { color: #506f80; font-size: 13px; }.customer-promptpay-details b { margin-top: 6px; color: #0e645c; font-size: 14px; }.summary-copy-promptpay { margin-top: 7px; }.customer-promptpay-qr { width: 164px; height: 164px; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid #bcded2; border-radius: 9px; }.customer-promptpay-qr > span, .customer-promptpay-qr.has-error { color: #557081; font-size: 11px; text-align: center; }.customer-promptpay-qr svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }.customer-payment-help, .customer-payment-config-note { margin: 14px 0 0; color: #5e7486; font-size: 13px; }.customer-payment-confirmation { margin-top: 14px; padding: 10px 12px; color: #116a4d; background: #e6f7ee; border: 1px solid #bee7d0; border-radius: 8px; font-size: 13px; font-weight: 800; }
.customer-photo-section { background: #fff; }.customer-product-photo-grid { display: grid; grid-template-columns: repeat(var(--summary-gallery-columns, 2), minmax(0, 1fr)); gap: 9px; }.customer-product-photo { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 4px; overflow: hidden; background: #f7fafc; border: 1px solid #d8e3ea; border-radius: 8px; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }.customer-product-photo:hover, .customer-product-photo:focus-visible { outline: none; transform: translateY(-1px); border-color: #78a7bf; box-shadow: 0 5px 13px rgba(30, 83, 113, .12); }.customer-product-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.summary-image-lightbox[hidden] { display: none; }.summary-image-lightbox { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; padding: 18px; }.summary-image-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 22, 34, .76); }.summary-image-lightbox-dialog { position: relative; z-index: 1; width: min(860px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column; align-items: center; padding: 40px 18px 14px; background: #fff; border-radius: 11px; box-shadow: 0 22px 55px rgba(0, 0, 0, .35); }.summary-image-lightbox-dialog img { max-width: 100%; max-height: calc(100vh - 126px); display: block; object-fit: contain; }.summary-image-lightbox-dialog p { width: 100%; margin: 10px 0 0; color: #496478; font-size: 13px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }.summary-image-lightbox-close { position: absolute; top: 9px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: #2b536c; background: #f3f7fa; border: 1px solid #cddce6; border-radius: 50%; font-size: 23px; line-height: 1; }.summary-image-lightbox-close:hover { color: #fff; background: #315f7d; border-color: #315f7d; }.summary-lightbox-open { overflow: hidden; }
.customer-summary-not-found { max-width: 540px; margin: 0 auto; padding: 30px; }.customer-summary-not-found h1 { margin: 18px 0 5px; color: #244a67; }.customer-summary-not-found p { margin: 0; color: #627789; }
@media (max-width: 560px) { .public-shell { width: min(100% - 16px, 860px); margin: 8px auto 24px; }.customer-summary-card { border-radius: 11px; }.customer-summary-header { padding: 21px 17px 18px; }.customer-summary-brand { gap: 5px; }.customer-summary-shop { width: 100%; font-size: 17px; }.customer-summary-by { margin-left: 0; }.customer-summary-facebook-name { max-width: calc(100vw - 135px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.customer-summary-kicker { margin-top: 21px; }.customer-summary-section { padding: 20px 17px; }.customer-summary-section-heading { align-items: flex-start; }.customer-summary-section-heading h2 { font-size: 16px; }.customer-summary-table { min-width: 300px; }.customer-summary-table th, .customer-summary-table td { padding-left: 10px; padding-right: 10px; }.customer-summary-table th:last-child, .customer-summary-table td:last-child { width: 112px; }.customer-summary-totals .customer-summary-grand-total { font-size: 17px; }.customer-summary-totals .customer-summary-grand-total dd { font-size: 18px; }.customer-promptpay-card { grid-template-columns: 1fr; }.customer-promptpay-qr { width: min(100%, 220px); height: auto; aspect-ratio: 1 / 1; justify-self: center; }.customer-product-photo-grid { grid-template-columns: repeat(var(--summary-gallery-mobile-columns, 2), minmax(0, 1fr)); gap: 7px; }.summary-image-lightbox { padding: 10px; }.summary-image-lightbox-dialog { max-height: calc(100vh - 20px); padding: 36px 10px 10px; }.summary-image-lightbox-dialog img { max-height: calc(100vh - 105px); } }

/* R65 — seller payment settings and bilingual customer summaries. */
.summary-language-field {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  color: #31546d;
  font-size: 12px;
  font-weight: 800;
}
.summary-language-field select { min-height: 36px; }
.form-note-warning { color: #9a5b13 !important; }

.payment-settings-panel { max-width: 1080px; }
.payment-settings-toolbar { margin-bottom: 14px; }
.payment-settings-block + .payment-settings-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #dce7ee;
}
.payment-account-section-head { align-items: flex-start; gap: 14px; }
.payment-account-section-head > .button { flex: 0 0 auto; }
.payment-account-list { display: grid; gap: 12px; }
.payment-account-row {
  padding: 15px;
  background: #f9fcfe;
  border: 1px solid #cfdfeb;
  border-radius: 10px;
}
.payment-account-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #214966;
}
.payment-account-row-head strong { font-size: 14px; }
.payment-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 14px;
}
.payment-account-number-field { grid-column: 1 / -1; max-width: min(100%, 460px); }
.payment-settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #dce7ee;
}
.payment-settings-migration-notice,
.payment-settings-config-notice { max-width: 1080px; margin-bottom: 14px; }
.customer-bank-row small {
  display: block;
  margin-top: 3px;
  color: #657e90;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 680px) {
  .payment-account-section-head { flex-direction: column; }
  .payment-account-section-head > .button { width: 100%; }
  .payment-account-grid { grid-template-columns: 1fr; }
  .payment-account-number-field { grid-column: auto; max-width: none; }
  .payment-account-row { padding: 13px; }
  .payment-account-row-head { align-items: flex-start; flex-direction: column; }
  .payment-account-row-head > .button { width: 100%; }
  .payment-settings-actions .button { width: 100%; }
}

/* R66: copy the complete item list and the current shipping fee from the orders table. */
.items-summary-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed #c6d6e2;
}
.items-summary-actions .shipping-inline-editor {
  min-height: 24px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.item-summary-copy {
  width: 24px;
  height: 24px;
}
.order-row.state-held .item-summary-copy { color: #177548; }
.order-row.state-separate .item-summary-copy { color: #b22929; }


/* R67 — Plain-text customer order summary, ready to copy into chat. */
.summary-link-actions { flex-wrap: wrap; }
.summary-text-link { white-space: nowrap; }
.customer-summary-text-card { max-width: 860px; }
.customer-summary-text-header { padding-bottom: 22px; }
.customer-summary-text-section { background: #fff; }
.customer-summary-text-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.customer-summary-text-toolbar h2 { margin: 0; color: #183f5d; font-size: 18px; }
.customer-summary-text-toolbar p { margin: 5px 0 0; color: #62798a; font-size: 13px; line-height: 1.55; }
.customer-summary-text-copy { min-height: 38px; flex: 0 0 auto; padding: 8px 12px; color: #fff; background: #1f5d88; border: 1px solid #1f5d88; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.customer-summary-text-copy:hover, .customer-summary-text-copy:focus-visible { outline: none; background: #17496d; border-color: #17496d; }
.customer-summary-text-output { box-sizing: border-box; width: 100%; min-height: 360px; display: block; padding: 15px; color: #183f5d; background: #fbfdff; border: 1px solid #c8dbe7; border-radius: 9px; font: 14px/1.65 "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 0; resize: vertical; white-space: pre-wrap; }
.customer-summary-text-output:focus { outline: 2px solid rgba(46, 119, 160, .25); outline-offset: 1px; border-color: #6c9fbd; }
@media (max-width: 560px) { .customer-summary-text-toolbar { flex-direction: column; gap: 12px; }.customer-summary-text-copy { width: 100%; }.customer-summary-text-output { min-height: 380px; padding: 12px; font-size: 13px; line-height: 1.6; }.summary-text-link { width: 100%; text-align: center; } }

/* R68 — full-size image preview in order editor and safer delete placement. */
.editor-delete-order-zone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: -3px 0 2px;
}
.editor-delete-order-zone .editor-delete-order-button {
  min-height: 34px;
}
.editor-image-lightbox[hidden] { display: none; }
.editor-image-lightbox {
  position: fixed;
  z-index: 460;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}
.editor-image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 34, .78);
}
.editor-image-lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 42px 18px 14px;
  background: #fff;
  border: 1px solid #cedde7;
  border-radius: 11px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .36);
}
.editor-image-lightbox-dialog img {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  display: block;
  object-fit: contain;
}
.editor-image-lightbox-dialog p {
  width: 100%;
  margin: 10px 0 0;
  color: #496478;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}
.editor-image-lightbox-close {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #2b536c;
  background: #f3f7fa;
  border: 1px solid #cddce6;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.editor-image-lightbox-close:hover,
.editor-image-lightbox-close:focus-visible {
  color: #fff;
  background: #315f7d;
  border-color: #315f7d;
}
.editor-image-lightbox-open { overflow: hidden; }
.image-preview-item img { cursor: zoom-in; }

@media (max-width: 560px) {
  .editor-delete-order-zone { margin-top: 0; }
  .editor-image-lightbox { padding: 10px; }
  .editor-image-lightbox-dialog { max-height: calc(100vh - 20px); padding: 38px 10px 10px; }
  .editor-image-lightbox-dialog img { max-height: calc(100vh - 108px); }
}



/* R69 — responsive order editor and Excel export for the active order table. */
.orders-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.toolbar-export-orders {
  min-height: 30px;
  padding: 5px 9px;
  color: #1b5b82;
  border-color: #a9c9dc;
  white-space: nowrap;
}
.toolbar-export-orders:hover,
.toolbar-export-orders:focus-visible {
  color: #104365;
  background: #edf7fb;
  border-color: #6eabc9;
  outline: none;
}
.toolbar-export-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #19786d;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}
.order-form-fragment,
.order-form-fragment .editor-grid,
.order-form-fragment .editor-grid > * {
  min-width: 0;
}
.modal-order-header > div:first-child {
  min-width: 0;
}
.modal-order-header h2,
.modal-order-header p:not(.eyebrow) {
  overflow-wrap: anywhere;
}
.order-form-fragment .form-section-head > div {
  min-width: 0;
}

@media (max-width: 1120px) {
  .editor-grid {
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 12px;
  }
  .editor-side { top: 12px; }
  .order-form-fragment.is-modal-fragment .editor-side { top: 12px; }
  .orders-toolbar-actions { max-width: 100%; }
}

@media (max-width: 920px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .editor-side {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  .editor-side > .totals-card { grid-column: 1; grid-row: 1; }
  .editor-side > [data-order-save-button] { grid-column: 1; grid-row: 2; }
  .editor-side > .summary-link-card { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .orders-toolbar-actions { justify-content: space-between; width: 100%; }
}

@media (max-width: 680px) {
  .order-modal { display: block; padding: 0; }
  .order-modal-dialog {
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
  }
  .order-form-fragment.is-modal-fragment { padding: 0 8px 14px; }
  .modal-order-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    min-height: 0;
    margin-right: -8px;
    margin-left: -8px;
    padding: 11px 10px;
  }
  .modal-order-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .modal-order-header-actions .button { width: 100%; }
  .modal-form-feedback { margin-bottom: 10px; }
  .order-page-header-actions { width: 100%; }
  .order-page-header-actions .button { width: 100%; }
  .form-section { padding: 12px; }
  .form-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 11px; }
  .form-section-head > .button { width: 100%; }
  .customer-name-control { align-items: stretch; flex-direction: column; }
  .customer-change-button { width: 100%; }
  .item-row {
    grid-template-columns: 25px minmax(0, 1fr) 34px;
    gap: 7px;
    padding: 9px;
  }
  .item-field { grid-column: 2; }
  .price-field { grid-column: 2 / -1; max-width: 180px; }
  .paste-box { grid-column: 2 / -1; min-width: 0; }
  .icon-button { grid-column: 3; grid-row: 1; }
  .item-number { margin-top: 5px; }
  .paste-box-main { min-height: 44px; padding: 6px; }
  .paste-box-main p { line-height: 1.45; }
  .file-picker-panel { width: 100%; max-width: none; }
  .item-file-input { width: 100%; }
  .image-preview { gap: 8px; }
  .image-preview-item,
  .image-preview-item .image-thumbnail,
  .image-preview-item > img { width: 64px; height: 64px; }
  .editor-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .editor-side > .totals-card,
  .editor-side > [data-order-save-button],
  .editor-side > .summary-link-card {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
  }
  .editor-side > [data-order-save-button] {
    min-height: 42px;
    font-size: 15px;
  }
  .summary-link-card .actions .button,
  .summary-link-card .actions a {
    flex: 1 1 100%;
  }
  .summary-text-link { white-space: normal; }
  .orders-toolbar-actions { align-items: stretch; flex-direction: column; }
  .toolbar-export-orders { width: 100%; min-height: 36px; }
}

@media (max-width: 420px) {
  .order-form-fragment.is-modal-fragment { padding-right: 6px; padding-left: 6px; }
  .modal-order-header { margin-right: -6px; margin-left: -6px; }
  .modal-order-header h2 { font-size: 18px; }
  .item-row { grid-template-columns: 22px minmax(0, 1fr) 32px; padding: 8px; }
  .price-field { max-width: none; }
  .paste-box { padding: 8px; }
  .image-preview-item,
  .image-preview-item .image-thumbnail,
  .image-preview-item > img { width: 58px; height: 58px; }
}

/* R71: lock the ordered-items column to the desktop width verified in the worksheet.
   The table stays horizontally scrollable on narrower screens; mobile keeps its compact layout. */
@media (min-width: 761px) {
  .orders-table {
    min-width: 1408px;
  }
  .orders-table col.items {
    width: 417px;
  }
}


/* R72: keep the ordered-items column readable on phones and make the
   mobile “add sale round” action a positive green control. */
@media (max-width: 760px) {
  /* Other worksheet columns are already fixed on phones. Lock the ordered-items
     column too, so long product names retain useful reading width instead of
     being squeezed by the remaining columns. */
  .orders-table {
    min-width: 1350px;
  }
  .orders-table col.items {
    width: 417px;
  }

  .sale-round-add-round-button {
    color: #0f623c;
    background: linear-gradient(105deg, #f0fbf4 0%, #e2f5e9 54%, #eef9f1 100%);
    border-color: #9dceb0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 2px 5px rgba(21, 112, 65, .10);
  }
  .sale-round-add-round-button:hover,
  .sale-round-add-round-button:focus-visible {
    color: #0b4d2e;
    background: linear-gradient(105deg, #e5f8eb 0%, #d4efdf 54%, #e0f5e7 100%);
    border-color: #5da67b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.97), 0 5px 12px rgba(21, 112, 65, .16);
    outline: 0;
  }
  .sale-round-add-round-icon {
    background: linear-gradient(135deg, #1c8a54, #38a96b);
    box-shadow: 0 2px 5px rgba(21, 112, 65, .22);
  }
}

/* R73 — Save the generated PromptPay QR as a PNG from the public order summary. */
.customer-promptpay-qr-actions {
  width: 164px;
  display: grid;
  gap: 8px;
  justify-self: end;
}
.customer-promptpay-qr-actions .customer-promptpay-qr {
  width: 164px;
  height: 164px;
}
.summary-save-promptpay-qr {
  min-height: 36px;
  width: 100%;
  padding: 7px 9px;
  color: #126457;
  background: #fff;
  border: 1px solid #97cfc0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.summary-save-promptpay-qr:hover,
.summary-save-promptpay-qr:focus-visible {
  outline: none;
  color: #fff;
  background: #18796c;
  border-color: #18796c;
}
.summary-save-promptpay-qr:disabled {
  color: #78928d;
  background: #f5faf8;
  border-color: #d2e5de;
  cursor: wait;
}
@media (max-width: 560px) {
  .customer-promptpay-qr-actions {
    width: min(100%, 220px);
    justify-self: center;
  }
  .customer-promptpay-qr-actions .customer-promptpay-qr {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* R74: Remove the redundant orders-page heading and make the fixed-width worksheet
   fit reliably on 1920px desktops, including Windows/browser zoom combinations
   that expose a narrower CSS viewport. The summary moves under the worksheet
   before it can steal enough width to cause an unnecessary horizontal scroll. */
.orders-scroll {
  /* The page heading was removed, so reclaim that vertical space for visible rows. */
  max-height: calc(100dvh - 156px);
}

@media (min-width: 761px) {
  /* Preserve the 417px product column while reducing the nonessential address
     column by 20px. This leaves room for the vertical scrollbar inside the panel. */
  .orders-table { min-width: 1388px; }
  .orders-table col.address { width: 160px; }
}

@media (min-width: 761px) and (max-width: 1740px) {
  /* Screen resolution alone is not enough: Windows display scaling and browser zoom
     change the usable CSS viewport. Put the summary underneath earlier so the table
     has its full workspace width rather than forcing a small side scroll. */
  .orders-workspace { grid-template-columns: minmax(0, 1fr); }
  .orders-summary-panel { position: static; }
  .orders-summary-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 12px;
    padding-top: 8px;
  }
  .orders-summary-list > div {
    display: block;
    padding: 7px 0;
    border-bottom: 0;
  }
  .orders-summary-list dd {
    margin-top: 2px;
    text-align: left;
  }
}

@media (min-width: 1741px) {
  /* At the widest desktop layout retain the right-side summary, but reserve enough
     panel width for every fixed column and a traditional Windows scrollbar. */
  .orders-workspace { grid-template-columns: minmax(0, 1fr) 242px; }
}

@media (max-width: 760px) {
  .orders-scroll { max-height: none; }
}

/* R78: mobile order editor must always cover the complete visible modal area.
   Use the fixed parent as the height reference instead of a standalone dvh value,
   which can briefly lag behind Android browser chrome changes and leave the
   shaded worksheet visible below the editor. */
@media (max-width: 680px) {
  .order-modal {
    height: 100%;
    min-height: 100%;
  }
  .order-modal-dialog {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .order-modal-content {
    height: 100%;
    min-height: 0;
  }
}

/* R80 — Expense ledger: simplified monthly/all view, editable rows, and mobile layout. */
.expense-page-toolbar {
  align-items: end;
}
.expense-view-filter {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  min-width: min(100%, 248px);
}
.expense-view-filter > label {
  display: grid;
  gap: 4px;
  min-width: 248px;
  color: #4c6882;
  font-size: 12px;
  font-weight: 800;
}
.expense-view-filter select {
  width: 100%;
  min-height: 38px;
}
.expenses-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 340px);
  align-items: start;
  gap: 16px;
}
.expense-ledger-panel,
.expense-form-panel {
  min-width: 0;
}
.expense-ledger-head {
  align-items: center;
}
.expense-ledger-head p,
.expense-form-panel .form-section-head p {
  margin: 4px 0 0;
  color: #6d8093;
  font-size: 12px;
}
.expense-total-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  color: #146246;
  background: #e8f7ed;
  border: 1px solid #b8dfc5;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}
.expense-table-wrap {
  overflow-x: auto;
}
.expense-table {
  min-width: 580px;
}
.expense-table th:first-child,
.expense-table td:first-child {
  width: 122px;
  white-space: nowrap;
}
.expense-table .money-column,
.expense-table .money-cell {
  width: 136px;
  white-space: nowrap;
}
.expense-action-column,
.expense-row-actions {
  width: 132px;
  white-space: nowrap;
}
.expense-item-label {
  color: #163e62;
}
.expense-item-with-history {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.expense-history-button {
  min-height: 25px;
  padding: 2px 8px;
  color: #326487;
  background: #f2f8fc;
  border: 1px solid #bfd5e5;
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.expense-history-button:hover,
.expense-history-button:focus-visible {
  color: #fff;
  background: #326f99;
  border-color: #326f99;
  outline: none;
}
.expense-history-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(50, 111, 153, .18);
}

.expense-history-dialog .expense-history-panel {
  width: min(700px, 100%);
  max-width: 700px;
  max-height: min(84vh, 760px);
  overflow: hidden;
}
.expense-history-icon {
  color: #275f88;
  background: #edf6fc;
  border-color: #c4dbea;
}
.expense-history-content {
  display: flex;
  min-height: 0;
  max-height: min(70dvh, 650px);
  flex-direction: column;
  overflow: hidden;
}
.expense-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.expense-history-kicker {
  margin: 0 0 2px;
  color: #69859a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.expense-history-heading .app-confirm-message {
  margin-top: 2px;
}
.expense-history-close-button {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #60798c;
  background: #f5f8fa;
  border: 1px solid #d6e1e8;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.expense-history-close-button:hover,
.expense-history-close-button:focus-visible {
  color: #173d5d;
  background: #eaf2f7;
  outline: none;
}
.expense-history-dialog [data-expense-history-body] {
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 14px;
  padding-right: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.expense-history-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 11px;
}
.expense-history-summary > div {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  background: #f5f9fc;
  border: 1px solid #d5e3ed;
  border-radius: 9px;
}
.expense-history-summary span {
  color: #6a8294;
  font-size: 11px;
  font-weight: 700;
}
.expense-history-summary strong {
  color: #174a70;
  font-size: 14px;
}
.expense-history-note,
.expense-history-error,
.expense-history-empty {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.55;
}
.expense-history-note {
  margin-bottom: 11px;
  color: #795b1d;
  background: #fff9e9;
  border: 1px solid #eddcae;
}
.expense-history-error {
  color: #913939;
  background: #fff3f3;
  border: 1px solid #efd0d0;
}
.expense-history-empty {
  color: #60798b;
  background: #f7fafc;
  border: 1px dashed #cddce7;
  text-align: center;
}
.expense-history-loading {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #607a8e;
  font-size: 13px;
}
.expense-history-spinner {
  width: 17px;
  height: 17px;
  border: 2px solid #d1e1ec;
  border-top-color: #34759f;
  border-radius: 50%;
  animation: expense-history-spin .7s linear infinite;
}
@keyframes expense-history-spin {
  to { transform: rotate(360deg); }
}
.expense-history-timeline {
  position: relative;
  display: grid;
  gap: 9px;
  padding-left: 18px;
}
.expense-history-timeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 2px;
  background: #d8e4ec;
}
.expense-history-entry {
  position: relative;
  padding: 10px 11px;
  background: #fff;
  border: 1px solid #d9e5ed;
  border-radius: 10px;
}
.expense-history-entry::before {
  content: '';
  position: absolute;
  top: 16px;
  left: -18px;
  width: 10px;
  height: 10px;
  background: #6289a6;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c5d8e5;
}
.expense-history-entry.is-amount_added::before {
  background: #279167;
}
.expense-history-entry.is-created::before {
  background: #326f99;
}
.expense-history-entry.is-updated_inline::before {
  background: #d19134;
}
.expense-history-entry-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.expense-history-entry-title {
  color: #274e6b;
  font-size: 12px;
  font-weight: 800;
}
.expense-history-entry-time {
  color: #7a8f9e;
  font-size: 11px;
  white-space: nowrap;
}
.expense-history-entry-main {
  display: grid;
  gap: 5px;
  margin-top: 6px;
}
.expense-history-entry-amount {
  color: #167044;
  font-size: 18px;
  line-height: 1.2;
}
.expense-history-entry.is-created .expense-history-entry-amount {
  color: #245f88;
}
.expense-history-meta-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #698092;
  font-size: 11px;
}
.expense-history-meta-line strong {
  color: #3a586e;
  text-align: right;
}
.expense-history-entry-user {
  margin-top: 1px;
  color: #91a0ab;
  font-size: 10px;
}
.expense-history-actions {
  flex: 0 0 auto;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #e2eaf0;
}

@media (max-width: 560px) {
  .expense-history-dialog .expense-history-panel {
    max-height: 90dvh;
  }
  .expense-history-content {
    max-height: 72dvh;
  }
  .expense-history-summary {
    grid-template-columns: 1fr;
  }
  .expense-history-entry-top {
    display: grid;
    gap: 2px;
  }
  .expense-history-entry-time {
    white-space: normal;
  }
  .expense-history-meta-line {
    align-items: flex-start;
  }
}
.expense-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.expense-row-actions form {
  margin: 0;
}
.expense-row-actions .button {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 12px;
}
.expense-delete-button {
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  padding: 5px;
}

.expense-add-amount-button {
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  padding: 5px;
  color: #176a45;
  background: #ecf8f0;
  border-color: #b9dfc6;
}
.expense-add-amount-button svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.expense-add-amount-button:hover,
.expense-add-amount-button:focus-visible {
  color: #fff;
  background: #23835a;
  border-color: #1f754f;
}
.expense-add-amount-button:disabled {
  cursor: progress;
  opacity: .65;
}
.expense-add-amount-dialog .app-confirm-panel {
  max-width: 440px;
}
.expense-add-amount-icon {
  color: #176a45;
  background: #e6f7ec;
  border-color: #b9dfc6;
}
.expense-add-amount-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.expense-add-amount-field {
  display: grid;
  gap: 6px;
  color: #173f63;
  font-size: 13px;
  font-weight: 700;
}
.expense-add-amount-field input {
  min-height: 40px;
  text-align: right;
}
.expense-add-amount-summary {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  color: #31546e;
  background: #f5faf7;
  border: 1px solid #cce5d5;
  border-radius: 10px;
  font-size: 13px;
}
.expense-add-amount-summary span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.expense-add-amount-summary strong {
  color: #0b5c3b;
  white-space: nowrap;
}
.expense-delete-button svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.expense-delete-button:hover,
.expense-delete-button:focus-visible {
  color: #fff;
  background: #b43838;
  border-color: #a52f2f;
}
.expense-delete-button:disabled {
  cursor: progress;
  opacity: .65;
}
.expense-row.is-expense-deleting > td {
  opacity: .55;
  transition: opacity .14s ease;
}
.expense-month-groups {
  display: grid;
  gap: 16px;
}
.expense-month-section {
  padding: 12px;
  background: #fbfdff;
  border: 1px solid #c8dce9;
  border-radius: 12px;
}
.expense-month-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 2px 10px;
  border-bottom: 1px dashed #b9cfdf;
}
.expense-month-heading h3 {
  margin: 0;
  color: #173f63;
  font-size: 16px;
}
.expense-month-heading p {
  margin: 3px 0 0;
  color: #668197;
  font-size: 12px;
}
.expense-month-heading strong {
  color: #0b5c3b;
  font-size: 14px;
  white-space: nowrap;
}
.expense-month-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 9px;
  padding-top: 9px;
  color: #183f60;
  border-top: 1px dashed #c4d6e3;
  font-size: 14px;
}
.expense-month-subtotal strong {
  color: #0b5c3b;
  font-size: 16px;
}
.expense-empty-state {
  padding: 14px 2px 4px;
}
.expense-ledger-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  color: #153d60;
  border-top: 1px solid #cbdce9;
  font-size: 15px;
}
.expense-ledger-total strong {
  color: #0b5c3b;
  font-size: 18px;
}
.expense-vendor-fields {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f1f8fc;
  border: 1px solid #c9dfec;
  border-radius: 10px;
}
.expense-vendor-fields[hidden] {
  display: none !important;
}
.expense-entry-form .form-hint {
  margin: -3px 0 0;
  color: #607a91;
  font-size: 12px;
}
.expense-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.expense-form-actions .button.full {
  width: 100%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 900px) {
  .expenses-layout {
    grid-template-columns: 1fr;
  }
  .expense-form-panel {
    order: -1;
  }
}
@media (max-width: 620px) {
  .expense-page-toolbar {
    align-items: stretch;
  }
  .expense-view-filter {
    width: 100%;
    justify-content: stretch;
  }
  .expense-view-filter > label {
    width: 100%;
    min-width: 0;
  }
  .expense-month-section {
    padding: 10px;
  }
  .expense-month-heading {
    align-items: flex-start;
  }
  .expense-ledger-head {
    align-items: flex-start;
    gap: 10px;
  }
  .expense-total-badge {
    font-size: 12px;
  }
  .expense-table {
    min-width: 520px;
  }
  .expense-table th:first-child,
  .expense-table td:first-child {
    width: 102px;
  }
  .expense-table .money-column,
  .expense-table .money-cell {
    width: 112px;
  }
  .expense-action-column,
  .expense-row-actions {
    width: 122px;
  }
  .expense-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .expense-form-actions .button:not(.full) {
    width: 100%;
  }
}


/* R84 — Click date or amount to edit directly in the expense ledger. */
.expense-table {
  min-width: 548px;
}
.expense-action-column,
.expense-row-actions {
  width: 92px;
}
.expense-editable-cell {
  vertical-align: middle;
}
.expense-inline-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  margin: -3px -5px;
  padding: 3px 5px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  line-height: 1.35;
  text-align: inherit;
  white-space: nowrap;
  cursor: text;
}
.expense-inline-trigger:hover {
  color: #0d4f7a;
  background: #e8f4fb;
}
.expense-inline-trigger:focus-visible {
  color: #0d4f7a;
  background: #e8f4fb;
  outline: 2px solid #79aeca;
  outline-offset: 1px;
}
.expense-inline-date-trigger {
  min-width: 106px;
}
.expense-inline-amount-trigger {
  width: 100%;
  justify-content: flex-end;
}
.expense-inline-input {
  box-sizing: border-box;
  min-height: 34px;
  width: 100%;
  padding: 5px 7px;
  color: #173f63;
  background: #fff;
  border: 1px solid #4c96bd;
  border-radius: 7px;
  box-shadow: 0 0 0 3px rgba(76, 150, 189, .14);
  font: inherit;
  font-size: 13px;
}
.expense-inline-date {
  min-width: 126px;
}
.expense-inline-amount {
  min-width: 128px;
  text-align: right;
}
.expense-row-inline-saving > td {
  background: #f1f8fd;
  opacity: .74;
}
.expense-row-inline-saving .expense-inline-input {
  pointer-events: none;
}
@media (max-width: 620px) {
  .expense-table {
    min-width: 492px;
  }
  .expense-action-column,
  .expense-row-actions {
    width: 84px;
  }
  .expense-inline-date-trigger {
    min-width: 96px;
  }
  .expense-inline-date {
    min-width: 112px;
  }
  .expense-inline-amount {
    min-width: 106px;
  }
}

/* R85 — Monthly report: locked column geometry on desktop and readable cards on mobile. */
.report-page-toolbar {
  align-items: end;
}
.report-year-filter {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}
.report-year-filter label {
  min-width: 116px;
}
.report-year-filter input {
  text-align: center;
}
.reports-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  align-items: start;
  gap: 16px;
}
.report-summary-panel,
.report-bank-panel {
  min-width: 0;
  padding: 16px;
}
.report-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.report-panel-head h2 {
  margin: 0;
  color: #173d5d;
  font-size: 16px;
}
.report-panel-head p {
  margin: 3px 0 0;
  color: #687f92;
  font-size: 12px;
}
.report-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d7e1e9;
  border-radius: 8px;
}
.report-table {
  width: 100%;
  min-width: 700px;
  table-layout: fixed;
  border-collapse: collapse;
}
.report-table .report-month-column {
  width: 28%;
}
.report-table .report-money-column {
  width: 18%;
}
.report-table th,
.report-table td {
  display: table-cell;
  padding: 11px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #dce5ec;
}
.report-table thead th {
  color: #4f6c85;
  background: #f2f7fb;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.report-table tbody tr:last-child td {
  border-bottom: 0;
}
.report-table th:first-child,
.report-table .report-month-cell {
  text-align: left;
}
.report-table .money-heading,
.report-table .money-cell {
  text-align: right;
}
.report-table .money-cell {
  color: #123f65;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.report-table .report-expense-cell {
  color: #785018;
}
.report-table .report-net-cell {
  color: #0b6843;
  font-weight: 800;
}
.report-table .report-net-cell.is-negative {
  color: #a33333;
}
.report-table .report-empty-cell {
  padding: 30px 12px;
  color: #6b8191;
  text-align: center;
}
.report-mobile-list {
  display: none;
}
.report-year-total {
  margin-top: 16px;
  padding: 14px;
  background: #f7fbfd;
  border: 1px solid #c9dce8;
  border-radius: 10px;
}
.report-year-total-head {
  margin-bottom: 11px;
}
.report-year-total-head h3 {
  margin: 0;
  color: #173d5d;
  font-size: 15px;
}
.report-year-total-head p {
  margin: 3px 0 0;
  color: #687f92;
  font-size: 12px;
}
.report-year-total-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.report-year-total-item {
  min-width: 0;
  padding: 11px 12px;
  background: #ffffff;
  border: 1px solid #d9e5ec;
  border-radius: 8px;
}
.report-year-total-item dt {
  color: #637b8e;
  font-size: 12px;
}
.report-year-total-item dd {
  margin: 4px 0 0;
  color: #163f64;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.report-year-total-expense dd {
  color: #785018;
}
.report-year-total-net {
  background: #f1fbf5;
  border-color: #badfc9;
}
.report-year-total-net dt,
.report-year-total-net dd {
  color: #0b6843;
}
.report-year-total-net.is-negative {
  background: #fff7f7;
  border-color: #efcaca;
}
.report-year-total-net.is-negative dt,
.report-year-total-net.is-negative dd {
  color: #a33333;
}
.report-bank-panel .simple-list > div {
  min-height: 42px;
}
.report-bank-list em {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1040px) {
  .reports-layout {
    grid-template-columns: 1fr;
  }
  .report-bank-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }
}

@media (max-width: 660px) {
  .report-page-toolbar {
    align-items: stretch;
  }
  .report-year-filter {
    justify-content: stretch;
  }
  .report-year-filter label {
    flex: 1 1 auto;
    min-width: 0;
  }
  .report-year-filter .button {
    flex: 0 0 auto;
  }
  .report-summary-panel,
  .report-bank-panel {
    padding: 13px;
  }
  .report-panel-head {
    margin-bottom: 11px;
  }
  .report-table-wrap {
    display: none;
  }
  .report-mobile-list {
    display: grid;
    gap: 10px;
  }
  .report-mobile-empty {
    margin: 0;
    padding: 20px 8px;
    color: #6b8191;
    text-align: center;
  }
  .report-year-total {
    margin-top: 12px;
    padding: 12px;
  }
  .report-year-total-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .report-year-total-item {
    padding: 10px;
  }
  .report-year-total-item dt {
    font-size: 11px;
  }
  .report-year-total-item dd {
    font-size: 13px;
  }
  .report-month-card {
    padding: 12px;
    background: #fbfdff;
    border: 1px solid #d7e4ed;
    border-radius: 9px;
  }
  .report-month-card h3 {
    margin: 0 0 8px;
    color: #173e61;
    font-size: 15px;
  }
  .report-month-card dl {
    margin: 0;
  }
  .report-month-card dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    border-top: 1px solid #e6edf2;
  }
  .report-month-card dt {
    color: #61788b;
    font-size: 12px;
  }
  .report-month-card dd {
    margin: 0;
    color: #173f62;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }
  .report-month-card dd.is-expense {
    color: #785018;
  }
  .report-month-card .report-net-row {
    margin-top: 3px;
    padding-top: 8px;
    border-top-color: #cbdbe6;
  }
  .report-month-card .report-net-row dt,
  .report-month-card .report-net-row dd {
    color: #0b6843;
    font-weight: 800;
  }
  .report-month-card .report-net-row dd.is-negative {
    color: #a33333;
  }
  .report-bank-list {
    grid-template-columns: 1fr;
  }
}


/* R86 — Password visibility and six-digit PIN login */
.login-method-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: #f1f5f8;
  border: 1px solid #d8e2ea;
  border-radius: 8px;
}
.login-method-button {
  min-height: 34px;
  cursor: pointer;
  touch-action: manipulation;
  padding: 6px 9px;
  color: #526679;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}
.login-method-button:hover { color: var(--blue); background: #fff; }
.login-method-button.is-active { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 1px 2px rgba(18, 57, 88, .16); }
.login-method-button.is-disabled,
.login-method-button:disabled { color: #8798a5; background: #edf1f4; border-color: #d9e1e6; cursor: not-allowed; opacity: .78; }
.login-method-panel { display: grid; gap: 13px; }
.login-method-panel[hidden] { display: none !important; }
.pin-login-panel input { letter-spacing: .38em; text-align: center; font-size: 18px; font-weight: 800; }
.pin-login-panel input::placeholder { letter-spacing: .18em; color: #93a3b1; }
.password-input-wrap { position: relative; display: block; width: 100%; }
.password-input-wrap input { padding-right: 42px; }
.password-visibility-toggle {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  top: 50%;
  right: 3px;
  width: 34px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #5d7589;
  background: transparent;
  border: 0;
  border-radius: 5px;
  transform: translateY(-50%);
}
.password-visibility-toggle:hover { color: var(--blue); background: #edf4f9; }
.password-visibility-toggle:focus-visible { outline: 3px solid rgba(55, 128, 188, .28); outline-offset: 1px; }
.password-visibility-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.password-visibility-toggle.is-visible .password-visibility-slash { display: none; }
.pin-settings-card { width: min(660px, 100%); padding: 21px; }
.pin-settings-status { display: grid; gap: 3px; margin-bottom: 18px; padding: 12px 14px; color: #7a5520; background: #fff8e9; border: 1px solid #f0d9a4; border-radius: 8px; }
.pin-settings-status strong { font-size: 14px; }
.pin-settings-status span { color: #80683d; font-size: 12px; }
.pin-settings-status.is-configured { color: #14634c; background: #eaf8f0; border-color: #bfe6cf; }
.pin-settings-status.is-configured span { color: #477466; }
.pin-settings-form > .button { align-self: flex-start; min-width: 134px; }
.trusted-device-login-note { margin-top: 14px; padding: 10px 12px; color: #6b562d; background: #fff8e9; border: 1px solid #f0d9a4; border-radius: 7px; }
.account-security-grid { display: grid; grid-template-columns: minmax(0, 660px) minmax(280px, 380px); gap: 18px; align-items: start; }
.trusted-device-card { padding: 21px; }
.trusted-device-card h2 { margin: 3px 0 8px; font-size: 18px; }
.trusted-device-count { margin: 0 0 10px; color: #14634c; font-size: 26px; font-weight: 800; }
.trusted-device-card .button.danger { justify-content: center; }

@media (max-width: 640px) {
  .user-menu { gap: 8px; font-size: 11px; }
  .user-menu span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
  .account-page-toolbar { align-items: stretch; }
  .account-page-toolbar .button { width: 100%; }
  .pin-settings-card { padding: 17px; }
  .pin-settings-form .form-grid.two { grid-template-columns: 1fr; }
  .account-security-grid { grid-template-columns: 1fr; }
  .trusted-device-card { padding: 17px; }
}

@media (min-width: 641px) and (max-width: 1120px) {
  .account-security-grid { grid-template-columns: minmax(0, 660px); }
}

/* R92 — predictable scrolling in the orders workspace.
   Wide desktops keep the worksheet inside the visible viewport, so only the
   table scrolls vertically. At narrower CSS widths the summary moves below
   the table; the table then grows naturally and the browser page becomes the
   single vertical scroll area. This avoids two competing vertical scrollbars. */
@media (min-width: 1741px) {
  html:has(body.office-body-orders),
  body.office-body-orders {
    height: 100%;
    overflow: hidden;
  }

  .office-body-orders .office-shell {
    height: calc(100dvh - 94px);
    min-height: 0;
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .office-body-orders .orders-workspace {
    height: 100%;
  }

  .office-body-orders .orders-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .office-body-orders .orders-toolbar {
    flex: 0 0 auto;
  }

  .office-body-orders .orders-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

@media (min-width: 761px) and (max-width: 1740px) {
  /* In this layout the summary sits below the worksheet. Let the page itself
     perform vertical scrolling so users never have to choose between two
     nearly-overlapping scroll areas. Horizontal table scrolling remains. */
  .office-body-orders .orders-scroll {
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }
}

/* R94 — clear buttons for the search fields in Orders and Customers.
   The explicit control avoids browser-specific native search decorations. */
.clearable-input {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.clearable-input > input {
  width: 100%;
  padding-right: 40px !important;
}
.clearable-input-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 5px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
  color: #688198;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(-50%);
}
.clearable-input-button:hover {
  color: #285d82;
  background: #eaf3f8;
}
.clearable-input-button:focus-visible {
  outline: 3px solid rgba(55, 128, 188, .28);
  outline-offset: 1px;
}
.clearable-input-button[hidden] { display: none !important; }
.clearable-input-button svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  /* Optical correction: the X glyph appears slightly lower/right inside a circle. */
  transform: translate(-1px, -1px);
}
.customer-search-form .customer-search-input {
  flex: 1 1 auto;
  min-width: 0;
}
.customer-name-field .order-customer-search-input { display: none; }
.customer-name-field .order-customer-search-input.is-editable { display: block; }

@media (max-width: 640px) {
  .clearable-input-button {
    right: 4px;
    width: 34px;
    height: 34px;
  }
}


/* R96 — fast recent-period order workspace and clear editor zones. */
.orders-period-note {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0 0;
  padding: 7px 10px;
  color: #315a73;
  background: linear-gradient(90deg, #f3f9fc, #f9fcfd);
  border: 1px solid #d5e5ee;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.35;
}
.orders-period-note strong { color: #164d70; }
.orders-period-note span { color: #6d8291; }

/* Customer selection is the first decision in a new order, so it gets a calm
   blue identity panel instead of disappearing into the surrounding white card. */
.customer-panel.customer-identity-panel {
  margin-top: 12px;
  padding: 13px;
  background: linear-gradient(135deg, #e8f6ff 0%, #f3fbff 58%, #edf7fb 100%);
  border: 1px solid #9ecbe3;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(35, 103, 143, .06);
}
.customer-panel.customer-identity-panel > label,
.customer-panel.customer-identity-panel .customer-name-label {
  color: #1e597d;
  font-weight: 800;
}
.customer-panel.customer-identity-panel input:not([type="hidden"]) {
  background: #fff;
  border-color: #8ebbd6;
  box-shadow: inset 0 1px 1px rgba(31,77,105,.04);
}
.customer-panel.customer-identity-panel input:not([type="hidden"]):focus {
  border-color: #2e83b5;
  box-shadow: 0 0 0 3px rgba(46,131,181,.14);
}
.customer-panel.customer-identity-panel .customer-name-badge {
  color: #1e4b69;
  background: #fff;
  border-color: #90bdd7;
}
.customer-panel.customer-identity-panel .customer-change-hint {
  margin-bottom: 0;
  color: #56798e;
}

/* Product entry deliberately uses a separate mint surface, making it obvious
   that this is the list-of-goods workspace rather than the customer selector. */
.order-items-section {
  background: linear-gradient(135deg, #edf9f3 0%, #f7fcf8 54%, #edf8f4 100%);
  border-color: #b5d9c2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.order-items-section .form-section-head {
  padding-bottom: 10px;
  border-bottom: 1px solid #cae5d4;
}
.order-items-section .form-section-head h2 { color: #175c40; }
.order-items-section .form-section-head p { color: #4f7d69; }
.order-items-section .items-editor { padding: 2px; }
.order-items-section .item-row {
  background: rgba(255,255,255,.92);
  border-color: #b9ddc6;
  box-shadow: 0 2px 7px rgba(29,105,68,.045);
}
.order-items-section .item-row:not(.is-standby-item) .item-field > input,
.order-items-section .item-row:not(.is-standby-item) .price-field > input {
  background: #fff;
  border-color: #b6d7c2;
}
.order-items-section .item-row:not(.is-standby-item) .paste-box {
  background: #fbfffc;
  border-color: #9ac9ab;
}
.order-items-section .item-row:not(.is-standby-item) .paste-box:hover,
.order-items-section .item-row:not(.is-standby-item) .paste-box:focus {
  background: #f0fbf4;
  border-color: #55a575;
}
.order-items-section .item-row.is-standby-item {
  border-color: #79b99a;
  background: linear-gradient(90deg, #e9f8ef, #f8fdf9);
  box-shadow: inset 3px 0 0 #2d9262;
}

@media (max-width: 680px) {
  .orders-period-note { margin-top: 8px; padding: 8px 9px; }
  .customer-panel.customer-identity-panel { padding: 11px; }
  .order-items-section { border-color: #b3d7c0; }
}


/* R98 — instant filters without a redundant submit button. */
.orders-toolbar .filter-row {
  grid-template-columns: 154px minmax(240px, 1fr) auto;
}

.customer-search-realtime-status {
  flex: 0 0 auto;
  min-height: 18px;
  color: #6d8191;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1240px) {
  .orders-toolbar .filter-row { grid-template-columns: 140px minmax(195px, 1fr) auto; }
}

@media (max-width: 760px) {
  .orders-toolbar .filter-row { grid-template-columns: 1fr; }
  .orders-toolbar .filter-row .search-wrap,
  .orders-toolbar .filter-row .toolbar-new-order { grid-column: 1 / -1; }
  .customer-search-realtime-status { min-height: 0; }
}

/* R101 — Keep the Orders workspace inside the visible desktop viewport.
   Windows display scaling, browser zoom, and scrollbar metrics can change the
   usable CSS height even when two monitors both report 1920×1080. The toolbar,
   worksheet, monthly summaries, and side/under summary now share one bounded
   workspace: only the order-table region scrolls vertically. */
@media (min-width: 821px) {
  html:has(body.office-body-orders),
  body.office-body-orders {
    height: 100%;
    overflow: hidden;
  }

  .office-body-orders .office-shell {
    height: calc(100dvh - 94px);
    min-height: 0;
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .office-body-orders .orders-workspace {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .office-body-orders .orders-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .office-body-orders .orders-toolbar {
    flex: 0 0 auto;
  }

  .office-body-orders .orders-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }
}

/* At narrower desktop CSS widths keep the summary below the worksheet, but
   reserve its own row in the same viewport so it never gets pushed below the
   browser window. */
@media (min-width: 821px) and (max-width: 1740px) {
  .office-body-orders .orders-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .office-body-orders .orders-right-panel {
    min-height: 0;
  }

  .office-body-orders .orders-summary-panel {
    position: static;
  }

  .office-body-orders .orders-summary-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 12px;
    padding-top: 8px;
  }

  .office-body-orders .orders-summary-list > div {
    display: block;
    padding: 7px 0;
    border-bottom: 0;
  }

  .office-body-orders .orders-summary-list dd {
    margin-top: 2px;
    text-align: left;
  }
}

@media (min-width: 1741px) {
  .office-body-orders .orders-workspace {
    grid-template-columns: minmax(0, 1fr) 242px;
    grid-template-rows: minmax(0, 1fr);
  }
}

/* R102 — single-row Orders toolbar.
   Keep the active period and state selectors in the same form so each changes
   immediately without adding a second toolbar row or an extra submit action. */
.office-body-orders .orders-toolbar {
  padding: 10px 12px;
}
.office-body-orders .orders-toolbar .filter-row {
  grid-template-columns: 154px minmax(260px, 520px) 168px auto;
  justify-content: start;
  gap: 8px;
}
.office-body-orders .orders-toolbar .search-wrap {
  min-width: 0;
}
.office-body-orders .orders-toolbar .order-status-filter {
  min-width: 0;
}
.office-body-orders .orders-toolbar .toolbar-new-order {
  align-self: end;
  min-height: 34px;
}

/* The export action lives at the top of the Summary panel, not in the order
   toolbar. It stays visibly associated with the currently selected period and
   status without taking vertical room above the table. */
.orders-right-panel {
  display: grid;
  align-content: start;
  gap: 8px;
}
.orders-panel-export {
  width: 100%;
  min-height: 34px;
}

@media (min-width: 821px) and (max-width: 1040px) {
  .office-body-orders .orders-toolbar .filter-row {
    grid-template-columns: 142px minmax(220px, 1fr) 155px auto;
  }
}

@media (max-width: 820px) {
  .office-body-orders .orders-toolbar .filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .office-body-orders .orders-toolbar .search-wrap {
    grid-column: 1 / -1;
  }
  .office-body-orders .orders-toolbar .toolbar-new-order {
    grid-column: 1 / -1;
    width: 100%;
  }
  .orders-panel-export {
    width: auto;
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .office-body-orders .orders-toolbar .filter-row {
    grid-template-columns: 1fr;
  }
  .office-body-orders .orders-toolbar .search-wrap,
  .office-body-orders .orders-toolbar .toolbar-new-order {
    grid-column: auto;
  }
  .orders-panel-export {
    width: 100%;
    justify-self: stretch;
  }
}


/* R104 — make the Orders toolbar use the entire available width and display
   the generated favicon artwork in the top-left brand. */
.brand-mark.brand-logo {
  display: block;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  padding: 0;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  background: #173b5a;
  border: 1px solid #c0d1df;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 57, 88, .12);
}

/* The search field is now the flexible column: month, search, status, action.
   This removes the old 520px cap so the four toolbar controls fill the row. */
@media (min-width: 1041px) {
  .office-body-orders .orders-toolbar .filter-row {
    grid-template-columns: 154px minmax(340px, 1fr) 168px auto;
    justify-content: stretch;
    width: 100%;
  }

  .office-body-orders .orders-toolbar .search-wrap {
    width: 100%;
  }
}

@media (min-width: 821px) and (max-width: 1040px) {
  .office-body-orders .orders-toolbar .filter-row {
    grid-template-columns: 142px minmax(220px, 1fr) 155px auto;
    justify-content: stretch;
    width: 100%;
  }
}

/* R108 — held-order realtime badges and table-style expanded rows */
.held-preview-row td {
  background: #eefaf2 !important;
  color: #176c45;
  border-top-color: #b7ddc5;
  border-bottom-color: #cfe9d8;
}
.held-preview-row .items-cell,
.held-preview-row .order-total strong,
.held-preview-row .shipping-inline-display,
.held-preview-row .shipping-inline-display strong {
  color: #176c45;
}
.held-preview-marker-cell {
  text-align: center;
  vertical-align: top;
}
.held-preview-marker,
.held-preview-duplicate-note,
.customer-history-held-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  color: #147343;
  background: #d6f0df;
  border: 1px solid #afdabc;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.held-preview-duplicate-note {
  color: #4d7460;
  background: #edf8f1;
}
.customer-history-line.is-held {
  background: #e7f7ec;
}
.customer-history-line.is-held:hover {
  background: #def2e6;
  box-shadow: inset 3px 0 0 #2b8d55;
}
.customer-history-line.is-held > strong,
.customer-history-line.is-held > em {
  color: #177548;
}
.customer-history-held-badge {
  margin-right: 6px;
  vertical-align: middle;
}


/* R109 — print held-order visual cues, restore filter action, and resize search clear button. */
.clearable-input > input { padding-right: 34px !important; }
.clearable-input-button {
  right: 8px;
  width: 22px;
  height: 22px;
  line-height: 0;
  overflow: hidden;
}
.clearable-input-button svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.1;
  transform: none;
}
.clearable-input-button:hover { background: #e8f1f7; }
.office-body-orders .orders-toolbar .toolbar-filter-submit {
  align-self: end;
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}
@media (min-width: 1041px) {
  .office-body-orders .orders-toolbar .filter-row {
    grid-template-columns: 154px minmax(320px, 1fr) auto 168px auto;
  }
}
@media (min-width: 821px) and (max-width: 1040px) {
  .office-body-orders .orders-toolbar .filter-row {
    grid-template-columns: 142px minmax(210px, 1fr) auto 155px auto;
  }
}
@media (max-width: 820px) {
  .office-body-orders .orders-toolbar .toolbar-filter-submit {
    align-self: end;
  }
}
@media (max-width: 640px) {
  .clearable-input-button {
    right: 7px;
    width: 24px;
    height: 24px;
  }
  .clearable-input-button svg {
    width: 12px;
    height: 12px;
  }
}


/* R110 — hide held-order badge completely when count is zero. */
.customer-cell .held-expand-button[hidden],
.customer-cell .held-expand-button[data-held-count="0"],
.orders-table .customer-order-tools .held-expand-button[hidden],
.orders-table .customer-order-tools .held-expand-button[data-held-count="0"] {
  display: none !important;
}

/* R111 — contextual held-order badge labels, icon expand/collapse, and search keyword chips. */
.customer-cell .held-expand-button {
  gap: 4px;
}
.held-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 1px;
  color: currentColor;
}
.held-expand-icon svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  transition: transform .16s ease;
}
.held-expand-button.is-expanded .held-expand-icon svg,
.held-expand-button[aria-expanded="true"] .held-expand-icon svg {
  transform: rotate(180deg);
}
.clearable-input[data-search-chip] {
  display: grid;
  gap: 5px;
}
.clearable-input[data-search-chip] > input {
  padding-right: 12px !important;
}
.clearable-input[data-search-chip] > .clearable-input-button {
  display: none !important;
}
.search-keyword-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 380px);
  min-height: 24px;
  padding: 3px 7px 3px 9px;
  color: #594018;
  background: #ffe4bd;
  border: 1px solid #e3b474;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(87, 58, 16, .06);
}
.search-keyword-chip[hidden] {
  display: none !important;
}
.search-keyword-chip span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-keyword-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 7px;
  color: #6a4a1d;
  background: rgba(255, 255, 255, .62);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}
.search-keyword-chip:hover {
  border-color: #d49a54;
  background: #ffdca9;
}
@media (min-width: 821px) {
  .office-body-orders .orders-toolbar .filter-row {
    align-items: start;
  }
  .office-body-orders .orders-toolbar .toolbar-filter-submit,
  .office-body-orders .orders-toolbar .order-status-filter,
  .office-body-orders .orders-toolbar .toolbar-new-order {
    align-self: end;
  }
}


/* R112 — place the active search keyword chip inside the search field.
   The real input keeps the value for forms/AJAX, but its text becomes visually
   hidden while the compact chip is shown inside the same control. This avoids
   the toolbar jumping to two rows while typing. */
.clearable-input[data-search-chip] {
  position: relative !important;
  display: block !important;
  width: 100%;
  min-width: 0;
  gap: 0 !important;
}
.clearable-input[data-search-chip] > input {
  width: 100%;
  padding-right: 12px !important;
}
.clearable-input[data-search-chip].has-search-chip-value > input,
.clearable-input[data-search-chip][data-has-search-value="1"] > input {
  color: transparent;
  caret-color: transparent;
  text-shadow: none;
}
.clearable-input[data-search-chip].has-search-chip-value > input::selection,
.clearable-input[data-search-chip][data-has-search-value="1"] > input::selection {
  color: transparent;
  background: transparent;
}
.clearable-input[data-search-chip].has-search-chip-value > input::placeholder,
.clearable-input[data-search-chip][data-has-search-value="1"] > input::placeholder {
  color: transparent;
}
.search-keyword-chip {
  position: absolute !important;
  z-index: 4;
  left: 8px;
  top: 50%;
  max-width: calc(100% - 16px);
  min-height: 24px;
  transform: translateY(-50%);
  margin: 0;
  pointer-events: auto;
}
.search-keyword-chip[hidden] {
  display: none !important;
}
.search-keyword-chip span:first-child {
  min-width: 0;
}
.search-keyword-chip-x {
  flex: 0 0 18px;
}
.customer-search-form .clearable-input[data-search-chip] {
  flex: 1 1 auto;
}

/* R119 — soften expanded held-order separators.
   Top and bottom borders only; no left/right edge accents. */
.orders-table .held-detail-row[hidden] + .held-preview-row > td,
.orders-table .held-detail-row + .held-preview-row > td {
  border-top: 2px solid #8fcfa5 !important;
}
.orders-table .held-preview-row:has(+ tr:not(.held-preview-row)) > td,
.orders-table .held-preview-row:last-child > td {
  border-bottom: 2px solid #8fcfa5 !important;
}

/* R120 — PromptPay summary: hide PromptPay ID/copy and show PromptPay logo above QR. */
.customer-promptpay-card {
  grid-template-columns: minmax(0, 1fr) 164px;
  align-items: center;
}
.customer-promptpay-details {
  justify-content: center;
}
.customer-promptpay-logo {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 6px;
}
.customer-promptpay-qr-actions {
  align-content: center;
}
@media (max-width: 560px) {
  .customer-promptpay-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .customer-promptpay-qr-actions {
    width: min(100%, 220px);
    justify-self: center;
  }
  .customer-promptpay-logo,
  .customer-promptpay-qr-actions .customer-promptpay-qr {
    width: 100%;
  }
}

/* R126: order image gallery lightbox and tighter inline layout. */
.items-cell-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.items-cell-topline .items-summary {
  min-width: 0;
  flex: 1 1 auto;
}
.order-gallery-button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #2b5c7b;
  background: #f6fafc;
  border: 1px solid #c9dce8;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(25, 58, 80, .08);
  cursor: pointer;
}
.order-gallery-button:hover,
.order-gallery-button:focus-visible {
  color: #fff;
  background: #2e6c94;
  border-color: #2e6c94;
  outline: none;
}
.order-gallery-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.order-row.state-held .order-gallery-button {
  color: #177548;
  background: #f8fdf9;
  border-color: #bfe4cb;
}
.order-row.state-held .order-gallery-button:hover,
.order-row.state-held .order-gallery-button:focus-visible {
  color: #fff;
  background: #268457;
  border-color: #268457;
}

body.order-gallery-modal-open { overflow: hidden; }
.order-gallery-modal[hidden] { display: none; }
.order-gallery-modal {
  position: fixed;
  z-index: 255;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}
.order-gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 32, 46, .56);
  backdrop-filter: blur(2px);
}
.order-gallery-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: min(92vh, 980px);
  overflow: auto;
  background: #f4f8fb;
  border: 1px solid rgba(209, 222, 233, .96);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(10, 27, 43, .36);
}
.order-gallery-modal-header {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 13px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #d5e0e8;
  box-shadow: 0 2px 9px rgba(23, 47, 68, .05);
  backdrop-filter: blur(8px);
}
.order-gallery-modal-header h2 {
  margin: 0;
  color: #173d5d;
  font-size: 21px;
}
.order-gallery-modal-header p:not(.eyebrow) {
  margin: 3px 0 0;
  color: #617789;
  font-size: 13px;
  font-weight: 750;
}
.order-gallery-modal-body { padding: 16px 18px 20px; }
.order-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.order-gallery-card {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d0dde7;
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(21, 51, 73, .08);
}
.order-gallery-thumb {
  width: 100%;
  display: grid;
  place-items: center;
  height: 190px;
  padding: 8px;
  background: #f8fbfd;
  border: 0;
  border-bottom: 1px solid #e0e8ee;
  cursor: zoom-in;
}

.order-gallery-thumb:hover,
.order-gallery-thumb:focus-visible {
  outline: 3px solid rgba(46, 108, 148, .28);
  outline-offset: -3px;
  background: #eef6fb;
}

/* Keep the table-cell whitespace from creating a blank visual line before the
   product list. Preserve product line breaks only inside the product summary. */
.items-cell {
  white-space: normal;
}
.items-cell-topline {
  margin-top: 0;
}
.items-cell-topline .items-summary {
  white-space: pre-line;
}
.items-cell .items-summary-actions {
  white-space: normal;
}

.order-gallery-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.order-gallery-card figcaption {
  display: grid;
  gap: 3px;
  padding: 9px 10px 10px;
}
.order-gallery-card figcaption strong {
  color: #243f55;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.order-gallery-card figcaption span {
  color: #557082;
  font-size: 12px;
  font-weight: 800;
}
.order-gallery-empty {
  display: grid;
  gap: 4px;
  padding: 28px 18px;
  color: #5a7182;
  background: #fff;
  border: 1px dashed #c7d7e3;
  border-radius: 10px;
  text-align: center;
}
.order-gallery-empty strong { color: #24465f; }

@media (max-width: 720px) {
  .order-gallery-modal { padding: 0; }
  .order-gallery-modal-dialog {
    width: 100%;
    max-height: none;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .order-gallery-modal-header { padding: 13px 12px; }
  .order-gallery-modal-body { padding: 12px; }
  .order-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .order-gallery-thumb { height: 150px; }
  .order-gallery-card figcaption { padding: 8px; }
}

/* R128: summary language autosave status */
.summary-language-save-status:empty { display: none; }
.summary-language-save-status.is-saving { color: #35627f; }
.summary-language-save-status.is-saved { color: #08704d; }
.summary-language-save-status.is-error { color: #b42318; }


/* R130: make the end-of-round add-order action visually clearer while keeping it softer than the main + create order button. */
.orders-table .sale-round-add-row td {
  background: #f7fcff;
  border-top: 8px solid #ffffff;
  border-bottom: 1px solid #73b7ca;
}
.sale-round-add-order-button {
  color: #0b5269;
  background: linear-gradient(105deg, #c7eff9 0%, #d8f8ff 50%, #cff3e8 100%);
  border: 2px solid #2995b3;
  box-shadow: inset 6px 0 0 #2ca6bd, inset 0 1px 0 rgba(255,255,255,.78), 0 5px 13px rgba(22, 112, 145, .16);
}
.sale-round-add-order-button:hover,
.sale-round-add-order-button:focus-visible {
  color: #073f55;
  background: linear-gradient(105deg, #b8eaf6 0%, #ccf4ff 50%, #bdeedc 100%);
  border-color: #157e9d;
  box-shadow: inset 6px 0 0 #178ea8, inset 0 1px 0 rgba(255,255,255,.86), 0 8px 18px rgba(22, 112, 145, .22);
}
.sale-round-add-order-button .sale-round-add-icon {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #168aa8, #18a27c);
  box-shadow: 0 3px 7px rgba(16, 116, 139, .28);
  font-size: 22px;
}
.sale-round-add-order-button strong {
  color: #083f55;
  font-size: 15px;
}
.sale-round-add-order-button small {
  color: #315f72;
  opacity: .92;
}

/* R136: per-sale-round order sort buttons with click-to-cancel */
.sale-round-title-wrap {
  min-width: 0;
}
.sale-round-divider-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.sale-round-sort-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 251, 247, .8);
  border: 1px solid #d9aa89;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(109, 54, 31, .08);
}
.sale-round-sort-label {
  padding: 0 5px 0 7px;
  color: #8c5a43;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}
.sale-round-sort-button {
  min-height: 25px;
  padding: 4px 8px;
  color: #7b4a34;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.sale-round-sort-button:hover,
.sale-round-sort-button:focus-visible {
  color: #64331f;
  background: #fff5ed;
  border-color: #d8a682;
  outline: 0;
}
.sale-round-sort-button.is-active {
  color: #fffaf6;
  background: linear-gradient(135deg, #b9663d, #9f492c);
  border-color: #8f3e25;
  box-shadow: 0 2px 4px rgba(104, 49, 29, .18);
}
.sale-round-sort-button.is-saving {
  opacity: .68;
  cursor: wait;
}
@media (max-width: 760px) {
  .sale-round-divider-content {
    align-items: flex-start;
    flex-direction: column;
  }
  .sale-round-divider-actions {
    width: 100%;
    justify-content: space-between;
  }
  .sale-round-sort-actions {
    max-width: calc(100% - 42px);
    overflow-x: auto;
  }
}

/* R137: hide manual row-drag controls while a sale round is in an active sort mode.
   Staff can click the active sort button again to return the round to manual order;
   the handle then appears again and rows can be dragged by their saved sort_position. */
.orders-table .order-row.is-sale-round-sorted .order-drag-handle,
.orders-table .order-row[data-sale-round-sort-mode="order_no"] .order-drag-handle,
.orders-table .order-row[data-sale-round-sort-mode="status"] .order-drag-handle {
  display: none;
}
.orders-table .drag-cell-sorted,
.orders-table .order-row.is-sale-round-sorted .drag-cell {
  cursor: default;
}
.order-drag-placeholder {
  display: inline-block;
  width: 28px;
  height: 30px;
}


/* R143: lock right-side inputs while duplicate-order choice is required. */
.totals-card.is-duplicate-gate-locked {
  background: #f8fafc;
}
.totals-card.is-duplicate-gate-locked input,
.totals-card.is-duplicate-gate-locked select,
.totals-card.is-duplicate-gate-locked textarea {
  cursor: not-allowed;
  opacity: .72;
}

/* R146 — Shipping tracking editor, QR reader and public shipping-information page. */
.shipment-tracking-panel[hidden],
.tracking-qr-reader[hidden],
.tracking-qr-preview[hidden] {
  display: none !important;
}
.shipment-tracking-panel {
  margin-top: 13px;
  padding: 14px;
  background: #f4f9fc;
  border: 1px solid #c8dce8;
  border-radius: 10px;
}
.shipment-tracking-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.shipment-tracking-heading h3 {
  margin: 0;
  color: #18486a;
  font-size: 15px;
}
.shipment-tracking-heading p {
  margin: 3px 0 0;
  color: #657f91;
  font-size: 12px;
}
.shipment-tracking-fields {
  align-items: end;
}
.tracking-qr-reader {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d3e2eb;
}
.tracking-qr-paste-box {
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: #fff;
  border: 1px dashed #82aac1;
  border-radius: 9px;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tracking-qr-paste-box:hover,
.tracking-qr-paste-box:focus {
  outline: none;
  background: #f9fdff;
  border-color: #3e89b2;
  box-shadow: 0 0 0 3px rgba(62, 137, 178, .12);
}
.tracking-qr-paste-box.has-preview {
  grid-template-columns: 126px minmax(0, 1fr);
}
.tracking-qr-instruction {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.tracking-qr-instruction div {
  display: grid;
  gap: 3px;
}
.tracking-qr-instruction strong {
  color: #1d536f;
  font-size: 13px;
}
.tracking-qr-instruction span:not(.tracking-qr-icon) {
  color: #6b8292;
  font-size: 12px;
}
.tracking-qr-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #176d8c;
  background: #e7f5fa;
  border: 1px solid #b9dce9;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 900;
}
.tracking-qr-preview {
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f5f8fa;
  border: 1px solid #cbdbe4;
  border-radius: 8px;
}
.tracking-qr-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.tracking-qr-preview {
  position: relative;
}
.tracking-qr-remove-button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgba(174, 54, 54, .94);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(72, 28, 28, .28);
  cursor: pointer;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
}
.tracking-qr-remove-button:hover,
.tracking-qr-remove-button:focus-visible {
  outline: none;
  background: #922d2d;
  box-shadow: 0 0 0 3px rgba(174, 54, 54, .18), 0 2px 7px rgba(72, 28, 28, .28);
}
.tracking-qr-file-button {
  justify-self: end;
  cursor: pointer;
}
.tracking-qr-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: #61798a;
  font-size: 12px;
  font-weight: 700;
}
.tracking-qr-status.is-reading { color: #2c6789; }
.tracking-qr-status.is-success { color: #0b704d; }
.tracking-qr-status.is-error { color: #a63c35; }

.orders-table .order-shipping-info-button {
  width: 31px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 2px 3px;
  color: #1e5676;
  background: #fff;
  border: 1px solid #b7cedd;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}
.orders-table .order-shipping-info-button:hover,
.orders-table .order-shipping-info-button:focus-visible {
  outline: none;
  background: #eaf5fb;
  border-color: #70a8c6;
  box-shadow: 0 0 0 3px rgba(49, 123, 165, .18);
}
.orders-table .order-shipping-info-button img {
  width: 27px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.orders-table .order-shipping-info-button.carrier-jt span:not(.sr-only) { color: #b12828; }
.orders-table .order-shipping-info-button.carrier-kerry span:not(.sr-only) { color: #67449a; font-size: 14px; }
.orders-table .order-shipping-info-button.carrier-flash span:not(.sr-only) { color: #d69b00; font-size: 14px; }

.shipping-address-section,
.shipping-tracking-section {
  background: #fbfdff;
}
.shipping-public-address-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 15px 16px;
  color: #294257;
  background: linear-gradient(135deg, #f8fcfe, #f1f8fb);
  border: 1px solid #d2e2e9;
  border-radius: 11px;
}
.shipping-public-address-card.is-empty {
  color: #718493;
}
.shipping-public-address-icon {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  color: #dc4771;
  font-size: 12px;
  line-height: 1;
}
.shipping-public-address-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.shipping-public-tracking-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 17px;
  padding: 17px;
  background: linear-gradient(135deg, #f5fbfd, #eef8f5);
  border: 1px solid #cce0e8;
  border-radius: 12px;
}
.shipping-public-tracking-card.has-tracking-qr {
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
}
.shipping-public-tracking-details {
  min-width: 0;
}
.shipping-provider-heading {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
.shipping-provider-heading img {
  width: 190px;
  max-width: 100%;
  height: 62px;
  display: block;
  object-fit: contain;
  object-position: left center;
}
.shipping-provider-text-logo {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 13px;
  color: #173f5d;
  background: #fff;
  border: 1px solid #c8dbe6;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}
.shipping-public-label {
  display: block;
  color: #687f90;
  font-size: 12px;
  font-weight: 800;
}
.shipping-public-tracking-details > strong {
  display: block;
  margin-top: 4px;
  color: #123f61;
  font-size: clamp(22px, 5vw, 31px);
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}
.shipping-public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}
.shipping-public-qr-link {
  display: grid;
  gap: 7px;
  color: #516d80;
  text-align: center;
  text-decoration: none;
}
.shipping-public-qr {
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid #bcd5df;
  border-radius: 10px;
}
.shipping-public-qr svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: crispEdges;
}
.shipping-public-qr > span,
.shipping-public-qr.has-error {
  padding: 12px;
  color: #697f8e;
  font-size: 12px;
}
.shipping-public-qr-link small {
  font-size: 11px;
  font-weight: 800;
}
.shipping-item-list {
  overflow: hidden;
  border: 1px solid #d8e4eb;
  border-radius: 9px;
}
.shipping-item-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 11px 12px;
  color: #294257;
  background: #fff;
  border-bottom: 1px solid #e3ebf0;
}
.shipping-item-row:last-child { border-bottom: 0; }
.shipping-item-row > span {
  color: #6a8191;
  font-size: 12px;
  font-weight: 800;
}
.shipping-item-row > strong {
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .shipment-tracking-panel { padding: 12px; }
  .tracking-qr-paste-box,
  .tracking-qr-paste-box.has-preview {
    grid-template-columns: 1fr;
  }
  .tracking-qr-preview {
    width: min(100%, 220px);
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: center;
  }
  .tracking-qr-file-button {
    width: 100%;
    justify-self: stretch;
  }
  .shipping-public-tracking-card.has-tracking-qr {
    grid-template-columns: 1fr;
  }
  .shipping-provider-heading {
    justify-content: center;
  }
  .shipping-provider-heading img {
    width: 133px;
    height: 44px;
    object-position: center;
  }
  .shipping-public-label,
  .shipping-public-tracking-details > strong {
    text-align: center;
  }
  .shipping-public-qr-link {
    width: min(100%, 270px);
    justify-self: center;
  }
  .shipping-public-qr {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .shipping-public-actions .button {
    flex: 1 1 145px;
  }
}

/* R149 — In-page print workspace. The picker is shown only when an order has
 * companion / held orders to choose from. The actual print document stays in
 * the same-origin iframe and moves off-screen before the browser print dialog
 * opens, so no temporary tab covers the order worksheet. */
body.order-print-workspace-open {
  overflow: hidden;
}
.order-print-workspace[hidden] {
  display: none !important;
}
.order-print-workspace {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 22px;
}
.order-print-workspace-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 38, 58, .62);
  backdrop-filter: blur(2px);
}
.order-print-workspace-panel {
  position: relative;
  z-index: 1;
  width: min(840px, 100%);
  height: min(820px, calc(100vh - 44px));
  min-height: 360px;
  overflow: hidden;
  border: 1px solid #c8d8e5;
  border-radius: 15px;
  background: #edf3f7;
  box-shadow: 0 24px 70px rgba(16, 38, 58, .28);
}
.order-print-workspace-header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px 9px 18px;
  border-bottom: 1px solid #d3e0e9;
  background: #fff;
}
.order-print-workspace-header > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.order-print-workspace-header strong {
  color: #153f65;
  font-size: 15px;
  line-height: 1.25;
}
.order-print-workspace-header span {
  overflow: hidden;
  color: #687f92;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-print-workspace-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #c7d7e4;
  border-radius: 8px;
  color: #234d70;
  background: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.order-print-workspace-close:hover {
  border-color: #8fb0c8;
  background: #f4f9fc;
}
.order-print-workspace-body {
  position: relative;
  height: calc(100% - 58px);
  overflow: hidden;
}
.order-print-workspace-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #edf3f7;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.order-print-workspace-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: #60788e;
  text-align: center;
  background: #f4f8fb;
}
.order-print-workspace-loading strong {
  color: #17466d;
  font-size: 17px;
}
.order-print-workspace-loading > span:last-child {
  font-size: 13px;
}
.order-print-workspace-spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 5px;
  border: 3px solid #d4e4ef;
  border-top-color: #267f93;
  border-radius: 50%;
  animation: order-print-workspace-spin .8s linear infinite;
}
.order-print-workspace.is-picker-ready .order-print-workspace-frame {
  opacity: 1;
  pointer-events: auto;
}
.order-print-workspace.is-picker-ready .order-print-workspace-loading {
  display: none;
}
.order-print-workspace.is-error .order-print-workspace-spinner {
  display: none;
}
.order-print-workspace.is-error .order-print-workspace-loading {
  color: #8d3b3b;
  background: #fff5f5;
}
.order-print-workspace.is-error .order-print-workspace-loading strong {
  color: #a02f2f;
}
/* Never use display:none while printing: Chromium can otherwise produce a
 * blank preview. Keep a normal-sized iframe rendered far outside the viewport. */
.order-print-workspace.is-printing {
  padding: 0;
  pointer-events: none;
}
.order-print-workspace.is-printing .order-print-workspace-backdrop {
  background: transparent;
  backdrop-filter: none;
}
.order-print-workspace.is-printing .order-print-workspace-panel {
  position: fixed;
  top: 0;
  left: -12000px;
  width: 900px;
  height: 760px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  opacity: 0;
  box-shadow: none;
}
.order-print-workspace.is-printing .order-print-workspace-header,
.order-print-workspace.is-printing .order-print-workspace-loading {
  visibility: hidden;
}
.order-print-workspace.is-printing .order-print-workspace-frame {
  width: 900px;
  height: 702px;
  opacity: 1;
  pointer-events: none;
}

/* R150 — After the browser print dialog closes, eligible paid orders show a
 * confirmation inside the same workspace. Only an explicit confirmation calls
 * the server to change `รอปริ้นท์ชื่อ` into `ปริ้นท์ชื่อแล้ว`. */
.order-print-confirm[hidden] {
  display: none !important;
}
.order-print-workspace.is-confirming .order-print-workspace-panel {
  width: min(520px, 100%);
  height: auto;
  min-height: 0;
}
.order-print-workspace.is-confirming .order-print-workspace-body {
  height: auto;
  min-height: 280px;
}
.order-print-workspace.is-confirming .order-print-workspace-loading,
.order-print-workspace.is-confirming .order-print-workspace-frame {
  display: none;
}
.order-print-confirm {
  min-height: 280px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 30px 28px;
  color: #31546f;
  text-align: center;
  background: linear-gradient(145deg, #f8fcff 0%, #eef8f5 100%);
}
.order-print-confirm-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  border: 1px solid #80bda8;
  border-radius: 50%;
  color: #fff;
  background: #2b8b72;
  box-shadow: 0 7px 18px rgba(43, 139, 114, .18);
  font-size: 29px;
  font-weight: 800;
  line-height: 1;
}
.order-print-confirm > strong {
  color: #153f65;
  font-size: 20px;
  line-height: 1.35;
}
.order-print-confirm > p {
  max-width: 410px;
  margin: 0;
  color: #5f768a;
  font-size: 14px;
  line-height: 1.55;
}
.order-print-confirm-feedback {
  min-height: 20px;
  color: #a04444;
  font-size: 13px;
  font-weight: 700;
}
.order-print-confirm-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
}
.order-print-confirm-actions .button {
  min-height: 42px;
  min-width: 155px;
  justify-content: center;
}
.order-print-confirm-actions .button:disabled {
  cursor: wait;
  opacity: .65;
}
@keyframes order-print-workspace-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 620px) {
  .order-print-workspace {
    padding: 0;
  }
  .order-print-workspace-panel {
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
  }
  .order-print-workspace-header {
    padding-left: 14px;
  }
  .order-print-workspace.is-confirming {
    padding: 14px;
  }
  .order-print-workspace.is-confirming .order-print-workspace-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    border: 1px solid #c8d8e5;
    border-radius: 14px;
  }
  .order-print-confirm {
    min-height: 300px;
    padding: 26px 18px;
  }
  .order-print-confirm-actions {
    flex-direction: column-reverse;
  }
  .order-print-confirm-actions .button {
    width: 100%;
  }
}

/* R153 — period-aware Order Summary accordion in the orders right panel. */
.order-status-summary-panel {
  overflow: hidden;
}
.order-status-summary-heading {
  background: linear-gradient(135deg, #f8fbfd, #edf6f4);
}
.order-status-summary-months {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 4px 0 7px;
}
.order-status-summary-month,
.order-status-summary-round {
  min-width: 0;
  flex: 0 0 auto;
}
.order-status-summary-month + .order-status-summary-month {
  border-top: 1px solid #dfe9ef;
}
.order-status-summary-month-toggle,
.order-status-summary-round-toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.order-status-summary-month-toggle::-webkit-details-marker,
.order-status-summary-round-toggle::-webkit-details-marker {
  display: none;
}
.order-status-summary-month-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 13px;
  color: #183f5e;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}
.order-status-summary-month-toggle:hover,
.order-status-summary-month-toggle:focus-visible {
  color: #0f5b70;
  background: #f2faf9;
  outline: 0;
}
.order-status-summary-month[open] > .order-status-summary-month-toggle {
  color: #0d665d;
  background: #eaf7f4;
  border-bottom: 1px solid #cfe5df;
}
.order-status-summary-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
  opacity: .72;
}
.order-status-summary-month[open] > .order-status-summary-month-toggle .order-status-summary-chevron,
.order-status-summary-round[open] > .order-status-summary-round-toggle .order-status-summary-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}
.order-status-summary-rounds {
  display: grid;
  gap: 6px;
  padding: 7px 8px 9px;
  background: #f7fafc;
}
.order-status-summary-round {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe6ed;
  border-radius: 8px;
}
.order-status-summary-round-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  color: #34556d;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}
.order-status-summary-round-toggle > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.order-status-summary-round-toggle:hover,
.order-status-summary-round-toggle:focus-visible {
  color: #165f72;
  background: #f5fafc;
  outline: 0;
}
.order-status-summary-round[open] > .order-status-summary-round-toggle {
  color: #174f70;
  background: #edf6fb;
  border-bottom: 1px solid #d8e6ef;
}
.order-status-summary-list {
  display: grid;
  margin: 0;
  padding: 3px 10px 7px;
}
.order-status-summary-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #edf2f5;
}
.order-status-summary-list > div:last-child {
  border-bottom: 0;
}
.order-status-summary-list dt {
  min-width: 0;
  color: #667b8b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.order-status-summary-list dd {
  margin: 0;
  color: #173f5d;
  font-size: 11px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}
.order-status-summary-list dd.is-shipped { color: #47717a; }
.order-status-summary-list dd.is-ready { color: #7250a6; }
.order-status-summary-list dd.is-name-printed { color: #b36419; }
.order-status-summary-list dd.is-awaiting-payment { color: #24689b; }
.order-status-summary-list dd.is-held { color: #19734e; }
.order-status-summary-empty {
  margin: 0;
  padding: 15px 14px;
  color: #708493;
  font-size: 14px;
  line-height: 1.55;
}

/* Four financial metrics remain after moving held-order counts to Order Summary. */
@media (max-width: 1740px) {
  .office-body-orders .orders-summary-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1741px) {
  .office-body-orders .orders-right-panel {
    position: sticky;
    top: 66px;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
  }
  .office-body-orders .orders-summary-panel {
    position: static;
  }
}

@media (max-width: 1060px) {
  .orders-right-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .order-status-summary-panel {
    width: 100%;
  }
  .order-status-summary-rounds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-status-summary-round[open] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .orders-summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .order-status-summary-rounds {
    grid-template-columns: 1fr;
  }
  .order-status-summary-round[open] {
    grid-column: auto;
  }
}

/* R154 — strict one-month/one-round accordion and viewport-safe scrolling. */
@media (min-width: 821px) {
  .office-body-orders .orders-right-panel {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    padding-right: 3px;
  }
}

/* When the right panel is placed below the order table, cap its height so an
   expanded month cannot grow past the fixed desktop workspace. */
@media (min-width: 821px) and (max-width: 1740px) {
  .office-body-orders .orders-right-panel {
    max-height: min(44dvh, 520px);
  }
}

/* On wide screens the panel stays beside the table and scrolls independently
   inside the visible application height. */
@media (min-width: 1741px) {
  .office-body-orders .orders-right-panel {
    max-height: calc(100dvh - 78px);
  }
}


/* R158 — exact compact typography and non-stretching collapsed month rows. */
/* R156 — keep Order Summary inside the visible workspace and make its month
   list the single vertical scroll area. The export button, financial summary,
   and Order Summary heading remain visible while expanded rounds scroll. */
@media (min-width: 821px) {
  .office-body-orders .orders-right-panel {
    display: flex;
    flex-direction: column;
    align-content: initial;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding-right: 0;
  }

  .office-body-orders .orders-panel-export,
  .office-body-orders .orders-summary-panel {
    flex: 0 0 auto;
  }

  .office-body-orders .order-status-summary-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .office-body-orders .order-status-summary-heading {
    flex: 0 0 auto;
  }

  .office-body-orders .order-status-summary-months {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    padding-right: 3px;
  }
}

/* In the stacked desktop layout, reserve a real bounded row for the right
   panel. Without an explicit grid-track height, an expanded accordion can
   enlarge the auto row below the viewport even if the child has max-height. */
@media (min-width: 821px) and (max-width: 1740px) {
  .office-body-orders .orders-workspace {
    grid-template-rows: minmax(0, 1fr) clamp(220px, 44dvh, 520px);
  }

  .office-body-orders .orders-right-panel {
    width: 100%;
    height: 100%;
  }
}

/* On wide desktops the workspace is already viewport-bounded. Stretch the
   sidebar to that row instead of combining sticky positioning with a viewport
   max-height, which could place the lower part outside the visible area. */
@media (min-width: 1741px) {
  .office-body-orders .orders-right-panel {
    position: static;
    top: auto;
    align-self: stretch;
    height: 100%;
  }
}

/* Phones/tablets use normal page scrolling, so do not create a nested scroll
   area there. */
@media (max-width: 820px) {
  .office-body-orders .orders-right-panel {
    display: grid;
    max-height: none;
    overflow: visible;
  }

  .office-body-orders .order-status-summary-panel {
    display: block;
    overflow: hidden;
  }

  .office-body-orders .order-status-summary-months {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* R170 — Expense transactions are the source of truth. */
.expense-total-readonly {
  display: inline-block;
  color: #173f63;
  font-weight: 800;
  cursor: default;
}
.expense-history-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.expense-r170-migration-notice {
  margin-bottom: 14px;
}
.expense-history-entry-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.expense-history-entry-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.expense-history-entry-button {
  min-height: 27px;
  padding: 3px 8px;
  color: #315f80;
  background: #f3f8fb;
  border: 1px solid #c6d9e6;
  border-radius: 7px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.expense-history-entry-button:hover,
.expense-history-entry-button:focus-visible {
  color: #fff;
  background: #356f98;
  border-color: #356f98;
  outline: none;
}
.expense-history-entry-button.is-danger {
  color: #9b3f42;
  background: #fff5f5;
  border-color: #ebc7c8;
}
.expense-history-entry-button.is-danger:hover,
.expense-history-entry-button.is-danger:focus-visible {
  color: #fff;
  background: #b54d51;
  border-color: #b54d51;
}
.expense-history-deleted-badge,
.expense-history-legacy-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
.expense-history-deleted-badge {
  color: #8e4d50;
  background: #fff1f1;
  border: 1px solid #efcccc;
}
.expense-history-legacy-badge {
  color: #7b6027;
  background: #fff8e8;
  border: 1px solid #ead9aa;
}
.expense-history-entry.is-deleted {
  opacity: .68;
  background: #fafafa;
  border-style: dashed;
}
.expense-history-entry.is-deleted .expense-history-entry-amount {
  color: #7d878e;
  text-decoration: line-through;
}
.expense-history-entry.is-legacy_adjustment .expense-history-entry-amount {
  color: #9a6b27;
}
.expense-history-entry-user.is-updated {
  color: #728a9a;
}
.expense-history-entry-user.is-deleted {
  color: #a76a6d;
}
.expense-history-edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: 10px;
  padding: 11px;
  background: #f7fafc;
  border: 1px solid #d7e4ed;
  border-radius: 9px;
}
.expense-history-edit-form[hidden] {
  display: none;
}
.expense-history-edit-form label {
  display: grid;
  gap: 5px;
  color: #31566f;
  font-size: 11px;
  font-weight: 800;
}
.expense-history-edit-form input {
  width: 100%;
  min-height: 36px;
}
.expense-history-edit-note,
.expense-history-edit-actions {
  grid-column: 1 / -1;
}
.expense-history-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.expense-history-rule-note {
  color: #365c72;
  background: #f1f8fc;
  border-color: #cfe1eb;
}
@media (max-width: 560px) {
  .expense-history-entry-top {
    align-items: flex-start;
  }
  .expense-history-entry-controls {
    justify-content: flex-start;
  }
  .expense-history-edit-form {
    grid-template-columns: 1fr;
  }
  .expense-history-edit-note,
  .expense-history-edit-actions {
    grid-column: 1;
  }
}
.expense-history-entry.is-add::before { background: #279167; }
.expense-history-entry.is-initial::before { background: #326f99; }
.expense-history-entry.is-legacy_adjustment::before { background: #d19134; }
.expense-history-entry.is-deleted::before { background: #a88486; }

/* R172 — Status-sort customer group bracket.
   Consecutive orders from the same customer keep the R169 grouping logic, but
   the left rail now has an explicit start/end cap so adjacent customer groups
   cannot visually merge into one long blue stripe. The rail cell no longer
   forces a blue fill; it inherits the native row status background instead. */
.orders-table .customer-order-group-cell,
.orders-table .customer-order-group-detail-rail {
  position: relative;
}
.orders-table .customer-order-group-cell::before,
.orders-table .customer-order-group-detail-rail::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 11px;
  box-sizing: border-box;
  border-left: 4px solid #4c9bd3;
  pointer-events: none;
}
/* The first row gets a rounded top hook and starts below the table border. */
.orders-table .customer-order-group-cell-start::before {
  top: 7px;
  border-top: 4px solid #4c9bd3;
  border-top-left-radius: 5px;
}
/* The last row gets a rounded bottom hook and stops above the table border. */
.orders-table .customer-order-group-cell-end::before {
  bottom: 7px;
  border-bottom: 4px solid #4c9bd3;
  border-bottom-left-radius: 5px;
}
/* Hide only the internal divider in the visual-merge column. The divider at
   the end of each customer group remains, reinforcing the group boundary. */
.orders-table .customer-order-group-cell-start,
.orders-table .customer-order-group-cell-middle {
  border-bottom-color: transparent !important;
}
/* Do not paint the first/rail column blue. It follows the row state: shipped
   rows are white, held rows stay green, etc. */
.orders-table .customer-order-group:hover .customer-order-group-cell,
.orders-table .customer-order-group:focus .customer-order-group-cell,
.orders-table .customer-order-group:focus-within .customer-order-group-cell {
  filter: none;
}
.orders-table .held-detail-row.customer-order-group-detail .customer-order-group-detail-rail {
  width: 42px;
  padding: 0 !important;
  background: #f3fbf6 !important;
  border-right: 1px solid #e5ebf0 !important;
}
/* Detail rows sit inside the bracket. Start/middle detail rows only continue
   the vertical rail. The end detail row owns the bottom cap when expanded. */
.orders-table .held-detail-row.customer-order-group-detail-start .customer-order-group-detail-rail::before,
.orders-table .held-detail-row.customer-order-group-detail-middle .customer-order-group-detail-rail::before {
  top: 0;
  bottom: 0;
}
.orders-table .held-detail-row.customer-order-group-detail-end .customer-order-group-detail-rail::before {
  top: 0;
  bottom: 7px;
  border-bottom: 4px solid #4c9bd3;
  border-bottom-left-radius: 5px;
}
.orders-table .held-detail-row.customer-order-group-detail-start .customer-order-group-detail-rail,
.orders-table .held-detail-row.customer-order-group-detail-middle .customer-order-group-detail-rail {
  border-bottom-color: transparent !important;
}
/* If the last order expands its held-detail row, move the visible bottom cap
   from the main row to that detail row so the bracket still encloses it. */
.orders-table .customer-order-group-end:has(+ .held-detail-row.customer-order-group-detail-end:not([hidden]))
  .customer-order-group-cell-end::before {
  bottom: 0;
  border-bottom: 0;
  border-bottom-left-radius: 0;
}
.orders-table .held-detail-row.customer-order-group-detail > td:nth-child(2) {
  border-right: 0 !important;
}

/* R173 · Sale round accounting and cross-round informational marker */
.order-cross-round {display:inline-flex;align-items:center;width:max-content;margin-top:4px;padding:2px 7px;border-radius:999px;border:1px solid #c5d9eb;background:#ecf5fd;color:#356280;font-size:10px;font-weight:650;line-height:1.35;white-space:nowrap;}
.order-cross-round[hidden], .order-editor-cross-round-note[hidden] {display:none!important;}
.order-editor-cross-round-note {margin:7px 0 0;padding:8px 10px;border:1px solid #c5d9eb;border-radius:9px;background:#edf6ff;color:#356280;font-size:12px;}
.order-round-picker-actions {display:flex;flex-direction:column;gap:13px;padding-top:14px;}
.order-round-picker-actions .button {width:100%;justify-content:center;}
.order-round-picker-select {display:flex;flex-direction:column;gap:7px;font-weight:650;}
.order-round-picker-select select {width:100%;min-height:40px;}

/* R174: keep the cross-round marker on its own line inside the date cell.
   Never change the table cell into flex: held-order rows share its columns. */
.order-date-stack { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.order-date-value { display:block; white-space:nowrap; }
.order-date-stack .order-cross-round { margin-top:0; flex:0 0 auto; }


/* R176 — payment ledger and nonblocking live search */
.orders-live-search-status { display:inline-block; margin-inline-start:6px; font-size:11px; opacity:.65; }
.order-payment-open-button { display:block; font:inherit; font-size:11px; line-height:1.35; padding:3px 5px; margin-top:5px; border:1px solid var(--border, #d5dce5); border-radius:5px; background:transparent; color:inherit; cursor:pointer; }
.order-payment-open-button:hover { background:#edf5ff; }
/* R179: a hidden receipt action must stay hidden even when styled as a button. */
.order-payment-form-link [data-order-payment-open][hidden] { display:none !important; }
.order-payment-due { display:block; font-size:11px; color:#9e5b08; margin-top:3px; }
.order-payment-form-link { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0; font-size:13px; }
.payments-open { overflow:hidden; }
.payments-overlay { position:fixed; z-index:11000; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; }
.payments-backdrop { position:absolute; inset:0; background:rgba(10,24,38,.58); }
.payments-dialog { position:relative; max-height:min(92vh,920px); overflow:auto; width:min(650px,100%); background:var(--panel-bg,#fff); color:var(--text,#17212c); padding:22px; border-radius:14px; box-shadow:0 24px 90px rgba(0,0,0,.25); }
.payments-loading { padding:26px; text-align:center; }
.order-payments-panel { display:grid; gap:15px; }
.order-payments-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.order-payments-heading h2 { margin:0 0 5px; font-size:20px; }
.order-payments-heading p { margin:0; opacity:.68; }
.order-payments-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.order-payments-totals > div { display:flex; flex-direction:column; gap:4px; padding:13px 9px; background:var(--surface,#f3f6fa); border-radius:9px; }
.order-payments-totals span { font-size:12px; opacity:.75; }
.order-payments-totals strong { font-size:16px; }
.order-payment-entry { display:grid; gap:12px; border:1px solid var(--border,#dde3ea); padding:14px; border-radius:10px; }
.order-payment-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.order-payment-entry label { font-weight:500; font-size:13px; display:grid; gap:5px; }
.order-payment-entry input,.order-payment-entry select { width:100%; min-width:0; border:1px solid #bdc9d8; border-radius:7px; padding:9px; font:inherit; }
.order-payment-entry .muted { margin:0; font-size:12px; }
.order-payment-history { display:grid; gap:6px; }
.order-payment-history-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--border,#e0e5e9); }
.order-payment-history-row div { display:grid; gap:3px; }
.order-payment-history-row small { opacity:.7; overflow-wrap:anywhere; }
.order-payment-history-row.is-voided { opacity:.45; text-decoration:line-through; }
@media(max-width:540px){.order-payments-totals{grid-template-columns:1fr 1fr}.order-payment-entry-grid{grid-template-columns:1fr}.payments-dialog{padding:14px}.order-payment-history-row{align-items:flex-start;flex-direction:column}}

/* R178: Orders uses the same inside-field keyword chip + clear X as Customer Book. */
.orders-scroll .is-live-search-hidden { display: none !important; }
.orders-toolbar[data-orders-live-search] .clearable-input[data-search-chip] > input { padding-right: 12px !important; }
.orders-toolbar[data-orders-live-search] .search-keyword-chip { max-width: calc(100% - 16px); }
.orders-live-search-status { display:block; margin: 3px 0 0; min-height:13px; line-height:1.2; font-size:11px; color:#688197; opacity:1; }

.order-payment-entry [hidden] { display:none !important; }


/* R180 — align every Orders toolbar field/button on one baseline.
   R178 had placed the live-search feedback *inside* the search label,
   increasing that grid item's height and shifting the other controls down.
   R180 moves feedback after .filter-row in JS instead of fighting row sizing. */
@media (min-width: 821px) {
  .office-body-orders .orders-toolbar .filter-row {
    align-items: end;
  }
  .office-body-orders .orders-toolbar .filter-row > * {
    min-width: 0;
  }
  .office-body-orders .orders-toolbar > .orders-live-search-status {
    /* Month selector (154px) plus the 8px gap places feedback under search. */
    margin-left: 162px;
  }
}
@media (min-width: 821px) and (max-width: 1040px) {
  .office-body-orders .orders-toolbar > .orders-live-search-status {
    margin-left: 150px; /* 142px month selector + 8px gap */
  }
}
@media (min-width: 1280px) {
  .office-body-orders .orders-toolbar .filter-row {
    /* A slightly shorter search field without shrinking other controls. */
    max-width: calc(100% - 64px);
  }
}

/* R185: print confirmations must not push the worksheet/viewport down. */
.order-print-status-toast {
  position: fixed;
  z-index: 120;
  bottom: 18px;
  right: 18px;
  width: max-content;
  max-width: calc(100vw - 36px);
  margin: 0;
  box-shadow: 0 8px 25px rgba(20, 42, 64, .16);
}

@media (max-width: 820px) {
  /* Keep the patch number in the top-right without consuming an extra row. */
  .office-topbar .app-patch-label {
    position: absolute;
    top: 5px;
    right: 8px;
    padding: 3px 5px;
    font-size: 9px;
  }
  .office-topbar-inner > .user-menu { padding-right: 66px; }
}