.acex-chart-shell,
.acex-map-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff;
    padding: 14px;
}

.acex-chart-heading,
.acex-map-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.acex-chart-title,
.acex-map-title {
    color: #17202a;
    font-size: 1rem;
    font-weight: 700;
}

.acex-chart-subtitle,
.acex-map-subtitle,
.acex-map-count {
    color: #52606d;
    font-size: .84rem;
}

.acex-map-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Highcharts kapsayicinin hesaplanan yuksekligine cizer; burada bir taban
   olmazsa MudItem gibi otomatik yukseklikli bir kapsayicinin icinde cizim alani
   150px'e sikisiyor ve y ekseni etiketleri ust uste biniyordu (Elektrik ve
   Dogalgaz panolarinda gorulen bozulma). Sayfa ici grafikler icin gercek bir
   taban: 320px. Dar bir kartta kucultmek gerekirse AceXChart'in Height
   parametresi bu degiskeni satir ici yazar, kartin CSS'i de ezebilir. */
.acex-chart-host {
    min-height: var(--acex-chart-host-height, 320px);
    flex-grow: 1;
}

.acex-map-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.acex-map-stage > .acex-map-host {
    flex: 1 1 auto;
    width: 100%;
}

.acex-map-empty-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.acex-map-host {
    min-height: 520px;
    overflow: hidden;
    border-radius: 6px;
    background: #eef2f6;
}

.acex-visual-empty {
    display: flex; flex-direction: column;
    min-height: 260px;
    place-items: center;
    color: #52606d;
    font-weight: 600;
}

.acex-map-fallback {
    position: relative;
    width: 100%;
    height: 520px;
    background:
        linear-gradient(90deg, rgba(23, 32, 42, .06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(23, 32, 42, .06) 1px, transparent 1px),
        #edf3f7;
    background-size: 42px 42px;
}

.acex-map-fallback-marker {
    position: absolute;
    min-width: 10px;
    min-height: 10px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #1f5eff;
    box-shadow: 0 2px 8px rgba(23, 32, 42, .24);
    transform: translate(-50%, -50%);
}

.acex-chart-fallback-svg {
    width: 100%;
    min-height: 300px;
}

.map-sidebar-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: 1200;
    height: 350px;
    box-shadow: 0px -1px 5px #282c33;
    border-top: 1px solid #464a52;
    overflow: hidden;
    padding: 6px 10px;
    background: #fff;
    transition: height 0.3s ease;
}

.map-sidebar-footer.collapsed {
    height: 48px;
}

.leaflet-div-icon {
    border-radius: 5px !important;
}

.map-divicon {
    padding: 0;
    border: 2px solid rgb(0,136,204);
    font-weight: bold;
    width: max-content;
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.divicon-content {
    background-color: white;
}

.divicon-header {
    color: white;
    background-color: rgb(0,136,204);
    animation: blink 1s linear 5;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
}

.toggle-icon{
    cursor:pointer;
}

.divicon-table {
    width: 100%;
    color: black;
}

.divicon-table tr td:nth-child(1) {
    text-align: left;
}

.divicon-table tr td:nth-child(2) {
    text-align: right;
}

@keyframes blink {
    25% { opacity: 0.5; }
    50% { opacity: 0; }
    75% { opacity: 0.5; }
}

.mapTable{
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-bottom:solid 1px;
    color:black;
}

.mapTable td, .mapTable th {
    border-top: 1px solid #000;
    text-align: left;
    padding: 3px;
}

.mapTable tr:nth-child(even) {
    background-color: #dee2e6;
}

.mapTable tr:hover {
    background-color: #dee2e6;
}

/* Karo sunucusuna erisilemedi (tileerror): gri bosluk yerine sessiz nokta deseni; isaretciler ve
   ulke cizgisi ustunde okunur. */
.acex-map-host.acex-map-tiles-offline {
    background-color: color-mix(in srgb, currentColor 4%, transparent);
    background-image: radial-gradient(color-mix(in srgb, currentColor 14%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* ============================================================================
   BANTLI GOSTERGE (AceXBandGauge) ve MINI TREND (AceXSparkline)

   ISA-101: "Bir deger tek basina bir sayidir. Araligi, normal bandi ve yaninda
   kucuk bir egilimi olan bir deger bilgidir."

   Renkler JETONDAN geliyor, sabit deger yazilmiyor: iki bilesen de hem acik
   yuzeyde (pano karti) hem koyu temada ciziliyor. Sabit #0f172a bir ibre, koyu
   kartta gorunmez olur.

   Kok oge <span>: bu bilesenler bir <button> icinde de kullaniliyor ve buton
   yalnizca metin icerigi kabul eder.
   ========================================================================= */

.acex-gauge,
.acex-spark {
    display: block;
    width: 100%;
}

.acex-gauge__svg { display: block; width: 100%; height: 14px; }
.acex-spark__svg { display: block; width: 100%; height: 34px; }

.acex-gauge__track  { fill: var(--acex-sunken); }

/* Normal bant RENKSIZ: yuzeyin kendisi. Renk yalnizca esiklerde. */
.acex-gauge__normal {
    fill: var(--acex-surface);
    stroke: var(--acex-line-strong);
    stroke-width: 1;
}

.acex-gauge__warn   { fill: var(--acex-alarm-2); }
.acex-gauge__crit   { fill: var(--acex-alarm-4); }

/* Ibre normalde NOTR. Ancak esik asildiginda renge doner. */
.acex-gauge__needle { fill: var(--acex-text); }
.acex-gauge.is-warning  .acex-gauge__needle { fill: var(--acex-warning); }
.acex-gauge.is-critical .acex-gauge__needle { fill: var(--acex-error); }

.acex-spark__normal { fill: var(--acex-sunken); }
.acex-spark__limit  { stroke: var(--acex-alarm-4); stroke-width: 1; stroke-dasharray: 4 4; }

.acex-spark__line {
    fill: none;
    stroke: var(--acex-text-muted);
    stroke-width: 1.6;
    /* Kutu genisligine gore olceklenen viewBox cizgiyi de ezerdi. */
    vector-effect: non-scaling-stroke;
}

.acex-spark__head { fill: var(--acex-text); }
.acex-spark__head.is-critical { fill: var(--acex-error); }