/*
 * Admin UI — sober & compact foundation (ENH-0197, C2)
 *
 * Loaded after every other stylesheet from index.html so admin rules
 * win the cascade against the older .admin-* rules scattered across
 * login-misc.css and sidebar-conversations.css. The goal is to lock the
 * dense type-scale and remove visual fluff (rounding, large padding,
 * loose line-heights) for everything inside .admin-shell.
 *
 * Visual targets:
 *   - 13px base, line-height 1.4
 *   - 6px vertical / 10px horizontal padding on dense interactives
 *   - flat (radius 0 on chrome, 2px on focusable surfaces)
 *   - monospace for keys, IDs, source badges, timestamps
 */

.admin-shell {
  --admin-font: 13px;
  --admin-font-sm: 11px;
  --admin-font-xs: 10px;
  --admin-line: 1.4;
  --admin-pad-y: 6px;
  --admin-pad-x: 10px;
  --admin-pad-y-sm: 4px;
  --admin-pad-x-sm: 8px;
  --admin-gap: 8px;
  --admin-gap-sm: 4px;
  --admin-radius: 0;
  --admin-radius-focus: 2px;
  --admin-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --admin-divider: color-mix(in srgb, var(--border) 75%, transparent);

  font-size: var(--admin-font);
  line-height: var(--admin-line);
}

/* Type scale lock — override looser headings from the legacy admin rules */
.admin-shell h1,
.admin-shell-header h1 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
}
.admin-shell h2,
.admin-shell-panel-copy h2,
.admin-settings-heading h2 {
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
}
.admin-shell h3 { font-size: 13px; margin: 0; }
.admin-shell p,
.admin-shell-header p,
.admin-shell-panel-copy p,
.admin-settings-heading p { font-size: 12px; line-height: var(--admin-line); margin: 0; }
.admin-shell-kicker,
.admin-shell-eyebrow {
  font-size: var(--admin-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Version badge in the admin shell header */
.admin-shell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-gap);
}
.admin-shell-version {
  font-family: var(--admin-mono);
  font-size: var(--admin-font-xs);
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius);
  white-space: nowrap;
  align-self: flex-start;
}

/* Tabs — flat, dense, no pill rounding */
.admin-shell-tabs {
  gap: 0;
  border-bottom: 1px solid var(--admin-divider);
  padding: 0;
}
.admin-shell-tab {
  border-radius: var(--admin-radius);
  padding: var(--admin-pad-y) var(--admin-pad-x);
  font-size: var(--admin-font);
  line-height: 1.2;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
}
.admin-shell-tab:hover { color: var(--text); background: transparent; }
.admin-shell-tab.active {
  color: var(--text);
  background: transparent;
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Cards — flatten radius and padding */
.admin-shell-empty-card,
.admin-setting-card,
.admin-user-property-card,
.admin-persona-policy-card,
.admin-persona-preview {
  border-radius: var(--admin-radius);
  padding: var(--admin-pad-y) var(--admin-pad-x);
  border: 1px solid var(--admin-divider);
}

/* Setting card grid: tighter rows */
.admin-setting-card {
  gap: var(--admin-gap-sm) var(--admin-gap);
  padding: var(--admin-pad-y) var(--admin-pad-x);
}
.admin-setting-title-row strong { font-size: var(--admin-font); }
.admin-setting-title-row span {
  font-size: var(--admin-font-xs);
  font-family: var(--admin-mono);
}
.admin-setting-description,
.admin-setting-help,
.admin-setting-meta { font-size: var(--admin-font-xs); line-height: 1.35; }

/* Single-line setting row (C15): one option per line, dense */
.admin-settings-list,
.admin-user-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.admin-setting-row,
.admin-user-setting-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) auto minmax(220px, 1fr) minmax(180px, 1.4fr);
  align-items: center;
  gap: var(--admin-gap);
  padding: var(--admin-pad-y) var(--admin-pad-x);
  border-top: 1px solid var(--admin-divider);
  border-bottom: 0;
  height: 44px;
  background: transparent;
  flex: 0 0 44px;
}
.admin-setting-row:last-child,
.admin-user-setting-row:last-child { border-bottom: 1px solid var(--admin-divider); }
.admin-user-setting-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 1fr) minmax(180px, 1.6fr);
}
.admin-setting-label-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
}
.admin-setting-label-col strong {
  font-size: var(--admin-font);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-setting-label-col .admin-setting-key {
  font-size: var(--admin-font-xs);
  font-family: var(--admin-mono);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-setting-controls-col {
  display: flex;
  align-items: center;
  gap: var(--admin-gap-sm);
  min-width: 0;
}
.admin-setting-controls-col .admin-setting-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--admin-font-xs);
  color: var(--muted);
}
.admin-setting-controls-col input:not([type="checkbox"]),
.admin-setting-controls-col select {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 var(--admin-pad-x-sm);
  line-height: 26px;
}
.admin-setting-meta-col {
  font-size: var(--admin-font-xs);
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Suppress legacy stacked-card padding inside the new rows */
.admin-setting-row.admin-setting-card,
.admin-user-setting-row.admin-user-property-card { box-shadow: none; }

/* Multiline setting row: line 1 (label / badge / controls / meta) at the
 * standard density, line 2 (full-width textarea) below. Used for prompts
 * and any setting that needs more than a one-liner input. */
.admin-setting-row.admin-setting-row-multiline {
  grid-template-areas:
    "label badge controls meta"
    "input input input input";
  align-items: center;
  height: auto;
  flex: 0 0 auto;
  padding-bottom: var(--admin-pad-y);
  row-gap: var(--admin-pad-y);
}
.admin-setting-row.admin-setting-row-multiline > .admin-setting-label-col { grid-area: label; }
.admin-setting-row.admin-setting-row-multiline > .admin-setting-source { grid-area: badge; }
.admin-setting-row.admin-setting-row-multiline > .admin-setting-controls-col { grid-area: controls; }
.admin-setting-row.admin-setting-row-multiline > .admin-setting-meta-col { grid-area: meta; }
.admin-setting-row.admin-setting-row-multiline > .admin-setting-multiline-input {
  grid-area: input;
  width: 100%;
  min-width: 0;
}
.admin-setting-row.admin-setting-row-multiline .admin-setting-multiline-input textarea.admin-setting-input {
  width: 100%;
  min-width: 0;
  resize: vertical;
  font-family: var(--admin-mono);
  font-size: 12px;
  line-height: 1.4;
  padding: var(--admin-pad-y-sm) var(--admin-pad-x-sm);
}

/* Personas tab — sub-editor blocks for instructions / collections / policies / periodic actions */
.admin-persona-subeditor {
  display: flex;
  flex-direction: column;
  gap: var(--admin-gap);
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius);
  padding: var(--admin-pad-y) var(--admin-pad-x);
  margin-top: var(--admin-gap);
}
.admin-persona-subeditor > .admin-user-detail-subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-gap-sm);
  padding-bottom: var(--admin-pad-y-sm);
  border-bottom: 1px solid var(--admin-divider);
}
.admin-persona-subitem {
  display: flex;
  flex-direction: column;
  gap: var(--admin-gap-sm);
  padding: var(--admin-pad-y) var(--admin-pad-x-sm);
  border: 1px dashed var(--admin-divider);
  border-radius: var(--admin-radius-focus);
}
.admin-persona-subitem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-gap-sm);
}
.admin-persona-subitem-header strong { font-size: var(--admin-font); }
.admin-persona-add,
.admin-persona-remove {
  font-size: var(--admin-font-xs);
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--admin-divider);
  color: var(--text);
  cursor: pointer;
}
.admin-persona-add:hover,
.admin-persona-remove:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.admin-persona-remove:disabled,
.admin-persona-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* Allow some persona form fields to span the full width of the editor */
.admin-persona-form .admin-user-field-wide {
  grid-column: 1 / -1;
}
.admin-persona-form .admin-user-field-wide textarea {
  width: 100%;
  resize: vertical;
}

/* User-detail persona card: featured block at the top of the
 * setting-overrides form. Shows admin default + user choice + dropdown
 * to assign a per-user override. */
.admin-user-persona-card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-gap-sm);
  padding: var(--admin-pad-y) var(--admin-pad-x);
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius);
  margin-bottom: var(--admin-gap);
}
.admin-user-persona-card > .admin-user-detail-subtitle {
  padding-bottom: var(--admin-pad-y-sm);
  border-bottom: 1px solid var(--admin-divider);
}
.admin-user-persona-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--admin-font-sm);
  line-height: 1.35;
}
.admin-user-persona-label {
  color: var(--muted);
  font-size: var(--admin-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.admin-user-persona-tag {
  font-family: var(--admin-mono);
  font-size: var(--admin-font-xs);
  padding: 1px 5px;
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius);
  color: var(--muted);
  margin-left: 6px;
}
.admin-user-persona-controls {
  display: flex;
  align-items: center;
  gap: var(--admin-gap);
  padding-top: var(--admin-pad-y-sm);
  border-top: 1px dashed var(--admin-divider);
}
.admin-user-persona-controls select {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 var(--admin-pad-x-sm);
}

/* Fix user-detail panel content clipping: legacy CSS sets overflow:hidden
 * + max-height:100% on the detail panel, which hides anything below the
 * viewport. Constrain the panel height and let it scroll. */
body.admin-mode .admin-users-host,
body.admin-mode .admin-shell-main,
body.admin-mode .admin-shell-panel {
  min-height: 0;
}
body.admin-mode .admin-user-detail-panel {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  display: block;
  place-items: initial;
}
body.admin-mode .admin-user-detail {
  max-height: none;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--admin-gap);
}
body.admin-mode .admin-user-property-card {
  max-height: none;
  overflow: visible;
}

/* Info icon next to setting labels */
.admin-setting-label-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.admin-setting-label-line strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-family: var(--admin-mono);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--admin-divider);
  border-radius: 50%;
  color: var(--muted);
  cursor: help;
  user-select: none;
  flex: 0 0 auto;
}
.admin-info-icon:hover,
.admin-info-icon:focus {
  color: var(--text);
  border-color: var(--accent);
  outline: none;
}

/* Form controls — flat, dense */
.admin-shell input,
.admin-shell select,
.admin-shell textarea,
.admin-user-form input,
.admin-user-field input,
.admin-user-field select,
.admin-user-password,
.admin-setting-input,
.admin-setting-form input,
.admin-setting-form select,
.admin-user-setting-row input,
.admin-user-setting-row select,
.admin-persona-form input,
.admin-persona-form select,
.admin-persona-form textarea {
  border-radius: var(--admin-radius-focus);
  padding: var(--admin-pad-y) var(--admin-pad-x-sm);
  font-size: var(--admin-font);
  line-height: var(--admin-line);
  min-height: 0;
  border: 1px solid var(--admin-divider);
  background: var(--panel-solid);
  color: var(--text);
}
.admin-shell textarea,
.admin-persona-form textarea { font-family: var(--admin-mono); font-size: 12px; }
.admin-shell input:focus,
.admin-shell select:focus,
.admin-shell textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Buttons — flat, compact */
.admin-shell button,
.admin-tab-save,
.admin-user-save,
.admin-user-action {
  border-radius: var(--admin-radius-focus);
  padding: var(--admin-pad-y) var(--admin-pad-x);
  font-size: var(--admin-font);
  line-height: 1.2;
  min-height: 0;
}
.admin-shell button.primary,
.admin-tab-save.primary { font-weight: 600; }

/* Save bar at the bottom of a tab/panel — sticky-friendly */
.admin-tab-save-row {
  border-top: 1px solid var(--admin-divider);
  padding-top: var(--admin-pad-y);
  gap: var(--admin-gap);
}

/* Source / status / consumerStatus badges — monospace, no radius */
.admin-setting-source,
.admin-source-badge,
.admin-consumer-badge,
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-divider);
  font-family: var(--admin-mono);
  font-size: var(--admin-font-xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
  color: var(--muted);
  white-space: nowrap;
}
.admin-consumer-badge[data-status="pending-wire"] {
  border-color: color-mix(in srgb, var(--warning, #d97706) 60%, var(--admin-divider));
  color: color-mix(in srgb, var(--warning, #d97706) 85%, var(--text));
}
.admin-consumer-badge[data-status="wired"] {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--admin-divider));
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

/* User list — denser rows */
.admin-user {
  border-radius: var(--admin-radius);
  padding: var(--admin-pad-y) var(--admin-pad-x-sm);
  gap: var(--admin-gap-sm);
}
.admin-user-name { font-size: var(--admin-font); font-weight: 600; }
.admin-user-email { font-size: var(--admin-font-xs); font-family: var(--admin-mono); font-weight: 500; }
.admin-user-meta { font-size: var(--admin-font-xs); }

/* User detail panel: properties as dense definition list */
.admin-user-property {
  padding: var(--admin-pad-y-sm) 0;
  border-bottom: 1px dashed var(--admin-divider);
}
.admin-user-property-key { font-size: var(--admin-font-xs); font-weight: 700; }
.admin-user-property-value { font-size: var(--admin-font); font-family: var(--admin-mono); }

/* Persona list & detail */
.admin-persona-item {
  border-radius: var(--admin-radius);
  padding: var(--admin-pad-y) var(--admin-pad-x-sm);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--admin-divider);
}
.admin-persona-item.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
}
.admin-persona-item span { font-family: var(--admin-mono); font-size: var(--admin-font-xs); }
.admin-persona-preview pre {
  font-family: var(--admin-mono);
  font-size: var(--admin-font-xs);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Dense table used by future audit history + settings list views */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-font);
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--admin-pad-y-sm) var(--admin-pad-x-sm);
  border-bottom: 1px solid var(--admin-divider);
  vertical-align: top;
}
.admin-table th {
  font-size: var(--admin-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: transparent;
}
.admin-table td code,
.admin-table td .admin-table-mono { font-family: var(--admin-mono); font-size: var(--admin-font-xs); }
.admin-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Observability chips that the legacy CSS over-padded */
.admin-observability-chip {
  border-radius: var(--admin-radius);
  padding: var(--admin-pad-y-sm) var(--admin-pad-x-sm);
  gap: 1px;
}
.admin-observability-chip strong { font-size: var(--admin-font); }
.admin-observability-chip span { font-size: var(--admin-font-xs); }
.admin-observability-summary { gap: var(--admin-gap-sm); }

/* Suppress legacy decorative shadows under .admin-shell */
.admin-shell-panel,
.admin-shell-empty-card,
.admin-setting-card,
.admin-user-property-card,
.admin-persona-policy-card,
.admin-persona-preview,
.admin-user-detail-panel {
  box-shadow: none;
}