/* ─── 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)}

/* ── Showroom images (Dealership tab) ──────────────────────────────────────── */
.sr-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sr-thumb{position:relative;margin:0;width:150px;height:100px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.sr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sr-del{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:var(--danger,#dc2626);color:#fff;font-size:12px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* ── Dealership contact details (phone / email / opening hours) ──────────── */
.ct-loc + .ct-loc { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border, #e2e8f0); }
.ct-loc-h { font-weight: 700; font-size: 14px; color: var(--text, #0f172a); margin-bottom: 2px; }
.ct-hours { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ct-day { display: grid; grid-template-columns: 96px 150px auto 24px auto; align-items: center; gap: 8px; }
.ct-day-n { font-size: 13px; color: var(--text-muted, #64748b); }
.ct-day select, .ct-day input[type="time"] { padding: 6px 8px; font-size: 13px; }
.ct-dash { font-size: 12.5px; color: var(--text-muted, #64748b); text-align: center; }
@media (max-width: 620px) {
  .ct-day { grid-template-columns: 84px 1fr; grid-auto-rows: min-content; }
  .ct-day .ct-open, .ct-day .ct-close { grid-column: 2; }
  .ct-dash { display: none; }
}