/*
 * User-admin detail page — Compact Detail archetype.
 * Ported verbatim from new-design-system/design-system/archetypes/compact-detail/
 * reference.html (the user-approved canon, SR-4): single 880px reading column,
 * page head (prefix / name / meta + state badge), typed sections of 180px-label
 * rows. Scoped under .user-detail so it can't collide with module stylesheets.
 */
.user-detail {
  --ud-fg: #111827; --ud-fg2: #4b5563; --ud-fg3: #6b7280; --ud-fg4: #9ca3af;
  --ud-bd: #e5e7eb; --ud-bd2: #d1d5db; --ud-paper: #ffffff;
  --ud-b700: #1d4ed8; --ud-active: #16a34a; --ud-inactive: #9ca3af;

  font-family: Inter, system-ui, sans-serif;
  color: var(--ud-fg);
}

.user-detail .back-link { font-size: 13px; color: var(--ud-fg2); display: inline-block; margin-bottom: 12px; }
.user-detail .back-link:hover { color: var(--ud-fg); }

/* Reading column — the defining structural feature of Compact Detail */
.user-detail .reader { max-width: 880px; margin: 0 auto; }

/* Page head */
.user-detail .head { padding: 4px 0 18px; border-bottom: 1px solid var(--ud-bd); display: flex; align-items: baseline; gap: 22px; }
.user-detail .head-block { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.user-detail .head-prefix { font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ud-fg3); font-weight: 700; }
.user-detail .head-name { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--ud-fg); margin: 0; }
.user-detail .head-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ud-fg3); margin-top: 6px; }
.user-detail .head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.user-detail .head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* State badge — square, Title Case, no dot (read-only here; not a picker) */
.user-detail .badge { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 12px; font-weight: 600; border: 1px solid currentcolor; border-radius: 3px; background: var(--ud-paper); white-space: nowrap; line-height: 1.3; }
.user-detail .badge--active { color: var(--ud-active); }
.user-detail .badge--inactive { color: var(--ud-inactive); }
.user-detail .badge--warn { color: #b45309; }

/* Head + inline action buttons */
.user-detail .head-action,
.user-detail .ud-btn { font: inherit; font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: 3px; cursor: pointer; line-height: 1.3; background: var(--ud-paper); color: var(--ud-fg); border: 1px solid var(--ud-bd2); }
.user-detail .head-action:hover,
.user-detail .ud-btn:hover { background: #f9fafb; }
.user-detail .head-action--primary,
.user-detail .ud-btn--primary { background: #111827; color: var(--ud-paper); border-color: #111827; }
.user-detail .head-action--primary:hover,
.user-detail .ud-btn--primary:hover { background: #1f2937; }
.user-detail .ud-inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.user-detail .ud-inline-form--btn { display: inline; }
.user-detail .ud-select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--ud-bd2); border-radius: 3px; background: var(--ud-paper); color: var(--ud-fg); }

/* Sections */
.user-detail .section { margin-top: 28px; }
.user-detail .section-heading { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ud-fg); font-weight: 700; margin: 0 0 10px; border-bottom: 2px solid var(--ud-fg); padding-bottom: 5px; }
.user-detail .row { display: grid; grid-template-columns: 180px 1fr; gap: 4px 18px; padding: 8px 0; border-bottom: 1px solid var(--ud-bd); align-items: baseline; }
.user-detail .row:last-of-type { border-bottom: none; }
.user-detail .row-l { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ud-fg3); font-weight: 600; padding-top: 5px; }
.user-detail .row-v { font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 30px; }
.user-detail .row-v--mono { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }

.user-detail .self-note { font-size: 12px; color: var(--ud-fg2); margin-top: 12px; }

/* Editable enum/boolean field = canon state badge → Menu atom. Open/close is the
   shared cpv1-state-menu controller (toggles .cpv1-state-menu--open on the menu);
   items are button_to forms so confirms ride on data-turbo-confirm. */
.user-detail .ud-state { position: relative; display: inline-flex; }
.user-detail .ud-trigger { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px dotted var(--ud-bd2); border-radius: 3px; background: var(--ud-paper); color: var(--ud-fg); cursor: pointer; line-height: 1.3; }
.user-detail .ud-trigger:hover { background: #f9fafb; }
.user-detail .ud-trigger .caret { color: var(--ud-fg3); font-size: 9px; }
.user-detail .ud-trigger--active { color: var(--ud-active); border-color: currentcolor; }
.user-detail .ud-trigger--inactive { color: var(--ud-inactive); border-color: currentcolor; }

.user-detail .ud-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 150px; background: var(--ud-paper); border: 1px solid var(--ud-bd); border-radius: 4px; box-shadow: 0 8px 24px rgba(15,23,42,0.12); padding: 4px; display: none; }
.user-detail .ud-state .ud-menu.cpv1-state-menu--open { display: block; }
.user-detail .ud-menu form { margin: 0; }
.user-detail .ud-menu-item { width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 6px 9px; border: 0; background: none; border-radius: 3px; cursor: pointer; color: var(--ud-fg); white-space: nowrap; display: block; }
.user-detail .ud-menu-item:hover { background: #f3f4f6; }
.user-detail .ud-menu-item--current { color: var(--ud-fg3); cursor: default; }
.user-detail .ud-menu-item--current:hover { background: none; }
.user-detail .ud-menu-item--destructive { color: #b91c1c; }