:root {
  /* Sakurado brand palette */
  --brand:        #7C3A2D;  /* deep maroon — primary brand (used for CTAs, brand mark) */
  --brand-warm:   #F7902D;  /* secondary orange */
  --brand-soft:   #FDB664;  /* light orange */
  --heading:      #b8553f;  /* warm brick — section headings (lighter than brand) */
  --bg:           #FFFCF7;  /* page background — warm cream */
  --bg-card:      #FFFFFF;  /* card surface */
  --bg-soft:      #FFF4E7;  /* alt surface, hover, topbar */
  --bg-warm:      #FCE9CB;  /* warmer surface */
  --bg-accent:    #FEDEB5;  /* highlight panels */
  --fg:           #2d211c;  /* primary text — warm dark brown (softer than near-black) */
  --muted:        #8a786b;  /* secondary text — lighter, warmer */
  --line:         #ede0cc;  /* dividers — slightly lighter and warmer */
  --line-soft:    #f6efe1;  /* faint dividers */

  --ok:           #2e7d32;
  --warn:         #c66900;
  --bad:          #b3261e;

  --radius:       6px;
  --radius-lg:    10px;
  --shadow-card:  0 1px 2px rgba(45, 33, 28, 0.04), 0 1px 4px rgba(124, 58, 45, 0.04);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  font-family: 'Sofia Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, legend, .display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; margin: 0 0 1.2rem; }
h2 { font-size: 1.35rem; margin: 0 0 0.8rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }

a { color: var(--brand); }
a:hover { color: #5a2920; }

kbd {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 0.3rem;
  font-size: 0.82rem;
  font-family: 'Sofia Sans', sans-serif;
}

.muted { color: var(--muted); }

/* Placeholder text shown where a price hasn't been set yet
   (a dash for cake price, "as discussed" for bespoke deco) */
.placeholder {
  color: var(--brand-warm);
  font-style: italic;
  font-weight: 500;
  font-size: 0.88em;
}
td.num .placeholder, span.placeholder { font-variant-numeric: normal; }

/* Topbar */
.topbar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.8rem;
}

.topbar .brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--brand);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.topbar nav { display: flex; gap: 0.4rem; }
.topbar nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  transition: background 0.12s, color 0.12s;
}
.topbar nav a:hover { background: var(--bg-warm); color: var(--brand); }
.topbar nav a.is-active {
  background: var(--bg-warm);
  color: var(--brand);
  font-weight: 600;
}
.topbar nav a.is-active:hover { background: var(--bg-accent); }
.topbar nav a.cta {
  background: var(--brand);
  color: #fff;
}
.topbar nav a.cta:hover { background: #5a2920; color: #fff; }

main {
  max-width: 1040px;
  margin: 2rem auto;
  padding: 0 1.8rem;
}

/* Empty state */
.empty {
  color: var(--muted);
  padding: 3rem 0;
  text-align: center;
  font-size: 1.05rem;
}
.empty a { color: var(--brand); font-weight: 600; }

/* Order list */
table.orders {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
table.orders th, table.orders td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
table.orders th {
  background: var(--bg-soft);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'Sofia Sans', sans-serif;
}
table.orders tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
table.orders tbody tr:hover { background: var(--bg-soft); }
table.orders tbody tr:last-child td { border-bottom: 0; }
table.orders code {
  font-size: 0.85rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--brand);
}

/* Status badges */
.status {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-warm);
  color: var(--brand);
  font-weight: 500;
  white-space: nowrap;
}
.status-new        { background: var(--bg-accent); color: #6b4318; }
.status-confirmed  { background: #d6ebd6; color: #1b5e20; }
.status-in_prep    { background: var(--brand-soft); color: #6b3a07; }
.status-ready      { background: #ede4f6; color: #4527a0; }
.status-dispatched { background: #cce7e2; color: #00574c; }
.status-completed  { background: var(--line); color: var(--muted); }
.status-edited     { background: var(--warm, #F7902D); color: #fff; }

/* Form */
.order-form {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
}
.order-form fieldset { border: none; padding: 0; margin: 0 0 1.7rem 0; }
.order-form legend {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--heading);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
  width: 100%;
  margin-bottom: 1rem;
}
.order-form label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}
.order-form label .optional { color: var(--muted); font-weight: normal; }
.order-form label.inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg);
  margin: 0 1rem 0 0;
  font-weight: 400;
}
.order-form input[type=text],
.order-form input[type=tel],
.order-form input[type=email],
.order-form input[type=date],
.order-form input[type=number],
.order-form select,
.order-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--fg);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.order-form textarea { resize: vertical; }
.order-form input:focus, .order-form select:focus, .order-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 58, 45, 0.12);
}
.order-form .row { display: flex; gap: 1rem; }
.order-form .row > label { flex: 1; }
.order-form .radio-row { margin-bottom: 0.8rem; }
.radio-row.stacked label.inline { display: flex; margin: 0 0 0.4rem; padding: 0.3rem 0; }

/* Items table */
table.items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.6rem;
}
table.items th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid var(--line-soft);
}
table.items td { padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--line-soft); }
table.items input { width: 100%; padding: 0.4rem; }
table.items .line-total {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
}
table.items .remove-row {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--bad);
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1;
}
table.items .remove-row:hover { color: #8a1d18; }

/* Buttons */
button.primary, button.secondary {
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
button.primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
button.primary:hover { background: #5a2920; border-color: #5a2920; }
button.primary:disabled { background: var(--muted); border-color: var(--muted); cursor: not-allowed; }
button.secondary {
  background: var(--bg-card);
  border-color: var(--line);
  color: var(--fg);
}
button.secondary:hover { background: var(--bg-soft); border-color: var(--brand-soft); }

.actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.actions .cancel {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.actions .cancel:hover { color: var(--brand); }

/* Error banner */
.error {
  background: #fdecea;
  color: var(--bad);
  border: 1px solid #f5c2c0;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.2rem;
  font-weight: 500;
}

/* Drop zone (extract panel + photos area) */
.drop-zone { transition: background 0.15s, border-color 0.15s; }
.drop-zone.is-dragover {
  background: var(--bg-accent);
  outline: 2px dashed var(--brand-warm);
  outline-offset: -4px;
}
.extract-panel.drop-zone.is-dragover { background: var(--brand-soft); }

/* Extract panel */
.extract-panel {
  background: var(--bg-accent);
  border: 1px solid #f1cd95;
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.6rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-card);
}
.extract-panel header h2 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  color: var(--heading);
}
.extract-panel header p { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--muted); }
.extract-panel textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
  background: #fff;
  color: var(--fg);
}
.extract-panel textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 58, 45, 0.15);
}
.extract-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.file-pick {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border: 1px dashed var(--brand-warm);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.88rem;
  background: #fff;
  color: var(--brand);
  font-weight: 500;
  transition: background 0.12s;
}
.file-pick input[type=file] { display: none; }
.file-pick:hover { background: var(--bg-warm); }
.extract-status { font-size: 0.88rem; color: var(--muted); }
.extract-status.ok { color: var(--ok); font-weight: 500; }
.extract-status.error { color: var(--bad); font-weight: 500; }

/* Photos zone */
.photos-zone {
  border: 1px dashed var(--brand-soft);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
  margin-top: 0.4rem;
}
.photos-zone.is-dragover {
  outline: 2px dashed var(--brand-warm);
  outline-offset: -4px;
  background: var(--bg-warm);
}
.photos-zone .hint {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

/* Totals */
table.totals {
  margin-bottom: 1.1rem;
  font-variant-numeric: tabular-nums;
}
table.totals td:first-child { padding: 0.25rem 1.2rem 0.25rem 0; color: var(--muted); font-size: 0.92rem; }
table.totals td.num { text-align: right; padding: 0.25rem 0; min-width: 7rem; font-size: 0.95rem; }
table.totals tr.grand td {
  font-weight: 700;
  font-size: 1.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
  color: var(--fg);
}
table.totals tr.grand td:first-child {
  color: var(--heading);
  font-family: 'Playfair Display', Georgia, serif;
}

/* Photos preview thumbnails */
.photos-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.7rem;
}
.photo-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  max-width: 120px;
  position: relative;
}
.photo-thumb img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.photo-thumb span {
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}
.photo-thumb .remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(16, 24, 32, 0.6);
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.photo-thumb .remove:hover { background: var(--bad); }

/* Retail / Wholesale top-of-page tabs */
.kind-tabs {
  display: inline-flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.kind-tab {
  padding: 0.5rem 1.4rem;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: background 0.12s, color 0.12s;
  font-family: 'Sofia Sans', sans-serif;
}
.kind-tab:hover { color: var(--brand); }
.kind-tab.is-active {
  background: var(--brand);
  color: #fff;
}
.kind-tab.is-active:hover { color: #fff; }

/* ===== List header (tabs + date filter) ===== */
.list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-bottom: 1.2rem;
}
.list-header h1 { margin: 0 0.8rem 0 0; }

.list-header .new-cta {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  transition: background 0.12s;
}
.list-header .new-cta:hover { background: #5a2920; color: #fff; }
.list-header .cta-group { display: inline-flex; gap: 0.5rem; }
.list-header .cta-group .new-cta {
  background: var(--bg-card);
  color: var(--brand);
  border: 1px solid var(--brand);
  font-size: 0.88rem;
  padding: 0.45rem 0.85rem;
}
.list-header .cta-group .new-cta:hover {
  background: var(--brand);
  color: #fff;
}

.kind-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: 'Sofia Sans', sans-serif;
}
.kind-pill.wholesale {
  background: var(--brand-warm);
  color: #fff;
}
.kind-pill.retail {
  background: var(--bg-accent);
  color: var(--brand);
}

.tabs { display: inline-flex; gap: 0; border-bottom: 1px solid var(--line); }
.tab {
  padding: 0.45rem 1rem;
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.tab:hover { color: var(--brand); }
.tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.date-filter {
  margin-left: auto;
  display: inline-flex;
  align-items: end;
  gap: 0.5rem;
}
.date-filter label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.date-filter .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
}
.date-filter input[type=date] {
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.92rem;
  background: #fff;
  color: var(--fg);
}
.date-filter input[type=date]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 58, 45, 0.12);
}
.date-filter .clear {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}
.date-filter .clear:hover { color: var(--brand); }

.count-line { font-size: 0.9rem; margin: 0 0 0.8rem; }

/* Day groups */
.day-group { margin-bottom: 1.6rem; }
.day-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--heading);
  margin: 0 0 0.4rem;
  padding-left: 0.1rem;
}

/* Source pill in list */
.source-pill {
  display: inline-block;
  background: var(--bg-accent);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-family: 'Sofia Sans', sans-serif;
}

/* Deadline cell */
.deadline {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}
.deadline small { font-size: 0.78rem; }

table.orders td.num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

/* ===== Order detail page ===== */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.detail-header h1 {
  margin: 0;
  font-size: 1.7rem;
}
.detail-header .order-no {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  color: var(--brand);
  margin-top: 0.3rem;
}
.detail-header .header-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.deadline-callout {
  background: var(--bg-accent);
  border: 1px solid #f1cd95;
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.deadline-callout .icon {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  color: var(--heading);
  line-height: 1;
}
.deadline-callout .body { flex: 1; }
.deadline-callout h3 { color: var(--heading); margin: 0 0 0.2rem; font-size: 1.05rem; }
.deadline-callout p { margin: 0; font-size: 0.95rem; }
.deadline-callout strong { font-weight: 600; }

/* Late order */
.late-badge {
  display: inline-block;
  background: var(--bad);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  font-family: 'Sofia Sans', sans-serif;
  vertical-align: middle;
  margin-left: 0.35rem;
}
table.orders tbody tr.is-late {
  background: linear-gradient(to right, #fce4e1 0, #fce4e1 5px, transparent 5px);
}
table.orders tbody tr.is-late:hover {
  background: linear-gradient(to right, #fce4e1 0, #fce4e1 5px, var(--bg-soft) 5px);
}

.late-callout {
  background: #fce4e1;
  border: 1px solid #f5c2c0;
  border-left: 4px solid var(--bad);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.late-callout .icon {
  color: var(--bad);
  font-size: 1.6rem;
  line-height: 1;
}
.late-callout .body { flex: 1; }
.late-callout h3 {
  color: var(--bad);
  margin: 0 0 0.15rem;
  font-size: 1.02rem;
}
.late-callout p { margin: 0; font-size: 0.92rem; }
.late-callout strong { font-weight: 600; }

/* Cancelled order indicators */
.cancelled-badge {
  display: inline-block;
  background: var(--muted);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  font-family: 'Sofia Sans', sans-serif;
  vertical-align: middle;
  margin-left: 0.35rem;
}
.cancelled-callout {
  background: #f1ece6;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0.95;
}
.cancelled-callout .icon {
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
}
.cancelled-callout h3 {
  color: var(--fg);
  margin: 0 0 0.15rem;
  font-size: 1rem;
}
.cancelled-callout p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.cancelled-callout strong { color: var(--fg); }

/* Cancel dialog */
.cancel-dialog,
.confirm-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 520px;
  width: 92vw;
  background: var(--bg-card);
  color: var(--fg);
  box-shadow: 0 10px 40px rgba(45, 33, 28, 0.18);
}
.cancel-dialog::backdrop,
.confirm-dialog::backdrop {
  background: rgba(45, 33, 28, 0.4);
}
.confirm-dialog h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: var(--heading);
  margin: 0 0 0.6rem;
}
.confirm-dialog p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.confirm-dialog code { background: var(--bg-accent); padding: 0.1rem 0.35rem; border-radius: 3px; }
.confirm-dialog .dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.confirm-dialog .dialog-actions button { padding: 0.5rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-soft); cursor: pointer; font: inherit; font-weight: 500; }
.confirm-dialog .dialog-actions button.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.cancel-dialog h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: var(--heading);
  margin: 0 0 0.4rem;
}
.cancel-dialog .muted { font-size: 0.88rem; margin: 0 0 0.9rem; }
.cancel-dialog label {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0;
}
.cancel-dialog textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  resize: vertical;
}
.cancel-dialog textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 58, 45, 0.15);
}
.cancel-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1rem;
}
.cancel-dialog .dialog-actions button {
  font: inherit;
  font-weight: 600;
  font-size: 0.93rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg);
  transition: background 0.12s;
}
.cancel-dialog .dialog-actions button:hover { background: var(--bg-soft); }

/* Danger button — used on Cancel order / Delete permanently */
button.danger {
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--bad);
  background: #fff;
  color: var(--bad);
  transition: background 0.12s, color 0.12s;
}
button.danger:hover { background: var(--bad); color: #fff; }
.cancel-dialog .dialog-actions button.danger {
  background: var(--bad);
  color: #fff;
  border-color: var(--bad);
}
.cancel-dialog .dialog-actions button.danger:hover { background: #8a1d18; }

/* Reason cell in cancelled list */
table.orders.cancelled tbody tr { background: var(--bg-soft); }
table.orders.cancelled tbody tr:hover { background: var(--bg-warm); }
table.orders.cancelled .reason-cell {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

/* ============================================================ */
/* Phone responsive (≤ 720px) — staff often take photos on their */
/* phone and paste into the extract panel, so the form, list,    */
/* and detail pages all need to work at this width.              */
/* ============================================================ */
@media screen and (max-width: 720px) {
  body { font-size: 16px; }

  /* Topbar — let the nav wrap below the brand if needed */
  .topbar {
    padding: 0.7rem 1rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .topbar .brand { font-size: 1.05rem; }
  .topbar nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.15rem;
    justify-content: flex-start;
  }
  .topbar nav a {
    padding: 0.4rem 0.65rem;
    font-size: 0.88rem;
  }

  main {
    max-width: 100%;
    padding: 0 0.9rem;
    margin: 1.2rem auto;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.15rem; }

  /* List header — stack everything */
  .list-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .list-header h1 { margin: 0; }
  .list-header .new-cta {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .tabs { width: 100%; }
  .tab { flex: 1; text-align: center; }
  .date-filter {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: stretch;
  }
  .date-filter label { width: 100%; }
  .date-filter .secondary { width: auto; min-width: 80px; }

  /* Day group label sits above the cards rather than to the side */
  .day-label { margin-bottom: 0.6rem; }

  /* Order list — convert each row to a card. Each <td> stacks with its
     data-label as a small caption. The first column (order #) shows
     without a caption and acts as the card header. */
  table.orders {
    display: block;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  table.orders thead { display: none; }
  table.orders tbody { display: block; }
  table.orders tbody tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.6rem;
    box-shadow: var(--shadow-card);
    cursor: pointer;
  }
  table.orders tbody tr.is-late {
    border-left: 4px solid var(--bad);
    background: var(--bg-card);
  }
  table.orders tbody tr:hover { background: var(--bg-soft); }
  table.orders td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    padding: 0.25rem 0;
    border-bottom: none;
    white-space: normal;
  }
  table.orders td::before {
    content: attr(data-label);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  /* The first td has data-label="" — hide the empty caption and make
     the order_number prominent at the top of the card */
  table.orders td[data-label=""]::before { content: none; }
  table.orders tbody tr td:first-child {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 1rem;
  }
  table.orders td.reason-cell {
    max-width: none;
    white-space: normal;
  }

  /* Form — tighter padding, stacked rows, 16px inputs (iOS no-zoom) */
  .order-form { padding: 1rem; }
  .order-form .row { flex-direction: column; gap: 0; }
  .order-form input[type=text],
  .order-form input[type=tel],
  .order-form input[type=email],
  .order-form input[type=date],
  .order-form input[type=number],
  .order-form select,
  .order-form textarea { font-size: 16px; }
  .order-form fieldset { margin-bottom: 1.2rem; }

  /* Items table inside form — same card pattern as the list */
  table.items {
    display: block;
  }
  table.items thead { display: none; }
  table.items tbody { display: block; }
  table.items tbody tr.item-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.7rem;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.7rem;
    margin-bottom: 0.7rem;
  }
  table.items td {
    display: block;
    padding: 0;
    border-bottom: none;
  }
  table.items td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
  }
  table.items td[data-label="Product"] { grid-column: 1 / -1; }
  table.items td.line-total {
    text-align: left;
    padding: 0.3rem 0;
    font-weight: 600;
  }
  table.items td[data-label=""] {
    grid-column: 1 / -1;
    margin-top: 0.3rem;
  }
  table.items td[data-label=""]::before { content: none; }
  table.items .remove-row {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    width: 100%;
  }
  table.items .remove-row:hover { background: #fdecea; color: var(--bad); border-color: #f5c2c0; }

  /* Extract panel — stack controls */
  .extract-panel { padding: 1rem 1.1rem; }
  .extract-panel header h2 { font-size: 1.05rem; }
  .extract-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }
  .extract-controls .file-pick {
    justify-content: center;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
  }
  .extract-controls button.primary {
    width: 100%;
    padding: 0.7rem 1.2rem;
  }
  .extract-controls .extract-status {
    text-align: center;
    width: 100%;
  }
  #extract-image-name { text-align: center; word-break: break-all; }

  /* Photos zone */
  .photos-zone { padding: 0.7rem; }
  .photos-preview { gap: 0.5rem; }
  .photo-thumb img { width: 90px; height: 90px; }

  /* Detail page */
  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .detail-header .header-meta { flex-wrap: wrap; }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .detail-section { padding: 1rem 1.1rem; }

  /* Items-readonly table on detail page — same card pattern */
  table.items-readonly {
    display: block;
  }
  table.items-readonly thead { display: none; }
  table.items-readonly tbody { display: block; }
  table.items-readonly tbody tr {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line-soft);
  }
  table.items-readonly tbody tr td { padding: 0; border-bottom: none; }
  table.items-readonly tfoot { display: block; margin-top: 0.5rem; }
  table.items-readonly tfoot tr {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  table.items-readonly tfoot tr.grand { border-top: 1px solid var(--brand); margin-top: 0.4rem; padding-top: 0.5rem; }
  table.items-readonly tfoot td { border: none; padding: 0; }

  /* Detail actions — stack buttons full-width */
  .detail-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }
  .detail-actions a, .detail-actions button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 0.65rem 1.1rem;
  }
  .detail-actions .back {
    padding: 0.5rem;
    text-align: center;
  }
  .detail-actions form { width: 100%; }
  .detail-actions form button { width: 100%; }

  /* Cancel dialog */
  .cancel-dialog {
    padding: 1.1rem;
    width: 94vw;
    max-width: 94vw;
  }
  .cancel-dialog .dialog-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .cancel-dialog .dialog-actions button {
    width: 100%;
    padding: 0.65rem 1.1rem;
  }

  /* Callouts — slightly tighter, icon doesn't dominate */
  .late-callout, .deadline-callout, .cancelled-callout {
    padding: 0.75rem 0.9rem;
    gap: 0.7rem;
  }
  .late-callout .icon, .deadline-callout .icon, .cancelled-callout .icon {
    font-size: 1.4rem;
  }

  /* Count line nudged */
  .count-line { font-size: 0.85rem; }
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-card);
}
.detail-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  color: var(--heading);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.detail-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.9rem;
  font-size: 0.92rem;
}
.detail-card dt { color: var(--muted); font-weight: 500; }
.detail-card dd { margin: 0; }
.detail-card .blank { color: var(--muted); font-style: italic; }

.detail-section {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-card);
}
.detail-section h2 {
  font-size: 1.05rem;
  color: var(--heading);
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}

table.items-readonly {
  width: 100%;
  border-collapse: collapse;
}
table.items-readonly th, table.items-readonly td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
}
table.items-readonly th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  background: var(--bg-soft);
}
table.items-readonly td.num, table.items-readonly th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.items-readonly tfoot td {
  font-weight: 600;
  border-bottom: 0;
}
table.items-readonly tfoot tr.grand td {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  color: var(--heading);
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.photo-gallery a {
  display: block;
}
.photo-gallery img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.12s;
}
.photo-gallery a:hover img {
  transform: scale(1.02);
  border-color: var(--brand-warm);
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.detail-actions a.back {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.detail-actions a.back:hover { color: var(--brand); }
.detail-actions button.secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.detail-actions .print-btn {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.detail-actions .print-btn:hover { background: #5a2920; color: #fff; }