/* ===============================================================
   KPI Cards – strong, Bootstrap‑safe overrides
   Place this file in: assets/zz_kpi.css  (the zz_ prefix makes
   Dash/Flask serve it last so it wins over Bootstrap defaults)
================================================================= */

:root{
  /* Layout & motion */
  --kpi-radius:         var(--border-radius, 8px);
  --kpi-shadow:         0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.06);
  --kpi-shadow-hover:   0 6px 16px rgba(0,0,0,.14);
  --kpi-transition:     var(--transition-speed, .30s) var(--transition-ease, cubic-bezier(.4,0,.2,1));

  /* Surfaces & borders */
  --kpi-bg:             #fff;
  --kpi-border:         #e5e7eb;
  --kpi-border-hover:   var(--blue-600, #00509e);
  --kpi-focus-ring:     rgba(0,80,158,.45);

  /* Typography (neutral by default) */
  --kpi-title-font:     var(--brand-font, "Montserrat","Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  --kpi-text:           var(--text-color, #0f172a);
  --kpi-subtext:        var(--gray-700, #3f3f3f);

  /* Semantics for deltas & data */
  --kpi-positive:       var(--green-500, #009e8f);
  --kpi-negative:       var(--red-500,   #d55e00);
  --kpi-neutral:        var(--orange-500,#e57c00);

  /* Micro‑viz heights */
  --kpi-bullet-h:       56px;
  --kpi-spark-h:        44px;
}

/* ---------------------------------------------------------------
   Card shell
---------------------------------------------------------------- */
div.card.kpi-tile{
  border-radius: var(--kpi-radius) !important;
  border: 1px solid var(--kpi-border) !important;
  background: var(--kpi-bg) !important;
  box-shadow: var(--kpi-shadow) !important;
  transition:
    box-shadow var(--kpi-transition),
    transform  var(--kpi-transition),
    border-color var(--kpi-transition);
}
div.card.kpi-tile:hover{
  transform: translateY(-2px);
  box-shadow: var(--kpi-shadow-hover) !important;
  border-color: var(--kpi-border-hover) !important;
}

/* Whole‑card link focus/keyboard nav */
a.text-decoration-none:focus-visible > div.card.kpi-tile,
div.card.kpi-tile:focus-within{
  outline: 3px solid var(--kpi-focus-ring);
  outline-offset: 2px;
  border-radius: var(--kpi-radius);
}
a.text-decoration-none > div.card.kpi-tile{ cursor: pointer; }

/* ---------------------------------------------------------------
   Body spacing & typography
---------------------------------------------------------------- */
div.card.kpi-tile > .card-body{
  padding: 8px 10px !important; /* override Bootstrap */
  color: var(--kpi-text);
}

div.card.kpi-tile .tile-title{
  font-family: var(--kpi-title-font);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .2px;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.card.kpi-tile .tile-value{
  font-family: var(--kpi-title-font);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .2px;
}

div.card.kpi-tile .tile-delta{
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.1;
}
div.card.kpi-tile .tile-delta.positive{ color: var(--kpi-positive) !important; }
div.card.kpi-tile .tile-delta.negative{ color: var(--kpi-negative) !important; }
div.card.kpi-tile .tile-delta.neutral { color: var(--kpi-neutral)  !important; }

div.card.kpi-tile small,
div.card.kpi-tile .text-muted{ color: var(--kpi-subtext) !important; }

/* Corner badge & bottom‑right note (optional) */
div.card.kpi-tile .badge{
  position: absolute;
  top: 6px; right: 6px;
  font-weight: 600;
  letter-spacing: .1px;
}
div.card.kpi-tile .tile-note{
  position: absolute;
  right: 8px; bottom: 6px;
  color: var(--kpi-subtext);
  font-size: .75rem;
}

/* CTA text (when visible) */
div.card.kpi-tile .tile-link{
  color: var(--blue-600, #00509e);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}
div.card.kpi-tile .tile-link:hover{
  color: var(--blue-700, #004480);
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Micro‑viz (Plotly containers)
---------------------------------------------------------------- */
div.card.kpi-tile .tile-viz{
  width: 100%;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.05);
}
div.card.kpi-tile .tile-viz .modebar{ display: none !important; } /* guard */
div.card.kpi-tile .tile-viz[id$="-bullet"]{ height: var(--kpi-bullet-h); }
div.card.kpi-tile .tile-viz[id$="-spark"] { height: var(--kpi-spark-h); }

/* Make Plotly SVG obey our sizing & axis typography (best‑effort) */
div.card.kpi-tile .tile-viz .js-plotly-plot,
div.card.kpi-tile .tile-viz .plotly,
div.card.kpi-tile .tile-viz .main-svg{ width: 100% !important; }
div.card.kpi-tile .tile-viz .main-svg .xtick text,
div.card.kpi-tile .tile-viz .main-svg .ytick text{
  fill: var(--kpi-subtext) !important;
  font-size: 10px !important;
}

/* ---------------------------------------------------------------
   Size variants
---------------------------------------------------------------- */
div.card.kpi-tile.kpi-sm > .card-body{ padding: 6px 8px !important; }
div.card.kpi-tile.kpi-sm .tile-value{ font-size: 1.2rem; }

div.card.kpi-tile.kpi-lg > .card-body{ padding: 10px 12px !important; }
div.card.kpi-tile.kpi-lg .tile-value{ font-size: 1.6rem; }

/* ---------------------------------------------------------------
   Row‑level meta chip (e.g., “Compared with: Nordic median”)
---------------------------------------------------------------- */
.kpi-row-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
}
.kpi-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-050, #f5fafe);
  color: var(--blue-700, #004480);
  border: 1px solid rgba(0,80,158,.18);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1;
  white-space: nowrap;
}
.kpi-chip .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-600, #00509e);
}
.kpi-sort{
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}
.kpi-sort .btn{
  --bs-btn-padding-y: .2rem;
  --bs-btn-padding-x: .5rem;
  --bs-btn-font-size: .82rem;
}

/* ---------------------------------------------------------------
   Optional emphasis states
---------------------------------------------------------------- */
/* Selected/outlier emphasis */
div.card.kpi-tile.is-selected{
  box-shadow: 0 0 0 1px var(--kpi-border-hover), 0 8px 24px rgba(0,0,0,.14) !important;
}

/* Brand‑forward variant: apply to a parent container to colour titles/values */
.brand-forward .kpi-tile .tile-title,
.brand-forward .kpi-tile .tile-value{
  color: var(--blue-700, #004480);
}

/* ---------------------------------------------------------------
   Reduced motion
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  div.card.kpi-tile,
  div.card.kpi-tile:hover{
    transition: none;
    transform: none;
  }
}
/* Small inline flag in card headers */
.kpi-flag{
  display:inline-block;
  vertical-align:middle;
  border-radius:2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}