/* Admin console — shared page chrome for the six staff-only pages.
   The design handoff replicates its shell in every page file and says it should be one component;
   this is the styling half of that (admin-menu.js is the behaviour half), so a page's own
   stylesheet only holds what is genuinely specific to it.

   Two defects the handoff calls out, both encoded here:

   1. FIXED GRID TRACKS THAT SUM TO THE CONTENT BOX. It produced the same bug five times. Track
      floors must be budgeted against the row's real measured content width, and `minmax()` does not
      save you — if the floors already fill the row, the `fr` units have no surplus to distribute and
      every track sits pinned at its floor. So the table rows here declare their columns per page,
      against that page's real longest values, rather than inheriting a guessed set from this file.

   2. COLOUR TOKENS REUSED AT SMALL SIZES. Score/band palettes are calibrated for large numerals
      where the 3:1 floor applies; the same colour at 12px on a tint of itself lands near 4.1:1.
      Hence the paired --adm-*-fg (small text, AA on the tint) and --adm-*-bg tokens below: the `fg`
      is always the darker ink, never the band colour. */

* { box-sizing: border-box; }

:root {
  --adm-ink: #16273F;
  --adm-body: #33404F;
  --adm-muted: #5F6A79;      /* not #8791A0 or #98A2B0 — both fail on white */
  --adm-line: #EAEDF3;
  --adm-line-soft: #EFF2F7;
  --adm-field: #E4E8EF;
  --adm-page: #F3F5FA;
  --adm-red: #E8402A;

  /* State pairs: fg is AA-safe small ink for use on the matching bg. */
  --adm-ok-fg: #14795A;    --adm-ok-bg: #E7F7F1;   --adm-ok-bd: #BFE7D8;   --adm-ok-dot: #1FA97A;
  --adm-warn-fg: #95530D;  --adm-warn-bg: #FCF3E8; --adm-warn-bd: #F3DDBD; --adm-warn-dot: #E29B31;
  --adm-bad-fg: #B03024;   --adm-bad-bg: #FDECEA;  --adm-bad-bd: #F6C9C3;  --adm-bad-dot: #D6412F;
  --adm-info-fg: #1E56C0;  --adm-info-bg: #EAF1FC; --adm-info-bd: #C9DCF7; --adm-info-dot: #2F6FE0;
  --adm-violet-fg: #5B3ED6; --adm-violet-bg: #F2EFFC; --adm-violet-bd: #DCD2F8; --adm-violet-dot: #7A5AF0;
  --adm-idle-fg: #4B5563;  --adm-idle-bg: #F1F4FA;  --adm-idle-bd: #E1E7F0; --adm-idle-dot: #98A2B0;
}

html, body { margin: 0; padding: 0; }
body {
  font-family: "Mulish", system-ui, sans-serif;
  color: var(--adm-body);
  background: var(--adm-page);
  -webkit-font-smoothing: antialiased;
}
a { color: #2F6FE0; text-decoration: none; }
a:hover { color: #1E56C0; }
::selection { background: #ffd9d0; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* The suite's layout idiom, matching every fe-* app: `max-width: 90%` with 32px padding and no pixel
   cap. The handoff specified 90% capped at 1520px, but that cap made these pages visibly narrower
   than the rest of the suite on a wide screen — the console sits alongside the customer apps and
   should line up with them. `width: 100%` keeps it filling the space below that. */
.adm-wrap { max-width: 90%; width: 100%; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ------------------------------- Header ------------------------------- */
.rm-header {
  position: sticky; top: 0; z-index: 40; background: #fff;
  border-bottom: 1px solid var(--adm-line); box-shadow: 0 1px 2px rgba(18, 38, 63, 0.04);
}
.rm-header-inner {
  max-width: 90%; width: 100%; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
}
.rm-header-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.rm-header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rm-menu-button {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 48px; height: 48px; padding: 0 13px; background: #fff;
  border: 1px solid var(--adm-field); border-radius: 14px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 38, 63, 0.05);
}
.rm-menu-button span { height: 2.5px; border-radius: 2px; background: #3B4757; }
.rm-logo { height: 52px; width: auto; display: block; }
.rm-header-divider { width: 1px; height: 28px; background: #E2E6ED; }
.rm-header-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 20px; color: var(--adm-ink); letter-spacing: -0.3px; }

/* ------------------------------- Page head + tabs ------------------------------- */
.adm-head { background: #fff; border-bottom: 1px solid var(--adm-line); }
.adm-head-inner { padding-top: 26px; }
.adm-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
.adm-h1 { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -0.6px; color: var(--adm-ink); margin: 0 0 6px; }
.adm-sub { font-size: 15px; color: var(--adm-muted); margin: 0; }

.adm-tabs { display: flex; gap: 28px; flex-wrap: wrap; }
.adm-tab {
  appearance: none; background: none; border: none; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; padding: 16px 2px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; color: var(--adm-muted);
  border-bottom: 3px solid transparent;
}
.adm-tab[aria-selected="true"] { font-weight: 700; color: var(--adm-ink); border-bottom-color: var(--adm-red); }
.adm-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  background: var(--adm-idle-bg); border: 1px solid var(--adm-idle-bd); border-radius: 999px;
  padding: 2px 8px; font-size: 11.5px; font-weight: 700; color: var(--adm-idle-fg);
}
.adm-tab[aria-selected="true"] .adm-tab-badge { background: #FEF4F2; border-color: #F3B9AE; color: #B03024; }

.adm-main { flex: 1; padding-top: 26px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 22px; animation: admFade .3s ease both; }

/* ------------------------------- Cards ------------------------------- */
.adm-card { background: #fff; border: 1px solid var(--adm-line); border-radius: 18px; box-shadow: 0 4px 16px rgba(18, 38, 63, 0.05); }
.adm-card-pad { padding: 22px 24px; }
.adm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 24px 0; }
.adm-h2 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 19px; color: var(--adm-ink); margin: 0; }
.adm-note { font-size: 13px; color: var(--adm-muted); }
.adm-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; }

/* Stat / KPI cards */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.adm-stat { background: #fff; border: 1px solid var(--adm-line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(18, 38, 63, 0.04); }
.adm-stat-value { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 27px; line-height: 1; color: var(--adm-ink); }
.adm-stat-label { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--adm-muted); }
.adm-stat-sub { font-size: 12px; color: var(--adm-muted); margin-top: 4px; }

/* ------------------------------- Pills, dots, chips ------------------------------- */
/* Every state is text plus colour, never colour alone — the pill always carries its label. */
.adm-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border-radius: 999px; padding: 4px 11px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12px;
  background: var(--adm-idle-bg); border: 1px solid var(--adm-idle-bd); color: var(--adm-idle-fg);
}
.adm-pill--ok { background: var(--adm-ok-bg); border-color: var(--adm-ok-bd); color: var(--adm-ok-fg); }
.adm-pill--warn { background: var(--adm-warn-bg); border-color: var(--adm-warn-bd); color: var(--adm-warn-fg); }
.adm-pill--bad { background: var(--adm-bad-bg); border-color: var(--adm-bad-bd); color: var(--adm-bad-fg); }
.adm-pill--info { background: var(--adm-info-bg); border-color: var(--adm-info-bd); color: var(--adm-info-fg); }
.adm-pill--violet { background: var(--adm-violet-bg); border-color: var(--adm-violet-bd); color: var(--adm-violet-fg); }

.adm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--adm-idle-dot); }
.adm-dot--ok { background: var(--adm-ok-dot); }
.adm-dot--warn { background: var(--adm-warn-dot); }
.adm-dot--bad { background: var(--adm-bad-dot); }
.adm-dot--live { animation: admPulse 1.6s ease-in-out infinite; }

.adm-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.adm-chip {
  appearance: none; cursor: pointer; border-radius: 999px; padding: 8px 15px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13.5px;
  background: #fff; border: 1.5px solid var(--adm-field); color: #5B6675;
}
.adm-chip[aria-pressed="true"] { background: var(--adm-ink); border-color: var(--adm-ink); color: #fff; }
.adm-chip-count { opacity: 0.75; font-weight: 700; }

/* ------------------------------- Controls ------------------------------- */
.adm-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-search {
  display: flex; align-items: center; gap: 9px; background: #fff;
  border: 1.5px solid var(--adm-field); border-radius: 12px; padding: 10px 14px; min-width: 280px; flex: 1;
}
.adm-search input { flex: 1; min-width: 0; border: none; outline: none; font-family: "Mulish", sans-serif; font-size: 14.5px; color: var(--adm-ink); background: none; }
.adm-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--adm-field); border-radius: 12px; padding: 10px 16px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; color: #3B4757;
}
.adm-btn:hover { border-color: #C9D3E0; }
.adm-btn--primary { background: var(--adm-red); border-color: var(--adm-red); color: #fff; }
.adm-btn--primary:hover { background: #D0361F; border-color: #D0361F; }
.adm-btn--dark { background: var(--adm-ink); border-color: var(--adm-ink); color: #fff; }
/* Genuinely disabled, not just dimmed — the handoff found these had been low-contrast live text. */
.adm-btn:disabled { background: #EDF0F5; border-color: #E4E8EF; color: #5B6675; cursor: not-allowed; }
.adm-btn:disabled:hover { border-color: #E4E8EF; }
/* `display: inline-flex` above outranks the `hidden` attribute, so hiding a button in JS silently
   does nothing without this. Same for the pills, which are also inline-flex. */
.adm-btn[hidden], .adm-pill[hidden], .adm-chip[hidden] { display: none !important; }

/* ------------------------------- Tables ------------------------------- */
/* Each page sets --adm-cols on .adm-table for its own measured column widths (see defect 1). */
.adm-table { overflow: hidden; }
.adm-thead, .adm-row { display: grid; grid-template-columns: var(--adm-cols); gap: 14px; align-items: center; }
.adm-thead { padding: 13px 22px; background: #F7F9FC; border-bottom: 1px solid var(--adm-line); }
.adm-th { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--adm-muted); }
.adm-row {
  width: 100%; text-align: left; appearance: none; background: #fff; border: none;
  border-bottom: 1px solid var(--adm-line-soft); padding: 15px 22px; font: inherit; color: inherit;
}
button.adm-row { cursor: pointer; }
button.adm-row:hover { background: #FBFCFE; }
.adm-row:last-child { border-bottom: none; }
.adm-cell-strong { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14.5px; color: var(--adm-ink); }
.adm-cell { font-size: 14px; color: var(--adm-body); }
.adm-cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--adm-muted); }
.adm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.adm-empty { padding: 44px 22px; text-align: center; font-size: 14.5px; color: var(--adm-muted); }

/* Monogram avatars. Backgrounds run through onWhite() in JS so white text always clears 4.5:1,
   which means a new organisation colour cannot introduce a contrast failure. */
.adm-mono {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 13px; color: #fff;
}
.adm-mono--sm { width: 30px; height: 30px; font-size: 11px; }

/* Progress / usage bars */
.adm-bar { height: 8px; border-radius: 999px; background: #EEF1F6; overflow: hidden; }
.adm-bar-fill { height: 100%; border-radius: 999px; background: var(--adm-info-dot); }

/* Detail layouts. Organisations' and Activity's main views are a wide column plus a 380px rail;
   Users' is the same shape at 340px. Shared here because three pages use it. */
.adm-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.adm-split--narrow { grid-template-columns: minmax(0, 1fr) 340px; }
.adm-rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.adm-col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* The AI report panel. It appears on Organisations and Activity in the design, where the copy is
   hand-written per stage; the handoff says it needs a real generation pipeline with the stage as
   input, so the panel renders its shape and states plainly that nothing generates it yet. */
.adm-ai {
  background: linear-gradient(135deg, #16273F, #22395C); border-radius: 18px; padding: 22px;
  box-shadow: 0 12px 30px rgba(18, 38, 63, 0.2); color: #fff;
}
.adm-ai-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.adm-ai-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; }
.adm-ai-tag {
  margin-left: auto; background: rgba(158, 197, 255, 0.16); border: 1px solid rgba(158, 197, 255, 0.4);
  color: #9EC5FF; border-radius: 999px; padding: 3px 9px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em;
}
.adm-ai-body { font-size: 13.5px; line-height: 1.6; color: #C2CEDC; }
.adm-ai-body strong { color: #fff; }

/* Small key/value list used in the account and access rails. */
.adm-fields { display: flex; flex-direction: column; }
.adm-field-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--adm-line-soft); font-size: 13.5px;
}
.adm-field-row:last-child { border-bottom: none; }
.adm-field-key { color: var(--adm-muted); }
.adm-field-value { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--adm-ink); text-align: right; }

/* Range selector above a chart (7/30/90 days). */
.adm-range { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-range-btn {
  appearance: none; cursor: pointer; background: #fff; border: 1px solid var(--adm-field);
  border-radius: 9px; padding: 6px 11px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 12.5px; color: #5B6675;
}
.adm-range-btn[aria-pressed="true"] { background: var(--adm-ink); border-color: var(--adm-ink); color: #fff; }

/* Chart legend that names which axis a series belongs to. */
.adm-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.adm-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--adm-muted); }
.adm-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

@media (max-width: 1200px) {
  .adm-split, .adm-split--narrow { grid-template-columns: minmax(0, 1fr); }
}

/* Charts. role="img" plus a generated aria-label is applied in JS. */
.adm-chart-wrap { position: relative; height: 260px; }
.adm-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ------------------------------- Modal ------------------------------- */
.adm-modal-backdrop { position: fixed; inset: 0; z-index: 78; background: rgba(14, 24, 38, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.adm-modal { width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 40px 100px rgba(8, 16, 28, 0.44); animation: admPop .24s ease both; }
.adm-modal-pad { padding: 28px 30px; }
.adm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.adm-modal-head h2 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 22px; color: var(--adm-ink); margin: 0; }
.adm-modal-close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: #F4F6FA; border: 1px solid var(--adm-field); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.adm-label { display: block; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12.5px; color: #5B6675; margin: 18px 0 8px; }
.adm-label:first-of-type { margin-top: 0; }
.adm-input, .adm-select {
  width: 100%; padding: 12px 14px; border: 1.6px solid var(--adm-field); border-radius: 12px;
  font-family: "Mulish", sans-serif; font-size: 15px; color: var(--adm-ink); outline: none; background: #fff;
}
.adm-input:focus, .adm-select:focus { border-color: #C9D3E0; }

/* ------------------------------- Footer ------------------------------- */
.rm-footer { background: #fff; border-top: 1px solid var(--adm-line); }
.rm-footer-inner { max-width: 90%; width: 100%; margin: 0 auto; padding: 22px 32px; font-size: 13.5px; color: var(--adm-muted); }

:focus-visible { outline: 3px solid rgba(232, 64, 42, 0.35); outline-offset: 2px; }

@keyframes admFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes admPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes admPop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

@media (max-width: 900px) {
  .adm-h1 { font-size: 26px; }
  .adm-thead { display: none; }
  .adm-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}