/* BookMy staff app */
:root {
  --ink: #1c1917; --muted: #6b6560; --bg: #f5f3f0; --card: #fff; --line: #e4dfd8; --soft: #faf8f5;
  --brand: #b4471c; --brand-ink: #fff; --brand-soft: #fbeee7;
  /* booking sources: validated categorical slots (orange, blue, aqua); badge text uses the deeper steps */
  --ai: #eb6834; --web: #2a78d6; --staff: #1baf7a;
  --ai-ink: #b8461a; --web-ink: #1f62b0; --staff-ink: #0f7a54;
  --good: #2f6b3a; --bad: #a12c2c; --warn: #8a5a00; --warn-soft: #fff6e0; --bad-soft: #fdecec;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg); font-size: 14px; }
a { color: var(--brand); }

/* header */
.topbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.logo { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.logo span { color: var(--brand); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { padding: 7px 11px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.nav a:hover { background: var(--soft); }
.nav a.on { background: var(--ink); color: #fff; }
.topbar .spacer { flex: 1; }
.who { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.pubpick { font-weight: 600; }

/* layout */
main { max-width: 1040px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.card > h2 { margin: 0; padding: 14px 16px 4px; font-size: 16px; }
.card > p.lead { margin: 0; padding: 0 16px 12px; color: var(--muted); }
.body { padding: 0 16px 16px; display: grid; gap: 12px; }
.muted { color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* controls */
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); min-width: 0; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
button { font: inherit; padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; color: var(--ink); }
button:hover { border-color: #cfc7bd; }
button.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
button.link { border: 0; background: none; color: var(--brand); padding: 4px 2px; }
button.x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 8px; }
button.x:hover { color: var(--bad); }
label.f { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
label.f > span { font-weight: 500; }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
.table-wrap { overflow-x: auto; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat .n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.stat .l { color: var(--muted); font-size: 12px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.badge.agent { background: var(--ai-ink); } .badge.web { background: var(--web-ink); } .badge.staff { background: var(--staff-ink); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.regular { background: var(--brand-soft); border-color: #f0cdbd; color: var(--brand); font-weight: 600; }
.tag.warn { background: var(--bad-soft); border-color: #f3c4c4; color: var(--bad); font-weight: 600; }

.note { padding: 10px 12px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); }
.err { color: var(--bad); } .ok { color: var(--good); }

/* login */
.login { max-width: 360px; margin: 10vh auto; padding: 0 16px; display: grid; gap: 10px; }
.login h1 { margin: 0 0 4px; font-size: 26px; }

@media (max-width: 640px) {
  .topbar { position: static; }
  th, td { padding: 8px; }
}

.offline { background: var(--warn-soft); color: var(--warn); text-align: center; padding: 8px 12px; font-weight: 600; }
/* Installed app on iPhone/iPad: keep clear of the notch and home bar */
@media (display-mode: standalone) {
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}