/* ==========================================================================
   HOT admin console
   --------------------------------------------------------------------------
   Built for one person doing the same thing two hundred times a day: look at a
   listing, decide, move on. Every choice below serves that loop.

   The one rule that makes the panel scannable:
   YELLOW ONLY EVER MEANS "YOUR MOVE".
   Active nav, primary action, a row awaiting your decision. Never decoration,
   never a heading, never a border for its own sake. If your eye catches yellow,
   there is something for you to do there.
   ========================================================================== */

@font-face{font-family:Manrope;src:url(fonts/Manrope-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/Manrope-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/Manrope-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/Manrope-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/Manrope-ExtraBold.ttf) format('truetype');font-weight:800;font-display:swap}

:root{
  --paper:#FFFFFF;
  --ground:#F7F7F4;          /* barely warm — reads as white with weight, not cream */
  --sunk:#FBFBF9;

  --ink:#0A0A0A;
  --ink-2:#5C5C57;
  --ink-3:#92918B;

  --rule:#E6E5E0;
  --rule-soft:#F0EFEB;

  --mark:#FFEB00;            /* state only */
  --mark-edge:#C9B800;
  --mark-wash:#FFFCE0;

  --live:#157F3B;  --live-wash:#E8F5EC;
  --wait:#9A6B00;  --wait-wash:#FBF2DF;
  --stop:#C4001F;  --stop-wash:#FCEBEE;
  --info:#2B5CE0;  --info-wash:#EAEFFC;

  --sans:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --rail:212px;
  --r:6px;                   /* controls only. structural rules stay square. */
  --shadow:0 1px 2px rgba(10,10,10,.05),0 1px 8px rgba(10,10,10,.04);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;   /* times and counts must align in columns */
}
a{color:inherit}
:focus-visible{outline:2px solid var(--info);outline-offset:2px;border-radius:3px}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh;align-items:stretch}

.rail{
  width:var(--rail);flex:0 0 var(--rail);
  background:var(--paper);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.rail__brand{display:flex;align-items:center;gap:9px;padding:16px 16px 14px;border-bottom:1px solid var(--rule-soft)}
.rail__mark{width:26px;height:26px;border-radius:var(--r);background:var(--mark);display:grid;place-items:center;
  font:800 9px/1 var(--sans);letter-spacing:.06em;color:var(--ink)}
.rail__name{font-weight:700;font-size:13px;letter-spacing:-.01em}
.rail__sub{font:500 10px/1 var(--mono);color:var(--ink-3);margin-top:2px}

.rail__nav{padding:10px 8px;overflow-y:auto;flex:1}
.rail__group{font:600 9.5px/1 var(--mono);letter-spacing:.13em;color:var(--ink-3);
  text-transform:uppercase;padding:14px 8px 6px}
.navlink{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;border-radius:var(--r);color:var(--ink-2);
  text-decoration:none;font-size:13px;font-weight:500;
  border-left:2px solid transparent;
}
.navlink:hover{background:var(--sunk);color:var(--ink)}
.navlink[aria-current=page]{background:var(--mark-wash);border-left-color:var(--mark-edge);color:var(--ink);font-weight:700}
.navlink__count{font:600 10px/1 var(--mono);color:var(--ink-3);
  background:var(--sunk);border:1px solid var(--rule);border-radius:99px;padding:2px 6px}
.navlink[aria-current=page] .navlink__count,
.navlink__count--due{background:var(--mark);border-color:var(--mark-edge);color:var(--ink)}

.rail__foot{padding:10px 12px;border-top:1px solid var(--rule-soft);font:500 10.5px/1.4 var(--mono);color:var(--ink-3)}

.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}

/* ---------- topbar ---------- */
.top{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--rule);padding:12px 24px;
  display:flex;align-items:center;gap:14px;
}
.top__title{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0}
.top__crumb{font:500 10.5px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em;margin-bottom:3px}
.top__actions{margin-left:auto;display:flex;gap:8px;align-items:center}

.page{padding:22px 24px 64px;max-width:1220px;width:100%}

/* ---------- type ---------- */
h2.sec{font-size:13px;font-weight:700;letter-spacing:-.005em;margin:0 0 10px}
.eyebrow{font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:.92em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- surfaces ---------- */
.panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow)}
.panel__head{padding:12px 16px;border-bottom:1px solid var(--rule-soft);display:flex;align-items:center;gap:10px}
.panel__body{padding:16px}
.panel__foot{padding:10px 16px;border-top:1px solid var(--rule-soft);display:flex;align-items:center;gap:10px}

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

/* ---------- stat ---------- */
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:13px 15px}
.stat__label{font:600 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.stat__value{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:5px;font-variant-numeric:tabular-nums}
.stat__note{font-size:12px;color:var(--ink-2);margin-top:3px}
.stat--due{border-color:var(--mark-edge);background:var(--mark-wash)}

/* ---------- buttons ---------- */
.btn{
  appearance:none;border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  font:600 12.5px/1 var(--sans);padding:8px 13px;border-radius:var(--r);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,transform .06s ease;
}
.btn:hover{background:var(--sunk);border-color:var(--ink-3)}
.btn:active{transform:translateY(.5px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn--primary{background:var(--mark);border-color:var(--mark-edge);font-weight:700}
.btn--primary:hover{background:#FFF04D;border-color:var(--mark-edge)}
.btn--go{background:var(--live);border-color:var(--live);color:#fff}
.btn--go:hover{background:#106A31;border-color:#106A31}
.btn--stop{background:var(--stop);border-color:var(--stop);color:#fff}
.btn--stop:hover{background:#A50019;border-color:#A50019}
/* Destructive actions sitting in a list are quiet. A row is not a warning, and
   red on every row competes with the yellow that means "your move". The colour
   is spent once — on the confirm button, where the damage actually happens. */
.btn--danger-quiet{background:var(--paper);border-color:var(--rule);color:var(--ink-2);font-weight:600}
.btn--danger-quiet:hover{background:var(--stop-wash);border-color:#F0B8C2;color:var(--stop)}
.btn--quiet{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn--quiet:hover{background:var(--sunk);color:var(--ink)}
.btn--sm{padding:5px 9px;font-size:11.5px}
.btn__key{font:600 9.5px/1 var(--mono);border:1px solid currentColor;opacity:.5;border-radius:3px;padding:2px 4px}

/* ---------- inputs ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field__label{font:600 11px/1 var(--sans);color:var(--ink-2)}
.input,.select,.textarea{
  font:400 13px/1.4 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;width:100%;
}
.input::placeholder{color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--info);outline:none;box-shadow:0 0 0 3px var(--info-wash)}
.textarea{min-height:84px;resize:vertical}
.field__hint{font-size:11.5px;color:var(--ink-3)}
.field__error{font-size:11.5px;color:var(--stop);font-weight:600}

/* ---------- tags ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;font:700 9.5px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.tag--live{background:var(--live-wash);color:var(--live);border-color:#C6E4D0}
.tag--wait{background:var(--wait-wash);color:var(--wait);border-color:#EBD9AE}
.tag--stop{background:var(--stop-wash);color:var(--stop);border-color:#F3C9D1}
.tag--info{background:var(--info-wash);color:var(--info);border-color:#C9D6F7}
.tag--flat{background:var(--sunk);color:var(--ink-2);border-color:var(--rule)}

/* Listing photographs, at a size for checking rather than for admiring: a
   moderator is asking "is this the right property and is anything in shot that
   should not be", which needs a legible thumbnail, not a hero image. */
.thumb{width:132px;height:99px;object-fit:cover;border-radius:8px;border:1px solid var(--rule);background:var(--sunk);display:block}
.tag--due{background:var(--mark);color:var(--ink);border-color:var(--mark-edge)}

/* ---------- table (hand built — no datatables package) ---------- */
.tablewrap{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.tablescroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{
  text-align:left;font:600 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 14px;background:var(--sunk);
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.t th[aria-sort]{cursor:pointer;user-select:none}
table.t th[aria-sort]:hover{color:var(--ink)}
table.t th[aria-sort=ascending]::after{content:" ↑";color:var(--mark-edge)}
table.t th[aria-sort=descending]::after{content:" ↓";color:var(--mark-edge)}
table.t td{padding:11px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--sunk)}
table.t tbody tr[data-due=true]{box-shadow:inset 3px 0 0 var(--mark)}
.t__primary{font-weight:600}
.t__sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.t__actions{text-align:right;white-space:nowrap}

/* ---------- SIGNATURE: the wait bar --------------------------------------
   A queue is ordered by how long someone has been waiting, so the row's own
   underline carries that fact. Hairline at zero, yellow as it approaches the
   service target, red past it. The numeric age is still printed beside it —
   the bar is redundant encoding, which is what makes it safe.
   ------------------------------------------------------------------------ */
.wait{display:inline-flex;align-items:center;gap:9px}
.wait__num{font:600 11.5px/1 var(--mono);color:var(--ink-2);min-width:34px}
.wait__track{position:relative;flex:0 0 auto;width:72px;height:2px;background:var(--rule-soft);border-radius:2px;overflow:hidden}
.wait__fill{position:absolute;inset:0 auto 0 0;background:var(--rule);border-radius:2px}
.wait[data-state=near] .wait__fill{background:var(--mark-edge)}
.wait[data-state=near] .wait__num{color:var(--wait)}
.wait[data-state=over] .wait__fill{background:var(--stop)}
.wait[data-state=over] .wait__num{color:var(--stop);font-weight:700}

/* ---------- empty ---------- */
.empty{padding:44px 20px;text-align:center}
.empty__title{font-weight:700;font-size:14px}
.empty__body{color:var(--ink-2);font-size:13px;margin-top:4px;max-width:44ch;margin-inline:auto}
.empty__action{margin-top:14px}

/* ---------- toast (replaces alert) ---------- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px;width:330px;max-width:calc(100vw - 36px)}
.toast{
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--ink-3);
  border-radius:var(--r);box-shadow:0 6px 20px rgba(10,10,10,.10);padding:11px 13px;
  display:flex;gap:10px;align-items:flex-start;
  animation:toast-in .16s cubic-bezier(.2,.7,.3,1);
}
.toast--go{border-left-color:var(--live)}
.toast--stop{border-left-color:var(--stop)}
.toast--due{border-left-color:var(--mark-edge)}
.toast__body{flex:1;min-width:0}
.toast__title{font-weight:700;font-size:12.5px}
.toast__text{font-size:12px;color:var(--ink-2);margin-top:1px;overflow-wrap:anywhere}
.toast__close{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.toast__close:hover{color:var(--ink)}
.toast.is-leaving{animation:toast-out .14s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(4px)}}

/* ---------- modal (replaces confirm) ---------- */
dialog.modal{
  border:0;padding:0;background:transparent;max-width:min(94vw,460px);width:100%;
  color:var(--ink);
}
dialog.modal::backdrop{background:rgba(10,10,10,.34);backdrop-filter:blur(1.5px)}
.modal__card{background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 16px 48px rgba(10,10,10,.18);overflow:hidden;
  animation:modal-in .15s cubic-bezier(.2,.7,.3,1)}
.modal__head{padding:15px 18px 0}
.modal__title{font-size:15px;font-weight:800;letter-spacing:-.015em;margin:0}
.modal__body{padding:8px 18px 16px;font-size:13px;color:var(--ink-2);white-space:pre-line}
.modal__foot{padding:12px 18px;background:var(--sunk);border-top:1px solid var(--rule-soft);
  display:flex;justify-content:flex-end;gap:8px}
@keyframes modal-in{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:none}}

/* ---------- misc ---------- */
.row{display:flex;align-items:center;gap:8px}
.row--wrap{flex-wrap:wrap}
.spacer{flex:1}
.hr{height:1px;background:var(--rule-soft);border:0;margin:16px 0}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--rule);background:var(--paper);
  border-radius:99px;padding:4px 10px;font-size:12px;cursor:pointer}
.chip:hover{background:var(--sunk)}
.chip[aria-pressed=true]{background:var(--mark);border-color:var(--mark-edge);font-weight:700}
.is-busy{opacity:.55;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:900px){
  .shell{flex-direction:column}
  .rail{width:100%;flex:none;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto}
  .rail__nav{display:flex;gap:4px;padding:8px}
  .rail__group,.rail__foot{display:none}
  .page{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- settings ---------- */
.setting{display:flex;gap:20px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--rule-soft)}
.setting:last-child{border-bottom:0}
.setting__main{flex:1;min-width:0}
.setting__label{display:block;font-weight:650;font-size:13.5px;cursor:pointer}
.setting__desc{margin:3px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5;max-width:62ch}
.setting__control{flex:0 0 268px;max-width:268px}
.setting__hint{margin:5px 0 0;font-size:11.5px;color:var(--ink-3)}

/* Toggle. A button with role=switch, so it is keyboard-operable without a
   checkbox we would then have to fight to restyle. */
.toggle{position:relative;width:42px;height:24px;border-radius:99px;border:1px solid var(--rule);
  background:var(--sunk);cursor:pointer;padding:0;transition:background .14s ease,border-color .14s ease}
.toggle__knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:1px solid var(--rule);transition:transform .14s cubic-bezier(.2,.7,.3,1)}
.toggle[aria-checked=true]{background:var(--mark);border-color:var(--mark-edge)}
.toggle[aria-checked=true] .toggle__knob{transform:translateX(18px);border-color:var(--mark-edge)}

/* Simulation banner. Not dismissible on purpose — a simulated provider accepts
   a credential anyone can write, so it must never be quietly forgotten. */
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 15px;
  border-radius:var(--r);margin-bottom:18px;font-size:13px}
.banner b{font-size:12.5px}
.banner--sim{background:var(--mark-wash);border:1px solid var(--mark-edge)}
.banner--sim a{margin-left:auto;font-weight:650;color:var(--ink)}

/* ---------- staff sign-in ---------- */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ground)}
.signin__card{width:100%;max-width:352px;background:var(--paper);border:1px solid var(--rule);
  border-radius:10px;padding:24px;box-shadow:0 1px 2px rgba(10,10,10,.05),0 8px 28px rgba(10,10,10,.06)}
.signin__brand{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.signin__brand b{display:block;font-size:14px}
.signin__brand span{display:block;font:500 11px/1 var(--mono);color:var(--ink-3);margin-top:3px}
.signin__error{margin:0 0 14px;padding:9px 12px;border-radius:var(--r);font-size:12.5px;
  background:var(--stop-wash);color:var(--stop);border:1px solid #F3C9D1}
.signin__note{margin:14px 0 0;font-size:11.5px;color:var(--ink-3);text-align:center}

/* Sticky save bar. The page reserves space for it, otherwise it covers the last
   rows of the form — which is exactly where the most consequential settings sit. */
.savebar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;
  padding:12px 16px;margin:0 -16px -44px;background:var(--paper);
  border-top:1px solid var(--rule);box-shadow:0 -6px 18px rgba(10,10,10,.05);z-index:10}
.savebar .dim{font-size:12.5px}
.page:has(.savebar){padding-bottom:96px}

/* ---------- user detail rows ---------- */
.urow{display:flex;gap:14px;align-items:baseline;padding:9px 16px;border-bottom:1px solid var(--rule-soft);font-size:13px}
.urow:last-child{border-bottom:0}
.urow__label{flex:0 0 116px;color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.urow__value{flex:1;min-width:0;overflow-wrap:anywhere}
.banner--stop{background:var(--stop-wash);border:1px solid #F3C9D1}
.banner--stop b{color:var(--stop)}
/* Laravel's paginator markup */
.panel__foot nav{display:flex;gap:6px;align-items:center;font-size:12.5px}
.panel__foot nav a,.panel__foot nav span{padding:4px 9px;border:1px solid var(--rule);border-radius:var(--r);text-decoration:none}
.panel__foot nav [aria-current]{background:var(--mark);border-color:var(--mark-edge);font-weight:700}

.t__link{color:inherit;text-decoration:none}
.t__link:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--mark-edge);text-decoration-thickness:2px}

/* ---------- keyboard hints -----------------------------------------------
   The review screen is the one place in this console where the keyboard is the
   primary interface — a moderator makes the same decision two hundred times a
   day, and reaching for the mouse between each one is most of the work. The
   hint has to be visible without competing with the decision it describes. */
kbd{
  font:600 10.5px/1 var(--mono);background:var(--sunk);border:1px solid var(--rule);
  border-bottom-width:2px;border-radius:4px;padding:2px 5px;color:var(--ink-2)
}
[aria-invalid=true]{border-color:var(--stop);box-shadow:0 0 0 3px var(--stop-wash)}