/* 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; }

/* ---------- 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); }