/* App-specific layout on top of Oat. Keep this small; Oat styles the elements. */
:root {
  --sidebar-width: 13rem;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-12);
}

nav[data-topnav] .brand { display: flex; gap: var(--space-2); align-items: baseline; }
nav[data-topnav] .topnav-right { margin-inline-start: auto; }
nav[data-topnav] form { margin: 0; }

.small-text { font-size: var(--text-8); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num, th.num { text-align: end; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: var(--space-6);
}
.page-head h1 { margin: 0; font-size: var(--text-3); }
.page-head p { margin: var(--space-1) 0 0; }

.crumbs { font-size: var(--text-8); color: var(--muted-foreground); margin-block-end: var(--space-2); }
.crumbs a { color: inherit; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}
.card.stat { padding: var(--space-4); }
.stat .label { font-size: var(--text-8); color: var(--muted-foreground); }
.stat .value { font-size: var(--text-4); font-weight: var(--font-semibold); }
.stat .sub { font-size: var(--text-8); color: var(--muted-foreground); }

.section { margin-block-end: var(--space-8); }
.section > h2 { font-size: var(--text-5); margin-block-end: var(--space-3); }

.form-narrow { max-width: 40rem; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 var(--space-4);
}
.form-grid .span-all { grid-column: 1 / -1; }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-block-end: var(--space-4); }
.toolbar form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.toolbar input[type=search] { width: 16rem; }
.toolbar select { width: auto; }
.toolbar .spacer { flex: 1; }

.empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--muted-foreground);
  border: 1px dashed var(--border);
  border-radius: var(--radius-medium);
}

.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-2); }

.mapping td { vertical-align: middle; }
.mapping select { min-width: 12rem; }
.preview-table td, .preview-table th { white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.preview-table th .maps-to { display: block; font-size: var(--text-8); color: var(--success); font-weight: var(--font-medium); }

.issues { margin: 0; padding-inline-start: var(--space-4); }
.mono { font-family: var(--font-mono); font-size: var(--text-8); word-break: break-all; }
.inline-form { display: inline; margin: 0; }

.status-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.status-chip {
  display: flex; flex-direction: column; min-width: 8rem; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-medium); color: var(--foreground);
  text-decoration: none; background: var(--card);
}
.status-chip:hover, .status-chip.active { border-color: var(--foreground); }
.status-chip .n { font-size: var(--text-4); font-weight: var(--font-semibold); }
.status-chip .l { font-size: var(--text-8); color: var(--muted-foreground); }
.status-chip[data-key="confirmed"] .n { color: var(--success); }
.status-chip[data-key="disputed"] .n { color: var(--warning); }
.status-chip[data-key="problem"] .n { color: var(--danger); }

.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-5); }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: -7px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--background); border: 2px solid var(--muted-foreground);
}
.timeline li.good::before { border-color: var(--success); background: var(--success); }
.timeline li.bad::before { border-color: var(--danger); background: var(--danger); }
.timeline .when { font-size: var(--text-8); color: var(--muted-foreground); }

.email-preview {
  border: 1px solid var(--border); border-radius: var(--radius-medium); padding: var(--space-4);
  background: var(--card); white-space: pre-wrap; font-size: var(--text-7);
}
.email-preview .subject { font-weight: var(--font-semibold); margin-bottom: var(--space-3); white-space: normal; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
dl.facts dt { color: var(--muted-foreground); font-size: var(--text-7); }
dl.facts dd { margin: 0; }

/* Party-facing response page */
.portal { max-width: 44rem; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
.portal .brand { font-weight: var(--font-semibold); margin-bottom: var(--space-6); }
.portal .balance-box { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-medium); margin: var(--space-4) 0 var(--space-6); }
.portal .balance-box .amt { font-size: var(--text-3); font-weight: var(--font-semibold); }
.choice { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.choice label { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-medium); }
.choice label:has(input:checked) { border-color: var(--foreground); }
.field-error { color: var(--danger); font-size: var(--text-8); display: block; margin-top: var(--space-1); }
[data-show-when] { display: none; }
[data-show-when].shown { display: block; }

.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }
.login-wrap .card { width: min(24rem, 100%); }

@media (max-width: 768px) {
  nav[data-topnav] .topnav-right .text-light { display: none; }
  .page { padding: var(--space-4) var(--space-4) var(--space-10); }
  .toolbar input[type=search] { width: 100%; }
}