/* ============================================================
   ibcs-d3 — Styles for all HTML components
   Oracle APEX 26.1+ / ibcs-d3 chart library
   IBCS Version 2.0 / ISO 24896
   ============================================================ */

/* ── Chart container ────────────────────────────────────────── */

.ibcs-d3-chart-container {
  font-family: Calibri, Arial, Helvetica, sans-serif;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
}

/* SVG fills full container width, height determined by attribute */
.ibcs-d3 {
  display: block;
  width: 100%;
  overflow: visible;
}

/* ── Title block (UN 2.2) ───────────────────────────────────── */

.ibcs-d3-title-block {
  padding: 0 0 2px;
  line-height: 1.3;
}

.ibcs-d3-message {
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: 4px;
}

.ibcs-d3-measure {
  font-weight: bold;
  font-size: 11pt;
  color: #404040;
}

.ibcs-d3-unit {
  font-weight: normal;
  font-size: 11pt;
  color: #404040;
}

.ibcs-d3-subtitle {
  display: block;
  font-size: 9pt;
  color: #808080;
  margin-top: 1px;
}

/* ── Loading / Empty states ─────────────────────────────────── */

.ibcs-d3-loading,
.ibcs-d3-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  color: #808080;
  font-size: 9pt;
  font-family: Calibri, Arial, sans-serif;
  font-style: italic;
}

/* ── Notice above a chart (rows cut at the limit) ─────────── */

.ibcs-d3-notice {
  padding: 4px 8px;
  margin-bottom: 4px;
  color: #6b4e00;
  background: #fff6d6;
  border-left: 3px solid #d9a400;
  font-size: 9pt;
  font-family: Calibri, Arial, sans-serif;
}

/* ── Hidden from the eye, read by a screen reader (data table) ── */

.ibcs-d3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A data point reached by the keyboard shows where the focus is */
.ibcs-d3-chart-container [role="graphics-symbol"]:focus {
  outline: 2px solid #1a73e8;
  outline-offset: 1px;
}

/* ── Compliance badge (CH 4.1 warning) ──────────────────────── */

.ibcs-d3-compliance-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: Calibri, Arial, sans-serif;
  font-size: 7pt;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: help;
  z-index: 10;
}

.ibcs-d3-ch41-badge {
  background: #E8883A;
  color: #ffffff;
}

/* ── Download bar ───────────────────────────────────────────── */

.ibcs-d3-download-bar {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 3px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
}

.ibcs-d3-chart-container:hover .ibcs-d3-download-bar {
  opacity: 1;
}

.ibcs-d3-btn-download {
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 7pt;
  font-weight: normal;
  padding: 2px 8px;
  border: 1px solid #C0C0C0;
  border-radius: 3px;
  background: #ffffff;
  color: #404040;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}

.ibcs-d3-btn-download:hover {
  background: #f0f0f0;
  border-color: #808080;
}

/* ── KPI Card ───────────────────────────────────────────────── */

.ibcs-d3-kpi {
  padding: 6px 4px 16px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}

/* Hero AC value */
.ibcs-d3-kpi-ac {
  font-size: 2.6rem;
  font-weight: 700;
  color: #404040;
  line-height: 1.1;
  margin: 4px 0 12px;
  letter-spacing: -0.01em;
}

/* Primary delta — colored chip with background */
.ibcs-d3-kpi-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
}

.ibcs-d3-kpi-primary.ibcs-d3-good {
  background: rgba(112, 173, 71, 0.13);
  color: #3d7a1e;
}

.ibcs-d3-kpi-primary.ibcs-d3-bad {
  background: rgba(192, 0, 0, 0.09);
  color: #C00000;
}

.ibcs-d3-kpi-primary .ibcs-d3-kpi-abs {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}

/* Secondary deltas — outlined chips */
.ibcs-d3-kpi-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ibcs-d3-kpi-sec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid currentColor;
  line-height: 1.3;
}

.ibcs-d3-kpi-sec.ibcs-d3-good { color: #3d7a1e; border-color: rgba(112,173,71,0.45); }
.ibcs-d3-kpi-sec.ibcs-d3-bad  { color: #C00000; border-color: rgba(192,0,0,0.35); }

.ibcs-d3-kpi-sec .ibcs-d3-kpi-ref {
  font-weight: 400;
  opacity: 0.75;
}

/* ── Scenario swatches (UN 3.2) ─────────────────────────────── */

.ibcs-d3-swatch {
  display: inline-block;
  width: 11px;
  height: 7px;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: 1px;
}

.ibcs-d3-swatch-py { background: #808080; }

.ibcs-d3-swatch-pl {
  background: white;
  border: 1.5px solid #808080;
  box-sizing: border-box;
}

.ibcs-d3-swatch-fc {
  background: repeating-linear-gradient(
    45deg, #404040 0px, #404040 1px, white 1px, white 3px
  );
  border: 1px solid #404040;
  box-sizing: border-box;
}

/* ── Trellis / Small multiples ──────────────────────────────── */

.ibcs-d3-trellis-grid {
  width: 100%;
  display: grid;
  gap: 16px;
}

.ibcs-d3-trellis-cell {
  min-width: 0;
}

.ibcs-d3-trellis-label {
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #404040;
  padding: 0 0 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tooltip ────────────────────────────────────────────────── */

#ibcs-d3-tooltip-global {
  position: fixed;
  background: rgba(64, 64, 64, 0.92);
  color: #ffffff;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 8.5pt;
  padding: 5px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 99999;
  white-space: nowrap;
  max-width: 280px;
}

/* ── Composite SVG ──────────────────────────────────────────── */

.ibcs-d3-composite {
  display: block;
  width: 100%;
  overflow: visible;
}

/* Scoped per-chart tooltip (UN 2.x).
 * position:fixed — uses event.clientX/Y (viewport-relative).
 * The element lives inside the chart container DOM for isolation,
 * but positions relative to the viewport (not the container). */
.ibcs-d3-chart-container { position: relative; }
.ibcs-d3-tooltip {
  position: fixed;
  background: rgba(64,64,64,0.92);
  color: #fff;
  font-size: 8.5pt;
  padding: 5px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  display: none;
}

/* ── IBCS Color Tokens ──────────────────────────────────────────────────────
 * Override these CSS custom properties to change chart colors globally.
 * Example for dark mode:
 *   .dark-mode .ibcs-d3-chart-container { --ibcs-ac: #C0C0C0; }
 */
:root {
  --ibcs-ac:            #404040;   /* Actual — dark gray */
  --ibcs-py:            #808080;   /* Prior Year — medium gray */
  --ibcs-pl-fill:       #FFFFFF;   /* Plan/Budget — white fill */
  --ibcs-pl-stroke:     #404040;   /* Plan/Budget — dark border */
  --ibcs-fc:            #404040;   /* Forecast — same as AC (hatch via pattern) */
  --ibcs-variance-good: #70AD47;   /* Positive variance — green */
  --ibcs-variance-bad:  #C00000;   /* Negative variance — red */
  --ibcs-fc-var-good:   #70AD47;   /* FC positive variance */
  --ibcs-fc-var-bad:    #C00000;   /* FC negative variance */
  --ibcs-highlight:     #4472C4;   /* Difference marker % ellipse — blue */
  --ibcs-text-primary:  #404040;   /* Primary text and labels */
  --ibcs-text-secondary:#808080;   /* Secondary text (axis, tier labels) */
  --ibcs-total-bg:      #F0F0F0;   /* Result/total row background */
}

/* ── IBCS Table (EX 1.2) ────────────────────────────────────────────────────
 * Variance table with row-type hierarchy and optional column visibility.
 * Prefixed with ibcs-d3- to avoid collision with the SVG plugin classes.
 */

.ibcs-d3-table {
  border-collapse: collapse;
  width: 100%;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: var(--ibcs-text-primary, #404040);
}

.ibcs-d3-table th {
  text-align: right;
  padding: 2px 8px;
  border-bottom: 2px solid var(--ibcs-text-primary, #404040);
  font-weight: bold;
  white-space: nowrap;
}

.ibcs-d3-table th.ibcs-d3-col-label { text-align: left; min-width: 120px; }

.ibcs-d3-table td {
  text-align: right;
  padding: 2px 8px;
  border-bottom: 1px solid #E0E0E0;
  white-space: nowrap;
}

.ibcs-d3-table td.ibcs-d3-col-label { text-align: left; }

/* Row types — IBCS EX 1.2 */
.ibcs-d3-row-result > td {
  font-weight: bold;
  border-top: 1.5px solid var(--ibcs-text-primary, #404040);
  border-bottom: 2px solid var(--ibcs-text-primary, #404040);
}

.ibcs-d3-row-total > td {
  font-weight: bold;
  background: var(--ibcs-total-bg, #F0F0F0);
  border-top: 1px solid #C0C0C0;
  border-bottom: 1.5px solid var(--ibcs-text-primary, #404040);
}

.ibcs-d3-row-of_which > td,
.ibcs-d3-row-of-which > td {
  font-size: 8pt;
  color: var(--ibcs-text-secondary, #808080);
  border-bottom-color: transparent;
}

.ibcs-d3-row-percent_of > td,
.ibcs-d3-row-percent-of > td {
  font-size: 8pt;
  font-style: italic;
  color: var(--ibcs-text-secondary, #808080);
  border-bottom-color: transparent;
}

.ibcs-d3-row-remainder > td {
  border-top: 4px solid transparent;
}

.ibcs-d3-row-header > td {
  font-weight: bold;
  font-size: 8.5pt;
  background: #F0F0F0;
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Scenario column emphasis */
.ibcs-d3-col-ac   { font-weight: bold; }
.ibcs-d3-col-fc   { font-style: italic; }
.ibcs-d3-col-pct  { font-size: 8pt; }

/* Variance coloring */
.ibcs-d3-var-good { color: var(--ibcs-variance-good, #70AD47); }
.ibcs-d3-var-bad  { color: var(--ibcs-variance-bad,  #C00000); }
.ibcs-d3-var-null { color: #C0C0C0; }

/* ── Print / PDF support ────────────────────────────────────────────────────
 * When a chart's Print button is clicked, data-ibcs-print on body isolates
 * the target region. The SVG charts print as-is (vector quality).
 */
@media print {
  /* Hide all APEX UI elements */
  body > *:not([data-ibcs-print-host]) { display: none !important; }

  /* Show only the target chart container */
  body[data-ibcs-print] .ibcs-d3-chart-container:not([id]) { display: none !important; }

  /* Hide download bar in print */
  .ibcs-d3-download-bar { display: none !important; }

  /* SVG charts: remove fixed height, expand to full page */
  .ibcs-d3-chart-container svg { width: 100% !important; height: auto !important; }

  /* Ensure white background */
  .ibcs-d3-chart-container { background: white !important; }

  /* Page setup for landscape charts */
  @page { size: A4 landscape; margin: 1cm; }
}

/* ── Interaction: a click on a data point does something ───────────────── */
.ibcs-d3-chart-container.ibcs-d3-clickable svg.ibcs-d3 rect[class^="ibcs-bar-"],
.ibcs-d3-chart-container.ibcs-d3-clickable svg.ibcs-d3 [class^="ibcs-hit-"],
.ibcs-d3-chart-container.ibcs-d3-clickable svg.ibcs-d3 [class^="ibcs-marker-"] {
  cursor: pointer;
}