/* ============================================
   PLAN SIGN — Custom Styles
   ============================================ */

:root {
  --ps-primary: #696cff;
  --ps-success: #71dd37;
  --ps-danger: #ff3e1d;
  --ps-warning: #ffab00;
  --ps-info: #03c3ec;
}

/* Brand & Hero */
.hero-card { background: linear-gradient(135deg, #f0f0ff 0%, #fff 50%); }
.brand-kicker { font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: #a1acb8; }
.illustration-wrap img { filter: drop-shadow(0 4px 12px rgba(105,108,255,.12)); }

/* KPI Cards */
.avatar-initial { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }

/* Tables */
.table-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* Timeline */
.timeline { list-style: none; padding-left: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: #e7e7e8; }
.timeline-item { position: relative; padding-left: 32px; }
.timeline-indicator { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 1; }
.timeline-indicator i { font-size: 18px; color: var(--ps-primary); }

/* Wizard Steps */
.wizard-steps { display: flex; align-items: center; gap: 0; }
.wizard-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 0 0 auto; padding: 0 8px;
}
.wizard-step-number {
  width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 600;
  font-size: 14px; border: 2px solid #d9dee3; color: #a1acb8;
  background: #fff; transition: all .2s;
}
.wizard-step-label { font-size: 12px; color: #a1acb8; font-weight: 500; white-space: nowrap; }
.wizard-step.active .wizard-step-number { border-color: var(--ps-primary); color: #fff; background: var(--ps-primary); }
.wizard-step.active .wizard-step-label { color: var(--ps-primary); font-weight: 600; }
.wizard-step.completed .wizard-step-number { border-color: var(--ps-success); color: #fff; background: var(--ps-success); }
.wizard-step.completed .wizard-step-label { color: var(--ps-success); }
.wizard-connector { flex: 1; height: 2px; background: #d9dee3; min-width: 20px; }
.wizard-connector.active { background: var(--ps-success); }

/* Upload Zone */
.upload-zone {
  border: 2px dashed #d9dee3; border-radius: 8px; padding: 40px 20px;
  text-align: center; cursor: pointer; transition: all .2s;
  position: relative;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--ps-primary); background: rgba(105,108,255,.04); }
.upload-zone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Status Badge overrides */
.badge.bg-label-success { background-color: rgba(113,221,55,.16) !important; color: #71dd37 !important; }
.badge.bg-label-info { background-color: rgba(3,195,236,.16) !important; color: #03c3ec !important; }
.badge.bg-label-danger { background-color: rgba(255,62,29,.16) !important; color: #ff3e1d !important; }
.badge.bg-label-warning { background-color: rgba(255,171,0,.16) !important; color: #ffab00 !important; }
.badge.bg-label-dark { background-color: rgba(75,75,75,.16) !important; color: #4b4b4b !important; }
.badge.bg-label-secondary { background-color: rgba(133,146,158,.16) !important; color: #85929e !important; }
.badge.bg-label-primary { background-color: rgba(105,108,255,.16) !important; color: #696cff !important; }

/* Alerts */
.alert.show { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Shared UX blocks */
.ps-surface { border: 1px solid #e9eaef; border-radius: 14px; box-shadow: 0 8px 20px rgba(16,24,40,.04); }
.ps-section-title { font-weight: 700; letter-spacing: .2px; color: #374151; }
.ps-subtle { color: #6b7280; }
.ps-inline-status {
  border-radius: 10px; border: 1px solid #dbeafe; background: #eff6ff;
  color: #1d4ed8; padding: 8px 10px; font-size: .84rem;
}
.ps-inline-status.is-success { border-color: #d1fadf; background: #ecfdf3; color: #027a48; }
.ps-inline-status.is-error { border-color: #ffd7d4; background: #fff3f2; color: #b42318; }

/* Toasts */
.ps-toast-root {
  position: fixed; top: 18px; right: 18px; z-index: 1060;
  display: grid; gap: 8px; width: min(340px, calc(100vw - 24px));
}
.ps-toast {
  border-radius: 10px; border: 1px solid #dbeafe; background: #eff6ff; color: #1d4ed8;
  box-shadow: 0 8px 24px rgba(16,24,40,.14);
  padding: 10px 12px; font-size: .85rem; opacity: 0; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
}
.ps-toast.show { opacity: 1; transform: translateY(0); }
.ps-toast-success { border-color: #d1fadf; background: #ecfdf3; color: #027a48; }
.ps-toast-error { border-color: #ffd7d4; background: #fff3f2; color: #b42318; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .wizard-step-label { display: none; }
  .wizard-step-number { width: 28px; height: 28px; font-size: 12px; }
  .ps-toast-root { right: 12px; left: 12px; width: auto; }
}