/*
 * Admin. A working tool rather than a designed page: dense, scannable, and
 * honest about numbers. Shares the palette so it doesn't feel like a different
 * product, but drops the ceremonial type for something that reads at a glance.
 */

.page--admin {
  display: block;
  background: #f4f2ec;
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  padding: 0;
}

.admin { max-width: 76rem; margin: 0 auto; padding: clamp(14px, 3vw, 28px); }

.admin__header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--green);
  margin-bottom: 22px;
}

.admin__header h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.admin__header nav { display: flex; gap: 16px; font-size: 0.92rem; }
.admin__header nav a { color: var(--ink-soft); text-decoration: none; }
.admin__header nav a:hover, .admin__header nav a.is-current { color: var(--green); text-decoration: underline; text-underline-offset: 0.3em; }

.panel { background: #fff; border: 1px solid #e2ded2; padding: clamp(14px, 3vw, 24px); margin-bottom: 20px; }

.panel h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.7em;
}

.panel__note { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1em; text-wrap: pretty; }

/* --------------------------------------------------------------- headcount */

.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

.count { border: 1px solid #e2ded2; padding: 14px; }
.count h3 { font-family: var(--display); font-weight: 400; font-size: 1rem; margin-bottom: 0.2em; }

.count__range {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.3em;
}

.count__detail { font-size: 0.86rem; }
.count__detail > div { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.count__detail dt { color: var(--ink-soft); }
.count__detail dd { font-variant-numeric: tabular-nums; }

.count__bands { margin-top: 0.7em; padding-top: 0.6em; border-top: 1px dashed #e2ded2; font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 10px; }
.count__bands span { color: var(--ink-soft); }

/* ---------------------------------------------------------------- statuses */

.statuses { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.statuses li { display: flex; align-items: center; gap: 8px; }
.statuses strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.status { font-size: 0.78rem; padding: 0.18em 0.6em; border: 1px solid #d8d2c4; color: var(--ink-soft); white-space: nowrap; }
.status--answered { border-color: #2f6b4f; color: #2f6b4f; background: #eef6f1; }
.status--partially-answered { border-color: #9a6b1f; color: #9a6b1f; background: #fdf5e7; }
.status--nothing-to-answer { border-color: #8a2b2b; color: #8a2b2b; background: #fdf2f2; }
.status--awaiting-reply { border-color: #8a6d3b; color: #8a6d3b; }
.status--not-yet-invited { border-color: #b0a99a; color: #8d8578; }

.wave { font-size: 0.72rem; padding: 0.15em 0.5em; border: 1px solid #c9c2b2; color: var(--ink-soft); }
.wave--a { border-color: var(--green); color: var(--green); }

/* ------------------------------------------------------------------ tables */

.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th {
  text-align: left;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid #e2ded2;
  padding: 6px 10px 6px 0;
}
.table td { padding: 7px 10px 7px 0; border-bottom: 1px solid #f0ece2; vertical-align: top; }
.table tr:hover td { background: #faf8f3; }
.table a { color: var(--green); }

.muted { color: var(--ink-soft); font-size: 0.86rem; }
.yes { color: #2f6b4f; }
.no { color: #8a2b2b; }

.link-chip { font-size: 0.8rem; border: 1px solid #d8d2c4; padding: 0.1em 0.5em; text-decoration: none; }
.link-chip:hover { border-color: var(--green); }
/* A chip that is a button ("new link"), looking like its neighbours. */
.link-chip--button { font: inherit; font-size: 0.8rem; background: none; color: var(--green); cursor: pointer; }
.link-chip--button[disabled] { opacity: 0.35; cursor: not-allowed; }
/* A form with nothing to show, submitted by a button elsewhere on the line. */
.hh__hidden-form { display: none; }

.filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; font-size: 0.9rem; }
.filters a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.filters a.is-current { color: var(--green); border-bottom-color: var(--green); }

/* -------------------------------------------------------------- household */

.guest-row { border: 1px solid #e2ded2; padding: 12px 14px; margin-bottom: 10px; }
.guest-row h3 { font-family: var(--display); font-weight: 400; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }

.tag { font-size: 0.7rem; padding: 0.12em 0.5em; border: 1px solid #d8d2c4; color: var(--ink-soft); }
.tag--cat { border-color: var(--green); color: var(--green); }

.mini { list-style: none; margin-top: 0.6em; font-size: 0.88rem; }
.mini li { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; border-bottom: 1px dotted #ece7db; }
.mini--answers { margin-top: 0.5em; padding-top: 0.4em; border-top: 1px dashed #e2ded2; }

.resp { font-size: 0.8rem; }
.resp--accepted { color: #2f6b4f; }
.resp--declined { color: #8a2b2b; }
.resp--pending  { color: var(--ink-soft); }

.subhead { font-family: var(--display); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 1.4em 0 0.5em; }

@media (max-width: 640px) {
  .table { font-size: 0.85rem; }
  .table th:nth-child(5), .table td:nth-child(5),
  .table th:nth-child(6), .table td:nth-child(6) { display: none; }
}

/* ------------------------------------------------------------------- forms */

.form { max-width: 62rem; }

.form__group { border: 1px solid #e2ded2; padding: clamp(12px, 2.5vw, 20px); margin-bottom: 18px; }

.form__group legend {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  padding: 0 0.5em;
}

.form__hint { color: var(--ink-soft); font-size: 0.86rem; margin-bottom: 0.9em; text-wrap: pretty; }

.form__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.form__row--checks { align-items: flex-start; gap: 22px; }

.form__field { flex: 1 1 150px; display: flex; flex-direction: column; }
.form__field--wide { flex: 2 1 240px; }
.form__field > span { font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 0.3em; }
.form__field > span em { font-style: normal; opacity: 0.75; font-size: 0.92em; }

.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="number"], .form select, .form textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45em 0.6em;
  border: 1px solid #d8d2c4;
  background: #fff;
  color: var(--ink);
  width: 100%;
}

.form input:focus, .form select:focus { outline: 2px solid var(--green); outline-offset: -1px; }

.form__checks { display: flex; flex-direction: column; gap: 4px; }
.form__checks-label { font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 0.2em; }

.check { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; white-space: nowrap; }
.check input { accent-color: var(--green); }
.check--danger { align-self: flex-end; color: #8a2b2b; }

.guest-fields { border: 1px solid #ece7db; background: #fcfbf7; padding: 12px; margin-bottom: 10px; }

.form__actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.button--small { font-size: 0.74rem; padding: 0.6em 1.3em; }

.notice { padding: 0.8em 1em; margin-bottom: 1.2em; font-size: 0.92rem; }
.notice--alert { background: #fdf2f2; border: 1px solid #e4bcbc; color: #8a2b2b; }
.notice--alert ul { margin: 0.4em 0 0 1.2em; }
.notice--notice { background: #eef6f1; border: 1px solid #b8d7c4; color: #2f6b4f; }

.contact-line { font-size: 0.86rem; color: var(--ink-soft); }
.contact-line strong { color: var(--ink); font-weight: normal; }
.warn { color: #8a2b2b; }

.panel__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 0.6em; }
.panel__actions > div { display: flex; gap: 8px; align-items: center; }
.panel__actions form { display: inline; }
.panel__actions .subhead { margin: 1.4em 0 0; }

.actions-cell { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.actions-cell form { display: inline; }

.nav-signout button, button.nav-signout {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.92rem; color: var(--ink-soft);
}
.nav-signout button:hover, button.nav-signout:hover { color: var(--green); text-decoration: underline; text-underline-offset: 0.3em; }
.admin__header nav form { display: inline; }

/* ---------------------------------------------------------------------------
 * The dashboard's household lines.
 *
 * One household is one row that can be worked in place: the fields you change
 * most often on the line itself, the rest behind two disclosures. The send
 * buttons are each their own form — button_to — and a form cannot nest inside
 * another, so the row is a grid with the editable form in one column and the
 * send column beside it rather than inside it.
 * ------------------------------------------------------------------------- */

.admin--wide { max-width: 90rem; }

.households { list-style: none; }

.hh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 18px;
  padding: 12px 0;
  border-bottom: 1px solid #ece7db;
}
.hh:hover { background: #fcfbf7; }

.hh__line { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.hh__field { display: flex; flex-direction: column; min-width: 0; }
.hh__field--name    { flex: 3 1 14rem; }
.hh__field--email   { flex: 3 1 13rem; }
.hh__field--phone   { flex: 2 1 10rem; }
.hh__field--channel { flex: 0 1 8rem; }
.hh__field--tiny    { flex: 0 0 4.5rem; }
.hh__field--save    { flex: 0 0 auto; }

.hh__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 0.25em; }
.hh__label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.7; }

.hh__line input, .hh__line select {
  font: inherit;
  font-size: 0.92rem;
  padding: 5px 7px;
  border: 1px solid #ddd8c9;
  background: #fff;
  color: var(--ink);
  min-width: 0;
  width: 100%;
}
.hh__line input:focus, .hh__line select:focus { outline: 2px solid var(--green); outline-offset: -1px; }

/* Quiet until there is something to save — see dirty_form_controller.js. */
.hh__field--save .button[disabled] { opacity: 0.35; cursor: default; }
.hh__field--save .button.is-dirty { background: var(--green); color: #fff; }

.hh__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 7px; font-size: 0.82rem; }
.hh__errors { margin-bottom: 8px; }

.hh__fold { margin-top: 6px; font-size: 0.9rem; }
.hh__fold > summary {
  cursor: pointer;
  color: var(--ink-soft);
  padding: 3px 0;
  font-size: 0.84rem;
}
.hh__fold > summary:hover { color: var(--green); }
.hh__fold[open] > summary { color: var(--green); font-weight: 600; }
.hh__fold-body { padding: 10px 0 4px 16px; border-left: 2px solid #ece7db; margin-top: 4px; }
.hh__fold-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 10px; }

/* The send column: one block per kind of delivery. */
.hh__send { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 1.1rem; }

.send { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 8.5rem; }
.send__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.send__done { font-size: 0.8rem; color: #2f6b4f; line-height: 1.3; }
.send__blocked { font-size: 0.8rem; }
.send form { display: inline; }

.filters__spacer { flex: 1 1 auto; }
.filters__form { display: inline; }

.quick-add { margin-bottom: 14px; }
.quick-add > summary { cursor: pointer; color: var(--green); font-size: 0.9rem; padding: 4px 0; }
.quick-add__body { border: 1px solid #e2ded2; background: #fcfbf7; padding: 14px; margin-top: 8px; }

.counts--strip { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.counts--strip .count__range { font-size: 1.5rem; }
.count__line { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.panel__note--inline { margin: 0; max-width: 42rem; }

@media (max-width: 900px) {
  /* The send buttons drop under the line rather than squeezing it. */
  .hh { grid-template-columns: minmax(0, 1fr); }
  .hh__send { padding-top: 10px; }
}

.filters__divider { color: #cfc9b9; }
.statuses__label { color: var(--ink-soft); font-size: 0.86rem; }

/* ---------------------------------------------------------------------------
 * Working on the dashboard without losing anything.
 *
 * A line with unsaved changes is marked in amber, with "Not saved yet" over
 * its Save button, and its send buttons wait until it is saved — see
 * dirty_form_controller.js. A save or a send answers with a short message on
 * the line itself, which fades once read.
 * ------------------------------------------------------------------------- */

.hh.is-dirty { background: #fffaf0; box-shadow: inset 3px 0 0 #c98a1b; }
.hh.has-errors { background: #fdf6f6; box-shadow: inset 3px 0 0 #8a2b2b; }
.hh__unsaved { color: #9a6b1f; font-weight: 600; }

.hh__message {
  color: #2f6b4f;
  font-size: 0.84rem;
  margin-bottom: 6px;
  animation: hh-message-fade 6s ease-in forwards;
}
@keyframes hh-message-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0.35; }
}

.send .button[disabled],
.send .link-button[disabled] { opacity: 0.35; cursor: not-allowed; }
.send__to { font-size: 0.76rem; max-width: 15rem; overflow-wrap: anywhere; line-height: 1.3; }
.send .send__other { font-size: 0.76rem; }

.filters__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.filters__count {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  border: 1px solid #e2ded2;
  padding: 0 0.4em;
  margin-left: 0.2em;
}
.filters a.is-current .filters__count { border-color: var(--green); color: var(--green); }
.filters__stage--unreachable .filters__count { color: #8a2b2b; }

.list-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 12px 0; }
.list-search { display: flex; flex-direction: column; flex: 0 1 26rem; }
.list-search input {
  font: inherit;
  font-size: 0.92rem;
  padding: 6px 8px;
  border: 1px solid #ddd8c9;
  background: #fff;
}
.list-search input:focus { outline: 2px solid var(--green); outline-offset: -1px; }

/* The quiet link-style button (forms.css) is white, for the guest pages' dark
   background. On the dashboard's white it needs ink instead. Scoped to .send
   so it outranks forms.css, which loads after this file. */
.send .link-button--dark { color: var(--green); }
.send .link-button--dark:hover { color: var(--ink); }