/* ==========================================================================
   GRAFIK PANELI (EChart bileseni) - kart kabugu, arac cubugu, tam ekran
   --------------------------------------------------------------------------
   NEDEN AYRI DOSYA: bu kurallarin tamami once bilesenin ICINDE, `<style>`
   blogunda duruyordu ve her secici `#{guid}` ile o grafige kapsamlanmisti.
   Bilesen sayfada kac kez cagriliyorsa blok o kadar kez basiliyordu: 20
   grafikli bir sayfa ayni ~420 satiri 20 kez indiriyordu.

   Ikinci sorun gorseldi: kimlik secicisi (0-1-0-0) sinif kurallarini yendigi
   icin bu olculer YALNIZCA grafik kartina uyguluyordu. Arac panosunun bolum
   basligi ayni `.dashboard-card-header` sinifini tasimasina ragmen baska boyda
   goruluyordu - "ikisi de ayni CSS" sanilan ama olmayan durum.

   Kurallar aynen korundu; yalnizca kapsam kimlikten SINIFA cevrildi:
       #{cardId}              -> .bz-panel-card
       #{shellId}             -> .vsp-chart-shell
       #{hostId}              -> .vsp-chart-host
       #{fullscreenPreviewId} -> .vsp-fullscreen-preview

   Grafige gore DEGISEN tek olcu (yukseklik) bilesende inline style olarak
   kaliyor - dogru yer orasi, cunku duzene gore gercekten degisiyor.

   Ortak baslik/rozet/sekme sozlugu icin bkz. panel-chrome.css.
   ========================================================================== */
.vsp-chart-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;
}

.bz-panel-card,
.bz-panel-card > .dashboard-card-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.vsp-chart-shell .vsp-chart-layout {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.vsp-chart-host {
    flex: 1 1 0%;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.vsp-chart-host > div,
.vsp-chart-host canvas {
    max-width: 100% !important;
}

/* YOGUNLUK: baslik ve arac cubugu kucultuldu. Panelde ekran basina bir grafik
   goruluyordu; ECU ekibinin izleme yapabilmesi icin birkac grafigin ayni ekrana
   sigmasi gerekiyor.

   BASLIK KURALLARI ARTIK BURADA DEGIL: panel-chrome.css -> `.bz-panel-card`
   (kart asagida o sinifi tasiyor). Burada durduklari surece her grafik icin
   AYRI bir kopya uretiliyordu - 20 grafikli sayfa ayni CSS'i 20 kez
   indiriyordu - ve `#kimlik` secicisi sinif kurallarini yendigi icin arac
   panosunun bolum basligi bu boyu HIC alamiyordu: iki sayfa "ayni" sinifi
   kullanmasina ragmen farkli goruluyordu.

   Asagida yalnizca GERCEKTEN karta ozel olanlar kaldi (kilit halkasi,
   grafik govdesi olculeri): onlar kimlik olmadan ifade edilemiyor. */

.bz-panel-card .dashboard-card-header .vsp-chart-agg-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--bz-font-xs);
    color: #6c757d;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Fonksiyonlarin ne yaptigi tooltip'te aciklaniyor: kullanicinin
   "mean mi last mi" diye tahmin etmesi gerekmesin. */
.bz-panel-card .vsp-agg-help {
    cursor: help;
    font-size: var(--bz-font-xs);
    line-height: 1;
    color: var(--bs-secondary-color);
}

.bz-panel-card .vsp-agg-help:hover,
.bz-panel-card .vsp-agg-help:focus-visible {
    color: var(--bs-primary);
}

.bz-panel-card .dashboard-card-header .vsp-chart-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}

.bz-panel-card .dashboard-card-header .vsp-chart-tools .btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* KILITLI GRAFIK CEVRESINDE HALKA.

   Kilit yalnizca kucuk bir simge durumuydu; kullanici hangi grafigin
   digerlerinden koptugunu ancak zoom yapip fark etmiyordu. Halka, o
   grafigin BILEREK ayri oldugunu bakisla anlatiyor.

   Gecis suresi ~.4sn: kilit acildiginda halkanin kaybolmasi ile grafigin
   ortak araliga donusu AYNI hizda olsun (bkz. SYNC_DEBOUNCE_MS). Anlik
   kaybolan halka + gecikmeli donus "acaba oldu mu" hissi veriyor. */
.bz-panel-card {
    transition: box-shadow .4s ease;
}

.bz-panel-card.vsp-chart-locked {
    box-shadow: 0 0 0 2px rgba(var(--bs-warning-rgb), .65),
                0 8px 22px -6px rgba(var(--bs-warning-rgb), .45) !important;
}

.bz-panel-card.vsp-chart-locked .dashboard-card-header {
    background-color: rgba(var(--bs-warning-rgb), .08);
}

/* Tooltip elemani BODY'e tasindigi icin bu kural karta kapsamlanamaz. */
.vsp-agg-help-tip .tooltip-inner {
    max-width: 22rem;
    text-align: left;
    font-size: var(--bz-font-xs);
    line-height: var(--bz-line-normal);
}

.vsp-fullscreen-preview {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: none;
    overflow: hidden;
    background-color: #fff;
}

.vsp-fullscreen-preview.is-open,
.vsp-fullscreen-preview:fullscreen,
.vsp-fullscreen-preview:-webkit-full-screen {
    display: flex;
}

.vsp-fullscreen-preview .vsp-fullscreen-preview-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* TAM EKRANDA KARTIN TAMAMI TASINIR - yalnizca grafik degil.

   Once yalnizca grafik kabugu tasiniyordu; baslik seridi arkada kaliyordu ve
   tam ekranda cizim alaninin sag ust kosesi BOS bir seride donusuyordu. Kapat
   dugmesi oraya konunca da ustune "Sinyal Sec" dugmesi / sinyal panelinin
   basligi biniyordu. Iki tur kose kose konum duzeltmesi denendi, ikisi de
   yamaydi: cakisan seyler ayni katmanda yuzuyordu.

   Kart tasindiginda baslik seridi AYRILMIS bir satir oluyor, cizim alani geri
   kalani aliyor ve kapat dugmesi o seridin sag ucuna oturuyor. Cakisma
   yerlesimle cozuldugu icin bir daha geri gelmez.

   Grafik gercek boyutta YENIDEN CIZILIR (olceklenmez): ECharts canvas'a
   cizdigi icin transform: scale() yaziyi ve cizgileri bulaniklastiriyordu. */
.vsp-fullscreen-preview .vsp-fullscreen-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
}

.vsp-fullscreen-preview .vsp-fullscreen-card .dashboard-card-header {
    flex: 0 0 auto;
}

/* Kapat dugmesi baslik satirinin ICINE tasindiginda mutlak konumdan cikar:
   artik diger arac dugmeleriyle ayni satirda, ayni hizada ve sarmaya dahil.
   Kosede mutlak dururken hem hizasi bozuktu hem "Kilitli" anahtarina
   biniyordu; sagda yer ayirmak da iki tur denendi ve yamaydi. */
.vsp-fullscreen-preview .dashboard-card-header .vsp-fullscreen-preview-close {
    position: static;
    top: auto;
    right: auto;
    width: 26px;
    height: 26px;
    margin-left: 4px;
}

.vsp-fullscreen-preview .vsp-fullscreen-card .dashboard-card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px;
}

/* Tam ekranda yer bol: sinyal paneli genisler, uzun adlar kirpilmaz. */
.vsp-fullscreen-preview .vsp-fullscreen-card .vsp-signal-panel {
    flex: 0 0 265px;
    width: 265px;
}

/* Kabugun satir ici yuksekligi (style="height:NNNpx") burada gecersiz. */
.vsp-fullscreen-preview .vsp-fullscreen-card .vsp-chart-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

/* Kapat dugmesi BASLIK SERIDININ icinde durur (baslik icin sagda 54px
   ayrildi). Onceki olculer serit yuksekliginden tasip cizim alaninin
   ust kosesine sarkiyordu. */
.vsp-fullscreen-preview .vsp-fullscreen-preview-close {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bz-panel-card .dashboard-card-header .vsp-chart-agg {
    width: auto;
    min-width: 92px;
    font-size: var(--bz-font-xs);
    padding: .15rem 1.4rem .15rem .4rem;
    flex-shrink: 0;
}

.bz-panel-card .dashboard-card-header .vsp-chart-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    /* KAP KUCULEBILMELI, yoksa ic sarma HIC tetiklenmez.
       flex-shrink:0 ile kap max-content genisliginde kaliyor, flex-wrap
       kuralinin uygulanacagi bir darlik hic olusmuyor ve icerik kartin
       disina tasip kirpiliyordu.
       Cocuklar (ozetleme etiketi/secimi, dugme grubu, anahtarlar) kendi
       flex-shrink:0'lariyla ezilmeyi reddediyor - dolayisiyla kap
       kuculdugunde onlar SIKISMIYOR, alt satira SARIYOR. */
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: .3rem;
}

/* GENISLIK: 165px'te "X_Tm_Sp_Mode_Minute" gibi tipik DBC adlari
   kirpiliyordu; kullanici hangi sinyali sectigini okuyamiyordu. 205px
   20-22 karakteri renk kutusu ve bosluklarla birlikte aliyor. */
.vsp-chart-shell .vsp-signal-panel {
    flex: 0 0 205px;
    width: 205px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background-color: var(--bs-body-bg);
}

.vsp-chart-shell.vsp-legend-collapsed .vsp-signal-panel {
    display: none;
}

.vsp-chart-shell .vsp-signal-panel-header {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: var(--bz-font-md);
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

.vsp-chart-shell .vsp-signal-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vsp-chart-shell .vsp-signal-select-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: var(--bz-font-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.vsp-chart-shell .vsp-signal-search {
    width: 100%;
    height: 30px;
    margin-top: 7px;
    padding: 4px 8px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--bz-font-md);
}

.vsp-chart-shell .vsp-signal-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 6px;
    color: var(--bs-secondary-color);
    font-size: var(--bz-font-sm);
    font-weight: 600;
    line-height: var(--bz-line-tight);
}

.vsp-chart-shell .vsp-signal-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
}

.vsp-chart-shell .vsp-signal-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: var(--bz-font-md);
    line-height: var(--bz-line-tight);
    text-align: left;
}

.vsp-chart-shell .vsp-signal-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.vsp-chart-shell .vsp-signal-item.is-empty {
    color: var(--bs-secondary-color);
    cursor: default;
}

/* SECILI OLMAYAN soluk. Onceden yalnizca renk kutusu ici bosaliyordu;
   80 sinyalli bir listede hangilerinin acik oldugunu taramak zordu. */
.vsp-chart-shell .vsp-signal-item.is-unselected .vsp-signal-name {
    color: var(--bs-secondary-color);
    opacity: .75;
}

.vsp-chart-shell .vsp-signal-color {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border: 1px solid var(--vsp-signal-color, #5272cc);
    border-radius: 3px;
    background-color: var(--vsp-signal-color, #5272cc);
    box-sizing: border-box;
}

.vsp-chart-shell .vsp-signal-item.is-unselected .vsp-signal-color {
    background-color: var(--bs-body-bg);
}

.vsp-chart-shell .vsp-signal-item.is-empty .vsp-signal-color {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

/* DBC ADLARI ICIN ESIT GENISLIKLI YAZI TIPI.
   Adlar "X_Tm_Sp_Mode_Minute" gibi alt cizgili tanimlayicilar; oransal
   yazi tipinde harfler birbirine gecip taranmasi zorlasiyor. Esit
   genislikli yazi ayni piksel sayisinda daha okunur. */
.vsp-chart-shell .vsp-signal-name {
    font-family: var(--bz-font-mono);
    font-size: var(--bz-font-md);
    letter-spacing: -.1px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SINYAL PANELI ANAHTARI KARTIN ARAC CUBUGUNDA.

   Onceden cizim alaninin ustunde mutlak konumlu bir dugme olarak yuzuyordu.
   Iki somut hata uretti:
     - panel kapaliyken sagdaki y eksenini ve etiketlerini kapatiyordu,
     - tam ekranda kapat dugmesiyle ayni koseye dusuyordu.
   Ikisi de konumu oynatarak "duzeltilmeye" calisildi; kok sorun dugmenin
   veri alaninin USTUNDE olmasiydi. Diger arac dugmeleriyle ayni satirda
   durdugunda cizim alani tamamen grafige kaliyor. */
.bz-panel-card .dashboard-card-header .vsp-chart-tools .btn.active {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle) !important;
    color: var(--bs-primary-text-emphasis);
}