:root {
  --bg: #0f1419;
  --panel: #1b2430;
  --panel-2: #222d3b;
  --text: #e6edf3;
  --muted: #93a1b0;
  --border: #2d3947;
  --primary: #2f81f7;
  --danger: #e5534b;
  --ok: #3fb950;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

h2 {
  font-size: 16px;
  margin: 0 0 12px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.nav-link {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.nav-link:hover {
  color: var(--text);
  text-decoration: none;
}

.nav-link.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.login {
  max-width: 380px;
  margin: 12vh auto 0;
  text-align: center;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.tile {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tile-count {
  font-size: 28px;
  font-weight: 700;
}

.tile-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.grid th,
table.grid td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.grid th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Wide operations tables (Letters, CMS Complaints) scroll inside their own card
   instead of forcing the page body to scroll sideways. */
.table-scroll {
  overflow-x: auto;
}

.table-scroll table.grid {
  min-width: 720px;
}

table.grid td .lob {
  white-space: nowrap;
}

.lob-name {
  color: var(--muted);
}

.lob-status {
  font-weight: 600;
}

.lob-status.active {
  color: var(--ok);
}

.detail {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
  margin: 0 0 20px;
  font-size: 14px;
}

.detail dt {
  color: var(--muted);
}

.detail dd {
  margin: 0;
  word-break: break-word;
}

.status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 12px;
}

.actions {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
  filter: brightness(1.1);
}

.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn.ghost {
  background: transparent;
}

.inline {
  display: inline;
  margin: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
}

.stack label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.stack input,
.stack select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}

.error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
}

/* Payer status: the per-row edit affordance. Styled as a plain link rather than
   a button so a table row full of buttons does not compete with the page's real
   primary actions. */
.row-action {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Visually hidden but available to screen readers. Used for the Actions column
   header, which carries no visible label because the Edit links speak for
   themselves, but must not be an empty <th> to a screen reader navigating the
   table by column. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The payer edit form. .stack already lays out labelled fields in a column and
   caps at 360px, which is right for the login form it was written for and too
   narrow for a notes textarea or a URL-bearing contact address. */
.stack.wide {
  max-width: 640px;
}

.stack textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.field-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

/* One line of business, as a fieldset so the pending/active radio pair is
   grouped and announced with its line name. */
.lob-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 10px;
  background: var(--panel-2);
}

.lob-row-legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.lob-row-meta {
  display: flex;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.lob-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lob-toggle {
  display: flex;
  gap: 18px;
}

.lob-choice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

/* Post-redirect confirmation. Sits where .error sits and shares its rhythm, so
   a save that succeeded and a save that failed occupy the same place on screen
   rather than shifting the form. */
.flash {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 13px;
}

.flash.success {
  border-color: var(--ok);
  color: var(--ok);
}

/* Archive query (Sprint 304-B). Two card treatments the other screens do not
   need: a standing compliance notice that must read as part of the page rather
   than as an alert an operator learns to skip, and a warning card for the two
   conditions that change what the result set means (the row cap was hit, or the
   result carries patient letter text). Both are cards rather than .error text,
   because .error is a 13px inline field message and a notice styled as one gets
   read as one. */
.card.notice {
  border-left: 4px solid var(--primary);
}

.card.notice h2,
.card.warn h2 {
  margin-top: 0;
}

.card.warn {
  border-color: var(--danger);
  border-left: 4px solid var(--danger);
}

.card.warn h2 {
  color: var(--danger);
}

/* Filter rows across the operations screens. Never had a rule; the archive
   query form has enough controls that an unstyled inline row wraps into an
   unreadable block, so it gets one here and the other screens inherit it. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.filters label.check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail {
    grid-template-columns: 1fr;
  }
  .stack.wide {
    max-width: 100%;
  }
}