/* Badge Terminal page: standalone badge terminal.
   Structure lives here only because the terminal is a separate employee-facing surface.
   Shared primitives reused: rs-card, buttons, avatar colors, feedback/toasts, tokens. */

/* Launch button in Actuals toolbar — terminal-specific affordance, not a generic toolbar primitive. */
.rs-terminal-launch {
  min-width: 140px;
  padding: 0 14px;
  gap: 8px;
  border: 1px solid rgba(96,165,250,.30);
  background: linear-gradient(135deg,rgba(59,130,246,.22),rgba(99,102,241,.16));
  color: var(--rst-ui-text-heading);
  font-size: 13px;
  font-weight: var(--rst-fw-display);
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--rst-topbar-line),0 4px 12px rgba(37,99,235,.12);
}

.rs-terminal-launch:hover,
.rs-terminal-launch:focus-visible {
  border-color: rgba(147,197,253,.44);
  background: linear-gradient(135deg,rgba(59,130,246,.30),rgba(99,102,241,.22));
  box-shadow: inset 0 1px 0 var(--rst-ui-line),0 8px 20px rgba(37,99,235,.18);
  outline: 0;
}

.rs-terminal-launch svg { opacity: .92; }
html.badge-terminal-mode,
body.badge-terminal-mode {
  height: 100svh;
  overflow: hidden;
}

body.badge-terminal-mode {
  --badge-terminal-page-pad-x: max(28px,calc((100vw - var(--rst-content-max)) / 2));
  --badge-terminal-page-pad-y: clamp(18px,2.5vh,30px);
  color: var(--rst-ui-text);
  background:
    radial-gradient(circle at 50% -10%,rgba(51,71,255,.15),transparent 34%),
    radial-gradient(circle at 85% 18%,rgba(37,99,235,.10),transparent 30%),
    var(--rst-ui-bg);
}

body.badge-terminal-mode .app-frame,
body.badge-terminal-mode .app-shell {
  width: 100%;
  height: 100svh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.badge-terminal-mode .badge-terminal-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.badge-terminal-page {
  min-height: 0;
  padding: 0;
}

.badge-terminal-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--badge-terminal-page-pad-y) var(--badge-terminal-page-pad-x);
  overflow: hidden;
}

.badge-terminal-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: hidden;
}

.badge-terminal-terminal {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: clamp(16px,2.2vh,24px);
  overflow: hidden;
}

.badge-terminal-kiosk-header {
  min-height: clamp(56px,8vh,82px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.badge-terminal-kiosk-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px,1.8vw,24px);
}

.badge-terminal-kiosk-logo {
  display: block;
  width: clamp(156px,14vw,226px);
  max-width: 38vw;
  height: auto;
  object-fit: contain;
}

.badge-terminal-kiosk-divider {
  width: 1px;
  height: 34px;
  background: rgba(203,213,225,.34);
}

.badge-terminal-kiosk-title {
  color: rgba(226,232,240,.78);
  font-size: clamp(17px,1.35vw,24px);
  font-weight: var(--rst-fw-bold);
  letter-spacing: 0;
  white-space: nowrap;
}

.badge-terminal-live {
  flex: 0 0 auto;
  text-align: right;
}

.badge-terminal-live span {
  display: block;
  color: var(--rst-ui-text);
  font-size: clamp(42px,5.5vw,70px);
  line-height: .88;
  font-weight: var(--rst-fw-display);
  letter-spacing: 0;
}

.badge-terminal-live small {
  display: block;
  margin-top: 12px;
  color: rgba(203,213,225,.72);
  font-size: clamp(13px,1.25vw,18px);
  font-weight: var(--rst-fw-bold);
}

.badge-terminal-layout {
  min-height: 0;
  display: grid;
  /* Employee list is the primary interaction surface on a kiosk.
     Give it real presence; the terminal stage fills the rest. */
  grid-template-columns: clamp(320px,34vw,460px) minmax(0,1fr);
  gap: clamp(16px,2vw,22px);
  align-items: stretch;
  overflow: hidden;
}

.badge-terminal-people,
.badge-terminal-terminal-card {
  min-height: 0;
  height: 100%;
  border-color: var(--rst-state-neutral-border);
  background:
    radial-gradient(circle at 0% 0%,rgba(96,165,250,.10),transparent 34%),
    linear-gradient(135deg,rgba(15,25,44,.80),rgba(7,16,32,.76));
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.badge-terminal-people {
  padding: clamp(12px,1.4vh,16px);
  overflow: hidden;
}

.badge-terminal-people-list {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(clamp(68px,9vh,92px),auto);
  align-content: start;
  gap: clamp(7px,1vh,10px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 4px 4px 4px 2px;
}

.badge-terminal-person {
  width: 100%;
  min-height: clamp(68px,9vh,92px);
  display: grid;
  grid-template-columns: clamp(52px,4.4vw,62px) minmax(0,1fr);
  align-items: center;
  gap: 14px;
  padding: 12px clamp(16px,1.6vw,22px);
  border: 1px solid var(--rst-ui-divider);
  border-radius: var(--rst-ui-radius-xl);
  background: linear-gradient(135deg,rgba(255,255,255,.060),rgba(255,255,255,.026));
  color: var(--rst-ui-text);
  text-align: left;
  cursor: pointer;
  transition: transform var(--rst-motion-ui) var(--rst-motion-smooth),border-color var(--rst-motion-ui) var(--rst-motion-smooth),background var(--rst-motion-ui) var(--rst-motion-smooth),box-shadow var(--rst-motion-ui) var(--rst-motion-smooth);
}

.badge-terminal-person:hover,
.badge-terminal-person:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(96,165,250,.34);
  background: linear-gradient(135deg,rgba(59,130,246,.15),rgba(255,255,255,.035));
  outline: 0;
}

.badge-terminal-person.is-active {
  border-color: rgba(99,102,241,.90);
  background: linear-gradient(135deg,rgba(59,130,246,.24),rgba(49,46,129,.18));
  box-shadow: 0 0 0 1px rgba(99,102,241,.18),0 16px 36px rgba(37,99,235,.14);
}

.badge-terminal-avatar {
  width: clamp(44px,3.8vw,52px);
  height: clamp(44px,3.8vw,52px);
  font-size: clamp(15px,1.3vw,18px);
  flex: 0 0 auto;
}

.badge-terminal-person-name {
  min-width: 0;
  overflow: hidden;
  color: var(--rst-ui-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(18px,1.5vw,24px);
  line-height: 1.1;
  font-weight: var(--rst-fw-display);
  letter-spacing: 0;
}

.badge-terminal-terminal-card {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px,3.2vw,42px);
  isolation: isolate;
}

.badge-terminal-orbit {
  position: absolute;
  inset: auto;
  width: min(72vw,900px);
  aspect-ratio: 1;
  border-radius: var(--rst-ui-radius-round);
  border: 1px solid rgba(96,165,250,.08);
  box-shadow: inset 0 0 0 88px rgba(96,165,250,.025);
  transform: translate(4%,-1%);
  pointer-events: none;
  z-index: -1;
}

.badge-terminal-center-copy {
  display: grid;
  justify-items: center;
  gap: clamp(9px,1.2vh,13px);
  text-align: center;
}

.badge-terminal-state-icon {
  width: clamp(48px,5vw,62px);
  height: clamp(48px,5vw,62px);
  display: grid;
  place-items: center;
  margin-bottom: 2px;
  border-radius: var(--rst-ui-radius-round);
  border: 1px solid rgba(99,102,241,.58);
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.20),transparent 34%),
    linear-gradient(135deg,rgba(29,78,216,.34),rgba(67,56,202,.24));
  color: var(--rst-state-info-text);
  box-shadow: 0 0 42px rgba(59,130,246,.18),inset 0 1px 0 rgba(255,255,255,.13);
}

.badge-terminal-state-icon svg {
  width: 48%;
  height: 48%;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(129,140,248,.55));
}

.badge-terminal-kicker {
  color: var(--rst-state-info-text);
  font-size: 12px;
  font-weight: var(--rst-fw-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.badge-terminal-center-copy h2 {
  margin: 0;
  color: var(--rst-ui-text);
  font-size: clamp(36px,5.4vw,76px);
  line-height: .92;
  font-weight: var(--rst-fw-display);
  letter-spacing: 0;
}

.badge-terminal-center-copy p {
  margin: 0;
  color: rgba(203,213,225,.74);
  font-size: clamp(18px,2.25vw,32px);
  line-height: 1.1;
  font-weight: var(--rst-fw-display);
  letter-spacing: 0;
}

.badge-terminal-center-copy small {
  color: rgba(226,232,240,.72);
  font-size: 14px;
  font-weight: var(--rst-fw-bold);
}

.badge-terminal-pin-flow {
  width: min(680px,100%);
  display: grid;
  justify-items: center;
  gap: clamp(10px,1.7vh,16px);
}

.badge-terminal-pin-flow.is-error .badge-terminal-pin-dots span {
  border-color: rgba(248,113,113,.52);
  background: var(--rst-state-danger-bg);
}

.badge-terminal-selected-person {
  display: grid;
  grid-template-columns: clamp(48px,4vw,56px) minmax(0,1fr);
  align-items: center;
  gap: 14px;
  min-width: min(420px,100%);
  padding: 9px 14px;
  border: 1px solid rgba(96,165,250,.20);
  border-radius: var(--rst-ui-radius-xl);
  background: rgba(15,23,42,.52);
}

.badge-terminal-selected-person strong,
.badge-terminal-selected-person small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-terminal-selected-person strong {
  color: var(--rst-ui-text);
  font-size: 18px;
  font-weight: var(--rst-fw-display);
}

.badge-terminal-selected-person small {
  margin-top: 2px;
  color: rgba(203,213,225,.70);
  font-size: 12px;
  font-weight: var(--rst-fw-bold);
}

.badge-terminal-pin-entry {
  width: min(390px,100%);
  display: grid;
  gap: clamp(10px,1.3vh,13px);
}

.badge-terminal-pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.badge-terminal-pin-dots span {
  width: 14px;
  height: 14px;
  border-radius: var(--rst-ui-radius-round);
  border: 1px solid rgba(255,255,255,.22);
  background: var(--rst-topbar-line);
  transition: background var(--rst-motion-ui) var(--rst-motion-smooth),border-color var(--rst-motion-ui) var(--rst-motion-smooth),box-shadow var(--rst-motion-ui) var(--rst-motion-smooth),transform var(--rst-motion-ui) var(--rst-motion-smooth);
}

.badge-terminal-pin-dots span.is-filled {
  transform: scale(1.04);
  background: var(--rst-state-info-text);
  border-color: rgba(var(--rst-state-info-rgb),.70);
  box-shadow: none;
}

.badge-terminal-keypad {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(7px,1vh,9px);
}

.badge-terminal-keypad button {
  min-height: clamp(46px,6vh,56px);
  border: 1px solid var(--rst-ui-line);
  border-radius: var(--rst-ui-radius-lg);
  background: linear-gradient(135deg,var(--rst-ui-divider),rgba(255,255,255,.035));
  color: var(--rst-ui-text);
  font: inherit;
  font-size: clamp(18px,1.7vw,22px);
  font-weight: var(--rst-fw-display);
  cursor: pointer;
  transition: transform var(--rst-motion-ui) var(--rst-motion-smooth),background var(--rst-motion-ui) var(--rst-motion-smooth),border-color var(--rst-motion-ui) var(--rst-motion-smooth);
}

.badge-terminal-keypad button:hover,
.badge-terminal-keypad button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(96,165,250,.34);
  background: linear-gradient(135deg,rgba(59,130,246,.16),var(--rst-ui-divider-soft));
  outline: 0;
}

.badge-terminal-keypad button.is-clear,
.badge-terminal-keypad button.is-back {
  font-size: 17px;
  letter-spacing: 0;
}

.badge-terminal-terminal-card.is-processing .badge-terminal-keypad,
.badge-terminal-terminal-card.is-processing .badge-terminal-pin-dots {
  opacity: .46;
  pointer-events: none;
}

.badge-terminal-terminal-card.has-employee {
  align-content: center;
}

.badge-terminal-terminal-card.has-employee .badge-terminal-orbit {
  transform: translate(4%,0) scale(.94);
}

.badge-terminal-terminal-card.has-employee .badge-terminal-center-copy {
  gap: clamp(6px,1vh,9px);
}

.badge-terminal-terminal-card.has-employee .badge-terminal-center-copy p {
  font-size: clamp(22px,2.7vw,38px);
  line-height: .98;
  color: rgba(241,245,249,.88);
}

.badge-terminal-terminal-card.has-employee .badge-terminal-center-copy small {
  font-size: clamp(12px,1.05vw,14px);
}

.badge-terminal-pin-flow h2:empty {
  display: none;
}

.badge-terminal-pin-flow,
.badge-terminal-pin-entry,
.badge-terminal-keypad {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .badge-terminal-person,
  .badge-terminal-keypad button {
    transition: none;
  }
}

.badge-terminal-empty {
  min-height: 100%;
  padding: 18px 10px;
}

.badge-terminal-empty .rs-empty-state__icon {
  margin-inline: auto;
}

/* Shift override toggle: shown during clock-in so employee can correct the heuristic */
.badge-terminal-shift-toggle {
  display: flex;
  gap: clamp(8px,1vw,12px);
}

.badge-terminal-shift-btn {
  min-width: clamp(90px,10vw,120px);
  min-height: clamp(38px,4.4vh,46px);
  padding: 0 18px;
  border: 1px solid rgba(96,165,250,.26);
  border-radius: var(--rst-ui-radius-lg);
  background: rgba(255,255,255,.046);
  color: rgba(226,232,240,.72);
  font: inherit;
  font-size: clamp(13px,1.15vw,16px);
  font-weight: var(--rst-fw-bold);
  cursor: pointer;
  transition: border-color var(--rst-motion-ui) var(--rst-motion-smooth),background var(--rst-motion-ui) var(--rst-motion-smooth),color var(--rst-motion-ui) var(--rst-motion-smooth);
}

.badge-terminal-shift-btn:hover,
.badge-terminal-shift-btn:focus-visible {
  border-color: rgba(96,165,250,.50);
  background: rgba(59,130,246,.14);
  color: var(--rst-ui-text);
  outline: 0;
}

.badge-terminal-shift-btn.is-active {
  border-color: rgba(99,102,241,.80);
  background: linear-gradient(135deg,rgba(59,130,246,.28),rgba(49,46,129,.20));
  color: var(--rst-ui-text);
  box-shadow: 0 0 0 1px rgba(99,102,241,.18);
}

/* PIN lockout — replaces the keypad once MAX_PIN_ATTEMPTS is reached. */
.badge-terminal-pin-entry--locked {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px,3vh,32px) 24px;
  border: 1px solid var(--rst-state-danger-border);
  border-radius: var(--rst-ui-radius-lg);
  background: var(--rst-state-danger-bg);
}

.badge-terminal-lockout-msg {
  margin: 0;
  color: var(--rst-state-danger-text);
  font-size: clamp(13px,1.1vw,15px);
  font-weight: var(--rst-fw-bold);
  text-align: center;
  line-height: 1.4;
}