/* app.7.css — STAFF / cashier-separation styles, split out of app.4.css to keep both
   stylesheets under the 800-line CI guard. Loaded after app.6.css; these are isolated
   component domains (lock screen, pinPad, staff admin, session strip, by-staff) that
   don't tie with earlier sheets, so load order is unchanged in effect. Rules verbatim. */

/* =====================================================================================
   STAFF / cashier-separation: lock screen, pinPad, staff admin, session strip, by-staff.
   Reuses existing tokens/colors only. No new colors, no eyebrows/pills, no glassmorphism.
   PINs are a shared-device convenience (see staff.js), never framed as security in copy.
   ===================================================================================== */

/* ---- Lock screen: tappable staff name chips in a responsive grid ---- */
.staff-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

/* staff chip: nq-button-s base sized up to a comfortable tap target. */
.staff-chip {
  width: 100%;
  height: 56px;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
}

.lock-pin-host:not(:empty) {
  margin-top: 16px;
}

.lock-manage-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

/* ---- R14 time clock ---- */
/* A staffer currently ON the clock: a left light-blue accent rail on their name chip (status, not a
   success state, so it uses the brand light-blue, not green). */
.staff-chip.is-on-clock {
  box-shadow: inset 4px 0 0 var(--nimiq-light-blue, #0582ca);
}

.timeclock-result:not(:empty) {
  margin: 16px 0;
}

.timeclock-status:not(:empty) {
  margin-top: 24px;
}

.hours-report {
  margin-top: 8px;
}

/* "On the clock" inline chip on an hours-report name (muted pill, non-interactive). */
.on-clock-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(5, 130, 202, 0.12);
  color: var(--nimiq-light-blue, #0582ca);
  font-size: 1.25rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ---- pinPad: masked-dot display over a 3x4 digit grid (nq-button-s keys) ---- */
.pin-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pin-pad .pin-title {
  font-size: 2.5rem;
  margin: 0;
  text-align: center;
}

.pin-pad .pin-subtitle {
  font-size: 1.75rem;
  color: var(--muted-text);
  margin: 0;
  text-align: center;
}

.pin-dots {
  display: flex;
  gap: 12px;
  height: 16px;
  align-items: center;
}

.pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.2);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.pin-dot.filled {
  background: var(--nimiq-light-blue);
  box-shadow: none;
}

.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 12px;
  justify-content: center;
}

.pin-key {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 2.5rem;
  font-weight: 600;
  justify-content: center;
  padding: 0;
}

.pin-key-enter {
  background: var(--nimiq-light-blue);
  color: #fff;
}

.pin-key-enter:hover {
  background: var(--nimiq-light-blue);
}

.pin-key-back {
  font-size: 2.25rem;
}

/* error shake: reuse a short translate keyframe (motion already used elsewhere). */
.pin-pad.pin-error {
  animation: pin-shake 0.3s cubic-bezier(0.25, 0, 0, 1);
}

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pin-pad.pin-error { animation: none; }
}

.pin-cancel {
  margin-top: 2px;
}

/* ---- Staff admin: list rows + add/manager blocks ---- */
.staff-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

.staff-row + .staff-row {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.staff-row-name {
  font-size: 2rem;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-row.removed .staff-row-name {
  color: rgba(31, 35, 72, 0.4);
}

.staff-row-removed-tag {
  font-size: 1.625rem;
  color: rgba(31, 35, 72, 0.4);
}

.staff-add-block,
.staff-mgr-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}

.staff-add-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-add-field .add-label {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--muted-text);
}

/* Role toggle: the same segmented nq-button-s + .selected light-blue pattern as the tip/discount
   preset pills. Two equal-width pills sharing the row. */
.role-toggle {
  display: flex;
  gap: 8px;
}

.role-pill {
  flex: 1 1 0;
  white-space: nowrap;
}

.role-pill.selected,
.role-pill.selected:hover {
  background: var(--nimiq-light-blue);
  color: #fff;
}

/* Quiet "Manager" label after a staffer's name (text, not a colored pill). */
.staff-row-role {
  margin-left: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(31, 35, 72, 0.4);
}

/* ---- This device's payout address (multi-staff Plan B, in Manage staff) ---- */
.device-payout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}

/* The current-assignment block: the fingerprint reuses .merchant-fingerprint, with a quiet
   surface so it reads as "what's in effect now" above the set-new field. */
.device-payout-current {
  padding: 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.06);
}

.device-payout-current .merchant-fingerprint {
  align-items: flex-start;
}

/* Optional label field sits tight under the address help text. */
.device-payout-label-field {
  margin-top: 4px;
}

/* Action row (Save / Clear) right-aligned, matching the small-button cadence elsewhere. */
.device-payout-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ---- Signed-in strip (body-top affordance on import/review/sell/receipt) ---- */
.signed-in-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.06);
}

.signed-in-label {
  font-size: 1.75rem;
  color: var(--muted-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signed-in-name {
  font-weight: 600;
  color: var(--nimiq-blue);
}

.signed-in-switch {
  flex: 0 0 auto;
  font-size: 1.625rem;
}

/* sell-screen zone actions row (Staff + View sales) keep their spacing */
/* ---- Quick-actions sheet (the "More" trigger on Sell). Utility actions as an icon-tile grid,
   popped up over the screen so the Sell flow stays uncluttered. Reuses the .manager-gate-overlay
   scrim + .manager-gate-card panel. ---- */
.quick-actions-panel {
  max-width: 360px;
}

.quick-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quick-actions-title {
  margin: 0;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Light tappable tile (white surface + soft inset hairline), matching the favorites/item-row
   surface language — NOT a navy-gradient CTA. Uniform height so 1- and 2-line labels align. */
.quick-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 92px;
  padding: 16px 6px;
  background: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px rgba(31, 35, 72, 0.1);
  color: var(--nimiq-blue);
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s var(--nimiq-ease), transform 0.15s var(--nimiq-ease);
}

.quick-action-tile:hover {
  box-shadow: inset 0 0 0 1.5px rgba(5, 130, 202, 0.5);
}

.quick-action-tile:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1.5px rgba(5, 130, 202, 0.75);
}

.quick-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}

.quick-action-icon svg {
  height: 34px;
  width: auto;
  max-width: 42px;
}

.quick-action-label {
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--nimiq-blue);
  text-align: center;
  line-height: 1.2;
}

/* ---- Manager-gate overlay (void authorization) over the current screen ---- */
.manager-gate-overlay {
  position: absolute;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  /* navy-tinted scrim (rule 11: never rgba(0,0,0)) */
  background: rgba(31, 35, 72, 0.6);
  /* The card no longer clips, so the full-card scrim rounds its own corners to the SmallPage shape. */
  border-radius: 1.25rem;
}

.manager-gate-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0.5rem 3.5rem rgba(0, 0, 0, 0.111);
  padding: 28px 24px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manager-gate-alert:empty {
  display: none;
}

/* ---- Dashboard "By staff" section (counts only, device-local) ---- */
.by-staff-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.by-staff-head .sell-zone-title {
  margin-bottom: 12px;
}

.by-staff-scope {
  font-size: 1.5rem;
  color: var(--muted-text);
}

.by-staff {
  display: flex;
  flex-direction: column;
}

.by-staff-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.by-staff-row + .by-staff-row {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.by-staff-row .bs-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.by-staff-row .bs-count {
  flex: 0 0 auto;
  font-size: 1.875rem;
  color: var(--muted-text);
}


/* =====================================================================================
   #59 SECURE THIS REGISTER — the "a reachable register is never silently unlocked" surfaces.
   Two of them, and only ever one at a time:
     • the SECURE screen itself (hard case, reachable register with no manager). It reuses the
       staff-admin add block wholesale (.staff-add-block / .staff-add-field / .setup-error), so
       the only new rules here are the two bits of helper copy.
     • the SOFT case (loopback dev register): a body-top strip + a caution dot on the More
       sheet's Staff tile. No new colors: the warning orange the SIMULATED banner already uses.
   ===================================================================================== */

/* Helper line under the setup-code field: where to find the code. */
.secure-field-hint {
  font-size: 1.625rem;
  line-height: 1.4;
  color: var(--muted-text);
  margin: 0;
}

/* Countdown / inline note under the secure form, muted like the field hint. */
.secure-note {
  font-size: 1.625rem;
  line-height: 1.4;
  color: var(--muted-text);
  margin: 8px 0 0;
}

/* ---- Unsecured strip: signedInStrip's sibling. Deliberately the SAME neutral surface + hairline
   as the signed-in strip rather than a tinted alarm box: a tinted warning panel means orange text
   on an orange surface (2.11:1, the one contrast exception the SIMULATED banner is triaged for)
   and a colored shadow, both of which the brand linter flags. The caution reads from the small
   orange dot plus the plain sentence, not from the surface. Body-top (scrolls with the content) so
   the fixed footer height never changes. ---- */
.unsecured-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.06);
}

.unsecured-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nimiq-orange);
}

.unsecured-label {
  flex: 1 1 auto;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--nimiq-blue);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unsecured-action {
  flex: 0 0 auto;
  font-size: 1.625rem;
}

/* ---- Caution dot on the More sheet's Staff tile (the Sell screen's vertical budget is spoken
   for, so the sell signal lives inside the sheet, not above the item grid). The tile keeps its
   normal hairline: a colored ring would be the same colored-shadow slop as above. ---- */
.quick-action-tile.tile-attention {
  position: relative;
}

.quick-action-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nimiq-orange);
}