/* ============================================================
   GoPass Terminal — Screen 08: Assign People
   Includes Screen 09 bottom-sheet modal styles
   ============================================================ */

/* ── Steps (compact, appears below header directly) ── */
.steps-08 {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Title slot ── */
.title-slot-08 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 32px 0;
  flex-shrink: 0;
}

.title-row-08 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-row-08 .screen-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.count-badge-08 {
  width: 30px;
  height: 30px;
  background: var(--bg-soft);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.count-badge-08 span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Countdown pill */
.countdown-pill {
  height: 34px;
  background: var(--bg-soft);
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 12px;
}

.countdown-pill i[data-lucide] {
  width: 15px;
  height: 15px;
  color: var(--text-secondary);
}

.countdown-pill span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Description ── */
.desc-08 {
  width: 100%;
  padding: 14px 32px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── Ticket rows slot ── */
.ticket-rows {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 28px 12px;
  overflow-y: auto;
}

/* Empty state */
.empty-msg {
  text-align: center;
  color: var(--text-secondary);
  font-size: 16px;
  padding: 40px 0;
}

/* Individual ticket row */
.ticket-row {
  width: 100%;
  min-height: 88px;
  background: var(--bg-card);
  border-radius: 18px;
  border: 1.5px solid var(--border-light);
  box-shadow: 0 4px 14px -4px rgba(27, 27, 92, 0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  flex-shrink: 0;
}

.ticket-avatar {
  width: 56px;
  height: 56px;
  background: var(--bg-soft);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ticket-avatar i[data-lucide] {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
}

/* Avatar shows assigned state */
.ticket-row.is-assigned .ticket-avatar {
  background: #e8f6f2;
}

.ticket-row.is-assigned .ticket-avatar i[data-lucide] {
  color: var(--success-green);
}

/* Guest-assigned avatar: pink-soft circle with pink user-round icon — per 09c.
   We force colour+stroke on every path inside the Lucide-rendered SVG because
   some Lucide builds hardcode stroke="currentColor" on the <svg> but not on
   child <path>s, leaving the icon invisible against the pink background. */
.ticket-row.is-guest .ticket-avatar,
.ticket-row.is-guest.is-assigned .ticket-avatar {
  background: var(--brand-pink-soft) !important;
}

.ticket-row.is-guest .ticket-avatar i[data-lucide],
.ticket-row.is-guest.is-assigned .ticket-avatar i[data-lucide],
.ticket-row.is-guest .ticket-avatar svg,
.ticket-row.is-guest.is-assigned .ticket-avatar svg {
  color: var(--brand-pink) !important;
  stroke: var(--brand-pink) !important;
}

.ticket-row.is-guest .ticket-avatar svg *,
.ticket-row.is-guest.is-assigned .ticket-avatar svg * {
  stroke: var(--brand-pink) !important;
}

.ticket-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticket-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.ticket-product {
  font-size: 13px;
  color: var(--text-secondary);
}

.ticket-assigned-email {
  font-size: 12px;
  color: var(--success-green);
  font-weight: 600;
}

/* Guest-assigned block — mirrors the frame 09c row layout:
   "Osoba N" + HOSŤ pill on top, "X rokov · pridaná bez prihlásenia" below. */
.ticket-guest-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.ticket-guest-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-guest-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.ticket-guest-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Assign button */
.btn-assign {
  height: 44px;
  background: var(--bg-card);
  border-radius: 22px;
  border: 1.5px solid var(--brand-navy);
  display: flex;
  align-items: center;
  padding: 0 18px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-navy);
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}

.btn-assign:hover {
  background: var(--bg-soft);
}

/* ── Modal overlay (Screen 09) ── */
/* Scoped to kiosk-device (position: relative + overflow: hidden) */
.modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
}

.modal-overlay.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Dim layer */
.modal-dim {
  position: absolute;
  inset: 0;
  background: #0E0E3D99;
  opacity: 0;
  transition: opacity 0.28s ease-out;
}

.modal-overlay.is-open .modal-dim {
  opacity: 1;
}

/* Bottom sheet */
.modal-sheet {
  position: relative;
  width: 100%;
  background: var(--bg-card);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -12px 32px rgba(27, 27, 92, 0.18);
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-overlay.is-open .modal-sheet {
  transform: translateY(0);
}

/* Top row: title + close */
.modal-top-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.modal-title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close-btn {
  width: 36px;
  height: 36px;
  background: var(--bg-soft);
  border-radius: 18px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.modal-close-btn i[data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

/* Input group */
.modal-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-label-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.modal-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-label-required {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-pink);
}

.modal-input {
  width: 100%;
  height: 56px;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1.5px solid var(--border-light);
  padding: 0 18px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.modal-input:focus {
  border-color: var(--brand-pink);
}

.modal-input::placeholder {
  color: var(--text-muted);
}

/* Helper text */
.modal-helper {
  font-size: 13px;
  color: var(--text-secondary);
}

/* CTA row */
.modal-btn-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.modal-submit-btn {
  height: 56px;
  background: var(--brand-pink);
  border-radius: 28px;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 28px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  box-shadow: 0 6px 18px -4px rgba(229, 20, 126, 0.4);
  transition: background 0.15s;
}

.modal-submit-btn:hover {
  background: var(--brand-pink-dark);
}

.modal-submit-btn i[data-lucide] {
  width: 18px;
  height: 18px;
}

/* ── Virtual keyboard ── */
/* Usable inner width: 610px kiosk – 28px left padding – 28px right padding = 554px
   10-key row: 10×46px + 9×6px = 514px (centred within 554px) */
.vkb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.vkb-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
}

/* ── Base key ── */
.vkb-key {
  flex: 0 0 46px;
  height: 52px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(27, 27, 92, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.vkb-key-label {
  pointer-events: none;
  line-height: 1;
}

.vkb-key:active,
.vkb-key.is-pressed {
  background: var(--bg-soft);
}

/* ── Shift key ── */
.vkb-key--shift {
  flex: 0 0 78px;
}

.vkb-key--shift i[data-lucide] {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
  pointer-events: none;
}

/* Shift — single-shot (once): soft background + pink ring */
.vkb-key--shift.is-shift-once {
  background: var(--bg-soft);
  border-color: var(--brand-pink);
}

.vkb-key--shift.is-shift-once i[data-lucide] {
  color: var(--brand-pink);
}

/* Shift — Caps Lock (caps): filled pink + white icon + dot indicator */
.vkb-key--shift.is-shift-caps {
  background: var(--brand-pink);
  border-color: var(--brand-pink);
}

.vkb-key--shift.is-shift-caps i[data-lucide] {
  color: #ffffff;
}

/* Caps Lock dot in top-right corner */
.vkb-key--shift.is-shift-caps::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 7px;
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
}

/* ── Backspace key ── */
.vkb-key--backspace {
  flex: 0 0 78px;
}

.vkb-key--backspace i[data-lucide] {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
  pointer-events: none;
}

/* ── Utility row keys (row 6) ── */
.vkb-key--at {
  flex: 0 0 46px;
}

.vkb-key--dot {
  flex: 0 0 46px;
}

/* Space bar — grows to fill remaining width */
.vkb-key--space {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* .com quick key */
.vkb-key--dotcom {
  flex: 0 0 78px;
  font-size: 14px;
}

/* Focus highlight on email input when typing via virtual keyboard */
.modal-input.vkb-focused {
  border-color: var(--brand-pink);
  box-shadow: 0 0 0 3px rgba(229, 20, 126, 0.12);
}

/* ── Modal tab row ── */
.modal-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg-soft);
  border-radius: 14px;
  flex-shrink: 0;
}

.modal-tab {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.modal-tab.is-active {
  background: rgba(27, 27, 92, 0.10);
  color: var(--text-primary);
}

/* ── Person rows ── */
.persons-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.person-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(27, 27, 92, 0.12);
  border-color: var(--brand-navy);
}

.person-avatar {
  width: 44px;
  height: 44px;
  background: var(--bg-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.person-avatar i[data-lucide],
.person-avatar svg {
  width: 22px;
  height: 22px;
  color: var(--text-primary);
}

/* Guest rows in the persons-list: pink-soft circle + pink user icon (09c) */
.person-row.is-guest .person-avatar {
  background: var(--brand-pink-soft) !important;
}

.person-row.is-guest .person-avatar i[data-lucide],
.person-row.is-guest .person-avatar svg {
  color: var(--brand-pink) !important;
  stroke: var(--brand-pink) !important;
}

.person-row.is-guest .person-avatar svg * {
  stroke: var(--brand-pink) !important;
}

.person-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.person-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.person-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* HOSŤ pill — pink-soft chip flagging guest entries (per frame 09c) */
.guest-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--brand-pink-soft);
  color: var(--brand-pink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.person-email {
  font-size: 13px;
  color: var(--text-secondary);
}

.person-chev {
  width: 32px;
  height: 32px;
  background: var(--bg-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.person-chev i[data-lucide],
.person-chev svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

/* ── Panel visibility ── */
.modal-panels {
  display: contents;
}

.modal-panel {
  display: none;
}

/* Signed-in: show panel based on data-active on the sheet */
.modal-sheet[data-active="persons"] .modal-panel--persons {
  display: flex;
  flex-direction: column;
}

.modal-sheet[data-active="email"] .modal-panel--email {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Not signed-in: hide tab row, force email panel visible */
.modal-overlay:not(.has-tabs) .modal-tabs {
  display: none;
}

.modal-overlay:not(.has-tabs) .modal-panel--email {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-overlay:not(.has-tabs) .modal-panel--persons {
  display: none !important;
}