/* ==========================================================================
   DOSAB KOKPİT TASARIM DİLİ (2026-11-05)
   Kaynak: kullanıcının "DOSAB Elektrik İşEmriTakip Kokpiti" görseli; ilk kez
   İş Havuzu'nda uygulandı, kullanıcı isteğiyle TÜM sayfa/modüllere yayıldı.
   Bu dosya her sayfada module-header.css'ten SONRA yüklenir:
     1) .it-hero  -> gün batımı enerji illüstrasyonlu başlık (demo-theme.css
        --v33-hero-gradient) + sol dikey vurgu çizgili üst başlık
     2) .mh-metric -> ikon kutulu, alt renk şeritli KPI kartı
     3) .opx-*    -> panel, KPI, etiket, grafik bileşenleri (İş Havuzu ve
        bundan sonra yazılacak ekranlar için ortak)
   Renkler durum paletinden (--v33-*-solid / -bg) gelir.
   ========================================================================== */

:root {
  --opx-ink: #0f1d3a;
  --opx-muted: #64708a;
  --opx-line: #e4eaf4;
  --opx-card-shadow: 0 1px 2px rgba(15, 29, 58, .05), 0 10px 26px -14px rgba(15, 29, 58, .18);
  --opx-blue: #2563eb; --opx-blue-soft: #e8f0ff;
  --opx-green: #16a34a; --opx-green-soft: #e7f7ec;
  --opx-teal: #0d9488; --opx-teal-soft: #e2f6f3;
  --opx-violet: #7c3aed; --opx-violet-soft: #f1ecff;
  --opx-orange: #f97316; --opx-orange-soft: #fff1e6;
  --opx-amber: #d97706; --opx-amber-soft: #fff7e0;
  --opx-red: #ef4444; --opx-red-soft: #fdecec;
}

/* --- 1) Ortak modül başlığı ------------------------------------------------ */
.it-hero {
  min-height: 150px; padding: 24px 30px; align-content: center;
  border: 0; border-radius: var(--v33-radius-lg);
  box-shadow: 0 18px 40px -24px rgba(20, 30, 90, .7);
}
.it-hero::before { display: none; }
.it-hero__media { display: none; }
.it-hero__eyebrow {
  gap: 10px; padding: 0 0 0 12px; border: 0; border-radius: 0; background: none;
  border-left: 3px solid #60a5fa; color: #dbe6ff;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none;
}
.it-hero__eyebrow::before { display: none; }
.it-hero__title { margin: 8px 0 4px; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; text-shadow: 0 2px 10px rgba(5, 10, 40, .35); }
.it-hero__desc { color: rgba(232, 238, 255, .9); font-size: 13.5px; }
.it-hero__btn { border-color: rgba(220, 230, 255, .35); background: rgba(10, 20, 60, .35); backdrop-filter: blur(4px); }
.it-hero__btn--primary { color: #1d4ed8; background: #fff; border-color: #fff; }
.it-hero__btn--primary:hover { background: #e8f0ff; border-color: #e8f0ff; }
.it-hero--compact { min-height: 0; padding: 12px 18px; }
.it-hero--compact .it-hero__title { font-size: 18px; margin: 4px 0 0; }
.it-hero--compact .it-hero__eyebrow { font-size: 10.5px; padding-left: 9px; }
@media (max-width: 760px) {
  .it-hero { min-height: 0; padding: 18px; }
}

/* --- 2) Ortak KPI kartı (.mh-metric) ---------------------------------------- */
.mh-metrics { gap: 12px; }
.mh-metric {
  position: relative; flex: 1 1 150px; max-width: none; min-height: 76px; max-height: none;
  gap: 12px; padding: 12px 14px 14px;
  border: 1px solid var(--opx-line); border-left: 1px solid var(--opx-line); border-radius: 14px;
  background: #fff; box-shadow: var(--opx-card-shadow); overflow: hidden;
}
.mh-metric::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--mh-tone, var(--opx-blue)), color-mix(in srgb, var(--mh-tone, var(--opx-blue)) 30%, transparent));
}
.mh-metric-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; opacity: 1;
  background: color-mix(in srgb, var(--mh-tone, var(--opx-blue)) 13%, #fff);
  color: var(--mh-tone, var(--opx-blue));
}
.mh-metric-icon svg { width: 22px; height: 22px; }
.mh-metric-text { flex-direction: column-reverse; gap: 2px; }
.mh-metric-text b { font-size: 24px; font-weight: 800; color: var(--opx-ink); }
.mh-metric-text span { font-size: 12.5px; font-weight: 600; color: #33405e; }
.mh-metric--neutral { --mh-tone: #64748b; }
.mh-metric--green { --mh-tone: var(--opx-green); }
.mh-metric--red { --mh-tone: var(--opx-red); }
.mh-metric--orange { --mh-tone: var(--opx-orange); }
.mh-metric--blue { --mh-tone: var(--opx-blue); }
.mh-metric--purple { --mh-tone: var(--opx-violet); }
.mh-metric--green .mh-metric-text b, .mh-metric--red .mh-metric-text b, .mh-metric--orange .mh-metric-text b,
.mh-metric--blue .mh-metric-text b, .mh-metric--purple .mh-metric-text b { color: var(--opx-ink); }
.mh-metric.is-active { border-color: var(--mh-tone, var(--opx-blue)); box-shadow: 0 0 0 2px var(--mh-tone, var(--opx-blue)), var(--opx-card-shadow); }
/* koyu zemin üstündeki bant (hero içi) da beyaz kart olur */
.mh-metrics--on-dark .mh-metric { background: rgba(255, 255, 255, .96); border-color: rgba(255, 255, 255, .6); }
.mh-metrics--on-dark .mh-metric-text b { color: var(--opx-ink); }
.mh-metrics--on-dark .mh-metric-text span { color: #33405e; }
.mh-metrics--on-dark .mh-metric-icon { color: var(--mh-tone, var(--opx-blue)); }
@media (max-width: 760px) {
  .mh-metric { flex-basis: calc(50% - 6px); min-height: 64px; padding: 10px 12px 12px; }
  .mh-metric-icon { width: 34px; height: 34px; }
  .mh-metric-text b { font-size: 20px; }
}

/* --- 3) Ortak bileşenler (.opx-*) ------------------------------------------- */
.opx-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.opx-ic--xs { width: 13px; height: 13px; }
.opx-ic--head { width: 22px; height: 22px; color: var(--opx-blue); }
.opx-ic--star { color: #f59e0b; fill: #fbbf24; }
.opx-tone-blue { --t: var(--opx-blue); --ts: var(--opx-blue-soft); }
.opx-tone-green { --t: var(--opx-green); --ts: var(--opx-green-soft); }
.opx-tone-teal { --t: var(--opx-teal); --ts: var(--opx-teal-soft); }
.opx-tone-violet { --t: var(--opx-violet); --ts: var(--opx-violet-soft); }
.opx-tone-orange { --t: var(--opx-orange); --ts: var(--opx-orange-soft); }
.opx-tone-amber { --t: var(--opx-amber); --ts: var(--opx-amber-soft); }
.opx-tone-red { --t: var(--opx-red); --ts: var(--opx-red-soft); }

.opx-panel {
  min-width: 0; padding: 16px 18px; border: 1px solid var(--opx-line); border-radius: 16px;
  background: #fff; box-shadow: var(--opx-card-shadow); color: var(--opx-ink);
}
.opx-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.opx-panel__head h2 { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--opx-ink); }
.opx-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--opx-blue); font: inherit; font-size: 13px; font-weight: 650;
}
.opx-select select {
  appearance: none; -webkit-appearance: none; padding: 6px 28px 6px 12px; border-radius: 8px; border: 1px solid #d7deea;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer;
}
.opx-pill {
  display: inline-flex; align-items: center; flex: 0 0 auto; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.opx-pill--green { background: var(--opx-green-soft); color: var(--opx-green); border-color: #bfe8cc; }
.opx-pill--blue { background: var(--opx-blue-soft); color: var(--opx-blue); border-color: #c9dafc; }
.opx-pill--violet { background: var(--opx-violet-soft); color: var(--opx-violet); border-color: #ddd0fb; }
.opx-pill--orange { background: var(--opx-orange-soft); color: #c2410c; border-color: #fbd3b4; }
.opx-pill--red { background: var(--opx-red-soft); color: #dc2626; border-color: #f8c4c4; }
.opx-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: #94a3b8; }
.opx-dot--green { background: var(--opx-green); }
.opx-dot--blue { background: var(--opx-blue); }
.opx-dot--violet { background: var(--opx-violet); }
.opx-dot--orange { background: var(--opx-orange); }
.opx-empty { list-style: none; padding: 8px 0; color: var(--opx-muted); font-size: 13px; }

/* KPI kartı (opx) */
.opx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.opx-kpi {
  position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
  column-gap: 12px; align-items: center; min-height: 96px; padding: 14px 14px 16px; overflow: hidden;
  border: 1px solid var(--opx-line); border-radius: 16px; background: #fff; box-shadow: var(--opx-card-shadow);
  text-align: left; font: inherit; color: var(--opx-ink); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.opx-kpi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--t), color-mix(in srgb, var(--t) 25%, transparent)); }
.opx-kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(15, 29, 58, .35); }
.opx-kpi.is-active { border-color: var(--t); box-shadow: 0 0 0 2px var(--t), var(--opx-card-shadow); }
.opx-kpi__icon {
  grid-row: 1 / span 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--t) 16%, #fff), color-mix(in srgb, var(--t) 8%, #fff));
  color: var(--t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 18%, transparent);
}
.opx-kpi__icon .opx-ic { width: 28px; height: 28px; }
.opx-kpi__label { grid-column: 2 / span 2; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: #26324d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opx-kpi__value { grid-column: 2; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.opx-kpi__trend { grid-column: 3; grid-row: 2; justify-self: end; font-size: 13px; font-weight: 750; white-space: nowrap; }
.opx-kpi__trend--up { color: var(--opx-green); }
.opx-kpi__trend--down { color: var(--opx-red); }
.opx-kpi__trend--flat { color: #475569; }
.opx-kpi__trend--new { font-size: 11px; font-weight: 500; color: #94a3b8; }
.opx-kpi__prev { grid-column: 2 / span 2; justify-self: end; font-size: 11.5px; color: var(--opx-muted); min-height: 1em; }
@media (max-width: 1360px) { .opx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .opx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .opx-kpi { grid-template-columns: 40px minmax(0, 1fr); min-height: 0; padding: 12px 12px 14px; column-gap: 10px; }
  .opx-kpi__icon { width: 40px; height: 40px; grid-row: 1 / span 2; }
  .opx-kpi__icon .opx-ic { width: 22px; height: 22px; }
  .opx-kpi__value { font-size: 24px; }
  .opx-kpi__trend { grid-column: 2; grid-row: 3; justify-self: start; }
  .opx-kpi__prev { display: none; }
}

/* ince ayarlar */
.mh-metric-text span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.mh-metric.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mh-tone, var(--opx-blue)) 55%, transparent), var(--opx-card-shadow); }
/* 1600px altı: altı kart tek sırada sığsın -- ikon küçülür, eğilim/önceki
   değer değerin altında tek satır olur. */
@media (min-width: 761px) and (max-width: 1599px) {
  .opx-kpi { grid-template-columns: 42px minmax(0, 1fr); column-gap: 10px; padding: 12px 12px 14px; min-height: 0; }
  .opx-kpi__icon { width: 42px; height: 42px; grid-row: 1 / span 2; border-radius: 12px; }
  .opx-kpi__icon .opx-ic { width: 22px; height: 22px; }
  .opx-kpi__label { grid-column: 2; font-size: 12.5px; -webkit-line-clamp: 1; }
  .opx-kpi__value { font-size: 26px; }
  .opx-kpi__trend { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 6px; font-size: 12px; }
  .opx-kpi__prev { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin-top: 6px; }
}

/* koyu zemindeki pasif KPI kartı fazla soluk olmasın */
.mh-metrics--on-dark .mh-metric:disabled { opacity: .82; }