/* Admin component styles — colors all reference brand_tokens.css custom
   properties so future per-program theming is a scoped override. */

/* ---------- Avatar ---------- */
.admin-avatar--sm { width: 24px; height: 24px; font-size: 10px; letter-spacing: 0; }
.admin-avatar--md { width: 32px; height: 32px; font-size: 12px; letter-spacing: 0.02em; }
.admin-avatar--lg { width: 40px; height: 40px; font-size: 14px; letter-spacing: 0.02em; }

/* ---------- Status pill ---------- */
.admin-status-pill--active        { background: var(--zw-green-50);  color: var(--zw-green-900); }
.admin-status-pill--active  .admin-status-pill__dot  { background: var(--zw-green-700); }

.admin-status-pill--inactive      { background: var(--bg-3);         color: var(--fg-3); }
.admin-status-pill--inactive .admin-status-pill__dot { background: var(--fg-3); }

/* Pending and error use the brand yellow/red scales. The dot carries the brand
   value at 500; the label uses the 900 step, because Jonquil and Red (Crayola) are
   both far too light to sit under white or mid-tone text. */
.admin-status-pill--pending       { background: var(--zw-yellow-50); color: var(--zw-yellow-900); }
.admin-status-pill--pending .admin-status-pill__dot  { background: var(--zw-yellow-500); }

.admin-status-pill--error         { background: var(--zw-red-50);    color: var(--zw-red-900); }
.admin-status-pill--error   .admin-status-pill__dot  { background: var(--zw-red-500); }

/* ---------- Tag pill ---------- */
.admin-tag-pill--blue    { background: var(--zw-blue-50);  color: var(--zw-blue-800); }
.admin-tag-pill--green   { background: var(--zw-green-50); color: var(--zw-green-900); }
.admin-tag-pill--sun     { background: #fff3dc;            color: #8a5a00; }
.admin-tag-pill--clay    { background: #fbe7df;            color: #8a3a1f; }
.admin-tag-pill--sky     { background: #e4f4fa;            color: #1f4a5e; }
.admin-tag-pill--moss    { background: #ebf0e3;            color: #2f4424; }
.admin-tag-pill--neutral { background: var(--bg-3);        color: var(--fg-2); }

/* Progress bar moved to zw_components.css as the shared ProgressBarComponent. */

/* ---------- Table ---------- */
.admin-table__th {
  font-family: var(--zw-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
}
.admin-table__th--right    { text-align: right; }
.admin-table__th--center   { text-align: center; }

.admin-table__th--number,
.admin-table__td--number {
  font-family: var(--zw-font-mono);
  font-size: 11px;
  color: var(--fg-3);
}

.admin-table__sort-button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  text-transform: inherit;
  letter-spacing: inherit;
}
.admin-table__sort-button:hover { color: var(--fg-1); }
.admin-table__sort-icon        { color: var(--fg-3); opacity: 0.7; }
.admin-table__sort-button:hover .admin-table__sort-icon { color: var(--fg-2); opacity: 1; }

.admin-table__td        { font-size: 14px; color: var(--fg-1); vertical-align: middle; }
.admin-table__td--right { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table__td--center{ text-align: center; }

.admin-table__data-row             { transition: background-color 120ms var(--zw-ease-out); }
.admin-table__data-row:hover       { background: var(--bg-2); }
.admin-table__data-row--clickable  { cursor: pointer; }

.admin-table__checkbox {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-1);
  border-radius: 4px;
  background: var(--zw-surface);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 120ms var(--zw-ease-out), border-color 120ms var(--zw-ease-out);
}
.admin-table__checkbox:hover   { border-color: var(--zw-blue-700); }
.admin-table__checkbox:checked { background: var(--zw-blue-700); border-color: var(--zw-blue-700); }
.admin-table__checkbox:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 1.75px solid #fff;
  border-bottom: 1.75px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ---------- TipTap editor surface ---------- */
/* Links match the color the sent email uses (TiptapRenderer::EMAIL_LINK_STYLE),
   so what the writer sees is what the recipient gets. Applies to every
   rich-text editor mount (campaign, automation node, email template, blog,
   petition). */
[data-tiptap-mount] .ProseMirror a { color: var(--zw-blue-700, #336699); text-decoration: underline; }

/* The whole visible field has to be clickable.
   The mount carries the height (a `min-h-[120px]` / `min-h-[300px]` utility from the
   caller) and TipTap appends `.ProseMirror` inside it, sized to its content — 24px when
   the document is empty. That left the top 24px of a 120px box editable and the rest
   inert: clicking the middle of a large empty field landed on the mount and focused
   nothing, with no error and no visible reason why.
   Flex rather than `height: 100%`, because the height is a MIN-height — a percentage
   child has no definite parent height to resolve against and would collapse back to its
   content. `flex: 1` grows the editable area to whatever height the caller asked for, so
   a future surface passing a taller min-h inherits the fix instead of the bug. */
[data-tiptap-mount] { display: flex; flex-direction: column; }
[data-tiptap-mount] .ProseMirror { flex: 1; }

/* Lists need their markers back. Tailwind's preflight sets
   `ol,ul,menu{list-style:none}` globally, and nothing restores it inside the
   editor — so typing "- " ran the markdown input rule, converted the paragraph
   to a bullet list, and rendered no bullet. The dash appeared to simply vanish.
   The document was correct the whole time, which is why it looked like an
   editor bug rather than a styling one.

   Applies to every rich-text mount, so the campaign composer, automations,
   email templates, blog posts and petitions all get their bullets back too. */
[data-tiptap-mount] .ProseMirror ul { list-style: disc outside; padding-left: 1.4em; margin: 0.5em 0; }
[data-tiptap-mount] .ProseMirror ol { list-style: decimal outside; padding-left: 1.6em; margin: 0.5em 0; }
[data-tiptap-mount] .ProseMirror li { margin: 0.15em 0; }
[data-tiptap-mount] .ProseMirror li > p { margin: 0; }

/* Headings need their sizes back, for the same reason lists needed their
   markers: Tailwind's preflight sets h1..h6{font-size:inherit;font-weight:inherit}
   and nothing restores it inside the editor. A heading looked exactly like a
   paragraph, so there was no way to see what would end up in a wiki entry's
   table of contents — which is built from these — without saving and looking.

   The sizes mirror what the published page renders, so the editor is a preview
   rather than an approximation. Applies to every rich-text mount.  */
[data-tiptap-mount] .ProseMirror h1 { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; margin: 0.8em 0 0.3em; }
[data-tiptap-mount] .ProseMirror h2 { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin: 0.8em 0 0.3em; }
[data-tiptap-mount] .ProseMirror h3 { font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0.7em 0 0.25em; }
[data-tiptap-mount] .ProseMirror h4,
[data-tiptap-mount] .ProseMirror h5,
[data-tiptap-mount] .ProseMirror h6 { font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0.7em 0 0.25em; }
[data-tiptap-mount] .ProseMirror > :first-child { margin-top: 0; }

/* The rest of what preflight flattened. Same story as the lists and headings:
   the editor can produce all of these from markdown input rules, and without
   these rules a blockquote, a rule and a code block are indistinguishable from
   ordinary paragraphs on screen. */
[data-tiptap-mount] .ProseMirror blockquote {
  margin: 0.7em 0; padding-left: 14px;
  border-left: 3px solid var(--zw-border-warm-2, #e2ded6);
  color: var(--zw-muted, #6b6b70);
}

[data-tiptap-mount] .ProseMirror pre {
  margin: 0.7em 0; padding: 12px 14px;
  background: var(--zw-paper-3, #faf8f4);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.5;
  overflow-x: auto;
}

[data-tiptap-mount] .ProseMirror code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--zw-paper-3, #faf8f4);
  padding: 1px 4px; border-radius: 4px;
}

[data-tiptap-mount] .ProseMirror pre code { background: none; padding: 0; font-size: inherit; }

[data-tiptap-mount] .ProseMirror hr {
  margin: 1.2em 0; border: 0;
  border-top: 1px solid var(--zw-border-warm-2, #e2ded6);
}

/* ---------- Wiki topic colour picker ---------- */

/* Swatches rather than a <select>: the stored values are named for the kit
   topic each colour came from ("bigger", "basics"), which says nothing about
   what you are choosing. The input stays in the DOM and focusable — hidden
   with clip rather than display:none, so it is still reachable by keyboard and
   still announced. */
.tone-picker { display: flex; flex-wrap: wrap; gap: 8px; }

.tone-picker__input {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.tone-picker__swatch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 8px;
  border: 1px solid var(--zw-border-warm-2, #e2ded6);
  border-radius: 999px;
  font-size: 13px; color: var(--zw-muted, #6b6b70);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.tone-picker__swatch:hover { border-color: var(--zw-faint, #8b8880); }

.tone-picker__dot {
  width: 16px; height: 16px; flex: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* The checked state reads on the pill, not only on the dot — a ring of colour
   around a coloured dot is invisible to anyone who cannot separate the two. */
.tone-picker__input:checked + .tone-picker__swatch {
  border-color: var(--zw-ink, #1c1c1e);
  color: var(--zw-ink, #1c1c1e);
  font-weight: 600;
}

.tone-picker__input:focus-visible + .tone-picker__swatch {
  outline: 2px solid var(--zw-blue-700, #336699);
  outline-offset: 2px;
}

/* ---------- Activity timeline filter chips ---------- */
.timeline-chip--active {
  background: var(--zw-blue-700);
  border-color: var(--zw-blue-700);
  color: #fff;
}

/* Tailwind's preflight resets `margin: 0` on `*` (incl. ::backdrop), which
 * clobbers the native <dialog> UA `margin: auto` that centers a modal opened
 * with showModal() — leaving it pinned top-left. Restore it (the :modal
 * pseudo-class out-specifies the universal reset). */
dialog:modal {
  margin: auto;
}

/* ==========================================================================
   Event form — the row primitives
   ..........................................................................
   Borrowed from the Luma create-event screen, which the owner pointed at as
   the target. The idea worth taking is that a row carries its own VALUE:
   "Capacity · Unlimited" reads as configuration you can scan, where a stack
   of empty inputs reads as work you have not done yet.

   Disclosure is <details>/<summary>. No controller, works without JS,
   keyboard accessible for free, and `open` is an attribute a request spec can
   assert — which is how the collapse-when-empty rule is tested.
   ========================================================================== */

.ev-title {
  width: 100%;
  padding: 4px 2px;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-1);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
}

.ev-title::placeholder { color: var(--fg-3); opacity: 0.55; }
.ev-title:focus { outline: none; border-bottom-color: var(--zw-blue-700); }

@media (max-width: 640px) {
  .ev-title { font-size: 28px; }
}

.ev-heading {
  margin: 22px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
}

.ev-card {
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 14px;
}

.ev-card--rows { padding: 4px 12px; }

/* --- a row ---------------------------------------------------------------- */

.ev-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

/* Inside a card the row supplies its own separator instead of its own ground. */
.ev-row--flush { background: transparent; padding-inline: 0; }
.ev-card--rows > .ev-disclosure + .ev-disclosure > .ev-row { border-top: 1px solid var(--border-1); }

.ev-row::-webkit-details-marker { display: none; }
.ev-row:hover { background: var(--bg-3); }
.ev-row--flush:hover { background: transparent; color: var(--fg-1); }

.ev-row__icon {
  flex: none;
  width: 20px;
  text-align: center;
  color: var(--fg-3);
  font-size: 14px;
}

.ev-row__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
}

/* The value is the point of the row: it sits right, quiet, and says what is set. */
.ev-row__value {
  margin-left: auto;
  font-size: 14px;
  color: var(--fg-3);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-row__action {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-blue-700);
}

.ev-row__action:hover { color: var(--zw-blue-800); }
.ev-row__control { width: 100%; border: none; background: transparent; font-size: 14px; color: var(--fg-1); padding: 0; }
.ev-row__control:focus { outline: none; }

/* --- disclosure ------------------------------------------------------------ */

.ev-disclosure__body {
  display: grid;
  gap: 14px;
  padding: 4px 14px 16px;
}

.ev-card--rows .ev-disclosure__body { padding-inline: 0; }

/* --- fields ---------------------------------------------------------------- */

.ev-field {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--fg-1);
  background: #ffffff;
  border: 1px solid var(--border-1);
  border-radius: 10px;
}

.ev-field:focus { outline: none; border-color: var(--zw-blue-700); box-shadow: 0 0 0 3px var(--zw-blue-50); }
.ev-field__label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.ev-field__hint { margin-top: 5px; font-size: 12px; color: var(--fg-3); }

/* --- start / end ------------------------------------------------------------
   The markers and the line between them are the reference's one piece of
   ornament, and they carry meaning: a filled dot begins, a hollow one ends. */

.ev-when { display: grid; gap: 2px; }

.ev-when__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.ev-when__marker {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 2px solid var(--fg-3);
  background: transparent;
}

.ev-when__marker--start { background: var(--fg-3); }
.ev-when__row:first-child::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 28px;
  bottom: -6px;
  border-left: 2px dotted var(--border-1);
}

.ev-when__label { width: 46px; flex: none; font-size: 14px; font-weight: 500; color: var(--fg-1); }
.ev-when__field { flex: 1; min-width: 0; border: none; background: transparent; font-size: 14px; color: var(--fg-1); text-align: right; }
.ev-when__field:focus { outline: none; }

.ev-tz {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 170px;
  padding: 10px 14px;
  background: var(--bg-3);
  border-radius: 12px;
}

/* --- pills + toggles --------------------------------------------------------- */

.ev-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 999px;
}

.ev-pill__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--zw-blue-700); flex: none; }
.ev-pill__control { border: none; background: transparent; font-size: 14px; color: var(--fg-1); padding: 0; }
.ev-pill__control:focus { outline: none; }

.ev-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  cursor: pointer;
}

.ev-toggle:hover { background: var(--bg-3); }
.ev-toggle__input { width: 15px; height: 15px; border-radius: 4px; }

/* --- the save bar ------------------------------------------------------------- */

.ev-actions {
  position: sticky;
  bottom: 0;
  margin-top: 28px;
  padding: 12px 0;
  background: linear-gradient(to top, var(--bg-2) 72%, transparent);
}

.ev-actions__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.ev-save {
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--zw-blue-700);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.ev-save:hover { background: var(--zw-blue-800); }