:root {
  /* Clay Ganesha palette — warm only, no white anywhere. Surfaces get lighter
     as they come forward: page < card < field is deliberately inverted (fields
     sit slightly darker than their card) so inputs read as inset. */
  --maroon: #540a33;
  --maroon-dark: #3d0725;
  --maroon-soft: rgba(84, 10, 51, 0.09);
  --page: #ecd9ba;
  --panel: #fdeed4;
  --panel-2: #f7e4c6;
  --field: #f8e8d2;
  --field-focus: #fdf3e2;
  --cream: #ffebce;
  --tan: #ddc39b;
  --tan-soft: #ecd8b8;
  --ink: #33261f;
  --muted: #7d6a58;
  --err: #a3231b;
  --err-bg: #f7dcd4;
  --err-border: #e0b3aa;
  --ok: #1a6b45;
  --ok-bg: #dfeddf;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(84, 10, 51, 0.06), 0 10px 30px rgba(84, 10, 51, 0.08);
}

* {
  box-sizing: border-box;
}

/* Must come with !important: the UA's [hidden]{display:none} loses to any
   author rule that sets display (.loginWrap, .field are both flex), which
   would leave hidden sections and conditional fields on screen. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto,
    sans-serif;
  background: var(--page);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Stop Safari inflating text of its own accord after an orientation change. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.muted {
  color: var(--muted);
  font-size: 12.5px;
}

.req {
  color: var(--err);
  font-weight: 700;
}

/* ---------------- login ---------------- */

.loginWrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(
      900px 460px at 50% -5%,
      rgba(84, 10, 51, 0.14),
      transparent 68%
    ),
    var(--page);
}

.loginCard {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--tan);
  border-radius: 22px;
  padding: 38px 32px 34px;
  box-shadow: var(--shadow);
}

.loginBrand {
  text-align: center;
  margin-bottom: 28px;
}

.loginLogo {
  width: 72px;
  height: auto;
  display: block;
  margin: 0 auto 16px;
}

.loginTitle {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--maroon);
}

.loginSub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* The gap the button was missing: space every direct child of the form. */
#loginForm > * + * {
  margin-top: 18px;
}

#loginForm .btnBlock {
  margin-top: 26px;
}


/* ---------------- shell / topbar ---------------- */

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--tan);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 12px rgba(84, 10, 51, 0.06);
}

.topbarInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brandLogo {
  width: 36px;
  height: auto;
  flex: none;
}

.brandText {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.brandText strong {
  font-size: 15px;
  color: var(--maroon);
  letter-spacing: -0.01em;
}

.brandSub {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.topbarActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Who is signed in. Plain text with a small person mark — as a pill it sat next
   to Log out and read as a second button. */
.whoami {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whoami::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b6f5c' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='5' r='2.6'/%3E%3Cpath d='M2.8 13.6c0-2.6 2.3-4.2 5.2-4.2s5.2 1.6 5.2 4.2'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.pageBody {
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 24px 72px;
}

.pageHead {
  margin-bottom: 22px;
}

.pageTitle {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--maroon);
}

.pageSub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------------- landing (home) view ---------------- */

.homeView {
  min-height: calc(100vh - 66px); /* viewport minus the top bar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.homeInner {
  text-align: center;
  max-width: 420px;
  width: 100%;
}

.homeLogo {
  width: 148px;
  height: auto;
  display: block;
  margin: 0 auto 22px;
  filter: drop-shadow(0 8px 22px rgba(84, 10, 51, 0.18));
}

.homeTitle {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--maroon);
}

.homeSub {
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 14px;
}

.homeCta {
  min-width: 220px;
  padding: 14px 28px;
  font-size: 15px;
}

/* ---------------- back link ---------------- */

.backLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  cursor: pointer;
}

.backLink svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.backLink:hover {
  text-decoration: underline;
}

/* ---------------- confirm dialog ---------------- */

.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(51, 38, 31, 0.5);
}

.confirmCard {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--tan);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(84, 10, 51, 0.3);
  padding: 26px 24px 22px;
  text-align: center;
}

.confirmTitle {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--maroon);
}

.confirmText {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13.5px;
}

.confirmActions {
  display: flex;
  gap: 12px;
}

.confirmActions .btn {
  flex: 1;
}

/* ---------------- cards / fields ---------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--tan);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  margin: 0 0 18px;
  box-shadow: var(--shadow);
}

.cardTitle {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tan-soft);
  font-weight: 700;
  color: var(--maroon);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Small maroon tick before each section heading. */
.cardTitle::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--maroon);
  flex: none;
}

/* Card header with an action on the right (the Products card). The title's own
   rule and bottom border move up here so the line runs under both. */
.cardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tan-soft);
}

.cardHead .cardTitle {
  margin: 0;
  padding: 0;
  border-bottom: none;
}

.btnAdd {
  flex: none;
  padding: 8px 16px;
  font-size: 12.5px;
}

/* ---------------- repeatable product rows ---------------- */

.productRow + .productRow {
  margin-top: 16px;
}

.productRow {
  position: relative;
  /* Extra room at the top: the remove ✕ sits in that strip, so it never crowds
     the Product label or the clear ✕ inside the box below it. */
  padding: 46px 16px 16px;
  border: 1px solid var(--tan-soft);
  border-radius: 12px;
  background: var(--panel-2);
}

/* The derived fields, revealed once the row has a product. */
.productRowBody {
  margin-top: 18px;
}

/* Floated into the row's corner: with no "Product 1" heading left there is no
   header bar to sit in. Padding on the row keeps it clear of the label. */
.rowRemove {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 18px;
  border: 1px solid var(--tan);
  border-radius: 50%;
  background: var(--panel);
  color: var(--err);
  cursor: pointer;
}

.rowRemove:hover {
  background: var(--err-bg);
  border-color: var(--err);
}

/* "Add at least one product" — sits between the (empty) rows and the buttons. */
#productsError {
  display: block;
  margin-bottom: 10px;
}

/* Full-width dashed strip under the rows — reads as "there is room for more"
   rather than as a second primary action. */
.addMoreBtn {
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--maroon);
  background: transparent;
  border: 1.5px dashed var(--tan);
  border-radius: 999px;
  cursor: pointer;
}

.addMoreBtn:hover {
  background: var(--tan-soft);
  border-color: var(--maroon);
}

.productRowFoot {
  margin-top: 14px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--maroon);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field.wide {
  grid-column: 1 / -1;
}

.field > label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--maroon);
}

input,
select,
textarea {
  font: inherit;
  color: var(--ink);
  padding: 10px 13px;
  border: 1px solid var(--tan);
  border-radius: 10px;
  background: var(--field);
  width: 100%;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

input::placeholder,
textarea::placeholder {
  color: #a9927a;
}

/* background-COLOR, not the shorthand: several inputs carry a background-image
   (the combobox chevron, the date calendar icon) and the shorthand would blank
   it out for as long as the field is focused. */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  background-color: var(--field-focus);
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px var(--maroon-soft);
}

select {
  appearance: none;
  /* Maroon chevron, inlined so the page stays self-contained. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23540a33' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}

/* Date fields: iOS/Safari give date inputs an intrinsic width that ignores the
   grid track, so they spill out of the card. Strip the native chrome, force the
   value box to shrink, and draw our own maroon calendar icon (iOS hides the
   native one entirely). The webkit picker indicator is kept but made invisible
   and stretched over the icon so tapping it still opens the picker. */
input[type="date"] {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23540a33' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.6' y='2.8' width='12.8' height='11.6' rx='2'/%3E%3Cpath d='M1.6 6.4h12.8M5.2 1.6v2.4M10.8 1.6v2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  min-width: 0;
}

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

input.hasError,
select.hasError,
textarea.hasError {
  border-color: var(--err);
  background-color: var(--err-bg);
}

input.hasError:focus,
select.hasError:focus,
textarea.hasError:focus {
  background-color: var(--err-bg);
  box-shadow: 0 0 0 3px rgba(163, 35, 27, 0.14);
}

input[readonly] {
  background-color: var(--panel-2);
  color: var(--muted);
  cursor: default;
  border-style: dashed;
}

textarea {
  resize: vertical;
}

.fieldError {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--err);
}

/* ---------------- file picker (payment receipt) ----------------
   The browser's own file button cannot be styled, so it is hidden and its
   <label> is dressed up as the button instead. */

.fileInput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.fileRow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fileBtn {
  flex: none;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  background: transparent;
  border: 1.5px dashed var(--tan);
  border-radius: 999px;
  cursor: pointer;
}

.fileBtn:hover {
  background: var(--tan-soft);
  border-color: var(--maroon);
}

/* Keyboard users tab to the hidden input; show the ring on the label. */
.fileInput:focus-visible + .fileRow .fileBtn {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px var(--maroon-soft);
}

.fileName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}

/* Reuses the product row's ✕, which is positioned; here it sits inline. */
.fileClear {
  position: static;
}

/* ---------------- dropdowns (every <select>) ----------------
   The browser draws a native select menu itself and will not be styled, so
   app.js hides the select and puts this button + list in front of it. Same
   panel as the product combobox below, minus the search box. */

.picker {
  position: relative;
}

.picker > select {
  display: none;
}

.pickerBtn {
  font: inherit;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 10px 34px 10px 13px;
  color: var(--ink);
  border: 1px solid var(--tan);
  border-radius: 10px;
  cursor: pointer;
  background-color: var(--field);
  /* The same maroon chevron the product box carries. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23540a33' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  /* A long option should not stretch its column. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pickerBtn:focus {
  outline: none;
  background-color: var(--field-focus);
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px var(--maroon-soft);
}

.pickerBtn:disabled {
  color: var(--muted);
  background-color: var(--panel-2);
  cursor: not-allowed;
}

/* The select carries the error class; the button is what people see. */
.picker > select.hasError ~ .pickerBtn {
  border-color: var(--err);
  background-color: var(--err-bg);
}

/* Single-line options, so the name is not pushed to one side. */
.pickerList li {
  justify-content: flex-start;
}

.pickerList li[aria-selected="true"] .comboName {
  font-weight: 700;
}

/* ---------------- searchable product combobox ---------------- */

.combo {
  position: relative;
}

/* A maroon chevron on the right — the same one the native selects carry, so the
   box reads as a dropdown rather than a plain text field. The clear ✕ sits just
   inside it, and the padding keeps the text clear of both. */
.comboInput {
  padding-right: 60px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23540a33' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.comboClear {
  position: absolute;
  top: 50%;
  right: 34px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 17px;
  border: none;
  border-radius: 50%;
  background: var(--tan-soft);
  color: var(--maroon);
  cursor: pointer;
}

.comboClear:hover {
  background: var(--tan);
}

.comboList {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--tan);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(84, 10, 51, 0.18);
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--maroon) var(--tan-soft);
}

/* Chromium / Safari take the same maroon thumb. */
.comboList::-webkit-scrollbar {
  width: 10px;
}

.comboList::-webkit-scrollbar-track {
  background: var(--tan-soft);
  border-radius: 999px;
}

.comboList::-webkit-scrollbar-thumb {
  background: var(--maroon);
  border: 2px solid var(--tan-soft);
  border-radius: 999px;
}

.comboList::-webkit-scrollbar-thumb:hover {
  background: #3d0725;
}

.comboList li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.comboList li.isActive,
.comboList li:hover {
  background: var(--maroon);
  color: var(--cream);
}

.comboName {
  font-weight: 600;
  font-size: 13.5px;
}

.comboMeta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.comboList li.isActive .comboMeta,
.comboList li:hover .comboMeta {
  color: rgba(255, 235, 206, 0.75);
}

.comboEmpty {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  cursor: default;
}

.comboEmpty:hover {
  background: transparent;
  color: var(--muted);
}

/* The "use what you typed" row — dashed to read as an escape hatch, not a
   catalogue entry. */
.comboCustom {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 2px;
  border: 1px dashed var(--tan);
}

.comboCustom .comboName {
  font-weight: 700;
}

/* ---------------- toasts ---------------- */

.toastHost {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: min(380px, calc(100vw - 44px));
  padding: 15px 16px 17px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--maroon);
  color: var(--cream);
  box-shadow: 0 14px 40px rgba(84, 10, 51, 0.32);
  pointer-events: auto;
  /* Slides up from below and fades — set by .isIn on the next frame. */
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.toast.isIn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast.isLeaving {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

.toast--err {
  background: #7a1c16;
}

.toastIcon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 235, 206, 0.16);
}

.toastIcon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toastBody {
  flex: 1;
  min-width: 0;
}

.toastBody strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.toastBody p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 235, 206, 0.86);
  word-break: break-word;
}

.toastClose {
  flex: none;
  border: none;
  background: transparent;
  color: rgba(255, 235, 206, 0.7);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.toastClose:hover {
  color: var(--cream);
}

/* Drains left to right for the life of the toast. */
.toastBar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 235, 206, 0.5);
  transform-origin: left;
  animation: drain linear forwards;
}

@keyframes drain {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition-duration: 0.01ms;
  }
  .toastBar {
    animation: none;
  }
}

/* ---------------- totals ---------------- */

.totals {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--tan);
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-left: auto;
  max-width: 400px;
}

.totalRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.totalRow > span {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.totalRow input {
  width: 150px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  border-style: solid;
}

.totalRowGrand {
  margin-top: 3px;
  padding-top: 13px;
  border-top: 1px dashed var(--tan);
}

.totalRowGrand > span {
  font-weight: 700;
  color: var(--maroon);
  font-size: 14px;
}

.totalRowGrand input {
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
  background: var(--maroon);
  border-color: var(--maroon);
}

/* ---------------- buttons ---------------- */

.btn {
  font: inherit;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s,
    transform 0.08s;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btnPrimary {
  background: var(--maroon);
  color: var(--cream);
}

.btnPrimary:hover:not(:disabled) {
  background: var(--maroon-dark);
}

.btnBlock {
  width: 100%;
  padding: 12px 20px;
}

.btnGhost {
  background: transparent;
  border-color: var(--tan);
  color: var(--maroon);
}

.btnGhost:hover {
  background: var(--tan-soft);
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 0 0;
}

.actions .btnPrimary {
  min-width: 190px;
}

/* ---------------- messages ---------------- */

.formError {
  color: var(--err);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--err-bg);
  border: 1px solid var(--err-border);
}

.banner {
  padding: 13px 16px;
  border-radius: 11px;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 13.5px;
  border: 1px solid;
}

.banner.ok {
  background: var(--ok-bg);
  border-color: #b6d4bb;
  color: var(--ok);
}

.banner.err {
  background: var(--err-bg);
  border-color: var(--err-border);
  color: var(--err);
}


/* ---------------- responsive ---------------- */

@media (max-width: 640px) {
  .topbarInner,
  .pageBody {
    padding-left: 16px;
    padding-right: 16px;
  }
  .card {
    padding: 18px 16px 20px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .totals {
    max-width: none;
  }

  /* The Add product button drops under the title rather than squeezing it. */
  .cardHead {
    flex-wrap: wrap;
  }
  .cardHead .btnAdd {
    width: 100%;
  }
  .productRow {
    padding: 42px 12px 14px;
  }

  .actions .btnPrimary,
  .actions .btnGhost {
    width: 100%;
  }

  /* Header: keep the brand and actions on one tidy row instead of wrapping
     into a tall, ragged block. */
  .topbarInner {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 16px;
  }
  .brandLogo {
    width: 30px;
  }
  .brandText strong {
    font-size: 14px;
  }
  .brandSub {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .topbarActions {
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .whoami {
    font-size: 11.5px;
  }
  .topbarActions .btn {
    padding: 8px 14px;
  }

  .homeView {
    min-height: calc(100vh - 58px);
  }
  .homeLogo {
    width: 120px;
  }
  .homeTitle {
    font-size: 26px;
  }
}

/* Very narrow phones: drop the "Order Entry" subline so the brand stays compact
   and the log-out button never gets pushed off-screen. */
@media (max-width: 380px) {
  .brandSub {
    display: none;
  }
}

/* ---------------- touch devices: never zoom on focus ----------------
   iOS Safari zooms the page whenever a focused field computes to under 16px.
   This is keyed on the pointer, not the width: a phone in landscape (or an
   iPad) is well over any width breakpoint and was still zooming on every tap.
   16px is the smallest size Safari leaves alone. */

@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea,
  .pickerBtn,
  .comboInput,
  .totalRow input,
  .totalRowGrand input {
    font-size: 16px;
  }

  /* Keep values clear of the icons at the larger size. */
  input[type="date"] {
    padding-right: 40px;
    background-position: right 13px center;
  }
  .comboInput {
    padding-right: 62px;
  }
}