.admin-layout { display: grid; grid-template-columns: calc(var(--s20) * 3) 1fr; min-height: 100dvh; }
/* --green-900/800 stay dark in both themes, so the ink here must stay light —
   this is exactly why it can't use --app-on-brand, which flips with --froyo. */
.sidebar { background: var(--green-900); color: var(--paper-fixed); display: grid; grid-template-rows: auto 1fr auto; gap: var(--s6); padding: var(--s6) var(--s4); }
.sidebar-logo { width: calc(var(--s20) * 2); }
.admin-nav { display: grid; gap: var(--s1); }
.admin-nav button { background: transparent; border: 0; border-radius: var(--r-md); color: var(--green-200); cursor: pointer; min-height: var(--tap-min); padding: var(--s3); text-align: left; }
.admin-nav button:hover, .admin-nav button.active { background: var(--green-800); color: var(--paper-fixed); }
/* .btn.ghost paints itself --froyo, which is dark green in the light theme and so
   vanishes against this always-dark sidebar (1.65:1). Same local override the
   staff shell already uses for its ghost button on --green-900. */
.sidebar .btn.ghost { border-color: var(--green-200); color: var(--green-200); }
.admin-main { min-width: 0; padding: var(--s8); }
.admin-header { margin-bottom: var(--s8); }
.dashboard-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-stat strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); }
.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--s6); }
.stat { background: var(--green-100); border-radius: var(--r-lg); color: var(--froyo); padding: var(--s4); }
.stat.coral { background: var(--coral-100); color: var(--app-coral-ink); }
.stat strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); }
.table-wrap { background: var(--surface); border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r-xl); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: calc(var(--s1) / 4) solid var(--line); max-width: calc(var(--s20) * 3); overflow: hidden; padding: var(--s3) var(--s4); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
th { color: var(--muted); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
th:last-child, td:last-child { background: var(--surface); border-left: calc(var(--s1) / 4) solid var(--line); position: sticky; right: 0; z-index: 2; }
.status-dot { background: var(--faint); border-radius: var(--r-pill); display: inline-block; height: var(--s2); margin-right: var(--s2); width: var(--s2); }
.status-dot.active { background: var(--success); }
.form-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
.login-page { display: grid; min-height: 100dvh; place-items: center; padding: var(--s4); }
.login-card { max-width: calc(var(--s20) * 5); width: 100%; }
.login-logo { margin: 0 auto; width: calc(var(--s20) * 2); }
.login-logo.dark-logo { display: none; }
:root[data-theme="dark"] .login-logo.light-logo { display: none; }
:root[data-theme="dark"] .login-logo.dark-logo { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-logo.light-logo { display: none; }
  :root:not([data-theme="light"]) .login-logo.dark-logo { display: block; }
}
.code { font-family: var(--font-mono); font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: auto 1fr auto; grid-template-rows: auto; position: sticky; top: 0; z-index: 10; }
  .sidebar-logo { width: calc(var(--s20) * 1.5); }
  .admin-nav { display: flex; overflow-x: auto; }
  .admin-main { padding: var(--s5); }
  .dashboard-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .sidebar { grid-template-columns: 1fr auto; }
  .admin-nav { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid, .form-grid, .stats { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
}