/* Settings / Admin Settings views — built from the portal's own tokens so they
   read as part of the same app. Nothing here overrides styles.css. */

.admin-list { display: flex; flex-direction: column; gap: 10px; }

.admin-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.admin-row.inactive { opacity: .6; }
.admin-row .who { flex: 1 1 220px; min-width: 0; }
.admin-row .who .title { font-weight: 700; font-size: 16px; }
.admin-row .who .desc { color: var(--text-muted); font-size: 13px; word-break: break-all; }
.admin-row .who .meta { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.admin-row .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-row .row-actions { display: flex; gap: 8px; margin-left: auto; }

.role-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.role-pill.admin { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.role-pill.grant { background: var(--primary-tint); color: var(--primary); border-color: var(--primary-tint-strong); }
.role-pill.muted { color: var(--text-muted); }

.grant-list { display: flex; flex-direction: column; gap: 8px; }
.check-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0;
}
.check-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--primary); width: auto; }
.check-row .check-desc { display: block; color: var(--text-muted); font-size: 12px; }

.admin-tab { display: none; }
.admin-tab.active { display: block; }

.settings-group {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.settings-group h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 17px; }
.setting-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.setting-row:first-of-type { border-top: 0; }
.setting-row .setting-label { font-weight: 600; font-size: 14px; }
.setting-row .setting-desc { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.setting-row .setting-source { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.setting-row .setting-source.db { color: var(--primary); }
.setting-row .setting-input { display: flex; gap: 8px; align-items: center; }
.setting-row .setting-input input { flex: 1; }
.setting-row .setting-actions { display: flex; gap: 6px; }
@media (max-width: 720px) {
  .setting-row { grid-template-columns: 1fr; }
  .admin-row .row-actions { margin-left: 0; }
}