/* ==========================================================================
   Sofa Power admin.
   Same palette as the site, but this is a tool: it gets scanned and operated,
   not read. So the loud display face stays out of the way and state is carried
   by shape and colour rather than by size.
   ========================================================================== */

:root{
  --void:#0B0B0C;
  --carbon:#141417;
  --raised:#1B1B20;
  --power:#F2B01E;
  --power-hot:#FFD24A;
  --bone:#F4F2ED;
  --ash:#8D8D95;
  --hair:rgba(244,242,237,.13);
  --ok:#5FBF8C;
  --watch:#E0A63C;
  --stop:#E8756B;

  --display:'Anton','Arial Narrow',sans-serif;
  --body:'Barlow Semi Condensed',system-ui,sans-serif;
  --util:'Barlow Condensed',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0; background:var(--void); color:var(--bone);
  font:400 16px/1.55 var(--body); -webkit-font-smoothing:antialiased;
}
:focus-visible{ outline:3px solid var(--power); outline-offset:2px }

.sronly{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── bar ──────────────────────────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem;
  padding:.8rem clamp(1rem,3vw,2rem);
  background:rgba(11,11,12,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.wordmark{
  display:inline-flex; align-items:baseline; gap:.3em;
  text-decoration:none; transform:skewX(-8deg);
  font:400 1.35rem/1 var(--display); text-transform:uppercase; margin-right:auto;
}
.wordmark__sofa{ color:var(--bone) }
.wordmark__power{ color:var(--power) }
.bar__tag{
  transform:skewX(8deg); margin-left:.5rem; padding:.15em .5em;
  border:1px solid var(--hair); color:var(--ash);
  font:600 .62rem/1.6 var(--util); text-transform:uppercase; letter-spacing:.16em;
}
.bar__right{ display:flex; align-items:center; gap:.6rem }
.bar__who{ color:var(--ash); font:500 .85rem/1 var(--util); letter-spacing:.05em }

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn{
  display:inline-block; padding:.75rem 1.4rem; border:2px solid transparent;
  font:600 .95rem/1 var(--util); text-transform:uppercase; letter-spacing:.09em;
  cursor:pointer; background:none; color:var(--bone);
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn--sm{ padding:.5rem .9rem; font-size:.82rem }
.btn--xs{ padding:.38rem .7rem; font-size:.74rem }
.btn--gold{ background:var(--power); color:var(--void); box-shadow:inset 0 2px 0 var(--power-hot) }
.btn--gold:hover{ background:var(--power-hot) }
.btn--ghost{ border-color:var(--hair); color:#C6C4BF }
.btn--ghost:hover{ border-color:var(--power); color:var(--power) }
.btn--danger{ border:2px solid rgba(232,117,107,.4); color:var(--stop) }
.btn--danger:hover{ border-color:var(--stop); background:rgba(232,117,107,.12) }
.btn:disabled{ opacity:.5; cursor:not-allowed }

/* ── layout ───────────────────────────────────────────────────────────── */

.wrap{ max-width:1100px; margin-inline:auto; padding:clamp(1.5rem,4vw,2.75rem) clamp(1rem,3vw,2rem) 4rem }

.gate{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; padding-top:12vh; max-width:38rem }
.gate__h1{
  margin:0; font:400 clamp(2.2rem,1.6rem + 2.4vw,3.4rem)/.95 var(--display);
  text-transform:uppercase; transform:skewX(-8deg); transform-origin:left bottom;
}
.gate__note{ margin:0; color:var(--ash) }
.gate__err{ margin:0; color:var(--stop); font-size:.92rem; min-height:1.2em }

.board{ display:flex; flex-direction:column; gap:1.75rem }

/* ── stats ────────────────────────────────────────────────────────────── */

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair) }
.stat{ background:var(--carbon); padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:.35rem }
.stat--wide{ grid-column:span 2 }
.stat__label{ font:600 .7rem/1 var(--util); text-transform:uppercase; letter-spacing:.16em; color:var(--ash) }
.stat__num{ font:400 2.6rem/1 var(--display); color:var(--bone); font-variant-numeric:tabular-nums }
/* Colour only where it means something: an outstanding queue is actionable. */
.stat--watch .stat__num{ color:var(--watch) }
.stat__hint{ color:var(--ash); font-size:.85rem }
.stat__chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.35rem 0 }
.chip{
  padding:.3em .6em; border:1px solid var(--hair); background:var(--raised);
  font:500 .8rem/1 var(--util); text-transform:uppercase; letter-spacing:.08em; color:#C6C4BF;
}
.chip b{ color:var(--power); font-weight:700 }

/* ── panel ────────────────────────────────────────────────────────────── */

.panel{ border:1px solid var(--hair); background:var(--carbon) }
.panel__head{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.25rem; border-bottom:1px solid var(--hair);
}
.panel__title{ margin:0; font:400 1.35rem/1 var(--display); text-transform:uppercase; margin-right:auto }
.panel__tools{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.panel__tools input{
  padding:.5rem .8rem; min-width:14rem;
  background:var(--void); border:2px solid var(--hair); color:var(--bone);
  font:400 .92rem/1 var(--body);
}
.panel__tools input:focus{ outline:none; border-color:var(--power) }

.tablewrap{ overflow-x:auto }
table{ width:100%; border-collapse:collapse; min-width:640px }
th,td{ padding:.7rem 1.25rem; text-align:left; border-bottom:1px solid var(--hair) }
th{
  font:600 .68rem/1 var(--util); text-transform:uppercase; letter-spacing:.13em;
  color:var(--ash); background:var(--raised);
}
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover{ background:var(--raised) }
.mono{ font-family:var(--mono); font-size:.86rem }
.dim{ color:var(--ash) }
.actions{ display:flex; gap:.4rem; justify-content:flex-end }

/* State reads as a shape as well as a colour, so it survives a greyscale
   screenshot and does not rely on hue alone. */
.pill{
  display:inline-block; padding:.25em .6em; border:1px solid currentColor;
  font:600 .7rem/1.4 var(--util); text-transform:uppercase; letter-spacing:.1em;
}
.pill--ok{ color:var(--ok) }
.pill--pending{ color:var(--watch) }

.empty{ margin:0; padding:1.5rem 1.25rem; color:var(--ash) }

/* ── toast ────────────────────────────────────────────────────────────── */

.toast{
  position:fixed; left:50%; bottom:1.5rem; translate:-50% 0; z-index:40;
  padding:.85rem 1.4rem; background:var(--raised);
  border:1px solid var(--hair); border-left:4px solid var(--ok);
  font:500 .95rem/1 var(--body); box-shadow:0 12px 40px -12px rgba(0,0,0,.9);
}
.toast[data-bad='true']{ border-left-color:var(--stop); color:var(--stop) }

@media (max-width:640px){
  .stat--wide{ grid-column:span 1 }
  .panel__tools input{ min-width:0; flex:1 1 100% }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important }
}