/* ============ Admin Design System ============ */
/* Scoped: all tokens live on .adm-page, no global side effects. */

.adm-page {
  /* area colors (dark default) */
  --adm-und:    oklch(68% .19 35);
  --adm-people: #85AC7F;
  --adm-comm:   oklch(64% .095 198);
  --adm-system: var(--accent-gold);
  --adm-accent: var(--adm-system);

  /* status colors */
  --status-success: #6EB478;
  --status-warning: #DC963C;
  --status-error:   #DC503C;
  --status-info:    var(--adm-comm);

  /* text steps missing in core.css */
  --text-90: rgba(245, 240, 232, .90);
  --text-80: rgba(245, 240, 232, .80);

  /* tokens referenced by older admin pages but never defined */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --text-sm: .85rem; --text-base: .95rem; --text-lg: 1.1rem;
  --text-xl: 1.3rem; --text-2xl: 1.6rem;
  --bg-elevated: rgba(245,240,232,.06);

  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 64px;
  font-family: 'Outfit', sans-serif;
}

[data-theme="light"] .adm-page {
  --adm-und:    oklch(50% .17 35);
  --adm-people: #3E6B3F;
  --adm-comm:   oklch(44% .09 198);
  --status-success: #2F7A3D;
  --status-warning: #9A5B12;
  --status-error:   #A8321F;
  --bg-elevated: rgba(45,39,38,.06);

  /* core.css leaves the opacity text scale on the dark base in light mode -
     re-anchor it here so admin pages do not render white on white. */
  --text-90: rgba(26, 26, 26, .90);
  --text-80: rgba(26, 26, 26, .80);
  --text-60: rgba(26, 26, 26, .60);
  --text-40: rgba(26, 26, 26, .45);
  --text-35: rgba(26, 26, 26, .40);
  --text-30: rgba(26, 26, 26, .35);
  --text-25: rgba(26, 26, 26, .30);
  --text-20: rgba(26, 26, 26, .20);
  --text-2:  rgba(26, 26, 26, .20);
  --text-15: rgba(26, 26, 26, .15);
  --text-10: rgba(26, 26, 26, .12);
  --text-08: rgba(26, 26, 26, .10);
  --text-06: rgba(26, 26, 26, .09);
  --text-03: rgba(26, 26, 26, .04);
  --bg-03:   rgba(26, 26, 26, .02);
}

/* area binding */
.adm-page[data-area="und"]    { --adm-accent: var(--adm-und); }
.adm-page[data-area="people"] { --adm-accent: var(--adm-people); }
.adm-page[data-area="comm"]   { --adm-accent: var(--adm-comm); }
.adm-page[data-area="system"],
.adm-page[data-area="cockpit"] { --adm-accent: var(--adm-system); }

/* ---- header ---- */
.adm-head { margin-bottom: 28px; }
.adm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--adm-accent); margin-bottom: 10px; font-weight: 500;
}
.adm-eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--adm-accent);
}
.adm-title {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 1.7rem;
  color: var(--text-90, rgba(245,240,232,.9)); letter-spacing: -.01em;
  margin: 0 0 4px;
}
.adm-sub { font-size: .82rem; color: var(--text-40); margin: 0; }

/* ---- subnav ---- */
.adm-subnav {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 0 32px; padding-bottom: 2px;
  border-bottom: 1px solid var(--text-06);
}
.adm-subnav::-webkit-scrollbar { display: none; }
.adm-subnav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; white-space: nowrap; text-decoration: none;
  font-size: .8rem; color: var(--text-40);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s;
}
.adm-subnav a::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dot, var(--text-25)); opacity: .45; transition: opacity .15s;
}
.adm-subnav a:hover { color: var(--text-80, rgba(245,240,232,.8)); }
.adm-subnav a:hover::before { opacity: 1; }
.adm-subnav a.active { color: var(--dot); border-bottom-color: var(--dot); }
.adm-subnav a.active::before { opacity: 1; }
.adm-subnav .sep {
  width: 1px; height: 16px; background: var(--text-06);
  margin: 0 8px; flex-shrink: 0;
}
/* 12 entries need ~1230px but the page caps at 960 - on anything but a phone
   the strip wraps instead of hiding four areas behind an invisible scrollbar. */
@media (min-width: 601px) {
  .adm-subnav { flex-wrap: wrap; overflow-x: visible; }
}

/* ---- stats ---- */
.adm-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  margin-bottom: 28px;
}
.adm-stat { text-align: center; padding: 20px 12px; }
.adm-stat + .adm-stat { border-left: 1px solid var(--text-06); }
.adm-stat b {
  display: block; font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--adm-accent); margin-bottom: 8px;
}
.adm-stat span { font-size: .72rem; color: var(--text-40); letter-spacing: .02em; }

/* ---- cards, rows, badges, chips ---- */
.adm-card {
  border: 1px solid var(--text-06); border-radius: 16px;
  padding: 20px; margin-bottom: 12px; background: var(--bg-03, transparent);
  transition: border-color .15s;
}
.adm-card:hover { border-color: color-mix(in srgb, var(--adm-accent) 35%, transparent); }
.adm-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--text-06);
}
.adm-row:last-child { border-bottom: 0; }
.adm-badge {
  font-size: .68rem; padding: 3px 10px; border-radius: 10px;
  font-weight: 500; flex-shrink: 0;
  background: var(--bg-elevated); color: var(--text-60);
}
.adm-badge.is-success { background: color-mix(in srgb, var(--status-success) 14%, transparent); color: var(--status-success); }
.adm-badge.is-warning { background: color-mix(in srgb, var(--status-warning) 14%, transparent); color: var(--status-warning); }
.adm-badge.is-error   { background: color-mix(in srgb, var(--status-error) 14%, transparent);   color: var(--status-error); }
.adm-badge.is-accent  { background: color-mix(in srgb, var(--adm-accent) 14%, transparent);     color: var(--adm-accent); }
.adm-chip {
  font-family: inherit; font-size: .78rem; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--text-06); background: transparent;
  color: var(--text-40); transition: all .15s;
}
.adm-chip:hover { color: var(--text-80, rgba(245,240,232,.8)); }
.adm-chip.active {
  border-color: color-mix(in srgb, var(--adm-accent) 55%, transparent);
  color: var(--adm-accent);
  background: color-mix(in srgb, var(--adm-accent) 10%, transparent);
}
.adm-divider {
  height: 1px; margin: 28px 0;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--adm-accent) 25%, transparent),
    color-mix(in srgb, var(--adm-accent) 35%, transparent),
    color-mix(in srgb, var(--adm-accent) 25%, transparent), transparent);
}
.adm-empty { color: var(--text-40); font-size: .85rem; padding: 16px 0; }
.adm-error { color: var(--status-error); font-size: .85rem; padding: 12px 0; }

@media (max-width: 600px) {
  .adm-stats { grid-template-columns: repeat(2,1fr); row-gap: 16px; }
  .adm-stat:nth-child(3) { border-left: 0; }
}