/* ══════════════════════════════════════════════════════════════════
   MLDeep × Lightdash — Premium KPI Card Overrides
   Strategy: target tiles via [class*="tileCard"]:has([data-testid="big-number-value"])
   All CSS-module classnames are hashed at build but contain the
   original name as a substring, so class*= substring matching works.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Tile card wrapper: dark gradient background ──────────────── */
[class*='tileCard']:has([data-testid='big-number-value']) {
  background: linear-gradient(145deg, #1A1916 0%, #2D2519 55%, #3A2C0F 100%) !important;
  border: 1px solid rgba(233,138,46,0.20) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(233,138,46,0.08) !important;
  overflow: hidden;
  position: relative;
}

/* ── 2. Amber gradient accent line across the top ────────────────── */
[class*='tileCard']:has([data-testid='big-number-value'])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #E98A2E 30%, #F5B877 60%, #E98A2E 90%, transparent);
  z-index: 2;
}

/* ── 3. Tile header/title area: amber uppercase label ────────────── */
[class*='tileCard']:has([data-testid='big-number-value']) [class*='title'],
[class*='tileCard']:has([data-testid='big-number-value']) [class*='header'],
[class*='tileCard']:has([data-testid='big-number-value']) [class*='TileTitle'],
[class*='tileCard']:has([data-testid='big-number-value']) [class*='tileTitle'] {
  color: #E98A2E !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* ── 4. The big number itself: cream, large, heavy ───────────────── */
[data-testid='big-number-value'] {
  color: #F4EEE6 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  font-size: 56px !important;
}

/* ── 5. The metric label under the number (Sessions / Users / etc.) */
[class*='tileCard']:has([data-testid='big-number-value'])
  [data-testid='big-number-value'] ~ p,
[class*='tileCard']:has([data-testid='big-number-value'])
  [data-testid='big-number-value'] ~ div:not([class*='trend']):not([class*='Trend']) {
  color: #7A746C !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ── 6. MoM comparison pill: green on up, red on down ───────────── */
[class*='tileCard']:has([data-testid='big-number-value']) [class*='trendPillUp'],
[class*='tileCard']:has([data-testid='big-number-value']) [class*='trend'][class*='Up'] {
  background: rgba(16,185,129,0.12) !important;
  border: 1px solid rgba(16,185,129,0.30) !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
}
[class*='tileCard']:has([data-testid='big-number-value']) [class*='trendPillUp'] *,
[class*='tileCard']:has([data-testid='big-number-value']) [class*='trend'][class*='Up'] * {
  color: #34D399 !important;
}

[class*='tileCard']:has([data-testid='big-number-value']) [class*='trendPillDown'],
[class*='tileCard']:has([data-testid='big-number-value']) [class*='trend'][class*='Down'] {
  background: rgba(239,68,68,0.10) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  border-radius: 100px !important;
}
[class*='tileCard']:has([data-testid='big-number-value']) [class*='trendPillDown'] *,
[class*='tileCard']:has([data-testid='big-number-value']) [class*='trend'][class*='Down'] * {
  color: #F87171 !important;
}

/* ── 7. Comparison label text: muted ─────────────────────────────── */
[class*='tileCard']:has([data-testid='big-number-value']) [class*='comparisonLabel'],
[class*='tileCard']:has([data-testid='big-number-value']) [class*='comparison'] > span {
  color: #5A5445 !important;
  font-size: 10px !important;
}

/* ── 8. Hide the tile's 3-dot kebab menu hover button (clean look) ─ */
[class*='tileCard']:has([data-testid='big-number-value']) [class*='kebab'],
[class*='tileCard']:has([data-testid='big-number-value']) [data-testid='tile-icon-more'] {
  opacity: 0;
  transition: opacity 0.15s;
}
[class*='tileCard']:has([data-testid='big-number-value']):hover [data-testid='tile-icon-more'] {
  opacity: 1;
}

/* ── 9. Sparkline tiles: amber line on translucent dark card ─────── */
/* Target tiles with title containing sparkline indicator via aria */
[class*='tileCard']:has(canvas) + [class*='tileCard']:has(canvas) {
  /* Intentionally not styling broadly — too risky */
}

/* Minimal sparkline wrapper for charts named ✦ * Trend */
/* We identify them via the wrapper tile that has NO big-number testid
   and is positioned adjacent — handled by making them use hideFrame:true
   so their tile card has [class*=hideFrame] or similar.
   For now, style all non-big-number cartesian tiles that appear small: */