/* ═══════════════════════════════════════════════════════════
   LtsLayout — DevExpress LayoutControl karşılığı genel düzen
   (Components/LtsLayout.razor, js/ltsLayout.js). Global yüklenir.
   Renkler app.css tema değişkenlerinden gelir (açık / koyu).
   ═══════════════════════════════════════════════════════════ */

.lts-lc {
    --lts-lc-vurgu: var(--lts-accent, #0d9e6e);
    --lts-lc-vurgu-rgb: var(--lts-accent-rgb, 13, 158, 110);
    --lts-lc-yuzey: var(--lts-surface, #fff);
    --lts-lc-yuzey-2: var(--lts-surface-alt, #f8f9fa);
    --lts-lc-kenar: var(--lts-border-strong, #d8dee7);
    --lts-lc-kenar-acik: var(--lts-border, rgba(0, 0, 0, .07));
    --lts-lc-soluk: var(--lts-text-muted, #6c757d);
    position: relative;
    min-width: 0;
}

    .lts-lc *,
    .lts-lc *::before,
    .lts-lc *::after {
        box-sizing: border-box;
    }

.lts-lc-agac {
    container: lts-lc / inline-size;
    min-width: 0;
}

/* Doldur: üst elemanın yüksekliğini kaplar */
.lts-lc-doldur {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .lts-lc-doldur > .lts-lc-agac {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

        .lts-lc-doldur > .lts-lc-agac > .lts-lc-grup {
            flex: 1 1 auto;
            min-height: 0;
        }

.lts-lc-d {
    position: relative;
    min-width: 0;
}

/* ── Grup ───────────────────────────────────────────────── */

.lts-lc-grup {
    display: flex;
    flex-direction: column;
}

.lts-lc-govde {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
}

.lts-lc-esnek > .lts-lc-govde {
    min-height: 0;
}

.lts-lc-govde.lts-lc-yatay {
    flex-direction: row;
    align-items: stretch;
}

.lts-lc-govde.lts-lc-dikey,
.lts-lc-govde.lts-lc-sekmeli {
    flex-direction: column;
}

.lts-lc-doldur .lts-lc-govde.lts-lc-sekmeli > .lts-lc-d {
    flex: 1 1 auto;
    min-height: 0;
}

.lts-lc-cerceve {
    background: var(--lts-lc-yuzey);
    border: 1px solid var(--lts-lc-kenar);
    border-radius: 8px;
}

    .lts-lc-cerceve > .lts-lc-govde {
        padding: 6px 8px 8px;
    }

.lts-lc-grup-baslik {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: .8rem;
    font-weight: 600;
    border-bottom: 1px solid var(--lts-lc-kenar-acik);
}

.lts-lc-grup:not(.lts-lc-cerceve) > .lts-lc-grup-baslik {
    min-height: 22px;
    padding: 1px 4px;
    font-weight: 400;
    font-size: .7rem;
    border-bottom: 0;
}

.lts-lc-grup-adi {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lts-lc-baslik-giris {
    flex: 1 1 auto;
    min-width: 60px;
    padding: 0 4px;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px dashed var(--lts-lc-kenar);
    border-radius: 4px;
}

.lts-lc-bos-grup {
    flex: 1 1 auto;
    padding: 14px;
    text-align: center;
    font-size: .75rem;
    color: var(--lts-lc-soluk);
    border: 1px dashed var(--lts-lc-kenar);
    border-radius: 6px;
}

/* ── Sekmeli grup ───────────────────────────────────────── */

.lts-lc-sekmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 4px 0 6px;
    border-bottom: 1px solid var(--lts-lc-kenar);
}

.lts-lc-sekme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 5px 12px;
    font-size: .8rem;
    color: var(--lts-lc-soluk);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}

    .lts-lc-sekme:hover {
        color: inherit;
    }

    .lts-lc-sekme.aktif {
        font-weight: 600;
        color: inherit;
        background: var(--lts-lc-yuzey);
        border-color: var(--lts-lc-kenar);
    }


/* ── Öğe ────────────────────────────────────────────────── */

.lts-lc-oge {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lts-lc-etiket {
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--lts-lc-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lts-lc-etiket-sol {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

    .lts-lc-etiket-sol > .lts-lc-etiket {
        flex: 0 0 var(--lts-lc-etiket, 110px);
    }

.lts-lc-icerik {
    flex: 1 1 auto;
    min-width: 0;
}

.lts-lc-oge.lts-lc-esnek {
    min-height: 0;
}

    .lts-lc-oge.lts-lc-esnek > .lts-lc-icerik {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

        /* Esnek öğede içeriğin ilk elemanı kalan yüksekliğe yayılır. */
        .lts-lc-oge.lts-lc-esnek > .lts-lc-icerik > :first-child {
            flex: 1 1 auto;
            min-height: 0;
        }

        .lts-lc-oge.lts-lc-esnek > .lts-lc-icerik > :not(:first-child) {
            flex: 0 0 auto;
        }

.lts-lc-bosluk {
    min-width: 8px;
    min-height: 8px;
}

.lts-lc-soluk {
    color: var(--lts-lc-soluk);
    font-size: .75rem;
}

/* ── Ayırıcı ────────────────────────────────────────────── */

.lts-lc-ayirici {
    flex: 0 0 auto;
    position: relative;
}

.lts-lc-ayirici-yatay {
    width: 8px;
}

.lts-lc-ayirici-dikey {
    height: 6px;
}

.lts-lc-ayirici.boyut {
    touch-action: none;
}

    .lts-lc-ayirici.boyut.lts-lc-ayirici-yatay {
        cursor: col-resize;
    }

    .lts-lc-ayirici.boyut.lts-lc-ayirici-dikey {
        cursor: row-resize;
    }

    .lts-lc-ayirici.boyut::after {
        content: "";
        position: absolute;
        border-radius: 2px;
        background: transparent;
        transition: background .15s;
    }

    .lts-lc-ayirici.boyut.lts-lc-ayirici-yatay::after {
        top: 4px;
        bottom: 4px;
        left: 3px;
        width: 2px;
    }

    .lts-lc-ayirici.boyut.lts-lc-ayirici-dikey::after {
        left: 4px;
        right: 4px;
        top: 2px;
        height: 2px;
    }

    .lts-lc-ayirici.boyut:hover::after,
    .lts-lc-ayirici.aktif::after,
    .lts-lc-duzen .lts-lc-ayirici.boyut::after {
        background: rgba(var(--lts-lc-vurgu-rgb), .55);
    }

body.lts-lc-boyut-yatay,
body.lts-lc-boyut-yatay * {
    cursor: col-resize !important;
    user-select: none !important;
}

body.lts-lc-boyut-dikey,
body.lts-lc-boyut-dikey * {
    cursor: row-resize !important;
    user-select: none !important;
}

/* ── Özelleştirme modu ──────────────────────────────────── */

.lts-lc-duzen .lts-lc-oge,
.lts-lc-duzen .lts-lc-bosluk {
    padding: 2px;
    cursor: grab;
    border-radius: 4px;
    outline: 1px dashed rgba(var(--lts-lc-vurgu-rgb), .6);
    outline-offset: 0;
}

.lts-lc-duzen .lts-lc-bosluk {
    min-height: 26px;
    background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(var(--lts-lc-vurgu-rgb), .07) 6px 12px);
}

.lts-lc-duzen .lts-lc-grup:not(.lts-lc-cerceve) {
    outline: 1px dotted var(--lts-lc-kenar);
    outline-offset: 1px;
    border-radius: 4px;
}

.lts-lc-duzen .lts-lc-grup-baslik {
    cursor: grab;
}

/* Özelleştirmede editörler kullanılmaz; öğenin tamamı sürüklenir. */
.lts-lc-duzen .lts-lc-icerik {
    pointer-events: none;
    user-select: none;
    opacity: .8;
}

.lts-lc-oge-arac {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 0 3px;
    font-size: .68rem;
    border-radius: 3px;
    background: rgba(var(--lts-lc-vurgu-rgb), .12);
}

.lts-lc-oge-adi {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lts-lc-tutamac {
    color: var(--lts-lc-soluk);
}

.lts-lc-eylemler {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 1px;
}

    .lts-lc-eylemler button {
        padding: 0 4px;
        font-size: .72rem;
        line-height: 1.5;
        color: inherit;
        background: transparent;
        border: 0;
        border-radius: 3px;
        cursor: pointer;
    }

        .lts-lc-eylemler button:hover {
            background: rgba(var(--lts-lc-vurgu-rgb), .2);
        }

.lts-lc-pasif > .lts-lc-icerik {
    font-style: italic;
}

.lts-lc-kaynak {
    opacity: .35;
}

/* Sürükleme (js/ltsLayout.js): hayalet etiket ve bırakma göstergesi body'ye eklenir */
.lts-lc-duzen [data-lc-kaynak] {
    touch-action: none;
}

body.lts-lc-surukleme,
body.lts-lc-surukleme * {
    cursor: grabbing !important;
    user-select: none !important;
}

.lts-lc-hayalet {
    position: fixed;
    z-index: 2000;
    max-width: 240px;
    padding: 3px 10px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    background: var(--lts-accent, #0d9e6e);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    pointer-events: none;
    opacity: .92;
}

.lts-lc-gosterge {
    position: fixed;
    z-index: 1999;
    display: none;
    pointer-events: none;
    border-radius: 3px;
}

    .lts-lc-gosterge.kenar {
        background: var(--lts-accent, #0d9e6e);
        box-shadow: 0 0 0 1px #fff, 0 0 8px rgba(var(--lts-accent-rgb, 13, 158, 110), .8);
    }

    .lts-lc-gosterge.icine {
        background: rgba(var(--lts-accent-rgb, 13, 158, 110), .12);
        outline: 2px solid var(--lts-accent, #0d9e6e);
    }

    .lts-lc-gosterge.gizle {
        background: rgba(220, 53, 69, .08);
        outline: 2px dashed #dc3545;
    }
/* ── Özelleştirme penceresi (Customization Form) ─────────── */

.lts-lc-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1085;
    width: 290px;
    max-width: calc(100vw - 32px);
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    font-size: .78rem;
    color: var(--lts-text, inherit);
    background: var(--lts-lc-yuzey);
    border: 1px solid var(--lts-lc-kenar);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}


.lts-lc-panel-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: .85rem;
}

.lts-lc-panel-ipucu {
    color: var(--lts-lc-soluk);
    line-height: 1.35;
}

.lts-lc-panel-bolum {
    margin-top: 2px;
    font-weight: 600;
}

.lts-lc-panel-liste {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lts-lc-panel-gizli {
    min-height: 32px;
    max-height: 30vh;
    overflow-y: auto;
}

.lts-lc-cip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 8px;
    cursor: grab;
    background: var(--lts-lc-yuzey-2);
    border: 1px solid var(--lts-lc-kenar);
    border-radius: 6px;
}

    .lts-lc-cip button {
        padding: 0 5px;
        color: inherit;
        background: transparent;
        border: 0;
        border-radius: 3px;
        cursor: pointer;
    }

        .lts-lc-cip button:hover {
            background: rgba(var(--lts-lc-vurgu-rgb), .2);
        }

.lts-lc-panel-alt {
    display: flex;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--lts-lc-kenar-acik);
}

/* ── Dar ekran: yatay gruplar alt alta ───────────────────── */

@container lts-lc (max-width: 640px) {
    .lts-lc-govde.lts-lc-yatay {
        flex-direction: column;
    }

        .lts-lc-govde.lts-lc-yatay > .lts-lc-d {
            flex: 0 0 auto !important;
            min-width: 0 !important;
        }

        .lts-lc-govde.lts-lc-yatay > .lts-lc-ayirici {
            width: auto;
            height: 6px;
            pointer-events: none;
        }

            .lts-lc-govde.lts-lc-yatay > .lts-lc-ayirici::after {
                display: none;
            }

    .lts-lc-doldur .lts-lc-oge.lts-lc-esnek {
        min-height: 320px;
    }
}