.hsp-em-ops-toolbar{display:grid;gap:12px;margin:0 0 14px;padding:15px;border:1px solid #3b3427;border-radius:14px;background:linear-gradient(135deg,#17130d,#121216 55%);box-shadow:0 10px 30px #0003}
.hsp-em-ops-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.hsp-em-ops-head h2{margin:.15rem 0 .25rem}.hsp-em-ops-head p{margin:0;color:#aaa59c;max-width:760px}.hsp-em-ops-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.hsp-em-action-count,.hsp-em-all-clear{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:999px;font-size:.76rem;font-weight:800}.hsp-em-action-count{border:1px solid #765b1b;background:#211a08;color:#ffc64c}.hsp-em-all-clear{border:1px solid #245c40;background:#0f2118;color:#65dd99}
.hsp-em-filter-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.hsp-em-filter{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:9px 10px;border:1px solid #34343a;border-radius:10px;background:#18181c;color:#d8d8dc;text-align:left;cursor:pointer}.hsp-em-filter:hover{border-color:#625334;background:#1c1a16}.hsp-em-filter.active{border-color:#d49318;background:#2a210f;color:#ffe2a3;box-shadow:inset 0 0 0 1px #d4931840}.hsp-em-filter span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}.hsp-em-filter b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#25252a;font-size:.72rem}.hsp-em-filter.active b{background:#6c4c10;color:#fff0c5}
.hsp-em-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.hsp-em-progress>span{height:5px;border-radius:99px;background:linear-gradient(90deg,#d89b20 var(--hsp-em-progress),#2a292c var(--hsp-em-progress));overflow:hidden}.hsp-em-progress small{color:#969198;white-space:nowrap}.s682-participant[hidden]{display:none!important}.s682-participant[data-hsp-em-state="needs-clock-in"],.s682-participant[data-hsp-em-state="needs-clock-out"],.s682-participant[data-hsp-em-state="review"]{border-color:#6b541b;box-shadow:inset 3px 0 #d79a1e}.s682-participant[data-hsp-em-state="pause"]{border-color:#385775}.s682-participant[data-hsp-em-state="complete"]{opacity:.82}.hsp-em-filter-empty{margin-top:8px}
@media(max-width:1150px){.hsp-em-filter-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.hsp-em-ops-head{display:grid}.hsp-em-ops-head-actions{justify-content:flex-start}.hsp-em-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}.hsp-em-progress{grid-template-columns:1fr}.hsp-em-progress small{white-space:normal}}
@media(max-width:420px){.hsp-em-filter-row{grid-template-columns:1fr}.hsp-em-filter{padding:10px 12px}}

/* 8.4.09 Event Mode layout polish -----------------------------------------
   Keep the quick-action toolbar readable and give each participant card a
   predictable two-zone layout: person/schedule first, manager controls below. */
.hsp-em-filter-row{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.hsp-em-filter{
  min-height:42px;
  padding:9px 11px;
}
.hsp-em-filter span{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.15;
}

.s682-participants{gap:10px!important}
.s682-participant{
  padding:14px!important;
  gap:12px!important;
  border-radius:12px!important;
}
.s682-participant>.s682-status-dot{margin-top:5px!important}
.s682-participant-identity{display:grid!important;gap:6px!important}
.s682-participant-identity>b{font-size:1rem!important;line-height:1.2!important}
.s682-participant-identity>small{line-height:1.35!important}
.s682-participant-schedule{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin:6px 0 2px!important;
}
.s682-participant-schedule>span{
  min-height:42px!important;
  padding:9px 10px!important;
  border-radius:8px!important;
  background:#19191d!important;
  color:#bbb7b0!important;
  line-height:1.3!important;
}
.s682-participant-schedule>span>b{
  display:inline-block!important;
  margin-right:4px!important;
  color:#f1eee8!important;
}

/* Manager controls: no tiny crushed columns or letter-by-letter headings. */
.s682-participant>.hsp-em-manager-controls{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:12px 18px!important;
  flex-wrap:wrap!important;
  padding-top:10px!important;
  border-top:1px solid #2a292d!important;
}
.hsp-em-manager-live{
  flex:1 1 480px!important;
  min-width:0!important;
  gap:7px!important;
}
.hsp-em-manager-correction{
  flex:0 0 auto!important;
  min-width:175px!important;
  align-content:end!important;
  justify-items:end!important;
  gap:7px!important;
}
.hsp-em-manager-live>small,
.hsp-em-manager-correction>small{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  line-height:1.2!important;
}
.hsp-em-manager-live>div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  align-items:center!important;
}
.hsp-em-manager-live .button,
.hsp-em-manager-correction .button{
  min-width:0!important;
  width:auto!important;
  white-space:nowrap!important;
}
.hsp-em-manager-note{max-width:none!important}

@media(max-width:1050px){
  .hsp-em-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s682-participant>.hsp-em-manager-controls{align-items:stretch!important}
  .hsp-em-manager-correction{
    flex:1 1 220px!important;
    justify-items:start!important;
  }
}
@media(max-width:700px){
  .s682-participant-schedule{grid-template-columns:1fr!important}
  .s682-participant>.hsp-em-manager-controls{display:grid!important;grid-template-columns:1fr!important}
  .hsp-em-manager-live,.hsp-em-manager-correction{min-width:0!important;width:100%!important}
  .hsp-em-manager-correction{justify-items:start!important}
  .hsp-em-manager-live>div{display:grid!important;grid-template-columns:1fr 1fr!important}
  .hsp-em-manager-live .button,.hsp-em-manager-correction .button{width:100%!important;white-space:normal!important}
}
@media(max-width:460px){
  .hsp-em-filter-row{grid-template-columns:1fr}
  .hsp-em-manager-live>div{grid-template-columns:1fr!important}
}

/* 8.4.10 Event Mode participant card layout fix ---------------------------
   The base Event Mode stylesheet uses a 3-column participant grid. The
   manager-control block was landing in that narrow third column, which is why
   the action labels/buttons stacked vertically. Force the identity/schedule
   to own row one and the controls to span the full content width on row two. */
.s682-participant{
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:start!important;
}
.s682-participant>.s682-status-dot{
  grid-column:1!important;
  grid-row:1!important;
}
.s682-participant>.s682-participant-identity{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
}
.s682-participant>.hsp-em-manager-controls{
  grid-column:2!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:12px 18px!important;
  padding-top:12px!important;
  margin-top:2px!important;
  border-top:1px solid #2a292d!important;
}
.hsp-em-manager-live{
  min-width:0!important;
  display:grid!important;
  gap:8px!important;
}
.hsp-em-manager-live>small,
.hsp-em-manager-correction>small{
  margin:0!important;
  font-size:.68rem!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:#8f8b83!important;
  white-space:normal!important;
}
.hsp-em-manager-live>div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.hsp-em-manager-correction{
  min-width:180px!important;
  display:grid!important;
  justify-items:end!important;
  gap:8px!important;
}
.hsp-em-manager-live .button,
.hsp-em-manager-correction .button{
  min-height:38px!important;
  width:auto!important;
  padding:.55rem .8rem!important;
  white-space:nowrap!important;
}
@media(max-width:900px){
  .s682-participant>.hsp-em-manager-controls{
    grid-template-columns:1fr!important;
  }
  .hsp-em-manager-correction{
    min-width:0!important;
    justify-items:start!important;
  }
}
@media(max-width:620px){
  .s682-participant{
    grid-template-columns:14px minmax(0,1fr)!important;
    padding:12px!important;
  }
  .hsp-em-manager-live>div{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  .hsp-em-manager-live .button,
  .hsp-em-manager-correction .button{
    width:100%!important;
    white-space:normal!important;
  }
}
@media(max-width:420px){
  .hsp-em-manager-live>div{grid-template-columns:1fr!important}
}


/* 23.05.28 Event Mode command-center polish ------------------------------ */
.hsp-em-ops-toolbar{gap:10px;padding:14px 16px}
.hsp-em-control-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;padding-bottom:12px;border-bottom:1px solid #2b2928}
.hsp-em-event-now h2{margin:.15rem 0 .55rem;font-size:1.32rem;line-height:1.15}
.hsp-em-event-facts{display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(180px,1fr) minmax(150px,.7fr);gap:8px}
.hsp-em-event-facts>span{display:grid;gap:2px;min-width:0;padding:8px 10px;border:1px solid #302f33;border-radius:9px;background:#151519}
.hsp-em-event-facts small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#8e8a83}
.hsp-em-event-facts b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;color:#efebe4}
.hsp-em-control-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.hsp-em-action-overview{display:grid;grid-template-columns:repeat(3,minmax(0,.55fr)) minmax(240px,1.35fr);gap:7px}
.hsp-em-action-overview>div{display:flex;align-items:center;gap:8px;min-height:45px;padding:8px 10px;border:1px solid #302f33;border-radius:9px;background:#151519}
.hsp-em-action-overview b{font-size:1rem}.hsp-em-action-overview span{font-size:.68rem;color:#a8a39b}.hsp-em-action-overview .warn{border-color:#6c5218;background:#211a08}.hsp-em-action-overview .warn b{color:#ffc34c}.hsp-em-action-overview .good{border-color:#245c40;background:#0f2118}.hsp-em-action-overview .good b{color:#62dc96}
.hsp-em-priority{display:inline-flex;width:max-content;max-width:100%;align-items:center;min-height:22px;padding:2px 8px;border:1px solid #3b3b40;border-radius:999px;background:#19191d;color:#aaa7a1;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.hsp-em-priority[data-state="needs-clock-in"],.hsp-em-priority[data-state="needs-clock-out"],.hsp-em-priority[data-state="review"]{border-color:#705619;background:#261d08;color:#ffc44e}
.hsp-em-priority[data-state="working"]{border-color:#245b40;background:#0f2118;color:#61da94}
.hsp-em-priority[data-state="pause"]{border-color:#385775;background:#101b29;color:#a8caff}
.hsp-em-priority[data-state="complete"]{border-color:#2d5b44;background:#112019;color:#76daa1}
.hsp-em-person-ticket{margin-top:2px}
@media(max-width:1100px){.hsp-em-control-strip{grid-template-columns:1fr}.hsp-em-control-actions{justify-content:flex-start}.hsp-em-event-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.hsp-em-event-facts>span:last-child{grid-column:1/-1}.hsp-em-action-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.hsp-em-event-facts,.hsp-em-action-overview{grid-template-columns:1fr}.hsp-em-event-facts>span:last-child{grid-column:auto}.hsp-em-event-facts b{white-space:normal}.hsp-em-control-actions{display:grid;grid-template-columns:1fr 1fr}.hsp-em-control-actions .button:last-child{grid-column:1/-1}.hsp-em-control-actions .button{width:100%}}