/* Farabaz admin page. Reads tokens only (tokens.css), on top of base.css. */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--gutter);
  border-block-end: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
}
.topbar[hidden] { display: none; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--ink); font-weight: var(--weight-bold); }
.topbar nav { display: flex; gap: var(--space-2xs); flex: 1; overflow-x: auto; }
.topbar nav a {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.topbar nav a:hover { background: var(--surface-3); color: var(--ink); }
.topbar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: var(--weight-semibold); }

main { max-inline-size: var(--page-wide); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-2xl); }
/* main is focused only from script after a page change (tabindex -1), so screen readers start
   at the new page. It is not a control and cannot be reached with Tab, so it shows no ring. */
main:focus { outline: none; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-md); }
.page-head h1 { font-size: var(--text-2xl); margin: 0; }
.lead { color: var(--ink-3); margin-block: calc(-1 * var(--space-sm)) var(--space-md); max-inline-size: var(--measure); }

section + section { margin-block-start: var(--space-lg); }
section h2 { font-size: var(--text-lg); margin-block-end: var(--space-xs); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--space-xs) var(--space-sm); text-align: start; border-block-end: 1px solid var(--line-2); vertical-align: middle; }
th { color: var(--ink-3); font-weight: var(--weight-medium); font-size: var(--text-xs); background: var(--surface-2); white-space: nowrap; }
tr:last-child td { border-block-end: 0; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.actions { text-align: end; white-space: nowrap; }
td:first-child { white-space: nowrap; }
td code { overflow-wrap: anywhere; }
.muted { color: var(--ink-3); }
.empty { padding: var(--space-md); color: var(--ink-3); text-align: center; }

.tag {
  display: inline-block;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  line-height: 1.6;
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag-ok { background: var(--success-soft); color: var(--success-ink); }
.tag-warn { background: var(--warning-soft); color: var(--warning-ink); }
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); }

.summary { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-end: var(--space-md); color: var(--ink-2); }
.summary strong { color: var(--ink); font-size: var(--text-xl); display: block; font-variant-numeric: tabular-nums; }

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); margin-block-end: var(--space-md); }
.toolbar .field { min-inline-size: 10rem; }

.form { display: grid; gap: var(--space-sm); }
.form-row { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-block-start: var(--space-xs); }
.check { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--ink); }
.check input { inline-size: 18px; block-size: 18px; accent-color: var(--accent-ink); margin: 0; }

.signin { max-inline-size: 24rem; margin: var(--space-2xl) auto 0; }
.signin h1 { font-size: var(--text-2xl); }

dialog {
  inline-size: min(34rem, calc(100vw - 2 * var(--gutter)));
  max-block-size: calc(100vh - 2 * var(--gutter));
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-lg);
}
/* The one raw color (DESIGN.md): the shared tokens have no scrim, and a backdrop darkens in both themes. */
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-sm); }
.dialog-head h2 { font-size: var(--text-xl); margin: 0; }

.secret {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.secret code { flex: 1; overflow-wrap: anywhere; }

.model-list { max-block-size: 12rem; overflow: auto; margin: var(--space-xs) 0 0; padding-inline-start: var(--space-md); font-size: var(--text-sm); }
/* The browser's triangle marker is replaced by the SVG chevron (owner rule O5). */
details summary { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; color: var(--link); font-size: var(--text-sm); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary svg { inline-size: 16px; block-size: 16px; rotate: -90deg; transition: rotate var(--duration-fast) var(--ease); }
details[open] summary svg { rotate: 0deg; }
@media (prefers-reduced-motion: reduce) { details summary svg { transition: none; } }
.alert { margin-block-end: var(--space-sm); }
.alert p { margin: 0; }

.toast {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: var(--z-toast);
  box-shadow: var(--shadow);
  max-inline-size: calc(100vw - 2 * var(--gutter));
}

@media (max-width: 650px) {
  .topbar { flex-wrap: wrap; gap: var(--space-xs); }
  .topbar nav { order: 3; flex-basis: 100%; }
  .brand { flex: 1; }
}