/* ============================================================
   cards.css
   ------------------------------------------------------------
   Styles for the 6 KPI cards on the Profit & Loss page
   (pages/profit_loss.py::_kpi_card). Kept separate from the
   general page styling (style.css) so the card design can be
   iterated on independently, and reused by future pages.

   ------------------------------------------------------------
   VERSION 2 CHANGES
   ------------------------------------------------------------
   1. Card sizing (height, width, radius, padding, font sizes,
      icon size, gaps) now reads from the CSS custom properties
      generated by layout_config.py (see generated_layout.css,
      written by app.py at start-up) instead of hardcoded pixel
      values - brief items 1 & 4.
   2. Redesigned from a stacked (icon-on-top) layout to a
      left-icon / vertically-centered / text-on-the-right layout
      (brief item 9) via the new `.kpi-card-icon-col` and
      `.kpi-card-text-col` flex children.
   ============================================================ */

.kpi-row {
  display: flex;
  gap: var(--kpi-row-gap, 16px);
  flex-wrap: wrap;
  margin: var(--kpi-row-margin, 18px) 24px 6px;
}

.kpi-card {
  flex: 1 1 var(--kpi-card-min-width, 165px);
  min-width: var(--kpi-card-min-width, 165px);
  height: var(--kpi-card-height, 96px);
  background: var(--card-bg);
  border-radius: var(--kpi-card-radius, 14px);
  padding: var(--kpi-card-padding, 14px) 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: row;      /* icon on the LEFT, text column on the right */
  align-items: center;      /* vertically centers both the icon and text col */
  gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease;
  animation: cardFadeIn .4s ease;
  overflow: hidden;
}
.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(21,36,71,0.14);
}
/* ---- Modifier for KPI cards that include a sparkline trend line -
   switches the card to column layout (icon+text row on top, sparkline
   below), taller to fit both, and defines .kpi-card-row to replicate
   the base card's row layout for just the icon+text portion. ---- */
.kpi-card-with-spark {
  flex-direction: column;
  align-items: stretch;
  height: var(--kpi-card-height-spark, 128px);
  gap: 2px;
}
.kpi-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* ---- Left icon column (VERSION 2) ---- */
.kpi-card-icon-col {
  flex: 0 0 auto;
  width: var(--kpi-card-icon-size, 26px);
  font-size: var(--kpi-card-icon-size, 26px);
  line-height: 1;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Right text column (VERSION 2) ---- */
.kpi-card-text-col {
  flex: 1 1 auto;
  min-width: 0; /* allows text to shrink/ellipsize instead of overflowing */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kpi-title {
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--kpi-card-title-font, 0.68rem);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-value {
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: var(--kpi-card-value-font, 1.35rem);
  font-weight: 700;
  margin-bottom: 3px;
  line-height: 1.15;
  transition: opacity .25s ease;
  white-space: nowrap;
}
.kpi-variance {
  font-size: var(--kpi-card-variance-font, 0.78rem);
  font-weight: 600;
  white-space: nowrap;
}
.kpi-variance.up { color: var(--positive); }
.kpi-variance.down { color: var(--negative); }

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
  .kpi-card { flex: 1 1 45%; }
}
@media (max-width: 576px) {
  .kpi-card { flex: 1 1 100%; }
}