/* Variables + base properties moved to "Staff Dark Theme" section below (line ~890) */

.bh-beta-staff *,
.bhadmin *{box-sizing:border-box}

.bhadmin{
  max-width:1360px;
  margin:0 auto;
  color:var(--bh-staff-text);
  font-family:"DM Sans",-apple-system,sans-serif;
}

.bhadmin,
.bhadmin label,
.bhadmin div,
.bhadmin strong,
.bhadmin span{color:var(--bh-staff-text)}

.bhadmin input[type="checkbox"]{accent-color:var(--bh-staff-accent)}

.bhadmin-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.02);
}

.bhadmin-title{
  margin:0;
  color:var(--bh-staff-text);
  font-size:22px;
  line-height:1.15;
  font-weight:700;
}

.bhadmin-sub{
  margin-top:4px;
  color:var(--bh-staff-muted);
  font-size:13px;
  line-height:1.4;
}

.bhadmin-section{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--bh-staff-border);
  background:var(--bh-staff-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.bhadmin-section-title{
  margin:0 0 12px;
  color:var(--bh-staff-accent);
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.bhadmin .bhadmin-btn,
.bhadmin .bhadmin-btn-ghost,
.bh-beta-staff-toolbar button,
.bh-beta-staff-toolbar .button,
.bh-beta-staff .button{
  min-height:44px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--bh-staff-border);
  background:rgba(212,175,55,.18);
  color:var(--bh-staff-text);
  box-shadow:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.bhadmin .bhadmin-btn:hover,
.bhadmin .bhadmin-btn-ghost:hover,
.bh-beta-staff-toolbar button:hover,
.bh-beta-staff-toolbar .button:hover,
.bh-beta-staff .button:hover{
  background:rgba(212,175,55,.26);
  border-color:rgba(212,175,55,.5);
}

.bhadmin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

.bhadmin-card{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--bh-staff-border);
  background:var(--bh-staff-card);
}

.bhadmin-card-title{
  color:var(--bh-staff-text);
  font-size:14px;
  font-weight:700;
  margin-bottom:8px;
}

.bhadmin-card-title span{
  color:var(--bh-staff-muted);
  font-weight:500;
}

.bhadmin-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:var(--bh-staff-muted);
  font-size:13px;
}

.bhadmin .bhadmin-row input[type="number"],
.bhadmin .bhPickupVerify,
.bhadmin input[type="text"],
.bhadmin input[type="search"],
.bhadmin input[type="time"],
.bhadmin textarea,
.bhadmin select{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--bh-staff-border);
  background:#0f0f0f;
  color:var(--bh-staff-text);
}

.bhadmin textarea{min-height:76px;padding:8px 10px}

.bhadmin .bhadmin-row input[type="number"]:focus,
.bhadmin .bhPickupVerify:focus,
.bhadmin input:focus,
.bhadmin textarea:focus,
.bhadmin select:focus{
  outline:none;
  border-color:rgba(212,175,55,.5);
  box-shadow:0 0 0 3px rgba(212,175,55,.16);
}

.bhadmin-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--bh-staff-muted);
  font-size:13px;
}

.bhadmin-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.bhadmin-msg{
  color:var(--bh-staff-muted);
  font-size:12px;
}

.bhadmin-order-empty{
  display:grid;
  place-items:center;
  min-height:92px;
  padding:14px;
  border-radius:12px;
  border:1px dashed var(--bh-staff-border);
  background:rgba(255,255,255,.02);
  color:var(--bh-staff-muted);
  text-align:center;
  font-size:13px;
}

.bhadmin-order-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

.bhadmin-order{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--bh-staff-border);
  background:var(--bh-staff-card);
}

.bh-staff-blocklist-panel{
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--bh-staff-border);
  background: rgba(255,255,255,.02);
}
.bh-staff-blocklist-panel > header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  font-size:12px;
  color:var(--bh-staff-accent);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.bh-staff-blocklist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px;
}
.bh-staff-block-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--bh-staff-border);
  background:var(--bh-staff-card);
}
.bh-staff-block-item strong{
  display:block;
  font-size:13px;
  line-height:1.2;
}
.bh-staff-block-item small{
  display:block;
  margin-top:2px;
  color:var(--bh-staff-muted);
  font-size:11px;
  line-height:1.25;
}
.bh-staff-block-item button{
  min-height:44px;
  padding:0 14px;
  border-radius:9px;
  border:1px solid var(--bh-staff-border);
  background:rgba(212,175,55,.14);
  color:var(--bh-staff-text);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.bh-staff-block-item button:hover{
  background:rgba(212,175,55,.24);
}
.bh-staff-code{
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: #f2d47a;
  flex: 1 1 40%;
  min-width: 0;
  line-height: 1.15;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  word-break: break-all;
}
.bh-staff-hms{
  font-size: .72rem;
  color: #e8d7a0;
  margin: 1px 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .02em;
}
.bh-staff-hms.is-gold{ color:#f0d988; }
.bh-staff-hms.is-warn{ color:#ffb35b; }
.bh-staff-hms.is-hot{
  color:#ff6f6f;
  font-weight:700;
  animation: bhStaffTimePulse 1.3s ease-in-out infinite;
}
.bh-staff-order header em.is-gold{ color:#e8d7a0; }
.bh-staff-order header em.is-warn{ color:#ffb35b; }
.bh-staff-order header em.is-hot{ color:#ff6f6f; font-weight:700; }
@keyframes bhStaffTimePulse{
  0%,100%{ opacity:1; text-shadow:0 0 0 rgba(255,111,111,0); }
  50%{ opacity:.82; text-shadow:0 0 10px rgba(255,111,111,.38); }
}
.bh-staff-order.is-overdue{
  border-color: rgba(192,57,43,.55);
  border-left: 3px solid rgba(192,57,43,.9);
  box-shadow: 3px 3px 0 rgba(192,57,43,.3);
}
.bh-staff-order.is-overdue header em{
  color: #ff8070;
  font-weight: 700;
}
@keyframes bhStaffPulse{ 0%,100%{} }

.bhadmin-order-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.bhadmin-order-id{
  color:var(--bh-staff-text);
  font-size:14px;
  font-weight:700;
}

.bhadmin-order-time{
  margin-top:2px;
  color:var(--bh-staff-muted);
  font-size:12px;
}

.bhadmin-pickup{text-align:right}

.bhadmin-pickup-label{
  color:var(--bh-staff-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.bhadmin-pickup-code{
  color:var(--bh-staff-accent);
  font-size:18px;
  font-weight:800;
  line-height:1.1;
}

.bhadmin-pickup-eta,
.bhadmin-pickup-status{
  margin-top:3px;
  color:var(--bh-staff-muted);
  font-size:12px;
}

.bhadmin-items{
  display:grid;
  gap:4px;
  color:var(--bh-staff-text);
  font-size:13px;
  line-height:1.4;
}

.bhadmin-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:12px;
}

.bh-beta-staff-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--bh-staff-panel);
  border:1px solid var(--bh-staff-border);
}
.bh-staff-ops{
  display:grid;
  gap:10px;
  margin-bottom:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--bh-staff-border);
}
.bh-staff-ops__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.bh-staff-ops__head small{
  color:var(--bh-staff-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.bh-staff-ops__toggles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bh-staff-toggle{
  min-height:48px;
  padding:0 16px;
  border-radius:0;
  border:2px solid var(--bh-staff-border);
  color:var(--bh-staff-muted);
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:border-color .15s, color .15s;
}
.bh-staff-toggle.is-on{
  background:transparent;
  border-color:var(--bh-staff-accent);
  color:var(--bh-staff-accent);
}
.bh-staff-toggle.is-off{
  background:transparent;
  color:var(--bh-staff-muted);
}
.bh-staff-analytics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bh-beta-staff-toolbar input{
  min-height:36px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--bh-staff-border);
  background:#101010;
  color:var(--bh-staff-text);
}
.bh-staff-order.is-focus{
  border-color: var(--bh-staff-accent);
  box-shadow: 3px 3px 0 rgba(192,57,43,.4);
}

.bh-staff-station{
  margin: 0 0 12px;
  border: 2px solid rgba(192,57,43,.35);
  border-left: 4px solid var(--accent, #c0392b);
  border-radius: 0;
  background: rgba(192,57,43,.04);
  padding: 12px;
  box-shadow: none;
}
.bh-staff-station__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.bh-staff-station__head small{
  display:block;
  color:var(--bh-staff-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.bh-staff-station__head h4{
  margin:2px 0 4px;
  color:#f4df8a;
  font-size:1.2rem;
  line-height:1.1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.bh-staff-station__head p{
  margin:0;
  color:var(--bh-staff-muted);
  font-size:12px;
}
.bh-staff-station__actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.bh-staff-station__actions button{
  min-height:48px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.05);
  color:var(--bh-staff-text);
  cursor:pointer;
  font-size:13px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.bh-staff-station__body{
  display:grid;
  gap:8px;
}
.bh-staff-station-item{
  border:1px solid var(--bh-staff-border);
  border-radius:10px;
  padding:8px;
  background:rgba(0,0,0,.2);
}
.bh-staff-station-item__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.bh-staff-station-item__top strong{
  font-size:14px;
  color:var(--bh-staff-text);
}
.bh-staff-station-item__top span{
  font-size:12px;
  color:var(--bh-staff-muted);
}
.bh-staff-station-item__ingredients{
  margin:5px 0 0;
  font-size:12px;
  color:#f1dfab;
  line-height:1.35;
}
.bh-staff-station-item__mods{
  margin:4px 0 0;
  font-size:11px;
  color:var(--bh-staff-muted);
  line-height:1.35;
}

.bh-staff-login{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px dashed var(--bh-staff-border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
.bh-staff-login h3{margin:0;color:var(--bh-staff-accent);font-size:20px;text-align:center}
.bh-staff-login p{margin:0;color:var(--bh-staff-muted);font-size:14px;text-align:center}
.bh-staff-login-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bh-staff-login-row input{
  min-height:54px;padding:0 16px;border-radius:12px;border:1px solid var(--bh-staff-border);
  background:#101010;color:var(--bh-staff-text);min-width:0;flex:1;
  font-size:20px;text-align:center;letter-spacing:.15em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.bh-staff-login-row button{
  min-height:54px;padding:0 20px;border-radius:12px;border:1px solid var(--bh-staff-border);
  background:rgba(212,175,55,.22);color:var(--bh-staff-text);
  font-size:15px;font-weight:700;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* ── Number pad for login ────────────────────────────────────────────── */
.bh-staff-numpad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:4px;
}
.bh-staff-numpad button{
  min-height:64px !important;
  border-radius:12px !important;
  font-size:22px !important;
  font-weight:700 !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--bh-staff-border) !important;
  color:var(--bh-staff-text) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background .1s;
}
.bh-staff-numpad button:active{
  background:rgba(212,175,55,.2) !important;
}
.bh-staff-numpad button[data-key="backspace"]{
  font-size:18px !important;
  color:var(--bh-staff-muted) !important;
}
.bh-staff-numpad button[data-key="clear"]{
  font-size:13px !important;
  color:#ff9999 !important;
  letter-spacing:.04em;
}
.bh-staff-metrics{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;
  padding:8px 10px;border:1px solid var(--bh-staff-border);border-radius:10px;background:rgba(255,255,255,.03);
  position: sticky;
  top: 54px;
  z-index: var(--z-raised);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (min-width:783px){
  .bh-staff-metrics{ top: 40px; }
}
.bh-staff-session-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.03);
  color:var(--bh-staff-muted);
  font-size:12px;
}
.bh-staff-queue{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;
  margin:0 0 10px;
}
.bh-staff-kpi{
  border:1px solid var(--bh-staff-border);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  padding:8px;
  display:grid;
  gap:2px;
}
.bh-staff-kpi small{color:var(--bh-staff-muted);font-size:11px}
.bh-staff-kpi strong{color:var(--bh-staff-accent);font-size:17px;line-height:1.1}
.bh-staff-profiles{
  margin:0 0 12px;
  border:1px solid var(--bh-staff-border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  padding:8px;
}
.bh-staff-profiles > header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.bh-staff-profiles > header button{
  min-height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.03);color:var(--bh-staff-muted);
}
.bh-staff-profile-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:7px;
  border:1px solid rgba(212,175,55,.18);
  border-radius:10px;
  margin-bottom:6px;
}
.bh-staff-profile-row strong{display:block;color:var(--bh-staff-text)}
.bh-staff-profile-row small{display:block;color:var(--bh-staff-muted);font-size:12px}
.bh-staff-profile-actions{display:flex;gap:6px}
.bh-staff-profile-actions button{
  min-height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--bh-staff-border);
  background:rgba(212,175,55,.16);color:var(--bh-staff-text);
}
.bh-staff-metrics button{
  margin-left:auto;min-height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.03);color:var(--bh-staff-muted);
}

.bh-staff-order{
  display:grid;
  gap:6px;
  padding:10px 12px;
  border:1px solid var(--bh-staff-border);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  margin-bottom:0;
}
.bh-staff-items{
  display:grid;
  gap:3px;
}
.bh-staff-item-line{
  font-size:12px;
  color:var(--bh-staff-text);
  line-height:1.35;
}
.bh-staff-stock-btn{
  margin-left:8px;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,111,111,.56);
  background:rgba(255,111,111,.14);
  color:#ffd3d3;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.bh-staff-mod-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
.bh-staff-mod{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:11px;
  border:1px solid var(--bh-staff-border);
}
.bh-staff-mod--remove{
  color:#ffb3b3;
  border-color:rgba(255,111,111,.6);
  background:rgba(255,111,111,.14);
}
.bh-staff-mod--extra{
  color:#f8df97;
  border-color:rgba(212,175,55,.55);
  background:rgba(212,175,55,.14);
}
.bh-staff-mod--note{
  color:var(--bh-staff-muted);
  background:rgba(255,255,255,.06);
}
.bh-staff-customer{
  font-size:10px;
  color:#a0a0a0;
  flex:1 1 0;
  min-width:0;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bh-staff-assigned{
  font-size:10px;
  color:#8b8b6a;
  flex:1 1 0;
  min-width:0;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bh-staff-table{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.55);
  color:#f4df8a;
  font-size:10px;
  letter-spacing:.06em;
  font-weight:700;
  text-transform:uppercase;
}
.bh-staff-order header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.bh-staff-order header span,
.bh-staff-order header em{
  color:var(--bh-staff-muted);
  font-size:12px;
}
.bh-staff-actions{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.bh-staff-actions button{
  min-height:44px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.03);
  color:var(--bh-staff-text);
  cursor:pointer;
  font-size:12px;
  letter-spacing:.03em;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.bh-staff-actions button[data-notify]{
  border-color: rgba(212,175,55,.4);
  background: rgba(212,175,55,.10);
  box-shadow: none;
}
.bh-staff-pay-flag{
  border-color:rgba(255,111,111,.7) !important;
  background:rgba(255,111,111,.16) !important;
  color:#ffd2d2 !important;
  animation: bhPayPulse 1.2s ease-in-out infinite;
}
.bh-staff-profiles-panel{
  margin-bottom: 10px;
  border:1px solid var(--bh-staff-border);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:10px;
}
.bh-staff-profiles-panel > header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.bh-staff-profiles-panel > header strong{ color: var(--bh-staff-accent); }
.bh-staff-profiles-panel > header small{ color: var(--bh-staff-muted); }
.bh-staff-profiles-grid{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.bh-staff-profile-card{
  border:1px solid var(--bh-staff-border);
  border-radius:10px;
  background:rgba(0,0,0,.2);
  padding:8px;
  display:grid;
  gap:4px;
}
.bh-staff-profile-card strong{color:var(--bh-staff-text);font-size:13px}
.bh-staff-profile-card small{color:var(--bh-staff-muted);font-size:11px}
.bh-staff-profile-card-info{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bh-staff-age-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;line-height:1.4}
.bh-staff-age-badge.is-pass{background:rgba(46,160,67,.25);color:#2ea043}
.bh-staff-age-badge.is-fail{background:rgba(218,54,51,.25);color:#da3633}
.bh-staff-profile-time{display:block;color:var(--bh-staff-muted);font-size:10px}
.bh-staff-profile-card-actions{display:flex;gap:6px;margin-top:4px}
.bh-staff-profile-card-actions button{
  min-height:44px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--bh-staff-border);
  background:rgba(212,175,55,.15);
  color:var(--bh-staff-text);
  font-size:13px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
@keyframes bhPayPulse{
  0%,100%{ box-shadow:0 0 0 rgba(255,111,111,0); }
  50%{ box-shadow:0 0 12px rgba(255,111,111,.35); }
}
.bh-staff-actions button[disabled]{
  opacity:.55;
  cursor:not-allowed;
}
.bh-staff-status-btn.is-active{
  opacity:1;
  border-color:rgba(212,175,55,.6);
  background:rgba(212,175,55,.18);
  color:#f7df95;
}
.bh-staff-status-btn[data-status="READY"].is-active{
  border-color:rgba(95,205,145,.65);
  background:rgba(95,205,145,.18);
  color:#bbffd7;
}
.bh-staff-status-btn[data-status="IN_PROGRESS"].is-active{
  border-color:rgba(255,179,91,.68);
  background:rgba(255,179,91,.16);
  color:#ffd8ac;
}
.bh-staff-status-btn[data-status="CANCELLED"].is-active{
  border-color:rgba(255,111,111,.62);
  background:rgba(255,111,111,.14);
  color:#ffc5c5;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first, tablet-optimized for staff use
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Phone (base) — single column, large touch targets ─────────────────── */
/* Mobile-first: these are the default phone styles. Overrides go in min-width. */

/* ── Tablet portrait (768px+) — 2-column orders ───────────────────────── */
@media (min-width:768px){
  .bh-beta-staff{padding:10px 12px !important}
  .bhadmin-title{font-size:18px}

  .bh-beta-staff-toolbar{
    flex-wrap:nowrap !important;
    gap:8px !important;
  }
  .bh-beta-staff-toolbar input[type="search"]{
    min-height:40px !important;
    font-size:13px !important;
  }
  .bh-beta-staff-toolbar select{
    min-height:40px !important;
    font-size:12px !important;
    max-width:130px !important;
  }

  .bh-staff-dash-nav__item{
    min-height:44px;
    font-size:12px !important;
  }

  .bh-staff-actions button{
    min-height:48px !important;
    font-size:12px !important;
    padding:0 14px !important;
  }

  .bh-staff-station-filters button{
    min-height:44px !important;
    padding:0 16px !important;
    font-size:12px !important;
  }

  #bh-staff-list{
    display:grid;
    gap:8px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  #bh-staff-list > .bh-staff-metrics,
  #bh-staff-list > .bh-staff-dash-nav,
  #bh-staff-list > .bh-staff-agent-bar,
  #bh-staff-list > .bh-staff-dash-section,
  #bh-staff-list > .bh-staff-station-filters,
  #bh-staff-list > .bh-staff-table-history,
  #bh-staff-list > .bh-staff-stock-panel,
  #bh-staff-list > .bh-staff-summary,
  #bh-staff-list > .bh-staff-section-hdr,
  #bh-staff-list > .bh-empty{
    grid-column:1 / -1;
  }
}

/* (tablet 768-1024 styles now merged into min-width:768px above) */

/* (1025-1280 2-col styles now covered by min-width:768px above) */

/* ── Desktop (1281px+) — 3 columns ──────────────────────────────────── */
@media (min-width:1281px){
  #bh-staff-list{
    display:grid;
    gap:8px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
  }
  #bh-staff-list > .bh-staff-metrics,
  #bh-staff-list > .bh-staff-dash-nav,
  #bh-staff-list > .bh-staff-agent-bar,
  #bh-staff-list > .bh-staff-dash-section,
  #bh-staff-list > .bh-staff-station-filters,
  #bh-staff-list > .bh-staff-table-history,
  #bh-staff-list > .bh-staff-stock-panel,
  #bh-staff-list > .bh-staff-summary,
  #bh-staff-list > .bh-staff-section-hdr,
  #bh-staff-list > .bh-empty{
    grid-column:1 / -1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Staff Dark Theme — Override app-shell white bg with !important
   ═══════════════════════════════════════════════════════════════════════ */
.bh-beta-staff{
  --bh-staff-bg: var(--bhoa-bg, #080808);
  --bh-staff-surface: var(--bhoa-surface, #0f0f0f);
  --bh-staff-card: var(--bhoa-surface, #0f0f0f);
  --bh-staff-border: rgba(255,255,255,.06);
  --bh-staff-border-strong: rgba(255,255,255,.1);
  --bh-staff-accent: var(--bhoa-accent, #c0392b);
  --bh-staff-text: var(--bhoa-text, #f0ede8);
  --bh-staff-muted: var(--bhoa-text-3, #666666);
  --bh-staff-panel: var(--bh-staff-surface);
  --bh-staff-radius: 0;
  --z-raised: 8;
  --z-toolbar: 20;
  padding: 10px 12px !important;
  margin: 0 !important;
  background: var(--bh-staff-bg) !important;
  color: var(--bh-staff-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 100vh;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.bh-beta-staff *,
.bh-beta-staff *::before,
.bh-beta-staff *::after{
  box-sizing: border-box;
}

.bhadmin{
  max-width: 100%;
  font-family: inherit;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.bh-beta-staff-toolbar{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--bh-staff-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bh-staff-border-strong) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: var(--z-toolbar) !important;
}

.bh-staff-back-btn{
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bh-staff-toolbar-title{
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bh-staff-accent) !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.bh-beta-staff-toolbar input[type="search"]{
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--bh-staff-border) !important;
  color: var(--bh-staff-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.bh-beta-staff-toolbar select{
  min-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--bh-staff-border) !important;
  color: var(--bh-staff-text) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  max-width: 130px !important;
}

.bh-beta-staff-toolbar input:focus,
.bh-beta-staff-toolbar select:focus{
  outline: none !important;
  border-color: var(--bh-staff-accent) !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,.2) !important;
}

/* ── Buttons — global dark reset ──────────────────────────────────────── */
.bh-beta-staff button,
.bh-beta-staff .button,
.bh-beta-staff a.button{
  border: 2px solid var(--bh-staff-border-strong) !important;
  background: transparent !important;
  color: var(--bh-staff-text) !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: border-color .15s, color .15s !important;
}

.bh-beta-staff button:hover,
.bh-beta-staff .button:hover,
.bh-beta-staff a.button:hover{
  border-color: var(--bh-staff-accent) !important;
  background: transparent !important;
  color: var(--bh-staff-accent) !important;
}

.bh-beta-staff button:disabled,
.bh-beta-staff button[disabled]{
  opacity: .3 !important;
  cursor: not-allowed !important;
}

/* ── Order Cards ──────────────────────────────────────────────────────── */
.bh-staff-order{
  background: var(--bh-staff-card) !important;
  border: 2px solid var(--bh-staff-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.bh-staff-order:hover{
  border-color: rgba(192,57,43,.3) !important;
  box-shadow: 2px 2px 0 rgba(192,57,43,.2) !important;
}

.bh-staff-order.is-overdue{
  border-color: rgba(192,57,43,.7) !important;
  border-left-width: 4px !important;
  box-shadow: 3px 3px 0 rgba(192,57,43,.4) !important;
}

/* ── Logged-out state — hide everything except login ─────────────────── */
.bh-beta-staff.is-logged-out .bh-beta-staff-toolbar,
.bh-beta-staff.is-logged-out .bh-staff-ops,
.bh-beta-staff.is-logged-out .bh-staff-station{
  display:none !important;
}
.bh-beta-staff.is-logged-out #bh-staff-list{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:calc(100vh - 80px) !important;
}

/* ── Login Panel ──────────────────────────────────────────────────────── */
.bh-staff-login{
  background: var(--bh-staff-surface) !important;
  border: 2px solid var(--bh-staff-border-strong) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(192,57,43,.5) !important;
  max-width: 380px;
  width:100%;
  margin: 0 auto !important;
  padding: 28px 24px !important;
}

.bh-staff-login h3{
  color: var(--bh-staff-accent) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.bh-staff-login p{
  color: var(--bh-staff-muted) !important;
}

.bh-staff-login-row input{
  min-height: 56px !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--bh-staff-border-strong) !important;
  color: var(--bh-staff-text) !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-align: center !important;
  letter-spacing: .15em !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.bh-staff-login-row input:focus{
  outline: none !important;
  border-bottom-color: var(--bh-staff-accent) !important;
  /* Visible focus replacement — the PIN field must show keyboard focus */
  box-shadow: none !important;
}

.bh-staff-login-row button{
  min-height: 56px !important;
  padding: 0 24px !important;
  background: var(--bh-staff-accent) !important;
  border: 2px solid var(--bh-staff-accent) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .15s, box-shadow .15s !important;
}

.bh-staff-login-row button:hover{
  filter: none !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.6) !important;
}

/* ── Station panel (focused order detail) ─────────────────────────────── */
.bh-staff-station{
  border: 2px solid rgba(192,57,43,.4) !important;
  border-left: 4px solid var(--bh-staff-accent) !important;
  border-radius: 0 !important;
  background: rgba(192,57,43,.03) !important;
  box-shadow: none !important;
}

/* ── Profile / Block cards ────────────────────────────────────────────── */
.bh-staff-profile-card{
  background: var(--bh-staff-card) !important;
  border: 2px solid var(--bh-staff-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bh-staff-block-item{
  background: var(--bh-staff-card) !important;
  border: 2px solid var(--bh-staff-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Stock panel ──────────────────────────────────────────────────────── */
.bh-staff-stock-panel{
  border-bottom: 1px solid var(--bh-staff-border) !important;
}

.bh-staff-stock-item{
  border-bottom-color: var(--bh-staff-border) !important;
}

/* ── Ops section ─────────────────────────────────────────────────────── */
.bh-staff-ops{
  background: var(--bh-staff-surface) !important;
  border: 1px solid var(--bh-staff-border) !important;
  border-radius: var(--bh-staff-radius) !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
}
.bh-staff-ops:empty{
  display: none !important;
}

/* ── Status buttons — colored states ──────────────────────────────────── */
.bh-staff-status-btn.is-active{
  background: transparent !important;
  border-color: #d4af37 !important;
  color: #d4af37 !important;
  box-shadow: 2px 2px 0 rgba(212,175,55,.3) !important;
}
.bh-staff-status-btn[data-status="READY"].is-active{
  border-color: #5fcd91 !important;
  background: transparent !important;
  color: #5fcd91 !important;
  box-shadow: 2px 2px 0 rgba(95,205,145,.3) !important;
}
.bh-staff-status-btn[data-status="IN_PROGRESS"].is-active{
  border-color: #ffb35b !important;
  background: transparent !important;
  color: #ffb35b !important;
  box-shadow: 2px 2px 0 rgba(255,179,91,.3) !important;
}
.bh-staff-status-btn[data-status="CANCELLED"].is-active{
  border-color: #ff6f6f !important;
  background: transparent !important;
  color: #ff6f6f !important;
  box-shadow: 2px 2px 0 rgba(255,111,111,.3) !important;
}

/* ── Stale orders (> 24h) — de-emphasized ─────────────────────────────── */
.bh-staff-order.is-stale{
  opacity: .5;
  border-style: dashed !important;
}
.bh-staff-order.is-stale:hover{
  opacity: .8;
}
.bh-staff-hms.is-stale{
  color: var(--bh-staff-muted);
  font-weight: 400;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.bh-beta-staff .bh-empty{
  color: var(--bh-staff-muted) !important;
  text-align: center;
  padding: 32px 16px;
  font-size: 12px;
  letter-spacing: .04em;
  border: 1px dashed var(--bh-staff-border);
  border-radius: 10px;
  margin: 8px 0;
}
.bh-beta-staff .bh-empty:empty{
  display: none;
}

.bh-staff-station-filters{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.bh-staff-station-filters button{
  min-height:44px;
  padding:0 16px !important;
  border:2px solid rgba(255,255,255,.08) !important;
  background:transparent !important;
  color:#9e9e9e !important;
  border-radius:0 !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.1em !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.bh-staff-station-filters button.is-active{
  border-color:var(--bh-staff-accent) !important;
  background:transparent !important;
  color:var(--bh-staff-accent) !important;
}

.bh-staff-busy-btn{
  border-color:rgba(255,111,111,.62) !important;
  color:#ffc8c8 !important;
}

.bh-staff-order header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.bh-staff-head-main{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}
.bh-staff-head-side{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.bh-staff-meta-row{
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:11px;
  color:var(--bh-staff-muted);
}
.bh-staff-lane,
.bh-staff-priority{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border:1px solid rgba(255,255,255,.14);
  font-size:9px;
  border-radius:999px;
  letter-spacing:.06em;
  font-weight:600;
}
.bh-staff-lane.is-barra{ color:#d8d8d8; }
.bh-staff-lane.is-cocina{ color:#ffd6a1; border-color:rgba(255,179,91,.5); }
.bh-staff-priority.is-bodega{ color:#baf3d1; border-color:rgba(95,205,145,.56); }

.bh-staff-hms.is-ok{ color:#c5d9b3; }
.bh-staff-hms.is-warn{ color:#ffb35b; }
.bh-staff-hms.is-hot{
  color:#ff6f6f;
  font-weight:700;
  animation: bhStaffTimePulse 1.3s ease-in-out infinite;
}
.bh-staff-order .bh-staff-meta-row em.is-ok{ color:#c5d9b3; }
.bh-staff-order .bh-staff-meta-row em.is-warn{ color:#ffb35b; }
.bh-staff-order .bh-staff-meta-row em.is-hot{ color:#ff6f6f; font-weight:700; }

.bh-staff-stock-panel{
  display:grid;
  gap:6px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:8px;
}
.bh-staff-stock-panel > header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.bh-staff-stock-panel > header strong{
  color:var(--bh-staff-accent);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bh-staff-stock-panel > header small{
  color:#7f7f7f;
  font-size:11px;
}
.bh-staff-stock-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.bh-staff-stock-item strong{
  display:block;
  font-size:13px;
}
.bh-staff-stock-item small{
  color:#8b8b8b;
  font-size:11px;
}

.bh-staff-table{
  cursor:pointer;
}
.bh-staff-table-history{
  padding:8px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:8px;
}
.bh-staff-table-history > header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.bh-staff-table-history ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
}
.bh-staff-table-history li{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
}
.bh-staff-table-history li small{
  color:#8d8d8d;
}

/* ── Dashboard Navigation (animated tab indicator) ───────────────────── */
.bh-staff-dash-nav{
  position:relative;
  display:flex;
  gap:2px;
  padding:4px;
  margin-bottom:10px;
  border:1px solid var(--bh-staff-border);
  border-radius:10px;
  background:var(--bh-staff-surface);
}
.bh-staff-dash-nav__item{
  position:relative;
  z-index:1;
  flex:1;
  min-height:44px;
  padding:0 8px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--bh-staff-muted) !important;
  font-size:12px !important;
  font-weight:600;
  font-family:inherit !important;
  letter-spacing:.04em;
  cursor:pointer;
  transition:color .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.bh-staff-dash-nav__item:hover{
  color:var(--bh-staff-text) !important;
}
.bh-staff-dash-nav__item.is-active{
  color:var(--bh-staff-text) !important;
  background:transparent !important;
}
.bh-staff-dash-nav__indicator{
  position:absolute;
  top:4px;
  bottom:4px;
  left:4px;
  width:calc(25% - 3px);
  border-radius:8px;
  background:color-mix(in srgb, var(--bh-staff-accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--bh-staff-accent) 20%, transparent);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:0;
}
.bh-staff-dash-nav__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--bh-staff-accent);
  color:#fff;
  font-size:10px;
  font-weight:700;
  margin-left:4px;
  vertical-align:middle;
}

/* ── Agent Bar (compact) ──────────────────────────────────────────────── */
.bh-staff-agent-bar{
  padding:6px 12px;
  margin-bottom:6px;
  font-size:10px;
  color:var(--bh-staff-accent);
  letter-spacing:.04em;
  text-align:center;
  border:1px solid rgba(201,168,76,.15);
  border-radius:6px;
  background:rgba(201,168,76,.04);
}

/* ── Dashboard Section ────────────────────────────────────────────────── */
.bh-staff-dash-section{
  padding:12px;
  border:1px solid var(--bh-staff-border);
  border-radius:10px;
  background:var(--bh-staff-surface);
  margin-bottom:8px;
}
.bh-staff-dash-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.bh-staff-dash-section__head strong{
  color:var(--bh-staff-accent);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bh-staff-dash-section__head small{
  color:#7f7f7f;
  font-size:11px;
}

/* ── Team / Employee Zone ─────────────────────────────────────────────── */
.bh-staff-team{
  display:grid;
  gap:6px;
  justify-items:center;
  text-align:center;
  padding:24px 10px;
}
.bh-staff-team__avatar{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid rgba(197,160,89,.5);
  background:rgba(197,160,89,.12);
  color:#ecd7ac;
  font-size:22px;
  font-weight:700;
}
.bh-staff-team__name{
  margin:4px 0 0;
  color:#f0dfbe;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}
.bh-staff-team__code{
  display:block;
  color:#8a8a7a;
  font-size:12px;
  letter-spacing:.06em;
}
.bh-staff-team__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  max-width:340px;
  margin:12px 0;
}
.bh-staff-team__stat{
  padding:10px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
.bh-staff-team__stat strong{
  display:block;
  color:#ecd7ac;
  font-size:16px;
  font-weight:700;
  line-height:1.15;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.bh-staff-team__stat small{
  display:block;
  margin-top:3px;
  color:#8a8a7a;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.bh-staff-team__logout{
  margin-top:8px;
  min-height:40px;
  padding:0 20px !important;
  border:1px solid rgba(255,111,111,.45) !important;
  border-radius:10px !important;
  background:rgba(255,111,111,.1) !important;
  color:#ffc8c8 !important;
  font-size:13px !important;
  font-weight:600;
  font-family:inherit !important;
  cursor:pointer;
  transition:background .12s,border-color .12s;
}
.bh-staff-team__logout:hover{
  background:rgba(255,111,111,.2) !important;
  border-color:rgba(255,111,111,.6) !important;
}

/* ── Staff list container ─────────────────────────────────────────────── */
#bh-staff-list{
  padding:4px 0;
}

/* ── Grid spanning for dashboard elements ─���───────────────────────────── */
#bh-staff-list > .bh-staff-dash-nav,
#bh-staff-list > .bh-staff-agent-bar,
#bh-staff-list > .bh-staff-dash-section,
#bh-staff-list > .bh-staff-station-filters,
#bh-staff-list > .bh-staff-table-history,
#bh-staff-list > .bh-staff-stock-panel,
#bh-staff-list > .bh-staff-summary,
#bh-staff-list > .bh-staff-section-hdr,
#bh-staff-list > .bh-empty{
  grid-column:1 / -1;
}

/* ═══════════════════════════════════════════════════════════════════════
   REDESIGN v2 — Summary bar, section headers, compact cards
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Summary Bar ─────────────────────────────────────────────────────── */
.bh-staff-summary{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.bh-staff-summary__chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.03);
  color:var(--bh-staff-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
}
.bh-staff-summary__chip.is-accent{
  border-color:rgba(201,168,76,.4);
  color:#ecd7ac;
  background:rgba(201,168,76,.08);
}
.bh-staff-summary__chip.is-new{
  border-color:rgba(201,168,76,.3);
  color:#f2e2b6;
}
.bh-staff-summary__chip.is-progress{
  border-color:rgba(255,179,91,.3);
  color:#ffd8ac;
}
.bh-staff-summary__chip.is-ready{
  border-color:rgba(95,205,145,.3);
  color:#b4f5d0;
}

/* ── Section Headers ─────────────────────────────────────────────────── */
.bh-staff-section-hdr{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 0;
  margin:4px 0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bh-staff-accent);
  border-bottom:1px solid var(--bh-staff-border);
}
.bh-staff-section-hdr.is-closed{
  color:var(--bh-staff-muted);
  margin-top:12px;
}
.bh-staff-section-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(201,168,76,.12);
  color:#ecd7ac;
  font-size:10px;
  font-weight:700;
}
.bh-staff-section-hdr.is-closed .bh-staff-section-count{
  background:rgba(255,255,255,.06);
  color:var(--bh-staff-muted);
}
.bh-staff-section-hdr button{
  margin-left:auto;
  min-height:44px !important;
  padding:0 10px !important;
  font-size:10px !important;
  border-radius:999px !important;
  letter-spacing:.04em;
}

/* ── Compact Card (closed orders) ────────────────────────────────────── */
.bh-staff-order.is-compact{
  padding:0 !important;
  background:rgba(255,255,255,.015) !important;
  border-color:rgba(255,255,255,.04) !important;
  box-shadow:none !important;
  margin-bottom:2px !important;
  border-radius:8px !important;
}
.bh-staff-compact-row{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  padding:10px 12px !important;
  min-height:48px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:8px !important;
  color:var(--bh-staff-muted) !important;
  font-size:11px !important;
  text-align:left !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
}
.bh-staff-compact-row:hover{
  background:rgba(255,255,255,.04) !important;
}
.bh-staff-compact-id{
  color:#b8a06a;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:11px;
  font-weight:700;
  min-width:42px;
}
.bh-staff-compact-badge{
  color:#a89660;
  font-size:9px;
  font-weight:600;
  letter-spacing:.04em;
}
.bh-staff-compact-time{
  color:#6b6b6b;
  font-size:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.bh-staff-compact-count{
  color:#a0a0a0;
  font-size:10px;
  font-style:normal;
}
.bh-staff-compact-status{
  margin-left:auto;
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  padding:1px 6px;
  border-radius:999px;
  flex-shrink:0;
}
.bh-staff-compact-status.is-cancelled{
  color:#ff9999;
  background:rgba(255,111,111,.08);
  border:1px solid rgba(255,111,111,.2);
}
.bh-staff-compact-status.is-completed{
  color:#8fd9a8;
  background:rgba(95,205,145,.08);
  border:1px solid rgba(95,205,145,.2);
}

/* ── Collapse button ─────────────────────────────────────────────────── */
.bh-staff-collapse-btn{
  min-height:44px !important;
  min-width:44px !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--bh-staff-muted) !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.bh-staff-collapse-btn:hover{
  color:var(--bh-staff-accent) !important;
}

/* ── Staff Dialog (replaces window.confirm/alert) ────────────────────── */
.bh-staff-dialog-backdrop{
  position:fixed;
  inset:0;
  z-index:var(--z-modal, 2000);
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px);
}
.bh-staff-dialog-box{
  width:min(380px, calc(100vw - 32px));
  padding:16px;
  border-radius:var(--bh-staff-radius);
  border:1px solid var(--bh-staff-border-strong);
  background:var(--bh-staff-surface);
  box-shadow:0 16px 48px rgba(0,0,0,.45);
  color:var(--bh-staff-text);
  font-family:inherit;
}
.bh-staff-dialog-msg{margin:0 0 14px;font-size:14px;line-height:1.5}
.bh-staff-dialog-actions{display:flex;gap:8px;justify-content:flex-end}
.bh-staff-dialog-btn{
  min-height:40px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid var(--bh-staff-border-strong);
  background:rgba(255,255,255,.04);
  color:var(--bh-staff-text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.bh-staff-dialog-btn.is-ok{
  border-color:rgba(201,168,76,.5);
  background:rgba(201,168,76,.12);
  color:#f2e2b6;
}

/* ═══════════════════════════════════════════════════════════════════════
   21st.dev-inspired component upgrades
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Status Badge Pills (order cards) ────────────────────────────────── */
.bh-staff-status-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px 3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  border:1px solid transparent;
  white-space:nowrap;
}
.bh-staff-status-pill__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.bh-staff-status-pill.is-new{
  background:rgba(212,175,55,.12);
  border-color:rgba(212,175,55,.3);
  color:#ecd7ac;
}
.bh-staff-status-pill.is-new .bh-staff-status-pill__dot{
  background:#d4af37;
  box-shadow:0 0 6px rgba(212,175,55,.5);
  animation:bhDotPulse 2s ease-in-out infinite;
}
.bh-staff-status-pill.is-in-progress{
  background:rgba(255,179,91,.1);
  border-color:rgba(255,179,91,.3);
  color:#ffd8ac;
}
.bh-staff-status-pill.is-in-progress .bh-staff-status-pill__dot{
  background:#ffb35b;
  box-shadow:0 0 6px rgba(255,179,91,.4);
}
.bh-staff-status-pill.is-ready{
  background:rgba(95,205,145,.1);
  border-color:rgba(95,205,145,.3);
  color:#b4f5d0;
}
.bh-staff-status-pill.is-ready .bh-staff-status-pill__dot{
  background:#5fcd91;
  box-shadow:0 0 6px rgba(95,205,145,.4);
}
.bh-staff-status-pill.is-completed{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:var(--bh-staff-muted);
}
.bh-staff-status-pill.is-completed .bh-staff-status-pill__dot{
  background:var(--bh-staff-muted);
}
.bh-staff-status-pill.is-cancelled{
  background:rgba(255,111,111,.08);
  border-color:rgba(255,111,111,.2);
  color:#ff9999;
}
.bh-staff-status-pill.is-cancelled .bh-staff-status-pill__dot{
  background:#ff6f6f;
}
@keyframes bhDotPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.6; transform:scale(1.3); }
}

/* ── Card Left-Border Status Accent ──────────────────────────────────── */
.bh-staff-order{
  border-left:3px solid var(--bh-staff-border) !important;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.bh-staff-order:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.2) !important;
}
.bh-staff-order[data-status="NEW"]{
  border-left-color:rgba(212,175,55,.6) !important;
}
.bh-staff-order[data-status="IN_PROGRESS"]{
  border-left-color:rgba(255,179,91,.6) !important;
}
.bh-staff-order[data-status="READY"]{
  border-left-color:rgba(95,205,145,.6) !important;
}
.bh-staff-order[data-status="COMPLETED"]{
  border-left-color:rgba(255,255,255,.08) !important;
}
.bh-staff-order[data-status="CANCELLED"]{
  border-left-color:rgba(255,111,111,.4) !important;
}

/* ── Modern Switch Toggles ───────────────────────────────────────────── */
.bh-staff-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-height:48px;
  padding:0 4px;
}
.bh-staff-switch__track{
  position:relative;
  width:44px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  transition:background .22s ease, border-color .22s ease;
  flex-shrink:0;
}
.bh-staff-switch__knob{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.bh-staff-switch.is-on .bh-staff-switch__track{
  background:rgba(95,205,145,.35);
  border-color:rgba(95,205,145,.5);
}
.bh-staff-switch.is-on .bh-staff-switch__knob{
  transform:translateX(20px);
  background:#5fcd91;
  box-shadow:0 0 8px rgba(95,205,145,.4);
}
.bh-staff-switch.is-off .bh-staff-switch__track{
  background:rgba(255,111,111,.15);
  border-color:rgba(255,111,111,.25);
}
.bh-staff-switch.is-off .bh-staff-switch__knob{
  background:#999;
}
.bh-staff-switch__label{
  font-size:13px;
  font-weight:600;
  color:var(--bh-staff-text);
  letter-spacing:.02em;
}
.bh-staff-switch.is-off .bh-staff-switch__label{
  color:var(--bh-staff-muted);
}

.bh-staff-reset-btn{
  margin-top:8px;
  padding:6px 14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:var(--bh-staff-muted);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s,color .2s;
  width:100%;
}
.bh-staff-reset-btn:hover{
  background:rgba(255,255,255,.12);
  color:var(--bh-staff-text);
}

/* ── Enhanced Summary Chips (dot indicators) ─────────────────────────── */
.bh-staff-summary__chip::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:5px;
  background:var(--bh-staff-muted);
  flex-shrink:0;
}
.bh-staff-summary__chip.is-accent::before{ background:#d4af37; }
.bh-staff-summary__chip.is-new::before{ background:#d4af37; animation:bhDotPulse 2s ease-in-out infinite; }
.bh-staff-summary__chip.is-progress::before{ background:#ffb35b; }
.bh-staff-summary__chip.is-ready::before{ background:#5fcd91; }

/* ── Improved Validate View Profile Cards ────────────────────────────── */
.bh-staff-profile-card{
  padding:12px !important;
  gap:8px !important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.bh-staff-profile-card:hover{
  border-color:color-mix(in srgb, var(--bh-staff-accent) 25%, transparent) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.bh-staff-profile-card-info{
  gap:8px !important;
}
.bh-staff-profile-card-info strong{
  font-size:14px !important;
}
.bh-staff-age-badge{
  padding:3px 10px !important;
  border-radius:999px !important;
  font-size:10px !important;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.bh-staff-profile-card small{
  font-size:12px !important;
  color:var(--bh-staff-muted);
}
.bh-staff-profile-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.bh-staff-profile-meta__chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:6px;
  border:1px solid var(--bh-staff-border);
  background:rgba(255,255,255,.03);
  color:var(--bh-staff-muted);
  font-size:11px;
}
.bh-staff-profile-card-actions{
  margin-top:6px !important;
}
.bh-staff-profile-card-actions button{
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:600;
  letter-spacing:.03em;
  min-height:38px !important;
  padding:0 16px !important;
}
.bh-staff-profile-card-actions button[data-profile-act="validate"]{
  background:rgba(95,205,145,.15) !important;
  border-color:rgba(95,205,145,.35) !important;
  color:#b4f5d0 !important;
}
.bh-staff-profile-card-actions button[data-profile-act="revoke"]{
  background:rgba(255,111,111,.1) !important;
  border-color:rgba(255,111,111,.25) !important;
  color:#ff9999 !important;
}

/* ── Improved Team/My Shift View ─────────────────────────────────────── */
.bh-staff-team__avatar{
  width:64px !important;
  height:64px !important;
  font-size:26px !important;
  border-color:color-mix(in srgb, var(--bh-staff-accent) 40%, transparent) !important;
  background:color-mix(in srgb, var(--bh-staff-accent) 10%, transparent) !important;
  color:var(--bh-staff-accent) !important;
}
.bh-staff-team__name{
  color:var(--bh-staff-text) !important;
  font-size:20px !important;
}
.bh-staff-team__code{
  color:var(--bh-staff-muted) !important;
}
.bh-staff-team__stat{
  background:rgba(255,255,255,.03) !important;
  border-color:var(--bh-staff-border) !important;
  border-radius:12px !important;
  padding:14px 12px !important;
  text-align:center;
  transition:border-color .18s ease;
}
.bh-staff-team__stat:hover{
  border-color:color-mix(in srgb, var(--bh-staff-accent) 25%, transparent) !important;
}
.bh-staff-team__stat strong{
  color:var(--bh-staff-accent) !important;
  font-size:20px !important;
}
.bh-staff-team__stat small{
  color:var(--bh-staff-muted) !important;
}
.bh-staff-team__logout{
  border-color:rgba(255,111,111,.3) !important;
  background:rgba(255,111,111,.08) !important;
  color:#ff9999 !important;
  border-radius:999px !important;
  font-size:13px !important;
  min-height:44px !important;
  padding:0 24px !important;
  transition:background .18s ease, border-color .18s ease;
}
.bh-staff-team__logout:hover{
  background:rgba(255,111,111,.16) !important;
  border-color:rgba(255,111,111,.5) !important;
}

/* ── Ops Panel (modern layout) ───────────────────────────────────────── */
.bh-staff-ops__toggles{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ── Waiter Call Banner ────────────────────────────────────────────────── */
.bh-waiter-banner{
  display:grid; gap:6px;
  margin-bottom:10px;
}
.bh-waiter-call{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,170,0,.15);
  border:1px solid rgba(255,170,0,.4);
  animation:bhWaiterPulse 2s ease-in-out infinite;
}
.bh-waiter-call__bell{
  font-size:1.1rem;
  animation:bhBellShake 1.5s ease-in-out infinite;
}
.bh-waiter-call__info{
  flex:1; min-width:0;
  font-size:.82rem; font-weight:600;
  color:var(--bh-staff-text);
}
.bh-waiter-call__info small{
  font-weight:400; opacity:.6; margin-left:4px;
}
.bh-waiter-call__ack{
  padding:4px 12px; border-radius:6px;
  border:none; background:var(--bh-staff-accent);
  color:#fff; font-size:.72rem; font-weight:700;
  cursor:pointer; text-transform:uppercase; letter-spacing:.06em;
}
.bh-waiter-call__ack:hover{ opacity:.85; }
.bh-waiter-call__resolve{
  width:28px; height:28px; border-radius:50%;
  border:none; background:rgba(255,255,255,.08);
  color:var(--bh-staff-text-2); font-size:.85rem;
  cursor:pointer; display:grid; place-items:center;
}
.bh-waiter-call__resolve:hover{ background:rgba(255,255,255,.15); }
.bh-waiter-call__reason{
  padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.08);
  font-size:.65rem; font-weight:600; color:rgba(255,170,0,.9);
  white-space:nowrap; text-transform:uppercase; letter-spacing:.05em;
}
.bh-waiter-call__ago{
  font-size:.7rem; color:var(--bh-staff-text-2); white-space:nowrap;
}
.bh-waiter-call__order{
  font-weight:400; opacity:.5; margin-left:2px;
}
/* Urgent escalation — >2min without acknowledgment */
.bh-waiter-call.is-urgent{
  background:rgba(220,38,38,.2);
  border-color:rgba(220,38,38,.6);
  animation:bhUrgentPulse 1s ease-in-out infinite;
}
.bh-waiter-call.is-urgent .bh-waiter-call__bell{
  animation:bhBellShake .6s ease-in-out infinite;
}
.bh-waiter-call.is-urgent .bh-waiter-call__reason{
  background:rgba(220,38,38,.25); border-color:rgba(220,38,38,.4);
  color:rgba(255,120,120,.9);
}
@keyframes bhUrgentPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.3); }
  50%{ box-shadow:0 0 16px 6px rgba(220,38,38,.2); }
}
@keyframes bhWaiterPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,170,0,.25); }
  50%{ box-shadow:0 0 12px 4px rgba(255,170,0,.15); }
}
@keyframes bhBellShake{
  0%,100%{ transform:rotate(0); }
  10%{ transform:rotate(12deg); }
  20%{ transform:rotate(-10deg); }
  30%{ transform:rotate(6deg); }
  40%{ transform:rotate(-4deg); }
  50%,100%{ transform:rotate(0); }
}

/* Idle session warning bar */
.bh-staff-idle-warn{
  display:block;
  margin:8px 12px 0;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(220,150,0,.18);
  border:1px solid rgba(220,150,0,.35);
  color:#f5c842;
  font-size:13px;
  font-weight:500;
  text-align:center;
}
.bh-staff-idle-warn[hidden]{ display:none; }