/* ============================================================
   Energroup shared modal system
   See documentation/modal-design-spec.md (LOCKED v1, 2026-06-27).

   Direction: "modern / slate" —
     · slate-blue accent (#3b82f6)
     · light-gray header over a soft muted body
     · bordered white section cards

   HOW IT WORKS
   ------------
   1. Design tokens live on :root.
   2. We override Bootstrap 5.3's own `--bs-modal-*` variables (on `.modal`,
      so they beat Bootstrap's defaults via source order) — this restyles
      EVERY Bootstrap modal app-wide with no markup changes.
   3. A few helper classes (.eg-modal-*, .eg-section) back the Jinja macros in
      templates/_modal_macros.html for fully-migrated modals.

   Loaded from base.html AFTER bootstrap.min.css.
   ============================================================ */

:root {
  /* ── Palette tokens (slate) ───────────────────────────────
     Now thin ALIASES over the canonical tokens in static/css/tokens.css.
     Same resolved values as before (zero visual change); kept as --eg-*
     names so the ~16 templates already using var(--eg-*) don't break.
     Prefer the canonical token names in new work. */
  --eg-accent:         var(--brand);          /* #3b82f6 */
  --eg-accent-hover:   var(--brand-hover);    /* #2563eb */
  --eg-accent-soft:    var(--brand-soft);     /* #eff6ff */
  --eg-surface:        var(--surface);        /* #ffffff */
  --eg-surface-muted:  var(--surface-muted);  /* #f8fafc */
  --eg-surface-header: var(--surface-header); /* #f1f5f9 */
  --eg-border:         var(--border);         /* #e2e8f0 */
  --eg-text:           var(--text);           /* #1e293b */
  --eg-text-muted:     var(--text-muted);     /* #64748b */
}

/* ── Bootstrap modal variable overrides (app-wide) ────────────
   These win over Bootstrap's `.modal { --bs-modal-*: ... }` block
   because this file loads after bootstrap.min.css.
   Modals with scoped `#id .modal-header {…}` rules keep their own look
   until migrated (ID specificity), which is intentional. */
.modal {
  --bs-modal-color:               var(--eg-text);
  --bs-modal-bg:                  var(--eg-surface-muted);
  --bs-modal-border-color:        var(--eg-border);
  --bs-modal-border-width:        1px;
  --bs-modal-border-radius:       12px;
  --bs-modal-box-shadow:          0 10px 40px rgba(0, 0, 0, .12);
  --bs-modal-header-border-color: var(--eg-border);
  --bs-modal-footer-border-color: var(--eg-border);
}

/* Light-gray header bar. (Bootstrap has no --bs-modal-header-bg variable,
   so this is set directly. No !important → utility headers like
   `.modal-header.bg-danger` / `.bg-primary` still win for intentional
   colored headers, e.g. destructive-confirm dialogs.) */
.modal-header {
  background: var(--eg-surface-header);
}

/* Primary buttons inside modals adopt the slate accent (scoped to modals so
   the rest of the app's buttons are untouched). Bootstrap buttons are driven
   by --bs-btn-* variables, so we just re-point them. */
.modal .btn-primary {
  --bs-btn-bg:                  var(--eg-accent);
  --bs-btn-border-color:        var(--eg-accent);
  --bs-btn-hover-bg:            var(--eg-accent-hover);
  --bs-btn-hover-border-color:  var(--eg-accent-hover);
  --bs-btn-active-bg:           var(--eg-accent-hover);
  --bs-btn-active-border-color: var(--eg-accent-hover);
  --bs-btn-disabled-bg:         var(--eg-accent);
  --bs-btn-disabled-border-color: var(--eg-accent);
}

/* ── Header layout helpers (back the modal_header macro) ─────── */
.eg-modal-header { align-items: flex-start; }

.eg-modal-header .eg-modal-titlewrap { min-width: 0; }   /* allow ellipsis */

.eg-modal-header .modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--eg-text);
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.eg-modal-header .modal-title .bi { color: var(--eg-accent); }

.eg-modal-subtitle {
  font-size: .82rem;
  color: var(--eg-text-muted);
  margin-top: .15rem;
  line-height: 1.3;
}
.eg-modal-subtitle .dot { color: var(--eg-border); margin: 0 .4rem; }

/* Action buttons + close, pinned top-right and vertically aligned to title */
.eg-modal-header .eg-modal-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
}

/* ── Section cards (group fields inside a modal body) ────────── */
.eg-section {
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.eg-section:last-child { margin-bottom: 0; }

.eg-section-title {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--eg-text-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .85rem;
}
.eg-section-title .bi { color: var(--eg-accent); font-size: .95rem; }