/* SiteCheckin — design system. Tailwind CDN handles layout; this defines the
   component look: one teal accent on a calm slate-neutral base, restrained color. */
:root {
  --brand: #0f766e;        /* teal-700 */
  --brand-dark: #0b5d57;
  --brand-tint: #f0fdfa;   /* teal-50 */
  --ink: #0f172a;          /* slate-900 */
  --muted: #64748b;        /* slate-500 */
  --line: #e2e8f0;         /* slate-200 */
  --surface: #ffffff;
  --bg: #f8fafc;           /* slate-50 */
}

body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* ---- Status badges (text + color, never color alone — a11y) ---- */
.badge { display:inline-flex; align-items:center; gap:.4rem; padding:.18rem .6rem; border-radius:9999px; font-size:.72rem; font-weight:600; line-height:1.4; white-space:nowrap; }
.badge::before { content:""; width:.5rem; height:.5rem; border-radius:9999px; background:currentColor; }
.badge-blue  { background:#eff6ff; color:#1d4ed8; }
.badge-green { background:#ecfdf5; color:#047857; }
.badge-amber { background:#fffbeb; color:#b45309; }
.badge-slate { background:#f1f5f9; color:#475569; }
.badge-gray  { background:#f1f5f9; color:#64748b; }
.badge-red   { background:#fef2f2; color:#b91c1c; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .9rem; border-radius:.6rem; font-weight:600; font-size:.875rem; cursor:pointer; transition:background .12s, border-color .12s, box-shadow .12s, transform .04s; border:1px solid transparent; line-height:1.1; }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-light { background:#fff; color:#334155; border-color:var(--line); }
.btn-light:hover { background:#f8fafc; border-color:#cbd5e1; }
.btn-danger { background:#fff; color:#b91c1c; border-color:#fecaca; }
.btn-danger:hover { background:#fef2f2; }
.btn-sm { padding:.34rem .65rem; font-size:.78rem; border-radius:.5rem; }
.btn:disabled { opacity:.55; cursor:default; }

/* ---- Forms ---- */
.field { width:100%; padding:.6rem .75rem; border:1px solid #cbd5e1; border-radius:.6rem; font-size:.95rem; background:#fff; color:var(--ink); transition:border-color .12s, box-shadow .12s; }
.field:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.15); }
.field::placeholder { color:#94a3b8; }
.label { display:block; font-size:.8rem; font-weight:600; color:#475569; margin-bottom:.35rem; }

/* ---- Dashboard queue columns ---- */
.col-head { display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; letter-spacing:.01em; color:#475569; margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:2px solid var(--line); }
.col-head .count { margin-left:auto; background:#f1f5f9; color:#475569; font-size:.72rem; font-weight:700; border-radius:9999px; padding:.05rem .5rem; }
.col-online  { border-color:#bfdbfe; }
.col-instore { border-color:#a7f3d0; }
.col-progress{ border-color:#fde68a; }
.col-complete{ border-color:#cbd5e1; }
.col-closed  { border-color:#e2e8f0; }

/* Visit card accent stripe by column */
.vcard { position:relative; overflow:hidden; transition:border-color .12s, box-shadow .12s; }
.vcard:hover { box-shadow:0 2px 8px rgba(15,23,42,.07); }
.vcard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; }
.vcard.v-online::before  { background:#3b82f6; }
.vcard.v-instore::before { background:#10b981; }
.vcard.v-progress::before{ background:#f59e0b; }
.vcard.v-complete::before{ background:#94a3b8; }
.vcard.v-closed::before  { background:#cbd5e1; }

.wait-warn { color:#b45309; font-weight:600; }
.wait-over { color:#b91c1c; font-weight:600; }

/* Stat tiles */
.stat { background:var(--surface); border:1px solid var(--line); border-radius:.7rem; padding:.55rem .75rem; }
.stat .num { font-size:1.35rem; font-weight:700; line-height:1.1; }
.stat .cap { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; font-weight:600; margin-top:.1rem; }

/* Hide completed/closed columns when toggled */
#queue-container.hide-completed [data-col="complete"],
#queue-container.hide-completed [data-col="closed"] { display:none; }

/* New-arrival flash */
@keyframes flashnew { 0%{ background:#ecfeff } 100%{ background:#fff } }
.flash-new { animation: flashnew 2s ease-out; }

/* Tables */
.tbl { width:100%; border-collapse:collapse; font-size:.875rem; }
.tbl thead th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; font-weight:700; padding:.6rem .75rem; background:#f8fafc; }
.tbl tbody td { padding:.6rem .75rem; border-top:1px solid var(--line); }
.tbl tbody tr:hover { background:#f8fafc; }