/* =====================================================================
   STAGEWISEPRO — ORTAK GÖRÜNÜM
   Telefon öncelikli: her şey önce 380 px'e göre yazıldı, geniş ekran @media ile açılır.

   Renk kuralı:
   - Marka yeşili (#9BC53D) ve turuncu (#E8832B) logodan gelir.
   - Turuncu arayüzde SADECE "eksik kompanzasyon" anlamında kullanılır; süs değildir.
   - Durum renkleri anlam taşır; kartın kendisi nötrdür. Kullanıcı listede sorunlu panoyu
     tek bakışta görsün diye renk yalnızca rozet, bant ve kademe karelerinde bulunur.
   Sayfaya özel stiller EnergyWisePro'daki gibi her sayfanın kendi <style> bloğundadır.
   ===================================================================== */

:root {
    /* Marka */
    /* Marka — EnergyWisePro'daki yellowgreen + lacivert ikilisinin StageWisePro karşılığı */
    --swp-yesil: #9BC53D; /* çerçeve, aktif menü, ana düğme (EWP: #9ACD32) */
    --swp-yesil-koyu: #3F6B12; /* tablo başlığı, koyu düğme, link (EWP: #1A365D) */
    --swp-yesil-zemin: #EEF5DF;
    --swp-turuncu: #E8832B; /* sadece logo */

    /* Nötr */
    --swp-murekkep: #1F2B36;
    --swp-gri: #5D6873;
    --swp-gri-acik: #8C969F;
    --swp-cizgi: #E1E5DD;
    --swp-zemin: #F3F5F1;
    --swp-kart: #FFFFFF;
    /* Durum (anlam taşır) */
    --swp-normal: #2E8F55;
    --swp-yaklasiyor: #B98200;
    --swp-asildi: #C8352D;
    --swp-eksik: #D9701F;
    --swp-asiri: #2F67C4;
    --swp-veriyok: #8C969F;
    /* Kademe */
    --swp-kd-devrede: #2E8F55;
    --swp-kd-sabit: #1F2B36;
    --swp-kd-devredisi: #CBD2D8;
    --swp-kd-arizali: #C8352D;
    /* Yazı */
    --swp-font-govde: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --swp-font-baslik: "Montserrat", "Segoe UI", system-ui, sans-serif;
    /* Ölçü */
    --swp-ust-yukseklik: 56px;
    --swp-alt-yukseklik: 64px;
    --swp-yan-genislik: 240px;
    --swp-radius-kart: 14px;
    --swp-radius-kucuk: 8px;
}

html, body {
    margin: 0;
    background: #FFFFFF;
    color: var(--swp-murekkep);
    font-family: var(--swp-font-govde);
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

a { color: var(--swp-yesil-koyu); }

:focus-visible { outline: 3px solid var(--swp-yesil); outline-offset: 2px; }

h1, h2, h3, .swp-sayi {
    font-family: var(--swp-font-baslik);
    font-variant-numeric: tabular-nums;
}

/* Radzen bileşenleri de aynı yazı karakterini kullansın */
.rz-dropdown, .rz-inputtext, .rz-button, .rz-tabview, .rz-datatable, .rz-chart text {
    font-family: var(--swp-font-govde) !important;
}

/* iOS: 16px altındaki input'a odaklanınca sayfa yakınlaşmasın */
input, select, textarea, .rz-inputtext, .rz-dropdown-label { font-size: 16px !important; }

/* =====================================================================
   KABUK: üst bar + yan menü + gövde + alt sekme
   ===================================================================== */

.swp-ust {
    position: sticky;
    top: 0;
    z-index: 900;
    height: calc(var(--swp-ust-yukseklik) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--swp-kart);
    border-bottom: 1px solid var(--swp-cizgi);
}

.swp-menu-dugme {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--swp-murekkep);
    border-radius: var(--swp-radius-kucuk);
    display: none;   /* telefonda alt sekmedeki "Menü" kullanılır */
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.swp-marka {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding-left: 8px;
}

.swp-marka img { width: 32px; height: 32px; }

.swp-marka-ad {
    font-family: var(--swp-font-baslik);
    font-weight: 800;
    font-size: 18px;
    color: var(--swp-yesil);
    letter-spacing: -0.2px;
}

.swp-marka-ad b { color: var(--swp-turuncu); font-weight: 800; }

.swp-musteri {
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    color: var(--swp-gri);
    text-align: right;
    line-height: 1.2;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swp-yan {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 300px);
    z-index: 1100;
    background: var(--swp-kart);
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
    padding-top: env(safe-area-inset-top);
    box-shadow: 4px 0 24px rgba(31, 43, 54, .18);
}

.swp-perde {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(31, 43, 54, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.menu-acik .swp-yan { transform: translateX(0); }
.menu-acik .swp-perde { opacity: 1; pointer-events: auto; }

.swp-govde {
    padding: 14px 12px calc(var(--swp-alt-yukseklik) + 20px + env(safe-area-inset-bottom));
    max-width: 1440px;
}

.swp-alt-sekme {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    height: calc(var(--swp-alt-yukseklik) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--swp-kart);
    border-top: 1px solid var(--swp-cizgi);
}

.swp-alt-sekme a, .swp-alt-sekme button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--swp-gri);
    font: 600 12px var(--swp-font-govde);
    text-decoration: none;
    cursor: pointer;
}

.swp-alt-sekme i { font-size: 24px; }
.swp-alt-sekme a.active { color: var(--swp-yesil-koyu); }
.swp-alt-sekme a.active i { font-variation-settings: "FILL" 1; }

/* Geniş ekran: yan menü sabit, alt sekme gizli */
@media (min-width: 900px) {
    .swp-yan {
        transform: none;
        width: var(--swp-yan-genislik);
        top: var(--swp-ust-yukseklik);
        box-shadow: none;
        border-right: 1px solid var(--swp-cizgi);
        z-index: 800;
        padding-top: 0;
    }

    .swp-perde, .swp-alt-sekme { display: none; }

    .swp-govde {
        margin-left: var(--swp-yan-genislik);
        padding: 20px 24px 32px;
    }
}

/* Bağlantı yeniden kuruluyor ekranı — Blazor sınıfları ekler */
.swp-yeniden-baglan {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(243, 245, 241, .92);
    align-items: center;
    justify-content: center;
}

.swp-yeniden-baglan.components-reconnect-show,
.swp-yeniden-baglan.components-reconnect-retrying,
.swp-yeniden-baglan.components-reconnect-failed,
.swp-yeniden-baglan.components-reconnect-rejected { display: flex; }

.swp-yeniden-baglan-kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--swp-gri);
}

.swp-yeniden-baglan-kutu img { width: 64px; height: 64px; animation: swp-nabiz 1.4s ease-in-out infinite; }

@keyframes swp-nabiz { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
    .swp-yan, .swp-perde { transition: none; }
    .swp-yeniden-baglan-kutu img { animation: none; }
}

/* =====================================================================
   ORTAK PARÇALAR
   ===================================================================== */

.swp-sayfa-baslik {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 2px 14px;
}

.swp-sayfa-baslik h1 { font-size: 22px; font-weight: 800; margin: 0; }
.swp-sayfa-baslik .swp-alt { font-size: 14px; color: var(--swp-gri); }

.swp-kart {
    background: var(--swp-kart);
    border: 2px solid var(--swp-yesil);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(31, 43, 54, .05);
}

.swp-bos {
    padding: 48px 16px;
    text-align: center;
    color: var(--swp-gri);
    font-weight: 600;
}

.swp-hata {
    background: #FBE9E7;
    color: var(--swp-asildi);
    border-radius: var(--swp-radius-kucuk);
    padding: 10px 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.swp-basari {
    background: #E6F3EA;
    color: var(--swp-normal);
    border-radius: var(--swp-radius-kucuk);
    padding: 10px 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.swp-not { font-size: 14px; color: var(--swp-gri); }

.swp-dugme {
    min-height: 44px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--swp-radius-kucuk);
    background: var(--swp-yesil);
    color: var(--swp-murekkep);
    font: 700 15px var(--swp-font-govde);
    cursor: pointer;
}

.swp-dugme:disabled { opacity: .5; cursor: not-allowed; }
.swp-dugme.ikincil { background: var(--swp-kart); border: 1.5px solid var(--swp-cizgi); }

/* Durum rozeti */
.swp-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.swp-rozet::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.durum-normal { background: #E6F3EA; color: var(--swp-normal); }
.durum-eksik { background: #FCEBDD; color: #A8520F; }
.durum-asiri { background: #E5EDFA; color: var(--swp-asiri); }
.durum-alarm { background: #FBE9E7; color: var(--swp-asildi); }
.durum-veriyok { background: #EDEFF1; color: var(--swp-gri); }

/* Oran seviyesi metin rengi */
.oran-iyi { color: var(--swp-normal); }
.oran-yaklasiyor { color: var(--swp-yaklasiyor); }
.oran-asildi { color: var(--swp-asildi); }
.oran-bilinmiyor { color: var(--swp-gri-acik); }

/* Kademe kareleri */
.kd { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.kd-devrede { background: var(--swp-kd-devrede); }
.kd-sabit { background: var(--swp-kd-sabit); }
.kd-devredisi { background: var(--swp-kd-devredisi); }
.kd-arizali { background: var(--swp-kd-arizali); }
.kd-bos { background: transparent; border: 1.5px dashed var(--swp-kd-devredisi); }

/* Pano seçici satırı (Ceza, Kademe Analizi, Enerji Kalitesi) */
.swp-secim-satiri {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.swp-secim-satiri label { display: block; font-size: 13px; font-weight: 700; color: var(--swp-gri); margin-bottom: 4px; }

@media (min-width: 700px) {
    .swp-secim-satiri { grid-template-columns: repeat(auto-fit, minmax(180px, 220px)) auto; align-items: end; }
}

/* Radzen açılır listeleri opak (EnergyWisePro'daki düzeltme) */
.rz-dropdown-panel, .rz-multiselect-panel {
    background-color: #fff !important;
    z-index: 99999 !important;
    box-shadow: 0 6px 20px rgba(31, 43, 54, .25) !important;
}

/* =====================================================================
   TEKRAR KULLANILAN BİLEŞENLER
   ===================================================================== */

/* ---- ReaktifBant.razor (her kartta tekrar etmesin diye burada) ---- */
.rb { display: flex; flex-direction: column; gap: 6px; }
.rb-ust { display: flex; justify-content: space-between; align-items: baseline; }
.rb-ad { font-size: 14px; font-weight: 700; color: var(--swp-gri); }
.rb-deger { font-family: var(--swp-font-baslik); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.rb-bant { position: relative; height: 12px; border-radius: 6px; background: #E9ECE6; overflow: hidden; }
.rb-yaklasma { position: absolute; top: 0; bottom: 0; background: #F6E7B8; }
.rb-dolu { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.rb-dolu.oran-iyi { background: var(--swp-normal); }
.rb-dolu.oran-yaklasiyor { background: var(--swp-yaklasiyor); }
.rb-dolu.oran-asildi { background: var(--swp-asildi); }
.rb-sinir { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--swp-murekkep); }
.rb-alt { font-size: 13px; color: var(--swp-gri); }
.rb-kucuk .rb-deger { font-size: 18px; }
.rb-kucuk .rb-bant { height: 9px; }

/* ---- KademeSerit.razor (her kartta tekrar etmesin diye burada) ---- */
.ks { display: flex; flex-wrap: wrap; gap: 4px; }

/* =====================================================================
   TABLO — EnergyWisePro'daki lacivert başlıklı tabloların StageWisePro hali
   ===================================================================== */
.swp-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

    .swp-tablo thead th {
        background: var(--swp-yesil-koyu);
        color: #fff;
        padding: 9px 10px;
        font-weight: 700;
        text-align: center;
        position: sticky;
        top: 0;
    }

    .swp-tablo tbody td {
        padding: 9px 10px;
        text-align: center;
        border-bottom: 1px solid var(--swp-cizgi);
    }

    .swp-tablo tbody tr:hover {
        background: #F7F9F3;
    }

/* =====================================================================
   AYARLAR — liste sayfası ve alt sayfa başlığı
   ===================================================================== */
.ay-gruplar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 900px;
}

@media (min-width: 900px) {
    .ay-gruplar {
        grid-template-columns: 1fr 1fr;
    }
}

.ay-grup {
    background: var(--swp-kart);
    border: 2px solid var(--swp-yesil);
    border-radius: 12px;
    overflow: hidden;
}

    .ay-grup h2 {
        margin: 0;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        background: var(--swp-yesil-koyu);
    }

.ay-oge {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 16px;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid var(--swp-cizgi);
}

.ay-grup h2 + .ay-oge {
    border-top: none;
}

.ay-oge:hover {
    background: #F7F9F3;
}

.ay-oge > i:first-child {
    font-size: 26px;
    color: var(--swp-yesil-koyu);
}

.ay-oge b {
    display: block;
    font-weight: 700;
}

.ay-oge span {
    display: block;
    font-size: 13px;
    color: var(--swp-gri);
}

.ay-oge .ay-ok {
    margin-left: auto;
    font-size: 24px;
    color: var(--swp-gri-acik);
    font-style: normal;
}

.ay-ust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .ay-ust h1 {
        font-size: 20px;
        font-weight: 800;
        margin: 0;
    }

.ay-geri {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    text-decoration: none;
    color: var(--swp-murekkep);
}

/* =====================================================================
   YAY GÖSTERGE
   ===================================================================== */
.yg {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.yg-baslik {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    color: var(--swp-gri);
}

.yg-govde {
    width: 100%;
    max-width: 200px;
    text-align: center;
}

.yg-yay {
    width: 100%;
    display: block;
}

.yg-deger {
    font-family: var(--swp-font-baslik);
    font-size: 24px;
    font-weight: 800;
    margin-top: -36px;
    font-variant-numeric: tabular-nums;
}

.yg-minmax {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--swp-gri-acik);
    padding: 2px 8px 0;
}

.yg-alt {
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--swp-cizgi);
    font-size: 12px;
    color: var(--swp-gri);
    text-align: center;
}

/* Renkli sayı kutuları — EnergyWisePro ana sayfadaki 4 / 1 / 0 / 0 kutularıyla aynı renkler */
.sk-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.sk {
    border-radius: 6px;
    padding: 10px 6px;
    text-align: center;
    color: #111;
    cursor: help;
}

    .sk b {
        display: block;
        font-family: var(--swp-font-baslik);
        font-size: 28px;
        font-weight: 800;
        line-height: 1.1;
    }

    .sk span {
        font-size: 12px;
        font-weight: 700;
    }

.sk-yesil {
    background: #C6E84A;
}

.sk-sari {
    background: #FFE84A;
}

.sk-kirmizi {
    background: #FF8A80;
}

.sk-gri {
    background: #C9CED3;
}

/* Menü resim ikonları */
.mi-resim {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.swp-alt-sekme .mi-resim {
    width: 24px;
    height: 24px;
}


/* =====================================================================
   ORTAK PANO SEÇİCİ ve TARİH ARALIĞI
   ===================================================================== */
.ps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.ps-ad {
    font-family: var(--swp-font-baslik);
    font-weight: 800;
    font-size: 20px;
}

.ps-cipler {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.ps-cip {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 2px solid var(--swp-cizgi);
    background: #fff;
    color: var(--swp-murekkep);
    font: 700 14px var(--swp-font-govde);
    cursor: pointer;
}

    .ps-cip.secili {
        background: var(--swp-yesil);
        border-color: var(--swp-yesil);
    }

.swp-grup {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1.5px solid var(--swp-cizgi);
    border-radius: 8px;
    overflow: hidden;
}

    .swp-grup button {
        min-height: 36px;
        padding: 0 14px;
        border: none;
        background: #fff;
        font: 600 14px var(--swp-font-govde);
        color: var(--swp-gri);
        cursor: pointer;
    }

        .swp-grup button + button {
            border-left: 1.5px solid var(--swp-cizgi);
        }

        .swp-grup button.secili {
            background: var(--swp-yesil);
            color: var(--swp-murekkep);
            font-weight: 700;
        }

.ta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ta-ozel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

    .ta-ozel label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 13px;
        font-weight: 700;
        color: var(--swp-gri);
    }

    .ta-ozel input {
        min-height: 44px;
        border: 1.5px solid var(--swp-cizgi);
        border-radius: 8px;
        padding: 0 10px;
        font: 16px var(--swp-font-govde);
    }

.swp-bolum-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--swp-font-baslik);
    font-weight: 800;
    font-size: 16px;
    margin: 0;
}

    .swp-bolum-baslik span {
        margin-left: auto;
        font-family: var(--swp-font-govde);
        font-weight: 600;
        font-size: 13px;
        color: var(--swp-gri);
    }

/* Abonelik bitmek üzere şeridi */
.swp-abonelik-serit {
    display: block;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #FFF1DE;
    color: #8A4B00;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}