/*
 * Status colours — one per stage, muted, used everywhere a status appears
 * (badges, count cards, sidebar dots) so a stage always reads the same.
 * Each pairs a pale tint with dark text for contrast; the dot is the stage's
 * mid-tone. Loaded by both the applicant site and the dashboard.
 */
:root {
  --st-started-bg: #eeedf1;  --st-started-fg: #4f4b57;  --st-started-dot: #9a95a3;  /* grey: nothing yet   */
  --st-applied-bg: #eee9f7;  --st-applied-fg: #4a3776;  --st-applied-dot: #614a96;  /* purple: with school */
  --st-approved-bg: #e6f3d8; --st-approved-fg: #3f5f14; --st-approved-dot: #7aa52d; /* lime: offered a place */
  --st-paid-bg: #e5eefa;     --st-paid-fg: #1d4f86;     --st-paid-dot: #3b7dc4;     /* blue: paid, filling */
  --st-submitted-bg: #eee9f7;--st-submitted-fg: #4a3776;--st-submitted-dot: #614a96;/* purple: with school */
  --st-needs_correction-bg: #fbf0d9; --st-needs_correction-fg: #6f4c0c; --st-needs_correction-dot: #c98f1f; /* amber: action */
  --st-admitted-bg: #e2f2e7; --st-admitted-fg: #1b5e37; --st-admitted-dot: #2e8f55; /* green: yes          */
  --st-waitlisted-bg: #dff1ef;--st-waitlisted-fg: #17574f;--st-waitlisted-dot: #2a8f82;/* teal: maybe       */
  --st-not_admitted-bg: #f6e5e3;--st-not_admitted-fg: #842d26;--st-not_admitted-dot: #b9554b;/* rose: no      */
}

.status-badge[class*="st-"] { font-weight: 700; }
.status-badge.st-started          { background: var(--st-started-bg);          color: var(--st-started-fg); }
.status-badge.st-applied          { background: var(--st-applied-bg);          color: var(--st-applied-fg); }
.status-badge.st-approved         { background: var(--st-approved-bg);         color: var(--st-approved-fg); }
.status-badge.st-paid             { background: var(--st-paid-bg);             color: var(--st-paid-fg); }
.status-badge.st-submitted        { background: var(--st-submitted-bg);        color: var(--st-submitted-fg); }
.status-badge.st-needs_correction { background: var(--st-needs_correction-bg); color: var(--st-needs_correction-fg); }
.status-badge.st-admitted         { background: var(--st-admitted-bg);         color: var(--st-admitted-fg); }
.status-badge.st-waitlisted       { background: var(--st-waitlisted-bg);       color: var(--st-waitlisted-fg); }
.status-badge.st-not_admitted     { background: var(--st-not_admitted-bg);     color: var(--st-not_admitted-fg); }

/* A small dot in the stage colour: sidebar links, count cards. */
.st-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; flex: none; }
.st-dot.st-started          { background: var(--st-started-dot); }
.st-dot.st-applied          { background: var(--st-applied-dot); }
.st-dot.st-approved         { background: var(--st-approved-dot); }
.st-dot.st-paid             { background: var(--st-paid-dot); }
.st-dot.st-submitted        { background: var(--st-submitted-dot); }
.st-dot.st-needs_correction { background: var(--st-needs_correction-dot); }
.st-dot.st-admitted         { background: var(--st-admitted-dot); }
.st-dot.st-waitlisted       { background: var(--st-waitlisted-dot); }
.st-dot.st-not_admitted     { background: var(--st-not_admitted-dot); }

/* Count cards — kept quiet: white, a hairline border, the stage dot as the
   only colour, the number in plain dark text. The card you are on takes a
   soft tint of its own stage colour rather than a heavy outline. */
.stat-grid { gap: .75rem !important; }
.stat-card {
  border: 1px solid #ebe8f0 !important; border-radius: .75rem !important;
  box-shadow: none !important; padding: .8rem 1rem !important;
  transition: border-color .15s, background-color .15s;
}
.stat-card:hover { border-color: #d6d1df !important; }
.stat-card .stat-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: #6b6675; font-weight: 500; }
.stat-card .stat-num { display: block; margin-top: .2rem; font-size: 1.5rem; font-weight: 600; color: #25232b; line-height: 1.2; }

.stat-card.is-active { border-color: transparent !important; }
.stat-card.is-active .stat-label { color: inherit; font-weight: 600; }
.stat-card.st-started.is-active          { background: var(--st-started-bg);          color: var(--st-started-fg); }
.stat-card.st-applied.is-active          { background: var(--st-applied-bg);          color: var(--st-applied-fg); }
.stat-card.st-approved.is-active         { background: var(--st-approved-bg);         color: var(--st-approved-fg); }
.stat-card.st-paid.is-active             { background: var(--st-paid-bg);             color: var(--st-paid-fg); }
.stat-card.st-submitted.is-active        { background: var(--st-submitted-bg);        color: var(--st-submitted-fg); }
.stat-card.st-needs_correction.is-active { background: var(--st-needs_correction-bg); color: var(--st-needs_correction-fg); }
.stat-card.st-admitted.is-active         { background: var(--st-admitted-bg);         color: var(--st-admitted-fg); }
.stat-card.st-waitlisted.is-active       { background: var(--st-waitlisted-bg);       color: var(--st-waitlisted-fg); }
.stat-card.st-not_admitted.is-active     { background: var(--st-not_admitted-bg);     color: var(--st-not_admitted-fg); }
.stat-card.is-active .stat-num { color: inherit; }

/* The applicant site has no .status-badge base rule of its own. */
.app-wrap .status-badge { display: inline-flex; align-items: center; border-radius: 2rem; padding: .2rem .75rem; font-size: .85rem; }

/* The two queues waiting on staff stand out when they have work in them;
   the tabs waiting on families stay quiet. */
.stat-card.is-due { border-color: #f0b429 !important; box-shadow: 0 0 0 3px rgba(240, 180, 41, .18) !important; }
.stat-card .due-tag { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #f0b429; color: #3b2a00; border-radius: 1rem; padding: .05rem .45rem; white-space: nowrap; }
.stat-card.is-waiting:not(.is-active) .stat-num { color: #8b8497; font-weight: 500; }
.stat-card.is-waiting:not(.is-active) .stat-label { color: #8b8497; }