/* seat-manager.css — Seat allocation modal & compact card styles */

/* ── Overlay ── */
.sm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sm-modal {
  background: var(--bg, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 14px;
  padding: 28px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  color: var(--text, #f1f5f9);
}
.sm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sm-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text, #f1f5f9);
}
.sm-close-btn {
  background: var(--bg3, #334155);
  border: 1px solid var(--border, #475569);
  border-radius: 8px;
  color: var(--text, #f1f5f9);
  cursor: pointer;
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sm-close-btn:hover,
.sm-close-btn:focus-visible {
  background: var(--danger, #ef4444);
  color: #fff;
  outline: 2px solid var(--accent, #FF5D6C);
  outline-offset: 2px;
}

/* ── Summary ── */
.sm-summary {
  background: var(--card, var(--bg2, #0f172a));
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}
.sm-summary-icon { font-size: 1.4rem; }
.sm-summary-text { color: var(--text, #f1f5f9); }
.sm-summary-text strong { color: var(--accent, #FF5D6C); }

/* ── Upgrade message ── */
.sm-upgrade-msg {
  background: var(--card, var(--bg2, #0f172a));
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: var(--muted, #94a3b8);
  font-size: 0.95rem;
  margin-bottom: 20px;
}
.sm-upgrade-msg a {
  color: var(--accent, #FF5D6C);
  text-decoration: underline;
}

/* ── Section heading ── */
.sm-section-heading {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #94a3b8);
  margin-bottom: 10px;
}

/* ── Allocation list ── */
.sm-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sm-list-item {
  background: var(--card, var(--bg2, #0f172a));
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.sm-list-item-info { flex: 1; min-width: 0; }
.sm-list-email {
  font-size: 0.9rem;
  color: var(--text, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-list-name {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Status pills ── */
.sm-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sm-pill-pending {
  background: rgba(148,163,184,0.15);
  color: var(--muted, #94a3b8);
  border: 1px solid rgba(148,163,184,0.3);
}
.sm-pill-active {
  background: rgba(59,130,246,0.15);
  color: var(--accent, #FF5D6C);
  border: 1px solid rgba(59,130,246,0.35);
}

/* ── Revoke button ── */
.sm-revoke-btn {
  background: transparent;
  border: 1px solid var(--danger, #ef4444);
  color: var(--danger, #ef4444);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 5px 10px;
  min-height: 36px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sm-revoke-btn:hover,
.sm-revoke-btn:focus-visible {
  background: var(--danger, #ef4444);
  color: #fff;
  outline: 2px solid var(--danger, #ef4444);
  outline-offset: 2px;
}
.sm-revoke-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Empty state ── */
.sm-empty {
  text-align: center;
  color: var(--muted, #94a3b8);
  font-size: 0.9rem;
  padding: 16px 0;
  margin-bottom: 20px;
}

/* ── Add form ── */
.sm-add-form {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sm-email-input {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  background: var(--card, var(--bg2, #0f172a));
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  color: var(--text, #f1f5f9);
  font-size: 0.9rem;
  min-height: 44px;
}
.sm-email-input:focus {
  outline: 2px solid var(--accent, #FF5D6C);
  outline-offset: 1px;
  border-color: var(--accent, #FF5D6C);
}
.sm-allocate-btn {
  background: var(--accent, #FF5D6C);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 18px;
  min-height: 44px;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.sm-allocate-btn:hover,
.sm-allocate-btn:focus-visible {
  opacity: 0.88;
  outline: 2px solid var(--accent, #FF5D6C);
  outline-offset: 2px;
}
.sm-allocate-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Feedback ── */
.sm-feedback {
  font-size: 0.83rem;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: none;
}
.sm-feedback.success {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
  display: block;
}
.sm-feedback.error {
  background: rgba(239,68,68,0.12);
  color: var(--danger, #ef4444);
  border: 1px solid rgba(239,68,68,0.3);
  display: block;
}

/* ── Compact card ── */
.sm-card {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--muted, #94a3b8);
  flex-wrap: wrap;
}
.sm-card-seats {
  font-weight: 600;
  color: var(--text, #f1f5f9);
}
.sm-card-link {
  color: var(--accent, #FF5D6C);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  padding: 0;
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sm-card-link:hover,
.sm-card-link:focus-visible {
  opacity: 0.8;
  outline: 2px solid var(--accent, #FF5D6C);
  outline-offset: 2px;
}

/* ── People picker (seat allocation) ── */
.sm-picker-wrap {
  margin: 0 0 10px;
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  overflow: hidden;
}
.sm-picker-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--border, #334155);
  background: var(--bg3, #1e293b);
  color: var(--text, #f1f5f9);
  font-size: 0.88rem;
  outline: none;
}
.sm-picker-search:focus {
  background: var(--bg2, #1e293b);
  border-bottom-color: var(--blue, #6C3CE1);
}
.sm-picker-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.sm-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.sm-picker-item:hover,
.sm-picker-item:focus-visible {
  background: var(--bg3, #334155);
  outline: none;
}
.sm-picker-item-disabled {
  opacity: 0.45;
  cursor: default;
}
.sm-picker-item-loading {
  opacity: 0.6;
  pointer-events: none;
}
.sm-picker-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C3CE1, #FF5D6C);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sm-picker-info {
  flex: 1;
  min-width: 0;
}
.sm-picker-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-picker-email {
  font-size: 0.75rem;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-picker-no-email {
  font-style: italic;
}
.sm-picker-warn {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sm-picker-empty {
  padding: 12px;
  text-align: center;
  color: var(--muted, #94a3b8);
  font-size: 0.85rem;
  list-style: none;
}