/*
 * reports.css — Report page styles
 * Linked only from studies/reports.html.erb via content_for :head.
 * Custom CSS only where Bootstrap utilities cannot do the job.
 */

/* ── fs-7 utility (13px) ─────────────────────────────────────────────
   Bootstrap ships fs-1 through fs-6. fs-7 is used throughout report
   tables in existing views but was never defined. 0.8125rem = 13px.  */
.fs-7 { font-size: .8125rem !important; }


/* ── KPI scorecard tiles ─────────────────────────────────────────────
   Left-aligned label / value / meta per design handoff spec.
   Sub-rem font sizes (.6rem, .65rem) are not in Bootstrap's scale.   */
.as-kpi {
  border-radius: .375rem;
  padding: .5rem .75rem;
  min-width: 0;
}

.as-kpi-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: .2rem;
}

.as-kpi-value {
  font-size: 1.2rem;
  font-family: var(--bs-font-monospace);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: .15rem;
}

.as-kpi-meta {
  font-size: .65rem;
  opacity: .65;
  line-height: 1.3;
}

.as-kpi--total {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}

.as-kpi--va {
  background: var(--bs-success-bg-subtle);
  border: 1px solid var(--bs-success-border-subtle);
}

.as-kpi--va .as-kpi-label,
.as-kpi--va .as-kpi-value {
  color: var(--bs-success-text-emphasis);
}

.as-kpi--req {
  background: var(--bs-warning-bg-subtle);
  border: 1px solid var(--bs-warning-border-subtle);
}

.as-kpi--req .as-kpi-label,
.as-kpi--req .as-kpi-value {
  color: var(--bs-warning-text-emphasis);
}

.as-kpi--nva {
  background: var(--bs-danger-bg-subtle);
  border: 1px solid var(--bs-danger-border-subtle);
}

.as-kpi--nva .as-kpi-label,
.as-kpi--nva .as-kpi-value {
  color: var(--bs-danger-text-emphasis);
}


/* ── Classification mix bar ──────────────────────────────────────────
   Three flex segments sized by inline width %. Bootstrap flex
   utilities require fixed widths, not proportional inline-style %.   */
.as-mix-bar {
  display: flex;
  height: 1.5rem;
  border-radius: .25rem;
  overflow: hidden;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.as-mix-bar__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  padding: 0 .3rem;
}

.as-mix-bar__va  { background: var(--bs-success); color: #fff; }
.as-mix-bar__req { background: var(--bs-warning);  color: var(--bs-dark); }
.as-mix-bar__nva { background: var(--bs-danger);   color: #fff; }


/* ── Takt comparison gauge bar ───────────────────────────────────────
   Fill width set via inline style. Marker absolutely positioned at
   the takt point (left: 100% = end of bar = takt value).            */
.as-takt-bar {
  position: relative;
  height: 1.25rem;
  background: var(--bs-secondary-bg);
  border-radius: .25rem;
  overflow: visible;
}

.as-takt-bar__fill {
  height: 100%;
  border-radius: .25rem;
  max-width: 100%;
}

.as-takt-bar__fill--ok   { background: var(--bs-success); }
.as-takt-bar__fill--over { background: var(--bs-danger); }

.as-takt-bar__marker {
  position: absolute;
  top: -.2rem;
  bottom: -.2rem;
  width: 2px;
  background: var(--bs-dark);
  border-radius: 1px;
  z-index: 2;
}

.as-takt-bar__marker::after {
  content: "";
  position: absolute;
  top: -.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--bs-dark);
}


/* ── Section divider with trailing rule ──────────────────────────────
   Eyebrow label + horizontal rule extending to the right.
   No Bootstrap utility produces a ::after pseudo-element rule.       */
.as-section-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.as-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bs-border-color);
}


/* ── Sticky first column on report tables ────────────────────────────
   Freeze-pane on the key (label) column while table scrolls right.
   Bootstrap's sticky-col utilities target the *last* column only.   */
.as-report-table .as-sticky-col {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 1;
  box-shadow: 2px 0 4px rgba(0, 0, 0, .05);
}

.as-report-table thead .as-sticky-col {
  background: var(--bs-table-bg, #f8f9fa);
}


/* ── Print layout ────────────────────────────────────────────────────
   Print-only header visible, charts hidden (don't scale to paper),
   cards borderless and break-safe.                                   */
@media print {
  .as-print-header { display: block !important; }

  canvas { display: none !important; }

  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .row { break-inside: avoid; }

  .as-kpi {
    background: #fff !important;
    border-width: 2px !important;
  }

  .as-mix-bar,
  .as-takt-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}