/* ─── DealerDMS — Admin (settings, AI, API keys) ──────────────────────────── */
/* Theme-correct: use the real design tokens (--surface for card/input bg,
   --text/--text-muted/--border/--primary). Previously referenced non-existent
   --card / --input-bg tokens, which fell back to hardcoded #fff → white cards +
   inputs in dark themes. */
/* Module tab bar: the shared .admin-tabs component lives in app.css (I13). */

#admin-body .card { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px; padding: 20px; margin-bottom: 16px; }
#admin-body .card-h { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text, #0f172a); }
#admin-body .card-sub { font-size: 13px; color: var(--text-muted, #64748b); margin: 0 0 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .fld { display: flex; flex-direction: column; gap: 5px; }
.form-grid .fld.wide { grid-column: 1 / -1; }
.form-grid .fld > span { font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .3px; }
.form-grid input, .form-grid select, .form-grid textarea {
  border: 1px solid var(--border, #cbd5e1); border-radius: 8px; padding: 9px 11px; font-size: 14px;
  font-family: inherit; background: var(--surface, #fff); color: var(--text, #0f172a); outline: none; }
.form-grid input::placeholder, .form-grid textarea::placeholder { color: var(--text-muted, #94a3b8); opacity: .7; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  border-color: var(--primary, #1d4ed8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1d4ed8) 18%, transparent); }
.form-grid .fld small { font-size: 11.5px; color: var(--text-muted, #94a3b8); }
/* Read-only value rows (e.g. Plan & licensing) — plain text/badge, not an input. */
.form-grid .fld > div { font-size: 14px; color: var(--text, #0f172a); padding: 4px 0; min-height: 20px; }
.form-grid input:disabled, .form-grid textarea:disabled, .form-grid select:disabled {
  opacity: .7; cursor: not-allowed; background: var(--surface-hover, rgba(127,127,127,.06)); }
.card-actions { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; padding: 8px 10px; color: var(--text-muted, #64748b); font-size: 12px;
  text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border, #e2e8f0); }
table.grid td { padding: 10px; border-bottom: 1px solid var(--border, #f1f5f9); color: var(--text, #0f172a); }
table.grid code { background: var(--surface-hover, rgba(127,127,127,.12)); color: var(--text, #0f172a); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
.btn-link { background: none; border: none; color: var(--primary, #1d4ed8); cursor: pointer; font-size: 13px; padding: 0; }
.btn-link.danger { color: var(--danger, #dc2626); }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  table.grid { display: block; overflow-x: auto; white-space: nowrap; }
}

/* API-key create modal scope checkboxes */
.nk-scopes{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.nk-scope{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px}
.nk-scope:hover{border-color:var(--primary)}
.nk-scope input{margin-top:3px;flex:none}
.nk-scope code{font-size:11px;color:var(--text-muted);background:var(--surface-2);border-radius:4px;padding:0 5px}
.nk-scope small{color:var(--text-muted)}