/* Settings and administration screens. */

/* --- Page scaffolding ------------------------------------------------------ */
.admin-scroll,
.tabs__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.page,
.admin-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-12);
}

.page-header { margin-bottom: var(--sp-6); }
.admin-lede,
.page-header__lede {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--sp-6);
  max-width: 44rem;
}

.admin-section-title,
.section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-lg);
  margin: var(--sp-8) 0 var(--sp-4);
}

/* --- Tabs ------------------------------------------------------------------
   Radio inputs plus sibling selectors: no JavaScript, and the browser keeps
   the chosen tab across a re-render.
*/
.tabs { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.tabs__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--control-h-lg);
  padding: 0 var(--sp-4);
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tabs__tab:hover { color: var(--ink); }

.tabs__panel { display: none; }

/* Each radio activates its own label and its own panel. Written out because
   CSS has no way to derive one from the other. */
#tab-account:checked ~ label[for="tab-account"],
#tab-models:checked ~ label[for="tab-models"],
#tab-appearance:checked ~ label[for="tab-appearance"],
#tab-security:checked ~ label[for="tab-security"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tabs__bar:has(#tab-account:checked) ~ .tabs__body [data-tab="tab-account"],
.tabs__bar:has(#tab-models:checked) ~ .tabs__body [data-tab="tab-models"],
.tabs__bar:has(#tab-appearance:checked) ~ .tabs__body [data-tab="tab-appearance"],
.tabs__bar:has(#tab-security:checked) ~ .tabs__body [data-tab="tab-security"] {
  display: block;
}
.tabs__tab:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Cards ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.card:last-child { margin-bottom: 0; }
.card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
  margin-bottom: var(--sp-2);
}
.card__lede {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
  line-height: var(--leading-relaxed);
}
.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

/* Legacy aliases so existing admin templates keep their spacing. */
.form-grid { display: block; }
.connection__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.connection__footer { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--border); flex-wrap: wrap; }
.field--actions { margin-top: var(--sp-5); margin-bottom: 0; }

/* --- Definition lists ------------------------------------------------------ */
.detail-list {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--text-sm);
}
.detail-list dt { color: var(--ink-muted); font-weight: 500; }
.detail-list dd { margin: 0; }

/* --- Status ---------------------------------------------------------------- */
.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-full);
  flex: none;
  background: var(--ink-faint);
}
.status-dot.is-ok { background: var(--success); }
.status-dot.is-bad { background: var(--danger); }
.status-dot.is-off { background: var(--ink-faint); }

/* --- Model list ------------------------------------------------------------ */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: var(--sp-4);
}
.bulk-bar__label { font-size: var(--text-sm); color: var(--ink-muted); margin-right: var(--sp-1); }

.model-rows {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.model-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.model-row:last-child { border-bottom: 0; }
.model-row.is-off { opacity: 0.5; }
.model-row__check { accent-color: var(--accent); width: 1rem; height: 1rem; flex: none; }
.model-row__avatar { flex: none; width: 2rem; height: 2rem; }
.model-row__main { flex: 1; min-width: 0; }
.model-row__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 0.1rem;
}
.model-row__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.model-row__actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; }

.model-list { list-style: none; margin: 0; padding: 0; }
.model-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.model-list__item:first-child { padding-top: 0; }
.model-list__item:last-child { border-bottom: 0; padding-bottom: 0; }

/* --- Permission grids ------------------------------------------------------ */
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.checkbox-row .checkbox { flex: 0 0 auto; }
.checkbox.is-muted { opacity: 0.6; }

.perm-row {
  align-items: flex-start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.perm-row:last-child { border-bottom: 0; }
.perm-row input { margin-top: 0.15rem; }
.perm-row__desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-weight: 400;
  line-height: var(--leading-normal);
  margin-top: 0.1rem;
}

.perm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.perm-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}
.perm-list__state {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--surface-active);
  color: var(--ink-faint);
  flex: none;
}
.perm-list__state.is-on { background: var(--success-soft); color: var(--success); }

/* --- Misc ------------------------------------------------------------------ */
.input--file {
  height: auto;
  padding: 0.35rem;
  font-size: var(--text-xs);
  background: var(--surface-raised);
}

.nav-item.is-disabled { opacity: 0.4; cursor: default; }
.nav-item.is-disabled:hover { background: none; color: var(--ink-muted); }

.field__hint code,
.card__lede code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.05em 0.3em;
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
}