/* Snacko Express.
   Palette taken from the existing kiosk artwork and squadron branding:
   brick #8b3229, deep brown #2a110a, amber #fdac19. No framework — the markup
   is ours, so utility classes would mostly be indirection. */

:root {
  --brand:        #8b3229;
  --brand-dark:   #6d2720;
  --brand-deep:   #2a110a;
  --accent:       #fdac19;
  --accent-soft:  #fdd17f;

  --ink:          #1b1310;
  --ink-soft:     #6b5d57;
  --ink-faint:    #9a8d87;
  --line:         #e7e0dc;
  --surface:      #ffffff;
  --canvas:       #faf7f5;

  --ok:    #1b7f4d;
  --warn:  #a86112;
  --bad:   #b4231c;
  --ok-bg:   #e8f5ee;
  --warn-bg: #fdf3e3;
  --bad-bg:  #fcecea;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(42,17,10,.06), 0 4px 12px rgba(42,17,10,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

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

a { color: var(--brand); }
h1, h2, h3 { color: var(--brand-deep); margin: 0 0 .4em; line-height: 1.25; }
h1 { font-size: 1.6rem; font-weight: 650; }
h2 { font-size: 1.05rem; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 600; }

/* ── Sign in ─────────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--brand-deep), var(--brand) 140%);
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  padding: 32px 28px;
}
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-mark { font-size: 2rem; display: block; }
.auth-brand h1 { font-size: 1.25rem; margin-top: 6px; }
.auth-note {
  margin: 18px 0 0; text-align: center;
  font-size: .8rem; color: var(--ink-faint);
}

/* ── Forms ───────────────────────────────────────────────────────────── */
.stack { display: grid; gap: 14px; }
label > span {
  display: block; margin-bottom: 5px;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; color: var(--ink); background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.hint { font-size: .78rem; color: var(--ink-faint); margin: 5px 0 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border: 1px solid transparent; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: filter .12s ease, background .12s ease;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-quiet { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-quiet:hover:not(:disabled) { background: var(--canvas); }
/* Confirm and destroy stay green/red: a brand-coloured "Accept payment"
   reads worse than one that is unmistakably the positive action. */
.btn-go     { background: var(--ok);  color: #fff; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-block  { width: 100%; }
.btn-sm     { padding: 6px 11px; font-size: .85rem; }

/* ── Shell ───────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100dvh; }
.sidebar {
  background: var(--brand); color: #fff;
  padding: 18px 0; display: flex; flex-direction: column;
}
.sidebar-brand {
  padding: 0 18px 16px; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; gap: 8px;
}
.sidebar a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 18px; color: rgba(255,255,255,.88);
  text-decoration: none; font-size: .9rem; border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgba(0,0,0,.14); color: #fff; }
.sidebar a.active {
  background: rgba(0,0,0,.2); color: #fff;
  border-left-color: var(--accent); font-weight: 600;
}
.sidebar-foot { margin-top: auto; padding: 14px 18px 0; font-size: .8rem; }
.sidebar-foot a { padding: 4px 0; border: 0; color: rgba(255,255,255,.7); }

.main { padding: 26px 30px 60px; max-width: 1120px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.page-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: .88rem; }

/* Sub-navigation within one sidebar area, for a subject that needs several
   pages but is one thing to the person using it. Links, not buttons: each tab
   is a real page with its own URL, so it can be bookmarked and reloaded. */
.subtabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.subtab {
  padding: 9px 15px; text-decoration: none; white-space: nowrap;
  color: var(--ink-soft); font-size: .88rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--ink); }
.subtab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* Divides a page into named groups of cards, where a .card-head would put the
   label inside one card rather than over all of them. */
.section-head {
  margin: 4px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); color: var(--ink-soft);
  font-size: .82rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── Cards, tables, tiles ────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px;
}
.card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-weight: 650; font-size: .9rem;
}
.card-body { padding: 16px; }
.empty { padding: 40px 16px; text-align: center; color: var(--ink-faint); font-size: .9rem; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.tile { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 15px; box-shadow: var(--shadow); }
.tile-label { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
              color: var(--ink-soft); }
.tile-value { font-size: 1.6rem; font-weight: 650; margin-top: 3px;
              font-variant-numeric: tabular-nums; }
.tile-hint  { font-size: .76rem; color: var(--ink-faint); margin-top: 3px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); font-weight: 600;
  padding: 9px 16px; border-bottom: 1px solid var(--line);
}
td { padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: .9rem; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Status ──────────────────────────────────────────────────────────── */
.alert { padding: 11px 14px; border-radius: 8px; font-size: .88rem; margin: 0 0 16px; }
.alert-error { background: var(--bad-bg);  color: var(--bad);  border: 1px solid #f3c9c6; }
.alert-warn  { background: var(--warn-bg); color: var(--warn); border: 1px solid #f3ddb8; }
.alert-ok    { background: var(--ok-bg);   color: var(--ok);   border: 1px solid #bfe3ce; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px;
        font-size: .74rem; font-weight: 600; }
.pill-ok   { background: var(--ok-bg);   color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad  { background: var(--bad-bg);  color: var(--bad); }
.pill-mute { background: #eee8e5;        color: var(--ink-soft); }

/* The reconciliation code is the thing an admin matches against a Venmo
   statement, so it is deliberately the loudest element on the row. */
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; letter-spacing: .18em;
  background: var(--accent-soft); color: var(--brand-deep);
  padding: 3px 9px; border-radius: 6px;
}
.code-xl { font-size: 2.1rem; letter-spacing: .3em; padding: 12px 18px; display: inline-block; }

.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Inputs default to full width for stacked forms; inside a .row they should
   size to their content instead of pushing everything onto its own line. */
.row > input, .row > select { width: auto; }
.page-head form { flex-wrap: nowrap; }
.right { margin-left: auto; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; overflow-x: auto; padding: 10px; gap: 4px; }
  .sidebar-brand, .sidebar-foot { display: none; }
  .sidebar a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .sidebar a.active { border-left: 0; border-bottom-color: var(--accent); }
  .main { padding: 18px 16px 48px; }
}

/* ── Account modal ──────────────────────────────────────────────────────
   Opened from the user's name in the sidebar. */

.account-trigger {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; margin: 0 0 4px -8px;
  background: transparent; border: 0; border-radius: 8px;
  color: #fff; font: inherit; font-size: .82rem; text-align: left;
  cursor: pointer;
}
.account-trigger:hover  { background: rgba(255,255,255,.10); }
.account-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.account-avatar {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--brand-deep);
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(42,17,10,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.modal {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(42,17,10,.28);
  width: 100%; max-width: 560px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 1.02rem; }
.modal-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ink-faint); padding: 0 4px;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 18px 20px 22px; overflow-y: auto; }

.tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 14px; font: inherit; font-size: .88rem; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab-panel[hidden] { display: none; }

.panel-title { margin: 0 0 4px; font-size: .82rem; text-transform: uppercase;
               letter-spacing: .06em; color: var(--ink-soft); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

@media (max-width: 860px) {
  /* The sidebar collapses on small screens, so surface the trigger there. */
  .sidebar-foot { display: block; }
  .modal { max-width: none; }
}

/* Switch between the administrator and shopper views. Only rendered for an
   account that has both, so it never appears as a dead end. */
.view-switch {
  display: block; margin: 10px 0 0; padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600;
  text-align: center;
}
.view-switch:hover { background: rgba(255,255,255,.12); }

/* ── Kiosk lighting rows ────────────────────────────────────────────────
   One row per presence state: what it is, the mode, and the two colours.
   Wraps to a stack on a narrow screen rather than crushing the selector. */

.led-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.led-what   { flex: 1 1 220px; min-width: 200px; }
.led-mode   { flex: 0 1 230px; display: flex; flex-direction: column; gap: 4px; }
.led-mode select { width: 100%; }
.led-colour { display: flex; flex-direction: column; gap: 4px; }
.led-colour input[type="color"] {
  width: 58px; height: 40px; padding: 2px; cursor: pointer;
}

/* A mode that generates its own colours does not read these. Dimmed rather
   than hidden, so the row does not reflow every time the mode changes and the
   stored colour is still visible. */
.led-colour.is-unused { opacity: .35; }
.led-colour.is-unused input[type="color"] { cursor: not-allowed; }