:root {
  --bg: #f4f7f6;
  --panel: #ffffff;
  --ink: #1b2423;
  --muted: #5f6f6c;
  --line: #cfdbd8;
  --accent: #147c74;
  --accent-2: #d8efec;
  --danger: #b3261e;
  --shadow: 0 14px 34px rgba(27, 36, 35, 0.08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.app-header h1 { margin: 0; font-size: 24px; }
.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
main { padding: 24px; }
.hidden { display: none !important; }

.login-view {
  min-height: calc(100vh - 110px);
  display: grid;
  place-items: center;
}
.login-panel {
  width: min(560px, 100%);
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.login-panel h2 { margin: 0 0 18px; }
label { display: grid; gap: 6px; color: var(--muted); font-weight: 700; }
input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #b8c7c4;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.readonly-input {
  background: #eef4f3;
  color: var(--muted);
}
.login-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.test-login-guide {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.test-login-label { margin: 0 0 8px; color: var(--danger); font-weight: 700; }
.test-login-guide dl { display: grid; gap: 4px; margin: 0; }
.test-login-guide dl div { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.test-login-guide dt { font-weight: 700; }
.test-login-guide dd { margin: 0; overflow-wrap: anywhere; }
.primary-button, .login-row button, .item-actions button {
  border: 0;
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.ghost-button, .tab, .range-button {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}
.ghost-button.danger { color: var(--danger); border-color: #e2b9b6; }
.table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.danger-text { color: var(--danger); }
.form-message { min-height: 1.5em; color: var(--muted); }
.form-message.error { color: var(--danger); }

.app-view { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.member-panel, .workspace, .cart-panel, .detail-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.member-panel { padding: 20px; height: fit-content; }
.member-panel h2 { margin: 0 0 16px; }
.member-panel dl { display: grid; gap: 12px; margin: 0; }
.member-panel dt { color: var(--muted); font-size: 12px; }
.member-panel dd { margin: 2px 0 0; font-weight: 700; }
.workspace { padding: 18px; min-width: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tab.active, .range-button.active { background: var(--accent-2); border-color: var(--accent); color: var(--accent); }

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-heading h2, .section-heading h3 { margin: 0; }
.section-heading p { margin: 4px 0 0; color: var(--muted); }

.order-grid, .admin-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.admin-order-main { display: grid; gap: 14px; min-width: 0; }
.admin-order-selects { align-items: end; }
.catalog-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.catalog-search, .catalog-search-result { grid-column: 1 / -1; }
.catalog-search-result {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.items-list { display: grid; gap: 10px; }
.item-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.item-card h3 { margin: 2px 0 4px; font-size: 16px; }
.item-id, .sales-unit { margin: 0; color: var(--muted); font-size: 12px; }
.price { font-size: 18px; }
.item-actions { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(96px, 1fr) auto; gap: 8px; align-items: center; }
.quantity-select, .quantity-custom { min-width: 96px; }
.cart-panel { padding: 16px; position: sticky; top: 12px; }
#submitAdminOrderButton { display: block; margin-left: auto; }
.cart-list { display: grid; gap: 8px; }
.cart-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.cart-row span { display: block; color: var(--muted); font-size: 13px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; font-size: 18px; }
.empty-cart { padding: 14px; color: var(--muted); background: #f7faf9; border: 1px dashed var(--line); border-radius: 6px; }
.order-confirm-view { width: 100%; }
.confirm-list { display: grid; gap: 10px; }
.confirm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.confirm-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.confirm-total { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.order-notes {
  display: grid;
  gap: 6px;
  margin: 12px 0 14px;
  padding: 12px;
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.order-notes p { margin: 0; }
.confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  max-width: 520px;
  margin-left: auto;
}

.history-range-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.history-list { display: grid; gap: 12px; }
.history-card { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.history-card-header { display: flex; justify-content: space-between; gap: 10px; }
.history-card-header h3, .history-card-header p { margin: 0; }
.history-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.history-detail { margin-top: 12px; overflow: auto; }
.history-detail-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.history-detail-table th, .history-detail-table td { border-top: 1px solid var(--line); padding: 8px; text-align: left; }
.history-detail-table th { background: #f2f7f5; font-weight: 700; }
.history-detail-table td:nth-child(2), .history-detail-table td:nth-child(3), .history-detail-table td:nth-child(4) { text-align: right; }
.status-badge { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; }
.narrow-form { max-width: 720px; display: grid; gap: 12px; }
.name-fields, .filter-grid, .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.admin-workspace { max-width: none; }
.admin-tabs { position: sticky; top: 0; z-index: 2; padding-bottom: 10px; background: var(--panel); }
.admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.master-filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 10px 0; margin-bottom: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.master-filter-bar button { margin-left: auto; }
.multi-filter { position: relative; width: 190px; }
.multi-filter.wide { width: 280px; }
.multi-filter summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #b8c7c4;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.multi-filter summary::-webkit-details-marker { display: none; }
.multi-filter summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.multi-filter[open] summary { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-2); }
.multi-filter[open] summary::after { transform: translateY(2px) rotate(225deg); }
.multi-filter summary span { color: var(--muted); font-size: 12px; font-weight: 700; }
.multi-filter summary strong { max-width: 120px; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.multi-filter.wide summary strong { max-width: 190px; }
.multi-filter-menu { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: max(100%, 260px); max-height: 300px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: var(--shadow); }
.multi-filter.wide .multi-filter-menu { width: max(100%, 360px); }
.multi-filter-option { display: flex; min-width: 0; padding: 8px; gap: 8px; align-items: flex-start; border-radius: 4px; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.multi-filter-option:hover { background: #f2f7f5; }
.multi-filter-option input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; }
.multi-filter-option span { min-width: 0; overflow-wrap: anywhere; }
.master-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.master-toolbar span { color: var(--muted); font-weight: 700; }
.sheet-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.master-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.master-table th, .master-table td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.master-table th { background: #dbe8e5; font-weight: 700; }
.master-table tr:nth-child(even) td { background: #f7faf9; }
.master-table tr.selected-row td { background: #e3f0ec; }
.master-table input, .master-table select { min-width: 120px; padding: 6px 8px; }
.school-list-table th:nth-child(4),
.school-list-table td:nth-child(4),
.school-list-table th:nth-child(6),
.school-list-table td:nth-child(6) {
  min-width: 220px;
}
.school-list-table th:first-child,
.school-list-table td:first-child { width: 1%; text-align: center; }
.school-detail-panel { margin-top: 16px; }
.school-detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.delete-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.delete-dialog::backdrop { background: rgba(27, 36, 35, .38); }
.delete-dialog-panel { padding: 20px; }
.delete-dialog-panel h2 { margin: 0 0 14px; font-size: 20px; }
.delete-dialog-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0 0 16px;
  padding: 12px;
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.delete-dialog-details dt { color: var(--muted); font-weight: 700; }
.delete-dialog-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.delete-dialog-message { margin: 0 0 18px; font-weight: 700; }
.delete-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.payment-dialog { width: min(620px, calc(100vw - 32px)); }
.payment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.payment-form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 700; }
.payment-form-grid input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; }
.payment-note-field { grid-column: 1 / -1; }
.payment-history { margin-bottom: 18px; }
.payment-history h3 { margin: 0 0 8px; font-size: 15px; }
.payment-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.payment-history-table th, .payment-history-table td { padding: 7px 8px; border: 1px solid var(--line); text-align: left; }
.payment-history-table th { background: #edf6f4; }
.payment-history-empty { margin: 0; padding: 10px; background: #f7faf9; color: var(--muted); }
.payment-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.payment-cell span { min-width: 6em; text-align: right; }
.admin-order-detail-row td { background: #fff !important; }
.admin-order-detail-actions { justify-content: flex-start; margin-bottom: 8px; }
.number-cell { text-align: right !important; padding-right: 1ch !important; }
.number-input { text-align: right; }
.stats-columns { display: grid; gap: 18px; margin-top: 16px; }
.stats-summary { margin: 12px 0; padding: 12px; background: #edf6f4; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; }
.school-detail-list { display: grid; gap: 14px; }
.detail-card { padding: 16px; }
.detail-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.detail-card-header h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-card input, .detail-card select, .detail-card textarea { font-weight: 400; }
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.checkbox-grid label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.checkbox-grid input { width: auto; }

.print-body { background: #fff; }
.invoice-page {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 18mm 14mm 4mm 22mm;
  color: #000;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 14px;
}
.invoice-date { text-align: right; margin: 0 2mm 6mm 0; font-size: 14px; transform: translateY(-5mm); }
.invoice-top { position: relative; min-height: 70mm; }
.invoice-recipient p, .invoice-issuer p { margin: 0; }
.invoice-recipient {
  position: absolute;
  top: 13mm;
  left: 22mm;
  width: 89mm;
  height: 45mm;
}
.invoice-recipient > p { margin-bottom: 1.2mm; font-size: 14px; line-height: 1.35; }
.invoice-recipient .invoice-address-line { margin: 0 0 3mm; }
.invoice-recipient h2 { margin: 0; text-align: center; font-size: 18px; font-weight: 400; line-height: 1.35; }
.invoice-lead { position: absolute; top: 30mm; left: 0; margin: 0 !important; font-size: 15px !important; }
.invoice-issuer { position: absolute; top: 0; left: 106.8mm; width: 67.2mm; transform: translateY(-5mm); }
.invoice-issuer h1 {
  width: 42mm;
  margin: 5mm auto 6mm;
  padding-bottom: 2mm;
  text-align: center;
  border-bottom: 4px double #000;
  letter-spacing: .34em;
  font-size: 22px;
  font-weight: 700;
}
.invoice-issuer-details { transform: translateX(5mm); }
.invoice-association {
  margin: 0 0 6mm !important;
  font-size: 18px;
  line-height: 1.35;
}
.invoice-registration {
  margin-bottom: 6mm !important;
  text-align: left;
  font-size: 14px;
}
.invoice-postal {
  margin-bottom: 0 !important;
  text-align: left;
  font-size: 14px;
}
.invoice-association-address {
  margin-bottom: 6mm !important;
  text-align: right;
  line-height: 1.45;
  font-size: 14px;
  transform: translateX(-3em);
}
.invoice-tel {
  text-align: right;
  line-height: 1.6;
  font-size: 14px;
  transform: translateX(-3em);
}
.invoice-total { display: grid; grid-template-columns: 32mm 1fr; width: 96mm; margin: -32mm 0 2mm; border: 3px double #000; background: #acd7e2; font-size: 22px; font-weight: 700; }
.invoice-total span, .invoice-total strong { padding: 3px 8px; text-align: center; border-right: 1px solid #000; }
.invoice-total strong { border-right: 0; }
.invoice-summary { width: 96mm; border-collapse: collapse; margin-bottom: 5mm; font-size: 14px; }
.invoice-summary th, .invoice-summary td { border: 2px solid #000; padding: 1px 6px; height: 5mm; }
.invoice-summary th { width: 32mm; text-align: right; font-weight: 400; }
.invoice-summary td { text-align: right; }
.invoice-summary tr:first-child th,
.invoice-summary tr:first-child td { border: 0; }
.invoice-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 0 0 2mm;
}
.invoice-detail-heading h3 { margin: 0; font-size: 15px; font-weight: 400; }
.invoice-detail-heading span { margin-right: .5ch; font-size: 13px; }
.invoice-detail { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.invoice-detail th, .invoice-detail td { border: 1.5px solid #000; padding: 3px 5px; }
.invoice-detail th { background: #ddd; text-align: center; }
.invoice-detail th:nth-child(1), .invoice-detail td:nth-child(1) { width: 12mm; text-align: center; }
.invoice-detail th:nth-child(2), .invoice-detail td:nth-child(2) { width: 19mm; text-align: center; }
.invoice-detail th:nth-child(3), .invoice-detail td:nth-child(3) { width: auto; }
.invoice-detail th:nth-child(4), .invoice-detail td:nth-child(4) { width: 18mm; }
.invoice-detail th:nth-child(5), .invoice-detail td:nth-child(5) { width: 21mm; }
.invoice-detail th:nth-child(6), .invoice-detail td:nth-child(6) { width: 28mm; }
.invoice-detail td:nth-child(4), .invoice-detail td:nth-child(5), .invoice-detail td:nth-child(6), .invoice-detail tfoot td { text-align: right; }
.invoice-detail tbody { height: 76.5mm; }
.invoice-detail tbody tr:last-child td { height: 76.5mm; vertical-align: top; }
.invoice-detail tfoot th { background: #fff; text-align: center; font-weight: 400; white-space: nowrap; }
.invoice-detail tfoot td, .invoice-detail tfoot th { height: 7mm; }
.invoice-detail tfoot tr:nth-child(2) td,
.invoice-detail tfoot tr:nth-child(3) td { text-align: right !important; }
.invoice-detail-blank { border: 0 !important; }
.invoice-bank { margin-top: 3mm; border: 2px solid #000; padding: 3px 6px; line-height: 1.4; font-size: 14px; }
.invoice-bank-row {
  display: grid;
  grid-template-columns: 18mm 1fr;
  gap: 0;
}
.invoice-bank-name { margin-top: 2mm; }
.invoice-bank p { margin: 0 0 0 18mm; font-size: 13px; line-height: 1.35; }
.invoice-bank-name + p { margin-top: 3mm; }
.invoice-preview-shell {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef4f3;
}
.invoice-preview-shell .section-heading { margin-bottom: 16px; }
#invoicePreview {
  overflow: auto;
  padding: 14px;
  background: #dfe8e6;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#invoicePreview .invoice-page {
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
.invoice-address-line { margin-left: 1em; }
.tax-rate { font-size: inherit; }

.purchase-order-page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 18mm 14mm 14mm 22mm;
  color: #000;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 14px;
}
.purchase-order-top {
  display: grid;
  grid-template-columns: 96mm 70mm;
  gap: 8mm;
  min-height: 70mm;
}
.purchase-order-recipient h2 {
  margin: 28mm 0 12mm;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}
.purchase-order-recipient p { margin: 0; font-size: 15px; }
.purchase-order-issuer h1 {
  width: 44mm;
  margin: 5mm auto 8mm;
  padding-bottom: 2mm;
  text-align: center;
  border-bottom: 4px double #000;
  letter-spacing: .28em;
  font-size: 22px;
}
.purchase-order-issuer p {
  margin: 0 0 8mm;
  text-align: right;
  line-height: 1.6;
}
.purchase-order-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 0 0 2mm;
}
.purchase-order-detail-heading h3 { margin: 0; font-size: 15px; font-weight: 400; }
.purchase-order-detail-heading span { font-size: 13px; }
.purchase-order-detail { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.purchase-order-detail th, .purchase-order-detail td { border: 1.5px solid #000; padding: 5px 6px; }
.purchase-order-detail th { background: #ddd; text-align: center; font-weight: 400; }
.purchase-order-detail th:nth-child(1), .purchase-order-detail td:nth-child(1) { width: auto; }
.purchase-order-detail th:nth-child(2), .purchase-order-detail td:nth-child(2) { width: 58mm; }
.purchase-order-detail th:nth-child(3), .purchase-order-detail td:nth-child(3) { width: 24mm; text-align: right; }
#purchaseOrderPreview .purchase-order-page {
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
.purchase-order-pdf-preview {
  display: block;
  width: min(100%, 210mm);
  height: min(78vh, 297mm);
  margin: 0 auto;
  border: 0;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

@media (max-width: 900px) {
  main { padding: 14px; }
  .app-header { padding: 14px; align-items: flex-start; }
  .app-view, .order-grid, .admin-order-grid { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
  .catalog-filters { grid-template-columns: 1fr; }
  .login-row { grid-template-columns: 1fr; }
  .test-login-guide dl div { grid-template-columns: 1fr; }
  .item-card { grid-template-columns: 1fr; }
  .detail-card-header { grid-template-columns: 1fr; }
  .detail-card-header h3 { white-space: normal; }
  .multi-filter, .multi-filter.wide { flex: 1 1 190px; width: auto; }
  .multi-filter-menu, .multi-filter.wide .multi-filter-menu { width: min(360px, calc(100vw - 64px)); }
  .payment-form-grid { grid-template-columns: 1fr; }
  .payment-note-field { grid-column: auto; }
}

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html,
  body {
    width: 210mm;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
  }
  body > .app-header,
  body > main > .workspace > .admin-tabs,
  body > main > .workspace > .form-message,
  body > main > .workspace > .tab-panel:not(#invoicesPanel),
  #invoicesPanel > .section-heading,
  #invoicesPanel > .filter-grid,
  #invoicesPanel > .sheet-wrap,
  #invoicePreviewShell > .section-heading {
    display: none !important;
  }
  main,
  .workspace,
  .admin-workspace,
  #invoicesPanel,
  .invoice-preview-shell,
  #invoicePreview {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  #invoicePreview .invoice-page,
  .invoice-page {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18mm 14mm 18mm 22mm !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    box-shadow: none !important;
  }
  .invoice-detail tbody { height: 62.5mm !important; }
  .invoice-detail tbody tr:last-child td { height: 62.5mm !important; }
  .purchase-order-page {
    box-shadow: none !important;
    margin: 0 auto !important;
  }
}