/* ============================================================
   PASSADU — Shared UI Components
   Screen panels, hero bars, buttons, badges, cards, placeholders
   ============================================================ */

/* ─── SCREEN PANELS ─── */
.screen-panel {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--canvas);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  transition: background var(--t-med);
}

.screen-panel::-webkit-scrollbar { display: none; }
.screen-panel.active { display: flex; }

/* ─── SCREEN HERO BAR ─── */
.screen-hero-bar {
  padding: 20px 22px 18px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
  transition: background var(--t-med), border-color var(--t-med);
}

.screen-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-family: var(--font-sans);
  margin-bottom: 4px;
}

.screen-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.2;
  transition: color var(--t-med);
}

.screen-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  transition: color var(--t-med);
}

/* ─── PLACEHOLDER (screens not yet built) ─── */
.screen-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  background: var(--canvas);
  transition: background var(--t-med);
}

.placeholder-icon {
  color: var(--primary);
  opacity: 0.35;
}

.placeholder-label {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  max-width: 240px;
  line-height: 1.5;
}

.placeholder-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  background: var(--surface-card);
  color: var(--primary);
  border-radius: var(--rounded-pill);
  border: 1px solid var(--hairline);
  transition: background var(--t-med), border-color var(--t-med);
}

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px; /* Apple HIG minimum touch target */
  padding: 0 22px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: var(--rounded-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
  min-width: 120px;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover   { background: var(--primary-active); }
.btn-primary:active  { transform: scale(0.98); }
.btn-primary:disabled {
  background: var(--primary-disabled);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  background: var(--surface-card);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.btn-secondary:hover  { background: var(--surface-cream-strong); }
.btn-secondary:active { transform: scale(0.98); }

/* ─── STATUS BADGES ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--rounded-xs);
  letter-spacing: 0.3px;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-error   { background: var(--error-bg); color: var(--error); }
.badge-teal    { background: rgba(93, 184, 166, 0.15); color: var(--accent-teal); }

/* ─── CARRIER BADGE ─── */
.carrier-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--rounded-xs);
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ─── CARDS ─── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
  padding: var(--sp-md);
  transition: background var(--t-med), border-color var(--t-med);
}

.card:hover {
  background: var(--surface-cream-strong);
}

/* ─── SECTION DIVIDER ─── */
.section-divider {
  height: 1px;
  background: var(--hairline);
  margin: 0;
  transition: background var(--t-med);
}

/* ─── EMPTY STATE ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--muted);
  text-align: center;
}

.empty-state-icon  { opacity: 0.3; }
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.empty-state-desc  { font-size: 13px; line-height: 1.5; max-width: 220px; }
.scroll-body::-webkit-scrollbar { display: none; }