/* Fundraisersuite — admin UI.
 *
 * Committed to a light theme rather than following the viewer's OS. An earlier
 * version honoured prefers-color-scheme and rendered dark for anyone whose
 * machine was set that way; this is a daytime working tool used on projectors,
 * shared laptops and at check-in desks, so it stays bright regardless.
 *
 * Ground is white with a barely-there green cast in the neutrals, so the page
 * reads as considered rather than as default #fff/#888. One accent — a
 * desaturated institutional green for giving and growth. Semantic colours
 * (danger, warning) are deliberately separate from it.
 */
:root {
  --paper:      #F7F9F8;
  --card:       #FFFFFF;
  --ink:        #14201B;
  --ink-soft:   #4E5C55;
  --ink-faint:  #83918B;
  --rule:       #E2E8E5;
  --rule-soft:  #EFF3F1;

  --accent:      #1B6B47;
  --accent-hover:#155739;
  --accent-soft: #E8F2EC;
  --accent-ink:  #FFFFFF;

  --danger:      #A32C2C;
  --danger-soft: #FAEAEA;
  --warn:        #85590F;
  --warn-soft:   #FCF3E2;

  /* A small data palette, so colour on this product MEANS something instead of
     decorating. Three hues, one per kind of thing the software counts: money,
     people, time. They are deliberately the same depth and saturation as the
     green — three deep institutional tones read as a considered set, where
     three bright ones would read as a chart from 2011. */
  --data-money:       #1B6B47;   /* the accent: raised, given, growth */
  --data-money-soft:  #E8F2EC;
  --data-people:      #1F5673;   /* supporters, team, anybody countable */
  --data-people-soft: #E7EFF4;
  --data-time:        #56407A;   /* events, schedules, anything dated */
  --data-time-soft:   #EDE9F3;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --rail:      64px;   /* sidebar at rest */
  --rail-open: 236px;  /* sidebar on hover or keyboard focus */
  --radius:    8px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }          /* keeps form controls light-rendered */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* ── sidebar ──────────────────────────────────────────────────────────────
   Collapsed to icons, expanding on hover. Labels stay in the DOM at all times
   so a screen reader always announces them — they are faded and clipped, not
   removed. :focus-within expands it too, so keyboard users get the same
   affordance as a mouse. */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: var(--rail);
  background: var(--card);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width .18s cubic-bezier(.4, 0, .2, 1);
}
.sidebar:hover,
.sidebar:focus-within { width: var(--rail-open); box-shadow: 0 0 24px rgba(20, 32, 27, .07); }

.sidebar .mark {
  display: flex; align-items: center; gap: 12px;
  height: 62px; padding: 0 20px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: var(--ink); flex: none;
}
.sidebar .mark .glyph {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font: 700 13px/1 var(--sans);
}
.sidebar .mark .word {
  font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
  opacity: 0; transition: opacity .14s ease;
}
.sidebar .mark .word span { color: var(--accent); }

.sidebar nav { padding: 10px 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
.sidebar nav a {
  display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 20px; margin: 2px 8px;
  border-radius: 7px; text-decoration: none; color: var(--ink-soft);
  white-space: nowrap;
}
.sidebar nav a svg { flex: none; width: 20px; height: 20px; stroke-width: 1.7; }
.sidebar nav a .label { opacity: 0; transition: opacity .14s ease; font-size: .94rem; }
.sidebar:hover .label,
.sidebar:focus-within .label,
.sidebar:hover .word,
.sidebar:focus-within .word { opacity: 1; }
.sidebar nav a:hover { background: var(--rule-soft); color: var(--ink); }
.sidebar nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sidebar .foot { border-top: 1px solid var(--rule-soft); padding: 12px 8px; flex: none; }
.sidebar .orgline {
  display: flex; align-items: center; gap: 14px; padding: 0 12px 10px; white-space: nowrap;
}
.sidebar .orgline .avatar {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font: 700 10px/1 var(--sans);
}
.sidebar .orgline .name {
  opacity: 0; transition: opacity .14s ease;
  font-size: .84rem; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.sidebar:hover .orgline .name,
.sidebar:focus-within .orgline .name { opacity: 1; }
.sidebar .foot button {
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 0px); height: 40px; padding: 0 12px;
  border: 0; background: none; border-radius: 7px;
  color: var(--ink-soft); font: inherit; font-size: .94rem;
  cursor: pointer; white-space: nowrap;
}
.sidebar .foot button:hover { background: var(--rule-soft); color: var(--danger); }
.sidebar .foot button svg { flex: none; width: 20px; height: 20px; stroke-width: 1.7; }
.sidebar .foot button .label { opacity: 0; transition: opacity .14s ease; }
.sidebar:hover .foot button .label,
.sidebar:focus-within .foot button .label { opacity: 1; }

/* ── page ─────────────────────────────────────────────────────────────── */
.shell { margin-left: var(--rail); }
main { padding: 34px 0 90px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

h1 { font-size: 1.6rem; letter-spacing: -.022em; margin: 0 0 6px; text-wrap: balance; }
h2 { font-size: 1.05rem; margin: 0 0 12px; letter-spacing: -.01em; }
.sub { color: var(--ink-soft); margin: 0 0 26px; }
p { margin: 0 0 15px; }

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px;
}
.grid { display: grid; gap: 16px; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* A stat tile carries its subject's colour through one variable, so the number
   and its marker can never drift apart. --tint defaults to ink, which keeps
   every tile that has NOT been given a subject looking deliberate rather than
   unstyled. */
.stat .n {
  font-size: 1.95rem; font-weight: 700; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; color: var(--tint, var(--ink));
  line-height: 1.1;
}
.stat .l {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); margin-top: 6px;
  display: flex; align-items: center; gap: 7px;
}
.stat .l::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tint, var(--rule));
}
.stat.money  { --tint: var(--data-money); }
.stat.people { --tint: var(--data-people); }
.stat.time   { --tint: var(--data-time); }

/* One tile is the headline. Money is what the organization is here for, so it
   gets the filled treatment and the other two stay quiet beside it — spending
   the emphasis in one place rather than three. */
.stat.lead { background: var(--data-money-soft); border-color: #CBE1D5; }
.stat.lead .l { color: #3B7A5C; }

/* ── forms ────────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: .88rem; margin: 0 0 5px; }
.hint { font-weight: 400; color: var(--ink-faint); font-size: .82rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--card); color: var(--ink); font: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.field { margin-bottom: 16px; }
.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: 0; padding: 11px 20px; border-radius: 6px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); }
.btn.ghost:hover { background: var(--rule-soft); color: var(--ink); }
.btn.small { padding: 6px 12px; font-size: .86rem; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── feedback ─────────────────────────────────────────────────────────── */
.flash { padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; font-size: .94rem; }
.flash.notice { background: var(--accent-soft); color: var(--accent); }
.flash.error  { background: var(--danger-soft); color: var(--danger); }
.flash.warn   { background: var(--warn-soft);   color: var(--warn); }

.cap { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); }
.cap:last-child { border-bottom: 0; }
.cap b { display: block; }
.cap .d { color: var(--ink-soft); font-size: .9rem; }

.pill {
  font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 20px; white-space: nowrap; display: inline-block;
}
.pill.on  { background: var(--accent-soft); color: var(--accent); }
.pill.off { background: var(--rule-soft);   color: var(--ink-faint); }

/* Status pills by what the status MEANS, so the four event states are
   distinguishable at a glance instead of being green-or-grey. Draft borrows the
   warning tone because a draft is the one state that surprises people — it is
   why their link does not work. */
.pill.draft    { background: var(--warn-soft);      color: var(--warn); }
.pill.closed   { background: var(--data-people-soft); color: var(--data-people); }
.pill.archived { background: var(--rule-soft);      color: var(--ink-faint); }

/* ── checklist ────────────────────────────────────────────────────────────
   For guidance rather than data: things the reader has not done yet. The open
   ring says "outstanding" in a way a bullet cannot. */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 27px; margin: 0 0 11px;
  color: var(--ink-soft); font-size: .93rem; line-height: 1.5;
}
.checklist li:last-child { margin-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--tint, var(--rule)); opacity: .85;
}
.checklist a { font-weight: 600; }

/* ── tables ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left; font: 600 11px/1 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 0 12px 9px 0; border-bottom: 1px solid var(--rule);
}
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.empty { color: var(--ink-faint); padding: 26px 0; text-align: center; }

/* ── signed-out pages ─────────────────────────────────────────────────── */
.bare { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.bare .box { width: 100%; max-width: 440px; }
.bare .brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 22px; font-size: 1.2rem; font-weight: 700;
  text-decoration: none; color: var(--ink); letter-spacing: -.02em;
}
.bare .brand .glyph {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent);
  color: #fff; display: grid; place-items: center; font: 700 14px/1 var(--sans);
}
.bare .brand span { color: var(--accent); }
.bare .alt { text-align: center; margin-top: 18px; font-size: .9rem; color: var(--ink-soft); }

/* ── narrow screens ───────────────────────────────────────────────────────
   Hover cannot expand a rail on a touch screen, so below 760px the sidebar
   becomes a bottom bar with icons and permanent short labels. */
@media (max-width: 760px) {
  .sidebar {
    inset: auto 0 0 0; width: 100%; height: 60px;
    flex-direction: row; border-right: 0; border-top: 1px solid var(--rule);
  }
  .sidebar:hover, .sidebar:focus-within { width: 100%; box-shadow: none; }
  .sidebar .mark, .sidebar .orgline { display: none; }
  .sidebar nav { display: flex; padding: 0; flex: 1; }
  .sidebar nav a {
    flex: 1; flex-direction: column; gap: 2px; height: 60px;
    margin: 0; padding: 8px 2px; justify-content: center; border-radius: 0;
  }
  .sidebar nav a .label { opacity: 1; font-size: 10px; letter-spacing: .01em; }
  .sidebar .foot { border-top: 0; padding: 0; display: flex; align-items: center; }
  .sidebar .foot button { width: 60px; flex-direction: column; gap: 2px; height: 60px; padding: 8px 2px; }
  .sidebar .foot button .label { opacity: 1; font-size: 10px; }
  .shell { margin-left: 0; padding-bottom: 60px; }
  .wrap { padding: 0 18px; }
}