@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');
/* Event Bucket Missouri state admin dashboard: the city staff dashboard's
   "Almanac" look and layout (assets/css/eb-admin-layout1.css), so a person who
   uses both boards sees one dashboard. Pairs with assets/js/eb-state-admin.js.
   The rules below repeat the city layer's values with its .eb-l1 scope
   swapped for #ebsa (the dashboard) and body.ebsa-on #saEditModal (the edit
   form while the dashboard is open); when a city rule changes, change it here
   too. Nothing here applies to the public board. */

/* ── 1. Tokens, and a remap of the page's legacy dark tokens ── */
#ebsa, body.ebsa-on #saEditModal {
  --eb-ink: #14213D; --eb-muted: #4F5D78; --eb-line: #DDE3EE; --eb-wash: #EEF2F8; --eb-surface: #FFFFFF;
  --eb-event: #2350E0; --eb-event-hover: #1A3DB5; --eb-event-wash: #E6ECFD;
  --eb-civic: #1E7A4C; --eb-civic-hover: #17603C; --eb-civic-wash: #E3F2EA;
  --eb-notice: #9A5B00; --eb-notice-wash: #FFF1D6;
  --eb-alert: #C0352B; --eb-alert-wash: #FBE5E3;
  --eb-btn-line: #C9D1DF; --eb-field-line: #74819A;
  --eb-radius: 12px; --eb-radius-sm: 8px;
  --eb-font: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --eb-card-shadow: 0 1px 2px rgba(20,33,61,0.06);
  --eb-focus: var(--eb-event);
  --bg-base: var(--eb-wash); --navy: var(--eb-wash); --bg-elevated: var(--eb-surface); --bg-card: var(--eb-surface);
  --bg-input: var(--eb-surface); --text-primary: var(--eb-ink); --text-secondary: var(--eb-muted); --text-muted: var(--eb-muted);
  --gold: var(--eb-event); --gold-light: var(--eb-event-hover); --gold-dim: var(--eb-event-wash); --on-gold: #FFFFFF;
  --green: var(--eb-civic); --red: var(--eb-alert); --font-display: var(--eb-font); --font-body: var(--eb-font);
  color-scheme: light; font-family: var(--eb-font); font-variant-numeric: tabular-nums; color: var(--eb-ink); -webkit-font-smoothing: antialiased;
}
#ebsa button, #ebsa input, #ebsa select, #ebsa textarea,
body.ebsa-on #saEditModal button, body.ebsa-on #saEditModal input, body.ebsa-on #saEditModal select, body.ebsa-on #saEditModal textarea { font-family: var(--eb-font); }
#ebsa *, #ebsa *::before, #ebsa *::after { box-sizing: border-box; }

/* While the dashboard is open it is the page, as on the city boards */
body.ebsa-on { background: #EEF2F8; }
body.ebsa-on #ebs-home, body.ebsa-on > footer, body.ebsa-on #floatingCta, body.ebsa-on #cpBanner, body.ebsa-on .eb-skip-link,
body.ebsa-on .site-header, body.ebsa-on .eb-board-shell, body.ebsa-on #submit { display: none !important; }
body.ebsa-ready #stateAdminSection > #stateAdminDash { display: none !important; }

/* ── 2. Shell: slim header and one row of tabs ── */
#ebsa { background: var(--eb-wash); min-height: 100vh; font-size: 1rem; line-height: 1.5; text-align: left; }
#ebsa .l1-skip { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--eb-surface); color: var(--eb-event);
  padding: 12px 16px; border: 2px solid var(--eb-event); border-radius: 8px; font-weight: 700; text-decoration: none; }
#ebsa .l1-skip:focus { top: 12px; }
#ebsa .l1-header { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  min-height: 60px; padding: 8px 28px; background: var(--eb-surface); border-bottom: 1.5px solid var(--eb-line); }
#ebsa .l1-ident { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin: 0; min-width: 0; }
#ebsa .l1-board-name { font-size: 1.1875rem; line-height: 1.5rem; font-weight: 700; color: var(--eb-ink); }
#ebsa .l1-board-sub { font-size: 0.875rem; color: var(--eb-muted); }
#ebsa .l1-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ebsa .l1-header-actions .btn { min-height: 40px; padding: 7px 12px; font-size: 0.875rem; }
#ebsa .l1-tabs { position: sticky; top: 0; z-index: 60; background: var(--eb-surface); border-bottom: 1.5px solid var(--eb-line); }
#ebsa .l1-tab-list { list-style: none; margin: 0; padding: 0 20px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
#ebsa .l1-tab-list > li { flex: none; display: flex; margin: 0; }
#ebsa .l1-nav-link { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; white-space: nowrap;
  font-size: 0.9375rem; font-weight: 700; color: var(--eb-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
#ebsa .l1-nav-link:hover { color: var(--eb-ink); border-bottom-color: var(--eb-line); }
#ebsa .l1-nav-link[aria-current="page"] { color: var(--eb-ink); border-bottom-color: var(--eb-event); }
#ebsa .l1-nav-link:focus-visible { outline-offset: -4px !important; }
#ebsa .l1-nav-count { background: var(--eb-event); color: #FFFFFF; font-size: 0.75rem; line-height: 1.125rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }
#ebsa .l1-nav-count[hidden] { display: none; }
#ebsa .admin-body { min-width: 0; padding: 28px 40px 40px; }
#ebsa .admin-body:focus { outline: none; }
@media (max-width: 1023px) {
  #ebsa .admin-body { padding: 20px 20px 32px; }
  #ebsa .l1-header { padding: 8px 20px; }
  #ebsa .l1-tab-list { padding: 0 8px; }
}
@media (max-width: 600px) {
  #ebsa .admin-body { padding: 16px 16px 28px; }
  #ebsa .l1-header { padding: 10px 16px; }
  #ebsa .l1-board-name { font-size: 1.0625rem; }
  #ebsa .l1-header-actions { margin-left: 0; }
  #ebsa .l1-nav-link { padding: 0 10px; min-height: 48px; }
}

/* ── 3. Page heads ── */
#ebsa .l1-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; margin: 0 0 20px; }
#ebsa .l1-page-title { font-family: var(--eb-font); font-size: 1.75rem; line-height: 2.125rem; font-weight: 700; color: var(--eb-ink); margin: 0; letter-spacing: 0; }
#ebsa .l1-page-title:focus { outline: none; }
#ebsa .l1-page-sub { font-size: 0.9375rem; line-height: 1.4rem; color: var(--eb-muted); margin: 4px 0 0; max-width: 76ch; }
#ebsa .l1-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) { #ebsa .l1-page-title { font-size: 1.5rem; line-height: 1.875rem; } }
#ebsa .l1-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--eb-surface); border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--eb-line); }
#ebsa .l1-seg[hidden] { display: none; }
#ebsa .l1-seg button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 36px; padding: 6px 12px; border-radius: 7px;
  font-family: var(--eb-font); font-size: 0.875rem; font-weight: 700; color: var(--eb-muted); display: inline-flex; align-items: center; }
#ebsa .l1-seg button:hover { color: var(--eb-ink); background: var(--eb-wash); }
#ebsa .l1-seg button[aria-pressed="true"] { background: var(--eb-ink); color: #FFFFFF; }
#ebsa .l1-seg button:focus-visible { outline-offset: 1px !important; }

/* ── 4. Buttons ── */
#ebsa .btn, body.ebsa-on #saEditModal .btn {
  font-family: var(--eb-font); font-size: 0.9375rem; line-height: 1.4; font-weight: 700; border-radius: var(--eb-radius-sm); min-height: 44px; padding: 10px 16px;
  text-transform: none; letter-spacing: 0; box-shadow: none; transform: none; opacity: 1 !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
#ebsa .btn svg { width: 16px; height: 16px; flex: none; }
#ebsa .btn-sm, body.ebsa-on #saEditModal .btn-sm { font-size: 0.875rem; padding: 8px 12px; min-height: 40px; }
#ebsa .btn-primary, body.ebsa-on #saEditModal .btn-primary { background: var(--eb-event) !important; color: #FFFFFF !important; border: 1.5px solid var(--eb-event) !important; }
#ebsa .btn-primary:hover, body.ebsa-on #saEditModal .btn-primary:hover { background: var(--eb-event-hover) !important; border-color: var(--eb-event-hover) !important; transform: none; box-shadow: none; }
#ebsa .btn-ghost, body.ebsa-on #saEditModal .btn-ghost { background: var(--eb-surface) !important; color: var(--eb-ink) !important; border: 1.5px solid var(--eb-btn-line) !important; }
#ebsa .btn-ghost:hover, body.ebsa-on #saEditModal .btn-ghost:hover { background: var(--eb-wash) !important; border-color: var(--eb-field-line) !important; }
#ebsa .l1-btn-go { background: var(--eb-civic) !important; color: #FFFFFF !important; border: 1.5px solid var(--eb-civic) !important; }
#ebsa .l1-btn-go:hover { background: var(--eb-civic-hover) !important; border-color: var(--eb-civic-hover) !important; }
#ebsa .l1-btn-stop { background: var(--eb-surface) !important; color: var(--eb-alert) !important; border: 1.5px solid #E3A39C !important; }
#ebsa .l1-btn-stop:hover { background: var(--eb-alert-wash) !important; border-color: var(--eb-alert) !important; }
#ebsa .btn:disabled, body.ebsa-on #saEditModal .btn:disabled { background: #E4E9F1 !important; color: #4F5D78 !important; border-color: #C9D1DF !important; cursor: not-allowed; }
#ebsa :focus-visible, body.ebsa-on #saEditModal :focus-visible { outline: 3px solid var(--eb-focus) !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #FFFFFF; }

/* ── 5. Pending review rows ── */
#ebsa .l1-rows { display: grid; gap: 16px; }
#ebsa .l1-rows[hidden] { display: none; }
#ebsa .l1-row { background: var(--eb-surface); border-radius: var(--eb-radius); box-shadow: var(--eb-card-shadow), inset 0 0 0 1.5px var(--eb-line);
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 220px; gap: 24px; padding: 16px; align-items: start; }
#ebsa .l1-row-thumb { all: unset; box-sizing: border-box; width: 140px; height: 176px; border-radius: var(--eb-radius-sm); overflow: hidden; background: var(--eb-wash);
  display: flex; align-items: center; justify-content: center; cursor: zoom-in; text-align: center; }
#ebsa .l1-row-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
#ebsa .l1-row-thumb-empty { cursor: pointer; border: 1.5px dashed var(--eb-btn-line); padding: 12px; font-size: 0.875rem; font-weight: 700; color: var(--eb-muted); }
#ebsa .l1-row-thumb:focus-visible { outline-offset: 2px !important; }
#ebsa .l1-row-main { min-width: 0; }
#ebsa .l1-row-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#ebsa .l1-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 700; }
#ebsa .l1-chip-ev { background: var(--eb-event-wash); color: var(--eb-event); }
#ebsa .l1-chip-civ { background: var(--eb-civic-wash); color: var(--eb-civic); }
#ebsa .l1-chip-no { background: var(--eb-notice-wash); color: var(--eb-notice); }
#ebsa .l1-chip-al { background: var(--eb-alert-wash); color: var(--eb-alert); }
#ebsa .l1-row-title { font-family: var(--eb-font); font-size: 1.3125rem; line-height: 1.25; font-weight: 700; margin: 10px 0 0; overflow-wrap: anywhere; color: var(--eb-ink); letter-spacing: 0; }
#ebsa .l1-facts { border-collapse: collapse; margin-top: 10px; font-size: 0.9375rem; line-height: 1.4; }
#ebsa .l1-facts th { color: var(--eb-muted); font-weight: 400; text-align: left; padding: 3px 18px 3px 0; width: 70px; vertical-align: top; white-space: nowrap; }
#ebsa .l1-facts td { padding: 3px 0; vertical-align: top; overflow-wrap: anywhere; color: var(--eb-ink); }
#ebsa .l1-missing { color: var(--eb-notice); font-weight: 700; }
#ebsa .l1-row-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 8px 0 0; }
#ebsa .l1-link { all: unset; box-sizing: border-box; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center;
  font-family: var(--eb-font); font-size: 0.875rem; font-weight: 700; color: var(--eb-event); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#ebsa .l1-link:hover { color: var(--eb-event-hover); text-decoration-thickness: 2px; }
#ebsa .l1-row-acts { display: flex; flex-direction: column; gap: 8px; align-self: center; }
#ebsa .l1-row-acts > .btn { width: 100%; }
#ebsa .l1-row-small { display: flex; gap: 8px; }
#ebsa .l1-row-small .btn { flex: 1 1 0; min-width: 0; font-size: 0.8125rem; padding: 8px; min-height: 40px; white-space: nowrap; }
@media (max-width: 900px) {
  #ebsa .l1-row { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
  #ebsa .l1-row-thumb { width: 112px; height: 140px; }
  #ebsa .l1-row-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  #ebsa .l1-row-small { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  #ebsa .l1-row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
  #ebsa .l1-row-thumb { width: 84px; height: 106px; }
  #ebsa .l1-row-title { font-size: 1.125rem; margin-top: 8px; }
  #ebsa .l1-facts { font-size: 0.875rem; }
  #ebsa .l1-facts th { width: auto; padding-right: 10px; }
  #ebsa .l1-row-links { gap: 0 14px; }
}
#ebsa .l1-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Empty and alerts */
#ebsa .l1-empty { background: var(--eb-surface); border: 1.5px dashed var(--eb-btn-line); border-radius: var(--eb-radius); padding: 32px 24px; text-align: center; }
#ebsa .l1-empty-title { color: var(--eb-ink); font-size: 1.125rem; font-weight: 700; margin: 0 0 4px; }
#ebsa .l1-empty-sub { color: var(--eb-muted); font-size: 1rem; max-width: 52ch; margin: 0 auto; }
#ebsa .l1-alert { border-radius: var(--eb-radius-sm); padding: 10px 14px; font-size: 0.9375rem; border: 0; margin: 10px 0 0; }
#ebsa .l1-alert-warn { color: var(--eb-notice); background: var(--eb-notice-wash); }

/* Event summary (the page's stats strip, moved here as on the city Events tab) */
#ebsa .l1-summary { background: var(--eb-surface); border-radius: var(--eb-radius); box-shadow: inset 0 0 0 1.5px var(--eb-line); margin: 0 0 16px; }
#ebsa .l1-summary[hidden] { display: none; }
#ebsa .l1-summary > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 8px 16px; font-weight: 700; color: var(--eb-ink); }
#ebsa .l1-summary[open] > summary { border-bottom: 1.5px solid var(--eb-line); }
#ebsa .ebsa-stats { margin: 0 !important; padding: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 12px !important; }
#ebsa .ebsa-stats > div { background: var(--eb-wash) !important; border: 0 !important; border-radius: var(--eb-radius-sm) !important; padding: 12px !important;
  display: flex; flex-direction: column-reverse; gap: 2px; text-align: left !important; }
#ebsa .ebsa-stats > div > div:first-child { color: var(--eb-ink) !important; font-size: 1.375rem !important; font-weight: 700 !important; }
#ebsa .ebsa-stats > div > div:last-child { color: var(--eb-muted) !important; font-size: 0.875rem !important; }

/* Audit log panel: the page's own panel and entries, repainted */
#ebsa .ebsa-audit > div { background: var(--eb-surface) !important; border: 0 !important; box-shadow: var(--eb-card-shadow), inset 0 0 0 1.5px var(--eb-line); border-radius: var(--eb-radius) !important; padding: 16px !important; }
#ebsa .ebsa-audit > div > div:first-child { justify-content: flex-end !important; }
#ebsa .ebsa-audit > div > div:first-child > div { display: none; }
#ebsa #saAuditLogBody { max-height: none !important; overflow: visible !important; }
#ebsa #saAuditLogBody > div > div { background: var(--eb-surface) !important; border: 0 !important; border-bottom: 1.5px solid var(--eb-line) !important; border-radius: 0 !important; padding: 12px 4px !important; }
#ebsa #saAuditLogBody > div > div:last-child { border-bottom: 0 !important; }
#ebsa #saAuditLogBody [style*="color:#E0857A" i] { color: var(--eb-alert) !important; }
#ebsa #saAuditLogBody [style*="color:#E7A63C" i] { color: var(--eb-notice) !important; }
#ebsa #saAuditLogBody [style*="color:#4CAF7D" i] { color: var(--eb-civic) !important; }
#ebsa #saAuditLogBody [style*="color:#6E9CCB" i] { color: var(--eb-event) !important; }
#ebsa #saAuditLogBody, #ebsa #saAuditLogBody * { font-family: var(--eb-font) !important; }
#ebsa #saAuditLogBody > div > div > div:first-child > div:first-child { font-size: 0.9375rem !important; }

/* ── 6. The edit form while the dashboard is open ── */
body.ebsa-on #saEditModal { background: rgba(20,33,61,0.48); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.ebsa-on #saEditModal .evm-modal { background: var(--eb-surface) !important; color: var(--eb-ink); border: 1.5px solid var(--eb-line) !important; border-radius: var(--eb-radius) !important; box-shadow: 0 24px 64px rgba(20,33,61,0.24) !important; }
body.ebsa-on #saEditModal .evm-modal > div:first-of-type { border-bottom: 1.5px solid var(--eb-line) !important; }
body.ebsa-on #saEditModal .evm-modal > div:first-of-type > div:first-child { display: none; }
body.ebsa-on #saEditModal h2 { color: var(--eb-ink) !important; font-family: var(--eb-font); font-weight: 700 !important; letter-spacing: 0; }
body.ebsa-on #saEditModal .evm-close { background: var(--eb-surface) !important; color: var(--eb-ink) !important; border: 1.5px solid var(--eb-btn-line) !important; width: 44px; height: 44px; border-radius: var(--eb-radius-sm); transform: none; }
body.ebsa-on #saEditModal .evm-close:hover { background: var(--eb-wash) !important; }
body.ebsa-on #saEditModal .form-input, body.ebsa-on #saEditModal select, body.ebsa-on #saEditModal textarea {
  background: var(--eb-surface) !important; color: var(--eb-ink) !important; border: 1.5px solid var(--eb-field-line) !important; border-radius: var(--eb-radius-sm) !important;
  font-family: var(--eb-font); font-size: 1rem !important; line-height: 1.5; min-height: 44px; padding: 9px 12px; color-scheme: light; box-shadow: none;
}
body.ebsa-on #saEditModal .form-input:focus, body.ebsa-on #saEditModal select:focus, body.ebsa-on #saEditModal textarea:focus { border-color: var(--eb-event) !important; }
body.ebsa-on #saEditModal .form-label { color: var(--eb-ink) !important; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
body.ebsa-on #saEditModal .form-hint, body.ebsa-on #saEditModal p { color: var(--eb-muted) !important; }
body.ebsa-on #saEditModal [style*="background:rgba(47,91,143" i] { background: var(--eb-event-wash) !important; border-color: #C3D0F7 !important; }
body.ebsa-on #saEditModal [style*="background:rgba(225,29,46" i] { background: var(--eb-alert-wash) !important; border-color: #E3A39C !important; }
body.ebsa-on #saEditModal [style*="color:#E0857A" i] { color: var(--eb-alert) !important; }
body.ebsa-on #saEditModal [style*="border-top:1px solid rgba(" i] { border-top-color: var(--eb-line) !important; }
body.ebsa-on #saEditModal input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--eb-event); }
body.ebsa-on #saEditModal .eb-tp-wrap { background: var(--eb-surface); border: 1.5px solid var(--eb-field-line); }
body.ebsa-on #saEditModal .eb-tp-sel { color: var(--eb-ink); }
body.ebsa-on #saEditModal .eb-tp-sel option { background: #FFFFFF; color: var(--eb-ink); }
body.ebsa-on #saEditModal .eb-tp-period button { color: var(--eb-ink); background: var(--eb-surface); }
body.ebsa-on #saEditModal .eb-tp-period button.active { background: var(--eb-ink) !important; color: #FFFFFF !important; }

@media print { #ebsa .l1-tabs, #ebsa .l1-header-actions, #ebsa .l1-row-acts, #ebsa .l1-row-links { display: none !important; } }