/* ============================================================
   GB Energy workspace — diagram export + navigator styles.

   Pair with /gb-workspace/redesign/diagram-export.js. Drop this
   stylesheet onto any workspace page that has `.module-diagram`
   blocks — per-diagram toolbars, the all-diagrams master toolbar,
   and the floating navigator pill all derive from these classes.

   Each CSS variable falls back to a sensible default so the file
   works on pages that haven't defined the LTDS-explainer red
   palette. Override locally by re-declaring:

     :root {
       --gbe-export-accent: #CC0000;
       --gbe-export-accent-soft: #FFEEEE;
       --gbe-export-accent-edge: #FFCCCC;
       --gbe-export-accent-deep: #990000;
       --gbe-export-surface: #FFFFFF;
       --gbe-export-surface-recessed: #FAFAFA;
       --gbe-export-border: #E5E5E5;
       --gbe-export-ink: #111111;
       --gbe-export-ink-muted: #444444;
       --gbe-export-ink-faint: #888888;
     }
   ============================================================ */

:root {
  --gbe-export-accent: var(--red, #CC0000);
  --gbe-export-accent-soft: var(--red-50, #FFEEEE);
  --gbe-export-accent-edge: var(--red-200, #FFCCCC);
  --gbe-export-accent-deep: var(--red-700, #990000);
  --gbe-export-surface: var(--surface, #FFFFFF);
  --gbe-export-surface-recessed: var(--surface-subtle, #FAFAFA);
  --gbe-export-border: var(--border, #E5E5E5);
  --gbe-export-ink: var(--text, #111111);
  --gbe-export-ink-muted: var(--text-tertiary, #444444);
  --gbe-export-ink-faint: var(--text-muted, #888888);
  --gbe-export-font: var(--font-sans, Arial, Helvetica, sans-serif);
}

/* ── Per-diagram / per-table toolbar (PNG, PowerPoint) ──────── */

.module-diagram { position: relative; }

/* Tables get wrapped at runtime in `.module-table` so the toolbar
   can absolute-position itself without disturbing flow. */
.module-table {
  position: relative;
  margin: 24px 0;
  /* Reserve a band for the absolutely-positioned export toolbar so it never
     overlays the first/last header cells of a wide table. */
  padding-top: 46px;
}

/* Toolbar sits ABOVE the diagram body, not overlaid on top of it.
   Position absolute used to hover the toolbar over the SVG, which
   covered diagram labels on narrow widths. Switching to a relative
   flex row keeps every export button outside the diagram box. */
.module-diagram-export {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px 0;
  z-index: 2;
}
.module-diagram-export__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--gbe-export-accent-edge);
  background: var(--gbe-export-accent-soft);
  color: var(--gbe-export-accent-deep);
  font-family: var(--gbe-export-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(204, 0, 0, 0.08);
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.module-diagram-export__btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--gbe-export-accent);
  flex: 0 0 auto;
}
.module-diagram-export__btn:hover,
.module-diagram-export__btn:focus-visible {
  border-color: var(--gbe-export-accent);
  color: #FFFFFF;
  background: var(--gbe-export-accent);
  box-shadow: 0 2px 6px rgba(204, 0, 0, 0.25);
  outline: none;
}
.module-diagram-export__btn:hover::before,
.module-diagram-export__btn:focus-visible::before {
  background: #FFFFFF;
}
.module-diagram-export__btn:active { transform: translateY(1px); }
.module-diagram-export__btn:disabled {
  cursor: progress;
  opacity: 0.6;
  transform: none;
}

/* The mobile override that used to switch the toolbar from absolute
   to static is no longer needed — the toolbar is relative at every
   viewport. */

/* ── Master toolbar (sits above the first diagram) ─────────── */

.module-diagrams-master {
  margin: 24px 0 32px;
  padding: 16px 20px;
  background: var(--gbe-export-surface-recessed);
  border: 1px solid var(--gbe-export-border);
  border-left: 3px solid var(--gbe-export-accent);
  border-radius: 0 12px 12px 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.module-diagrams-master__label {
  margin: 0;
  font-size: 14px;
  color: var(--gbe-export-ink-muted);
  flex: 1 1 280px;
  line-height: 1.5;
}
.module-diagrams-master__label strong {
  color: var(--gbe-export-ink);
  font-weight: 700;
}
.module-diagrams-master__buttons {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.module-diagrams-master__btn {
  padding: 8px 16px;
  font-size: 13px;
}

/* ── Carousel navigator pill ────────────────────────────────
   Reserved for `.diagram-carousel` containers (multiple diagrams
   swapped in place). Placement varies by modifier:
     .diagram-nav--inline → horizontal, beneath the carousel
   The legacy fixed-bottom-right placement was prototype-only and
   has been retired now that the navigator is carousel-scoped.
   ============================================================ */

.diagram-nav {
  background: var(--gbe-export-surface);
  border: 1px solid var(--gbe-export-border);
  border-radius: 999px;
  padding: 6px 10px 6px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  font-family: var(--gbe-export-font);
  font-size: 13px;
  max-width: min(420px, calc(100vw - 48px));
}
.diagram-nav--inline {
  margin: 16px auto 0;
  display: flex;
  width: fit-content;
}
.diagram-nav__btn {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gbe-export-border);
  background: var(--gbe-export-surface);
  color: var(--gbe-export-ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.diagram-nav__btn:hover:not(:disabled),
.diagram-nav__btn:focus-visible:not(:disabled) {
  border-color: var(--gbe-export-accent);
  background: var(--gbe-export-accent-soft);
  color: var(--gbe-export-accent-deep);
  outline: none;
}
.diagram-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.diagram-nav__counter {
  font-weight: 600;
  color: var(--gbe-export-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.diagram-nav__title {
  color: var(--gbe-export-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .diagram-nav { padding: 4px 8px 4px 4px; }
  .diagram-nav__title { display: none; }
  .diagram-nav__btn { width: 28px; height: 28px; font-size: 14px; }
  .diagram-nav__counter { font-size: 12px; }
}

@media print {
  .module-diagram-export,
  .module-diagrams-master,
  .diagram-nav { display: none; }
}