/* ============================================================================
   ENTERPRISE SUMMARY ▸ GENERATION REPORT — /css/enterprise_generation.css
   egr-5 (2026-08-10) — chart toolbar, pill toggle switch, total-count badges.
   Previously egr-2 (2026-08-08)

   Scoped entirely under `.egr-wrap` (Pages.enterprise_generation). Built on the
   GLOBAL theme tokens — --panel / --panel2 / --border / --text / --muted /
   --accent-rgb — which is what makes this file dual-theme by construction:
   APEX dark and Bright Board light both supply those tokens, so there is not a
   single `html[data-mode]` selector here and there must never be one. Hard-code
   a colour and it will be wrong in exactly one of the two themes.

   The one exception is the SEMANTIC report inks (amber = received / in-office,
   green = closed / check-in, ember = backlog / overtime, …). Those carry
   MEANING, so they are hue-locked across themes the way chart_theme.js locks
   canvas series: the reader who learned "amber = incoming" must not be
   retrained by a theme flip. They are therefore the only place a
   `html[data-mode="dark"]` override is allowed here — one variable block, two
   values per hue, defined once below and referenced everywhere else.

   Why the pair is REQUIRED rather than cosmetic: the light default has to sit
   on a WHITE panel and the dark value on a near-black one. Shipping a single
   value fails AA in whichever theme it was not chosen for — the dark accents
   measured 1.89:1 on the light panel against a 3:1 requirement before this
   block existed. The inks are also never the sole carrier of meaning: every
   chart has a legend and a data table beside it.

   100% additive; no global selector is modified.
   ========================================================================== */

.egr-wrap { padding: 4px 2px 30px; }

/* ── native-widget theming (egr-3) ──────────────────────────────────────
   The page styles its CLOSED controls with tokens, but the browser paints the
   native parts — the <select> dropdown LIST, the date-picker glyph, checkbox
   chrome, scrollbars — from `color-scheme`. The global sheet only declares it
   for light mode, so dark mode inherited `normal` and every native dropdown
   opened as a WHITE list with washed-out optgroup labels over the dark page
   (MACE: "sabog ang mga kulay"). Declared here, scoped, both modes — plus
   explicit option/optgroup inks for the engines that honour them. */
.egr-wrap { color-scheme: light; }
html[data-mode="dark"] .egr-wrap { color-scheme: dark; }
.egr-wrap select option,
.egr-wrap select optgroup {
  background: var(--panel, Canvas);
  color: var(--text, CanvasText);
}
.egr-wrap select optgroup { font-weight: 700; color: var(--muted, GrayText); }

/* ── semantic report inks — LIGHT-safe defaults (see header) ───────────── */
.egr-wrap {
  --egr-amber:  #a86a00;
  --egr-green:  #0a7a52;
  --egr-ember:  #b8431a;
  --egr-blue:   #1d5fd0;
  --egr-cyan:   #0b6f80;
  --egr-violet: #6d3fd4;
  --egr-gold:   #8a6410;
  --egr-slate:  #4a5468;
  --egr-radius: 12px;
}
/* ── the same hues, chosen for the dark panel ─────────────────────────── */
html[data-mode="dark"] .egr-wrap {
  --egr-amber:  #f2b134;
  --egr-green:  #22c98d;
  --egr-ember:  #f07a4e;
  --egr-blue:   #5b9dff;
  --egr-cyan:   #22d3ee;
  --egr-violet: #c084fc;
  --egr-gold:   #e0b64a;
  --egr-slate:  #9aa4bb;
}

/* Tone classes — the ONLY way a KPI value gets its colour. Never inline a hex
   from JS: an inline style sits outside this layer and cannot flip. */
.egr-kpi-v.t-amber  { color: var(--egr-amber); }
.egr-kpi-v.t-green  { color: var(--egr-green); }
.egr-kpi-v.t-ember  { color: var(--egr-ember); }
.egr-kpi-v.t-blue   { color: var(--egr-blue); }
.egr-kpi-v.t-cyan   { color: var(--egr-cyan); }
.egr-kpi-v.t-violet { color: var(--egr-violet); }
.egr-kpi-v.t-gold   { color: var(--egr-gold); }
.egr-kpi-v.t-slate  { color: var(--egr-slate); }

/* ═══════════════════════════ header ═══════════════════════════ */

.egr-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.egr-head-l h1 { margin: 0; font-size: 21px; letter-spacing: .015em; color: var(--text); }
.egr-head-l p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.egr-head-r { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.egr-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.egr-field { display: flex; flex-direction: column; gap: 4px; }
.egr-field > span {
  font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.egr-field-pick .egr-select { min-width: 230px; }

/* ═══════════════════════════ controls ═══════════════════════════ */

.egr-select, .egr-input {
  background: var(--panel2, var(--panel)); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.egr-select:focus-visible, .egr-input:focus-visible, .egr-ms:focus-visible,
.egr-btn:focus-visible, .egr-run:focus-visible, .egr-tg:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb, 74, 163, 255), .85);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 74, 163, 255), .22);
}
.egr-input[readonly] { opacity: .65; cursor: not-allowed; }
.egr-date { min-width: 138px; }

.egr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel2, var(--panel)); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 11px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.egr-btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb, 74, 163, 255), .6); }
.egr-btn:active:not(:disabled) { transform: translateY(1px); }
.egr-btn:disabled { opacity: .45; cursor: not-allowed; }
.egr-btn svg { flex: 0 0 auto; opacity: .85; }
.egr-btn.primary {
  background: rgba(var(--accent-rgb, 74, 163, 255), .16);
  border-color: rgba(var(--accent-rgb, 74, 163, 255), .55);
}
.egr-btn.on { border-color: var(--egr-green); color: var(--egr-green); }
.egr-btn.danger:hover:not(:disabled) { border-color: var(--egr-ember); color: var(--egr-ember); }

.egr-toggle {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--panel2, var(--panel)); border: 1px solid var(--border);
  border-radius: 9px;
}
.egr-tg {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 13px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: background .15s, color .15s; white-space: nowrap;
}
.egr-tg:hover { color: var(--text); }
.egr-tg.on {
  background: rgba(var(--accent-rgb, 74, 163, 255), .18);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 74, 163, 255), .4);
}
.egr-tg.sm { padding: 4px 9px; font-size: 11px; }

/* ═══════════════════════════ wizard (compact, egr-3) ═══════════════════════════ */
/* One 12-column grid instead of two rows of numbered circles: the numbers
   survive as small chips inside the labels, the vertical rhythm halves, and
   the whole builder reads in one pass. */

.egr-wiz {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--egr-radius); padding: 12px 14px 10px; margin-bottom: 14px;
}
.egr-wiz-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 10px 14px; margin-bottom: 10px;
}
.egr-cell { min-width: 0; position: relative; }
.egr-c-type   { grid-column: span 3; }
.egr-c-name   { grid-column: span 4; }
.egr-c-range  { grid-column: span 5; }
.egr-c-users  { grid-column: span 5; }
.egr-c-facets { grid-column: span 7; }
@media (max-width: 1100px) {
  .egr-c-type   { grid-column: span 6; }
  .egr-c-name   { grid-column: span 6; }
  .egr-c-range  { grid-column: span 12; }
  .egr-c-users  { grid-column: span 12; }
  .egr-c-facets { grid-column: span 12; }
}

.egr-n {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%; margin-right: 6px;
  font-size: 9.5px; font-weight: 800; color: var(--text);
  background: rgba(var(--accent-rgb, 74, 163, 255), .16);
  border: 1px solid rgba(var(--accent-rgb, 74, 163, 255), .38);
  vertical-align: -2px; letter-spacing: 0;
}

.egr-lbl {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.egr-lbl-note {
  font-weight: 600; letter-spacing: .02em; text-transform: none;
  opacity: .8; margin-left: 6px; font-size: 10.5px;
}
.egr-input, .egr-select { width: 100%; box-sizing: border-box; }
.egr-head-r .egr-select, .egr-shift { width: auto; }

.egr-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.egr-range .egr-select { flex: 1 1 130px; min-width: 120px; }
.egr-arrow { color: var(--muted); font-size: 12px; }

.egr-wiz-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.egr-select.sm { width: auto; padding: 4px 7px; font-size: 11.5px; border-radius: 7px; }
.egr-run {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(var(--accent-rgb, 74, 163, 255), .18);
  border: 1px solid rgba(var(--accent-rgb, 74, 163, 255), .55);
  color: var(--text); border-radius: 9px; padding: 9px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .08s;
}
.egr-run:hover:not(:disabled) { background: rgba(var(--accent-rgb, 74, 163, 255), .27); }
.egr-run:active:not(:disabled) { transform: translateY(1px); }
.egr-run:disabled { opacity: .55; cursor: progress; }
.egr-loadnote, .egr-dirty { font-size: 11.5px; color: var(--muted); }
.egr-dirty { color: var(--egr-amber); }

/* ── user picker + facets ── */
.egr-msrow { display: flex; gap: 6px; align-items: stretch; }
.egr-ms {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel2, var(--panel)); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; font-family: inherit;
  cursor: pointer; text-align: left;
}
.egr-ms:hover { border-color: rgba(var(--accent-rgb, 74, 163, 255), .6); }
.egr-ms > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egr-ms-t { font-weight: 600; }
.egr-ms-v { color: var(--muted); font-size: 11.5px; margin-left: auto; }
.egr-ms svg { flex: 0 0 auto; opacity: .6; }

.egr-facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px; }
.egr-facet { position: relative; min-width: 0; }
/* The facet grid occupies the RIGHT half of the wizard, so a popover anchored
   to its own left edge runs off the viewport on anything under ~1200px. Anchor
   facet popovers to the right instead — deterministic from the layout, and it
   opens back over the wizard (which is empty space) rather than off-screen.
   Pure CSS cannot measure the overflow, so guessing per-column would be the
   fragile version of this. */
.egr-facet .egr-pop { left: auto; right: 0; }
.egr-clearall {
  margin-top: 8px; background: transparent; border: 0; padding: 0;
  color: var(--egr-amber); font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: underline;
}

.egr-selfonly { display: flex; flex-direction: column; gap: 6px; }
.egr-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.egr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--accent-rgb, 74, 163, 255), .14);
  border: 1px solid rgba(var(--accent-rgb, 74, 163, 255), .34);
  color: var(--text); border-radius: 999px; padding: 3px 6px 3px 10px;
  font-size: 11.5px; font-weight: 600;
}
.egr-chip.locked { padding-right: 10px; }
.egr-chip button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; font-family: inherit;
}
.egr-chip button:hover { color: var(--egr-ember); }

/* ── multi-select popover ── */
/* FLOATING SURFACES MUST BE OPAQUE.
   `background: var(--panel)` with no fallback resolves to an INVALID value
   whenever the token layer is absent — and an invalid background computes to
   transparent, not to "the previous value". The result is a popover you can
   read the report through, which is unusable over a dense grid. `Canvas` is
   the CSS system canvas colour: it follows `color-scheme`, so the guard is
   dark in dark mode and light in light mode rather than a hard-coded hex that
   would be wrong in exactly one theme. */
.egr-pop {
  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0;
  width: min(340px, 92vw);
  background: var(--panel, Canvas); border: 1px solid var(--border, currentColor);
  border-radius: 10px; box-shadow: 0 14px 38px rgba(0, 0, 0, .34);
  overflow: hidden;
}
.egr-pop-h {
  display: flex; align-items: center; gap: 6px; padding: 8px;
  border-bottom: 1px solid var(--border);
}
.egr-pop-q {
  flex: 1 1 auto; min-width: 0;
  background: var(--panel2, var(--panel)); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 8px; font-size: 12px; font-family: inherit;
}
.egr-pop-acts { display: flex; gap: 4px; }
.egr-pop-acts button {
  border: 1px solid var(--border); background: var(--panel2, var(--panel));
  color: var(--muted); border-radius: 6px; padding: 4px 8px;
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.egr-pop-acts button:hover { color: var(--text); border-color: rgba(var(--accent-rgb, 74, 163, 255), .6); }
.egr-pop-list { max-height: 264px; overflow-y: auto; overflow-x: hidden; }
.egr-pop-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  cursor: pointer; font-size: 12.5px; color: var(--text);
}
.egr-pop-row:hover { background: rgba(var(--accent-rgb, 74, 163, 255), .09); }
.egr-pop-row input { accent-color: rgb(var(--accent-rgb, 74, 163, 255)); flex: 0 0 auto; }
.egr-pop-lab { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egr-pop-meta { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.egr-pop-empty { padding: 16px 12px; font-size: 12px; color: var(--muted); text-align: center; }
.egr-pop-empty.bad { color: var(--egr-ember); }
.egr-pop-spin {
  display: inline-block; width: 12px; height: 12px; margin-right: 7px;
  border-radius: 50%; border: 2px solid var(--border);
  border-top-color: rgb(var(--accent-rgb, 74, 163, 255));
  animation: egr-spin .8s linear infinite; vertical-align: -2px;
}
.egr-pop-retry {
  display: block; margin: 8px auto 0; border: 1px solid var(--border);
  background: var(--panel2, var(--panel)); color: var(--text);
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.egr-pop-more {
  padding: 8px 10px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted); line-height: 1.5;
}
.egr-pop-more button {
  display: block; margin-top: 5px; border: 1px solid var(--border);
  background: var(--panel2, var(--panel)); color: var(--text);
  border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}

/* ═══════════════════════════ results ═══════════════════════════ */

.egr-scope {
  font-size: 11.5px; color: var(--muted); margin-bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
}
.egr-scope b { color: var(--text); }
.egr-scope-warn {
  color: var(--egr-amber); background: rgba(217, 154, 31, .12);
  border: 1px solid rgba(217, 154, 31, .3); border-radius: 6px;
  padding: 3px 8px; font-weight: 600;
}

.egr-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 9px; margin-bottom: 16px;
}
.egr-kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px;
}
.egr-kpi-l {
  font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.egr-kpi-v { font-size: 23px; font-weight: 800; line-height: 1.2; margin-top: 3px; }

.egr-charts { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
.egr-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--egr-radius); padding: 14px 16px 16px; margin-bottom: 14px;
}
.egr-card-h { margin-bottom: 10px; position: relative; }
.egr-card-h h3 { margin: 0; font-size: 14px; color: var(--text); letter-spacing: .01em; }
.egr-card-h p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; max-width: 78ch; }
.egr-split { position: absolute; top: 0; right: 0; display: flex; gap: 3px; }
.egr-canvas { position: relative; height: 300px; }
.egr-canvas canvas { width: 100% !important; height: 100% !important; }
.egr-canvas.tall { height: 340px; }

/* Wide charts get more room once there is space for it to matter. */
@media (min-width: 1100px) { .egr-card.wide .egr-canvas { height: 330px; } }
@media (min-width: 1100px) { .egr-card.wide .egr-canvas.tall { height: 380px; } }

/* ── egr-5 chart toolbar (value labels + combined view) ─────────────────
   Sits above the chart cards, once per charts section — a global reading
   preference, not a per-card control, so it never repeats three times. */
.egr-charts-toolbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: -2px 0 2px;
}

/* ── egr-5 pill toggle switch ── real switch semantics (native checkbox,
   visually a track+knob) so it stays keyboard- and screen-reader-operable
   without any JS beyond the plain `change` handler already wired. */
.egr-vswitch {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer;
  user-select: none;
}
.egr-vswitch input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.egr-vswitch-track {
  position: relative; flex: none; width: 34px; height: 19px;
  border-radius: 999px; background: var(--panel2, var(--border));
  border: 1px solid var(--border);
  transition: background-color .15s, border-color .15s;
}
.egr-vswitch-knob {
  position: absolute; top: 1px; left: 1px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--muted);
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), background-color .15s;
}
.egr-vswitch input:checked + .egr-vswitch-track {
  background: rgb(var(--accent-rgb, 74, 163, 255));
  border-color: rgb(var(--accent-rgb, 74, 163, 255));
}
.egr-vswitch input:checked + .egr-vswitch-track .egr-vswitch-knob {
  transform: translateX(15px); background: #fff;
}
.egr-vswitch input:focus-visible + .egr-vswitch-track {
  outline: 2px solid rgb(var(--accent-rgb, 74, 163, 255)); outline-offset: 2px;
}
.egr-vswitch:hover .egr-vswitch-track { border-color: rgba(var(--accent-rgb, 74, 163, 255), .6); }

/* ── egr-5 total badges — "on top of the graphing" summary chips ── */
.egr-chart-totals {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 9px 0 2px;
}
.egr-chart-totals span {
  font-size: 11px; color: var(--muted); letter-spacing: .01em;
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--panel2, var(--panel)); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 11px 3px 10px;
}
.egr-chart-totals span b { color: var(--text); font-size: 12.5px; font-weight: 800; }

/* ── table ── */
.egr-tablewrap {
  overflow-x: auto; overflow-y: auto; max-height: 480px;
  border: 1px solid var(--border); border-radius: 9px;
}
.egr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.egr-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel2, var(--panel)); color: var(--muted);
  text-align: left; padding: 8px 11px; white-space: nowrap;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 2px solid var(--border);
}
.egr-table td {
  padding: 6px 11px; color: var(--text);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.egr-table tbody tr:hover td { background: rgba(var(--accent-rgb, 74, 163, 255), .07); }

/* ── grid pager (egr-3) ── */
.egr-card-h-grid {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
}
.egr-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.egr-pgsize {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.egr-pg-info { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.egr-pg-nav { display: inline-flex; align-items: center; gap: 3px; }
.egr-pg-btn {
  min-width: 26px; height: 26px; display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel2, var(--panel)); color: var(--text);
  font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.egr-pg-btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb, 74, 163, 255), .6); }
.egr-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.egr-pg-cur { font-size: 11.5px; color: var(--text); font-weight: 600; padding: 0 6px; white-space: nowrap; }

/* ── export bar ── */
.egr-exports {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--egr-radius); padding: 13px 16px;
}
.egr-exports-l { display: flex; flex-direction: column; gap: 2px; }
.egr-exports-t { font-size: 13px; font-weight: 700; color: var(--text); }
.egr-exports-s { font-size: 11.5px; color: var(--muted); }
.egr-exports-r { display: flex; gap: 7px; flex-wrap: wrap; }

/* ═══════════════════════ states ═══════════════════════ */

.egr-empty {
  background: var(--panel); border: 1px dashed var(--border);
  border-radius: var(--egr-radius); padding: 42px 24px; text-align: center;
}
.egr-empty.bad { border-color: rgba(210, 85, 31, .5); }
.egr-empty-ico { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.egr-empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.egr-empty p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.egr-empty-hint { margin-top: 6px !important; opacity: .8; }

.egr-loading {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--egr-radius); padding: 46px 24px; text-align: center;
}
.egr-loading p { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.egr-spin {
  width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: rgb(var(--accent-rgb, 74, 163, 255));
  animation: egr-spin .8s linear infinite;
}
@keyframes egr-spin { to { transform: rotate(360deg); } }

.egr-skel { display: flex; flex-direction: column; gap: 12px; }
.egr-skel-bar {
  height: 26px; border-radius: 9px;
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel2, var(--border)) 50%, var(--panel) 75%);
  background-size: 200% 100%; animation: egr-shim 1.35s ease-in-out infinite;
}
@keyframes egr-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Respect a reduced-motion preference — the spinner and shimmer are
   decorative, and a persistent animation is a genuine accessibility problem
   for vestibular sensitivity. */
@media (prefers-reduced-motion: reduce) {
  .egr-spin { animation: none; border-top-color: rgb(var(--accent-rgb, 74, 163, 255)); }
  .egr-skel-bar { animation: none; }
  .egr-btn, .egr-run, .egr-tg, .egr-select, .egr-input { transition: none; }
}

.egr-blocked {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--egr-radius); padding: 54px 24px; text-align: center;
}
.egr-blocked-icon { font-size: 32px; margin-bottom: 12px; }
.egr-blocked h2 { margin: 0 0 8px; font-size: 17px; color: var(--text); }
.egr-blocked p { margin: 0 auto; max-width: 54ch; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.egr-toast {
  background: rgba(18, 160, 111, .12); border: 1px solid rgba(18, 160, 111, .4);
  color: var(--text); border-radius: 9px; padding: 9px 13px;
  font-size: 12.5px; margin-bottom: 14px;
}
.egr-toast.bad { background: rgba(210, 85, 31, .12); border-color: rgba(210, 85, 31, .45); }
.egr-bad { color: var(--egr-ember); }

/* ═══════════════════════ modals (BODY-LEVEL PORTAL, egr-4) ═══════════════════════ */

/* THE OVERLAY LAYER LIVES ON <body>, NOT INSIDE #main.
   egr-3 rendered it inside the routed page and MACE reported the e-mail
   automation dialog still refusing to close. Three separate mechanisms make
   that placement wrong, and any ONE of them produces exactly that symptom:

     1. STACKING — `#main` is a grid cell competing with the app's own FIXED
        chrome. `.quicklinks-bar` is `z-index: 2000`; this layer was 900, which
        is why the bottom bar stayed BRIGHT through the backdrop in the bug
        report. Fixed furniture overlapping the dialog then swallows the
        pointer: the X takes focus on mousedown and never receives a click.
        No local z-index can win that — the COMPETITOR is the ancestor.
     2. CONTAINMENT — `.main.card.pad` is `overflow:auto`, and the moment any
        ancestor carries `transform` / `filter` / `backdrop-filter` /
        `contain`, it becomes the containing block for `position:fixed`: the
        dialog centres inside the PANEL and is clipped by its scroll box.
     3. LIFETIME — markup inside `root.innerHTML` belongs to whoever writes
        `#main` last. One stray repaint and a closed dialog is back, or a live
        dialog's wired nodes are replaced by unwired clones.

   On <body> none of the three can reach it.

   THE ALTITUDE — read this before ever touching the number below.
   egr-4 (2026-08-08) picked 100000 believing that was the app's modal
   ceiling (`.attendance-modal`). It was true then; it stopped being true as
   soon as OTHER features adopted the tier `styles.css`'s own "Global modal
   stack safety" rule actually promotes `.attendance-modal.open` to —
   2147483000, the same altitude elevate_rights.css, wiki_workspace.css and
   process_mapping.css all converged on independently as "above every normal
   page, below the PIN gate". A portal left behind at 100000 is 21474 TIMES
   lower than that tier: any one of those systems leaving so much as an
   inert, zero-opacity node in the DOM (not even visibly on top — a ghost
   instance, same bug class as [[studio-module-reachability]]) silently wins
   every pointer event over this dialog, and the click never reaches the
   button underneath it. That is the "hindi mapindot ang mga buttons" report
   MACE filed 2026-08-18 — the dialog paints correctly (nothing ranks above
   it VISUALLY in the working case), but ranks below the app's real ceiling
   the moment one of those systems is present. Matching the tier those
   sibling systems already settled on, instead of the number that was true
   only at egr-4's original writing, is what makes this permanent rather
   than the next reset of the same bug. Stay deliberately BELOW the PIN gate
   (`#mumsSecPinOverlay`, 2147483200) — that one must keep the power to cover
   literally everything, including this portal. */
#egrPortal { position: relative; z-index: 2147483000; }
.egr-portal-wrap { padding: 0; }

.egr-modal-back {
  position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(4, 7, 14, .62);
  display: grid; place-items: center; padding: 20px;
  backdrop-filter: blur(2px);
  /* The layer is its OWN containing block and paint boundary, so the dialog
     inside it can never be clipped by anything the page does. */
  contain: layout paint;
}
.egr-modal {
  width: min(520px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  /* Opaque, for the same reason as .egr-pop above — see that comment for why
     the fallback is `Canvas` and not a hex. */
  background: var(--panel, Canvas); border: 1px solid var(--border, currentColor);
  border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .48);
}
.egr-modal.wide { width: min(660px, 96vw); }
.egr-modal.xwide { width: min(920px, 97vw); max-height: 92vh; }

/* The close affordances must be unmissable AND un-overlappable: a generous hit
   box, its own stacking context above the dialog body. A 22px glyph with no
   padding was a 14×22 target that a 1px overlap could steal. */
.egr-modal-h .egr-x {
  position: relative; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; font-size: 20px; flex: 0 0 auto;
}
.egr-modal-h .egr-x:hover { background: rgba(var(--accent-rgb, 74, 163, 255), .14); color: var(--text); }
.egr-modal-f .egr-btn { position: relative; z-index: 2; }
.egr-modal-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.egr-modal-h h3 { margin: 0; font-size: 15px; color: var(--text); }
.egr-x {
  border: 0; background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; font-family: inherit;
}
.egr-x:hover { color: var(--text); }
.egr-modal-b { padding: 16px; overflow-y: auto; }
.egr-modal-p { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 8px 0 0; }
.egr-modal-f {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.egr-spacer { flex: 1 1 auto; }

.egr-sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.egr-sharelist {
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 9px;
}

.egr-modal-sub { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.egr-modal-sub b { color: var(--text); }

/* Section rule inside modals — one visual grammar for Cadence / Recipients /
   Content and the export modal's Format / Rows / Preview. */
.egr-sec {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  margin: 16px 0 8px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.egr-modal-b .egr-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── schedule modal v2 (egr-3) ── */
.egr-freq { margin-bottom: 12px; flex-wrap: wrap; }
.egr-nextsend {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 14px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 11px;
  background: rgba(var(--accent-rgb, 74, 163, 255), .08);
  border: 1px solid rgba(var(--accent-rgb, 74, 163, 255), .28);
  border-radius: 9px; font-size: 11.5px; color: var(--muted);
}
.egr-nextsend-v b { color: var(--text); }

.egr-chipfield { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.egr-chipk {
  flex: 0 0 38px; text-align: center; margin-top: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 6px; padding: 3px 0;
  color: var(--text); background: var(--panel2, var(--panel));
  border: 1px solid var(--border);
}
.egr-chipk.k-to { border-color: rgba(var(--accent-rgb, 74, 163, 255), .5); }

.egr-chips {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border: 1px solid var(--border); border-radius: 9px;
  padding: 6px 8px; background: var(--panel2, var(--panel));
}
.egr-chips:focus-within {
  border-color: rgba(var(--accent-rgb, 74, 163, 255), .85);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 74, 163, 255), .18);
}
.egr-chipin {
  flex: 1 1 190px; min-width: 150px;
  border: 0; background: transparent; color: var(--text);
  font-size: 12.5px; font-family: inherit; padding: 3px 2px;
}
.egr-chipin:focus { outline: none; }

/* ── subject prefix (egr-4) ── */
.egr-subjrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.egr-subjin { flex: 0 1 210px; width: auto; font-variant-numeric: tabular-nums; }
.egr-subjhint { font-size: 11px; color: var(--muted); }
.egr-subjhint b { color: var(--text); font-weight: 700; }
.egr-subjprev {
  display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
  padding: 8px 11px; border-radius: 8px;
  background: var(--panel2, var(--panel)); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--text); line-height: 1.5;
  overflow-wrap: anywhere;
}
.egr-subjprev-k {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* ── e-mail preview viewer (egr-4) ── */
.egr-pv-head {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel2, var(--panel));
}
.egr-pv-row { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.egr-pv-k {
  flex: 0 0 52px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px;
}
.egr-pv-v { flex: 1 1 auto; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.egr-pv-subj { font-weight: 700; }
.egr-pv-none { color: var(--muted); font-style: italic; }
.egr-pv-att {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--accent-rgb, 74, 163, 255), .12);
  border: 1px solid rgba(var(--accent-rgb, 74, 163, 255), .3);
  border-radius: 6px; padding: 1px 7px; margin: 0 3px 3px 0; font-size: 11px;
}
.egr-pv-att i { color: var(--muted); font-style: normal; }
/* The mail body is UNTRUSTED-ish, server-generated HTML in a sandboxed frame;
   it brings its own light surface, so the frame gets a neutral mat rather than
   inheriting page tokens that would fight it. */
.egr-pv-frame {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: #f4f5f8;
}
.egr-pv-iframe { display: block; width: 100%; height: 46vh; min-height: 260px; border: 0; }
@media (max-width: 900px) { .egr-pv-iframe { height: 40vh; } }

/* ── export preview modal (egr-3) ── */
.egr-exp-fmt { flex-wrap: wrap; }
.egr-exp-fmt .egr-tg { display: inline-flex; align-items: center; gap: 6px; }
.egr-exp-scope {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; margin-bottom: 7px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.egr-exp-scope input { grid-row: span 2; accent-color: rgb(var(--accent-rgb, 74, 163, 255)); }
.egr-exp-scope.on {
  border-color: rgba(var(--accent-rgb, 74, 163, 255), .55);
  background: rgba(var(--accent-rgb, 74, 163, 255), .07);
}
.egr-exp-scope-t { font-size: 12.5px; font-weight: 700; color: var(--text); }
.egr-exp-scope-s { font-size: 11px; color: var(--muted); grid-column: 2; }
.egr-exp-note {
  margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.55;
  padding: 8px 11px; border: 1px dashed var(--border); border-radius: 8px;
}
.egr-exp-prev { max-height: 200px; }
.egr-exp-prev .egr-table td, .egr-exp-prev .egr-table th { padding: 5px 9px; }
.egr-exp-more { font-style: italic; color: var(--muted) !important; }
.egr-exp-count { font-size: 11.5px; color: var(--muted); }

.egr-switch {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.egr-switch input { accent-color: rgb(var(--accent-rgb, 74, 163, 255)); }

/* ═══════════════════════ responsive ═══════════════════════ */

@media (max-width: 900px) {
  .egr-head { flex-direction: column; align-items: stretch; }
  .egr-head-r { flex-direction: column; align-items: stretch; }
  .egr-field-pick .egr-select { min-width: 0; }
  .egr-canvas { height: 250px; }
}
@media (max-width: 620px) {
  .egr-facets { grid-template-columns: 1fr 1fr; }
  .egr-kpis { grid-template-columns: 1fr 1fr; }
  .egr-exports { flex-direction: column; align-items: stretch; }
  .egr-exports-r { justify-content: stretch; }
  .egr-exports-r .egr-btn { flex: 1 1 auto; justify-content: center; }
  .egr-pop { width: min(300px, 88vw); left: auto; right: 0; }
  .egr-chipfield { flex-direction: column; gap: 4px; }
  .egr-chipk { flex: none; width: 44px; margin-top: 0; }
  .egr-card-h-grid { flex-direction: column; align-items: stretch; }
}