/* TILL BACK OFFICE + PRINTER STATION (V24) */

.ta-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.ta-tabs::-webkit-scrollbar { display: none; }
.ta-tab {
  /* 44, not 40: this strip is how the whole reports page is navigated. Fixed
     here rather than in styles.css because this file loads after it and would
     win the tie on source order. */
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border, #2a2f2f); background: transparent;
  color: var(--text-muted, #8b9090); font: 600 13px/1 Inter, sans-serif; cursor: pointer;
}
.ta-tab.active { background: var(--brand-red, #8f1d2b); border-color: var(--brand-red, #8f1d2b); color: #fff; }

.ta-range { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; }
.ta-range label { display: grid; gap: 4px; font-size: 11.5px; color: var(--text-muted, #8b9090); }
.ta-range input {
  /* 44, per the app-wide floor. Was 42 — and my first attempt at this inserted
     a 44 ABOVE the existing 42 in the same block, where the later declaration
     simply won. Two min-heights in one rule is not an override, it is a typo
     with a longer life. */
  min-height: 44px; padding: 0 10px; border-radius: var(--t1-r-ctl, 11px);
  border: 1px solid var(--border, #2a2f2f); background: var(--bg, #0b0c0c);
  color: var(--text, #e9e6e1); font-size: 16px; -webkit-appearance: none;
}
.ta-quick {
  /* 44, per the app-wide floor. 42 was chosen to match the old .ta-tab height
     and inherited its mistake. */
  min-height: 44px; padding: 0 12px; border-radius: var(--t1-r-ctl, 11px);
  border: 1px solid var(--border, #2a2f2f); background: transparent;
  color: var(--text-muted, #8b9090); font-size: 12.5px; cursor: pointer;
}
.ta-quick:active { background: rgba(255,255,255,.06); }
/* V27.9 — the cash-up feed reads ONE date. On that tab the strip drops the To
   field and the week/month quicks (they silently changed nothing, or worse,
   MOVED the shown date to a Monday/1st while the label promised a range). */
.ta-range.single-date .ta-r-to,
.ta-range.single-date [data-quick="week"],
.ta-range.single-date [data-quick="month"] { display: none; }

.ta-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ta-kpi {
  display: grid; gap: 3px; padding: 13px 14px; border-radius: var(--t1-r-card, 16px);
  background: var(--t1-surface, rgba(255,255,255,.038)); border: 1px solid var(--t1-hairline, #262a2a);
}
/* Colour as a left-edge accent, never a full ring (the treatment removed from
   CRM and Home twice) — matches .attn-warn below. */
.ta-kpi.warn { border-left: 3px solid var(--gold, #C9A961); }
.ta-kpi-l { font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #8b9090); }
.ta-kpi-v { font: 700 22px/1.1 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.ta-kpi-s { font-size: 11px; color: var(--text-muted, #8b9090); }

.ta-h3 { margin: 22px 0 10px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #8b9090); }
.ta-blurb { font-size: 12.5px; line-height: 1.55; color: var(--text-muted, #8b9090); margin: 0 0 14px; }
.ta-blurb code { background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.ta-empty { color: var(--text-muted, #8b9090); padding: 26px 6px; text-align: center; font-size: 13.5px; }

.ta-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--t1-r-row, 12px); border: 1px solid var(--t1-hairline, #262a2a); }
.ta-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.ta-table th, .ta-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border, #1f2323); }
.ta-table th { font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #8b9090); background: var(--t1-surface-2, #16191a); }
.ta-table td.num, .ta-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ta-table td.strong { font-weight: 700; }
.ta-table td.bad { color: var(--danger, #d9564c); font-weight: 600; }
.ta-table tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }

.ta-pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  background: rgba(255,255,255,.07); color: var(--text-muted, #8b9090); text-transform: capitalize;
}
.ta-pill.void, .ta-pill.tab_cancelled { background: rgba(179,38,30,.18); color: #e08c85; }
.ta-pill.discount, .ta-pill.price_override { background: rgba(201,169,97,.16); color: var(--gold, #C9A961); }
.ta-pill.service_removed, .ta-pill.close_unbalanced { background: rgba(120,120,200,.16); color: #a9b0e8; }

/* catalogue editor */
.ta-search {
  /* V28.1 — full-width fields sit on the app's 48px family (was 46, one of
     three input heights on this page — review till-admin #7). */
  width: 100%; min-height: 48px; margin-bottom: 14px; padding: 0 13px; border-radius: var(--t1-r-ctl, 11px);
  border: 1px solid var(--border, #2a2f2f); background: var(--bg, #0b0c0c);
  color: var(--text, #e9e6e1); font-size: 16px;
}
.ta-cat { margin-bottom: 18px; }
.ta-cat h4 {
  margin: 0 0 8px; font: 600 11px/1 Inter, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted, #8b9090);
}
.ta-cat h4 em { font-style: normal; opacity: .6; }
.ta-item {
  /* Four tracks: name | price | 86-toggle | remove ✕. Three tracks wrapped the
     remove button to its own full-width grid row under every item (measured
     944×36px). Padding 9px 12px, no underline: styles.css V25 gives .ta-item a
     filled 12px-radius row surface, so text was flush to the rounded edge and
     the hairline drew a list-row rule across a card surface. */
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center;
  padding: 9px 12px;
}
.ta-item.off { opacity: .58; }
.ta-item-main { min-width: 0; }
.ta-item-name { display: block; font-size: 13.5px; font-weight: 500; }
.ta-unconf {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gold, #C9A961);
  border: 1px solid var(--gold, #C9A961); border-radius: 999px; padding: 1px 6px; margin-left: 6px;
}
.ta-variants { display: block; font-size: 11px; color: var(--text-muted, #8b9090); margin-top: 2px; }
.ta-price {
  /* V28.1 — 44px floor + token radius (was 40px/9px; the width stays). */
  width: 90px; min-height: 44px; padding: 0 9px; border-radius: var(--t1-r-ctl, 11px); text-align: right;
  border: 1px solid var(--border, #2a2f2f); background: var(--bg, #0b0c0c);
  color: var(--text, #e9e6e1); font-size: 16px; font-variant-numeric: tabular-nums;
}
.ta-price-fixed { width: 90px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted, #8b9090); font-size: 13px; }
.ta-avail {
  /* V28.1 — matches the 44px .ta-price it shares every catalogue row with. */
  min-height: 44px; min-width: 96px; padding: 0 12px; border-radius: var(--t1-r-ctl, 11px); cursor: pointer;
  border: 1px solid var(--danger, #b3261e); background: transparent;
  color: var(--danger, #d9564c); font: 600 12px/1 Inter, sans-serif;
}
.ta-avail.on { border-color: #2f6b4f; color: #6fbf8f; }

.ta-form { display: grid; gap: 12px; max-width: 460px; margin-bottom: 8px; }
.ta-form label { display: grid; gap: 5px; }
.ta-form label span { font-size: 11.5px; color: var(--text-muted, #8b9090); }
.ta-form input {
  /* V28.1 — 48px full-width field family (was 46). */
  min-height: 48px; padding: 0 12px; border-radius: var(--t1-r-ctl, 11px);
  border: 1px solid var(--border, #2a2f2f); background: var(--bg, #0b0c0c);
  color: var(--text, #e9e6e1); font-size: 16px;
}
.ta-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ta-form-actions .btn { min-height: 44px; }
.ta-steps { margin: 0 0 16px; padding-left: 20px; }
.ta-steps li { font-size: 13px; line-height: 1.6; margin-bottom: 9px; color: var(--text, #e9e6e1); }
.ta-steps strong { color: var(--gold, #C9A961); }

.ta-toast {
  position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 1600; max-width: min(92vw, 460px);
  padding: 11px 16px; border-radius: 11px; background: #1c2320; border: 1px solid #2f6b4f;
  color: #dff3e6; font: 500 13px/1.4 Inter, sans-serif; text-align: center;
}
.ta-toast.bad { background: #2a1a1a; border-color: #7a2b25; color: #f6d9d6; }
.ta-toast[hidden] { display: none; }
/* Desktop: 78px clears the mobile bottom nav, which does not exist here. */
@media (min-width: 769px) and (min-height: 641px), (min-width: 769px) and (hover: hover) {
  .ta-toast { bottom: 28px; }
}

/* M4 setup guide link (V28.7) — Printer tab row pointing at /m4-setup.html,
   the provisioning guide for the venue Mac. House card treatment: hairline
   surface, colour as a left-edge accent, never a full ring. */
.ta-m4-link {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin: 0 0 18px;
  border: 1px solid var(--t1-hairline-str, #2a2f2f);
  border-left: 3px solid var(--gold, #C9A961);
  border-radius: var(--t1-r-card, 16px);
  background: var(--t1-surface, rgba(255,255,255,.038));
  text-decoration: none; color: var(--text, #e9e6e1);
}
.ta-m4-link:active { background: rgba(255,255,255,.06); }
.ta-m4-ic {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(201,169,97,.12); color: var(--gold, #C9A961);
}
.ta-m4-ic svg { width: 20px; height: 20px; }
.ta-m4-main { display: grid; gap: 3px; min-width: 0; }
.ta-m4-main strong { font: 600 14px/1.2 Inter, sans-serif; color: var(--gold, #C9A961); }
.ta-m4-main span { font-size: 12px; line-height: 1.5; color: var(--text-muted, #8b9090); }

/* ------------------------------------------------------- printer station */
.tps-body { margin: 0; background: var(--bg, #0b0c0c); }
.tps { min-height: 100vh; padding: calc(env(safe-area-inset-top) + 16px) 16px 20px; }
.tps-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.tps-head h1 { margin: 0; font: 700 22px/1.2 'Space Grotesk', sans-serif; }
.tps-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted, #8b9090); }
.tps-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tps-head-actions .btn { min-height: 44px; }
.tps-state {
  display: flex; align-items: center; gap: 10px; margin: 20px 0;
  padding: 16px; border-radius: var(--t1-r-card, 16px);
  background: var(--t1-surface, rgba(255,255,255,.038)); border: 1px solid var(--t1-hairline, #262a2a);
  font: 600 15px/1 Inter, sans-serif;
}
.tps-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--text-muted, #8b9090); flex: 0 0 auto; }
.tps-dot.ok { background: #4caf7d; box-shadow: 0 0 0 4px rgba(76,175,125,.16); }
.tps-dot.bad { background: var(--danger, #b3261e); box-shadow: 0 0 0 4px rgba(179,38,30,.18); }
.tps-log { font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted, #8b9090); }
.tps-log-row { padding: 4px 0; border-bottom: 1px solid var(--border, #1a1e1e); }
.tps-log-row.bad { color: var(--danger, #d9564c); }

/* ---- Business details (V26.10) ----
   The legal identity printed on every bill. Built because the routes existed
   with no UI, so the VAT number — the top go-live blocker — could not be
   entered through the app. Uses the V25 tokens like the rest of the app. */
.ta-bz-warn, .ta-bz-ok {
  display: grid; gap: 4px; padding: 13px 15px; margin: 0 0 16px;
  border-radius: var(--t1-r-card, 16px); font-size: 13.5px; line-height: 1.5;
}
/* Hairline + left-edge accent, not a full colour ring (house rule; .attn-row
   on this same page is the reference treatment). */
.ta-bz-warn {
  background: rgba(239, 68, 68, .10);
  border: 1px solid var(--t1-hairline-str, #2a2f2f);
  border-left: 3px solid var(--danger, #EF4444); color: var(--text, #e9e6e1);
}
.ta-bz-warn strong { color: var(--danger, #EF4444); }
.ta-bz-ok {
  background: rgba(34, 197, 94, .08);
  border: 1px solid var(--t1-hairline-str, #2a2f2f);
  border-left: 3px solid #22C55E; color: var(--text, #e9e6e1);
}
.ta-bz-ok strong { color: #22C55E; }

.ta-bz-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; align-items: start;
}
.ta-bz-field {
  display: grid; gap: 5px; min-width: 0;
  /* align-content:start, or the grid STRETCHES its rows to fill the tallest
     cell in the row of .ta-bz-grid — and the hint texts are different lengths,
     so Phone (which has no hint) rendered a 67px input next to 48px ones.
     Exactly the trap CLAUDE.md already records for #tabsList and #itemGrid:
     any grid told to fill space needs align-content beside it. */
  align-content: start;
}
.ta-bz-l { font: 600 13px/1.2 Inter, sans-serif; color: var(--text, #e9e6e1); }
/* 16px, or iOS zooms the viewport on focus — known trap #11. */
.ta-bz-field input {
  min-height: 48px; padding: 0 13px; font-size: 16px;
  background: var(--t1-surface-2, #16191a); color: var(--text, #e9e6e1);
  border: 1px solid var(--t1-hairline, #262a2a); border-radius: var(--t1-r-ctl, 11px);
}
.ta-bz-field input:disabled { opacity: .6; }
.ta-bz-h { font: 400 11.5px/1.45 Inter, sans-serif; color: var(--text-muted, #8b9090); font-style: normal; }

.ta-bz-check {
  display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 0;
  padding: 13px 15px; border: 1px solid var(--t1-hairline, #262a2a);
  border-radius: var(--t1-r-card, 16px); background: var(--t1-surface, #141616);
}
.ta-bz-check input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--gold, #C9A961); }
.ta-bz-check span { display: grid; gap: 4px; font-size: 13.5px; }
.ta-bz-check em { font: 400 12px/1.5 Inter, sans-serif; color: var(--text-muted, #8b9090); font-style: normal; }
/* V26.78: switch variant — title + t1-switch share the top line. The inner
   .t1-switch input keeps its own (invisible) sizing, not the 22px square. */
.ta-bz-check-switch > span { width: 100%; }
.ta-bz-check-switch .ta-bz-check-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ta-bz-check-switch .t1-switch input { width: auto; height: auto; margin-top: 0; }

.ta-bz-actions { margin-top: 18px; }
.ta-bz-actions .btn { min-height: 48px; padding: 0 22px; }

/* The tab strip is a nowrap horizontal scroller with a hidden scrollbar, so on a
   desktop that fits 7 of 8 tabs the 8th is simply invisible — no scrollbar, no
   fade, nothing suggesting there is more. That is how the Business tab (the one
   holding the VAT number) could ship and never be found. Wrap to a second line
   where there is room; keep scrolling on a phone, where wrapping 8 tabs would eat
   the screen. Declared after the base rule so it wins on source order. */
@media (min-width: 769px) and (min-height: 641px), (min-width: 769px) and (hover: hover) {
  .ta-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
}


/* ===== Needs attention (V26.57) =====
   Three faults in one list, ranked by consequence. `bad` is an item that cannot
   be sold at all; `warn` is one that might simply be priced wrong. The colour
   carries the rank so a manager can triage without reading every row. */
.attn-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
  border: 1px solid var(--t1-hairline-str, #2a2f2f);
  background: var(--t1-surface, rgba(255, 255, 255, .038));
  border-left-width: 3px;
}
.attn-bad  { border-left-color: var(--danger, #EF4444); }
.attn-warn { border-left-color: var(--gold, #C9A961); }
.attn-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.attn-name { font: 600 14.5px/1.25 Inter, sans-serif; color: var(--text, #e9e6e1); }
.attn-cat {
  font: 500 11.5px/1 Inter, sans-serif; color: var(--text-muted, #8b9090);
  letter-spacing: .02em;
}
.attn-why { font: 500 12px/1.45 Inter, sans-serif; color: var(--text-muted, #8b9090); }
.attn-bad .attn-why b  { color: #F0A2A2; }
.attn-warn .attn-why b { color: var(--gold, #C9A961); }
.attn-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.attn-price {
  width: 104px; min-height: 44px; padding: 0 10px; border-radius: var(--t1-r-ctl, 11px);
  border: 1px solid var(--t1-hairline-str, #3a3f47);
  background: var(--bg-elevated, rgba(255, 255, 255, .05));
  color: var(--text, #e9e6e1); font: 600 16px/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums; text-align: right;
}
.attn-save { min-height: 44px; }


/* Catalogue: add to a section / remove an item (V26.57). */
.ta-add {
  display: block; width: 100%; min-height: 44px; margin: 6px 0 4px;
  border: 1px dashed var(--t1-hairline-str, #3a3f47); border-radius: var(--t1-r-ctl, 11px);
  background: transparent; color: var(--text-muted, #8b9090);
  font: 600 13px/1 Inter, sans-serif; cursor: pointer;
}
.ta-add:active { background: var(--bg-hover, #1d2024); color: var(--text, #e9e6e1); }
/* Quiet, and separated from the 86 toggle it sits beside: 86 is for tonight and
   reversible, remove is for good. Loud styling here would invite the mis-tap. */
.ta-remove {
  position: relative; justify-self: end;
  flex: 0 0 auto; min-width: 36px; min-height: 36px; border-radius: 8px;
  border: 1px solid var(--t1-hairline, rgba(255, 255, 255, .10));
  background: transparent; color: var(--text-subtle, #6d7373);
  font: 600 14px/1 Inter, sans-serif; cursor: pointer;
}
/* Quiet 36px visual, ~46px hit area — the .fs-x pattern. */
.ta-remove::before { content: ''; position: absolute; inset: -5px; }
.ta-remove:active { border-color: var(--danger, #EF4444); color: var(--danger, #EF4444); }


/* One price field per size (V26.58). A spirit is 25ml AND 50ml; a single box
   could only ever be wrong for one of them. */
.attn-variants { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.attn-var { display: grid; gap: 3px; justify-items: end; }
.attn-var span {
  font: 600 10px/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted, #8b9090);
}
/* A size with NO price at all is why the row is flagged — say which one. */
.attn-var-blank span { color: var(--danger, #EF4444); }
.attn-var-blank .attn-price { border-color: var(--danger, #EF4444); }
.attn-var .attn-price { width: 92px; }


/* The paste-once install command (V26.60). Monospace and scrollable — it is
   long, and wrapping a shell command makes it look like two commands. */
.ta-cmd {
  margin: 0 0 10px; padding: 12px 14px; border-radius: var(--t1-r-ctl, 11px);
  border: 1px solid var(--t1-hairline-str, #2a2f2f);
  background: #0f1111; color: var(--gold, #C9A961);
  font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto; white-space: pre;
}

/* ===== V26.99 — Insights ================================================ */
.ins-note { font-size: 12px; color: var(--text-muted, #8b9090); margin: -6px 0 10px; }
.ins-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ins-bar-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.ins-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bar-track { display: block; height: 14px; border-radius: 7px; background: var(--t1-surface, rgba(255,255,255,.038)); overflow: hidden; }
.ins-bar-track i { display: block; height: 100%; border-radius: 7px; background: var(--gold, #C9A961); opacity: .85; }
.ins-bar-v { font-variant-numeric: tabular-nums; color: var(--text-muted, #8b9090); white-space: nowrap; }
.ins-heat-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; }
.ins-heat { border-collapse: collapse; }
.ins-heat th { font: 600 10px/1 Inter, sans-serif; color: var(--text-muted, #8b9090); padding: 3px 4px; text-align: center; }
.ins-heat tbody th { text-align: right; padding-right: 8px; }
.ins-heat td { padding: 2px; }
.ins-heat td i { display: block; width: 26px; height: 20px; border-radius: 4px; background: var(--gold, #C9A961); }