:root {
  --ink: #18211d;
  --panel: #ffffff;
  --muted: #52635a;
  --surface-subtle: #f7f8f4;
  --surface-hover: #edf2ee;
  --focus-ring: #527b00;
  --button-primary-bg: #173e32;
  --button-primary-hover-bg: #0f2e25;
  --button-primary-active-bg: #092119;
  --button-primary-fg: #ffffff;
  --link: #245846;
  --link-hover: #123e2e;
  --button-secondary-bg: #ffffff;
  --field-bg: #ffffff;
  --field-disabled-bg: #e2e5e1;
  --field-disabled-fg: #55625b;
  --badge-default-bg: #edf0ed;
  --badge-default-fg: #24322b;
  --badge-global-bg: #d9e8ff;
  --badge-global-fg: #123a66;
  --badge-active-bg: #d8f0df;
  --badge-active-fg: #165d34;
  --badge-disabled-bg: #f9e3e0;
  --badge-disabled-fg: #8a2e27;
  --badge-invited-bg: #fff0c2;
  --badge-invited-fg: #654b00;
  --callout-bg: #e8efe9;
  --callout-border: #cad9ce;
  --success-bg: #e5f4ea;
  --success-border: #badbc6;
  --success-fg: #173e32;
  --warning-bg: #fff4db;
  --warning-border: #ead399;
  --warning-fg: #493b10;
  --error-bg: #fde7e4;
  --error-border: #e6b7b1;
  --error-fg: #8a2e27;
  --status-ok: #277a48;
  --status-ok-ring: #dff2e6;
  --danger: #8a2e27;
}

/* Every text-bearing component owns a foreground color in both themes. */
.organization-chip span,
.nav-label {
  opacity: 1;
  color: #d7e1da;
}

.sidebar nav a:hover,
.sidebar nav a:active {
  background: rgba(255, 255, 255, .13);
}

.sidebar nav a:focus-visible {
  outline-color: #ffffff;
}

.topbar {
  background: var(--panel);
}

.metric-card span,
.metric-card small,
.foundation-grid p,
.muted,
.auth-card .muted,
.auth-note,
.help,
.help ul,
td small,
footer,
th,
.table-panel .section-heading > span,
.empty-state > p {
  color: var(--muted);
}

.foundation-grid > div,
th {
  background: var(--surface-subtle);
}

.status-dot.ok {
  color: #1f5d38;
}

.status-dot.ok:before {
  background: var(--status-ok);
  box-shadow: 0 0 0 4px var(--status-ok-ring);
}

.callout,
.message {
  color: var(--ink);
  background: var(--callout-bg);
  border-color: var(--callout-border);
}

.callout.warning,
.message.warning {
  color: var(--warning-fg);
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.callout.success,
.message.success {
  color: var(--success-fg);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.message.error {
  color: var(--error-fg);
  background: var(--error-bg);
  border-color: var(--error-border);
}

.badge {
  color: var(--badge-default-fg);
  background: var(--badge-default-bg);
}

.badge.global {
  color: var(--badge-global-fg);
  background: var(--badge-global-bg);
}

.badge.active {
  color: var(--badge-active-fg);
  background: var(--badge-active-bg);
}

.badge.disabled {
  color: var(--badge-disabled-fg);
  background: var(--badge-disabled-bg);
}

.badge.invited {
  color: var(--badge-invited-fg);
  background: var(--badge-invited-bg);
}

input,
select {
  background: var(--field-bg);
}

.button.primary {
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
}

.button.primary:hover:not(:disabled),
.button.primary:focus-visible:not(:disabled) {
  background: var(--button-primary-hover-bg);
}

.button.primary:active:not(:disabled) {
  background: var(--button-primary-active-bg);
}

.button.secondary {
  color: var(--ink);
  background: var(--button-secondary-bg);
}

.button.secondary:hover:not(:disabled),
.button.secondary:focus-visible:not(:disabled) {
  background: var(--surface-hover);
}

.button.danger {
  color: #ffffff;
  background: var(--danger);
}

.account-actions {
  display: grid;
  gap: .5rem;
  margin-bottom: .75rem;
}

.sensitive-action {
  border-top: 1px solid var(--error-border);
  padding-top: .75rem;
}

.sensitive-action .callout {
  margin: .75rem 0 0;
}

.sensitive-action input[type="checkbox"] {
  width: auto;
}

.auth-brand {
  color: var(--link);
}

.link-button,
.subtle-link {
  color: var(--link);
}

.link-button:hover,
.link-button:focus-visible,
.subtle-link:hover,
.subtle-link:focus-visible {
  color: var(--link-hover);
}

.link-button.danger {
  color: var(--danger);
}

.link-button.danger:hover,
.link-button.danger:focus-visible {
  color: #5f1f1a;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

input:focus,
select:focus {
  outline: 3px solid var(--focus-ring);
  border-color: var(--focus-ring);
}

button:disabled,
input:disabled,
select:disabled,
.button[aria-disabled="true"] {
  color: var(--field-disabled-fg);
  background: var(--field-disabled-bg);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 1;
}

.button.primary:disabled,
.button.secondary:disabled {
  color: var(--field-disabled-fg);
  background: var(--field-disabled-bg);
}

.table-scroll {
  overflow: auto;
  overscroll-behavior-inline: contain;
}
tbody tr:hover,
tbody tr:focus-within {
  background: var(--surface-hover);
}

tbody tr:only-child td[colspan] {
  color: var(--muted);
  text-align: center;
  padding-block: 28px;
}

@media (max-width: 950px) {
  .topbar {
    height: auto;
    min-height: 76px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    padding-block: 14px;
  }

  .topbar-actions {
    margin-left: auto;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0f5f1;
    --muted: #c0cbc4;
    --paper: #101713;
    --panel: #18211d;
    --line: #445149;
    --forest: #2b7259;
    --forest-2: #8ad4ae;
    --link: #8ad4ae;
    --link-hover: #c3f1d8;
    --surface-subtle: #202b25;
    --surface-hover: #26372f;
    --focus-ring: #cfe65a;
    --button-primary-bg: #2b7259;
    --button-primary-hover-bg: #358d6d;
    --button-primary-active-bg: #1e513f;
    --button-primary-fg: #ffffff;
    --button-secondary-bg: #24322b;
    --field-bg: #111a16;
    --field-disabled-bg: #29332e;
    --field-disabled-fg: #bfc9c2;
    --badge-default-bg: #2c3b33;
    --badge-default-fg: #f1f6f2;
    --badge-global-bg: #23466f;
    --badge-global-fg: #ffffff;
    --badge-active-bg: #1f5436;
    --badge-active-fg: #f0fff5;
    --badge-disabled-bg: #6a2d29;
    --badge-disabled-fg: #fff1ef;
    --badge-invited-bg: #5c4705;
    --badge-invited-fg: #fff6cd;
    --callout-bg: #243d30;
    --callout-border: #3b6650;
    --success-bg: #1d4f36;
    --success-border: #3f7d59;
    --success-fg: #effff4;
    --warning-bg: #594401;
    --warning-border: #92730d;
    --warning-fg: #fff5cc;
    --error-bg: #632c28;
    --error-border: #9e4d46;
    --error-fg: #fff1ef;
    --status-ok: #79d696;
    --status-ok-ring: #234d34;
    --danger: #ffb4ab;
    --shadow: none;
  }

  .topbar {
    background: var(--panel);
  }

  .public-shell {
    background: radial-gradient(circle at 15% 10%, #253929, transparent 34%),
      radial-gradient(circle at 90% 90%, #21352d, transparent 35%), var(--paper);
  }

  .status-dot.ok {
    color: #9ce3b5;
  }

  .link-button.danger:hover,
  .link-button.danger:focus-visible {
    color: #ffffff;
  }
}