/* benchmark.css — kompaktowy kafelek + modal porownania efektywnosci vs modelfarmy.
   Wstrzykiwany przez installations.js do .stats-container.
   #TAG: BENCHMARK CSS PoC */

/* === Wspolny styl podpisow w kafelkach panelu instalacji === */

/* Okres pod liczba — "fra start", "sidste 2 mdr.", "12 mdr." itp. */
.stat-box .stat-period {
  font-size: 0.7em;
  color: #888;
  margin-top: 4px;
  font-style: italic;
  text-align: center;
  line-height: 1.2;
}

/* Wskazowka ze kafelek jest klikalny (pojawia sie tylko gdy stat-click-hint dodane) */
.stat-box .stat-click-hint {
  font-size: 0.68em;
  color: var(--primary-color, #006400);
  margin-top: 6px;
  text-align: center;
  font-weight: 500;
  opacity: 0.75;
}

/* Klikalne kafelki — wzmocnij wizualnie (cursor + lekki hover lift).
   Dodajemy lekka zielona linia na dole jako sygnal interaktywnosci. */
.stat-box.kafelek-clickable,
.stat-box.kafelek-m3,
.stat-box.kafelek-uptime,
.stat-box.stat-box-benchmark {
  cursor: pointer;
  border-bottom: 3px solid var(--primary-color, #006400);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-box.kafelek-clickable:hover,
.stat-box.kafelek-m3:hover,
.stat-box.kafelek-uptime:hover,
.stat-box.stat-box-benchmark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.stat-box.kafelek-clickable:hover .stat-click-hint,
.stat-box.kafelek-m3:hover .stat-click-hint,
.stat-box.kafelek-uptime:hover .stat-click-hint {
  opacity: 1;
}

/* Dark mode */
[data-theme="dark"] .stat-box .stat-period {
  color: var(--text-muted, #aaa); /* F4.14: --text-secondary nie istniało (działał tylko fallback) */
}
[data-theme="dark"] .stat-box .stat-click-hint {
  color: #4ade80;
}


.stat-box-benchmark {
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-box-benchmark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.stat-box-benchmark .bm-tile-subline {
  font-size: 0.85em;
  color: #444;
  text-align: center;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.stat-box-benchmark .bm-tile-meta {
  font-size: 0.78em;
  color: #666;
  text-align: center;
  margin-top: 2px;
}

.stat-box-benchmark .bm-tile-hint {
  font-size: 0.7em;
  color: #888;
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* Dark mode */
[data-theme="dark"] .stat-box-benchmark {
  background-blend-mode: multiply !important;
  background-color: var(--card-bg, #1e1e1e) !important; /* F4.14: --bg-card → --card-bg (istniejący token) */
}

[data-theme="dark"] .stat-box-benchmark .bm-tile-subline,
[data-theme="dark"] .stat-box-benchmark .bm-tile-meta,
[data-theme="dark"] .stat-box-benchmark .bm-tile-hint {
  color: var(--text-muted, #aaa) !important; /* F4.14 */
}

/* Modal — domyslne style w JS sa inline (zgodnie z konwencja innych modali w projekcie),
   ale dodajmy hover na wierszach tabeli i responsywnosc. */
#benchmark-modal table tbody tr:hover {
  filter: brightness(0.97);
}

@media (max-width: 768px) {
  #benchmark-modal table {
    font-size: 11px !important;
  }
  #benchmark-modal table th,
  #benchmark-modal table td {
    padding: 6px 4px !important;
  }
}