/* ============================================================
   HnK Party ERMS — warm ivory / ink / raspberry event-studio theme
   ============================================================ */
:root {
  --ivory: #f6f1e7;
  --panel: #fffdf8;
  --ink: #221b15;
  /* Darkened from #5c5348 so secondary text clears WCAG AA (4.5:1) on ivory */
  --ink-soft: #554c41;
  --line: #e6dcc9;
  --accent: #b42a55;
  --accent-deep: #8e1f42;
  --gold: #b9862f;
  --green: #3e7d4f;
  --blue: #2f6bb0;
  --amber: #b97f16;
  --red: #b3372b;
  --grey: #7a736a;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(34, 27, 21, .07), 0 8px 24px -18px rgba(34, 27, 21, .35);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 15px/1.55 'Karla', 'Segoe UI', system-ui, sans-serif;
}
h1, h2, h3, .stat-num, .brand-mark {
  font-family: 'Fraunces', Georgia, serif; letter-spacing: -.01em;
}
h1 { font-size: 28px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 0 0 10px; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; flex: 0 0 220px; background: #241c16; color: #efe6d7;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { padding: 18px 20px 14px; border-bottom: 1px solid #3a3028; }
.brand-mark { font-size: 28px; font-weight: 700; color: #fff; }
.brand-mark span { color: var(--accent); font-style: italic; }
.brand-sub { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #a3968a; margin-top: 2px; }
.sidebar nav {
  flex: 1; padding: 10px 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #4a3f35 transparent;
}
.sidebar nav::-webkit-scrollbar { width: 5px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: #4a3f35; border-radius: 99px; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: #5c5044; }
.sidebar nav a {
  display: block; padding: 6px 20px; color: #d9cec0; font-weight: 500; font-size: 14px;
  border-left: 3px solid transparent; line-height: 1.5;
}
.sidebar nav a:hover { color: #fff; background: #2e251e; text-decoration: none; }
.sidebar nav a.active { color: #fff; border-left-color: var(--accent); background: #2e251e; }
.sidebar-foot { padding: 12px 20px; border-top: 1px solid #3a3028; font-size: 13px; }
.who { color: #fff; }
.role-chip {
  display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px;
  background: var(--accent); color: #fff; border-radius: 99px;
}
.logout { color: #a3968a; font-size: 12px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 26px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 16px; cursor: pointer; }
.search { flex: 1; max-width: 460px; }
.search input {
  width: 100%; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--ivory); font: inherit;
}
.today { margin-left: auto; color: var(--ink-soft); font-size: 13px; }
.content { padding: 26px; max-width: 1200px; width: 100%; }

/* ---------- Cards / layout ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-soft); font-size: 13px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.stat { text-align: left; }
.stat-num { font-size: 34px; font-weight: 600; color: var(--accent-deep); }
.stat-label { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.stat.warn .stat-num { color: var(--red); }

/* ---------- Tables ---------- */
table.list { width: 100%; border-collapse: collapse; }
.list th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); padding: 8px 10px; border-bottom: 2px solid var(--line);
}
.list td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.list tr:hover td { background: #fbf7ee; }
.list td.num, .list th.num { text-align: right; white-space: nowrap; }
.muted { color: var(--ink-soft); font-size: 13px; }
.small { font-size: 12px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700;
  color: #fff; white-space: nowrap;
}
.badge-green { background: var(--green); } .badge-blue { background: var(--blue); }
.badge-amber { background: var(--amber); } .badge-red { background: var(--red); }
.badge-grey { background: var(--grey); }
.pill {
  display: inline-block; padding: 1px 9px; border: 1px solid var(--line); border-radius: 99px;
  font-size: 12px; background: var(--ivory); color: var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.btn:hover { background: var(--accent-deep); text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; color: var(--accent-deep); border-color: var(--accent); }
.btn-ghost:hover { background: #f7e7ec; }
.btn-plain { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn-plain:hover { background: var(--ivory); color: var(--ink); }
.btn-sm { padding: 4px 10px; font-size: 13px; border-radius: 7px; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #8f2b21; }

/* ---------- Forms ---------- */
form.stack label, .field label {
  display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); margin: 12px 0 4px;
}
input[type=text], input[type=search], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: inherit; color: var(--ink);
}
textarea { min-height: 70px; resize: vertical; }
/* Leave room for the native dropdown arrow so long option text isn't clipped */
select { padding-right: 34px; text-overflow: ellipsis; }
.wide-select { width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #e6b3c4; border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
@media (max-width: 800px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }

/* ---------- Spacing & layout utilities ----------
   These replace ~250 repeated inline style="" attributes. The pixel values are
   unchanged — the point is that each one is now declared once here instead of
   being retyped in the markup, so the app's spacing can be adjusted in a single
   place and can't drift page by page. */
.m-0        { margin: 0 !important; }
.mt-0       { margin-top: 0 !important; }
.mt-6       { margin-top: 6px; }
.mt-8       { margin-top: 8px; }
.mt-10      { margin-top: 10px; }
.mt-14      { margin-top: 14px; }
.mt-16      { margin-top: 16px; }
.mt-18      { margin-top: 18px; }
.mb-12      { margin-bottom: 12px; }
.mb-18      { margin-bottom: 18px; }
.d-inline   { display: inline; }
.w-auto     { width: auto; }
.w-full     { width: 100%; }
.ta-c       { text-align: center; }
.ta-r       { text-align: right; }
.txt-green  { color: var(--green); }
.txt-red    { color: var(--red); }

/* A field whose value can't be changed here. Reads as a stated fact rather
   than a greyed-out input the user might keep poking at. */
.static-value {
  display: flex; align-items: center; gap: 8px; min-height: 39px;
  padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--ivory); color: var(--ink); font: inherit;
}
.static-value .lock { color: var(--ink-soft); font-size: 13px; }

/* Short, plain-English help under a field. Keeps labels to one line, which is
   what stops the inputs in a row from sitting at different heights.
   Deliberately the SAME size as .muted.small — the app grew two habits for
   secondary text and two sizes of it looked like a mistake rather than a
   distinction. .hint adds only the spacing a form field needs. */
.hint { font-size: 12px; line-height: 1.45; color: var(--ink-soft);
        text-transform: none; letter-spacing: 0; margin-top: 4px; }

/* Belt and braces: if a label DOES wrap, share the row's label/control/hint
   heights across every field so the inputs still line up. Ignored by browsers
   without subgrid — they fall back to the old behaviour. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 801px) {
    /* Four rows, not three: label, control, hint — plus one spare, because some
       fields grow a second note at runtime (the lead-time guard adds one under
       the event date). With only three, that fourth child landed in an implicit
       row and printed on top of the hint. Empty rows collapse, so allowing for
       it costs nothing. */
    .form-row, .form-row-3 { grid-template-rows: auto auto auto auto; }
    .form-row > .field, .form-row-3 > .field {
      display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start;
    }
    /* A .field holding only a note has nothing to sit in the label row — let it
       flow normally rather than stretching the shared label row to its height. */
    .form-row > .field:not(:has(label)), .form-row-3 > .field:not(:has(label)) {
      display: block; grid-row: span 4;
    }
  }
}
.actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* An action bar that closes a form shouldn't butt up against the next card. */
form > .actions:last-child, form .actions.actions-end { margin-bottom: 26px; }

/* ---------- Flash ---------- */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.flash-ok { background: #e4efe4; border: 1px solid #b9d4bc; color: #2c5637; }
.flash-err { background: #f7e3e0; border: 1px solid #e0b3ad; color: #7c281f; }
.flash-warn { background: #fdf3df; border: 1px solid #e3cf9d; color: #7a5a10; }

/* ---------- Availability ---------- */
.avail-ok { color: var(--green); font-weight: 700; }
.avail-low { color: var(--amber); font-weight: 700; }
.avail-none { color: var(--red); font-weight: 700; }
.prop-picker td { padding: 6px 10px; }
.prop-picker input[type=number] { width: 76px; }
.prop-picker.locked { opacity: .45; }
.prop-picker.locked input[type=number] { background: var(--ivory); cursor: not-allowed; }

/* ---------- Booking form: date-first steps ---------- */
.step-tag {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; align-items: center; justify-content: center;
  font: 700 13px/1 'Karla', sans-serif; margin-right: 8px; vertical-align: 2px;
}
.picker-note {
  background: var(--ivory); border: 1.5px dashed var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; font-weight: 500;
}
.amber-note { color: var(--amber); font-weight: 700; margin-top: 4px; }
.avail-note-pending { color: var(--amber); font-weight: 700; font-size: 11.5px; margin-top: 2px; }

/* ---------- Notifications ---------- */
.notif-bell { position: relative; font-size: 18px; line-height: 1; }
.notif-bell:hover { text-decoration: none; }
.notif-badge {
  position: absolute; top: -7px; right: -11px; background: var(--red); color: #fff;
  border-radius: 99px; font-size: 10.5px; font-weight: 700; padding: 1px 5px;
  min-width: 16px; text-align: center; line-height: 1.4;
}
.notif-row { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.notif-row.unseen { background: #fbf3f6; margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.notif-when { color: var(--ink-soft); font-size: 12px; white-space: nowrap; margin-left: auto; }
.cat-row td {
  background: var(--ivory); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}

/* ---------- Calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-title { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { padding: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.cal td { border: 1px solid var(--line); vertical-align: top; height: 106px; padding: 4px 5px; background: var(--panel); }
.cal td.dim { background: #efe9dc; }
.cal td.today-cell { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal .dnum { font-size: 12px; color: var(--ink-soft); }
.chip {
  display: block; margin: 3px 0 0; padding: 2px 7px; border-radius: 6px; font-size: 11.5px;
  color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip:hover { text-decoration: none; opacity: .88; color: #fff; }
.chip.hold { opacity: .4; }
.cal.week td { height: 340px; vertical-align: top; }
.cal.week th { text-align: left; padding: 6px 8px; }
.cal.week th .wd-num { font-family: 'Fraunces', serif; font-size: 15px; color: var(--ink); margin-left: 2px; }
.cal.week .chip { white-space: normal; line-height: 1.35; margin-bottom: 3px; }
.cal th.today-cell { outline: none; color: var(--accent-deep); }
.view-toggle { display: inline-flex; gap: 4px; margin-left: 10px; }
@media (max-width: 760px) { .cal.week td { height: auto; min-height: 90px; } }
.chip-green { background: var(--green); } .chip-blue { background: var(--blue); }
.chip-amber { background: var(--amber); } .chip-grey { background: var(--grey); }
.chip-red { background: var(--red); }

/* ---------- Timeline (prop availability) ---------- */
.tl { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.tl-day { border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; text-align: center; background: var(--panel); }
.tl-day.full { background: #f7e3e0; border-color: #e0b3ad; }
.tl-day.part { background: #f9efdb; border-color: #e3cf9d; }
.tl-day.free { background: #e9f2e9; border-color: #bcd6bf; }
.tl-day .d { font-size: 11px; color: var(--ink-soft); }
.tl-day .n { font-weight: 700; font-size: 14px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #241c16; }
.login-card { width: 360px; background: var(--panel); border-radius: 14px; padding: 34px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.login-card .brand-mark { color: var(--ink); font-size: 40px; }
.login-card .brand-mark span { color: var(--accent); font-style: italic; }

/* ---------- QR labels ---------- */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.qr-card { border: 1.5px dashed var(--line); border-radius: 10px; padding: 14px; text-align: center; background: #fff; }
.qr-card .qr-box { display: flex; justify-content: center; margin-bottom: 8px; }
.qr-card .nm { font-weight: 700; font-size: 13px; }
.qr-card .cd { font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; }

/* ---------- Print ---------- */
.print-only { display: none; }
@media print {
  .no-print, .sidebar, .topbar { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; font-size: 13px; }
  .content { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; padding: 0; }
  a { color: #000; }
}

/* ---------- Design library & booking wizard (Phase 9) ---------- */
/* Designs are the shop window — give each card room to breathe and show its
   photo properly. ~3 per row on a laptop, 4 on a wide screen, 1 on a phone. */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
@media (min-width: 1600px) { .design-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
.design-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.design-card:hover {
  border-color: #e6b3c4; box-shadow: 0 4px 8px rgba(34,27,21,.08), 0 14px 30px -18px rgba(34,27,21,.35);
  transform: translateY(-2px); text-decoration: none;
}
.design-card.selected { border: 2px solid var(--accent); box-shadow: 0 0 0 3px #f3d7e1; }
.design-cover { height: 200px; background: linear-gradient(135deg, #f3d7e1, #efe4f3 55%, #e7ecf5); position: relative; }
/* Keep the card tidy: tags on one line, meta text never orphaning a word */
.design-meta { gap: 5px; }
.design-meta .pill { white-space: nowrap; }
.design-body .muted.small { text-wrap: pretty; }
.design-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.design-cover .cover-code {
  position: absolute; left: 8px; bottom: 8px; font-family: 'Fraunces', serif; font-weight: 700;
  color: #fffdf8; font-size: 11.5px; letter-spacing: .07em;
  background: rgba(34,27,21,.55); padding: 2px 9px; border-radius: 99px;
}
.design-cover .cover-code.centered {
  left: 50%; top: 50%; bottom: auto; transform: translate(-50%,-50%);
  background: none; color: rgba(34,27,21,.45); font-size: 26px; padding: 0;
}
.design-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.design-body .nm { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16.5px; }
.design-body .pr { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; color: var(--accent-deep); }
.design-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.reco-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; box-shadow: var(--shadow);
}
.design-avail { font-size: 12px; font-weight: 700; }

/* colour swatch pickers */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.swatch span {
  display: flex; align-items: center; gap: 6px; border: 2px solid var(--line); border-radius: 8px;
  padding: 5px 8px; font-size: 12px; background: var(--panel); cursor: pointer; line-height: 1.2;
}
.swatch i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: 0 0 16px; }
.swatch input:checked + span { border-color: var(--accent); background: #fbf3f6; font-weight: 700; }

/* wizard steps */
.wiz-steps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.wiz-steps .ws {
  font-size: 12px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-soft); font-weight: 700;
}
.wiz-steps .ws.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wiz-steps .ws.done { background: #f3d7e1; border-color: #e6b3c4; color: var(--accent-deep); }
.wiz-step { display: none; }
.wiz-step.on { display: block; }
.wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

/* job brief */
.brief-check { list-style: none; padding: 0; margin: 0; }
.brief-check li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.brief-check .box {
  width: 15px; height: 15px; border: 2px solid var(--ink-soft); border-radius: 3px; flex: 0 0 15px;
  position: relative; top: 2px;
}
.internal-box { background: #fdf3df; border: 1.5px dashed var(--amber); border-radius: 10px; padding: 12px 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 40; left: -230px; transition: left .2s; height: 100vh; top: 0; }
  body.nav-open .sidebar { left: 0; }
  .nav-toggle { display: block; }
  .content { padding: 16px; }
  .cal td { height: 74px; }
}

/* Mobile browsers shrink/grow their toolbars, so 100vh is taller than what you
   can actually see — that made the footer feel unreachable. dvh tracks the real
   visible height. */
@supports (height: 100dvh) {
  .shell { min-height: 100dvh; }
  @media (max-width: 900px) { .sidebar { height: 100dvh; } }
  .login-wrap { min-height: 100dvh; }
}

/* ---------- Guarantee the end of the page is always reachable ----------
   On phones the browser's own toolbars (and any on-screen keyboard) sit over
   the bottom of the viewport, so the last rows/footer can be clipped even when
   the page reports that it has scrolled to the end. A generous safe area below
   the content means there is always something to scroll into, so real content
   is never trapped under the browser chrome. */
@media (max-width: 900px) {
  /* Some mobile browsers report a taller viewport than they actually paint,
     which strands the last couple of hundred pixels of a long page. A generous
     buffer below the footer means real content is always scrollable into view. */
  .main { padding-bottom: 220px; }
  .app-foot { margin-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
html { scroll-padding-bottom: 140px; }

/* ============================================================
   Phase 12 — UI polish + mobile v2
   ============================================================ */

/* --- Accessibility: skip link + visible keyboard focus --- */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px;
  font-weight: 700; transition: top .15s;
}
.skip-link:focus { top: 8px; text-decoration: none; outline: 2px solid #fff; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible,
.notif-bell:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
/* Slightly larger, higher-contrast micro-labels (BUG-018) */
.list th { font-size: 12px; }
form.stack label, .field label { font-size: 12px; color: var(--ink-soft); }

/* --- Tables that scroll instead of overflowing the page --- */
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table.list { min-width: 560px; }

/* Grid/flex children default to min-width:auto and refuse to shrink below their
   content, which pushes cards wider than the screen and breaks .table-wrap's
   own scrolling. Allowing them to shrink keeps every page inside the viewport. */
.grid > *, .form-row > *, .form-row-3 > *, .page-head > *, .main, .shell > * { min-width: 0; }
.card, .content, .testimonial-strip > * { max-width: 100%; }
.card { overflow-wrap: anywhere; }

/* Long unbroken strings (emails, URLs, tokens) must not stretch the layout */
.copy-link, .app-foot, .muted, .small { overflow-wrap: anywhere; }

/* --- Off-canvas nav backdrop (tap outside to close) --- */
.nav-backdrop { display: none; }
@media (max-width: 900px) {
  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(34,27,21,.42); border: 0;
  }
  .topbar { position: sticky; top: 0; z-index: 30; }
  .nav-toggle { min-width: 44px; min-height: 40px; }
  /* Comfortable tap targets in the nav */
  .sidebar nav a { padding: 11px 20px; font-size: 15px; }
  .sidebar-foot { padding: 14px 20px; }
}

/* --- Fixed-width widgets that can't shrink: let them scroll, not stretch --- */
.mini-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mini-chart > * { flex-shrink: 0; }
@media (max-width: 640px) {
  /* Filter bars (calendar, lists): stack full-width instead of overflowing */
  .cal-head { flex-wrap: wrap; }
  .cal-head form { margin-left: 0 !important; width: 100%; }
  .cal-head select, .cal-head input { width: 100% !important; max-width: 100%; }
  .view-toggle { margin-left: 0; }
}

/* --- Row action links (Edit · Reset link · ✕) stay tidy on small screens --- */
.list td form { display: inline-block; }
@media (max-width: 640px) {
  .list td .linkbtn, .list td > a { display: inline-block; padding: 3px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --- Small-screen topbar / touch targets --- */
@media (max-width: 640px) {
  .today { display: none; }
  .topbar { gap: 8px; padding: 10px 14px; }
  .search input { padding: 9px 14px; }
  .btn { padding: 10px 16px; }
  .btn-sm { padding: 7px 12px; font-size: 13px; }
  .notif-bell { padding: 4px; }
  h1 { font-size: 24px; }
  .page-head { gap: 8px; }
  .stat-num { font-size: 28px; }
}

/* Design grid: single column on the narrowest phones */
@media (max-width: 420px) {
  .design-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase 12 — Customer reviews / testimonials
   ============================================================ */
.stars { color: var(--gold); letter-spacing: 1px; white-space: nowrap; font-size: 15px; }
.stars .star-empty { color: #e3d8c2; }
.rating-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700;
  color: var(--ink); background: #fbf3f6; border: 1px solid #eccdd8;
  padding: 1px 8px; border-radius: 99px;
}
.rating-badge .stars { font-size: 12px; }
.rating-badge .rc { color: var(--ink-soft); font-weight: 500; }
.design-cover .rating-badge {
  position: absolute; left: 8px; top: 8px; background: rgba(255,253,248,.92); box-shadow: var(--shadow);
}

.review-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.review-card .rv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.review-card .rv-name { font-weight: 700; }
.review-card .rv-when { color: var(--ink-soft); font-size: 12px; margin-left: auto; }
.review-card .rv-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; margin: 6px 0 2px; }
.review-card .rv-body { color: var(--ink); }
.review-card .rv-design { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.review-card.is-featured { border-color: #e6c68a; box-shadow: 0 0 0 2px #f7ecd4; }
.review-card .feat-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--gold); padding: 1px 8px; border-radius: 99px;
}

/* Interactive star picker (radio buttons, no JS required) */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; font-size: 34px; line-height: 1; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { color: #e3d8c2; cursor: pointer; transition: color .1s; padding: 0 1px; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--gold); }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.testimonial-strip { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .testimonial-strip { grid-template-columns: 1fr; } }

/* ---------- Reports: CSS bar charts (Phase 13) ---------- */
.rpt-row { display: grid; grid-template-columns: 150px 1fr 116px; gap: 10px; align-items: center; margin: 5px 0; }
.rpt-label { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-track { background: var(--ivory); border: 1px solid var(--line); border-radius: 99px; height: 18px; overflow: hidden; }
.rpt-fill { height: 100%; background: var(--accent); border-radius: 99px; min-width: 3px; transition: width .3s; }
.rpt-fill.rpt-green { background: var(--green); } .rpt-fill.rpt-blue { background: var(--blue); }
.rpt-fill.rpt-amber { background: var(--amber); } .rpt-fill.rpt-red { background: var(--red); }
.rpt-fill.rpt-grey { background: var(--grey); } .rpt-fill.rpt-gold { background: var(--gold); }
.rpt-val { text-align: right; font-weight: 700; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
@media (max-width: 560px) { .rpt-row { grid-template-columns: 110px 1fr 90px; } }

/* ---------- Record-a-payment box: every label on the same baseline ---------- */
.pay-box { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pay-h { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.pay-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.pay-form .field { min-width: 0; }
.pay-form .field label { margin-top: 0; }          /* kill the stray top margin that skewed rows */
.pay-form .pay-go .btn { width: 100%; white-space: nowrap; }
/* the auto-added "* Required field" key must span the row, not sit in a cell */
.pay-form .req-key, .exp-form .req-key { grid-column: 1 / -1; margin: 2px 0 0; }

.exp-form { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr auto; gap: 12px; align-items: end; }
.exp-form .field { min-width: 0; }
.exp-form .field label { margin-top: 0; }
@media (max-width: 1000px) { .exp-form { grid-template-columns: 1fr 1fr; } .exp-form .pay-go { grid-column: 1 / -1; } }
@media (max-width: 520px)  { .exp-form { grid-template-columns: 1fr; } }

.bond-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px dashed var(--line); }
.bond-form label { margin: 0; white-space: nowrap; }
.bond-form select { width: auto; min-width: 130px; }
@media (max-width: 900px) {
  .pay-form { grid-template-columns: 1fr 1fr; }
  .pay-form .pay-go { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .pay-form { grid-template-columns: 1fr; } }

/* ---------- Damage reports: a card per report, not a squeezed table ---------- */
.dmg-item { border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--panel); }
.dmg-item:last-child { margin-bottom: 0; }
.dmg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmg-name { font-size: 15px; }
.dmg-when { margin-left: auto; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.dmg-what { margin-top: 6px; font-size: 13.5px; }
.dmg-cost { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; margin-left: 6px; }
.dmg-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dmg-acts form { display: inline-flex; }
@media (max-width: 640px) { .dmg-when { margin-left: 0; width: 100%; } }

/* ---------- Graceful placeholder for a missing photo (UI-08) ---------- */
.img-missing {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, #f3d7e1, #efe4f3 55%, #e7ecf5);
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-soft); font-size: 11.5px; letter-spacing: .04em; padding: 6px;
}

/* ---------- Empty-state guidance (UI: tell people what to do next) ---------- */
.empty-state { text-align: center; padding: 22px 16px; color: var(--ink-soft); }
.empty-state b { display: block; color: var(--ink); font-family: 'Fraunces', serif; font-size: 16px; margin-bottom: 4px; }
.empty-state .btn { margin-top: 10px; }

/* ---------- Required-field marker (Phase 13) ---------- */
.req { color: var(--red); font-weight: 700; margin-left: 3px; }
.req-key { color: var(--ink-soft); font-size: 12px; }
.req-key .req { margin-left: 0; }

/* ---------- Pagination (Phase 13) ---------- */
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 14px; }
.pager .pg, .pager .pg-cur { display: inline-block; min-width: 32px; text-align: center; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 700; }
.pager .pg { color: var(--accent-deep); background: var(--panel); }
.pager .pg:hover { background: #f7e7ec; text-decoration: none; }
.pager .pg-cur { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager .pg-dots { padding: 0 4px; color: var(--ink-soft); }
.pager .pg-info { margin-left: auto; color: var(--ink-soft); font-size: 12px; }

/* ---------- App footer (Phase 13) ---------- */
.app-foot { margin-top: auto; padding: 16px 26px; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 12.5px; text-align: center; background: var(--panel); }
.app-foot a { color: var(--ink-soft); }
.app-foot a:hover { color: var(--accent-deep); }

/* ---------- Link-style button + copyable link (Phase 13) ---------- */
.linkbtn { background: none; border: 0; color: var(--accent-deep); font: inherit; cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--red); }
.copy-link { width: 100%; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: 13px/1.4 'Karla', monospace; color: var(--ink); }

/* ---------- Delivery run-sheet (Phase 12) ---------- */
.run-stop { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.run-stop:last-child { border-bottom: 0; }
.run-seq {
  flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.run-body { flex: 1; min-width: 0; }
.run-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run-time { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; }
.run-bk { color: var(--ink-soft); font-weight: 700; font-size: 13px; }
.run-cust { margin-top: 4px; }
.run-addr { margin-top: 3px; }
.run-access {
  margin-top: 6px; background: #fdf3df; border: 1px solid #e3cf9d; border-radius: 8px;
  padding: 6px 10px; font-size: 13px; color: #7a5a10;
}
.run-load { margin-top: 6px; font-size: 13.5px; }
.run-load-h { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--ink-soft); }
@media print {
  .run-seq { border: 1px solid #000; background: #fff; color: #000; }
  .run-stop { break-inside: avoid; }
  .run-access { border-color: #999; }
}

/* Left column of a 2-up form grid: stacks its cards with the same gap the
   grid uses, so Booking details / Team / Money sit under each other while
   the Props table keeps the full-height column on the right. */
.col-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---- Info tips ------------------------------------------------------
   A small "!" beside a label that reveals its helper text on click, so a
   form reads clean but nothing is lost. Deliberately NOT used for rules
   that block saving — a constraint you only discover after a failed save
   is worse than a slightly busier form.
   These sit INSIDE a <label>, which is uppercase, letter-spaced and has a
   tight line-height, so every inherited text property is reset explicitly. */
.tip-wrap { position: relative; display: inline-block; vertical-align: middle; line-height: 0; }
.tip-btn {
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--ink-soft); background: transparent; color: var(--ink-soft);
  font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; line-height: 1;
  text-transform: none; letter-spacing: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.tip-btn:hover, .tip-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.tip-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tip-pop {
  position: absolute; z-index: 60; top: 24px; left: -6px;
  width: 290px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; box-shadow: var(--shadow);
  font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
  font-size: 12px; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: 0; color: var(--ink-soft);
  text-align: left; white-space: normal; display: block;
}
.tip-pop b { color: var(--ink); font-weight: 700; }
.tip-pop[hidden] { display: none; }
@media (max-width: 700px) { .tip-pop { left: auto; right: -6px; width: min(250px, 72vw); } }

/* Tick-boxes inside one form field. Wrapping them keeps the field's subgrid
   seeing a single child, so a checkbox can't fall into the hint row and pick
   up its height as blank space. They sit on ONE line and wrap only if narrow.
   The selector has to out-specify "form.stack label" (0,1,2), which sets the
   uppercase label style — plain ".check-list label" (0,1,1) loses to it. */
.check-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; align-self: center; }
form.stack .check-list label, .field .check-list label, .check-list label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink);
  white-space: nowrap;
}
.check-list input[type=checkbox] { width: auto; margin: 0; flex: none; }

/* A hint that carries a small button — keep them on one line, wrapping only
   if the column is genuinely too narrow. */
.hint-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

.txt-amber { color: var(--amber); }