/* ==========================================================================
   MODÜL BAŞLIĞI / KPI SİSTEMİ — ORTAK STANDART (2026-08-15)

   Amaç: projedeki TÜM modüllerin üst kısmında (hero + KPI/durum kartları)
   tek bir ortak görsel/işlevsel standart. Öncesinde her modül (Bakım,
   İş Havuzu, Stok, Sayaç Okuma, Abone Protokol...) kendi bm-kpi, dosab-kpi,
   inventory-module__kpi, meter-reading-module__kpi gibi KPI kart CSS'ini
   tekrar tekrar tanımlıyordu (teknik borç) — bazıları tıklanabilir/işlevsel,
   çoğu sadece pasif sayı kutusuydu. Bu dosya TEK doğruluk kaynağı:

     .mh-metrics   -> KPI/durum bandı (flex, tek satır, taşma yok)
     .mh-metric    -> tek KPI kartı (buton semantiği, tıklanabilir,
                      ~48-60px yükseklik, ikon + sayı + kısa etiket)

   Kullanım: core/module-header.js -> ITCore.moduleHeader.renderMetrics()
   bu class'ları üretir. Modüller tile listesini (key/label/count/tone/icon/
   active/disabled) verir, gerisini bu ortak sistem halleder.

   Renk semantiği (TÜM modüllerde aynı anlam):
     --red     kritik / geciken / başarısız / reddedildi
     --orange  bekleyen (orta öncelik) / planı olmayan / uyarı
     --blue    bilgi / yaklaşan / bekleyen (düşük öncelik)
     --purple  onay bekleyen
     --green   tamamlandı / normal / başarılı
     --neutral toplam / nötr referans sayısı

   İki bağlam:
     .mh-metrics            -> açık (light) yüzeyler için (sayfa içeriği,
                                ör. Sayaç Okuma / Abone Protokol KPI bandı)
     .mh-metrics--on-dark   -> koyu/gradient hero içine gömülü kullanım
                                için (ör. Bakım hero'su, cam/blur kart)
   ========================================================================== */

.mh-metrics{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}
.mh-metrics:empty{ display:none; }

.mh-metric{
  display:flex;
  align-items:center;
  gap:9px;
  flex:1 1 122px;
  min-width:114px;
  max-width:220px;
  min-height:48px;
  max-height:60px;
  margin:0;
  padding:8px 12px;
  border:1px solid var(--v33-border);
  border-left:3px solid var(--mh-tone, var(--v33-border));
  border-radius:12px;
  background:#fff;
  text-align:left;
  cursor:pointer;
  font:inherit;
  appearance:none;
  -webkit-appearance:none;
  transition:box-shadow .15s ease, transform .1s ease, border-color .15s ease, background-color .15s ease;
}
.mh-metric:hover:not(:disabled){
  box-shadow:0 6px 16px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
.mh-metric:active:not(:disabled){ transform:translateY(0) scale(.99); }
.mh-metric:focus-visible{ outline:3px solid color-mix(in srgb, var(--v33-focus) 72%, white); outline-offset:2px; }

.mh-metric.is-active{
  box-shadow:0 0 0 2px var(--mh-tone, var(--v33-brand)) inset;
  border-color:var(--mh-tone, var(--v33-brand));
}
.mh-metric:disabled{ cursor:default; opacity:.55; }
.mh-metric.is-zero:not(.is-active){ opacity:.62; }

.mh-metric-icon{ flex:0 0 auto; display:inline-flex; color:var(--mh-tone, var(--v33-muted)); opacity:.9; }
.mh-metric-icon svg{ width:16px; height:16px; display:block; }

.mh-metric-text{ display:flex; flex-direction:column; gap:0; min-width:0; }
.mh-metric-text b{
  font-size:18px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.02em;
  color:var(--v33-text);
  white-space:nowrap;
}
.mh-metric-text span{
  font-size:10.5px;
  line-height:1.25;
  font-weight:750;
  color:var(--v33-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mh-metric--neutral{ --mh-tone:#64748b; }
.mh-metric--green{ --mh-tone:#16794b; }
.mh-metric--green .mh-metric-text b{ color:#16794b; }
.mh-metric--red{ --mh-tone:#dc2626; }
.mh-metric--red .mh-metric-text b{ color:#b42318; }
.mh-metric--orange{ --mh-tone:#d97706; }
.mh-metric--orange .mh-metric-text b{ color:#b45309; }
.mh-metric--blue{ --mh-tone:#2563eb; }
.mh-metric--blue .mh-metric-text b{ color:#1d4ed8; }
.mh-metric--purple{ --mh-tone:#7c3aed; }
.mh-metric--purple .mh-metric-text b{ color:#6d28d9; }

/* Koyu/gradient hero içine gömülü kullanım (ör. Bakım Modülü hero'su) */
.mh-metrics--on-dark .mh-metric{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
  border-left-color:var(--mh-tone,#fff);
  backdrop-filter:blur(8px);
}
.mh-metrics--on-dark .mh-metric:hover:not(:disabled){
  background:rgba(255,255,255,.16);
  box-shadow:none;
}
.mh-metrics--on-dark .mh-metric.is-active{
  box-shadow:0 0 0 2px rgba(255,255,255,.6) inset;
  border-color:rgba(255,255,255,.5);
}
.mh-metrics--on-dark .mh-metric-text b{ color:#fff; }
.mh-metrics--on-dark .mh-metric-text span{ color:rgba(255,255,255,.82); }
.mh-metrics--on-dark .mh-metric-icon{ color:#fff; opacity:.9; }

/* Grid'e (yalnız istatistik, tıklanamaz olmayan nadir durum) düşürmek
   isteyen modüller için opsiyonel modifier — varsayılan flex bandı. */
.mh-metrics--wrap-note{ margin-top:6px; }
.mh-metrics-note{
  width:100%;
  padding:6px 2px 0;
  font-size:11.5px;
  font-weight:700;
  color:var(--v33-muted);
}
.mh-metrics-note.ok{ color:#16794b; }

@media (max-width:1100px){
  .mh-metric{ flex:1 1 calc(33.33% - 6px); max-width:none; }
}
@media (max-width:760px){
  .mh-metric{ flex:1 1 calc(50% - 6px); min-height:50px; }
}
@media (max-width:480px){
  .mh-metric{ flex:1 1 calc(50% - 6px); min-height:46px; }
}