/*
  CafeMS back office — the site's own layer over the Gentelella bundle (assets/main-v4-*.css).

  Loaded after the bundle on purpose, and kept small: everything here is either a class the views
  use that the bundle never defined (alert-danger, text-muted, btn-sm, col-6-6 — they rendered as
  plain text and nobody noticed), or a rule that makes a form readable. The bundle is a generated
  file and is not edited by hand.
*/

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Inputs used the card's own background with a hairline border, so on a white card they were a
     white box with a nearly-white edge, and on a dark card a dark box with a nearly-dark edge. */
  --input-bg: #ffffff;
  --input-bg-hover: #fbfcfe;
  --input-border: #c3cad5;
  --input-placeholder: #9aa3b0;
  --danger: var(--red);
}
[data-theme=dark] {
  --input-bg: #243043;
  --input-bg-hover: #283549;
  --input-border: #ffffff3d;
  --input-placeholder: #7f8a9b;
}

/* ── inputs ─────────────────────────────────────────────────────────────────────────────────── */
.form-control {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
.form-control:hover:not(:focus):not(:disabled) { background: var(--input-bg-hover); }
.form-control::placeholder { color: var(--input-placeholder); }
.form-control:disabled, .form-control[readonly] {
  background: var(--bg-surface-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
select.form-control { padding-right: 32px; }
input[type=checkbox], .form-check input[type=radio] {
  border-color: var(--input-border);
  background: var(--input-bg);
}
input[type=number].form-control { font-variant-numeric: tabular-nums; }

/* The bundle gives .row and .form-group 16px each, so a two-column form had 32px between rows. */
.row > .form-group { margin-bottom: 0; }
.form-group:last-child { margin-bottom: 0; }
.form-help, .help {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
.form-section {
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.form-section:first-child { margin-top: 0; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.form-check .muted { color: var(--text-muted); font-weight: 400; }

/* ── inline forms: one line on a desktop, a stack on a phone ───────────────────────────────── */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}
.inline-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inline-form .field > .form-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.inline-form .field > .help { margin-top: 2px; }
.inline-form .check {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.inline-form > .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.inline-form > .form-group > .form-label { margin: 0; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.inline-form .actions {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
}
.w-xs   { width: 5.5rem; }
.w-sm   { width: 8rem; }
.w-md   { width: 12rem; }
.w-lg   { width: 16rem; }
.w-xl   { width: 22rem; }
.w-grow { flex: 1 1 12rem; }
.w-full { width: 100%; }

@media (max-width: 640px) {
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form .w-xs, .inline-form .w-sm, .inline-form .w-md,
  .inline-form .w-lg, .inline-form .w-xl, .inline-form .w-grow { width: 100%; flex: 0 0 auto; }
  .inline-form .check { height: auto; padding: 4px 0; }
  .inline-form .actions { height: auto; padding-top: 4px; }
  .inline-form .actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── editable table rows: each control in its own column, under its own header ─────────────── */
table.table.table-form th,
table.table.table-form td { padding: 6px 10px; }
table.table.table-form th:first-child,
table.table.table-form td:first-child { padding-left: 16px; }
table.table.table-form th:last-child,
table.table.table-form td:last-child { padding-right: 16px; }
table.table.table-form .form-control { height: 32px; font-size: 12.5px; padding: 0 10px; }
table.table.table-form select.form-control { padding-right: 28px; }
table.table.table-form td.key code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}
table.table.table-form td.count { color: var(--text-secondary); white-space: nowrap; }
table.table.table-form td.check { text-align: center; }
table.table.table-form th.check { text-align: center; }
table.table.table-form td.actions {
  text-align: right;
  white-space: nowrap;
}
table.table.table-form td.actions form { display: inline; margin-left: 4px; }
table.table.table-form td.actions form:first-child { margin-left: 0; }
table.table.table-form tr.empty td { color: var(--text-muted); padding: 14px 16px; }
table.table th.w-xs, table.table td.w-xs { width: 6rem; }
table.table th.w-sm, table.table td.w-sm { width: 9rem; }
table.table th.w-md, table.table td.w-md { width: 13rem; }
/* On a phone the table scrolls sideways; the inputs must not shrink to a few characters first. */
table.table.table-form input[type=text].form-control { min-width: 10rem; }
table.table.table-form input[type=number].form-control { min-width: 4.5rem; }
table.table.table-form select.form-control { min-width: 9rem; }
/* The row's form element carries only the token; it must not take up a cell. */
table.table.table-form form.row-form { display: none; }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────── */
.btn.btn-sm:not(.btn-icon) { height: 28px; padding: 0 10px; font-size: 12px; }
/* The bundle's outline button uses the hairline border colour, which on the dark theme is close
   to invisible; borrow the input border so a Save button looks like a button. */
.btn-outline { border-color: var(--input-border); color: var(--text); }
.btn-outline:hover { border-color: var(--text-muted); }
.btn-outline-secondary { /* used by one view; same thing as btn-outline */
  background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border-color);
}
.btn-outline.danger, .btn-outline-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: var(--bg-surface);
}
.btn-outline.danger:hover, .btn-outline-danger:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
.btn-block { width: 100%; justify-content: center; }

/* ── alerts, text and grid helpers the views already use ───────────────────────────────────── */
.alert-danger { color: var(--red); background: var(--red-lt); border-color: #d6393933; }
.alert a { color: inherit; text-decoration: underline; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mb-3 { margin-bottom: 16px; }
.mt-3 { margin-top: 16px; }
.col-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .col-6-6, .col-8-4, .col-4-8 { grid-template-columns: minmax(0, 1fr); }
}
.lede {
  max-width: 680px;
  margin: -6px 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.card + .card { margin-top: 16px; }
.row + .card, .card + .row { margin-top: 16px; }
.card-body + .card-body { border-top: 1px solid var(--border-color-light); }
.card-header .card-title + small { color: var(--text-muted); font-size: 11.5px; }

/* ── section tabs (the menu screens) ────────────────────────────────────────────────────────── */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -6px 0 16px;
  padding: 3px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover { color: var(--text); }
.subnav a.active {
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 1px 2px #0f172a14;
}
.subnav a .n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--border-color-light);
  font-size: 10.5px;
  text-align: center;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .subnav { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
}

/* ── the item editor's per-channel sections ─────────────────────────────────────────────────── */
details.channel {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius);
  padding: 0 14px;
  margin-bottom: 10px;
  background: var(--bg-surface);
}
details.channel > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}
details.channel > summary::-webkit-details-marker { display: none; }
details.channel > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform .15s;
  margin-right: 2px;
}
details.channel[open] > summary::before { transform: rotate(45deg); }
details.channel > summary .key { color: var(--text-muted); font-size: 12px; }
details.channel > summary .status { margin-left: auto; }
details.channel > .channel-body {
  border-top: 1px solid var(--border-color-light);
  padding: 14px 0 14px;
}
.days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.days label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}
.days label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-lt);
  color: var(--text);
}

/* ── option groups list on the item page ────────────────────────────────────────────────────── */
.choice-list { display: grid; gap: 6px; }
.choice-list .form-check {
  padding: 8px 10px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.choice-list .form-check:has(input:checked) { border-color: var(--primary); background: var(--primary-lt); }

/* ── page header actions wrap on a phone rather than overflow ───────────────────────────────── */
.page-header-row > .page-actions, .page-header-row > div:last-child:not(:first-child) {
  display: flex; flex-wrap: wrap; gap: 6px;
}
@media (max-width: 640px) {
  .page-header-row > .page-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── sidebar: the group labels read better with a touch more contrast ───────────────────────── */
.sidebar .nav-label { color: #8b9bb0b3; }

/* ── colour pickers on the categories page: the select wears its own swatch ─────────────────── */
select.colour-pick { color: #16211a; }
select.colour-pick option { color: #16211a; }
.channel-pick { display: grid; gap: 8px; }
.channel-pick .form-check { padding: 10px 12px; border: 1px solid var(--border-color-light); border-radius: var(--radius-sm); background: var(--bg-surface); }
.channel-pick .form-check:has(input:checked) { border-color: var(--primary); background: var(--primary-lt); }

/* Breadcrumbs: every crumb but the current page is a link to that page. */
.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color .1s; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }

/* ── collapsible sidebar groups ─────────────────────────────────────────────────────────────────
   A group heading is a button: click it and the items beneath fold away. The choice is kept per
   browser, and the group holding the current page is always opened on arrival. */
.sidebar .nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  text-transform: uppercase; letter-spacing: .5px; font-size: 10px; font-weight: 600;
  color: #8b9bb0b3; padding: 16px 12px 4px;
}
.sidebar .nav-group-toggle:hover { color: var(--sidebar-text-hover); }
.sidebar .nav-group-chev { transition: transform .15s ease; opacity: .7; }
.sidebar .nav-group.collapsed .nav-group-chev { transform: rotate(-90deg); }
.sidebar .nav-group.collapsed .nav-group-items { display: none; }
.sidebar .nav-group-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px; }

/* ── passwordless sign-in ────────────────────────────────────────────────────────────────────────
   The six-digit code box, the authenticator QR code and the key for typing it by hand. */
.auth-code { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.auth-qr { max-width: 220px; background: #fff; border-radius: 8px; padding: 8px; }

/* The enrolment code is read by a phone camera off a screen, so it gets room: a wider module,
   and a white margin around it, because a QR with no quiet zone is the one a camera gives up on.
   Always white on black whatever the theme — an inverted code does not scan. */
.auth-qr--large { max-width: 320px; width: 100%; padding: 20px; }
.auth-enrol__row { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.auth-enrol__code { flex: 0 0 auto; }
.auth-enrol__steps { flex: 1 1 320px; min-width: 280px; }
.auth-steps { margin: 0 0 16px; padding-left: 20px; color: var(--text-secondary, #5b6670); }
.auth-steps li { margin-bottom: 6px; }
.auth-manual { margin-top: 14px; }
.auth-manual summary { cursor: pointer; color: var(--text-secondary, #5b6670); font-size: 13px; }
.auth-qr svg { display: block; width: 100%; height: auto; }
.auth-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .06em; word-break: break-all; background: var(--bg-surface-secondary, #f4f6f8); padding: 8px 12px; border-radius: 6px; }

/* ── the footer stays at the bottom of the viewport ─────────────────────────────────────────────
   The bundle gives the main area a full-viewport minimum, which pushes the footer just below the
   fold on a short page. The page is a column instead: the main area takes the slack and the footer
   sits at the bottom of the screen, aligned with the content beside the sidebar. */
body { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1 0 auto; min-height: 0; }
.footer { margin-left: var(--sidebar-w); }
@media (max-width: 768px) { .footer { margin-left: 0; } }

/* ── the shops screen's pairing column, and the shop's own settings page ─────────────────────────
   A select and its button on one line inside a dense table row, plus the two small notes the
   screens use to say "nothing here" and "this is costing you something". */
.inline-pair { display: flex; gap: 6px; align-items: center; }
.inline-pair > .form-control { min-width: 0; }
.muted { color: var(--text-muted); font-size: 13px; }
small.warn { display: block; margin-top: 4px; font-size: 12px; color: #b4541b; }

/* The shop page and the tax page group their fields into titled blocks rather than one long form:
   a printer address and a loyalty prompt are both "this shop" and nothing else alike. */
.setting-group { border: 1px solid var(--border, #e3e6ea); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.setting-group > h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.setting-group > p.help { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.setting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.setting-grid.wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rate-total { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── a submit row that stays reachable on a long form ────────────────────────────────────────────
   A location's own tab runs to about 3,400px: the kind of place it is, its address, what it takes
   in money, whether it is open. The save button sat at the bottom of all that, four screens below
   the radio buttons somebody had just changed -- so the honest report was "there is no save
   button", because from where the work happens there isn't one.

   Sticky rather than fixed, and no script: it behaves as an ordinary row until the page is long
   enough to scroll past it, sits at the foot of the viewport while there is more form below, and
   settles back into the flow at the end. A browser without position:sticky gets the plain row. */
.form-actions.sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-surface, #fff);
  border-top: 1px solid var(--border, #e3e6ea);
  /* Pulled out to the card's edges so the bar spans it rather than floating inside the padding. */
  margin-left: -16px;
  margin-right: -16px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}
.form-actions.sticky .hint { color: var(--text-muted); font-size: 13px; margin-left: auto; }