/* =====================================================================
   mlthematic.css — Tematik harita sihirbazı ve lejantı
   ===================================================================== */

/* Tema değişkenleri: şablonun karanlık modu (body[data-pc-theme=dark])
   Bootstrap'ın --bs-secondary-color / --bs-secondary-bg değişkenlerini
   override ETMİYOR; onlara yaslanılırsa soluk metinler karanlıkta açık-mod
   koyu rengiyle kalıp kayboluyor. Bu yüzden renkler burada kendi
   değişkenlerimizden okunur ve karanlık değerleri açıkça verilir. */
:root {
    --mltema-ink: #1d2630;
    --mltema-muted: #5b6b79;
    --mltema-soft: #f4f7fa;
    --mltema-cizgi: #e2e8f0;
    --mltema-bar: #2a78d6;
}

[data-pc-theme=dark] {
    --mltema-ink: rgba(255, 255, 255, .85);
    --mltema-muted: #97a2ae;
    --mltema-soft: #253039;
    --mltema-cizgi: #303f50;
    --mltema-bar: #3987e5;
}

/* Şablon .form-label'ı --pc-heading-color'a bağlıyor ve bu modalda karanlıkta
   koyu kalabiliyor; sihirbaz içindeki etiketler kendi mürekkebimizi kullanır. */
#temaModal .form-label {
    color: var(--mltema-ink);
}

/* Preset .btn-outline-primary'nin dinlenme metnini beyaz tanımlıyor (şablon
   hatası); açık zeminde kapsam anahtarının seçili olmayan yüzü kayboluyordu. */
#temaModal .btn-group .btn-outline-primary {
    --bs-btn-color: var(--bs-primary, #4680ff);
}

/* ---- Adım göstergesi ---- */
.ml-tema-adimlar {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--mltema-cizgi);
}

.ml-tema-adim {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mltema-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

    .ml-tema-adim.aktif {
        color: var(--bs-primary, #4680ff);
        border-bottom-color: var(--bs-primary, #4680ff);
    }

.ml-tema-adim-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mltema-soft);
    color: var(--mltema-ink);
    font-size: 12px;
    font-weight: 600;
}

.ml-tema-adim.aktif .ml-tema-adim-no {
    background: var(--bs-primary, #4680ff);
    color: #fff;
}

.ml-tema-adim.tamam .ml-tema-adim-no {
    background: var(--bs-success, #2ca87f);
    color: #fff;
}

.ml-tema-body {
    min-height: 380px;
    max-height: min(64vh, 560px);
    overflow-y: auto;
}

/* ---- Adım 1: kolon listesi ---- */
.ml-tema-grup-baslik {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mltema-muted);
    margin: 12px 0 6px;
}

    .ml-tema-grup-baslik:first-child {
        margin-top: 0;
    }

.ml-tema-kolon {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    margin-bottom: 4px;
    border: 1px solid var(--mltema-cizgi);
    border-radius: 8px;
    background: transparent;
    transition: border-color .12s, background .12s;
}

    .ml-tema-kolon:hover {
        border-color: var(--bs-primary, #4680ff);
    }

    .ml-tema-kolon.secili {
        border-color: var(--bs-primary, #4680ff);
        background: rgba(var(--bs-primary-rgb, 70, 128, 255), .07);
    }

.ml-tema-kolon-ad {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mltema-ink);
}

.ml-tema-kolon-aciklama {
    display: block;
    font-size: 11.5px;
    color: var(--mltema-muted);
}

/* ---- Adım 1: veri özeti ---- */
.ml-tema-ozet {
    border: 1px solid var(--mltema-cizgi);
    border-radius: 8px;
    padding: 14px;
    min-height: 260px;
}

.ml-tema-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    color: var(--mltema-muted);
    font-size: 13px;
}

.ml-tema-kutular {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ml-tema-kutu {
    flex: 1 1 0;
    min-width: 78px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--mltema-soft);
}

.ml-tema-kutu-deger {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mltema-ink);
}

.ml-tema-kutu-etiket {
    display: block;
    font-size: 11px;
    color: var(--mltema-muted);
}

.ml-tema-grafik-baslik {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mltema-muted);
    margin-bottom: 8px;
}

/* Dağılım çubukları — tek renk: bu adımda renk henüz anlam taşımıyor.
   Değerler çubuğun yanında yazılı (doğrudan etiket). */
.ml-tema-cubuk-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
}

.ml-tema-cubuk-ad {
    flex: 0 0 34%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mltema-ink);
}

.ml-tema-cubuk {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: var(--mltema-soft);
    overflow: hidden;
}

    .ml-tema-cubuk > span {
        display: block;
        height: 100%;
        border-radius: 4px;
        background: var(--mltema-bar);
    }

.ml-tema-cubuk-deger {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mltema-muted);
}

.ml-tema-histogram {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 96px;
    padding: 0 2px;
}

.ml-tema-sutun {
    flex: 1 1 0;
    border-radius: 3px 3px 0 0;
    background: var(--mltema-bar);
    min-height: 2px;
}

.ml-tema-eksen {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--mltema-muted);
}

.ml-tema-not {
    font-size: 11.5px;
    color: var(--mltema-muted);
}

/* ---- Adım 2: görselleştirme kartları ---- */
.ml-tema-gorseller {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.ml-tema-gorsel {
    position: relative;
    text-align: left;
    padding: 14px;
    border: 1px solid var(--mltema-cizgi);
    border-radius: 10px;
    background: transparent;
    transition: border-color .12s, background .12s;
}

    .ml-tema-gorsel:hover:not(.pasif) {
        border-color: var(--bs-primary, #4680ff);
    }

    .ml-tema-gorsel.secili {
        border-color: var(--bs-primary, #4680ff);
        background: rgba(var(--bs-primary-rgb, 70, 128, 255), .07);
    }

    .ml-tema-gorsel.pasif {
        opacity: .5;
    }

    .ml-tema-gorsel > i {
        font-size: 22px;
        color: var(--bs-primary, #4680ff);
    }

.ml-tema-gorsel-ad {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mltema-ink);
}

.ml-tema-gorsel-aciklama {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mltema-muted);
}

.ml-tema-rozet {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 6px;
    border-radius: 50rem;
    background: var(--mltema-soft);
    font-size: 10.5px;
    color: var(--mltema-muted);
}

/* ---- Adım 3: sınıflandırma ---- */
.ml-tema-yontem {
    display: block;
    padding: 8px 12px;
    margin-bottom: 5px;
    border: 1px solid var(--mltema-cizgi);
    border-radius: 8px;
    cursor: pointer;
}

    .ml-tema-yontem.secili {
        border-color: var(--bs-primary, #4680ff);
        background: rgba(var(--bs-primary-rgb, 70, 128, 255), .07);
    }

    .ml-tema-yontem input {
        display: none;
    }

.ml-tema-yontem-ad {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mltema-ink);
}

.ml-tema-yontem-aciklama {
    display: block;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--mltema-muted);
}

/* ---- Adım 3: paletler ---- */
.ml-tema-paletler {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.ml-tema-palet {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
}

    .ml-tema-palet:hover {
        border-color: var(--mltema-cizgi);
    }

    .ml-tema-palet.secili {
        border-color: var(--bs-primary, #4680ff);
        background: rgba(var(--bs-primary-rgb, 70, 128, 255), .07);
    }

.ml-tema-palet-serit {
    display: flex;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
}

    /* Bitişik dolgular arasında yüzey boşluğu: sınıflar birbirine akmasın */
    .ml-tema-palet-serit > span {
        flex: 1 1 0;
        border-right: 2px solid var(--bs-body-bg, #fff);
    }

        .ml-tema-palet-serit > span:last-child {
            border-right: 0;
        }

.ml-tema-palet-ad {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--mltema-ink);
}

    .ml-tema-palet-ad em {
        font-style: normal;
        color: var(--mltema-muted);
    }

/* Özel palet: şerit kutucukları renk seçicidir */
.ml-tema-palet-ozel {
    cursor: pointer;
}

    .ml-tema-palet-ozel.secili .ml-tema-palet-serit {
        height: 24px;
    }

.ml-tema-ozel-renk {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-right: 2px solid var(--bs-body-bg, #fff);
    background: none;
    cursor: pointer;
}

    .ml-tema-ozel-renk:last-child {
        border-right: 0;
    }

    .ml-tema-ozel-renk::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .ml-tema-ozel-renk::-webkit-color-swatch {
        border: 0;
        border-radius: 0;
    }

    .ml-tema-ozel-renk::-moz-color-swatch {
        border: 0;
    }

/* ---- Adım 3: önizleme ---- */
.ml-tema-onizleme {
    border: 1px solid var(--mltema-cizgi);
    border-radius: 8px;
    padding: 10px;
    max-height: 340px;
    overflow-y: auto;
}

.ml-tema-onizleme-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--mltema-ink);
}

/* ---- Harita lejantı ---- */
/* Lejant paneli (legend-styles.css) karanlık temada da beyaz zeminli;
   buradaki renkler bilerek sabit, tema değişkenine bağlanmaz. */
.ml-tema-legend {
    font-size: 11.5px;
    color: #212529;
}

.ml-tema-legend-baslik {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 5px;
}

.ml-tema-legend-kapat {
    flex: 0 0 auto;
    padding: 1px;
    font-size: 13px;
    color: #6c757d;
    cursor: pointer;
}

    .ml-tema-legend-kapat:hover {
        color: #d03b3b;
    }

.ml-tema-legend-alt {
    display: block;
    font-weight: 400;
    font-size: 10.5px;
    color: #6c757d;
}

/* Isı haritası lejantı: sürekli rampa (sınıf kutucuğu yok) */
.ml-tema-legend-serit {
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.ml-tema-legend-serit-etiket {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 10.5px;
    color: #6c757d;
}

.ml-tema-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 3px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.5;
}

    .ml-tema-legend-row:hover {
        background: rgba(0, 0, 0, .05);
    }

    .ml-tema-legend-row.ml-tema-kapali {
        opacity: .4;
        text-decoration: line-through;
    }

.ml-tema-swatch {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.ml-tema-etiket {
    flex: 1 1 auto;
}

.ml-tema-adet {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #6c757d;
}

/* ---- Harita üstü değer okuması ---- */
/* Palette'in üç slotu yüzeye karşı 3:1 altında; kural gereği değerin
   okunabildiği ikinci bir kanal şart — lejant ve bu okuma o kanal. */
.ml-tema-okuma {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: none;
    padding: 5px 12px;
    border-radius: 50rem;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mltema-cizgi);
    box-shadow: 0 4px 14px rgba(27, 46, 94, .16);
    font-size: 12px;
    color: var(--mltema-ink);
    white-space: nowrap;
    pointer-events: none;
}

.ml-tema-okuma-ad {
    color: var(--mltema-muted);
    margin-right: 6px;
}