/* Design tokens deliberately duplicated here, not cross-loaded from the
   public site's css/tokens.css — rag-backend/ has no access to that
   directory inside the Docker build context, and the site's own
   architecture already relies on deliberate duplication + manual sync
   for shared markup (CLAUDE.md §14's header/footer rule). Values mirror
   css/tokens.css as of this writing: Ink Navy, Slate, Signal Teal,
   Vellum, Graphite. Re-sync by hand if the site palette ever changes. */
:root {
  --ink: #0f1b2d;
  --slate: #1b324b;
  --teal: #1f9e8d;
  --teal-wash: rgba(31, 158, 141, 0.1);
  --teal-wash-strong: rgba(31, 158, 141, 0.16);
  --vellum: #f5f3ee;
  --graphite: #26303d;
  --line: #c7d2dd;
  --line-soft: #dee5eb;
  --muted: #5b6b7d;
  --danger: #b3261e;
  --danger-wash: #fbebe9;
  --radius: 8px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--vellum);
  color: var(--graphite);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .inquiry-row, .type-badge { transition: background-color 120ms ease, border-color 120ms ease; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--teal);
  margin: 0 0 4px;
}

h1 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }

.lede { color: var(--muted); font-size: 14px; }

/* [hidden] must win over any element's own `display` rule, regardless
   of selector order — otherwise a `hidden` element sharing a class like
   .btn (display: inline-block) renders visible anyway, since a class
   selector and the UA stylesheet's [hidden] rule have equal specificity
   and source order alone decides the tie. Found via a real Playwright
   failure: #back-to-list-btn carried the `hidden` attribute but was
   still visible on screen. */
[hidden] {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--graphite);
  cursor: pointer;
  text-decoration: none;
  min-height: 36px;
  min-width: 44px;
  justify-content: center;
}
.btn:hover { border-color: var(--slate); }
.btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--line); }
.btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--primary:hover { background: #1a8a7a; border-color: #1a8a7a; }
.btn--ghost { background: transparent; }
.btn--sm { padding: 6px 10px; font-size: 12.5px; min-height: 32px; }

.link-btn {
  background: none;
  border: none;
  color: var(--teal);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.link-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.note { font-size: 13px; color: var(--muted); }
.note--warning { color: #8a5a00; background: #fff4e0; border: 1px solid #f0d38a; padding: 8px 12px; border-radius: var(--radius-sm); }
.note--info { color: var(--slate); background: var(--teal-wash); border: 1px solid var(--teal); padding: 8px 12px; border-radius: var(--radius-sm); }
.note--error { color: var(--danger); }

.view { padding: 24px 16px; }
.view--centered { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }

.login-card {
  max-width: 380px;
  margin-top: 15vh;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.login-card .btn { margin-top: 16px; }

/* ---- Workspace content: toolbar + notices are fixed-height flow
   items; .master-detail fills whatever's left, and its two panes
   scroll independently within that — see the panes' own rules below.
   Needs a real bounded `height`, not `min-height`: a flex child's
   `flex: 1` only resolves against a *definite* container height — with
   only min-height set, the column simply grows to fit all of its
   content (e.g. a full 50-row list) and the whole page scrolls instead
   of the list pane scrolling internally, stranding anything pinned to
   the bottom of a pane (like #page-panel) far below the fold. Found via
   a real reported bug: the page-number panel was only reachable by
   scrolling the entire page past all 50 rows. `100dvh` first (falls
   back silently to `100vh` in engines that don't support it) accounts
   for mobile browser chrome; nothing here has `overflow: hidden` of its
   own, so content that still doesn't fit (extreme zoom, a very short
   viewport) gracefully pushes the outer page taller rather than
   clipping, same as the graceful-degradation intent this replaces.

   This is Inquiry-Inbox-specific — a modifier on top of the shared,
   generic `.workspace` class (admin-shell.css). CEO Overview's own
   `.workspace` deliberately does NOT get this treatment: that page is
   normal top-to-bottom document flow (the whole page scrolls), not a
   bounded two-pane master/detail view, so it has no need for a fixed
   height. Previously this lived on the page's outermost `.view--app`
   element (replaced by the shared `.sidebar`/`.workspace` shell, see
   docs/ADMIN_SHELL_PLAN.md); the max-width/margin:auto centering it
   also had is gone too — the sidebar column already bounds the
   workspace's width, so a second centering rule isn't needed (and
   would risk the exact "narrow column in empty space" failure mode
   documented for the public site's own .container, CLAUDE.md §10a). ---- */
.workspace--app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: 14px 20px 18px;
  gap: 10px;
}

.private-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.session-note { font-size: 12px; color: var(--muted); }

.toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: stretch;
  flex-shrink: 0;
}
.toolbar__search {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.toolbar__search-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.toolbar__search input[type="text"] {
  width: 100%;
  padding: 6px 10px 6px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  min-height: 32px;
}
.toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  background: #fff;
  min-height: 32px;
}
.toolbar input:focus-visible,
.toolbar select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.master-detail {
  display: grid;
  grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 60vh;
}
@media (max-width: 767px) {
  .master-detail { grid-template-columns: minmax(0, 1fr); }
  .master-detail[data-mobile-view="detail"] .list-pane { display: none; }
  .master-detail[data-mobile-view="list"] .detail-pane { display: none; }
}

.list-pane, .detail-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.list-pane__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.list-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.list-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-pane__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}
.list-status { padding: 10px 8px; }

.page-panel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--graphite);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.page-btn:hover { border-color: var(--slate); }
.page-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.page-btn[aria-current="true"] {
  background: var(--teal-wash);
  border-color: var(--teal);
  color: #157567;
  cursor: default;
}
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  color: var(--muted);
  font-size: 12.5px;
  user-select: none;
}

.inquiry-list { list-style: none; margin: 0; padding: 0; }

/* Each record is a checkbox beside the existing row button — siblings, not
   nested (a checkbox can't live inside a button), so ticking never opens
   the record. */
.inquiry-item { display: flex; align-items: flex-start; gap: 2px; }
.inquiry-item .inquiry-row { flex: 1; width: auto; min-width: 0; }
.inquiry-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 13px 0 0 6px;
  accent-color: var(--teal);
  cursor: pointer;
}
.select-all { display: inline-flex; align-items: center; margin-right: 4px; }
.select-all input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
@media (max-width: 767px) {
  /* A larger tap target on a phone. */
  .inquiry-check { width: 20px; height: 20px; margin: 11px 0 0 6px; }
  .select-all input { width: 20px; height: 20px; }
}

.bulk-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  background: var(--teal-wash);
  border-bottom: 1px solid var(--line-soft);
}
.bulk-bar__count { font-size: 13px; font-weight: 600; margin-right: auto; }

.inquiry-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 10px 9px 9px;
  margin-bottom: 2px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.inquiry-row:hover { background: var(--vellum); }
.inquiry-row:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.inquiry-row[aria-current="true"] {
  background: var(--teal-wash);
  border-left-color: var(--teal);
}
.inquiry-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inquiry-row__name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.inquiry-row__date {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.inquiry-row__preview {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.type-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.type-badge[data-type="consulting"] { background: var(--teal-wash-strong); color: #157567; }
.type-badge[data-type="course"] { background: rgba(27, 50, 75, 0.1); color: var(--slate); }
/* docs/CEO_OVERVIEW_REAL_DATA_PLAN.md §6 — the Inquiry Inbox's "Converted"
   badge, reusing the existing type-badge shape with its own color only. */
.type-badge--converted { background: var(--teal-wash-strong); color: #157567; }

.detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-position { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- Detail pane: sticky header (identity + nav + meta) above a
   scrolling content area — the header stays reachable while the cards
   below scroll, and record navigation lives here, not just in the list
   pane, so it's usable on mobile once the list pane is hidden. ---- */
.detail-header {
  flex-shrink: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}
.back-btn { margin-bottom: 10px; }
.detail-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.detail-header__identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.detail-header__identity h2 { overflow-wrap: anywhere; }

/* Email/trash buttons beside the type badge — muted at rest, an
   action-specific color on hover/focus (--accent for email, --danger for
   delete). Same 32px height as the other compact (.btn--sm) controls. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn--danger:hover:not(:disabled) {
  color: var(--danger);
  background: var(--danger-wash);
  border-color: var(--danger-wash);
}
.icon-btn--accent:hover:not(:disabled) {
  color: var(--teal);
  background: var(--teal-wash);
  border-color: var(--teal-wash);
}
.icon-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Shown beside the reference only for an Archived or Deleted record, so
   it's always obvious which view you're reading. */
.state-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.state-tag[data-state="deleted"] {
  color: var(--danger);
  background: var(--danger-wash);
  border-color: var(--danger-wash);
}

.action-status { padding: 6px 12px; margin: 0; }
.action-status--error { color: var(--danger); }
.detail-header__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.detail-timestamp { font-size: 12px; color: var(--muted); }

.detail-pane__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 20px;
}
.detail-empty { padding: 12px 4px; }

.status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.status-pill[data-status="pending"] { color: var(--muted); }
.status-pill[data-status="provider_accepted"] { color: var(--teal); border-color: var(--teal); background: var(--teal-wash); }
.status-pill[data-status="provider_failed"] { color: var(--danger); border-color: var(--danger); background: var(--danger-wash); }

.ref-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---- Detail content: Contact + Organization side by side on wide
   screens, course/consulting fields in a compact 2-column grid, goals
   always full width. Card headers carry no fill at all — a muted label
   plus the bottom hairline is enough separation on its own (not the dark
   navy bars used elsewhere in the app's own marketing pages) — this is
   a dense data view, not a hero section, and stacking many filled bars
   read as heavier than the content warranted. ---- */
.detail-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .detail-row--split { grid-template-columns: 1fr 1fr; }
}

.detail-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.detail-card__header {
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.detail-card__body { padding: 12px 14px; }
.detail-card__body p { margin: 0; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 20px;
}
@media (min-width: 640px) {
  .field-grid--2col { grid-template-columns: 1fr 1fr; }
}
.field { padding: 5px 0; min-width: 0; }
.field__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 1px;
}
.field__value {
  font-size: 13.5px;
  color: var(--graphite);
  overflow-wrap: anywhere;
}
.field__value--muted { color: var(--muted); font-style: italic; }
.field__value a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.field__value a:hover { color: #157567; }
.field__value a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chip {
  display: inline-block;
  font-size: 12px;
  color: var(--graphite);
  background: var(--vellum);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  overflow-wrap: anywhere;
}

/* ---- Activity dialog (audit trail) ---------------------------------- */
.activity {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--graphite);
}
.activity[open] { display: flex; flex-direction: column; gap: 10px; }
.activity::backdrop { background: rgba(15, 27, 45, 0.45); }
.activity__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity__scope { margin: 0; }
.activity__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  border-top: 1px solid var(--line-soft);
}
.activity__item {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.activity__when { color: var(--muted); }
.activity__what { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.activity__detail { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.activity__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}
.activity__ref .link-btn { font: inherit; }
.activity__foot { margin: 0; font-size: 12px; }

@media (max-width: 639px) {
  .activity__item { grid-template-columns: minmax(0, 1fr) auto; }
  .activity__when { grid-column: 1 / -1; }
}

.detail-header__meta .link-btn { font-size: 12px; }

.state-tag--warn { color: #8a5a00; background: #fff4e0; border-color: #f0d38a; }
.activity__more { align-self: flex-start; }

/* While the Activity dialog is open the page behind must not scroll. */
html:has(dialog.activity[open]), html:has(dialog.compose[open]) { overflow: hidden; }
.activity__list { overscroll-behavior: contain; }

/* ---- Email composer -------------------------------------------------- */
.compose {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--graphite);
}
.compose::backdrop { background: rgba(15, 27, 45, 0.45); }
.compose[open] { display: flex; flex-direction: column; }
.compose__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  overflow-y: auto;
  min-height: 0;
}
.compose__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compose__status { margin: 0; color: var(--danger); background: var(--danger-wash); padding: 8px 12px; border-radius: var(--radius-sm); }
.compose__field { display: flex; flex-direction: column; gap: 4px; }
.compose__field--grow { flex: 1 1 auto; min-height: 0; }
.compose__field label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.compose__req { font-weight: 400; color: var(--muted); }
.compose__field input,
.compose__field textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--graphite);
  width: 100%;
  box-sizing: border-box;
}
.compose__field textarea { min-height: 260px; resize: vertical; line-height: 1.45; }
.compose__field input:focus-visible,
.compose__field textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.compose__field [aria-invalid="true"] { border-color: var(--danger); }
.compose__hint { margin: 0; font-size: 12px; color: var(--muted); }
.compose__error { margin: 0; font-size: 12.5px; color: var(--danger); }
.compose__note { margin: 0; font-size: 12.5px; }
.compose__actions { display: flex; justify-content: flex-end; }
.compose__preview {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.compose__actions { gap: 8px; }