:root {
  --bg: #faf7f5;
  --panel: #ffffff;
  --ink: #2b2b2b;
  --muted: #8a7f78;
  --line: #e7ded8;
  --accent: #b08d78;
  --accent-dark: #8f6f5c;
  --gold: #c8a96a;
  --danger: #c0564b;
  --owe: #b8451f;
  --paid: #4c7a54;
  --shadow: 0 2px 10px rgba(80,60,50,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Nothing shows until app.js knows whether to draw the app or the sign-in screen.
   Without this the whole dashboard flashes up before the login appears, which looks
   broken and invites clicking around an app that isn't ready. */
body.booting .topbar,
body.booting #app { visibility: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(90deg, #fff, #fbf6f2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { font-size: 26px; color: var(--gold); }
.brand-name { font-weight: 700; letter-spacing: .5px; font-size: 18px; }
.brand-sub { font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.nav { display: flex; gap: 8px; }
.brand-logo {
  width: 30px; height: 30px; object-fit: contain; border-radius: 6px; display: block;
}
/* Boutique switcher + account menu, online version only */
.account-bar { display: flex; align-items: center; gap: 10px; }
.account-bar[hidden] { display: none; }
.nav-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: all .15s;
}
.nav-btn:hover { border-color: var(--accent); }
.nav-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.nav-btn .nav-ico { display: none; }  /* icons only used on mobile bottom bar */

main { padding: 20px; margin: 0 auto; }
/* Forms/invoices/print stay comfortably centred; tables & lists use the full width so
   zooming out reveals every column without side-scrolling. */
.form-view, .invoice-page, .print-sheet { margin-left: auto; margin-right: auto; }

/* ---------- Controls ---------- */
.controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
#search:focus, select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; user-select: none; }

/* ---------- Search box ---------- */
.search-box { position: relative; flex: 1 1 320px; min-width: 220px; display: flex; align-items: center; }
.search-box .search-ico { position: absolute; left: 14px; font-size: 15px; opacity: .6; pointer-events: none; }
.search-box input { width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: #fff; }

/* ---------- Columns menu ---------- */
.col-menu-wrap { position: relative; }
.col-menu {
  position: absolute; right: 0; top: 110%; z-index: 30; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 10px; min-width: 190px; max-height: 340px; overflow: auto;
}
.col-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.col-item:hover { background: #fbf6f2; }

/* ---------- Mobile bride cards ---------- */
.card-list { display: none; }
.bride-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.bc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bc-name { font-weight: 700; font-size: 16px; }
.bc-bal { font-size: 13px; font-weight: 700; white-space: nowrap; }
.bc-bal.bal-owe { color: var(--owe); }
.bc-bal.bal-paid { color: var(--paid); }
.bc-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.bc-dress { font-size: 14px; margin-top: 4px; }
.bc-actions { display: flex; gap: 8px; margin-top: 12px; }
.bc-actions .mini { flex: 1; padding: 9px; }
.oc-figs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; }
.oc-figs .bal-owe { color: var(--owe); font-weight: 700; }
.oc-figs .bal-paid { color: var(--paid); font-weight: 600; }
.oc-recv { flex: 0 0 auto; font-size: 14px; }

/* ---------- Summary tiles ---------- */
.summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; min-width: 150px; box-shadow: var(--shadow);
}
.tile .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.tile .value { font-size: 20px; font-weight: 700; margin-top: 3px; }
.tile.owe .value { color: var(--owe); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); scrollbar-width: thin; scrollbar-color: var(--accent) #efe7e1; }
/* Always-visible horizontal scrollbar so mouse users can slide the table left/right at 100% zoom */
.table-wrap::-webkit-scrollbar { height: 14px; }
.table-wrap::-webkit-scrollbar-track { background: #efe7e1; border-radius: 0 0 12px 12px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; border: 3px solid #efe7e1; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }
.table-wrap.dragging { cursor: grabbing; user-select: none; }
.table-wrap.dragging tbody tr:hover { background: transparent; cursor: grabbing; }
table { border-collapse: collapse; width: 100%; }
/* only the wide data grids need a minimum width (they scroll inside .table-wrap) */
#grid, #ord-grid { min-width: 1050px; }
/* These belong to the wide data grids only — they must NOT leak onto the
   invoice / supplier / print tables, where text needs to wrap inside its column. */
#grid thead th, #ord-grid thead th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); padding: 12px 12px; border-bottom: 2px solid var(--line);
  position: sticky; top: 0; background: #fff; cursor: pointer; white-space: nowrap;
}
#grid thead th.num, #ord-grid thead th.num { text-align: right; }
#grid thead th[data-sort]:hover, #ord-grid thead th[data-sort]:hover { color: var(--accent-dark); }
#grid thead th.sorted::after, #ord-grid thead th.sorted::after { content: " ▾"; color: var(--accent); }
#grid thead th.sorted.asc::after, #ord-grid thead th.sorted.asc::after { content: " ▴"; }
#grid tbody td, #ord-grid tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
#grid tbody td.num, #ord-grid tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
#grid tbody tr:hover, #ord-grid tbody tr:hover { background: #fbf6f2; cursor: pointer; }
#grid tbody tr:last-child td, #ord-grid tbody tr:last-child td { border-bottom: none; }
.name-cell { font-weight: 600; }
.desc-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bal-owe { color: var(--owe); font-weight: 700; }
.bal-paid { color: var(--paid); font-weight: 600; }
.row-actions { display: flex; gap: 6px; }
.mini {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.mini:hover { border-color: var(--accent); color: var(--accent-dark); }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- Private figures ---------- */
.lock { font-size: 13px; font-weight: 600; color: var(--muted); background: #f3ece6; border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; vertical-align: middle; margin-left: 8px; }
.fig-lock { background: #fbf6f2; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 8px; }
.fig-lock p { margin: 0 0 12px; color: var(--ink); }
.fig-group { margin-top: 18px; }
.fig-title { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-dark); font-weight: 700; margin-bottom: 10px; }
.link-btn { background: none; border: none; color: var(--accent-dark); text-decoration: underline; cursor: pointer; font-size: 13px; margin-top: 10px; padding: 0; }
.imp-actions { display: flex; gap: 8px; margin: 10px 0; }
.imp-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.imp-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.imp-row:last-child { border-bottom: none; }
.imp-row:hover { background: #fbf6f2; }
.imp-name { font-weight: 700; white-space: nowrap; }
.imp-meta { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
code.path { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }

/* ---------- Wedding date confirmation ---------- */
.date-confirm { margin-top: 6px; font-size: 15px; font-weight: 700; }
.date-confirm.ok { color: var(--paid); }
.date-confirm.warn { color: var(--owe); }
.date-confirm .muted { color: var(--muted); font-weight: 500; }
#f-date { font-family: inherit; }

/* ---------- Brand ---------- */
.brand-cell { font-weight: 600; color: var(--accent-dark); }
.hint { font-size: 13px; color: var(--muted); line-height: 1.4; }
.add-brand-row { display: flex; gap: 10px; margin-top: 8px; }
.add-brand-row input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.brand-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 13px; margin-bottom: 5px;
}
/* .brand-name is also the app's logo in the top bar (18px, letter-spaced). Without
   resetting it here, every brand in Settings renders at logo size and the list becomes
   a long scroll. */
.brand-item .brand-name { font-weight: 600; font-size: 14px; letter-spacing: 0; flex: 1; }
.brand-item .brand-used { font-size: 12px; color: var(--muted); }
.brand-del { color: var(--danger); }
.brand-del:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- Orders ---------- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill-not_ordered { background: #f3ece6; color: #8a7f78; }
.pill-ordered { background: #fdf0e6; color: #b8451f; }
.pill-received { background: #e7f2e9; color: #4c7a54; }
tr.ord-received { opacity: .7; }
tr.ord-unlinked { background: #fbf7f2; }
.tag { font-size: 11px; background: #f3ece6; color: var(--muted); border-radius: 6px; padding: 1px 6px; font-weight: 600; }
.dash { color: var(--line); }
.cal-check.sm { width: 22px; height: 22px; flex-basis: 22px; }
.cal-check.sm input { width: 22px; height: 22px; }
.cal-check.sm input:checked + .checkmark::after { left: 6px; top: 2px; width: 5px; height: 10px; }
.big-chk { font-size: 15px; font-weight: 600; padding: 12px 0; }
.big-chk input { width: 20px; height: 20px; }
.received-chk { color: var(--paid); border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }

/* ---------- Calendar: range, received badge, selection ---------- */
.cal-range { align-items: center; }
.range-lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.range-to { color: var(--muted); font-size: 13px; }
.cal-range input[type="date"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 14px; }
.mini-on { background: var(--accent); color: #fff; border-color: var(--accent); }

.pill-count { display: inline-block; background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
.filter-pill.active .pill-count { background: rgba(255,255,255,.28); }
.mini-add { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.mini-add:hover { background: var(--accent-dark); color: #fff; }
.next-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.next-steps .btn { width: 100%; }
.readonly-field { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 9px;
  background: #fbf8f6; font-size: 15px; color: var(--ink); min-height: 42px; }
.readonly-field .muted { color: var(--muted); }
.nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fdf3e7; border: 1px solid #e8cfae; color: #8a5a1f;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.mini-order { color: var(--owe); }
.mini-order:hover { border-color: var(--owe); }
.recv-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.recv-yes { background: #e7f2e9; color: var(--paid); }
.recv-no { background: #fdf0e6; color: #a8641f; }              /* ordered, still waiting */
.recv-none { background: #fdeceb; color: var(--danger); }      /* not ordered at all */
.recv-eta { background: #e9f0f6; color: #3f6389; }             /* supplier gave a date */

.select-bar { display: flex; align-items: center; gap: 12px; background: #fbf6f2; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; position: sticky; top: 0; z-index: 15; }
.select-bar[hidden] { display: none; }
.sel-count { font-weight: 700; }
.sel-print[disabled] { opacity: .5; cursor: default; }
.cal-item.sel-on { background: #f3ece6; border-color: var(--accent); }
.cal-check.sel input:checked + .checkmark { background: var(--accent); border-color: var(--accent); }

/* ---------- Landscape sheets (supplier chase / work sheet) ---------- */
.sheet-land { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 15px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
.sheet-date { font-size: 12px; color: var(--muted); }
.sup-group { margin-bottom: 18px; break-inside: avoid; }
.sup-brand { font-size: 14px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  background: #f3ece6; border: 1px solid #e0d4ca; border-radius: 6px; padding: 5px 10px; margin-bottom: 6px; }
.sup-count { float: right; font-weight: 600; color: var(--muted); }
.sup-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sup-table th, .sup-table td { border: 1px solid #c9bdb4; padding: 5px 8px; font-size: 12px; text-align: left; overflow-wrap: break-word; hyphens: none; }
.sup-table th { line-height: 1.2; }      /* wrap rather than collide */
.sup-note-cell { padding: 0 !important; }
.sup-note { width: 100%; border: none; background: transparent; padding: 6px 8px; font: inherit; font-size: 12px; }
.sup-note:focus { outline: 2px solid var(--accent); background: #fff; }
.saved-flash { background: #e7f2e9 !important; transition: background .3s; }

/* ---------- Supplier sheet on a phone: cards, not a squashed table ---------- */
.sup-cards { display: none; }
.sup-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.sup-card-arrived { background: #f2f8f3; border-color: #cfe3d4; }
.sup-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sup-card-name { font-weight: 800; font-size: 16px; }
.sup-card-status { font-size: 12px; font-weight: 800; white-space: nowrap; }
.sup-card-dress { color: var(--muted); font-size: 14px; margin-top: 3px; }
.sup-card-dates { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin-top: 8px; color: var(--muted); }
.sup-card-dates b { color: var(--ink); }
.sup-card-fields { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.sup-card-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.sup-card-fields input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 15px; font-family: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); }
.sup-card-fields input:disabled { background: #f2f2f2; color: var(--muted); }
.sup-card > .mini { width: 100%; padding: 10px; }

@media (max-width: 720px) {
  .sup-table-wrap { display: none; }
  .sup-cards { display: block; }
}
@media print {
  .sup-table-wrap { display: block !important; }
  .sup-cards { display: none !important; }
  .sup-note { border: none; }
}
.sup-table th { background: #faf5f1; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.sup-tick { height: 26px; }
.sup-name { font-weight: 700; }
.sup-ref { font-weight: 400; color: var(--muted); font-size: 11px; }
.sup-urgent { color: var(--owe); font-weight: 700; }
.sup-arrived { color: var(--paid); font-weight: 800; }
.row-arrived td { background: #e7f2e9; }   /* highlighted, like your marker pen */
@media print {
  .sheet-land { border: none; box-shadow: none; padding: 0; }
  .sup-table th { background: #f0eae5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sup-brand { background: #ede4dc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .row-arrived td { background: #dcecdf !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Staff monthly fitting sheet ---------- */
.fit-month-band { background: #f4c9d2; border: 1px solid #e0a9b6; border-radius: 4px; padding: 5px 12px;
  font-weight: 800; letter-spacing: 1.5px; font-size: 13px; margin-bottom: 8px; }
.fit-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fit-table th, .fit-table td { border: 1px solid #8f8f8f; padding: 6px; font-size: 11px;
  text-align: left; overflow-wrap: break-word; hyphens: none; vertical-align: top; }
.fit-table th { background: #faf5f1; font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; line-height: 1.15; }
/* tall rows — there must be room to write in each box by hand after printing */
.fit-table td { height: 76px; }
.fit-table tr { break-inside: avoid; page-break-inside: avoid; }
.fit-name { font-weight: 700; }
.fit-blank { background: #fff; }
.fit-live { cursor: pointer; font-weight: 700; text-align: center; background: #fdfbfa; }
.fit-live:hover { background: #f3ece6; outline: 1px solid var(--accent); }
.fit-yes { color: var(--paid); }
.fit-no { color: var(--muted); font-weight: 600; }
.fit-date-input { width: 100%; border: 1px solid var(--accent); border-radius: 4px; font-size: 11px; padding: 2px; font-family: inherit; }
@media print { .fit-live { background: #fff !important; cursor: default; } }
@media print {
  .fit-month-band { background: #f4c9d2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fit-table th { background: #f5efeb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* ~3 lines of writing room per row, like the paper sheet */
  .fit-table td { height: 22mm; }
  .fit-table thead { display: table-header-group; }   /* repeat headings on every page */
  .fit-month-band { break-after: avoid; }
}

/* ---------- Print sheet (select-to-print) ---------- */
.print-sheet { max-width: 800px; margin: 0 auto; }
.ps-head { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 16px; color: var(--accent-dark); }
.ps-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.ps-name { font-size: 19px; font-weight: 700; border-bottom: 2px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.ps-grid > div { font-size: 14px; }
.ps-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.ps-appt-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-dark); font-weight: 700; margin: 16px 0 6px; }
.ps-appt { width: 100%; border-collapse: collapse; }
.ps-appt th, .ps-appt td { border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; text-align: left; }
.ps-appt th { background: #f3ece6; }
.ps-none { color: var(--muted); text-align: center; }

@media print {
  .print-sheet { max-width: none; }
  .ps-card { break-inside: avoid; box-shadow: none; }
}

/* ---------- Calendar toolbar (tidied) ---------- */
.cal-top { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 14px; box-shadow: var(--shadow); }
.cal-row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cal-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-tools { display: flex; gap: 8px; }
.cal-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cal-row3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cal-row3.hidden { display: none; }
.cal-row3 input[type="date"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 14px; }

/* ---------- Calendar filters & event types ---------- */
.cal-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-pill { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 8px 15px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; }
.filter-pill:hover { border-color: var(--accent); }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#cal-today { align-self: center; }

.ev-tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.ev-dot { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.cal-item.ev-wedding { border-left: 4px solid var(--gold); }
.cal-item.ev-appointment { border-left: 4px solid #6a8caf; }
.cal-item.ev-collection { border-left: 4px solid #8f6f9f; }
.ev-tag.ev-wedding { background: #f7efe0; color: #9c7b34; }
.ev-tag.ev-appointment { background: #e9f0f6; color: #3f6389; }
.ev-tag.ev-collection { background: #f1eaf5; color: #6b4f7c; }

/* ---------- Appointment rows in the form ---------- */
.appt-row { display: grid; grid-template-columns: 1.1fr 0.9fr 1.6fr auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.appt-row .field { margin: 0; }

/* ---------- Calendar ---------- */
.cal-count { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; }
.cal-month {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent-dark); margin: 22px 4px 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
}
.cal-month:first-child { margin-top: 4px; }
.cal-month span { font-size: 12px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.cal-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--shadow); cursor: pointer; transition: background .12s;
}
.cal-item:hover { background: #fbf6f2; }
.cal-item.done { opacity: .6; background: #f4f1ee; }
.cal-item.done .cal-name { text-decoration: line-through; color: var(--muted); }
.cal-item.done .cal-sub { text-decoration: line-through; }

.cal-check { position: relative; display: inline-flex; width: 26px; height: 26px; flex: 0 0 26px; cursor: pointer; }
.cal-check input { opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.cal-check .checkmark {
  position: absolute; inset: 0; border: 2px solid var(--line); border-radius: 7px; background: #fff; pointer-events: none;
}
.cal-check input:checked + .checkmark { background: var(--paid); border-color: var(--paid); }
.cal-check input:checked + .checkmark::after {
  content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}

.cal-date {
  flex: 0 0 54px; text-align: center; background: #fbf6f2; border: 1px solid var(--line); border-radius: 9px; padding: 5px 0;
}
.cal-date .d { display: block; font-size: 20px; font-weight: 700; line-height: 1; color: var(--accent-dark); }
.cal-date .m { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cal-main { flex: 1 1 auto; min-width: 0; }
.cal-name { font-weight: 700; font-size: 15px; }
.cal-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bal { font-size: 13px; font-weight: 700; white-space: nowrap; }
.cal-bal.bal-owe { color: var(--owe); }
.cal-bal.bal-paid { color: var(--paid); }
.cal-actions { display: flex; gap: 6px; }

@media (max-width: 720px) {
  .cal-bal { display: none; }
  .cal-actions .mini { padding: 6px 8px; }
  .appt-row { grid-template-columns: 1fr 1fr; }
  .ev-tag { display: none; }
}

/* ---------- Form ---------- */
.form-view { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 24px; max-width: 920px; margin: 0 auto; }
.form-view h2 { margin: 0 0 4px; }
.form-view .sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 20px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.field label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 15px; background: #fff; font-family: inherit;
}
.field textarea { resize: vertical; min-height: 60px; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-dark); font-weight: 700; margin: 22px 0 12px; border-top: 1px solid var(--line); padding-top: 16px; }

.dep-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.dep-row .field { margin: 0; }
.del-dep { background: #fff; border: 1px solid var(--line); color: var(--danger); border-radius: 9px; padding: 10px 12px; cursor: pointer; height: 42px; }
.del-dep:hover { border-color: var(--danger); background: #fdf2f1; }
.add-dep { background: #fff; border: 1px dashed var(--accent); color: var(--accent-dark); border-radius: 9px; padding: 10px 14px; cursor: pointer; font-weight: 600; }

.totals-box { background: #fbf6f2; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 16px; display: flex; gap: 26px; flex-wrap: wrap; }
.totals-box div span { display: block; }
.totals-box .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.totals-box .v { font-size: 19px; font-weight: 700; }
.totals-box .v.owe { color: var(--owe); }

.form-actions {
  display: flex; gap: 12px; align-items: center;
  position: sticky; bottom: 0; z-index: 12;
  margin: 24px -24px 0; padding: 14px 24px;
  background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 12px rgba(80, 60, 50, .06);
  border-radius: 0 0 14px 14px;
}
.btn { padding: 11px 22px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-danger { background: #fff; border-color: var(--danger); color: var(--danger); margin-left: auto; }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* ---------- Sign-in screen ---------- */
.auth-wrap { min-height: 80vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px; padding: 30px 16px; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-mark { font-size: 30px; color: var(--gold); }
.auth-note { color: var(--muted); font-size: 14px; text-align: center; max-width: 340px; }

/* ---------- Photos ---------- */
.row-thumb { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: middle;
  margin-right: 8px; border: 1px solid var(--line); cursor: zoom-in; background: #f3ece6; }
.row-thumb:hover { border-color: var(--accent); }
.photo-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.photo-tile { position: relative; width: 104px; height: 104px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: #f3ece6; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.photo-del:hover { background: var(--danger); }
.photo-empty { color: var(--muted); font-size: 14px; padding: 10px 0; }
.photo-add-btn { cursor: pointer; }

.photo-viewer { position: fixed; inset: 0; background: rgba(20,14,11,.92); z-index: 120;
  display: flex; align-items: center; justify-content: center; }
.photo-viewer img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.pv-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,.15); color: #fff;
  border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.pv-close:hover { background: rgba(255,255,255,.3); }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15);
  color: #fff; border: none; width: 46px; height: 62px; border-radius: 10px; font-size: 30px; cursor: pointer; }
.pv-nav:hover { background: rgba(255,255,255,.3); }
.pv-prev { left: 14px; } .pv-next { right: 14px; }
.pv-count { position: absolute; bottom: 18px; color: #fff; opacity: .8; font-size: 14px; }
@media print { .row-thumb { display: none; } }

/* ---------- Modal (history) ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(43, 30, 24, .45); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* One .modal rule only — there were two, and the later silently won. */
.modal h3 { margin: 0 0 4px; }
.hist-list { margin-top: 12px; }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; font-size: 14px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 10px; z-index: 60;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); font-weight: 600;
}

/* ---------- Invoice ---------- */
.invoice-toolbar { display: flex; gap: 12px; margin-bottom: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }
@media (max-width: 720px) {
  .invoice-toolbar { justify-content: stretch; }
  .invoice-toolbar .btn { flex: 1 1 auto; }
  .invoice-toolbar select, .invoice-toolbar .chk { flex: 1 1 100%; }
  .invoice-toolbar .hint { flex: 1 1 100%; text-align: center; }
}
.invoice-page {
  background: #fff; color: #000; max-width: 800px; margin: 0 auto; padding: 40px 46px;
  border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; line-height: 1.45;
}
/* One rule, not two. There were a centred rule and a flex rule fighting: flex won the
   layout while text-align:center survived, which is what pushed the VAT line off-centre
   under the name. */
.inv-head {
  display: flex; align-items: center; gap: 16px; text-align: left;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;
}
/* Height-capped, width free: a shop logo may be wide-and-short or tall-and-narrow, and
   constraining the wrong axis either blows it up or squashes it. */
.inv-logo { max-height: 56px; max-width: 180px; width: auto; height: auto; object-fit: contain; }
.inv-brand { font-size: 20px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.25; }
.inv-brand .sml {
  display: block; font-size: 11px; letter-spacing: 1px; color: #555;
  font-weight: 400; margin-top: 2px;
}
.inv-title { text-align: center; font-weight: 700; letter-spacing: 1px; margin: 14px 0; padding: 7px; background: #f3ece6; border: 1px solid #e0d4ca; }
.inv-customer { margin: 10px 0; }
.inv-customer .big { font-size: 17px; font-weight: 700; }
.inv-line { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dotted #ddd; }
.inv-line .lbl { flex: 1; }
.inv-line .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-left: 20px; }
.inv-meas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; padding: 8px 10px; background: #f7f2ee; border: 1px solid #e0d4ca; border-radius: 6px; font-size: 12px; }
.inv-meas-title { width: 100%; font-weight: 700; letter-spacing: .5px; }
.inv-meas-item b { color: #555; font-weight: 600; margin-right: 3px; }
.inv-vat { margin: 10px 0; margin-left: auto; width: 260px; }
.inv-vat .inv-line { border-bottom: none; padding: 3px 0; }
.inv-vat .total { border-top: 2px solid #000; font-weight: 700; font-size: 15px; padding-top: 6px; }
.dep-table { width: 100%; border-collapse: collapse; margin: 12px 0; table-layout: fixed; }
.dep-table col.c1 { width: 34%; } .dep-table col.c2 { width: 17%; }
.dep-table col.c3 { width: 15%; } .dep-table col.c4 { width: 16%; } .dep-table col.c5 { width: 18%; }
.dep-table th, .dep-table td { overflow-wrap: break-word; hyphens: none; }
.dep-table th, .dep-table td { border: 1px solid #ccc; padding: 6px 8px; font-size: 12px; text-align: left; }
.dep-table th { background: #f3ece6; }
.dep-table td.num, .dep-table th.num { text-align: right; }
.dep-table .bal-row td { font-weight: 700; background: #fbf6f2; }
.terms { margin-top: 18px; font-size: 11px; line-height: 1.5; }
.terms h4 { text-align: center; background: #f3ece6; border: 1px solid #e0d4ca; padding: 5px; margin: 0 0 8px; letter-spacing: 1px; }
.terms p { margin: 3px 0; }
.sign { display: flex; justify-content: space-between; margin-top: 40px; gap: 40px; }
.sign div { flex: 1; text-align: center; }
/* The rule needs empty paper ABOVE it — that is where someone signs. Previously the
   rule sat directly under the terms with the caption below it, so the printed page had
   a line and a name but nowhere to put a pen. */
.sign .line {
  margin-top: 56px; border-top: 1px solid #000; padding-top: 6px;
  font-size: 11px; white-space: pre-line;
}

/* ---------- Print ---------- */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  /* Padding stays exactly as on screen. It used to shrink to 10px 14px for print, which
     meant fitInvoiceToPage measured one layout and the printer laid out another, so the
     scale it calculated was wrong. Scaling only works if what we measure is what prints. */
  .invoice-page { border: none; box-shadow: none; max-width: none; margin: 0; }
  @page { size: A4; margin: 12mm; }

  /* The printed invoice is the screen invoice, scaled — not a squeezed variant of it.
     Trimming padding and type size for print made the paper drift away from what she
     approved on screen, and every trim was a guess at how much was needed. Her own
     Excel sheet solves this by printing at 27%; fitInvoiceToPage() does the same,
     measuring the real height and scaling once so it lands on a single page looking
     exactly as it does here. */
  .invoice-page { box-sizing: border-box; }
  /* Keep the signature block whole, but do NOT tie it to the terms with break-after:
     avoid — that forced a break before the last term so the two could travel together,
     which is what stranded item 4 and the signatures on a second sheet. Once the scale
     is right nothing needs to break at all. */
  .sign { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .dep-row { grid-template-columns: 1fr 1fr; }
  main { padding: 12px; padding-bottom: 78px; }
  .form-view { padding: 16px; }

  /* top bar: just the brand */
  .topbar { padding: 10px 16px; }
  .brand-mark { font-size: 22px; }
  .brand-name { font-size: 16px; }

  /* nav becomes a fixed bottom tab bar */
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--line);
    display: flex; gap: 0; padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 12px rgba(80, 60, 50, .1);
  }
  .nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: none; background: none; border-radius: 10px; padding: 7px 2px;
    font-size: 10.5px; font-weight: 600; color: var(--muted);
  }
  .nav-btn .nav-ico { display: block; font-size: 19px; line-height: 1; }
  .nav-btn.active { background: #f3ece6; color: var(--accent-dark); }

  /* Breakdown: cards instead of the wide table */
  .table-wrap { display: none; }
  .card-list { display: block; }
  .col-menu-wrap { display: none; }  /* columns are a desktop feature */
  .controls { gap: 8px; }
  .search-box { flex-basis: 100%; }
  #filter-month, #filter-year { flex: 1; }
  .cal-sub { white-space: normal; overflow: visible; }
  .recv-badge { display: inline-block; margin-top: 4px; }
  .cal-range { flex-wrap: wrap; }

  /* Calendar rows stack on a phone: date + name on top, status under, buttons on their own row */
  .cal-item { flex-wrap: wrap; align-items: flex-start; padding: 12px 14px; gap: 10px; }
  .cal-main { flex: 1 1 0; min-width: 0; }   /* stay on the same line as the date badge */
  .cal-name { font-size: 15px; line-height: 1.3; }
  .cal-actions { flex: 1 0 100%; margin-top: 4px; display: flex; gap: 8px; }
  .cal-actions .mini { flex: 1; padding: 9px 6px; font-weight: 600; }
  .cal-date { flex: 0 0 46px; }
  .cal-tools { width: 100%; }
  .cal-tools .mini { flex: 1; }
  .cal-row2 .search-box { flex-basis: 100%; }
  #cal-month, #cal-year { flex: 1; }
  /* keep the sticky Save bar above the bottom tab bar */
  .form-actions { bottom: 62px; margin: 20px -16px 0; padding: 12px 16px; flex-wrap: wrap; }
  .form-view { padding-bottom: 4px; }
}

/* ---------------- Enquiries ---------------- */
.enq-list { display: flex; flex-direction: column; gap: 10px; }
.enq-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow); flex-wrap: wrap;
}
.enq-name { font-weight: 600; font-size: 16px; }
.enq-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.enq-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- The day: two fitting rooms ---------------- */
.day-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.slot-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.slot {
  text-align: left; border-radius: 12px; padding: 12px 14px;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow);
  font: inherit; color: inherit; position: relative;
}
.slot-time { font-weight: 600; font-size: 15px; }
.slot-room { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.slot-who { margin-top: 4px; font-size: 14px; }
.slot-note { color: var(--muted); font-size: 12px; margin-top: 2px; }
.slot.free { cursor: pointer; border-style: dashed; }
.slot.free .slot-who { color: var(--muted); }
.slot.free:hover { border-color: var(--gold); background: #fffdf9; }
.slot.taken { background: #f7f2ec; border-color: #e4d7c7; }
/* an enquiry is not a booking yet — outlined, not solid */
.slot.taken.is-enquiry { background: #fff; border-left: 4px solid var(--gold); }
.slot-cancel { position: absolute; top: 10px; right: 10px; }

/* ---------------- Booking a slot ---------------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(40, 30, 25, .45);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px;
}
.modal {
  background: var(--panel); border-radius: 16px; padding: 26px 28px; width: min(680px, 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25); max-height: 90vh; overflow: auto;
}
.modal h3 { font-size: 20px; }
.modal .field { margin-bottom: 14px; }
.modal input, .modal select, .modal textarea { padding: 11px 13px; font-size: 15px; }
.modal h3 { margin: 0 0 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.slot-matches { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.slot-match {
  text-align: left; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; font: inherit; cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px;
}
.slot-match:hover { border-color: var(--gold); background: #fffdf9; }
.slot-match span { color: var(--muted); font-size: 12px; }

/* enquiries in the calendar: outlined so they read as "not confirmed" */
.ev.enquiry, .cal-row.enquiry { border-left: 3px solid var(--gold); background: #fff; }
.day-pick {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.day-pick:hover { border-color: var(--accent); }

/* A primary button that is also .mini was getting .mini's hover colour, which is the
   same brown as its own hover background — the label vanished into the block. */
.btn-primary.mini:hover { color: #fff; }

/* Free times inside the booking box */
.bk-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
  max-height: 340px; overflow: auto; padding: 2px;
}
.bk-slot {
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 10px 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3;
}
.bk-slot span { font-weight: 400; font-size: 12px; color: var(--muted); }
.bk-slot:hover { border-color: var(--accent); }
.bk-slot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-slot.on span { color: rgba(255,255,255,.85); }

/* Enquiries in the calendar: gold, and outlined rather than solid, because they are
   not a booking yet. */
.ev-enquiry .ev-tag, .ev-tag.ev-enquiry { background: #fdf6e7; color: #8a6d2f; }
.cal-item.is-enquiry { border-left: 3px solid var(--gold); }

/* the enquiry tick sits with the other calendar controls but reads as its own thing */
.chk-enq { white-space: nowrap; }

/* Appointments on the bride form: a read-only list, booked through the diary */
.appt-booked { display: flex; flex-direction: column; gap: 6px; }
.appt-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.appt-when { font-weight: 600; }
.appt-time { color: var(--accent-dark); font-weight: 600; }
.appt-note { color: var(--muted); }
.appt-line .del-dep { margin-left: auto; }

/* Collapsible sections. Used on Settings (was 2,000px of scrolling) and for the parts
   of the bride form that are only filled in occasionally. */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); margin: 14px 0; padding: 0 16px;
}
.panel > summary {
  cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 15px;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before { content: '▸'; color: var(--accent); font-size: 13px; transition: transform .15s; }
.panel[open] > summary::before { transform: rotate(90deg); }
.panel[open] { padding-bottom: 16px; }
.panel > summary:hover { color: var(--accent-dark); }
/* everything is open when printing — a folded section must never hide from a printout */
@media print { .panel > summary { display: none; } .panel { border: none; box-shadow: none; padding: 0; } }

/* Still-owed-by-month table (inside the password-protected figures) */
.fig-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.fig-table th, .fig-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.fig-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.fig-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-table tbody tr.has-owed { background: #fffaf6; }
.fig-table tfoot th { border-top: 2px solid var(--line); border-bottom: none; font-weight: 700; }
.bal-over { color: var(--accent-dark); font-weight: 700; }

/* wedding date on an enquiry card */
.enq-wed { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.enq-wed label { font-size: 12px; color: var(--muted); }
.enq-wed input { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.sup-nofit { color: var(--muted); font-style: italic; font-size: 12px; }

/* Status straight from the list — looks like the pill it replaced, behaves like a select */
.pill-select {
  border: 1px solid transparent; border-radius: 999px; padding: 5px 26px 5px 11px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' fill='none' stroke='%238a7f78' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.pill-select:hover { border-color: var(--accent); }
.pill-select:disabled { opacity: .55; cursor: wait; }

/* ---------- Collection week (staff print sheet) ---------- */
.coll-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 10px; }
.coll-table th, .coll-table td {
  border: 1px solid #cbb9a8; padding: 8px 10px; vertical-align: middle;
  overflow-wrap: break-word;
}
.coll-table thead th {
  background: #f4ece4; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  text-align: center;
}
.coll-table th.coll-name, .coll-table td.coll-name { text-align: left; width: 26%; }
.coll-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.coll-cell { text-align: center; }
/* tall rows so staff can write on the printed sheet */
.coll-table tbody td { height: 20mm; }
.coll-mark { font-size: 22px; line-height: 1; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .coll-table { font-size: 12px; }
  .coll-table thead { display: table-header-group; }
  .coll-table tr { break-inside: avoid; }
}
.coll-when { display: flex; gap: 8px; }
.coll-when input[type="date"] { flex: 1 1 auto; }
.coll-when input[type="time"] { flex: 0 0 120px; }
.coll-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ================= THE NEW LOOK ================= */
.ui-toggle{
  border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px;
  padding:7px 14px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.ui-toggle:hover{ border-color:var(--accent); color:var(--ink); }
.ui-toggle.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

.today-h{ font-size:26px; letter-spacing:-.02em; margin:0 0 16px; }

/* headline numbers, each one a way in */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.tile-btn{
  text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; cursor:pointer; font:inherit; color:inherit; box-shadow:var(--shadow);
  transition:transform .15s, border-color .15s;
}
.tile-btn:hover{ transform:translateY(-2px); border-color:var(--accent); }
.tile-btn .n{ font-size:27px; font-weight:700; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; }
.tile-btn .l{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:6px; }
.tile-btn.warn .n{ color:var(--owe); }

.today-cols{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:start; }

.card-lite{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; }
.card-lite h3{
  margin:0; padding:13px 16px; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:700; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.lite-link{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600;
  color:var(--accent-dark); cursor:pointer; }
.lite-link:hover{ text-decoration:underline; }

.t-row{ display:flex; align-items:center; gap:11px; padding:12px 16px;
  border-bottom:1px solid var(--line); cursor:pointer; }
.t-row:last-child{ border-bottom:0; }
.t-row:hover{ background:#fbf6f2; }
.t-time{ font-weight:700; font-size:13.5px; min-width:52px; font-variant-numeric:tabular-nums; }
.t-room{ font-size:10px; border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--muted); }
.t-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.t-name{ font-weight:600; font-size:14.5px; }
.t-sub{ color:var(--muted); font-size:12.5px; }
.ev-tag.ev-late{ background:#fbeae5; color:var(--owe); }

/* bride page */
.bp-top{ display:flex; justify-content:space-between; gap:10px; margin-bottom:14px; }
.journey{ display:flex; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin-bottom:16px; background:var(--panel); box-shadow:var(--shadow); }
.jstep{ flex:1; padding:12px 12px; border-right:1px solid var(--line); min-width:0; }
.jstep:last-child{ border-right:0; }
.jstep.done{ background:#fbf6f2; }
.jstep.now{ background:var(--accent); color:#fff; }
.jt{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.75; }
.jv{ font-size:12.5px; font-weight:650; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.bp-grid{ display:grid; grid-template-columns:250px 1fr; gap:18px; align-items:start; }
.bp-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px; text-align:center; }
.bp-photo{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; margin-bottom:12px; display:block; }
.bp-nophoto{ display:grid; place-items:center; background:#f3ece7; color:var(--muted); font-size:12.5px; }
.bp-name{ font-weight:700; font-size:17px; letter-spacing:-.01em; }
.bp-sub{ color:var(--muted); font-size:13px; margin-top:2px; }
.bp-facts{ margin-top:14px; text-align:left; display:grid; gap:7px; }
.bp-fact{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.bp-fact span{ color:var(--muted); }
.bp-fact b{ font-weight:600; text-align:right; }

.bp-money{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.mbox{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.mn{ font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ml{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:4px; }
.mbox.owe .mn{ color:var(--owe); }
.bp-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ---------- mobile ---------- */
@media (max-width:860px){
  .ui-toggle{ font-size:11px; padding:6px 11px; }
  .today-h{ font-size:21px; margin-bottom:12px; }
  .tiles{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .tile-btn{ padding:13px 14px; border-radius:12px; }
  .tile-btn .n{ font-size:22px; }
  .today-cols{ grid-template-columns:1fr; gap:14px; }
  .t-row{ padding:13px 14px; }            /* comfortable thumb target */
  .t-time{ min-width:46px; font-size:13px; }

  .journey{ flex-wrap:wrap; }
  .jstep{ flex:1 1 33%; min-width:33%; border-bottom:1px solid var(--line); }
  .jv{ white-space:normal; }

  .bp-grid{ grid-template-columns:1fr; gap:14px; }
  .bp-card{ display:grid; grid-template-columns:96px 1fr; gap:14px; text-align:left; align-items:start; }
  .bp-photo{ margin-bottom:0; }
  .bp-facts{ grid-column:1/-1; margin-top:4px; }
  .bp-money{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .mbox{ padding:11px 12px; }
  .mn{ font-size:17px; }
  .bp-acts .btn{ flex:1 1 auto; text-align:center; }
}
@media (max-width:420px){
  .bp-money{ grid-template-columns:1fr; }
  .jstep{ flex:1 1 50%; min-width:50%; }
}

/* ---- diary: a column per room ---- */
.room-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.room-col{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; }
.room-head{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px;
  display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.room-head span{ font-weight:400; font-size:11.5px; color:var(--muted); }
.room-col .slot{ border:0; border-bottom:1px solid var(--line); border-radius:0; width:100%;
  padding:11px 14px; box-shadow:none; position:relative; }
.room-col .slot:last-child{ border-bottom:0; }
.room-col .slot.free{ border-style:solid; }
.room-col .slot.taken.is-enquiry{ border-left:4px solid var(--gold); }

/* ---- orders: how long is left ---- */
.due{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.due.due-soon{ color:var(--owe); font-weight:700; }
.due.due-past{ color:var(--muted); font-style:italic; }

/* ---- breakdown: where she's up to, without stealing a column ---- */
.mini-prog{ display:inline-block; vertical-align:middle; width:52px; height:4px; border-radius:3px;
  background:var(--line); overflow:hidden; margin-left:8px; }
.mini-prog i{ display:block; height:100%; background:var(--accent); }
.bc-stage{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12.5px; color:var(--muted); }
.bd-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-f{ border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px;
  padding:8px 13px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.chip-f:hover{ border-color:var(--accent); color:var(--ink); }
.chip-f.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

@media (max-width:860px){
  .room-cols{ grid-template-columns:1fr; gap:12px; }
  .mini-prog{ width:40px; }
  .bd-chips{ width:100%; }
  .chip-f{ flex:1; text-align:center; }
}
@media print{ .bd-chips, .mini-prog{ display:none !important; } }

/* The one figure that shouldn't be readable over a bride's shoulder */
.lock-btn{
  display:inline-block; margin-left:7px; font-size:12px; line-height:1; cursor:pointer;
  opacity:.65; vertical-align:baseline;
}
.lock-btn:hover{ opacity:1; }
.lock-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
/* the date's "✓ Saturday, 23 May 2026" needs room, or it collides with the next label */
.date-confirm:not(:empty){ margin-top: 6px; }

/* ---- supplier call sheet: change the status while on the phone ---- */
.sup-status-cell{ white-space:nowrap; }
.sup-mark{ font-weight:800; letter-spacing:-1px; margin-right:5px; font-size:14px; }
.sup-mark.ordered{ color:var(--accent-dark); }
.sup-mark.received{ color:var(--paid); }
.sup-status{
  font: inherit; font-size:12.5px; font-weight:700; padding:4px 8px;
  border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer;
}
.sup-status:hover{ border-color:var(--accent); }
.sup-status.not_ordered{ color:var(--owe); border-color:#e8cfc6; }
.sup-status.ordered{ color:var(--accent-dark); }
.sup-status.received{ color:var(--paid); }
.sup-status:disabled{ opacity:.55; cursor:wait; }
.sup-when{ color:var(--muted); font-size:11.5px; margin-left:5px; }

/* on paper the dropdown is meaningless — print the words and the ticks */
@media print{
  .sup-status{ border:0; background:none; -webkit-appearance:none; appearance:none; padding:0; font-weight:700; }
  .sup-mark{ font-size:13px; }
}

/* a sample is already in the shop — the only question is where it is */
.sup-status.sample{ color:var(--info, #3f6f8f); border-color:#cfe0ea; }
.sup-mark.sample{ font-size:13px; }
.sample-box{
  border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:10px;
  padding:13px 15px; margin:12px 0; background:#fffdf7;
  display:flex; flex-direction:column; gap:7px;
}
.sample-box label{ font-weight:700; font-size:14px; }
.sample-box select{ max-width:260px; }
.pill-select.pill-sample{ background:#eef3f7; color:#3f6f8f; }
.recv-badge.recv-sample{ background:#eef3f7; color:#3f6f8f; }
/* who is with her, on the diary card */
.slot-note{ line-height:1.35; }

/* on a phone the box is the screen, so give it the whole width and thumb-sized times */
@media (max-width:860px){
  .modal{ padding:20px 18px; border-radius:14px; }
  .bk-slots{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); max-height:46vh; }
  .bk-slot{ padding:12px 10px; }
  .modal-actions .btn{ flex:1; text-align:center; }
}

/* ---- booking box: everything visible at once on a desktop ----
   Two columns for the short fields, the times across the full width. The whole
   point is to book while someone is on the phone — scrolling to find the times
   is the one thing it must not make her do. */
.modal-book{ width:min(940px,100%); }
.modal-book .bk-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:0 20px; align-items:start;
}
/* display:contents lets its fields join the two-column grid — but it also beats
   [hidden]'s display:none, which showed a bride the "new enquiry" fields and made her
   look like she needed a wedding date she already has. */
.modal-book #bk-new-fields:not([hidden]){ display:contents; }
.modal-book #bk-new-fields[hidden]{ display:none; }
.modal-book .bk-full{ grid-column:1/-1; }
.modal-book .bk-slots{
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  max-height:none; overflow:visible;
}
@media (max-width:860px){
  .modal-book{ width:100%; }
  .modal-book .bk-cols{ grid-template-columns:1fr; }
  .modal-book .bk-slots{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); max-height:44vh; overflow:auto; }
}
/* when the dress itself is due — a January bride can have a July delivery */
.due-arr{ font-size:11.5px; color:var(--accent-dark); margin-top:2px; white-space:nowrap; }
/* her wedding date, for judging when a fitting should sit */
.bk-wed{
  margin:0 0 14px; padding:9px 13px; border-radius:9px; background:#fbf6f2;
  border:1px solid var(--line); font-size:13.5px;
}
.bk-wed .due-soon{ color:var(--owe); font-weight:700; }
.bk-wed .due-past{ color:var(--muted); font-style:italic; }

/* [hidden] must always win. Any rule that sets display on an element we also hide with
   the attribute will silently reveal it — that has now happened twice. */
[hidden] { display: none !important; }
.bk-wed{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.bk-tel{ font-weight:700; text-decoration:none; color:var(--accent-dark); white-space:nowrap; }
.bk-tel:hover{ text-decoration:underline; }
/* who is taking the fitting, inside the fitting cell so no column is lost */
.fit-with{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-dark); margin-top:2px; }
@media print{ .fit-with{ color:#555; } }
.appt-line[data-edit-appt]{ cursor:pointer; }
.appt-line[data-edit-appt]:hover{ border-color:var(--accent); background:#fbf6f2; }
.fit-basis-note{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-left:10px; font-weight:600; }
/* the first job on this sheet is booking the fittings, so an unbooked one is loud */
.fit-tobook{ display:block; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--owe); margin-top:2px; }
@media print{ .fit-tobook{ color:#000; } }
.fit-warn{ font-size:13px; font-weight:700; color:var(--owe); }

/* The invoice logo in Settings. Sized explicitly: a shop logo is wide and short or
   tall and narrow, and an unconstrained <img> either fills the panel or vanishes. */
.logo-preview {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card, #fff);
}
.logo-preview img {
  max-width: 200px; max-height: 110px; width: auto; height: auto;
  object-fit: contain;
}
.logo-actions { display: flex; gap: 8px; }

/* The invoice logo must survive printing. Browsers strip images they treat as
   decorative background and some scale them down; force it to print at its size. */
@media print {
  .inv-logo {
    display: block !important;
    max-height: 64px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .inv-head { display: flex !important; align-items: center; gap: 14px; }
}