/* ============================================================
   admin.css — beheerscherm. Hergebruikt de tokens/knoppen/login-stijl uit
   styles.css; hier alleen de tabel/formulier-specifieke stijl.
   ============================================================ */

.admin { min-height: 100vh; }
.admin-main { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; display: flex; flex-direction: column; gap: 32px; }

.admin-section h2 { margin: 0 0 12px; font-size: 17px; }
.admin-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-section-actions { display: flex; gap: 8px; }
.admin-count { font-weight: 400; color: var(--ink-muted); font-size: 13px; }
.admin-hint { font-size: 12.5px; color: var(--ink-soft); margin: -6px 0 12px; }

.status-box { display: flex; flex-wrap: wrap; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 13.5px; }
.status-item { display: flex; flex-direction: column; gap: 2px; }
.status-item .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.status-item .value { font-weight: 700; font-size: 15px; }
.status-item .value.warn { color: var(--warn); }
.status-item .value.danger { color: var(--danger); }

.admin-table { display: flex; flex-direction: column; gap: 6px; }
.admin-row {
  display: grid;
  grid-template-columns: 14px 1.6fr 1fr 70px 70px 1.4fr auto;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
}
.admin-row.admin-row-cat { grid-template-columns: 14px 1fr 60px 90px 1fr auto; }
.admin-row.admin-row-watch { grid-template-columns: 1.4fr 100px 70px 60px auto; }
.admin-row.admin-row-failing { border-color: var(--danger); background: var(--danger-bg); }
.admin-row.admin-row-disabled { opacity: 0.55; }
.admin-dot { width: 9px; height: 9px; border-radius: 50%; }
.admin-dot.ok { background: #16a34a; }
.admin-dot.error { background: var(--danger); }
.admin-dot.unknown { background: var(--ink-muted); }
.admin-dot.disabled-auto { background: var(--warn); }
.admin-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-name small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 11px; }
.admin-meta { color: var(--ink-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-meta.error-text { color: var(--danger); }
.admin-actions { display: flex; gap: 4px; justify-self: end; }
.admin-actions button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; cursor: pointer; color: var(--ink-soft); }
.admin-actions button:hover { background: var(--surface-2); color: var(--ink); }

.admin-form {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; margin-bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.admin-form.admin-form-narrow { grid-template-columns: 1fr; max-width: 480px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.admin-form input, .admin-form select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 13.5px; background: var(--surface); color: var(--ink); }
.admin-form .full-width { grid-column: 1 / -1; }
.admin-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.admin-form-error { grid-column: 1 / -1; color: var(--danger); font-size: 12.5px; }
.admin-test-result { grid-column: 1 / -1; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--surface); }
.admin-test-result.ok { color: #16a34a; }
.admin-test-result.fail { color: var(--danger); }

@media (max-width: 720px) {
  .admin-row, .admin-row.admin-row-cat, .admin-row.admin-row-watch { grid-template-columns: 1fr; }
  .admin-actions { justify-self: start; }
  .admin-form { grid-template-columns: 1fr; }
}