/* Volunteer tools. Deliberately plainer than the public site: this is a
   working screen, so it favours legibility and obvious controls over styling.
   It still uses the site's tokens, so a style change is visible here too. */

body.admin {
  background: var(--admin-bg);
  padding-bottom: 60px;
}

.admin-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--gold-deep);
  color: #fff;
}
.admin-bar h1 { font-size: 17px; font-weight: 700; margin: 0; }
.admin-who { margin-left: auto; font-size: 13px; opacity: 0.85; }

.panel-card,
.admin-panel {
  max-width: 900px;
  margin: 26px auto;
  padding: clamp(18px, 3vw, 28px);
  background: var(--page-bg);
  border: 1px solid var(--rule);
  border-radius: var(--panel-radius);
}
.panel-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }

.muted { color: var(--ink-soft); font-size: 14px; }
.error { color: var(--form-required); font-weight: 500; }
.remember { font-size: 14px; margin-left: 12px; }

/* --- tabs ----------------------------------------------------------------- */

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 900px;
  margin: 22px auto 0;
  padding-inline: clamp(16px, 4vw, 40px);
}
.admin-tabs button {
  font: inherit;
  font-size: 15px;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--cal-radius) var(--cal-radius) 0 0;
  background: var(--admin-bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.admin-tabs button[aria-selected='true'] {
  background: var(--page-bg);
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--page-bg);
}
.count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* --- queues --------------------------------------------------------------- */

.queue { display: flex; flex-direction: column; gap: 16px; }

.queue-item {
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
}
.queue-item h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.queue-item.done { opacity: 0.5; }

.rows { margin: 0 0 14px; display: grid; gap: 6px; }
.rows .row { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; font-size: 14px; }
.rows dt { color: var(--ink-soft); }
.rows dd { margin: 0; overflow-wrap: anywhere; }

.flag {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff4e5;
  border: 1px solid #f0c48a;
  font-size: 14px;
}

.when { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.message-body {
  padding: 12px 14px;
  background: var(--page-bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.queue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.status { font-size: 14px; color: var(--ink-soft); }

.ghost {
  font: inherit;
  font-size: 15px;
  padding: 9px 16px;
  border: 1px solid var(--rule-strong, var(--rule));
  border-radius: var(--field-radius);
  background: var(--page-bg);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.ghost:hover { border-color: var(--ink-soft); }
.ghost.danger { color: var(--form-required); border-color: currentColor; }

button:disabled { opacity: 0.5; cursor: default; }

/* --- style editor --------------------------------------------------------- */

.style-group { margin-bottom: 26px; }
.style-group h3 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.style-row {
  display: grid;
  grid-template-columns: 1fr 46px 8.5rem auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
}
/* Rows without a colour swatch keep the same columns, so labels stay aligned. */
.style-row:not(:has(input[type='color'])) { grid-template-columns: 1fr 8.5rem auto; }

.style-row input[type='color'] {
  width: 46px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.style-row input[type='text'] {
  font: inherit;
  font-size: 14px;
  padding: 6px 9px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
}
.style-row code { font-size: 12px; color: var(--ink-faint, var(--ink-soft)); }

.style-actions { display: flex; align-items: center; gap: 12px; }
.saved { color: #1a7f37; font-weight: 600; font-size: 14px; }

@media (max-width: 640px) {
  .style-row,
  .style-row:not(:has(input[type='color'])) {
    grid-template-columns: 1fr auto;
    grid-auto-flow: dense;
  }
  .style-row code { grid-column: 1 / -1; }
  .rows .row { grid-template-columns: 1fr; gap: 2px; }
}

/* --- editing events ------------------------------------------------------- */

/* Search results are a dense list, so they stay scannable at 400 events. */
.queue-item.compact { padding: 10px 14px; margin-bottom: 8px; }
.queue-item.compact h3 { font-size: 16px; margin-bottom: 2px; }
.queue-item.compact .when { margin-bottom: 6px; }
.queue-item.compact .queue-actions { margin: 0; }
.queue-item.compact .ghost { padding: 4px 12px; font-size: 14px; }

.tag {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--rule);
  color: var(--ink-soft);
}
.tag.warn { background: var(--form-required); color: #fff; }

.editor-card {
  padding: 20px 22px;
  border: 2px solid var(--ink-soft);
  border-radius: var(--card-radius, 10px);
  margin-top: 18px;
}
.editor-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.editor-card .site-form { margin-top: 16px; }

.editor-card .field { margin-bottom: 14px; }
.editor-card .field label { display: block; font-size: 14px; margin-bottom: 4px; }
.editor-card .field input[type='text'],
.editor-card .field input[type='datetime-local'],
.editor-card .field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
}
.editor-card .field textarea { resize: vertical; }

/* A left bar marks the fields that no longer follow the original listing. */
.editor-card .field.changed {
  border-left: 3px solid var(--form-required);
  padding-left: 10px;
  margin-left: -13px;
}

.editor-card .field.checkbox { display: flex; align-items: center; gap: 8px; }
.editor-card .field.checkbox label { margin: 0; }

.colour-row { display: flex; align-items: center; gap: 10px; }
.colour-row input[type='color'] {
  width: 46px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.colour-row input[type='text'] { width: 9rem; }

#event-search { width: 100%; max-width: 34rem; }

/* A way back to the written instructions, from the page they describe. */
.admin-help { margin: -6px 0 18px; font-size: 15px; }
.admin-help a { color: var(--form-accent); }

/* --------------------------------------------------------- all events -- */
/* A plain table. It scrolls sideways on a phone rather than reflowing,
   because a table people are scanning should keep its columns. */

.table-bar {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: space-between;
  margin: 12px 0;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%; border-collapse: collapse;
  font-size: 15px; line-height: 1.45;
}

table.data th, table.data td {
  text-align: left; vertical-align: top;
  padding: 8px 12px; border-bottom: 1px solid var(--rule, #e3ded3);
}

table.data thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--card-bg, #fff);
  border-bottom: 2px solid var(--gold, #b08d3f);
  padding: 0;
}

table.data thead th button {
  width: 100%; text-align: left;
  padding: 10px 12px; border: 0; background: none;
  font: inherit; font-weight: 700; color: inherit;
  cursor: pointer;
}

table.data thead th button:hover { color: var(--gold-deep, #8a6d2b); }
table.data thead th button:focus-visible { outline: 2px solid var(--gold, #b08d3f); outline-offset: -2px; }

table.data tbody tr:hover { background: rgba(0, 0, 0, 0.025); }
table.data td.nowrap { white-space: nowrap; }
table.data .muted { font-size: 13px; }