/* =========================================================
   application-status.css  —  NEW FILE (Phase 6)
   Path: assets/css/application-status.css

   Styling scoped to public/application-status.html only. Reuses
   existing design tokens from style.css/auth.css. badge-info/
   badge-error/badge-muted are redefined locally (same values as
   visa-application.css's copies) so this module has no stylesheet
   dependency on another module.
   ========================================================= */

.badge-info { background: #E6F0FA; color: #1D5FA8; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.badge-error { background: var(--color-error-tint); color: var(--color-error); padding: 4px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.badge-muted { background: var(--color-bg-section); color: var(--color-body); padding: 4px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }

.as-app-empty { text-align: center; padding: var(--space-8) var(--space-5); background: var(--color-bg-section); border-radius: var(--radius-md); color: var(--color-body); }
.as-app-empty p { margin-bottom: var(--space-4); }

.as-detail-loading, .as-detail-error { text-align: center; padding: var(--space-7) 0; color: var(--color-body); }
.as-detail-error { color: var(--color-error); }

.as-status-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.as-application-meta { font-size: var(--fs-small); color: var(--color-body); }

.as-remark-banner {
  background: var(--color-accent-tint); border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);
}
.as-remark-banner strong { display: block; font-size: var(--fs-small); color: var(--color-heading); margin-bottom: 4px; }
.as-remark-banner p { font-size: var(--fs-small); margin-bottom: 4px; }
.as-remark-date { font-size: var(--fs-micro); color: var(--color-body); }

/* ---------- Milestone progress checklist ---------- */
.as-milestones { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); }
.as-milestone { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-bg-section); opacity: 0.6; }
.as-milestone--done { opacity: 1; background: var(--color-success-tint); }
.as-milestone--current { opacity: 1; background: var(--color-warning-tint); }
.as-milestone-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; margin-top: 4px; }
.as-milestone--done .as-milestone-dot { background: var(--color-success); }
.as-milestone--current .as-milestone-dot { background: var(--color-warning); }
.as-milestone-body { display: flex; flex-direction: column; gap: 2px; }
.as-milestone-label { font-weight: var(--fw-semibold); color: var(--color-heading); font-size: var(--fs-small); }
.as-milestone-detail { font-size: var(--fs-micro); color: var(--color-body); }
.as-milestone-date { font-size: var(--fs-micro); color: var(--color-body); font-style: italic; }

/* ---------- Timeline (same visual language as visa-application.css's va-timeline) ---------- */
.as-timeline { list-style: none; margin: 0; padding: 0; }
.as-timeline li { position: relative; padding-left: var(--space-6); padding-bottom: var(--space-5); border-left: 2px solid var(--color-border); }
.as-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.as-timeline li::before {
  content: ""; position: absolute; left: -6px; top: 2px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary);
}
.as-timeline .as-timeline-status { font-weight: var(--fw-semibold); color: var(--color-heading); }
.as-timeline .as-timeline-date { font-size: var(--fs-micro); color: var(--color-body); }
.as-timeline .as-timeline-note { font-size: var(--fs-small); color: var(--color-body); margin-top: 2px; }

/* ---------- Documents / appointment summary rows ---------- */
.as-doc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-bg-section); border-radius: var(--radius-sm); margin-bottom: var(--space-2); font-size: var(--fs-small); }

@media (max-width: 768px) {
  .as-status-header { flex-direction: column; align-items: flex-start; }
}