/* ==========================================================================
   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;
  box-shadow:var(--v33-shadow-sm, none);
  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:700; /* TEMA-MODERN-1: 950 -> 700 (Inter'de 950 "siyah" kesimdi) */
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--v33-text);
  white-space:nowrap;
}
.mh-metric-text span{
  font-size:11px;
  line-height:1.25;
  font-weight:550;
  color:var(--v33-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mh-metric--neutral{ --mh-tone:var(--v33-neutral-solid); }
.mh-metric--green{ --mh-tone:var(--v33-success); }
.mh-metric--green .mh-metric-text b{ color:var(--v33-success); }
.mh-metric--red{ --mh-tone:var(--v33-danger-solid); }
.mh-metric--red .mh-metric-text b{ color:var(--v33-danger); }
.mh-metric--orange{ --mh-tone:var(--v33-warning-solid); }
.mh-metric--orange .mh-metric-text b{ color:var(--v33-warning-text); }
.mh-metric--blue{ --mh-tone:var(--v33-info-solid); }
.mh-metric--blue .mh-metric-text b{ color:var(--v33-info-text); }
.mh-metric--purple{ --mh-tone:var(--v33-approval-solid); }
.mh-metric--purple .mh-metric-text b{ color:var(--v33-approval-text); }

/* 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:550;
  color:var(--v33-muted);
}
.mh-metrics-note.ok{ color:var(--v33-success); }

@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; }
}

/* ==========================================================================
   STANDART MODÜL BAŞLIĞI (.it-hero) — TEMA-MODERN-2 (2026-11-05)

   TEMA-MODERN-1'de demo-theme.css'e konan --v33-hero-gradient'ın TEK
   kullanıcısı. Önceden her modül kendi hero'sunu çiziyordu (.dosab-orders-
   hero, .bm-hero, .dc-hero, .tacc-hero, .eh-hero, .pc-head, beyaz .v33-hero)
   -- 4 farklı tarz, başlık 16-30px, köşe 0-20px. Artık hepsi bu yapıyı
   kullanır; modül CSS'i hero'nun GÖRÜNÜMÜNÜ tanımlamaz, en fazla kendi
   iç yerleşimini (ör. ek rozet) ekler.

     <section class="it-hero">
       <div class="it-hero__top">
         <div class="it-hero__text">
           <span class="it-hero__eyebrow">Bölüm adı</span>
           <h1 class="it-hero__title">Modül Adı</h1>
           <p class="it-hero__desc">Tek cümlelik açıklama.</p>
         </div>
         <div class="it-hero__actions">
           <button class="it-hero__btn">İkincil</button>
           <button class="it-hero__btn it-hero__btn--primary">Birincil</button>
         </div>
       </div>
       <div class="mh-metrics mh-metrics--on-dark">...</div>   (isteğe bağlı)
     </section>
   ========================================================================== */
.it-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  gap:12px;
  margin:0 0 16px;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--v33-radius);
  color:#fff;
  background:var(--v33-hero-gradient);
  box-shadow:var(--v33-shadow);
}
/* İnce ızgara dokusu -- İş Havuzu hero'sundan standarda alındı. */
.it-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, var(--v33-text) 55%);
          mask-image:linear-gradient(90deg, transparent 0%, var(--v33-text) 55%);
  pointer-events:none;
}
.it-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  min-width:0;
}
.it-hero__text{ min-width:0; flex:1 1 320px; }
.it-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#d1fae5;
  font-size:10.5px;
  line-height:1.4;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.it-hero__eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--v33-brand-bright);
  box-shadow:0 0 0 4px rgba(52,211,153,.18);
}
.it-hero__title{
  margin:7px 0 3px;
  color:#fff;
  font-size:clamp(20px, 1.9vw, 24px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
}
.it-hero__desc{
  margin:0;
  max-width:720px;
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.45;
  font-weight:500;
}
.it-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.it-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.10);
  font:inherit;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .12s var(--v33-ease);
}
.it-hero__btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }
.it-hero__btn:active:not(:disabled){ transform:translateY(1px); }
.it-hero__btn:disabled{ opacity:.55; cursor:not-allowed; }
.it-hero__btn--primary{
  border-color:#fff;
  color:var(--v33-brand-strong);
  background:#fff;
  box-shadow:0 1px 2px rgba(15,27,45,.18);
}
.it-hero__btn--primary:hover{ background:var(--v33-brand-soft); border-color:var(--v33-brand-soft); }
.it-hero .mh-metrics{ margin:0; }

@media (max-width:760px){
  .it-hero{ padding:14px; gap:10px; border-radius:var(--v33-radius-md); }
  .it-hero__top{ align-items:flex-start; gap:10px; }
  .it-hero__text{ flex-basis:100%; }
  .it-hero__desc{ font-size:12.5px; }
  .it-hero__actions{ width:100%; }
  .it-hero__btn{ flex:1 1 auto; }
}

/* İsteğe bağlı ekler (TEMA-MODERN-2):
   .it-hero__media  -> başlığın yanında dekoratif görsel (ör. Ana Sayfa çizimi); mobilde gizlenir.
   .it-hero__search -> koyu zemin üzerinde arama kutusu (it-hero__actions içinde). */
.it-hero__media{ flex:0 1 360px; min-width:0; display:flex; align-items:center; justify-content:center; }
.it-hero__media img, .it-hero__media svg{ max-width:100%; height:auto; display:block; }
.it-hero__search{
  min-width:220px;
  min-height:36px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.10);
  font:inherit;
  font-size:13px;
  outline:none;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.it-hero__search::placeholder{ color:rgba(255,255,255,.66); }
.it-hero__search:focus{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.16); box-shadow:0 0 0 4px rgba(255,255,255,.12); }
@media (max-width:760px){
  .it-hero__media{ display:none; }
  .it-hero__search{ flex:1 1 100%; min-width:0; }
}

/* .it-hero--compact -> tam ekran çalışma alanları (harita, büyük tablo) için
   tek satırlık başlık: açıklama gizlenir, dolgu ve başlık küçülür. */
.it-hero--compact{ padding:10px 16px; gap:8px; margin-bottom:12px; }
.it-hero--compact .it-hero__title{ margin:4px 0 0; font-size:18px; }
.it-hero--compact .it-hero__desc{ display:none; }
.it-hero--compact .it-hero__eyebrow{ font-size:10px; padding:2px 8px; }

/* Kompakt başlıkta butonlar da küçülür (çok butonlu araç çubukları tek satıra sığsın). */
.it-hero--compact .it-hero__btn{ min-height:30px; padding:5px 10px; font-size:12px; border-radius:var(--v33-radius-sm); }
.it-hero--compact .it-hero__actions{ gap:6px; }
/* .it-hero--menus -> başlık içinde açılır menü varsa: kırpma kapatılır, menü
   içeriğin üstünde kalır (ör. Elektrik Şebekesi Görünüm/Dışa Aktar menüleri). */
.it-hero--menus{ overflow:visible; z-index:30; }
.it-hero--menus::before{ border-radius:inherit; }

/* Koyu başlık (.it-hero) içinde form alanı: etiket + select/input. */
.it-hero__field { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 600; }
.it-hero__field select, .it-hero__field input { min-height: 36px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .10); font: inherit; font-size: 13px; }
.it-hero__field select option { color: var(--v33-text); }
.it-hero__btn.is-active, .it-hero__btn[aria-pressed="true"] { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); }