:root {
  --ink: #17343c;
  --muted: #60757b;
  --line: #cbd7da;
  --panel: #fff;
  --accent: #135f73;
  --danger: #9c2f28;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--user-page-bg, #f3f6f7);
  color: var(--ink);
  font: var(--user-font-size, 15px) / 1.45
    var(--user-font, system-ui, sans-serif);
}
body > header {
  height: 78px;
  padding: 12px 28px 12px 292px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 8;
}
header > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
header img {
  width: 42px;
  height: 42px;
}
header small {
  display: block;
  color: var(--muted);
}
#session {
  display: flex;
  align-items: center;
  gap: 14px;
}
main {
  margin-left: 264px;
  padding: 26px;
  max-width: 1680px;
}
.panel,
dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px #17343c12;
}
.login {
  max-width: 520px;
  margin: 8vh auto;
  padding: 40px;
  text-align: center;
}
.login img {
  display: block;
  width: min(100%, 400px);
  height: auto;
  margin: 0 auto 22px;
}
.button,
button {
  border: 1px solid #9eb3b8;
  background: #fff;
  color: var(--ink);
  border-radius: 7px;
  padding: 0.58rem 0.82rem;
  font: inherit;
  cursor: pointer;
}
.primary {
  background: var(--user-button-bg, var(--accent));
  border-color: transparent;
  color: #fff;
}
.title,
.workbench-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}
.title h1,
.workbench-heading h2 {
  margin: 0.1rem 0;
}
.title p,
.workbench-heading p {
  margin: 0;
  color: var(--muted);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.workbench-heading > * { min-width: 0; }
.tabs,
.detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.tabs button,
.detail-tabs button {
  border: 0;
  border-radius: 7px 7px 0 0;
}
.tabs [aria-pressed="true"],
.detail-tabs [aria-pressed="true"] {
  background: #dcecef;
  color: #064b5c;
  font-weight: 700;
}
.records {
  display: grid;
  gap: 8px;
}
.record {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) repeat(4, minmax(90px, auto));
  gap: 12px;
  align-items: center;
}
.record:hover {
  border-color: #6d9ca7;
}
.record-open {
  justify-self: end;
  color: #315e4b;
  font-weight: 700;
  text-decoration: underline;
}
.record strong {
  display: block;
}
.record small {
  color: var(--muted);
}
.table .record {
  grid-template-columns: 140px minmax(200px, 2fr) repeat(5, minmax(90px, 1fr));
}
.workbench-heading input {
  min-width: 280px;
}
dialog {
  padding: 0;
  width: min(820px, calc(100vw - 30px));
  max-height: 90vh;
}
dialog::backdrop {
  background: #0b27318c;
}
dialog form,
.order-shell {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
dialog h2,
.form-note,
.dialog-actions,
.order-fixed,
.detail-tabs,
#orderMain,
#orderOther {
  grid-column: 1/-1;
}
label {
  display: grid;
  gap: 5px;
  font-weight: 650;
}
input,
select,
textarea {
  width: 100%;
  padding: 0.62rem;
  border: 1px solid #96abb0;
  border-radius: 6px;
  background: #fff;
  color: #172f36;
  font: inherit;
}
.check {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.check input {
  width: 18px;
  height: 18px;
}
.delivery-point-action {
  align-self: end;
}
.order-address-summary {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.order-address-summary section {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: #f5f8f7;
  white-space: pre-line;
}
.order-address-summary strong {
  display: block;
  margin-bottom: 4px;
}
@media (max-width: 680px) {
  .order-address-summary { grid-template-columns: 1fr; }
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.warning {
  grid-column: 1/-1;
  background: #fff2d5;
  border: 1px solid #d5a33a;
  padding: 10px;
  border-radius: 7px;
}
.order-fixed {
  background: #eef5f6;
  padding: 14px;
  border-radius: 8px;
}
.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
#orderTotals {
  text-align: right;
  font-size: 1.08rem;
  font-weight: 700;
  padding: 14px;
}
#banner {
  position: fixed;
  right: 20px;
  top: 90px;
  z-index: 20;
  background: #155f72;
  color: white;
  border-radius: 7px;
  padding: 10px 14px;
  max-width: 520px;
  display: none;
}
#banner:not(:empty) {
  display: block;
}
#banner.error {
  background: var(--danger);
}
@media (max-width: 760px) {
  body > header {
    padding-left: 76px;
    height: auto;
  }
  main {
    margin-left: 58px;
    padding: 14px;
  }
  .title,
  .workbench-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .workbench-heading input {
    min-width: 0;
  }
  .record,
  .table .record {
    grid-template-columns: 1fr 1fr;
  }
  dialog form,
  .order-shell {
    grid-template-columns: 1fr;
  }
  #session label,
  #session a {
    display: none;
  }
}
.secondary {
  margin-top: 30px;
}
.receipt-lines {
  grid-column: 1/-1;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f4f7f7;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Sales-order operations must remain inside the viewport at every supported size. */
.tabs {
  flex-wrap: wrap;
}
#orderDetailDialog {
  width: min(1100px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
}
#orderDetailDialog .order-shell,
#orderMain,
#orderLines {
  min-width: 0;
}
.order-fixed {
  min-width: 0;
}
.order-fixed .actions {
  flex-wrap: wrap;
}
.order-fixed #orderHeader {
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.order-fixed #orderHeader .warning {
  display: inline-block;
  margin: 0.2rem 0;
  padding: 5px 8px;
}
.order-help {
  margin: 0 0 10px;
  color: var(--muted);
}
.order-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.order-actions button {
  flex: 1 1 140px;
  max-width: 190px;
  min-width: 0;
}
#orderLines .record {
  grid-template-columns: minmax(120px, 1.2fr) minmax(150px, 2fr) repeat(
      3,
      minmax(80px, 1fr)
    ) 44px 44px minmax(80px, auto);
}
#orderTotals {
  overflow-wrap: anywhere;
}
.report-results {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.report-results table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.report-results th,
.report-results td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.report-results th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #183028;
  color: white;
  text-transform: capitalize;
}
.report-results tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel), var(--accent) 4%); }
.report-evidence { overflow-wrap: anywhere; color: var(--muted); }
@media (max-width: 900px) {
  #orderLines .record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #orderLines .record > button {
    width: 100%;
  }
  .order-actions button {
    max-width: none;
  }
  .detail-tabs {
    overflow-x: auto;
  }
  .detail-tabs button {
    flex: 0 0 auto;
  }
}
@media (max-width: 760px) {
  dialog form,
  .order-shell {
    padding: 14px;
  }
}