/* Alarm flash animations ported from old ACEX.Enerya SPA (alarmFlash.css) */
@keyframes alarmFlash {
    from {
        background-color: red;
    }

    to {
        background-color: var(--mud-palette-surface);
    }
}

.alarmFlash {
    animation: alarmFlash 3s infinite;
}

@keyframes alarmFlashDigital {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

.alarmFlashDigital {
    animation: alarmFlashDigital 1s 300;
}

@keyframes changeFlash {
    from {
        background-color: #f5cd67;
    }

    to {
        background-color: inherit;
    }
}

.changeFlash {
    animation: changeFlash 1s 3;
}

.dataGridHierarcyClass {
    width: 5px !important;
    padding: 0 !important;
}

#stationsStatusGrid td {
    padding: 0 5px !important;
    border: none;
}

:not(.mud-dark) #stationsStatusGrid .mud-table-row:hover {
    background-color: #565454 !important;
    transition: background-color 0.2s ease;
}

:not(.mud-dark) #stationDigitalStatusGrid .mud-table-row:hover td {
    background-color: #565454 !important;
    transition: background-color 0.2s ease;
}

#stationsStatusGrid th {
    padding: 0 5px !important;
}

#stationsStatusGrid table {
    border-bottom: solid 1px;
}

/* ==========================================================================
   Alarm ekrani gorsel katmani
   --------------------------------------------------------------------------
   Enerya SPA'daki AlarmScreen davranisi temel alindi: seviye rengi + yeni
   alarmlarda yanip sonme. Renkler acex-tokens.css'teki --acex-alarm-* uzerinden
   geliyor; burada hicbir renk yeniden tanimlanmiyor ki tek kaynak korunsun.
   ========================================================================== */

/* Satir tonlamasi -- tabloya bakan operator seviyeyi hucreye bakmadan gormeli.
   Sol kenarlik + cok hafif zemin: MudBlazor'un secim/hover renklerini ezmeyecek
   kadar silik, ama tarama sirasinda fark edilecek kadar belirgin. */
.alarm-row {
    border-left: 4px solid transparent;
}

.alarm-row-1 { border-left-color: var(--acex-alarm-1); background: color-mix(in srgb, var(--acex-alarm-1) 7%, transparent); }
.alarm-row-2 { border-left-color: var(--acex-alarm-2); background: color-mix(in srgb, var(--acex-alarm-2) 9%, transparent); }
.alarm-row-3 { border-left-color: var(--acex-alarm-3); background: color-mix(in srgb, var(--acex-alarm-3) 8%, transparent); }
.alarm-row-4 { border-left-color: var(--acex-alarm-4); background: color-mix(in srgb, var(--acex-alarm-4) 9%, transparent); }

/* Onaylanmamis alarm: sol kenarlik daha kalin. Renk DEGISMIYOR -- seviye rengi
   tek anlam tasimali, onay durumu ayri bir kanaldan (kalinlik) anlatiliyor. */
.alarm-row-unacked {
    border-left-width: 7px;
}

/* Onaylanmis alarm sonuk: dikkat hala acik olanlarda kalsin. */
.alarm-row-acked {
    opacity: 0.62;
}

/* Seviye rozeti -- app.css'teki .alarm-level-chip'i tamamliyor. */
.alarm-level-chip .mud-chip-content,
.alarm-chip-station .mud-chip-content {
    font-weight: var(--acex-weight-bold);
}

.alarm-chip-station {
    color: #fff;
    font-weight: var(--acex-weight-bold);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alarm-chip-station-1 { background: var(--acex-alarm-1) !important; }
.alarm-chip-station-2 { background: var(--acex-alarm-2) !important; color: var(--acex-alarm-2-text) !important; }
.alarm-chip-station-3 { background: var(--acex-alarm-3) !important; }
.alarm-chip-station-4 { background: var(--acex-alarm-4) !important; }

/* Tarih rozetleri: yeni alarmda dolu + yanip sonen, eskisinde sade anahat.
   Enerya'da ilk gorulme yanip soner, son gorulme yalnizca renklenir --
   ayni ayrimi koruyoruz, iki yanip sonen rozet bir arada gurultu yapiyor. */
.alarm-date-chip {
    font-variant-numeric: tabular-nums;
}

.alarm-date-chip-1 { background: var(--acex-alarm-1) !important; color: #fff !important; }
.alarm-date-chip-2 { background: var(--acex-alarm-2) !important; color: var(--acex-alarm-2-text) !important; }
.alarm-date-chip-3 { background: var(--acex-alarm-3) !important; color: #fff !important; }
.alarm-date-chip-4 { background: var(--acex-alarm-4) !important; color: #fff !important; }

/* Sayisal deger: sutunlar arasinda hizalansin diye tabular rakam. */
.alarm-value {
    font-variant-numeric: tabular-nums;
    font-weight: var(--acex-weight-bold);
}

/* Seviye aciklamasi (legend) -- renk tek basina anlam tasimamali. */
.alarm-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.alarm-legend-item {
    align-items: center;
    display: inline-flex;
    font-size: var(--acex-text-xs);
    gap: 6px;
}

.alarm-legend-swatch {
    border-radius: 3px;
    display: inline-block;
    height: 12px;
    width: 12px;
}

/* Hareket hassasiyeti: yanip sonme vestibuler rahatsizligi tetikleyebiliyor.
   Kapatildiginda renk ve kenarlik kaldigi icin bilgi KAYBOLMUYOR. */
@media (prefers-reduced-motion: reduce) {
    .alarm-recent,
    .alarmFlash,
    .alarmFlashDigital,
    .changeFlash {
        animation: none !important;
    }

    .alarm-recent {
        outline: 2px solid var(--acex-alarm-4);
        outline-offset: 1px;
    }
}