/* The merge summary card on the customers page, its receipt preview, and the print layouts (MERGE-SUMMARY-001B). Every rule starts
   with an .ms- class, or is one of the print rules at the end (html.ms-printing, #ms-print-root, @page). Colours are the site's own
   theme variables (ui-theme-mode.css defines them for the dark default and for html[data-theme="light"]); each var() keeps the dark
   value as its fallback. The buttons set their own text colour, because the site's button rules change the text of a primary
   button on the light theme (MERGE-SUMMARY-001B section 3.7). */

.ms-card {
  box-sizing: border-box;
  width: 100%;
  max-width: min(980px, 100%);
  min-width: 0;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  background: var(--boba-surface, #131920);
  color: var(--boba-text, #f3f0e9);
  font-family: var(--boba-font, "Noto Sans TC", sans-serif);
}

.ms-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

.ms-head-text {
  min-width: 0;
}

.ms-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--boba-text, #f3f0e9);
}

.ms-range {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.ms-start-row,
.ms-banner,
.ms-stats,
.ms-settings-row,
.ms-settings-footer,
.ms-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}

.ms-start-row[hidden],
.ms-banner[hidden],
.ms-history[hidden],
.ms-notice[hidden],
.ms-error[hidden],
.ms-tag[hidden],
.ms-drawer[hidden] {
  display: none;
}

.ms-banner {
  padding: 8px 10px;
  border: 1px solid var(--boba-border-strong, rgba(224, 178, 91, 0.34));
  border-radius: 8px;
  background: var(--boba-brand-soft, rgba(212, 166, 80, 0.14));
  color: var(--boba-text, #f3f0e9);
}

.ms-banner-text {
  font-size: 13px;
  font-weight: 700;
}

.ms-stats {
  gap: 10px;
}

.ms-stat {
  display: flex;
  flex-direction: column;
  min-width: 96px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--boba-surface-raised, #181f27);
}

.ms-stat-label {
  font-size: 12px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.ms-stat-value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--boba-text, #f3f0e9);
}

.ms-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--boba-text, #f3f0e9);
  background: var(--boba-selected, rgba(212, 166, 80, 0.16));
}

.ms-tag-warn {
  color: var(--boba-danger, #ed746e);
  background: var(--boba-danger-soft, rgba(237, 116, 110, 0.12));
}

.ms-settings {
  margin-top: 10px;
}

.ms-settings-row {
  margin-top: 0;
}

.ms-field {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
}

.ms-field-label {
  font-size: 13px;
}

.ms-input {
  box-sizing: border-box;
  min-height: var(--boba-control-height, 44px);
  width: 120px;
  padding: 6px 10px;
  border: 1px solid var(--boba-border-strong, rgba(224, 178, 91, 0.34));
  border-radius: var(--boba-radius-control, 8px);
  background: var(--boba-control, #0a1015);
  color: var(--boba-text, #f3f0e9);
  font: inherit;
}

.ms-paper-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  margin-top: 10px;
  min-width: 0;
  color: var(--boba-text, #f3f0e9);
  font-size: 13px;
}

.ms-paper-heading {
  padding-top: 12px;
  font-weight: 700;
}

.ms-paper-row > .ms-field,
.ms-paper-custom {
  min-width: 0;
  max-width: 100%;
}

.ms-paper-row .ms-input {
  width: 100px;
  max-width: 100%;
}

.ms-paper-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ms-paper-dimension {
  min-width: 0;
  max-width: 100%;
}

.ms-paper-height-error {
  max-width: 250px;
  overflow-wrap: anywhere;
}

.ms-paper-custom .ms-error {
  display: block;
  margin-top: 4px;
}

.ms-paper-custom[hidden],
.ms-paper-height-hint[hidden],
.ms-paper-custom .ms-error[hidden] {
  display: none;
}

.ms-paper-hint {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}

html body #merge-summary-card .ms-paper-row .ms-input {
  background-color: var(--boba-control, #0a1015) !important;
  color: var(--boba-text, #f3f0e9) !important;
  -webkit-text-fill-color: var(--boba-text, #f3f0e9) !important;
}

.ms-batch-settings {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
}

.ms-hint {
  margin: 0;
  font-size: 12px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.ms-error {
  margin: 0;
  flex-basis: 100%;
  font-size: 12px;
  color: var(--boba-danger, #ed746e);
}

.ms-notice {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
  background: var(--boba-success-soft, rgba(89, 203, 140, 0.12));
}

.ms-notice.ms-notice-error {
  color: var(--boba-danger, #ed746e);
  background: var(--boba-danger-soft, rgba(237, 116, 110, 0.12));
}

/* The table scrolls inside its own frame on a narrow screen; the page itself never scrolls sideways. */
.ms-table-wrap {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: 8px;
}

.ms-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
}

.ms-table th,
.ms-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  vertical-align: top;
  text-align: left;
}

.ms-table th {
  font-weight: 700;
  color: var(--boba-text-secondary, #c9c7c1);
  background: var(--boba-surface-raised, #181f27);
}

.ms-table tfoot td {
  font-weight: 700;
}

.ms-empty {
  text-align: center;
  color: var(--boba-text-secondary, #c9c7c1);
}

.ms-number {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ms-money {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The money cells (shipping and due) are the same text colour as the rest of their row, on both themes, set explicitly
   so no inherited or site rule can colour one column differently (MERGE-SUMMARY-001B-R2 section 3). */
.ms-table td.ms-money {
  color: var(--boba-text, #f3f0e9);
  -webkit-text-fill-color: var(--boba-text, #f3f0e9);
}

.ms-due {
  font-size: 15px;
}

.ms-detail {
  min-width: 220px;
}

.ms-who {
  margin-bottom: 4px;
}

.ms-source {
  font-size: 12px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.ms-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  margin-top: 2px;
}

.ms-line-amount {
  font-variant-numeric: tabular-nums;
}

.ms-delivery {
  margin-top: 4px;
  white-space: pre-line;
  font-size: 12px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.ms-select {
  box-sizing: border-box;
  min-height: var(--boba-control-height, 44px);
  padding: 6px 8px;
  border: 1px solid var(--boba-border-strong, rgba(224, 178, 91, 0.34));
  border-radius: var(--boba-radius-control, 8px);
  background: var(--boba-control, #0a1015);
  color: var(--boba-text, #f3f0e9);
  font: inherit;
}

.ms-btn {
  box-sizing: border-box;
  min-height: var(--boba-control-height, 44px);
  padding: 6px 14px;
  border: 1px solid var(--boba-border-strong, rgba(224, 178, 91, 0.34));
  border-radius: var(--boba-radius-control, 8px);
  background: var(--boba-control, #0a1015);
  color: var(--boba-text, #f3f0e9);
  -webkit-text-fill-color: var(--boba-text, #f3f0e9);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ms-btn-primary {
  border-color: var(--boba-brand, #d4a650);
  background: var(--boba-brand, #d4a650);
  color: #0d1217;
  -webkit-text-fill-color: #0d1217;
}

/* On the light theme the primary button is the brand colour with white text (contrast 4.9 on #966719). The rule is written
   with the card's id and the theme attribute, so it wins over the site's own light-theme button rule (section 4). */
html[data-theme="light"] body #merge-summary-card .ms-btn-primary,
html[data-theme="light"] body #merge-summary-card .ms-btn-primary:hover {
  border-color: var(--boba-brand, #966719) !important;
  background-color: var(--boba-brand, #966719) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] body #ms-receipt-drawer .ms-btn-primary,
html[data-theme="light"] body #ms-receipt-drawer .ms-btn-primary:hover {
  border-color: var(--boba-brand, #966719) !important;
  background-color: var(--boba-brand, #966719) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.ms-btn-danger {
  border-color: var(--boba-danger, #ed746e);
  color: var(--boba-danger, #ed746e);
  -webkit-text-fill-color: var(--boba-danger, #ed746e);
}

.ms-btn-quiet {
  background: transparent;
}

.ms-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ms-btn:focus-visible,
.ms-select:focus-visible,
.ms-input:focus-visible {
  outline: 2px solid var(--boba-brand, #d4a650);
  outline-offset: 2px;
}

.ms-history-toggle {
  margin-top: 10px;
}

.ms-history {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.ms-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 8px 10px;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: 8px;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
}

.ms-history-empty {
  font-size: 13px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.ms-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1600;
  box-sizing: border-box;
  width: min(380px, 100vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--boba-border-strong, #79643e);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.22);
  background: var(--boba-surface, #131920);
  color: var(--boba-text, #f3f0e9);
  font-family: var(--boba-font, "Noto Sans TC", sans-serif);
}

.ms-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--boba-border, #79643e);
  background: var(--boba-surface, #131920);
}

.ms-drawer-title {
  margin: 0;
  font-size: 18px;
  color: var(--boba-text, #f3f0e9);
}

.ms-drawer-close {
  flex: 0 0 44px;
  font-size: 24px;
  padding: 0;
}

.ms-drawer-content {
  padding: 16px;
}

.ms-drawer-content > .ms-btn {
  margin-top: 12px;
}

.ms-table .ms-row-selected > td {
  background: var(--boba-brand-soft, rgba(212, 166, 80, 0.14));
}

.ms-table .ms-row-selected > td:first-child {
  box-shadow: inset 4px 0 var(--boba-brand, #d4a650);
}

@media (max-width: 599px) {
  .ms-drawer {
    width: 100vw;
  }
}

.ms-preview-hint {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--boba-text-secondary, #c9c7c1);
}

/* The receipt as it looks on the screen: about an 80 mm roll, monospaced. */
.ms-receipt {
  box-sizing: border-box;
  width: var(--ms-preview-width, 302px);
  max-width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--boba-border-strong, rgba(224, 178, 91, 0.34));
  background: #fffdf7;
  color: #111;
  font-family: "Courier New", "Noto Sans Mono CJK TC", monospace;
  font-size: 13px;
  line-height: 1.5;
}

.ms-receipt-head {
  text-align: center;
  border-bottom: 1px dashed #666;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.ms-receipt-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.ms-receipt-lines {
  border-bottom: 1px dashed #666;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.ms-receipt-line,
.ms-receipt-sum {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* A long item wraps: its amount stays on one row, on the item's last row (next to "×quantity"). */
.ms-receipt-line {
  align-items: flex-end;
}

.ms-receipt-amount {
  flex: none;
  white-space: nowrap;
}

.ms-receipt-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-receipt-head,
.ms-receipt-sum > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-receipt-total {
  font-weight: 700;
}

.ms-receipt-pay {
  margin-top: 4px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* The page names are set on the screen too, so the layout can be read there; the print rules follow. */
#ms-print-root[data-kind="a4"] {
  page: ms-a4;
}

#ms-print-root[data-kind="a4"][data-paper="A5"] {
  page: ms-a5;
}

#ms-print-root[data-kind="a4"][data-paper="Letter"] {
  page: ms-letter;
}

#ms-print-root[data-kind="receipt"] .ms-receipt {
  page: ms-80;
  break-after: page;
}

#ms-print-root[data-kind="receipt"][data-sized] .ms-receipt {
  page: ms-receipt-sized;
}

/* The print layouts. The root is only there while the print dialog is open (merge-summary.js); on the screen it is not shown. */
#ms-print-root {
  display: none;
}

@page ms-a4 {
  size: A4 portrait;
  margin: 12mm;
}

@page ms-a5 {
  size: A5 portrait;
  margin: 10mm;
}

@page ms-letter {
  size: Letter portrait;
  margin: 12mm;
}

@page ms-80 {
  margin: 2mm;
}

@media print {
  .ms-drawer {
    display: none !important;
  }
  html.ms-printing body > :not(#ms-print-root) {
    display: none !important;
  }

  /* The page behind the print root is white too: the site's grey background would show below the last line (section 1). */
  html.ms-printing:root,
  html.ms-printing:root body {
    background-color: #fff !important;
  }

  html.ms-printing #ms-print-root {
    display: block;
    color: #000;
    background: #fff;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  }

  #ms-print-root[data-kind="a4"] {
    font-size: 11pt;
  }

  #ms-print-root[data-kind="a4"] .ms-print-title {
    margin: 0 0 4pt;
    font-size: 18pt;
  }

  #ms-print-root[data-kind="a4"] .ms-print-range {
    margin: 0 0 8pt;
    font-size: 11pt;
  }

  .ms-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
  }

  .ms-print-table thead {
    display: table-header-group;
  }

  .ms-print-table tr {
    break-inside: avoid;
  }

  .ms-print-table th {
    white-space: nowrap;
  }

  /* The items column (the second) keeps 40 % of the table, so a long delivery address cannot squeeze the items. */
  .ms-print-table th:nth-child(2) {
    width: 40%;
  }

  .ms-print-table th,
  .ms-print-table td {
    border: 1px solid #000;
    padding: 4pt;
    vertical-align: top;
    text-align: left;
  }

  .ms-print-money {
    text-align: right;
    white-space: nowrap;
  }

  /* The customer-number column of the A4 summary: bold, at least 14 pt. */
  .ms-print-number {
    font-weight: 700;
    font-size: 14pt;
  }

  .ms-print-line {
    margin-top: 1pt;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6pt;
  }

  .ms-print-line-amount {
    flex: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  #ms-print-root[data-kind="receipt"] .ms-receipt {
    width: var(--ms-receipt-width, 72mm);
    max-width: var(--ms-receipt-width, 72mm);
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #000;
    font-family: "Courier New", "Noto Sans Mono CJK TC", monospace;
    font-size: 10pt;
    line-height: 1.4;
  }

  /* The customer number is read off the parcel: at least 40 pt and bold (MERGE-SUMMARY-001B-R1 section 2). */
  #ms-print-root[data-kind="receipt"] .ms-receipt-number {
    font-size: 40pt;
    font-weight: 700;
  }

  #ms-print-root[data-kind="receipt"] .ms-receipt-name {
    font-size: 12pt;
  }

  #ms-print-root[data-kind="receipt"] .ms-receipt-head,
  #ms-print-root[data-kind="receipt"] .ms-receipt-lines {
    border-color: #000;
  }

  .ms-receipt-screen {
    display: block;
  }

  /* Every word on the paper is black, the thermal printer prints colours as grey dots (section 2 of R2). The rule is written
     with the root's id and the print attribute, so the site's own coloured rules (and the blue time and amounts) lose to it. */
  html.ms-printing:root body #ms-print-root,
  html.ms-printing:root body #ms-print-root * {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
}