/* ============================================================
   admin.css — small overrides layered on n4n.css for the
   management plane. Reuses the shared component classes.
   ============================================================ */

/* Login screen ------------------------------------------------ */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card { width: 100%; max-width: 400px; }
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 6px;
}

/* Page header + toolbar --------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-head h1 { font-size: 22px; font-weight: 700; }
.page-head .sub { color: var(--n-text-2); font-size: 13px; margin-top: 4px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Form grids -------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: end;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--n-text-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--n-accent); }

textarea.input { min-height: 72px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; }

/* Collapsible editor rows ------------------------------------- */
.collapse { display: none; }
.collapse.open { display: block; }

/* Section spacing --------------------------------------------- */
.section + .section { margin-top: 24px; }
.section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--n-text-3);
  margin-bottom: 12px;
}

/* Pager ------------------------------------------------------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
}
.pager-controls { display: flex; gap: 8px; }

/* Key hint chip ----------------------------------------------- */
.keychip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--n-surface-2);
  border: 1px solid var(--n-line);
  color: var(--n-text-2);
}

/* Inline forms in table cells --------------------------------- */
.cell-form { display: inline-flex; gap: 6px; align-items: center; }
td .btn-sm, td .icon-btn { vertical-align: middle; }

/* Compact definition list for detail pages -------------------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 14px; }
.dl dt { color: var(--n-text-3); }
.dl dd { margin: 0; color: var(--n-text); }