/* ==========================================================================
   GSSMCS — request tracking (verify.html) and payments (payment.html)
   Builds on apply.css (header, cards, inputs, alerts, success badge).
   ========================================================================== */

.track {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1rem max(3rem, env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) { .track { padding: 3.5rem 2rem 4rem; } }
.track > * + * { margin-top: 1.25rem; }

.track__intro .label-micro { color: var(--color-accent); }
.track__intro h1 {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.track__intro p { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); }
@media (min-width: 640px) { .track__intro h1 { font-size: 2.5rem; } }

.track__help { text-align: center; font-size: 0.8125rem; line-height: 1.6; color: var(--color-text-subtle); }
.track__help a { font-weight: 600; color: var(--color-sapphire); }
html.dark .track__help a { color: var(--color-accent); }

/* ---------- Reference search ---------- */
.track-search { padding: 1.25rem; }
.track-search__row { display: flex; flex-direction: column; gap: 0.75rem; }
.track-search__row .app-input { flex: 1; text-transform: uppercase; }
.track-search__btn { width: 100%; padding: 0.875rem 1.25rem; }
.track-search.is-invalid .app-input { border-color: var(--color-crimson); }
@media (min-width: 640px) {
  .track-search { padding: 1.5rem; }
  .track-search__row { flex-direction: row; }
  .track-search__btn { width: auto; white-space: nowrap; }
}

/* ---------- Result ---------- */
.track-result,
.pay-card { padding: 1.5rem; }
@media (min-width: 640px) { .track-result, .pay-card { padding: 2rem; } }

.track-result__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.track-result__head .label-micro { color: var(--color-accent); }
.track-result__ref {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}
.track-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: var(--color-text-subtle);
  transition: background-color 150ms, color 150ms;
}
.track-refresh:hover { background-color: #e2e8f080; color: var(--color-primary); }
.track-refresh:disabled .icon { animation: spin 1s linear infinite; }
html.dark .track-refresh:hover { background-color: rgba(255, 255, 255, 0.06); }

.status-badge {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: 1rem;
  border: 1px solid #fde68a;
  background-color: #fffbeb;
}
.status-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: #fef3c7;
  color: #b45309;
}
.status-badge small { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #92400e; }
.status-badge strong { display: block; margin-top: 0.125rem; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.3; color: #78350f; }

.status-badge[data-tone="success"] { border-color: #a7f3d0; background-color: #ecfdf5; }
.status-badge[data-tone="success"] .status-badge__icon { background-color: #d1fae5; color: #059669; }
.status-badge[data-tone="success"] small { color: #047857; }
.status-badge[data-tone="success"] strong { color: #064e3b; }
.status-badge[data-tone="danger"] { border-color: #fecdd3; background-color: #fff1f2; }
.status-badge[data-tone="danger"] .status-badge__icon { background-color: #ffe4e6; color: #be123c; }
.status-badge[data-tone="danger"] small { color: #be123c; }
.status-badge[data-tone="danger"] strong { color: #881337; }

html.dark .status-badge { border-color: rgba(245, 158, 11, 0.3); background-color: rgba(245, 158, 11, 0.08); }
html.dark .status-badge__icon { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; }
html.dark .status-badge small { color: #fbbf24; }
html.dark .status-badge strong { color: #fef3c7; }
html.dark .status-badge[data-tone="success"] { border-color: rgba(16, 185, 129, 0.3); background-color: rgba(16, 185, 129, 0.08); }
html.dark .status-badge[data-tone="success"] .status-badge__icon { background-color: rgba(16, 185, 129, 0.15); color: #34d399; }
html.dark .status-badge[data-tone="success"] small { color: #34d399; }
html.dark .status-badge[data-tone="success"] strong { color: #d1fae5; }
html.dark .status-badge[data-tone="danger"] { border-color: rgba(244, 63, 94, 0.3); background-color: rgba(244, 63, 94, 0.08); }
html.dark .status-badge[data-tone="danger"] .status-badge__icon { background-color: rgba(244, 63, 94, 0.15); color: #fb7185; }
html.dark .status-badge[data-tone="danger"] small { color: #fb7185; }
html.dark .status-badge[data-tone="danger"] strong { color: #ffe4e6; }

.track-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0; }
.track-meta dt,
.pay-receipt__rows dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.track-meta dd { margin: 0.125rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--color-text-main); }

/* ---------- Bills ---------- */
.bills { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
html.dark .bills { border-color: rgba(255, 255, 255, 0.08); }
.bills__total small { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); }
.bills__total strong { display: block; margin-top: 0.25rem; font-family: var(--font-serif); font-size: 2.25rem; line-height: 1.1; font-weight: 700; color: var(--color-primary); }

.bills__list { display: flex; flex-direction: column; margin-top: 1rem; }
.bills__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 0.9375rem;
  color: var(--color-text-main);
}
.bills__list li:first-child { padding-top: 0; }
.bills__list small { display: block; font-size: 0.75rem; color: var(--color-text-subtle); }
.bills__list strong { font-weight: 600; white-space: nowrap; }
html.dark .bills__list li { border-color: rgba(255, 255, 255, 0.08); }

.bills__pay { margin-top: 1.25rem; }
.bills__note { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--color-text-muted); }
.bills__note a { font-weight: 600; color: var(--color-sapphire); }
html.dark .bills__note a { color: var(--color-accent); }

.bills-clear {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.9375rem;
  color: #047857;
}
html.dark .bills-clear { border-color: rgba(255, 255, 255, 0.08); color: #34d399; }

/* ---------- Payment ---------- */
.pay-status {
  flex-shrink: 0;
  max-width: 50%;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: var(--color-surface-alt);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: right;
  color: var(--color-text-muted);
}
.pay-card .bills__list { margin-top: 1.5rem; }
.pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.pay-total strong { font-family: var(--font-serif); font-size: 2rem; line-height: 1.1; color: var(--color-primary); }
.pay-card__btn { margin-top: 1.5rem; padding: 1rem 1.25rem; font-size: 0.875rem; }
.pay-card__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pay-card__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}
.pay-card__secure .icon { color: #059669; }
.pay-recheck { margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.pay-empty,
.pay-receipt { padding: 2rem 1.5rem; text-align: center; }
.pay-empty__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  background-color: #d1fae5;
  color: #059669;
}
html.dark .pay-empty__badge { background-color: rgba(16, 185, 129, 0.15); color: #34d399; }
.pay-empty h2,
.pay-receipt h2 { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700; color: var(--color-primary); }
.pay-empty p { margin: 0.5rem 0 1rem; font-size: 0.9375rem; color: var(--color-text-muted); }

.pay-receipt .label-micro { color: #059669; }
.pay-receipt h2 { margin-top: 0.375rem; }
.pay-receipt:focus { outline: none; }
.pay-receipt__lead { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); }
.pay-receipt__rows {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background-color: var(--color-surface-alt);
  text-align: left;
}
.pay-receipt__rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
.pay-receipt__rows div + div { border-top: 1px dashed #e2e8f0; }
.pay-receipt__rows dd { margin: 0; font-size: 0.875rem; font-weight: 600; text-align: right; color: var(--color-text-main); overflow-wrap: anywhere; }
html.dark .pay-receipt__rows,
html.dark .pay-receipt__rows div + div { border-color: rgba(255, 255, 255, 0.08); }

/* Print only the receipt */
@media print {
  .app-header, .track__intro, .track__help, .app-done__actions { display: none !important; }
  body { background: #fff !important; }
  .app-card { box-shadow: none !important; border-color: #cbd5e1 !important; }
}