/* ══════════════════════════════════════════════════════════════════════
   executive-brief.css — the full Executive Results Brief board report
   (executive-brief.html). Reads like a regional-meeting outcome report, not a
   daily operations screen. Layered on styles.css. Prefix: ebf- (full) and a
   few shared eb- classes (buttons, metric inner spans) used by the controller.
   ══════════════════════════════════════════════════════════════════════ */

/* shared button + flash (also used in the index module, redefined here so the
   standalone page doesn't depend on index.html's inline styles) */
.eb-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default, #cbd5e1); background: #fff; color: var(--text-secondary, #475569); font: inherit; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
.eb-btn:hover { background: var(--slate-50, #f8fafc); border-color: var(--accent-300, #93c5fd); }
.eb-btn-primary { background: var(--accent-600, #2563eb); border-color: var(--accent-600, #2563eb); color: #fff; }
.eb-btn-primary:hover { background: var(--accent-700, #1d4ed8); border-color: var(--accent-700, #1d4ed8); }
.eb-note-flash { font-size: 11.5px; color: #15803d; min-height: 14px; }
.ebf-topbtn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* metric inner spans (shared with the module's metricCardHtml) */
.eb-metric-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #94a3b8); }
.eb-metric-value { font-weight: 800; color: var(--text-primary, #0f172a); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.eb-metric-value.good { color: #15803d; } .eb-metric-value.info { color: #1d4ed8; }
.eb-metric-sub { font-size: 11.5px; color: var(--text-tertiary, #64748b); }

/* ── report shell ─────────────────────────────────────────────────────── */
.ebf-report { width: 100%; max-width: 1040px; margin: 8px auto 48px; padding: 0 var(--space-8, 32px); min-width: 0; box-sizing: border-box; }
/* allow children to shrink below intrinsic content (the trend SVG is 520px
   wide by viewBox — without these it would force horizontal page overflow). */
.ebf-report, .ebf-two, .ebf-card, .ebf-metrics, .ebf-trend { min-width: 0; }
.ebf-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 12px 0 18px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.ebf-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-600, #2563eb); }
.ebf-title { font-size: 26px; font-weight: 800; color: var(--text-primary, #0f172a); letter-spacing: -0.02em; margin: 4px 0 0; }
.ebf-period { font-size: 13px; color: var(--text-tertiary, #64748b); margin: 5px 0 0; font-variant-numeric: tabular-nums; }
.ebf-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ebf-control-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* facility filter (the marked area — under the export buttons) */
.ebf-filter-row { display: inline-flex; align-items: center; gap: 8px; }
.ebf-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #94a3b8); white-space: nowrap; }
.ebf-filter { position: relative; }
.ebf-filter .ta-multi-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px;
  background: #fff; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary, #0f172a); cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color .12s, background .12s, box-shadow .18s;
}
.ebf-filter .ta-multi-trigger:hover { border-color: var(--border-default, #cbd5e1); background: var(--slate-50, #f8fafc); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); }
.ebf-filter.is-open .ta-multi-trigger { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06); }
.ebf-filter .ta-multi-icon, .ebf-filter .ta-multi-caret { color: var(--text-tertiary, #64748b); flex-shrink: 0; }
/* the trigger is right-aligned in the header, so open the menu right-anchored
   (otherwise the 280px menu overflows the viewport on the right). */
.ebf-filter .ta-multi-menu { left: auto; right: 0; }

/* scope chip under the title */
.ebf-scope { display: inline-flex; align-items: center; margin-top: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-700, #1d4ed8); background: #eff6ff; border: 1px solid #dbeafe; border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.ebf-scope:empty { display: none; }

.ebf-story { font-size: 16px; line-height: 1.55; color: var(--text-secondary, #334155); font-weight: 600; margin: 18px 0 4px; }

/* ── hero metrics ─────────────────────────────────────────────────────── */
.ebf-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 22px; }
.ebf-metric { background: #fff; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }
.ebf-metric .eb-metric-value { font-size: 28px; margin: 6px 0 3px; display: block; }

/* ── cards / two-column ───────────────────────────────────────────────── */
.ebf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ebf-card { background: #fff; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); padding: 16px 18px; margin-bottom: 16px; }
.ebf-two .ebf-card { margin-bottom: 0; }
.ebf-card-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #475569); margin-bottom: 12px; }
.ebf-card-note { font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: 8px; }

/* ── trend chart placeholder ───────────────────────────────────────────
   The SVG is absolutely positioned inside an aspect-ratio box so its 520px
   viewBox never contributes intrinsic width to the flex layout (which would
   force horizontal page overflow on narrow screens). 150/520 ≈ 29%. */
.ebf-trend { position: relative; width: 100%; min-width: 0; padding-top: 29%; }
.ebf-trend svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }

/* ── efficiency lens ──────────────────────────────────────────────────── */
.ebf-eff-list { display: flex; flex-direction: column; gap: 4px; }
.ebf-eff { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--slate-100, #f1f5f9); }
.ebf-eff:last-child { border-bottom: none; }
.ebf-eff-k { font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #475569); }
.ebf-eff-v { font-size: 15px; font-weight: 800; color: var(--text-primary, #0f172a); font-variant-numeric: tabular-nums; }
.ebf-eff-v small { font-size: 11px; font-weight: 500; color: var(--text-muted, #94a3b8); }

/* ── role / position table ────────────────────────────────────────────── */
.ebf-table { font-variant-numeric: tabular-nums; overflow-x: auto; }
.ebf-table-head, .ebf-table-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 0.7fr 0.8fr 1.8fr; gap: 12px; align-items: center; padding: 9px 4px; }
.ebf-table-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary, #64748b); font-weight: 700; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.ebf-table-row { font-size: 12.5px; color: var(--text-secondary, #475569); border-bottom: 1px solid var(--slate-100, #f1f5f9); }
.ebf-table-row:last-child { border-bottom: none; }
.ebf-num { text-align: right; }
.ebf-strong { font-weight: 700; color: var(--text-primary, #0f172a); }
.ebf-down { color: #15803d; font-weight: 700; }
.ebf-saved { color: #15803d; font-weight: 700; }
.ebf-note-cell { color: var(--text-tertiary, #64748b); }

/* ── department drivers ───────────────────────────────────────────────── */
.ebf-dept-list { display: flex; flex-direction: column; gap: 10px; }
.ebf-dept { display: grid; grid-template-columns: 1.1fr 2fr 1.3fr; gap: 12px; align-items: center; font-size: 12.5px; }
.ebf-dept-name { font-weight: 600; color: var(--text-primary, #0f172a); }
.ebf-dept-bar { height: 8px; border-radius: 4px; background: var(--slate-100, #f1f5f9); overflow: hidden; }
.ebf-dept-bar i { display: block; height: 100%; background: #2563eb; border-radius: 4px; }
.ebf-dept-val { text-align: right; color: var(--text-secondary, #475569); font-variant-numeric: tabular-nums; }

/* ── narrative takeaways ──────────────────────────────────────────────── */
.ebf-takes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ebf-take { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--text-secondary, #475569); }
.ebf-take-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563eb; margin-top: 6px; flex-shrink: 0; }

.ebf-foot { margin-top: 22px; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .ebf-metrics { grid-template-columns: repeat(2, 1fr); }
  .ebf-two { grid-template-columns: 1fr; }
  .ebf-table-head, .ebf-table-row { grid-template-columns: 1fr 1.2fr 0.9fr 0.6fr 0.7fr; min-width: 480px; }
  .ebf-note-cell { display: none; }
}
@media (max-width: 560px) {
  .ebf-metrics { grid-template-columns: 1fr; }
  .ebf-report { padding-left: var(--space-5, 20px); padding-right: var(--space-5, 20px); }
  .ebf-filter .ta-multi-menu { min-width: 0; max-width: calc(100vw - 32px); }
}

/* ── print / Save PDF ─────────────────────────────────────────────────── */
@media print {
  .ebf-controls, .ebf-foot { display: none !important; }
  .ebf-report { max-width: none; margin: 0; padding: 0 12px; }
  body { background: #fff; }
  .ebf-card, .ebf-metric { box-shadow: none; break-inside: avoid; }
}