:root {
    --ls-topbar-h: 52px;
    --ls-sidebar-w: 220px;
    --ls-accent: #194F9D;
    --ls-accent-rgb: 25, 79, 157;
}

.ls-shell { min-height: 100vh; }

.ls-topbar {
    height: var(--ls-topbar-h);
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ls-brand { color: var(--ls-accent); font-size: 1.1rem; letter-spacing: .3px; }

.ls-body { min-height: calc(100vh - var(--ls-topbar-h)); }

.ls-sidebar {
    width: var(--ls-sidebar-w);
    min-width: var(--ls-sidebar-w);
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.ls-navgroup { margin-bottom: .75rem; }

.ls-navhead {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bs-secondary-color);
    padding: .25rem .5rem;
    font-weight: 600;
}

.ls-navlink {
    display: block;
    padding: .35rem .6rem;
    border-radius: var(--ls-radius-md);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .92rem;
}

.ls-navlink:hover { background: var(--bs-secondary-bg); }

.ls-navlink.active {
    background: var(--ls-accent);
    color: #fff;
}

/* ───────────────────────── LOGIN ─────────────────────────
   Markalı, atmosferik giriş ekranı — radial accent glow + maskeli grid deseni,
   ortalanmış marka chip'i + cam (blur) kart. Light + dark token-tabanlı. */
/* NOT: Bu atmosferik zemin (radial glow + maskeli grid) YALNIZ giriş ekranına aittir (.ls-login;
   EmptyLayout). İçerik sayfalarına ASLA uygulanmaz (MainLayout .ls-shell/.ls-main düz var(--bs-body-bg)).
   Geri bildirim: "çok koyu + tüm sayfayı kaplıyor" → opaklık belirgin düşürüldü, desen inceltildi,
   maske erkenden soldurulup merkeze toplandı (dekoratif, göze batmayan). */
.ls-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden;
    /* Tek SİMETRİK üst-merkez glow (asimetrik köşe blob'ları kaldırıldı — "tam sayfa ya da hiç"). */
    background:
        radial-gradient(72rem 44rem at 50% -18%, rgba(var(--ls-accent-rgb), .07), transparent 62%),
        var(--bs-body-bg);
}
[data-bs-theme="dark"] .ls-login {
    background:
        radial-gradient(72rem 44rem at 50% -18%, rgba(var(--ls-accent-rgb), .13), transparent 64%),
        var(--bs-body-bg);
}
/* İnce grid deseni — TAM SAYFA, EŞİT (maske YOK → merkez-blob yerine baştan sona düzgün desen). */
.ls-login::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(var(--ls-accent-rgb), .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--ls-accent-rgb), .035) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: .6;
}
[data-bs-theme="dark"] .ls-login::before {
    background-image:
        linear-gradient(to right, rgba(var(--ls-accent-rgb), .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--ls-accent-rgb), .05) 1px, transparent 1px);
}

.ls-login-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 408px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Dil seçici: köşede pill segment ── */
.ls-login-lang {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    display: inline-flex;
    gap: .15rem;
    padding: .2rem;
    border-radius: var(--ls-radius-pill);
    background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
    border: 1px solid var(--bs-border-color);
    backdrop-filter: blur(8px);
    box-shadow: var(--ls-shadow-sm);
}
.ls-login-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: .18rem .55rem;
    border-radius: var(--ls-radius-pill);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bs-secondary-color);
    text-decoration: none;
    border: 0; background: transparent; cursor: pointer; /* K39(4): <button> (POST form) — link görünümü korunur */
    font-family: inherit; line-height: inherit;
    transition: background var(--ls-trans), color var(--ls-trans);
}
.ls-login-lang-link:hover { color: var(--bs-body-color); }
.ls-login-lang-link.active { background: var(--ls-accent); color: #fff; }
.ls-login-lang-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ls-accent-soft); }

/* ── Marka / logo (kartın üstünde, ortalanmış) ── */
.ls-login-brand {
    text-align: center;
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ls-logo.ls-logo-lg {
    width: 56px;
    height: 56px;
    border-radius: var(--ls-radius-lg);
    font-size: 1.7rem;
    box-shadow: 0 8px 24px var(--ls-accent-soft), 0 2px 6px var(--ls-accent-soft);
    margin-bottom: .85rem;
}
.ls-login-brand-name {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--bs-body-color);
    line-height: 1.2;
}
.ls-login-brand-sub {
    margin-top: .25rem;
    font-size: .9rem;
    color: var(--bs-secondary-color);
}

/* Giriş sayfası sürüm künyesi (kabuk dışı; ERP Standardı 15 / Y-096) */
.ls-login-kunye {
    margin-top: 1rem;
    text-align: center;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* ── Rafine kart (cam) ── */
.ls-login-card {
    position: relative;
    width: 100%;
    padding: 2rem;
    border-radius: var(--ls-radius-lg);
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    backdrop-filter: blur(8px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    /* Katmanlı gölge token'ı (light/dark varyantları :root'ta) — sabit-kodlu çoklu gölge yerine. */
    box-shadow: var(--ls-shadow-xl);
    overflow: hidden;
}
[data-bs-theme="dark"] .ls-login-card {
    background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
}
/* Üst accent şerit */
.ls-login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ls-accent), color-mix(in srgb, var(--ls-accent) 55%, #2bb0ff));
}

/* ── Inputlar (ikon + yükseklik) ── */
.ls-login-field {
    position: relative;
    margin-bottom: 1rem;
}
.ls-login-field > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    font-size: 1rem;
    pointer-events: none;
    transition: color var(--ls-trans);
}
.ls-login-field .form-control {
    height: 46px;
    padding-left: 2.5rem;
    border-radius: var(--ls-radius-md);
}
.ls-login-field:focus-within > i { color: var(--ls-accent); }

/* ── Birincil aksiyon ── */
.ls-login-submit {
    height: 46px;
    border-radius: var(--ls-radius-md);
    font-weight: 600;
    transition: transform var(--ls-trans), box-shadow var(--ls-trans), background var(--ls-trans);
}
.ls-login-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 16px var(--ls-accent-soft); }
.ls-login-submit:active { transform: translateY(0); }

/* ── "veya" ayracı ── */
.ls-login-or {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.4rem 0 .9rem;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.ls-login-or::before,
.ls-login-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}

/* ── Demo girişi ── */
.ls-login-demo-hint {
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .82rem;
    margin-bottom: .6rem;
}
.ls-login-demo {
    display: flex;
    gap: .6rem;
}
.ls-login-demo-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .5rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--ls-radius-md);
    cursor: pointer;
    transition: color var(--ls-trans), border-color var(--ls-trans), background var(--ls-trans);
}
.ls-login-demo-btn i { font-size: .95rem; }
.ls-login-demo-btn:hover {
    color: var(--ls-accent);
    border-style: solid;
    border-color: var(--ls-accent);
    background: var(--ls-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
    .ls-login-submit:hover,
    .ls-login-submit:active { transform: none; }
}

/* Süreç akış diyagramı (dikey stepper) */
.ls-flow { display: flex; flex-direction: column; align-items: center; }
.ls-flow-node {
    width: 100%;
    max-width: 340px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-md);
    padding: .5rem .75rem;
    background: var(--bs-body-bg);
}
.ls-flow-title { font-weight: 600; }
.ls-flow-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.ls-flow-cond { font-size: .78rem; color: var(--ls-accent); }
.ls-flow-arrow { color: var(--bs-secondary-color); line-height: 1; padding: .15rem 0; }
.ls-flow-start { border-left: 4px solid var(--bs-secondary); }
.ls-flow-approval { border-left: 4px solid var(--ls-accent); }
.ls-flow-end { border-left: 4px solid var(--bs-success); }
.ls-flow-other { border-left: 4px solid var(--bs-info); }
.ls-flow-active { box-shadow: 0 0 0 3px var(--ls-accent-soft); border-color: var(--ls-accent); }

@media (max-width: 720px) {
    .ls-sidebar { width: 100%; min-width: 0; }
    .ls-body { flex-direction: column; }
}

/* Sabit-yükseklikli sekmeli panel (grid-stack) — sekme değişince yükseklik ZIPLAMAZ.
   Tüm pane'ler aynı grid hücresinde (1/1) üst üste; pasif pane visibility:hidden (yerini korur). */
.ls-tabstack { display: grid; }
.ls-tabstack > .ls-tabpane { grid-area: 1 / 1; min-width: 0; }
.ls-tabpane.ls-tab-off { visibility: hidden; pointer-events: none; }

/* Rol Düzenle 3-sayfalık modal — sekme gövdesi dock-fill: modal yüksekliğini doldurur,
   içerik taşarsa scroll içerde. Tab-stack zaten en uzun pane'e göre sabitlenir (zıplama yok). */
.kmp-modal-body:has(> .ls-rol-tabbody) { display: flex; flex-direction: column; }
.ls-rol-tabbody { flex: 1 1 auto; min-height: 0; }
.ls-rol-tabbody > .ls-tabpane { overflow: auto; }
.ls-kod { width: 100%; height: 480px; font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .82rem; white-space: pre; tab-size: 2; resize: vertical; }

/* ── Süreç tasarımcı kanvas (drag-to-connect + polish) ── */
.ls-node { height: 48px; border-radius: var(--ls-radius-lg); box-shadow: var(--ls-shadow-xs); transition: box-shadow var(--ls-trans), transform var(--ls-trans); overflow: visible; }
.ls-node:hover { box-shadow: var(--ls-shadow-md); transform: translateY(-1px); }
.ls-node-sel { box-shadow: 0 0 0 2px var(--ls-accent), var(--ls-shadow-md) !important; }
.ls-node-body { padding: 5px 10px; overflow: hidden; }
.ls-node-sub { font-size: .68rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-node-start { border-left: 4px solid var(--bs-secondary); }
.ls-node-end { border-left: 4px solid var(--bs-success); }
.ls-node-approval { border-left: 4px solid var(--ls-accent); }
.ls-node-decision { border-left: 4px solid var(--bs-warning); }
/* Havuz: mor/indigo tonu — havuz/ekip kavramını yansıtır */
.ls-node-havuz { border-left: 4px solid #7c3aed; }
.ls-node-havuz .ls-node-body { background: linear-gradient(90deg, rgba(124,58,237,.06) 0%, transparent 60%); }
/* Integration: teal/yeşilimsi — ERP bağlantısını sembolize eder */
.ls-node-integration { border-left: 4px solid #0891b2; }
.ls-node-integration .ls-node-body { background: linear-gradient(90deg, rgba(8,145,178,.06) 0%, transparent 60%); }
.ls-node-other { border-left: 4px solid var(--bs-info); }
/* ── Bağlantı noktaları (PORTS) — okların değdiği noktada GÖRÜNÜR tutamaklar ──
   Giriş (in) portu solu/üstte hedef ucu; çıkış (out) portu kaynak ucu = drag-to-connect tutamağı.
   Varsayılan: belirgin ama sade nokta (dolgu + beyaz halka + ince renkli kenar). Düğüm hover'da
   ya da port hover'da büyür + erişilebilirlik halkası → "buradan bağla" ipucu nettir. */
.ls-port {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
    background: var(--bs-secondary);
    box-shadow: 0 0 0 1px var(--bs-border-color), var(--ls-shadow-xs);
    transition: transform .12s var(--ls-ease, ease), box-shadow .12s var(--ls-ease, ease), background .12s var(--ls-ease, ease);
    z-index: 4;
}
/* Giriş portu (hedef ucu): içi boş halka → "buraya bağlanır" anlamı; düğüm hover'da dolu. */
.ls-port-in {
    top: -7px; left: 50%; margin-left: -6px;
    background: var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--bs-secondary), var(--ls-shadow-xs);
}
.ls-port-out { bottom: -7px; cursor: crosshair; }
.ls-port:hover {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px var(--ls-accent-soft), var(--ls-shadow-sm);
}
/* Düğüm hover → portlar belirginleşir (renk + hafif büyüme) ki "buradan çek" keşfedilebilir olsun. */
.ls-node:hover .ls-port-out { background: var(--ls-accent); transform: scale(1.2); }
.ls-node:hover .ls-port-in { box-shadow: 0 0 0 2px var(--ls-accent), var(--ls-shadow-xs); background: var(--ls-accent-soft); }
/* Dinamik çıkış portu: okun ayrıldığı NOKTAYA (inline left/top) tam oturur; merkezi noktaya hizalanır. */
.ls-port-dyn { bottom: auto; margin-left: 0; transform: translate(-50%, -50%); }
.ls-port-dyn:hover { transform: translate(-50%, -50%) scale(1.5); }
.ls-node:hover .ls-port-dyn { transform: translate(-50%, -50%) scale(1.2); }
.ls-node:hover .ls-port-dyn:hover { transform: translate(-50%, -50%) scale(1.5); }
.ls-port-out[data-branch="onay"] { background: var(--bs-success); }
.ls-port-out[data-branch="red"] { background: var(--bs-danger); }
.ls-node:hover .ls-port-out[data-branch="onay"] { background: var(--bs-success); }
.ls-node:hover .ls-port-out[data-branch="red"] { background: var(--bs-danger); }
.ls-port-out:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }
/* Okun değdiği noktadaki GİRİŞ portu — kenar koordinatına (left/top model-px) ortalı oturur.
   İçi-boş halka: "ok buraya bağlanır" anlamı; dal rengini taşır (varsayılan/onay/red). */
.ls-port-edge-in {
    position: absolute; pointer-events: none; z-index: 4;
    transform: translate(-50%, -50%);
    width: 11px; height: 11px;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-secondary);
    box-shadow: var(--ls-shadow-xs);
}
.ls-port-edge-onay { border-color: var(--bs-success); }
.ls-port-edge-red { border-color: var(--bs-danger); }
.ls-port-edge-in.ls-port-sel { box-shadow: 0 0 0 3px var(--ls-accent-soft); border-color: var(--ls-accent); }
@media (prefers-reduced-motion: reduce) { .ls-port, .ls-port:hover, .ls-port-dyn:hover { transition: none; } }
.ls-edges { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.ls-edge { fill: none; stroke: var(--bs-secondary-color); stroke-width: 2; pointer-events: none; }
.ls-edge-onay { stroke: var(--bs-success); }
.ls-edge-red { stroke: var(--bs-danger); stroke-dasharray: 5 3; }
.ls-edge-ov { position: absolute; transform: translate(-50%, -50%); display: inline-flex; gap: 3px; align-items: center; z-index: 3; }
.ls-edge-label { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-sm); padding: 0 5px; font-size: .65rem; color: var(--bs-secondary-color); white-space: nowrap; }
.ls-edge-delbtn { opacity: 0; width: 16px; height: 16px; line-height: 1; padding: 0; border: 0; border-radius: 50%; background: var(--bs-danger); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; transition: opacity .12s; }
.ls-edge-ov:hover .ls-edge-delbtn { opacity: 1; }
.ls-link-preview { fill: none; stroke: var(--ls-accent); stroke-width: 2; stroke-dasharray: 4 3; }
.ls-prop-tabs .nav-link { padding-top: .2rem; padding-bottom: .2rem; }
/* seçili bağlantı (ok) vurgusu */
.ls-edge-sel { stroke-width: 3.5; filter: drop-shadow(0 0 2px var(--ls-accent)); }

/* ── Kanvas kenar (ok) açıklaması: yeşil-düz = Onay/Başarı · kırmızı-kesik = Red/Hata ──
   Kanvasa göre sabit alt-sol köşe; düşük z (zoom-toolbar=8'in altında) → düğümlere/araç çubuğuna değmez. */
/* Kanvas ok-açıklaması: sağ-alt köşede SABİT, SOLİD chip (içerik arkadan görünmez → "havada/binmiş" hissi gider).
   pointer-events:none → düğüm/ok etkileşimini engellemez. (Kanvas küçükse köşeye oturur; büyük+scroll'da içerik altında kalır.) */
.ls-legend {
    position: absolute; right: .85rem; bottom: .85rem; left: auto; z-index: 6;
    display: flex; flex-direction: column; gap: .3rem;
    padding: .45rem .6rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-md);
    box-shadow: var(--ls-shadow-sm);
    pointer-events: none; user-select: none;
}
.ls-legend-row { display: flex; align-items: center; gap: .4rem; }
.ls-legend-swatch { flex: 0 0 auto; width: 20px; height: 0; border-radius: 1px; }
.ls-legend-swatch--ok  { border-top: 2px solid var(--bs-success); }
.ls-legend-swatch--red { border-top: 2px dashed var(--bs-danger); }
.ls-legend-lbl { font-size: .65rem; line-height: 1.1; color: var(--bs-secondary-color); white-space: nowrap; }

/* ── Birleşik Süreç Tasarımcısı — 4 sekmeli, dock-fill (yükseklik dolar, içeride scroll, sekme değişince ZIPLAMAZ) ── */
.ls-designer { display: flex; flex-direction: column; height: calc(100vh - 132px); min-height: 460px; }
.ls-designer-tabs { flex: 0 0 auto; }
.ls-designer-body {
    position: relative; flex: 1 1 auto; min-height: 0;
    border: 1px solid var(--bs-border-color); border-top: 0;
    border-radius: 0 0 var(--ls-radius-md) var(--ls-radius-md);
    background: var(--bs-body-bg); box-shadow: var(--ls-shadow-sm);
}
/* Tüm pane'ler aynı kapsayıcıyı doldurur; pasif pane d-none ile akıştan çıkar →
   aktif pane sabit yüksekliği (flex parent) doldurur, sekme değişince yükseklik sabit kalır. */
.ls-designer-pane { position: absolute; inset: 0; }
.ls-pane-scroll { height: 100%; overflow: auto; padding: 1rem; }
@media (max-width: 991.98px) {
    .ls-designer { height: auto; }
    .ls-designer-pane { position: static; inset: auto; }
    .ls-pane-scroll { height: auto; overflow: visible; }
}

/* ── ÖZET DOCK düzeni — sol palet · orta kanvas (dock-fill) · sağ özellikler + splitter + zoom + tam ekran ──
   ÖZET pane'i 3 sütunlu flex dock; orta kanvas tüm yüksekliği+genişliği doldurur (alttaki boşluk kalkar). */
.ls-dock { position: absolute; inset: 0; display: flex; align-items: stretch; min-height: 0; }
.ls-dock-side {
    flex: 0 0 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column;
    background: var(--bs-tertiary-bg);
}
.ls-dock-left { flex-basis: 240px; border-right: 1px solid var(--bs-border-color); }
.ls-dock-right { flex-basis: 300px; border-left: 1px solid var(--bs-border-color); }
.ls-dock-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .85rem; }
.ls-dock-center {
    position: relative; /* zoom-toolbar bu kapsayıcıya göre yüzer (kanvas scroll'undan etkilenmez) */
    flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column;
    padding: .6rem; gap: .35rem;
}
/* Kanvas: dock-fill → tüm yüksekliği+genişliği doldurur (fixed 560px yerine flex:1) */
.ls-edit-canvas {
    position: relative; flex: 1 1 auto; min-height: 0; overflow: auto;
    border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-md);
    box-shadow: var(--ls-shadow-xs);
}
/* Zoom-wrap: SVG kenarlar + düğümler birlikte ölçeklenir; köşe sol-üst (koordinat sistemi sabit) */
.ls-zoom-wrap { position: absolute; top: 0; left: 0; transform-origin: top left; }

/* Zoom toolbar: dock-center'a göre sağ-üstte yüzer (kanvas scroll'dan etkilenmez) */
.ls-zoom-toolbar {
    position: absolute; top: 1rem; right: 1rem; z-index: 8;
    display: inline-flex; align-items: center; gap: .15rem;
    padding: .2rem .3rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-pill);
    box-shadow: var(--ls-shadow-sm);
}
.ls-zoom-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--bs-secondary-color); font-size: .95rem; line-height: 1; cursor: pointer;
    transition: background var(--ls-trans), color var(--ls-trans), transform var(--ls-trans);
}
.ls-zoom-btn:hover { background: var(--ls-accent-soft); color: var(--ls-accent); }
.ls-zoom-btn:active { transform: scale(.92); }
.ls-zoom-btn:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 1px; }
.ls-zoom-val {
    min-width: 2.9rem; text-align: center; font-size: .75rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--bs-body-color); user-select: none;
}
.ls-zoom-sep { width: 1px; align-self: stretch; margin: .25rem .2rem; background: var(--bs-border-color); }

/* Splitter (panel araları yeniden boyutlandırma) — ince tutamak, hover'da vurgu */
.ls-split {
    flex: 0 0 8px; align-self: stretch; position: relative;
    cursor: col-resize; background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--ls-trans);
}
.ls-split:hover, .ls-split--active { background: var(--ls-accent-soft); }
.ls-split-grip { width: 2px; height: 36px; border-radius: var(--ls-radius-pill); background: var(--bs-border-color); transition: background var(--ls-trans); }
.ls-split:hover .ls-split-grip, .ls-split--active .ls-split-grip { background: var(--ls-accent); }

/* Tam ekran: ÖZET dock viewport'u doldursun (fullscreen API ::backdrop temasını koru) */
.ls-dock:fullscreen { background: var(--bs-body-bg); }
.ls-dock:fullscreen .ls-dock-center { padding: .75rem; }

@media (prefers-reduced-motion: reduce) {
    .ls-zoom-btn, .ls-zoom-btn:active, .ls-split, .ls-split-grip { transition: none; transform: none; }
}

/* Mobil: dock dikey yığılır; kanvas makul sabit yükseklik (yatay dock dar ekranda kullanışsız) */
@media (max-width: 991.98px) {
    .ls-dock { position: static; flex-direction: column; }
    .ls-dock-left, .ls-dock-right { flex-basis: auto !important; border: 0; border-bottom: 1px solid var(--bs-border-color); }
    .ls-dock-scroll { max-height: 320px; }
    .ls-dock-center { min-height: 60vh; }
    .ls-split { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL DOCK-FILL — yeniden kullanılabilir (ERP Standardı: sekmeli ekranlar)
   Sekme/panel içeriği mevcut yüksekliği DOLDURUR (altta dev boşluk kalmaz), scroll
   içeride olur. Sekme değişince zıplamaz (ls-designer-pane absolute + flex parent).
   Kullanım: pane → .ls-dock-fill (flex column, parent'ı doldurur); doldurulacak
   içerik bloğu → .ls-dock-fill-body (flex:1 + internal scroll). Diğer sekmeli
   ekranlar (Form Düzenle, gelecekteki tasarımcılar) bu sınıfları doğrudan kullanır.
   ═══════════════════════════════════════════════════════════════════════════════ */
.ls-dock-fill {
    display: flex; flex-direction: column;
    min-height: 0; height: 100%;
    padding: 1rem; gap: .75rem;
}
/* Doldurulan + içeride scroll edilen gövde (kart/liste burada genişler) */
.ls-dock-fill-body {
    flex: 1 1 auto; min-height: 0;
    overflow: auto;
    display: flex; flex-direction: column;
}
/* Sabit kalması istenen üst başlık/araç çubuğu (gövde dolarken bu küçülmez) */
.ls-dock-fill-head { flex: 0 0 auto; }
/* Gövde içindeki ana kart dock'u dikey doldursun (içinde kendi scroll'u varsa min-height:0) */
.ls-dock-fill-card { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
@media (max-width: 991.98px) {
    .ls-dock-fill { height: auto; min-height: 0; }
    .ls-dock-fill-body { overflow: visible; }
    .ls-dock-fill-card { flex: 0 0 auto; }
}

/* ── ONAY ADIMLARI — hizalı adım ızgarası (tek başlık satırı + tutarlı satırlar) ──
   Sütunlar: tutamaç · No · Adım adı · Kim onaylar? · Rol/Hedef · Süre(saat) · Koşul · İşlem.
   Başlık tek kez en üstte; her adım aynı grid şablonuyla hizalı satır olur (zıplamaz). */
.ls-steps { display: flex; flex-direction: column; min-height: 0; }
.ls-steps-grid { display: flex; flex-direction: column; gap: .4rem; min-height: 0; }
.ls-step-row {
    display: grid;
    grid-template-columns: 1.4rem 2rem minmax(140px, 1.4fr) minmax(150px, 1fr) minmax(130px, 1fr) 6.5rem minmax(150px, 1.3fr) 2rem;
    align-items: center; gap: .4rem;
}
/* Başlık satırı: küçük, büyük-harf, ayırıcı çizgi (kmpGrid head dili) */
.ls-step-head {
    padding: .15rem .15rem .35rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bs-secondary-color);
    position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg);
}
.ls-step-head > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Adım satırı kartı: hafif yüzey + hover vurgusu (zebra yerine kart his) */
.ls-step-item {
    padding: .45rem .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-md);
    background: var(--bs-body-bg);
    transition: box-shadow var(--ls-trans), border-color var(--ls-trans);
}
.ls-step-item:hover { box-shadow: var(--ls-shadow-xs); border-color: color-mix(in srgb, var(--ls-accent) 35%, var(--bs-border-color)); }
.ls-step-grip { cursor: grab; color: var(--bs-secondary-color); text-align: center; user-select: none; }
.ls-step-no { display: inline-flex; align-items: center; justify-content: center; }
/* İkincil satır (koşul metni) — adım adı kolonunun altına hizalı (grip+No genişliği kadar girinti) */
.ls-step-cond { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem 0 .1rem calc(1.4rem + 2rem + .8rem); }
.ls-step-cond .form-check { margin: 0; }
/* Dar ekranda satır dikey akışa düşer (grid → blok), başlık gizlenir, koşul girintisi kalkar */
@media (max-width: 991.98px) {
    .ls-step-head { display: none; }
    .ls-step-row { grid-template-columns: 1fr; gap: .3rem; }
    .ls-step-cond { padding-left: 0; }
}

/* ── Süreç ikonu seçici (Genel sekmesi) — tıklanabilir ikon karoları + seçili halka ── */
.ls-ikon-preview { font-size: 1.05rem; color: var(--bs-primary); vertical-align: -.05em; }
/* İkon seçici dropdown (kompakt — buton + açılır ızgara) */
.ls-ikon-dd { position: relative; max-width: 340px; }
.ls-ikon-dd-btn { display: flex; align-items: center; cursor: pointer; }
.ls-ikon-dd-btn .bi:first-child { font-size: 1.05rem; }
.ls-ikon-dd-menu {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-lg); box-shadow: var(--ls-shadow-lg);
    padding: .6rem; max-height: 240px; overflow-y: auto;
}
.ls-ikon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: .4rem;
    margin-top: .15rem;
}
.ls-ikon-tile {
    display: inline-flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-md);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: 1.15rem; line-height: 1;
    cursor: pointer;
    transition: border-color var(--ls-trans), color var(--ls-trans), background-color var(--ls-trans), transform var(--ls-trans), box-shadow var(--ls-trans);
}
.ls-ikon-tile:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary-border-subtle, var(--bs-primary));
    background: var(--bs-tertiary-bg);
    transform: translateY(-1px);
}
.ls-ikon-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13,110,253), .25);
}
.ls-ikon-tile--sel,
.ls-ikon-tile--sel:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle, var(--bs-tertiary-bg));
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb, 13,110,253), .25);
}
@media (prefers-reduced-motion: reduce) {
    .ls-ikon-tile { transition: none; }
    .ls-ikon-tile:hover { transform: none; }
}

/* Lookup (aranabilir veri-girişi) typeahead açılır listesi */
.ls-lookup-pop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bs-body-bg);
}

/* ── Görsel form tasarımcısı — sürükle-bırak kanvas (gridstack) + palet ── */
.ls-palette-item { display: flex; align-items: center; gap: .4rem; cursor: grab; }
.ls-palette-item:active { cursor: grabbing; }
.ls-palette-item__grip { opacity: .45; }

.ls-canvas { min-height: 130px; border: 1px dashed var(--bs-border-color); border-radius: var(--ls-radius-md); background: var(--bs-tertiary-bg); }
.ls-canvas .grid-stack-item-content { inset: 0; }

.ls-canvas-item { position: relative; display: flex; align-items: center; gap: .45rem; height: 100%; padding: .35rem .55rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-md); cursor: pointer;
    box-shadow: var(--ls-shadow-xs); overflow: hidden; transition: border-color var(--ls-trans), box-shadow var(--ls-trans); }
.ls-canvas-item:hover { border-color: var(--ls-accent, var(--bs-primary)); box-shadow: var(--ls-shadow-sm); }
.ls-canvas-item__grip { cursor: move; opacity: .4; user-select: none; font-size: 1.05rem; line-height: 1; }
.ls-canvas-item__body { flex: 1 1 auto; min-width: 0; }
.ls-canvas-item__label { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-canvas-item__meta { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-canvas-item__del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; line-height: 1;
    border: none; border-radius: 50%; background: var(--bs-danger-bg-subtle); color: var(--bs-danger);
    opacity: 0; transition: opacity .15s; }
.grid-stack-item:hover .ls-canvas-item__del, .ls-canvas-item__del:focus-visible { opacity: 1; }
.ls-canvas-item--sel .ls-canvas-item { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

/* ── Form tasarımcı dock — splitter'lı 3 panel (palet | kanvas | özellikler), yüksekliği doldurur ── */
.ls-fd-dock { display: flex; height: 100%; min-height: 0; overflow: hidden; }
.ls-fd-pane { min-width: 0; min-height: 0; overflow: auto; padding: .85rem; }
.ls-fd-palette { flex: 0 0 220px; border-right: 1px solid var(--bs-border-color); }
.ls-fd-props { flex: 0 0 320px; border-left: 1px solid var(--bs-border-color); }
.ls-fd-canvas-pane { flex: 1 1 auto; display: flex; flex-direction: column; background: var(--bs-tertiary-bg); }
.ls-fd-canvas-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .15rem; }
@media (max-width: 991.98px) {
    .ls-fd-dock { flex-direction: column; height: auto; overflow: visible; }
    .ls-fd-palette, .ls-fd-props { flex: 0 0 auto; border: 0; border-bottom: 1px solid var(--bs-border-color); }
    .ls-splitter { display: none; }
}

/* Sürüklenebilir ayraç (canvas.js splitter deseni) */
.ls-splitter { flex: 0 0 8px; cursor: col-resize; position: relative; background: transparent; touch-action: none; }
.ls-splitter::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
    background: var(--bs-border-color); border-radius: 2px; transition: background-color var(--ls-trans), width var(--ls-trans);
}
.ls-splitter:hover::before, .ls-splitter--active::before { width: 4px; background: var(--ls-accent, var(--bs-primary)); }
body.ls-splitter-dragging { cursor: col-resize; user-select: none; }
body.ls-splitter-dragging * { user-select: none !important; }

/* Palet (sol) */
.ls-fd-palette-list { display: grid; gap: .35rem; margin-bottom: .6rem; }
.ls-fd-palette-item {
    display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left;
    padding: .4rem .6rem; cursor: grab; font-size: .85rem; font-weight: 500;
    color: var(--bs-body-color); background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-md);
    box-shadow: var(--ls-shadow-xs); transition: border-color var(--ls-trans), box-shadow var(--ls-trans), transform var(--ls-trans), background-color var(--ls-trans);
}
.ls-fd-palette-item:hover { border-color: var(--ls-accent, var(--bs-primary)); box-shadow: var(--ls-shadow-sm); transform: translateY(-1px); }
.ls-fd-palette-item:active { cursor: grabbing; transform: none; }
.ls-fd-palette-item:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13,110,253), .25); }
.ls-fd-palette-item__grip { opacity: .4; font-size: 1rem; line-height: 1; }
.ls-fd-palette-item__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-fd-palette-tip { margin-top: .35rem; }

/* Bölüm (section) kartı */
.ls-fd-section {
    border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-lg);
    background: var(--bs-body-bg); box-shadow: var(--ls-shadow-xs);
    margin-bottom: .7rem; transition: border-color var(--ls-trans), box-shadow var(--ls-trans), opacity var(--ls-trans);
}
.ls-fd-section--active { border-color: var(--ls-accent, var(--bs-primary)); box-shadow: var(--ls-shadow-sm); }
.ls-fd-section--dragging { opacity: .45; }
.ls-fd-section--over { border-color: var(--ls-accent, var(--bs-primary)); box-shadow: 0 0 0 2px var(--bs-primary-bg-subtle, rgba(var(--bs-primary-rgb,13,110,253),.25)); }
.ls-fd-section__head {
    display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem;
    border-bottom: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-lg) var(--ls-radius-lg) 0 0;
    background: var(--bs-tertiary-bg);
}
.ls-fd-section__grip { cursor: grab; opacity: .4; font-size: 1.05rem; line-height: 1; user-select: none; }
.ls-fd-section__title { flex: 1 1 auto; min-width: 60px; }
.ls-fd-section__role { width: auto; flex: 0 0 auto; }
.ls-fd-section__del {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; line-height: 1;
    border: 1px solid transparent; border-radius: var(--ls-radius-sm);
    background: transparent; color: var(--bs-secondary-color);
    transition: color var(--ls-trans), background-color var(--ls-trans), border-color var(--ls-trans);
}
.ls-fd-section__del:hover { color: var(--bs-danger); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle, var(--bs-danger)); }

/* Alanlar drop bölgesi */
.ls-fd-fields { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; padding: .6rem; min-height: 60px; }
.ls-fd-empty {
    flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: .25rem;
    min-height: 52px; color: var(--bs-secondary-color); font-size: .82rem;
    border: 1.5px dashed var(--bs-border-color); border-radius: var(--ls-radius-md);
    transition: border-color var(--ls-trans), background-color var(--ls-trans), color var(--ls-trans);
}
/* Boş/dropzone aktif-üstünde: accent token + accent-soft yüzey (dark'ta da okunur kontrast). */
.ls-fd-empty--over { border-color: var(--ls-accent); color: var(--ls-accent); background: var(--ls-accent-soft); }

/* WYSIWYG alan kartı (genişlik: tam/yarım/üçte bir) */
.ls-fd-field { flex: 0 0 100%; max-width: 100%; }
.ls-fd-field--full { flex-basis: 100%; }
.ls-fd-field--half { flex-basis: calc(50% - .25rem); }
.ls-fd-field--third { flex-basis: calc(33.333% - .34rem); }
@media (max-width: 575.98px) { .ls-fd-field--half, .ls-fd-field--third { flex-basis: 100%; } }
.ls-fd-field--dragging { opacity: .4; }
.ls-fd-field__inner {
    position: relative; display: flex; gap: .4rem; padding: .45rem .55rem; cursor: grab;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-md);
    box-shadow: var(--ls-shadow-xs); transition: border-color var(--ls-trans), box-shadow var(--ls-trans);
}
.ls-fd-field__inner:hover { border-color: var(--ls-accent, var(--bs-primary)); box-shadow: var(--ls-shadow-sm); }
.ls-fd-field--sel .ls-fd-field__inner { outline: 2px solid var(--bs-primary); outline-offset: 1px; border-color: var(--bs-primary); }
/* klavyeyle gezilen alan kartı — Tab ile gelince görünür odak halkası (seçim --sel'den ayrı) */
.ls-fd-field:focus-visible { outline: none; }
.ls-fd-field:focus-visible .ls-fd-field__inner { outline: 2px solid var(--ls-accent, var(--bs-primary)); outline-offset: 2px; box-shadow: 0 0 0 3px var(--ls-accent-soft); }
.ls-fd-field__grip { cursor: grab; opacity: .35; font-size: 1rem; line-height: 1.4; user-select: none; }
.ls-fd-field__body { flex: 1 1 auto; min-width: 0; }
.ls-fd-field__label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-fd-field__req { color: var(--bs-danger); margin-left: .15rem; }
.ls-fd-field__body .form-control, .ls-fd-field__body .form-select { pointer-events: none; background: var(--bs-tertiary-bg); }
.ls-fd-field__meta { font-size: .68rem; color: var(--bs-secondary-color); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-fd-field__del {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; line-height: 1;
    border: none; border-radius: 50%; background: var(--bs-danger-bg-subtle); color: var(--bs-danger);
    font-size: .7rem; opacity: 0; transition: opacity var(--ls-trans);
}
.ls-fd-field__inner:hover .ls-fd-field__del, .ls-fd-field__del:focus-visible { opacity: 1; }

/* ekleme çizgisi (drop göstergesi) — JS denetleyicisi canlı sürüklemede yerleştirir */
.ls-fd-dropline { flex: 0 0 100%; height: 3px; border-radius: 2px; margin: -.15rem 0; background: var(--ls-accent, var(--bs-primary)); box-shadow: 0 0 0 1px var(--bs-body-bg); }
.ls-fd-dropline--live { animation: ls-fd-dropline-in .12s var(--ls-ease, ease) both; }
@keyframes ls-fd-dropline-in { from { opacity: 0; transform: scaleX(.6); } to { opacity: 1; transform: none; } }

/* sürükleme sırasında üzerine gelinen alan bölgesi vurgusu */
.ls-fd-fields.ls-fd-over { background: var(--ls-accent-soft); border-radius: var(--ls-radius-md); box-shadow: inset 0 0 0 1.5px var(--ls-accent); }

/* kanvasta genişlik sürükle-boyutlandırma tutamacı (sağ kenar) */
.ls-fd-field__resize {
    position: absolute; top: 6px; right: -3px; bottom: 6px; width: 10px; z-index: 4;
    cursor: col-resize; touch-action: none; opacity: 0; transition: opacity var(--ls-trans);
}
.ls-fd-field__resize::before {
    content: ""; position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 3px; height: 26px; border-radius: 3px; background: var(--bs-border-color);
    transition: background-color var(--ls-trans), height var(--ls-trans);
}
.ls-fd-field:hover .ls-fd-field__resize, .ls-fd-field--sel .ls-fd-field__resize { opacity: 1; }
.ls-fd-field__resize:hover::before, .ls-fd-field--resizing .ls-fd-field__resize::before { background: var(--ls-accent, var(--bs-primary)); height: 60%; }
.ls-fd-field--resizing { z-index: 5; }
.ls-fd-field--resizing .ls-fd-field__inner { outline: 2px dashed var(--ls-accent, var(--bs-primary)); outline-offset: 1px; }
body.ls-fd-resizing { cursor: col-resize; user-select: none; }
body.ls-fd-resizing * { user-select: none !important; }

/* yüzen sürükle hayaleti (clone) — pointer'ı takip eder, etkileşimsiz */
.ls-fd-ghost {
    position: fixed; z-index: 1080; pointer-events: none; margin: 0; opacity: .92;
    box-shadow: var(--ls-shadow-xl, 0 12px 32px rgba(0,0,0,.28)); border-radius: var(--ls-radius-md);
    transform: scale(1.02) rotate(.5deg); transform-origin: top left;
    transition: none; background: var(--bs-body-bg);
}
.ls-fd-ghost.ls-fd-ghost--palette { opacity: .95; }
.ls-fd-ghost .ls-fd-field__resize, .ls-fd-ghost .ls-fd-field__del { display: none; }
body.ls-fd-dragging { cursor: grabbing; user-select: none; }
body.ls-fd-dragging * { user-select: none !important; }
.ls-fd-field--dragging { opacity: .35; }
.ls-fd-palette-item--dragging { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
    .ls-fd-palette-item, .ls-fd-section, .ls-fd-field__inner, .ls-fd-field__resize, .ls-fd-field__resize::before, .ls-splitter::before { transition: none; }
    .ls-fd-palette-item:hover { transform: none; }
    .ls-fd-ghost { transform: none; }
    .ls-fd-dropline--live { animation: none; }
}

/* ── Belge baskı (fiş/fatura → PDF) — .ls-print-wrap ekranda gizli, baskıda tek görünen ──
   body.ls-print-kanvas aktifken (diyagram baskısı) bu belge bloğu DEVRE DIŞI → ikisi çakışmaz. */
.ls-print-wrap { display: none; }
@media print {
    body:not(.ls-print-kanvas) * { visibility: hidden; }
    body:not(.ls-print-kanvas) .ls-print-wrap,
    body:not(.ls-print-kanvas) .ls-print-wrap * { visibility: visible; }
    body:not(.ls-print-kanvas) .ls-print-wrap { display: block; position: absolute; left: 0; top: 0; width: 100%; }
    @page { margin: 14mm; }
}

/* ── Akış diyagramı baskı (İzle/Akış kanvası → PDF) — .ls-kanvas-print-wrap ekranda gizli;
   body.ls-print-kanvas + window.print sırasında YALNIZ diyagram görünür (belge baskısıyla çakışmaz). */
.ls-kanvas-print-wrap { display: none; }
@media print {
    body.ls-print-kanvas * { visibility: hidden; }
    body.ls-print-kanvas .ls-kanvas-print-wrap,
    body.ls-print-kanvas .ls-kanvas-print-wrap * { visibility: visible; }
    body.ls-print-kanvas .ls-kanvas-print-wrap {
        display: block; position: absolute; left: 0; top: 0; width: 100%;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}
/* Diyagram baskı düzeni: başlık + statik diyagram (zoom=1) + lejant. Renkleri koru (oklar/düğümler). */
.ls-kanvas-print { color: #000; }
.ls-kanvas-print__head {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px;
}
.ls-kanvas-print__title { font-size: 18px; font-weight: 700; }
.ls-kanvas-print__code { font-size: 13px; font-weight: 600; color: #555; }
.ls-kanvas-print__diagram { position: relative; margin: 0 auto; }
.ls-kanvas-print__legend { display: flex; gap: 22px; margin-top: 16px; font-size: 12px; color: #333; }
.ls-kanvas-print__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ls-print { font-size: 12px; color: #000; line-height: 1.4; }
.ls-print__head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
.ls-print__firma { font-size: 16px; font-weight: 700; }
.ls-print__title { font-size: 18px; font-weight: 700; }
.ls-print__sec { font-weight: 700; font-size: 12.5px; border-bottom: 1px solid #999; margin: 12px 0 5px; padding-bottom: 2px; }
.ls-print__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.ls-print__field { display: flex; gap: 8px; padding: 2px 0; }
.ls-print__field .lbl { color: #555; min-width: 110px; }
.ls-print__field .val { font-weight: 600; }
.ls-print__lines { width: 100%; border-collapse: collapse; margin: 5px 0 12px; }
.ls-print__lines th, .ls-print__lines td { border: 1px solid #999; padding: 3px 7px; text-align: left; }
.ls-print__lines th { background: #eee; font-size: 11.5px; }
.ls-print__lines td.num, .ls-print__lines th.num { text-align: right; }
.ls-print__totals { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 10px; }
.ls-print__total { display: flex; gap: 24px; min-width: 260px; justify-content: space-between; border-top: 1px solid #ddd; padding-top: 2px; }
.ls-print__total b { font-variant-numeric: tabular-nums; }
.ls-print__note { margin-top: 8px; }
.ls-print__note .lbl { color: #555; font-weight: 600; }
.ls-print__sign { display: flex; gap: 48px; margin-top: 48px; }
.ls-print__sign-box { flex: 1; border-top: 1px solid #000; padding-top: 4px; text-align: center; color: #444; }
/* Onaylayan imzaları (belge dökümü) */
.ls-print__onaylar { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 20px; }
.ls-print__onaylar .ls-print__sign-box { border: 0; flex: 0 1 auto; min-width: 170px; }
.ls-print__imza { height: 56px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #333; padding-bottom: 2px; }
.ls-print__imza img { max-height: 54px; max-width: 160px; object-fit: contain; }
.ls-print__sign-ad { font-weight: 600; margin-top: 4px; color: #222; }
.ls-print__sign-meta { font-size: .72rem; color: #666; }
/* Geçmiş zaman çizelgesinde küçük imza önizleme */
.ls-imza-mini { max-height: 44px; max-width: 130px; object-fit: contain; margin-top: 5px; display: block; border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-sm); padding: 2px 4px; background: #fff; }

/* ── SurecGrid: gruplama başlık satırı vurgusu (eski sade port — korunur) ── */
.ls-grid-grup > td { background: var(--bs-tertiary-bg, #f1f3f5); border-top: 2px solid var(--bs-border-color, #dee2e6); }
.ls-grid-grup:hover > td { background: var(--bs-secondary-bg, #e9ecef); }

/* ── SurecGrid tam parite (KampusV1 kmp-grid → ls-grid portu) ── */
.ls-grid-toolbar { display:flex; align-items:center; gap:.5rem; padding:.6rem 0; flex-wrap:wrap; }
.ls-grid .dropdown { position:relative; }
.ls-grid-pop { position:absolute; top:100%; left:0; z-index:30; min-width:200px; max-height:340px; overflow:auto; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:var(--ls-radius-md); box-shadow:var(--ls-shadow-lg); padding:.3rem; }
.ls-grid-pop .dropdown-item { display:block; width:100%; text-align:left; border:0; background:transparent; padding:.3rem .6rem; border-radius:var(--ls-radius-sm); cursor:pointer; }
.ls-grid-pop .dropdown-item:hover { background:var(--bs-tertiary-bg); }
.ls-grid-groupbar { display:flex; align-items:center; gap:.4rem; padding:.45rem .6rem; background:var(--bs-tertiary-bg); border:1px dashed var(--bs-border-color); border-radius:var(--ls-radius-md); margin-bottom:.5rem; flex-wrap:wrap; }
.ls-grid-groupbar.ls-drop-active { border-color:var(--bs-primary); border-style:solid; background:var(--bs-primary-bg-subtle); }
.ls-group-chip { position:relative; display:inline-flex; align-items:center; gap:.35rem; background:var(--bs-primary-bg-subtle); color:var(--bs-primary-text-emphasis); border-radius:var(--ls-radius-pill); padding:.15rem .6rem; font-size:.82rem; cursor:grab; user-select:none; }
.ls-group-chip:active { cursor:grabbing; }
.ls-group-chip--dragging { opacity:.45; }
.ls-group-chip button { border:0; background:transparent; cursor:pointer; color:inherit; line-height:1; }
.ls-group-chip__menu { font-size:.7rem; opacity:.75; padding:0 .1rem; }
.ls-group-chip__menu:hover { opacity:1; }
.ls-pill-pop { top:calc(100% + 4px); min-width:170px; white-space:nowrap; }
/* Yuvarlak çerçeveli kaydırma kabı + ince rounded scrollbar (kmpGrid cilası). */
.ls-grid-scroll {
    max-height:68vh; overflow:auto;
    border:1px solid var(--bs-border-color);
    border-radius:var(--ls-radius-lg);
    box-shadow:var(--ls-shadow-xs);
    scrollbar-width:thin;
    scrollbar-color:var(--bs-border-color) transparent;
}
.ls-grid-scroll::-webkit-scrollbar { width:10px; height:10px; }
.ls-grid-scroll::-webkit-scrollbar-track { background:transparent; }
.ls-grid-scroll::-webkit-scrollbar-thumb {
    background:var(--bs-border-color); border-radius:var(--ls-radius-pill);
    border:2px solid transparent; background-clip:padding-box;
}
.ls-grid-scroll::-webkit-scrollbar-thumb:hover { background:var(--bs-secondary-color); background-clip:padding-box; border:2px solid transparent; }
.ls-grid-scroll::-webkit-scrollbar-corner { background:transparent; }
/* Çerçeveli kapta kenar çizgisi tekrarını önle: dış tablo kenarlığını kaldır (yuvarlak köşe kabı taşımasın). */
.ls-grid-scroll > .ls-grid-table { margin-bottom:0; }
/* table-layout:auto → kolonlar içeriğe göre boyutlanır (autosize); içerik kapsayıcıdan genişse
   .ls-grid-scroll yatay kaydırma verir (hiçbir kolon kırpılmaz). */
.ls-grid-table { table-layout:auto; width:100%; }
.ls-grid-table th { position:relative; white-space:nowrap; }
.ls-grid-table td { vertical-align:middle; }
.ls-grid thead th { position:sticky; background:var(--bs-body-bg); z-index:3; }
/* kmpGrid "uppercase head" standardı — sakin, seçkin başlık bandı; filtre satırı body-bg'de ayrışır. */
.ls-grid thead tr.ls-head-row th {
    top:0; height:38px;
    font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
    color:var(--bs-secondary-color); background:var(--bs-tertiary-bg);
    box-shadow:inset 0 -1px 0 var(--bs-border-color);
}
.ls-grid thead tr.ls-filter-row th { top:38px; z-index:2; background:var(--bs-body-bg); box-shadow:inset 0 -1px 0 var(--bs-border-color); }
/* Sticky başlık altında ince ayrım gölgesi — kaydırınca gövde içeriğinden belirgin biçimde ayrılır.
   En alttaki sticky satıra (filtre varsa o, yoksa başlık) uygulanır; ::after ile body üstüne taşan yumuşak gölge. */
.ls-grid thead tr.ls-filter-row th::after,
.ls-grid:not(:has(.ls-filter-row)) thead tr.ls-head-row th::after {
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
    pointer-events:none;
    background:linear-gradient(to bottom, color-mix(in srgb, var(--bs-emphasis-color) 9%, transparent), transparent);
}
[data-bs-theme=dark] .ls-grid thead tr.ls-filter-row th::after,
[data-bs-theme=dark] .ls-grid:not(:has(.ls-filter-row)) thead tr.ls-head-row th::after {
    background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent);
}
.ls-sortable { cursor:pointer; user-select:none; white-space:nowrap; transition:background-color .12s ease, color .12s ease; }
.ls-sortable:hover { background:var(--bs-secondary-bg); color:var(--bs-body-color); }
.ls-sort-ind { color:var(--ls-accent); font-size:.72rem; font-weight:700; }
@media (prefers-reduced-motion: reduce){ .ls-sortable { transition:none; } }
.ls-group-row { cursor:pointer; background:var(--bs-tertiary-bg); }
.ls-group-row:hover { background:var(--bs-primary-bg-subtle); }
.ls-row-link { cursor:pointer; }
.ls-row-link:hover td { background:var(--bs-primary-bg-subtle); }
/* Zebra (alternatif satır tonu) — gövde-bg üzerine çok hafif ikincil tint. Grid bileşeni satıra ekler.
   Hover zebra'yı YENER (aşağıdaki :hover kuralları daha yüksek özgüllükle/sonra geldiği için). */
.ls-grid-table > tbody > tr.ls-row-alt > td {
    background:color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-secondary-color));
}
.ls-grid-table > tbody > tr.ls-row-alt.ls-row-link:hover > td,
.table-hover > tbody > tr.ls-row-alt:hover > td { background:var(--bs-primary-bg-subtle); }
/* Grup aç/kapa göstergesi — DEKORATİF (aç/kapa caret'i; Aktif/Pasif veri durumu DEĞİL) → sakin accent tonu.
   (Eski kırmızı/yeşil yanıltıcıydı: kapalı=kırmızı/açık=yeşil bir "hata/başarı" çağrışımı veriyordu.) */
.ls-group-toggle { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; margin-right:.25rem; border-radius:var(--ls-radius-sm); font-size:.72rem; line-height:1; vertical-align:middle; transition:transform .12s ease, background .12s ease, color .12s ease; }
.ls-group-toggle--closed { color:var(--bs-secondary-color); background:var(--bs-secondary-bg); }
.ls-group-toggle--open { color:var(--ls-accent); background:var(--ls-accent-soft); }
.ls-group-row:hover .ls-group-toggle { transform:scale(1.1); }
.ls-group-row:hover .ls-group-toggle--closed { color:var(--bs-body-color); }
@media (prefers-reduced-motion: reduce){ .ls-group-toggle { transition:none; } .ls-group-row:hover .ls-group-toggle { transform:none; } }
.ls-group-footer td { font-weight:600; background:var(--bs-tertiary-bg); }
.ls-grandtotal td { font-weight:700; background:var(--bs-secondary-bg); border-top:2px solid var(--bs-primary); position:sticky; bottom:0; z-index:2; }
.ls-sum-sym { font-weight:700; color:var(--bs-secondary-color); margin-right:.4rem; }
.ls-col-resize { position:absolute; right:0; top:0; width:6px; height:100%; cursor:col-resize; user-select:none; }
.ls-col-resize:hover { background:var(--bs-primary); opacity:.4; }
.ls-actions-col { white-space:nowrap; text-align:end; overflow:visible; }
/* Aksiyon kolonu sağa sabitlenir (yatay kaydırmada görünür kalır) + sol tarafında ince ayrım çizgisi.
   Arka plan satır tonuyla uyumlu olmalı ki gövde içeriği altından temiz kaysın. */
.ls-grid-table th.ls-actions-col,
.ls-grid-table td.ls-actions-col {
    position:sticky; right:0; z-index:1;
    background:var(--bs-body-bg);
    box-shadow:inset 1px 0 0 var(--bs-border-color);
}
.ls-grid-table thead th.ls-actions-col { z-index:4; }
.ls-grid thead tr.ls-head-row th.ls-actions-col { background:var(--bs-tertiary-bg); }
/* Pin'lenen aksiyon hücresi satır durumuna göre arka planını eşler (zebra/hover/grup) → "delik" görünmez. */
.ls-grid-table > tbody > tr.ls-row-alt > td.ls-actions-col { background:color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-secondary-color)); }
.ls-grid-table > tbody > tr.ls-row-link:hover > td.ls-actions-col { background:var(--bs-primary-bg-subtle); }
.ls-grid-table > tbody > tr.ls-group-footer > td.ls-actions-col { background:var(--bs-tertiary-bg); }
.ls-print-table { display:none; }

/* ── Grid toolbar'a gömülü sunucu-filtreleri (Rapor: tarih aralığı + süreç + başlatan) ──
   Çift filtre paneli yerine ToolbarExtra içinde küçük inline kontroller. */
.ls-grid-srvfilter { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.ls-grid-srvfilter .form-select, .ls-grid-srvfilter .form-control { max-width:170px; }
.ls-grid-srvfilter__lbl { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--bs-secondary-color); }

/* ── Grid boş-durum (kmpGrid standardı) — ortalı ikon + başlık + filtre temizle ── */
.ls-grid-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5rem; padding:3rem 1rem; text-align:center; color:var(--bs-secondary-color);
}
.ls-grid-empty__ico { font-size:2rem; opacity:.45; line-height:1; }
.ls-grid-empty__title { font-weight:600; color:var(--bs-body-color); }
.ls-grid-empty__cell { padding:0 !important; }

/* ── Soft-tinted durum rozetleri (.ls-pill) — solid badge yerine sakin tint; dark/light otomatik ──
   Bootstrap *-bg-subtle / *-text-emphasis / *-border-subtle tokenlarıyla dengeli. */
.ls-pill {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.2rem .6rem; border-radius:var(--ls-radius-pill);
    font-size:.78rem; font-weight:500; line-height:1.2;
    border:1px solid transparent;
    background:var(--bs-tertiary-bg); color:var(--bs-secondary-color); border-color:var(--bs-border-color);
}
.ls-pill b { font-weight:700; font-variant-numeric:tabular-nums; }
.ls-pill--neutral { background:var(--bs-secondary-bg); color:var(--bs-body-color); border-color:var(--bs-border-color); }
.ls-pill--info    { background:var(--ls-accent-soft); color:var(--ls-accent); border-color:color-mix(in srgb, var(--ls-accent) 32%, transparent); }
.ls-pill--ok      { background:var(--bs-success-bg-subtle); color:var(--bs-success-text-emphasis); border-color:var(--bs-success-border-subtle); }
.ls-pill--danger  { background:var(--bs-danger-bg-subtle); color:var(--bs-danger-text-emphasis); border-color:var(--bs-danger-border-subtle); }
.ls-pill--warn    { background:var(--bs-warning-bg-subtle); color:var(--bs-warning-text-emphasis); border-color:var(--bs-warning-border-subtle); }
.ls-pill--muted   { background:var(--bs-secondary-bg-subtle, var(--bs-tertiary-bg)); color:var(--bs-secondary-color); border-color:var(--bs-border-color); }
.ls-pill--accent  { background:var(--bs-info-bg-subtle); color:var(--bs-info-text-emphasis); border-color:var(--bs-info-border-subtle); }

/* ── Kod-chip — süreç kodu vb. monospace etiket (sakin, rafine) ── */
.ls-code-chip {
    display:inline-block;
    font-family:var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size:.72rem; line-height:1.4;
    color:var(--bs-secondary-color);
    background:var(--bs-tertiary-bg);
    border:1px solid var(--bs-border-color);
    border-radius:var(--ls-radius-sm);
    padding:.05rem .4rem;
}

/* Grid yazdırma — LogoSurec visibility modeliyle uyumlu (surecGrid.print body'ye ls-print-single,
   ilgili grid'e ls-printing ekler). Yalnız basılan grid'in salt-yazdırma tablosu görünür. */
@media print {
    body.ls-print-single * { visibility: hidden; }
    body.ls-print-single .ls-grid.ls-printing .ls-print-table,
    body.ls-print-single .ls-grid.ls-printing .ls-print-table * { visibility: visible; }
    body.ls-print-single .ls-grid.ls-printing .ls-print-table {
        display: table !important; position: absolute; left: 0; top: 0; width: 100%; table-layout: auto;
    }
    body.ls-print-single .ls-grid.ls-printing .ls-print-table .ls-group-row { background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ── kmp-modal: sürüklenebilir + yeniden boyutlandırılabilir modal (KampusV1 portu) ── */
.kmp-modal-backdrop {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(15, 18, 25, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* .kmp-modal taban kuralı aşağıdaki KmpModal bloğunda (position:relative) tanımlı;
   .kmp-modal-backdrop flex-center olduğundan LookupField'in relative .kmp-modal'ı da ortalanır. */
/* Gözat modalı ferah açılır: geniş + sabit-yükseklik → grid gövdeyi dock-fill ile doldurur (boş yarı-yükseklik grid yok).
   Resize/maximize bu tabanı override eder (kmpModal.maximize / grip inline style). */
.kmp-modal--lookup {
    width: min(1040px, 95vw); height: min(78vh, 760px);
    max-height: 92vh; display: flex; flex-direction: column;
}
.kmp-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1rem; border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600; user-select: none;
}
.kmp-modal-title { font-size: 1rem; letter-spacing: -.01em; }
/* Gözat başlığı: başlık esner, büyüt + kapat düğmeleri sağda yan yana (KmpModal başlık deseni). */
.kmp-modal--lookup .kmp-modal-head { gap: .5rem; }
.kmp-modal--lookup .kmp-modal-title { flex: 1 1 auto; }
.kmp-modal-body { padding: 1rem; overflow: auto; flex: 1 1 auto; }
.kmp-modal-resize {
    position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px;
    cursor: nwse-resize; opacity: .6;
    background: linear-gradient(135deg, transparent 50%, var(--bs-secondary-color) 50%, var(--bs-secondary-color) 60%, transparent 60%, transparent 70%, var(--bs-secondary-color) 70%, var(--bs-secondary-color) 80%, transparent 80%);
}
.kmp-modal-resize:hover { opacity: .9; }
@keyframes kmp-modal-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kmp-modal { animation: none; } }

/* Lookup modalı içindeki SurecGrid yüksekliği — eski sabit (fill kullanmayan yerler için yedek) */
.ls-lookup-grid .ls-grid-scroll { max-height: 56vh; }

/* ── Gözat modalı dock-fill: grid modal gövdesini dikey doldurur, scroll GRID içinde ──
   modal body flex-column → fill kabı flex:1 → .ls-grid flex-column → .ls-grid-scroll flex:1 (esner). */
.kmp-modal--lookup .kmp-modal-body { display: flex; flex-direction: column; min-height: 0; }
.ls-lookup-grid--fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ls-lookup-grid--fill .ls-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ls-lookup-grid--fill .ls-grid-toolbar { flex: 0 0 auto; }
.ls-lookup-grid--fill .ls-grid-groupbar { flex: 0 0 auto; }
/* Sabit max-height'i geçersiz kıl: kap içinde esnesin (modal büyüdükçe/maximize'da grid de büyür). */
.ls-lookup-grid--fill .ls-grid-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }

/* flatpickr — kmp tasarım diliyle uyum (dark/light, focus halkası, yumuşak köşe) */
.flatpickr-calendar { box-shadow: var(--ls-shadow-lg); border-radius: var(--ls-radius-md); }
.flatpickr-input:focus, input.flatpickr-input:focus {
    border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); outline: none;
}

/* Lookup modalı yazdırmada normal akışa düşsün (boş sayfa / kesilme olmasın) */
@media print {
    .kmp-modal-backdrop, .kmp-mdrag-backdrop { display: none !important; }
}
/* KmpFormulaBuilder (havuz 1.4.22) vurgu rengi LogoSurec aksanından. */
:root { --kmp-fx-accent: var(--ls-accent); }

/* ── KmpModal / KmpConfirm — havuz (Kmp.Blazor 1.4.20, Y-002) köprüsü ──
   Havuz CSS'i (kmp-blazor.css) YÜKLENMEZ: LogoSurec kendi --ls-* tasarım dilini taşır. Havuz bileşenlerinin sınıfları
   burada --ls-* token'larıyla karşılanır. Sürükle/boyutlandır/ESC yığını havuz kmp-modal.js'ten gelir. */
.kmp-mdrag-backdrop {
    position:fixed; inset:0; z-index:1080;
    background:rgba(15,23,42,.28); backdrop-filter:blur(4px) saturate(1.05); -webkit-backdrop-filter:blur(4px) saturate(1.05);
    animation:kmpScrimIn .16s ease;
}
[data-bs-theme="dark"] .kmp-mdrag-backdrop { background:rgba(2,6,14,.46); }
/* Modal üstündeki onayın perdesi alttaki modalı (1081) da örter. */
.kmp-mdrag-backdrop:has(+ .kmp-confirm) { z-index:1089; }
.kmp-modal {
    position:relative; display:flex; flex-direction:column;
    max-height:92vh; min-width:360px; min-height:240px; overflow:hidden;
    background:var(--bs-body-bg); color:var(--bs-body-color);
    border:1px solid var(--bs-border-color);
    border-radius:var(--ls-radius-lg);
    box-shadow:var(--ls-shadow-xl);
    animation:kmpModalIn .18s var(--ls-ease, ease-out);
}
.kmp-modal.kmp-modal--drag {
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    width:min(720px, 94vw); max-height:88vh; z-index:1081;
    animation:kmpModalDragIn .18s var(--ls-ease, ease-out);
}
.kmp-modal--drag .kmp-modal-head {
    gap:.75rem; padding:.85rem 1.1rem; cursor:move;
    background:linear-gradient(180deg, var(--bs-tertiary-bg), var(--bs-body-bg));
}
.kmp-modal-head .btn-close { cursor:pointer; }
.kmp-modal-head__title { font-weight:600; letter-spacing:-.01em; flex:1; display:flex; align-items:center; min-width:0; }
.kmp-modal-head__icon { margin-right:.5rem; color:var(--bs-secondary-color); }
.kmp-modal--drag .kmp-modal-body { padding:1.1rem; }
.kmp-modal-body--fill { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.kmp-modal-foot {
    display:flex; gap:.5rem; justify-content:flex-end; align-items:center;
    padding:.75rem 1.1rem; border-top:1px solid var(--bs-border-color); background:var(--bs-tertiary-bg);
}

/* ── Büyüt/geri-yükle düğmesi (havuz kmp-modal-head__max + LookupField kmp-modal__max) ── */
.kmp-modal-head__max, .kmp-modal__max {
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; padding:0; margin:0; cursor:pointer;
    border:1px solid transparent; border-radius:var(--ls-radius-sm, .375rem);
    background:transparent; color:var(--bs-secondary-color);
    transition:background-color var(--ls-transition, .15s var(--ls-ease, ease)), color .15s, border-color .15s;
}
.kmp-modal-head__max:hover, .kmp-modal__max:hover { background:var(--bs-tertiary-bg); color:var(--bs-body-color); border-color:var(--bs-border-color); }
.kmp-modal-head__max:focus-visible, .kmp-modal__max:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ls-accent-soft); }
.kmp-modal-head__max i, .kmp-modal__max i { font-size:.95rem; line-height:1; }
/* Boyut/konum geçişi (büyüt-geri-yükle yumuşak). DRAG/RESIZE sırasında KAPATILIR. */
.kmp-modal { transition:width .2s var(--ls-ease, ease), height .2s var(--ls-ease, ease), left .2s var(--ls-ease, ease), top .2s var(--ls-ease, ease); }
body.kmp-modal-dragging .kmp-modal, body.kmp-modal-resizing .kmp-modal { transition:none; }
/* Büyütülmüş: sürükle/boyutlandırmanın yazdığı satır-içi konum/boyut !important ile ezilir (havuz JS maximize yapmaz,
   sınıf yeter). LookupField (kmp-modal--lookup) de aynı sınıfı taşır. */
.kmp-modal.kmp-modal--max {
    position:fixed !important; left:16px !important; top:16px !important;
    width:calc(100vw - 32px) !important; height:calc(100vh - 32px) !important;
    max-height:none !important; transform:none !important; margin:0 !important;
}
.kmp-modal--max .kmp-modal-resize { display:none; }
.kmp-modal--max .kmp-modal-head { cursor:default !important; }

/* ── KmpConfirm ── */
.kmp-confirm {
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1090;
    width:min(440px, 92vw); overflow:hidden;
    background:var(--bs-body-bg); color:var(--bs-body-color);
    border:1px solid var(--bs-border-color); border-radius:var(--ls-radius-lg);
    box-shadow:var(--ls-shadow-xl);
    animation:kmpModalDragIn .16s var(--ls-ease, ease-out);
}
.kmp-confirm__head { display:flex; align-items:center; gap:.65rem; padding:1.15rem 1.35rem .5rem; font-size:1.02rem; }
.kmp-confirm__icon {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:2.1rem; height:2.1rem; border-radius:50%; font-size:1.05rem; font-weight:700;
    background:var(--bs-primary-bg-subtle); color:var(--bs-primary); box-shadow:inset 0 0 0 1px var(--bs-primary-border-subtle);
}
.kmp-confirm--danger .kmp-confirm__icon {
    background:var(--bs-danger-bg-subtle); color:var(--bs-danger); box-shadow:inset 0 0 0 1px var(--bs-danger-border-subtle);
}
.kmp-confirm__title { font-weight:600; letter-spacing:-.01em; }
.kmp-confirm__body { padding:.25rem 1.35rem 1.1rem; color:var(--bs-secondary-color); line-height:1.55; white-space:pre-line; }
.kmp-confirm__foot {
    display:flex; justify-content:flex-end; gap:.5rem; padding:.8rem 1.35rem;
    background:var(--bs-tertiary-bg); border-top:1px solid var(--bs-border-color);
}
.kmp-confirm__foot .btn:focus-visible, .kmp-modal-foot .btn:focus-visible { box-shadow:0 0 0 3px var(--ls-accent-soft); }

@keyframes kmpScrimIn { from{opacity:0} to{opacity:1} }
/* NOT: LookupField (relative, scrim flex-merkezli) düz translateY; havuz --drag/confirm translate(-50%,-50%) merkezli. */
@keyframes kmpModalIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes kmpModalDragIn { from{opacity:0; transform:translate(-50%, -48%)} to{opacity:1; transform:translate(-50%, -50%)} }
@media (prefers-reduced-motion: reduce){
    .kmp-mdrag-backdrop, .kmp-modal, .kmp-confirm { animation:none; transition:none; }
}

/* ── kmp form yardımcıları (modal içleri) ── */
.kmp-hint { font-size:.78rem; color:var(--bs-secondary-color); }
.kmp-field-label { font-size:.8rem; font-weight:600; color:var(--bs-secondary-color); margin-bottom:.2rem; }

/* ── kmp-card: rafine yüzey (Bootstrap .card ile birlikte; çıplak BS card'a düşmesin) ──
   Tanimlar/OrgUnits gibi yerlerde class="card kmp-card" → kmp dili (yüzey/kenar/radius/gölge). */
.kmp-card {
    background:var(--bs-body-bg);
    border:1px solid var(--bs-border-color);
    border-radius:var(--ls-radius-lg);
    box-shadow:var(--ls-shadow-xs);
    overflow:hidden;
}
.kmp-card > .card-body { padding:1.1rem 1.25rem; }
.kmp-card > .card-header {
    padding:.85rem 1.25rem; font-weight:600; letter-spacing:-.01em;
    background:color-mix(in srgb, var(--bs-tertiary-bg) 60%, var(--bs-body-bg));
    border-bottom:1px solid var(--bs-border-color);
}
[data-bs-theme=dark] .kmp-card { background:color-mix(in srgb, var(--bs-body-bg) 92%, #fff); }

/* ── form-label-sm: tutarlı küçük alan etiketi (BS no-op idi → tanımla) ──
   .form-label ile birlikte: küçük + sönük + 600 + hafif harf-aralığı. */
.form-label-sm {
    font-size:.78rem; font-weight:600; letter-spacing:.01em;
    color:var(--bs-secondary-color); margin-bottom:.25rem;
}
.kmp-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--bs-border-color); margin-bottom:1rem; }
.kmp-tab {
    border:0; background:transparent; padding:.5rem .9rem; border-radius:var(--ls-radius-md) var(--ls-radius-md) 0 0;
    font-size:.9rem; font-weight:500; color:var(--bs-secondary-color); cursor:pointer;
    border-bottom:2px solid transparent; transition:color .12s, border-color .12s;
}
.kmp-tab:hover { color:var(--bs-body-color); }
.kmp-tab--active { color:var(--bs-primary); border-bottom-color:var(--bs-primary); }
@media (prefers-reduced-motion: reduce){ .kmp-tab { transition:none; } }

/* ── Modal içi bölüm (kmp-section): ikon-başlık + ipucu + sayaç + ince ayraç ── */
.kmp-section { padding-top:1rem; border-top:1px solid var(--bs-border-color); }
.kmp-section__head { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.75rem; }
.kmp-section__ico {
    flex:0 0 auto; width:34px; height:34px; border-radius:var(--ls-radius-md);
    display:inline-flex; align-items:center; justify-content:center; font-size:1.02rem;
    color:var(--ls-accent, var(--bs-primary));
    background:color-mix(in srgb, var(--ls-accent, var(--bs-primary)) 13%, transparent);
}
.kmp-section__titles { flex:1 1 auto; min-width:0; }
.kmp-section__title { font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--bs-body-color); }
.kmp-section__count {
    flex:0 0 auto; align-self:center;
    font-size:.74rem; font-weight:600; font-variant-numeric:tabular-nums;
    padding:.16rem .5rem; border-radius:var(--ls-radius-pill);
    color:var(--ls-accent, var(--bs-primary)); background:var(--ls-accent-soft, var(--bs-primary-bg-subtle));
}

/* ── Checkbox ızgarası (kmp-check-grid): hizalı kolonlar + tıklanabilir kart-satır ── */
.kmp-check-grid {
    display:grid; gap:.4rem;
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
}
.kmp-check {
    display:flex; align-items:center; gap:.55rem; margin:0;
    padding:.45rem .6rem; border:1px solid var(--bs-border-color); border-radius:var(--ls-radius-md);
    background:var(--bs-body-bg); cursor:pointer; user-select:none;
    transition:border-color var(--ls-trans, .15s ease), background var(--ls-trans, .15s ease), box-shadow var(--ls-trans, .15s ease);
}
.kmp-check:hover { border-color:var(--bs-primary-border-subtle, var(--ls-accent)); background:var(--bs-tertiary-bg); }
.kmp-check .form-check-input { margin:0; flex:0 0 auto; cursor:pointer; }
.kmp-check__label { font-size:.86rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kmp-check.is-on {
    border-color:color-mix(in srgb, var(--ls-accent, var(--bs-primary)) 45%, var(--bs-border-color));
    background:var(--ls-accent-soft, var(--bs-primary-bg-subtle));
}
.kmp-check.is-on .kmp-check__label { color:var(--bs-body-color); font-weight:500; }
.kmp-check.is-ro { cursor:default; opacity:.85; }
.kmp-check.is-ro:hover { border-color:var(--bs-border-color); background:var(--bs-body-bg); }
.kmp-check.is-ro.is-on:hover { background:var(--ls-accent-soft, var(--bs-primary-bg-subtle)); }
@media (prefers-reduced-motion: reduce){ .kmp-check { transition:none; } }
/* check etiketi içindeki kod rozeti (ör. tanım kodu) + çok-parça etiket */
.kmp-check__label { display:flex; align-items:baseline; gap:.4rem; min-width:0; }
.kmp-check__code {
    flex:0 0 auto; font-size:.72rem; padding:.05rem .35rem; border-radius:var(--ls-radius-sm);
    color:var(--bs-secondary-color); background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color);
}
.kmp-check.is-on .kmp-check__code { color:var(--ls-accent, var(--bs-primary)); border-color:transparent; background:color-mix(in srgb, var(--ls-accent, var(--bs-primary)) 14%, transparent); }
.kmp-check.is-orphan { border-color:var(--bs-warning-border-subtle, var(--bs-warning)); background:var(--bs-warning-bg-subtle); }

/* satır-içi arama kutusu (bölüm filtreleri) */
.kmp-search-inline { position:relative; }
.kmp-search-inline > .bi { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:var(--bs-secondary-color); font-size:.85rem; pointer-events:none; }
.kmp-search-inline > .form-control { padding-left:1.9rem; }

/* satır-içi boş durum (örn. henüz tanım listesi yok) */
.kmp-empty-inline {
    display:flex; align-items:center; flex-wrap:wrap; gap:.15rem;
    padding:.7rem .85rem; font-size:.85rem; color:var(--bs-secondary-color);
    border:1px dashed var(--bs-border-color); border-radius:var(--ls-radius-md); background:var(--bs-tertiary-bg);
}

/* Tanım görünürlüğü — liste başına değer grubu (Roller) */
.ls-tanim-grup { border:1px solid var(--bs-border-color); border-radius:var(--ls-radius-md); padding:.6rem .7rem; margin-bottom:.6rem; background:var(--bs-body-bg); }
.ls-tanim-grup__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.ls-tanim-grup__ad { font-size:.86rem; font-weight:600; display:flex; align-items:baseline; gap:.4rem; min-width:0; }
.ls-tanim-grup__say {
    flex:0 0 auto; font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums;
    padding:.12rem .45rem; border-radius:var(--ls-radius-pill);
    color:var(--ls-accent, var(--bs-primary)); background:var(--ls-accent-soft, var(--bs-primary-bg-subtle));
}

/* ── Org birim ağaç görünümü (treeview) ── */
.ls-orgtree { display:flex; flex-direction:column; gap:.15rem; }
.ls-orgtree-node {
    display:flex; align-items:center; gap:.55rem;
    padding:.4rem .65rem; border-radius:var(--ls-radius-md);
    border:1px solid transparent; transition:background .12s ease, border-color .12s ease;
}
.ls-orgtree-node:hover { background:var(--bs-tertiary-bg); border-color:var(--bs-border-color); }
.ls-orgtree-guide { color:var(--bs-secondary-color); opacity:.55; font-family:monospace; white-space:pre; }
.ls-orgtree-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:1.9rem; height:1.9rem; flex:none; border-radius:var(--ls-radius-md);
    background:var(--bs-primary-bg-subtle); color:var(--ls-accent, var(--bs-primary)); font-size:1rem;
}
.ls-orgtree-icon.is-company { background:color-mix(in srgb, var(--bs-success) 16%, transparent); color:var(--bs-success); }
.ls-orgtree-icon.is-branch  { background:color-mix(in srgb, var(--bs-info) 18%, transparent); color:var(--bs-info); }
.ls-orgtree-icon.is-team    { background:color-mix(in srgb, var(--bs-warning) 20%, transparent); color:var(--bs-warning-text-emphasis, #997404); }
.ls-orgtree-name { font-weight:500; }
.ls-orgtree-kind { font-size:.72rem; color:var(--bs-secondary-color); }
.ls-orgtree-empty { color:var(--bs-secondary-color); padding:1rem; text-align:center; }
/* Kullanıcı yaprak düğümü — birimden ayrışan hafif/küçük stil */
.ls-orgtree-user { padding:.25rem .65rem; }
.ls-orgtree-user .ls-orgtree-icon {
    width:1.5rem; height:1.5rem; font-size:.8rem;
    background:color-mix(in srgb, var(--bs-secondary) 14%, transparent); color:var(--bs-secondary-color);
}
.ls-orgtree-user .ls-orgtree-name { font-weight:400; font-size:.85rem; color:var(--bs-body-color); }
.ls-orgtree-username { font-size:.72rem; color:var(--bs-secondary-color); font-family:monospace; }
@media (prefers-reduced-motion: reduce){ .ls-orgtree-node { transition:none; } }

/* ── Görsel organizasyon şeması (yukarıdan-aşağı org chart) ──
   Klasik connector tekniği: ebeveynden aşağı dikey çizgi → çocuk başına dikey çizgi
   + üst yatay "bus". Tek çocukta yatay bus gizlenir (dümdüz dikey hat). */
.ls-orgsema-scroll {
    overflow-x: auto; overflow-y: hidden;
    padding: 1.25rem .5rem 1rem;
    -webkit-overflow-scrolling: touch;
}
/* Kök seviyesi: birden çok kök yan yana ortalı */
.ls-orgchart {
    display: inline-flex; justify-content: center; align-items: flex-start;
    gap: 1.5rem; min-width: 100%;
}

/* Bir alt-ağaç: kutu üstte, çocuklar altta (dikey yığın) */
.ls-orgchart-branch {
    display: flex; flex-direction: column; align-items: center;
    position: relative;
}
/* Çocuk satırı: yatay yan yana */
.ls-orgchart-children {
    display: flex; justify-content: center; align-items: flex-start;
    padding-top: 1.4rem; gap: 1.25rem;
    position: relative;
}

/* Ebeveynden çocuk satırına inen dikey ana hat */
.ls-orgchart-branch.has-children > .ls-orgchart-children::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 2px; height: 1.4rem; transform: translateX(-50%);
    background: var(--bs-border-color);
}
/* Her çocuğun üstüne inen dikey bağ */
.ls-orgchart-children > .ls-orgchart-branch::before {
    content: ""; position: absolute; top: -1.4rem; left: 50%;
    width: 2px; height: 1.4rem; transform: translateX(-50%);
    background: var(--bs-border-color);
}
/* Çocukları birbirine bağlayan üst yatay "bus" çizgisi */
.ls-orgchart-children > .ls-orgchart-branch::after {
    content: ""; position: absolute; top: -1.4rem; left: 0; right: 0;
    height: 2px; background: var(--bs-border-color);
}
/* En soldaki çocukta bus'ın sol yarısı, en sağdakinde sağ yarısı gizli (uçlar yuvarlanır) */
.ls-orgchart-children > .ls-orgchart-branch:first-child::after { left: 50%; }
.ls-orgchart-children > .ls-orgchart-branch:last-child::after  { right: 50%; }
/* Tek çocuk → yatay bus tamamen gizli (dümdüz dikey hat) */
.ls-orgchart-children > .ls-orgchart-branch:only-child::after { display: none; }

/* ── Düğüm kartı ── */
.ls-orgchart-node {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; width: 13.5rem; padding: .85rem .85rem .75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: 3px solid var(--ls-accent, var(--bs-primary));
    border-radius: var(--ls-radius-lg, .75rem);
    box-shadow: var(--ls-shadow-sm, 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06));
    transition: box-shadow .15s var(--ls-ease, cubic-bezier(.4,0,.2,1)),
                transform .15s var(--ls-ease, cubic-bezier(.4,0,.2,1)),
                border-color .15s ease;
}
.ls-orgchart-node:hover {
    box-shadow: var(--ls-shadow-md, 0 4px 12px rgba(16,24,40,.12), 0 2px 4px rgba(16,24,40,.07));
    transform: translateY(-2px);
}
/* Türe göre üst-şerit rengi (ağaçtaki tinted ikonlarla aynı palet) */
.ls-orgchart-node.is-holding { border-top-color: var(--ls-accent, var(--bs-primary)); }
.ls-orgchart-node.is-grup    { border-top-color: var(--bs-indigo, #6610f2); }
.ls-orgchart-node.is-company { border-top-color: var(--bs-success); }
.ls-orgchart-node.is-branch  { border-top-color: var(--bs-info); }
.ls-orgchart-node.is-isyeri  { border-top-color: var(--bs-teal, #20c997); }
.ls-orgchart-node.is-depo    { border-top-color: var(--bs-orange, #fd7e14); }
.ls-orgchart-node.is-team    { border-top-color: var(--bs-warning); }

/* Tinted ikon karosu */
.ls-orgchart-node-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; flex: none; border-radius: var(--ls-radius-md, .625rem);
    background: var(--bs-primary-bg-subtle); color: var(--ls-accent, var(--bs-primary));
    font-size: 1.25rem;
}
.ls-orgchart-node-icon.is-grup    { background: color-mix(in srgb, var(--bs-indigo, #6610f2) 14%, transparent); color: var(--bs-indigo, #6610f2); }
.ls-orgchart-node-icon.is-company { background: color-mix(in srgb, var(--bs-success) 16%, transparent); color: var(--bs-success); }
.ls-orgchart-node-icon.is-branch  { background: color-mix(in srgb, var(--bs-info) 18%, transparent); color: var(--bs-info); }
.ls-orgchart-node-icon.is-isyeri  { background: color-mix(in srgb, var(--bs-teal, #20c997) 16%, transparent); color: var(--bs-teal, #20c997); }
.ls-orgchart-node-icon.is-depo    { background: color-mix(in srgb, var(--bs-orange, #fd7e14) 16%, transparent); color: var(--bs-orange, #fd7e14); }
.ls-orgchart-node-icon.is-team    { background: color-mix(in srgb, var(--bs-warning) 20%, transparent); color: var(--bs-warning-text-emphasis, #997404); }

.ls-orgchart-node-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; max-width: 100%; }
.ls-orgchart-node-name {
    font-weight: 600; font-size: .9rem; line-height: 1.25; color: var(--bs-body-color);
    overflow-wrap: anywhere;
}
.ls-orgchart-node-kind {
    font-size: .68rem; letter-spacing: .02em; text-transform: uppercase;
    font-weight: 600; color: var(--bs-secondary-color);
}

/* Kullanıcı chip'leri (birimin altında) */
.ls-orgchart-users {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem;
    margin-top: .15rem; padding-top: .5rem; width: 100%;
    border-top: 1px dashed var(--bs-border-color);
}
.ls-orgchart-user {
    display: inline-flex; align-items: center; gap: .25rem;
    max-width: 100%; padding: .12rem .5rem;
    font-size: .72rem; font-weight: 500; line-height: 1.4;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-pill, 999px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-orgchart-user i { color: var(--bs-secondary-color); font-size: .72rem; flex: none; }

.ls-orgsema-empty {
    color: var(--bs-secondary-color); padding: 2.5rem 1rem; text-align: center;
}
.ls-orgsema-empty i { font-size: 1.75rem; opacity: .6; }

/* Dark temada connector çizgileri biraz daha belirgin */
[data-bs-theme="dark"] .ls-orgchart-branch.has-children > .ls-orgchart-children::before,
[data-bs-theme="dark"] .ls-orgchart-children > .ls-orgchart-branch::before,
[data-bs-theme="dark"] .ls-orgchart-children > .ls-orgchart-branch::after {
    background: color-mix(in srgb, var(--bs-border-color) 65%, var(--bs-secondary-color));
}

@media (prefers-reduced-motion: reduce) { .ls-orgchart-node { transition: none; } }
@media (max-width: 575.98px) {
    .ls-orgchart-node { width: 11rem; }
    .ls-orgchart-children { gap: .75rem; }
}

/* Yazdırma — yalnız org şeması görünür, ekranın geri kalanı gizli */
@media print {
    body:has(#ls-orgsema-print) * { visibility: hidden; }
    #ls-orgsema-print, #ls-orgsema-print * { visibility: visible; }
    #ls-orgsema-print {
        position: absolute; left: 0; top: 0; width: 100%;
        overflow: visible; padding: 0;
    }
    .ls-orgchart-node {
        box-shadow: none !important; transform: none !important;
        border: 1px solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .ls-orgchart-node-icon, .ls-orgchart-user {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .ls-orgchart-branch.has-children > .ls-orgchart-children::before,
    .ls-orgchart-children > .ls-orgchart-branch::before,
    .ls-orgchart-children > .ls-orgchart-branch::after { background: #999; }
    @page { size: landscape; margin: 12mm; }
}

/* ── Admin sayfa başlığı + araç çubuğu ── */
.kmp-page-header { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; }
.kmp-page-title { font-weight:600; letter-spacing:-.01em; margin:0; }

/* ── Şablonlar galerisi ── */
/* (max-width artık .ls-main > * global kuralından geliyor) */

/* Şablon sekmeleri (Süreç / Form) — tasarımcıyla tutarlı tab dili */
.ls-sablon-tabs .nav-link { font-weight: 600; }
.ls-sablon-tabs .nav-link .badge { font-weight: 600; }

.ls-sablon-section-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: var(--ls-radius-md); flex: none;
    background: color-mix(in srgb, var(--ls-accent, #194F9D) 14%, transparent);
    color: var(--ls-accent, #194F9D); font-size: 1rem;
}
.ls-sablon-section-icon--form {
    background: color-mix(in srgb, var(--bs-teal, #20c997) 15%, transparent);
    color: var(--bs-teal, #20c997);
}

.ls-sablon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.ls-sablon-kart {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-lg);
    display: flex; flex-direction: column;
    box-shadow: var(--ls-shadow-md);
    transition: box-shadow var(--ls-trans), transform var(--ls-trans), border-color var(--ls-trans);
    overflow: hidden;
}
.ls-sablon-kart:hover {
    box-shadow: var(--ls-shadow-lg);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ls-accent, #194F9D) 35%, var(--bs-border-color));
}
.ls-sablon-kart--installing { opacity: .75; pointer-events: none; }

.ls-sablon-kart__icon-wrap {
    background: color-mix(in srgb, var(--ls-accent, #194F9D) 10%, var(--bs-tertiary-bg));
    display: flex; align-items: center; justify-content: center;
    height: 64px; font-size: 1.75rem;
    color: var(--ls-accent, #194F9D);
    border-bottom: 1px solid var(--bs-border-color);
}
.ls-sablon-kart__icon-wrap--form {
    background: color-mix(in srgb, var(--bs-teal, #20c997) 12%, var(--bs-tertiary-bg));
    color: color-mix(in srgb, var(--bs-teal, #20c997) 80%, var(--bs-body-color));
}

.ls-sablon-kart__body { padding: .875rem 1rem .5rem; flex: 1; }
.ls-sablon-kart__title { font-weight: 600; font-size: .975rem; letter-spacing: -.01em; margin-bottom: .25rem; }
.ls-sablon-kart__desc { font-size: .82rem; color: var(--bs-secondary-color); line-height: 1.45; }
.ls-sablon-kart__meta { font-size: .8rem; color: var(--bs-secondary-color); }

.ls-sablon-kart__foot { padding: .75rem 1rem; border-top: 1px solid var(--bs-border-color); margin-top: auto; }
.ls-sablon-kart__err { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .ls-sablon-kart { transition: none; }
}

/* ── SurecDetay (talep-detay) — tasarımcı-benzeri 3 sekmeli dock-fill layout ── */
.ls-detay-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    font-size: .84rem;
    color: var(--bs-secondary-color);
    margin-bottom: .4rem;
}
.ls-detay-meta__sep { opacity: .35; }

/* Akış kanvas — etkileşimli SALT-OKUR kanvası (zoom/pan/sürükle) için dock-fill kabı.
   Flex sütun + sabit-ish yükseklik → içteki .ls-edit-canvas (flex:1) doldurur, overflow:auto pan sağlar. */
.ls-detay-canvas {
    display: flex; flex-direction: column;
    min-height: 360px; height: 520px; max-height: 70vh;
    background: var(--bs-tertiary-bg);
    overflow: hidden;            /* iç kanvas kendi scroll'unu yönetir (pan) */
    position: relative;
}
/* İzle/Akış kanvası: tasarımcı .ls-edit-canvas'ı kabını doldurur (border kapta zaten var). */
.ls-detay-canvas > .ls-detay-edit-canvas { border: 0; border-radius: 0; box-shadow: none; }

/* Tam ekran: kanvas viewport'u doldursun (tarayıcı :fullscreen hedefi = .ls-detay-edit-canvas).
   Arka plan kabuk rengiyle uyumlu kalsın (varsayılan siyah yerine), pan için overflow:auto korunur. */
.ls-detay-edit-canvas:fullscreen {
    width: 100vw; height: 100vh; max-height: none;
    background-color: var(--bs-tertiary-bg);
    overflow: auto;
}

/* Adım zaman-çizelgesi */
.ls-detay-timeline { display: flex; flex-direction: column; gap: 0; }
.ls-detay-step {
    display: flex;
    gap: .75rem;
    padding: .75rem 0 .75rem 1.25rem;
    border-left: 2px solid var(--bs-border-color);
    position: relative;
}
.ls-detay-step__dot {
    position: absolute;
    left: -.875rem;
    top: .8rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    border: 2px solid var(--bs-body-bg);
}
.ls-detay-step--done .ls-detay-step__dot {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}
.ls-detay-step--waiting .ls-detay-step__dot {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}
.ls-detay-step__body { flex: 1 1 auto; min-width: 0; padding-top: .1rem; }

/* ── Ayarlar — tab panel kapsayıcı (nav-tabs altındaki panel alanı) ── */
.ls-settings-tabpanel {
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 var(--ls-radius-md) var(--ls-radius-md);
    background: var(--bs-body-bg);
    padding: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .ls-detay-step__dot { transition: none; }
}

/* ── Bölüm başlığı (Geçmiş içi alt-bölümler: Olay günlüğü / Etkinlik) ── */
.ls-section-head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem;
    margin: .25rem 0 .65rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.ls-section-head__title {
    font-size: .82rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.ls-section-head__sub { font-size: .76rem; color: var(--bs-secondary-color); opacity: .8; }

/* ── Append-only olay günlüğü (audit spine) — kompakt dikey zaman çizelgesi ── */
.ls-event-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ls-event {
    display: flex; gap: .7rem;
    padding: .5rem 0 .5rem 1.1rem;
    border-left: 2px solid var(--bs-border-color);
    position: relative;
}
.ls-event__dot {
    position: absolute; left: -.7rem; top: .55rem;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 2px solid var(--bs-body-bg);
}
.ls-event--ok     .ls-event__dot { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.ls-event--danger .ls-event__dot { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }
.ls-event--warn   .ls-event__dot { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ls-event--info   .ls-event__dot { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis); }
.ls-event--start  .ls-event__dot { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.ls-event--erp    .ls-event__dot { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.ls-event__body { flex: 1 1 auto; min-width: 0; }
.ls-event__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .7rem; }
.ls-event__tip { font-weight: 600; font-size: .9rem; }
.ls-event__who { font-size: .78rem; color: var(--bs-secondary-color); }
.ls-event__time { font-size: .76rem; color: var(--bs-secondary-color); margin-left: auto; }
.ls-event__detay { font-size: .8rem; color: var(--bs-secondary-color); margin-top: .1rem; word-break: break-word; }

/* ── Süreç örneği yorum/soru thread'i (SurecDetay > Yorumlar) ── */
.ls-yorum-list { display: flex; flex-direction: column; gap: .75rem; }
.ls-yorum { display: flex; gap: .65rem; align-items: flex-start; }
.ls-yorum__avatar {
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border: 1px solid var(--bs-border-color);
}
.ls-yorum__body {
    flex: 1 1 auto; min-width: 0;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-md);
    padding: .55rem .75rem;
}
.ls-yorum__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ls-yorum__time { font-size: .76rem; color: var(--bs-secondary-color); }
.ls-yorum__text { white-space: pre-wrap; word-break: break-word; margin-top: .15rem; }

/* ── Kullanıcı medyası (profil resmi / imza / belgeler) ── */
.ls-media-row { display: flex; gap: .9rem; align-items: flex-start; }
.ls-media-ctrls { flex: 1 1 auto; min-width: 0; }
.ls-media-prev {
    flex: 0 0 auto; width: 96px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--bs-border-color); border-radius: var(--ls-radius-lg);
    overflow: hidden; background: var(--bs-tertiary-bg);
}
.ls-media-prev img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ls-media-prev .ls-media-empty { font-size: 2.2rem; color: var(--bs-secondary-color); opacity: .55; }
.ls-media-prev--photo img { object-fit: cover; }
.ls-media-prev--photo { border-radius: 50%; }
/* İmza çoğu zaman saydam PNG → açık/dama-tahtası zemin görünür kılar */
.ls-media-prev--sign {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.ls-media-docs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.ls-media-doc {
    display: flex; align-items: center; gap: .65rem;
    padding: .45rem .65rem; border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-md); background: var(--bs-body-bg);
    transition: border-color .12s, background-color .12s;
}
.ls-media-doc:hover { border-color: var(--bs-primary-border-subtle); background: var(--bs-tertiary-bg); }
.ls-media-doc__ico { font-size: 1.15rem; color: var(--bs-secondary-color); flex: 0 0 auto; }
.ls-media-doc__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ls-media-doc__name { font-weight: 500; text-decoration: none; color: var(--bs-body-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-media-doc__name:hover { color: var(--bs-primary); text-decoration: underline; }
.ls-media-doc__meta { font-size: .74rem; color: var(--bs-secondary-color); }
.ls-media-doc__act { flex: 0 0 auto; display: flex; gap: .35rem; }
@media (prefers-reduced-motion: reduce) {
    .ls-media-doc { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   A11Y — klavye odağı görünürlüğü (SurecGrid: sıralanabilir başlık + grup
   satırı aç/kapa + tıklanabilir satır). Mouse'ta görünmez, yalnız
   :focus-visible'da çıkar; shell.css'in global accent halkasını tamamlar.
   ════════════════════════════════════════════════════════════════════════ */

/* Sıralanabilir başlık → inset accent halkası (th kenarına taşmadan) */
.ls-sortable:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ls-accent);
}

/* Tıklanabilir satır + grup başlığı satırı → hücrelere ince accent zemin + sol inset şerit */
.ls-row-link:focus-visible,
.ls-group-row:focus-visible {
    outline: none;
}
.ls-row-link:focus-visible > td,
.ls-group-row:focus-visible > td {
    background: var(--ls-accent-soft);
}
.ls-row-link:focus-visible > td:first-child,
.ls-group-row:focus-visible > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ls-accent);
}

/* ════════════════════════════════════════════════════════════════════════
   WYSIWYG form tasarımcısı — FormRenderer DesignMode (alan seçilebilir +
   seçili vurgu). Yalnız tasarım modunda; canlı/önizleme render'ı etkilenmez.
   ════════════════════════════════════════════════════════════════════════ */
.ls-field-design {
    cursor: pointer;
    border-radius: var(--ls-radius-md);
    padding: .35rem .5rem;
    transition: box-shadow .12s var(--ls-ease, ease), background-color .12s var(--ls-ease, ease);
}
.ls-field-design:hover {
    background: var(--ls-accent-soft, rgba(99, 102, 241, .08));
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
}
/* Tasarım modunda girişler etkileşimsiz (tıklama alana gider, inputa değil) */
.ls-field-design input,
.ls-field-design textarea,
.ls-field-design select,
.ls-field-design .form-check-input,
.ls-field-design button {
    pointer-events: none;
}
/* Seçili alan → belirgin accent çerçeve */
.ls-field-sel {
    box-shadow: inset 0 0 0 2px var(--ls-accent, var(--bs-primary)) !important;
    background: var(--ls-accent-soft, rgba(99, 102, 241, .10));
}
@media (prefers-reduced-motion: reduce) {
    .ls-field-design { transition: none; }
}
/* ════════════════════════════════════════════════════════════════════
   JSON görüntüleyici (JsonView.razor + json-view.js) — renklendirme + ağaç
   Tema-uyumlu palet: anahtar=accent, metin=yeşil, sayı=mavi, bool=mor, null=gri.
   ════════════════════════════════════════════════════════════════════ */
.ls-json {
    --ls-json-key:   var(--ls-accent);
    --ls-json-str:   #1a7f37;          /* yeşilimsi */
    --ls-json-num:   #0b6bcb;          /* mavimsi */
    --ls-json-bool:  #8250df;          /* mor */
    --ls-json-null:  var(--bs-secondary-color);
    --ls-json-punc:  var(--bs-secondary-color);
    --ls-json-count: var(--bs-secondary-color);
    --ls-json-bg:    var(--bs-body-bg);
    --ls-json-border: var(--bs-border-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
[data-bs-theme="dark"] .ls-json {
    --ls-json-key:   #93b4ff;
    --ls-json-str:   #6bd58f;
    --ls-json-num:   #6cb6ff;
    --ls-json-bool:  #c7a0ff;
    --ls-json-null:  var(--bs-secondary-color);
    --ls-json-punc:  var(--bs-secondary-color);
}

.ls-json-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.ls-json-modes .btn { font-size: .78rem; }

/* Ağaç + salt-okur Metin yüzeyi + düzenleme textarea ortak kabuk */
.ls-json-surface,
.ls-json-edit {
    flex: 1 1 auto;
    min-height: 200px;
    background: var(--ls-json-bg);
    border: 1px solid var(--ls-json-border);
    border-radius: var(--ls-radius-md);
    box-shadow: var(--ls-shadow-xs);
    font-family: var(--bs-font-monospace, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);
    font-size: .82rem;
    line-height: 1.65;
    overflow: auto;
}
.ls-json-surface { padding: .65rem .85rem; }
.ls-json-edit {
    white-space: pre;
    tab-size: 2;
    resize: vertical;
}
.ls-json-edit:focus { box-shadow: 0 0 0 .2rem var(--ls-accent-soft); border-color: var(--ls-accent); outline: 0; }

/* ── Renklendirilmiş <pre> (Metin / salt-okur) ── */
.ls-json-pre {
    margin: 0;
    white-space: pre;
    font: inherit;
    color: var(--bs-body-color);
}

/* ── Ağaç (treeview) ── */
.ls-json-tree { color: var(--ls-json-punc); }
.ls-json-node { }
.ls-json-children {
    margin-left: 1.15rem;
    border-left: 1px dashed var(--bs-border-color);
    padding-left: .55rem;
}
.ls-json-row {
    white-space: pre;
    padding: .5px 0;
    border-radius: 4px;
}
.ls-json-toggle { cursor: pointer; user-select: none; }
.ls-json-toggle:hover { background: var(--bs-tertiary-bg); }
.ls-json-toggle:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 1px; }
.ls-json-caret {
    display: inline-block;
    width: 1.05em;
    color: var(--bs-secondary-color);
    transition: transform var(--ls-trans);
}

/* Katlanmış düğüm: çocukları + kapanış satırını gizle, özet rozetini göster */
.ls-json-collapsed-preview { display: none; margin-left: .15em; }
.ls-json-node.ls-json-collapsed > .ls-json-children,
.ls-json-node.ls-json-collapsed > .ls-json-closeline { display: none; }
.ls-json-node.ls-json-collapsed > .ls-json-toggle .ls-json-collapsed-preview { display: inline; }

.ls-json-key   { color: var(--ls-json-key);  font-weight: 600; }
.ls-json-str   { color: var(--ls-json-str); }
.ls-json-num   { color: var(--ls-json-num); }
.ls-json-bool  { color: var(--ls-json-bool); font-weight: 600; }
.ls-json-null  { color: var(--ls-json-null); font-style: italic; }
.ls-json-punc  { color: var(--ls-json-punc); }
.ls-json-count {
    color: var(--ls-json-count);
    font-style: italic;
    font-size: .92em;
    margin: 0 .2em;
}

/* Geçersiz JSON: zarif hata + ham metin */
.ls-json-error {
    color: var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-danger) 30%, transparent);
    border-radius: var(--ls-radius-md);
    padding: .45rem .65rem;
    margin: 0 0 .5rem;
    font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
    .ls-json-caret { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Form Tasarımı — WYSIWYG Alanlar (FormEdit.razor)
   Sol: bölüm/alan listesi (sırala/sil) · Orta: gerçek form (DesignMode)
   Sağ: Özellikler → "Görünüm" stil editörü + koşullu biçimlendirme.
   kmp tasarım dili, dark/light token, prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* WYSIWYG kanvası (tasarım = önizleme) */
.ls-wysiwyg { min-height: 180px; background: var(--bs-body-bg); }
.ls-wysiwyg fieldset { border: 0; }

/* Sol kolon — alan listesi (reorder / sil / seç) */
.ls-fieldlist { display: flex; flex-direction: column; gap: .25rem; }
.ls-fieldlist__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .45rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-md);
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: background-color .12s var(--ls-ease, ease), box-shadow .12s var(--ls-ease, ease);
}
.ls-fieldlist__row:hover { background: var(--ls-accent-soft, rgba(99, 102, 241, .08)); }
.ls-fieldlist__row.is-sel {
    box-shadow: inset 0 0 0 2px var(--ls-accent, var(--bs-primary));
    background: var(--ls-accent-soft, rgba(99, 102, 241, .10));
}
.ls-fieldlist__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ls-fieldlist__label { font-weight: 600; font-size: .82rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-fieldlist__meta { font-size: .7rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-fieldlist__meta code { font-size: .68rem; }
.ls-fieldlist__act { display: flex; gap: .15rem; flex: 0 0 auto; }
.ls-fieldlist__act .btn { line-height: 1; }
.ls-fieldlist__act .btn:disabled { opacity: .3; }

/* Sağ kolon — "Görünüm" stil editörü */
.ls-style { display: flex; flex-direction: column; gap: .15rem; }
.ls-style-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ls-style-cell { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 0; min-width: 0; }
.ls-style-cell--font { flex: 2 1 0; }
.ls-style-cell--size { flex: 1 1 0; min-width: 70px; }
.ls-style-cell--reset { flex: 1 1 100%; }
.ls-style-lbl { font-size: .7rem; color: var(--bs-secondary-color); margin: 0; text-transform: uppercase; letter-spacing: .02em; }
.ls-style-toggle .btn { min-width: 2.1rem; padding-left: .35rem; padding-right: .35rem; }
.ls-style-toggle .btn u { text-underline-offset: 2px; }
.ls-style-color { display: flex; align-items: center; gap: .25rem; }
.ls-style-color .form-control-color { width: 100%; max-width: 3rem; padding: .1rem; cursor: pointer; }

/* Koşullu biçimlendirme kuralı kartı */
.ls-cond-rule {
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--ls-accent, var(--bs-primary));
    border-radius: var(--ls-radius-md);
    background: var(--bs-tertiary-bg);
    padding: .5rem .6rem;
    margin-bottom: .5rem;
}
.ls-cond-rule__no {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--ls-accent, var(--bs-primary));
    border-radius: 50%;
}
.ls-style-hint {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ls-radius-md);
    padding: .4rem .55rem;
    line-height: 1.4;
}
.ls-style-hint div { font-family: var(--bs-font-monospace); color: var(--bs-body-color); word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
    .ls-fieldlist__row { transition: none; }
}

/* (Global dock-fill yardımcısı .ls-dock-fill* yukarıda tanımlı — bkz. ~512. Buradaki yinelenen
   viewport-calc sürümü kaldırıldı; tek kanonik tanım flex-parent-fill olan üstteki.) */

/* Genel sekmesi: kart pane genişliğini düzgün kullansın (dock-fill korunur; içerik üstte hizalı). */
.ls-designer-pane .ls-pane-scroll > .card { width: 100%; }

/* ════════════════════════════════════════════════════════════════════════════
   ERP Adımını Yapılandır — özet kartı + 4-adım sihirbaz (KmpErpAdimWizard)
   kmp tasarım dili (Bootstrap --bs-* + --ls-accent miras), light+dark, dock-fill,
   prefers-reduced-motion. (Süreç tasarımcısı Integration adımı tüketir.)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── ProcessDesigner: Integration adımı özet kartı (sağ özellik paneli) ── */
.ls-erp-summary {
    border: 1px solid var(--bs-border-color);
    border-radius: .55rem;
    background: var(--bs-secondary-bg-subtle);
    padding: .5rem .6rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.ls-erp-summary-row { display: flex; align-items: baseline; gap: .5rem; font-size: .78rem; }
.ls-erp-summary-lbl { color: var(--bs-secondary-color); min-width: 5.2rem; flex: 0 0 auto; }
.ls-erp-summary-val { font-weight: 600; word-break: break-word; }
.ls-erp-summary-na { color: var(--bs-secondary-color); font-weight: 400; font-style: italic; }
.ls-erp-adv-toggle { font-size: .76rem; text-decoration: none; }
.ls-erp-adv-toggle:hover { text-decoration: underline; }
.ls-erp-adv { border-left: 2px solid var(--bs-border-color); padding-left: .6rem; }

/* ── Sihirbaz gövdesi: dock-fill (modal body içinde dikey doldur, scroll içerde) ──
   flex:1 → modal gövdesi büyüdükçe (resize) sihirbaz dolar; min-height rahat bir taban verir
   (modal kuralı: sabit/öngörülebilir yükseklik, sekme değişince ZIPLAMAZ). */
.ls-erpw { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 460px; gap: .85rem; }
/* KmpModal gövdesi sihirbazı barındırınca dikey dolması için flex sütun olsun. */
.kmp-modal-body:has(> .ls-erpw) { display: flex; flex-direction: column; }

/* ── Stepper başlık (tıklanabilir adımlar) ── */
.ls-erpw-steps {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: .35rem; flex-wrap: wrap;
}
/* min-width:0 KRİTİK: 7 adımda flex-item'lar içeriğe kilitlenip sarmasın (eşit daralabilsinler). */
.ls-erpw-step { flex: 1 1 0; min-width: 0; }
.ls-erpw-step-btn {
    width: 100%; display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
    border-radius: .6rem; padding: .45rem .6rem; cursor: pointer; text-align: left;
    transition: border-color .15s var(--ls-ease, ease), background .15s ease, box-shadow .15s ease;
}
.ls-erpw-step-btn:hover { border-color: var(--ls-accent, var(--bs-primary)); }
.ls-erpw-step-btn:focus-visible { outline: 2px solid var(--ls-accent, var(--bs-primary)); outline-offset: 1px; }
.ls-erpw-step-no {
    flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 600;
    background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}
.ls-erpw-step-lbl { font-size: .82rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-erpw-step--active .ls-erpw-step-btn {
    border-color: var(--ls-accent, var(--bs-primary));
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--ls-accent, var(--bs-primary)) 18%, transparent);
}
.ls-erpw-step--active .ls-erpw-step-no { background: var(--ls-accent, var(--bs-primary)); color: #fff; border-color: transparent; }
.ls-erpw-step--done .ls-erpw-step-no { background: var(--bs-success); color: #fff; border-color: transparent; }

/* ── Sabit-yükseklik tab-stack (grid-area:1/1 üst üste — sekme değişince ZIPLAMAZ) ── */
.ls-erpw-stack { display: grid; flex: 1 1 auto; min-height: 320px; }
.ls-erpw-pane { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .55rem; min-height: 0; overflow: auto; }
.ls-erpw-off { visibility: hidden; pointer-events: none; }
.ls-erpw-pane-head { font-weight: 600; font-size: .95rem; }
.ls-erpw-pane-hint { font-size: .82rem; color: var(--bs-secondary-color); }
.ls-erpw-empty { font-size: .85rem; font-style: italic; color: var(--bs-secondary-color); padding: 1rem 0; }

/* ── Kart seçimi (HEDEF + AKSİYON) ──
   auto-fit + minmax → kartlar mevcut genişliği eşit doldurur; tek başına kalan 5. kart yarım-satırda
   yamuk durmaz (kapsayıcı genişledikçe sütun sayısı kendiliğinden artar). */
.ls-erpw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; }
.ls-erpw-cards--list { grid-template-columns: 1fr; }
@media (min-width: 720px) { .ls-erpw-cards--list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.ls-erpw-card {
    position: relative; text-align: left;
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
    border-radius: .7rem; padding: .8rem .9rem;
    display: flex; flex-direction: column; gap: .25rem; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease, background .15s ease;
}
.ls-erpw-card:hover:not(.ls-erpw-card--dis) {
    border-color: var(--ls-accent, var(--bs-primary)); transform: translateY(-1px);
    box-shadow: var(--ls-shadow-sm);
}
.ls-erpw-card:focus-visible { outline: 2px solid var(--ls-accent, var(--bs-primary)); outline-offset: 1px; }
.ls-erpw-card--sel {
    border-color: var(--ls-accent, var(--bs-primary)); background: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--ls-accent, var(--bs-primary)) 22%, transparent);
}
.ls-erpw-card--dis { opacity: .6; cursor: not-allowed; }
.ls-erpw-acard { padding-right: 6rem; }   /* rozet alanı */
.ls-erpw-card-ic { font-size: 1.5rem; }
/* hedef kartı ikon renkleri — sağlayıcıya göre tutarlı kmp paleti (light) */
.ls-erpw-card-ic--tiger { color: var(--bs-teal); }
.ls-erpw-card-ic--mega  { color: var(--bs-purple); }
.ls-erpw-card-ic--rest  { color: var(--bs-success); }
.ls-erpw-card-ic--soap  { color: var(--bs-orange); }
.ls-erpw-card-ic--kod   { color: var(--bs-pink); }
/* dark: koyu zeminde okunur kalsın diye biraz daha açık/doygun ton */
[data-bs-theme=dark] .ls-erpw-card-ic--tiger { color: color-mix(in srgb, var(--bs-teal) 80%, white); }
[data-bs-theme=dark] .ls-erpw-card-ic--mega  { color: color-mix(in srgb, var(--bs-purple) 80%, white); }
[data-bs-theme=dark] .ls-erpw-card-ic--rest  { color: color-mix(in srgb, var(--bs-success) 80%, white); }
[data-bs-theme=dark] .ls-erpw-card-ic--soap  { color: color-mix(in srgb, var(--bs-orange) 80%, white); }
[data-bs-theme=dark] .ls-erpw-card-ic--kod   { color: color-mix(in srgb, var(--bs-pink) 80%, white); }
.ls-erpw-card-ad { font-weight: 600; font-size: .9rem; }
.ls-erpw-card-desc { font-size: .76rem; color: var(--bs-secondary-color); line-height: 1.35; }
.ls-erpw-card-meta { font-size: .72rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.ls-erpw-badge {
    position: absolute; top: .55rem; right: .6rem;
    font-size: .66rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .03em;
}
.ls-erpw-badge--live { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.ls-erpw-badge--dry { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ls-erpw-badge--soon { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* ── Alan eşleme (kalp): ERP hedef | kaynak segmented ── */
.ls-erpw-counter { font-size: .78rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; }
.ls-erpw-counter--ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.ls-erpw-counter--bad { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ls-erpw-map { display: flex; flex-direction: column; gap: .15rem; }
.ls-erpw-map-grouphead {
    font-size: .82rem; font-weight: 600; margin-top: .5rem;
    padding-bottom: .25rem; border-bottom: 1px solid var(--bs-border-color);
    display: flex; align-items: baseline; gap: .4rem;
}
.ls-erpw-map-grouphint { font-size: .72rem; font-weight: 400; color: var(--bs-secondary-color); }
.ls-erpw-map-row {
    display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .75rem; align-items: center;
    padding: .35rem .5rem; border-radius: var(--ls-radius-sm);
    transition: background var(--ls-trans, .15s ease);
}
/* Zebra (eşleme listesi okunurluğu) + hover vurgusu — satır kaynağı görsel olarak izlenebilir. */
.ls-erpw-map-row:nth-of-type(even) { background: color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-secondary-color)); }
.ls-erpw-map-row:hover { background: var(--ls-accent-soft); }
@media (prefers-reduced-motion: reduce) { .ls-erpw-map-row { transition: none; } }
.ls-erpw-map-row--sub { padding-left: 1rem; }
.ls-erpw-map-row--line { padding-left: 1rem; }
.ls-erpw-map-erp { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.ls-erpw-map-erpname { font-size: .82rem; font-weight: 500; }
.ls-erpw-map-erpcode { font-size: .7rem; color: var(--bs-secondary-color); font-family: var(--bs-font-monospace); }
.ls-erpw-req { color: var(--bs-danger); font-weight: 700; margin-left: .1rem; }
.ls-erpw-map-src { min-width: 0; }

/* segmented [Form Alanı | Sabit | Formül] + giriş */
.ls-erpw-seg { display: flex; gap: .4rem; align-items: stretch; }
.ls-erpw-segbtns { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: .45rem; overflow: hidden; flex: 0 0 auto; }
.ls-erpw-segbtn {
    border: 0; background: var(--bs-body-bg); color: var(--bs-secondary-color);
    padding: .25rem .5rem; cursor: pointer; font-size: .82rem;
    border-right: 1px solid var(--bs-border-color);
    transition: background .15s ease, color .15s ease;
}
.ls-erpw-segbtn:last-child { border-right: 0; }
.ls-erpw-segbtn:hover { background: var(--bs-secondary-bg); }
.ls-erpw-segbtn:focus-visible { outline: 2px solid var(--ls-accent, var(--bs-primary)); outline-offset: -2px; }
.ls-erpw-segbtn--sel { background: var(--ls-accent, var(--bs-primary)); color: #fff; }
.ls-erpw-seginput { flex: 1 1 auto; min-width: 0; }

/* ── Önizleme JSON ── */
.ls-erpw-valid { font-size: .82rem; margin-bottom: 0; }
.ls-erpw-valid ul { padding-left: 1.1rem; }
.ls-erpw-json {
    flex: 1 1 auto; min-height: 8rem; margin: 0; overflow: auto;
    font-family: var(--bs-font-monospace); font-size: .8rem; line-height: 1.5;
    background: var(--bs-secondary-bg-subtle); border: 1px solid var(--bs-border-color);
    border-radius: .55rem; padding: .65rem .8rem;
}

@media (prefers-reduced-motion: reduce) {
    .ls-erpw-step-btn, .ls-erpw-card, .ls-erpw-segbtn { transition: none; }
    .ls-erpw-card:hover:not(.ls-erpw-card--dis) { transform: none; }
}

/* ── Genel REST/SOAP entegrasyon sihirbazı ek stilleri (ls-erpw tab-stack içinde) ── */
/* Ham gövde / SOAP zarf textarea — monospace kod görünümü */
.ls-erpw-code {
    font-family: var(--bs-font-monospace); font-size: .8rem; line-height: 1.5;
    background: var(--bs-secondary-bg-subtle); border-radius: .5rem;
    white-space: pre; tab-size: 2;
}
/* Kullanılabilir alan çipleri (SOAP zarf ipucu) */
.ls-erpw-fieldchip {
    display: inline-block; margin: .1rem .2rem 0 0; padding: .05rem .35rem;
    font-size: .72rem; border-radius: .35rem;
    background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}
/* REST/SOAP eşleme satırları — Hedef (input) | kaynak segmented + sil (eşit iki sütun) */
.ls-erpw-map-row--dis { grid-template-columns: minmax(8rem, 1fr) 1.4fr; padding-left: 0; align-items: start; }
.ls-erpw-resp-head { padding-bottom: .15rem; align-items: end; }
.ls-erpw-resp-head .ls-erpw-map-erpname { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }

/* ── Kod (C#/VB) adımı: dil seçici + alan çipleri + geniş kod editörü ── */
.ls-kod-langbtn { min-width: 3rem; font-weight: 600; font-size: .85rem; padding: .3rem .7rem; }
.ls-kod-fields { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 5.5rem; overflow: auto; }
.ls-kod-fieldchip {
    border: 1px solid var(--bs-border-color); background: var(--bs-secondary-bg);
    border-radius: .4rem; padding: .12rem .4rem; cursor: pointer; line-height: 1.3;
    transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.ls-kod-fieldchip:hover { border-color: var(--ls-accent, var(--bs-primary)); background: var(--bs-primary-bg-subtle); transform: translateY(-1px); }
.ls-kod-fieldchip:focus-visible { outline: 2px solid var(--ls-accent, var(--bs-primary)); outline-offset: 1px; }
.ls-kod-fieldchip code { font-size: .72rem; color: var(--bs-body-color); }
/* Editör: monospace + dikey resize + rahat satır yüksekliği (ls-erpw-code temelini genişletir) */
.ls-kod-editor { resize: vertical; min-height: 16rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
    .ls-kod-fieldchip { transition: none; }
    .ls-kod-fieldchip:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ERP "sistem adımı" zaman çizelgesi rozetleri (SurecDetay > GEÇMİŞ)
   Integration/ERP yazma denemeleri insan görevleriyle aynı timeline'da; teal "fiş"
   noktası + duruma göre rozet (yazıldı/güncellendi yeşil · hata kırmızı · atlandı gri).
   kmp tasarım dili, Bootstrap CSS değişkenleri (light+dark otomatik).
   ════════════════════════════════════════════════════════════════════════════ */
.ls-detay-step--erp { border-left-color: var(--bs-teal, #20c997); }
.ls-detay-step__dot--erp {
    background: color-mix(in srgb, var(--bs-teal, #20c997) 18%, var(--bs-body-bg));
    color: var(--bs-teal, #0f9b78);
    border-color: var(--bs-body-bg);
}
.ls-erp-badge {
    font-size: .7rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--ls-radius-sm, .375rem);
    padding: .15rem .5rem;
    display: inline-flex;
    align-items: center;
}
.ls-erp-badge--ok {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border-color: var(--bs-success-border-subtle);
}
.ls-erp-badge--err {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
}
.ls-erp-badge--skip {
    background: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}
.ls-erp-badge--try {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border-color: var(--bs-warning-border-subtle);
}
.ls-erp-belge {
    color: var(--bs-success-text-emphasis);
    font-weight: 500;
}
.ls-erp-hata > summary {
    cursor: pointer;
    user-select: none;
    list-style: revert;
}
.ls-erp-hata > pre {
    margin-top: .35rem;
    padding: .5rem .65rem;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: var(--ls-radius-sm, .375rem);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 12rem;
    overflow: auto;
}
/* Derin-link hedefi: bildirimden gelen #erp-N satırı kısa süre vurgulanır. */
.ls-detay-step--erp:target {
    animation: ls-erp-target 2s var(--ls-ease, ease) 1;
    border-radius: var(--ls-radius-sm, .375rem);
}
@keyframes ls-erp-target {
    0%, 30% { background: color-mix(in srgb, var(--bs-teal, #20c997) 14%, transparent); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .ls-detay-step--erp:target { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   YENİ ORTAK SINIFLAR (BATCH 1) — razor ekibi tüketecek; burada bir kez tanımlı.
   Hepsi kmp tasarım dili: --ls-* ve --bs-* token, light+dark otomatik, :focus-visible
   halkası, prefers-reduced-motion. (.ls-iconbtn ve .ls-empty zaten shell.css'te.)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Segmented pill kontrol (topbar dil değiştirici + login TR/EN) ──
   Kullanım: <div class="ls-seg"><a class="ls-seg-link active">TR</a><a class="ls-seg-link">EN</a></div>
   (button de olabilir). Aktif = accent-soft zemin + accent metin. */
.ls-seg {
    display: inline-flex; align-items: center; gap: .15rem;
    padding: .2rem; border-radius: var(--ls-radius-pill);
    background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
}
.ls-seg-link {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 2.1rem; padding: .22rem .6rem;
    border: 0; background: transparent; cursor: pointer;
    border-radius: var(--ls-radius-pill);
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    color: var(--bs-secondary-color); text-decoration: none;
    transition: background var(--ls-trans), color var(--ls-trans);
}
.ls-seg-link:hover { color: var(--bs-body-color); }
.ls-seg-link.active, .ls-seg-link[aria-pressed="true"] {
    background: var(--ls-accent-soft); color: var(--ls-accent);
}
.ls-seg-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ls-accent-soft); }
@media (prefers-reduced-motion: reduce) { .ls-seg-link { transition: none; } }

/* ── Topbar kullanıcı çipi (avatar dairesi + ad) ── */
.ls-userchip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .2rem .6rem .2rem .25rem; border-radius: var(--ls-radius-pill);
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
    color: var(--bs-body-color); text-decoration: none; max-width: 220px;
    transition: background var(--ls-trans), border-color var(--ls-trans);
}
.ls-userchip:hover { background: var(--bs-secondary-bg); border-color: color-mix(in srgb, var(--ls-accent) 30%, var(--bs-border-color)); }
.ls-userchip:focus-visible { outline: none; border-color: var(--ls-accent); box-shadow: 0 0 0 3px var(--ls-accent-soft); }
.ls-userchip__avatar {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: #fff; text-transform: uppercase;
    background: linear-gradient(135deg, var(--ls-accent), color-mix(in srgb, var(--ls-accent) 55%, #2bb0ff));
}
.ls-userchip__name {
    font-size: .85rem; font-weight: 500; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ls-userchip__sub { font-size: .72rem; color: var(--bs-secondary-color); line-height: 1.1; }
@media (max-width: 575.98px) { .ls-userchip__name, .ls-userchip__sub { display: none; } .ls-userchip { padding: .2rem; } }

/* ── Vekâlet/taklit (impersonation) bandı — slim, warning-subtle ── */
.ls-impersonate-bar {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .45rem .9rem; font-size: .85rem;
    color: var(--bs-warning-text-emphasis, #997404);
    background: var(--bs-warning-bg-subtle);
    border-bottom: 1px solid var(--bs-warning-border-subtle, var(--bs-border-color));
}
.ls-impersonate-bar > i { font-size: 1rem; flex: 0 0 auto; }
.ls-impersonate-bar b { font-weight: 700; }
.ls-impersonate-bar .ls-impersonate-bar__end { margin-left: auto; }

/* ── Sekme etiketinde küçük sayaç pill'i (tabular-nums) ── */
.ls-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; padding: 0 .35rem; margin-left: .35rem;
    height: 1.25rem; border-radius: var(--ls-radius-pill);
    font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
    color: var(--bs-secondary-color); background: var(--bs-secondary-bg);
}
.ls-tab-count--accent { color: var(--ls-accent); background: var(--ls-accent-soft); }
/* Aktif sekmedeyse vurgula (BS .nav-link.active / .kmp-tab--active içinde) */
.active > .ls-tab-count, .kmp-tab--active .ls-tab-count, .ls-tab-count.active {
    color: var(--ls-accent); background: var(--ls-accent-soft);
}

/* ── Mini yük/ilerleme çubuğu (dashboard "yük") ──
   Kullanım: <div class="ls-load-row"><span>Etiket</span><div class="ls-load-bar" style="--ls-load:65%"></div></div>
   Doluluk yüzdesini --ls-load değişkeniyle ver (ör. style="--ls-load:65%"); renk --ls-load-c (varsayılan accent). */
.ls-load-row { display: flex; align-items: center; gap: .6rem; }
.ls-load-row > .ls-load-lbl { flex: 0 0 auto; font-size: .8rem; color: var(--bs-secondary-color); min-width: 0; }
.ls-load-row > .ls-load-val { flex: 0 0 auto; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.ls-load-bar {
    flex: 1 1 auto; position: relative; height: 8px; min-width: 60px;
    border-radius: var(--ls-radius-pill); background: var(--bs-secondary-bg); overflow: hidden;
}
.ls-load-bar::before {
    content: ""; position: absolute; inset: 0 auto 0 0;
    width: clamp(0%, var(--ls-load, 0%), 100%);
    border-radius: inherit;
    background: var(--ls-load-c, var(--ls-accent));
    transition: width var(--ls-trans);
}
.ls-load-bar--warn { --ls-load-c: var(--bs-warning); }
.ls-load-bar--danger { --ls-load-c: var(--bs-danger); }
.ls-load-bar--ok { --ls-load-c: var(--bs-success); }
@media (prefers-reduced-motion: reduce) { .ls-load-bar::before { transition: none; } }

/* ── Drag/resize sırasında metin seçimini ve imleci kilitle (kmp-modal.js gövdeye sınıf ekler) ── */
body.kmp-modal-dragging, body.kmp-modal-dragging * { user-select: none !important; -webkit-user-select: none !important; }
body.kmp-modal-dragging { cursor: move !important; }
body.kmp-modal-resizing, body.kmp-modal-resizing * { user-select: none !important; -webkit-user-select: none !important; }
body.kmp-modal-resizing { cursor: nwse-resize !important; }

/* ── Kişisel Pano (Home) — tıklanabilir KPI + sabitlenmiş kısayol kutucukları ────────── */

/* Tıklanabilir iş-özeti kartı (KPI dili + link davranışı) */
a.ls-kpi-link, a.ls-kpi-link:hover, a.ls-kpi-link:focus { display:block; text-decoration:none !important; color:inherit; cursor:pointer; }
a.ls-kpi-link .ls-kpi-val { color:var(--bs-body-color); }   /* sayı link-mavisi olmasın (inherit fallback) */
a.ls-kpi-link:focus-visible { outline:none; border-color:var(--ls-kpi-c, var(--ls-accent)); box-shadow:0 0 0 3px var(--ls-accent-soft); }
.ls-kpi-desc { font-size:.78rem; color:var(--bs-secondary-color); margin-top:.3rem; line-height:1.35; }

/* Sabitlenmiş süreç kutucuğu — start alanı + köşede kaldır (×) */
.ls-pin {
    position:relative; height:100%;
    border:1px solid var(--bs-border-color); border-radius:var(--ls-radius-lg);
    background:var(--bs-body-bg); box-shadow:var(--ls-shadow-sm); overflow:hidden;
    transition:transform var(--ls-trans), box-shadow var(--ls-trans), border-color var(--ls-trans);
}
.ls-pin:hover {
    transform:translateY(-2px); box-shadow:var(--ls-shadow-md);
    border-color:color-mix(in srgb, var(--ls-accent) 30%, var(--bs-border-color));
}
.ls-pin-main {
    display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem;
    text-decoration:none; color:var(--bs-body-color); height:100%;
}
.ls-pin-main:hover { color:var(--bs-body-color); }
.ls-pin-ico {
    flex:0 0 auto; width:40px; height:40px; border-radius:var(--ls-radius-md); font-size:1.2rem;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ls-accent); background:color-mix(in srgb, var(--ls-accent) 12%, transparent);
    transition:background var(--ls-trans), color var(--ls-trans);
}
.ls-pin:hover .ls-pin-ico { background:var(--ls-accent); color:#fff; }
.ls-pin-body { display:flex; flex-direction:column; min-width:0; }
.ls-pin-name { font-weight:600; }
.ls-pin-code { margin-top:.15rem; }
/* Köşedeki kaldır düğmesi — yalnız hover/focus'ta belirgin */
.ls-pin-unpin {
    position:absolute; top:.4rem; right:.4rem; width:26px; height:26px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid transparent; border-radius:var(--ls-radius-sm); font-size:.78rem;
    background:transparent; color:var(--bs-secondary-color); opacity:0;
    transition:opacity var(--ls-trans), background var(--ls-trans), color var(--ls-trans);
}
.ls-pin:hover .ls-pin-unpin, .ls-pin-unpin:focus-visible { opacity:1; }
.ls-pin-unpin:hover { background:var(--bs-danger-bg-subtle); color:var(--bs-danger-text-emphasis); }
.ls-pin-unpin:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ls-accent-soft); }

/* ── Süreç Başlat — sabitleme (pin) düğmeli süreç kartı ──────────────────────────────── */
/* .ls-quick gövdesini start-alanı + pin-toggle olarak iki parçaya böl (buton içinde buton olamaz) */
.ls-quick-pinnable { padding:0; gap:0; align-items:stretch; }
.ls-quick-go {
    display:flex; align-items:center; gap:.7rem; flex:1 1 auto; min-width:0;
    padding:.85rem .5rem .85rem 1rem; border:0; background:transparent;
    color:var(--bs-body-color); cursor:pointer;
}
.ls-quick-go > i:first-child {
    flex:0 0 auto; width:40px; height:40px; border-radius:var(--ls-radius-md); font-size:1.2rem;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ls-accent); background:color-mix(in srgb, var(--ls-accent) 12%, transparent);
    transition:background var(--ls-trans), color var(--ls-trans);
}
.ls-quick-pinnable:hover .ls-quick-go > i:first-child { background:var(--ls-accent); color:#fff; }
.ls-quick-go:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--ls-accent); border-radius:var(--ls-radius-lg); }
/* Pin toggle — boş yıldız/çivi; sabitliyken accent dolu */
.ls-pin-toggle {
    flex:0 0 auto; width:42px; padding:0; border:0; border-left:1px solid var(--bs-border-color);
    background:transparent; color:var(--bs-secondary-color); font-size:1rem; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:color var(--ls-trans), background var(--ls-trans);
}
.ls-pin-toggle:hover { background:var(--ls-accent-soft); color:var(--ls-accent); }
.ls-pin-toggle.is-on { color:var(--ls-accent); }
.ls-pin-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ls-accent-soft); }

@media (prefers-reduced-motion: reduce) {
    .ls-pin, .ls-pin-ico, .ls-pin-unpin, .ls-quick-go > i:first-child, .ls-pin-toggle { transition:none; }
}

/* Dark: pano kartları gövdeden hafif aydınlanan elevated yüzey */
[data-bs-theme=dark] .ls-pin { background:color-mix(in srgb, var(--bs-body-bg) 92%, #fff); }

/* ── Pano (GridStack dashboard) — LogoKokpit dashboard motorundan portlandı ── */
/* Görünüm = staticGrid, düzenleme = sürükle/boyut: AYNI gridstack motoru → görünüm==düzenleme garantisi. */
/* (Eski CSS-grid görünümü kaldırıldı; .kmp-dash / .kmp-dash-item artık kullanılmıyor.) */
.kmp-dash-host { min-height:200px; }
/* Tile yüzeyi = ls-kpi dili (yumuşak gölge + hover-lift). İç scroll yalnız gövdede. */
.kmp-dash-tile { height:100%; display:flex; flex-direction:column; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:.75rem; padding:.85rem .95rem; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.03); transition:transform .15s var(--kmp-ease,ease), box-shadow .15s, border-color .15s; }
.kmp-dash-tile:hover { box-shadow:0 .5rem 1.5rem rgba(0,0,0,.08); }
/* KPI/panel kartı kendi krom + accent çubuğunu taşır → tile'ı çıplaklaştır (kutu-içinde-kutu YOK). */
.kmp-dash-tile--bare { padding:0; border:none; background:none; box-shadow:none; overflow:visible; }
.kmp-dash-tile--bare:hover { box-shadow:none; }
.kmp-dash-tile--bare > :only-child { height:100%; }

/* Edit mode (gridstack) */
.kmp-dash-editbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.75rem; }
.kmp-dash-editbar .spacer { flex:1; }
.kmp-dash-editbar__badge { font-size:.72rem; font-weight:600; padding:.15rem .55rem; border-radius:1rem; background:var(--bs-primary-bg-subtle); color:var(--bs-primary-text-emphasis); white-space:nowrap; }
/* Tile içeriği HÜCREYİ doldurur + taşmayı KIRP → tile içi kaydırma çubuğu YOK (uzun paneller kendi iç `overflow:auto`
   gövdesiyle kaydırır). position:absolute ayrıca × için konumlu ata = doğru köşe.
   ⚠️ Yüksek özgüllük: GridStack `.grid-stack>.grid-stack-item>.grid-stack-item-content{overflow-y:auto}` (0,3,0) kuralını EZER. */
.kmp-dash-host.grid-stack > .grid-stack-item > .grid-stack-item-content { position:absolute; inset:0; overflow:hidden; border-radius:.75rem; }
/* Düzenleme: sürükle-ipucu (outline + cursor) + tıkanma engeli (linkler/butonlar pasif → tıklayınca gezinmez) */
.kmp-dash--edit .grid-stack-item-content { cursor:move; outline:1px dashed var(--bs-primary); outline-offset:-1px; border-radius:.75rem; }
.kmp-dash--edit .grid-stack-item-content a, .kmp-dash--edit .grid-stack-item-content [role="button"], .kmp-dash--edit .grid-stack-item-content button { pointer-events:none; }
/* boyutlandırma tutamaçları içerik üstünde kalsın (gridstack.min.css'in .ui-resizable-handle stilini koru) */
.kmp-dash--edit .ui-resizable-handle { z-index:7; }
/* Widget kaldır (×) — düzenlemede tile köşesinde belirir; nav-guard'tan muaf (yüksek özgüllük → tıklanır) */
.kmp-dash-del { position:absolute; top:6px; right:6px; z-index:8; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:0; border-radius:50%; border:1px solid var(--bs-border-color); background:var(--bs-body-bg); color:var(--bs-danger); font-size:1.05rem; opacity:0; transition:opacity .12s; cursor:pointer; }
.kmp-dash--edit .grid-stack-item-content .kmp-dash-del { pointer-events:auto; }
.kmp-dash--edit .kmp-dash-del { opacity:.6; }
.kmp-dash--edit .grid-stack-item:hover .kmp-dash-del, .kmp-dash--edit .kmp-dash-del:focus-visible { opacity:1; }
/* gridstack sürükle placeholder'ı tema-uyumlu */
.kmp-dash-host .grid-stack-placeholder > .placeholder-content { border:2px dashed var(--bs-primary); background:var(--bs-primary-bg-subtle); border-radius:.75rem; }
@media (prefers-reduced-motion: reduce) { .kmp-dash-tile { transition:none; } }

/* Pano grafikleri (saf SVG; harici lib yok) — çoğunlukla inline stil, minimal CSS. */
.ls-donut { display:block; }
.ls-donut-total { font-size:7px; font-weight:700; fill:var(--bs-body-color); }

/* CodeMirror 5 — SQL editörü (Veri Setleri); kmp tasarım + dark/light uyumu. */
.CodeMirror { height:auto; min-height:9rem; border:1px solid var(--bs-border-color); border-radius:.5rem; font-size:.82rem; font-family:ui-monospace,Consolas,monospace; }
.CodeMirror.cm-dark { background:var(--bs-body-bg); color:var(--bs-body-color); }
.cm-dark .CodeMirror-gutters { background:var(--bs-tertiary-bg); border-color:var(--bs-border-color); }
/* Söz-dizimi denetimi: hatalı satır vurgusu (lsSqlEditor.markHata) — kırmızı tint + sol şerit. */
.CodeMirror .cm-ls-hata { background:rgba(220,53,69,.13); box-shadow:inset 3px 0 0 var(--bs-danger,#dc3545); }
/* IntelliSense (otomatik tamamlama) popup'ı — editör MODAL içinde (.kmp-modal-backdrop z-index:1080) açıldığından
   show-hint varsayılan z-index:10 popup'ı modalın ARKASINDA kalıyordu (DOM'da var ama görünmez). Modalın ÜSTÜNE al. */
.CodeMirror-hints { z-index:2000 !important; }

/* ── Kod Gezgini (/admin/kod) — sol gruplu liste + sağ salt-okur kod görüntüleyici ── */
.ls-kod-explorer { display:flex; flex-direction:row; flex:1 1 auto; width:100%; gap:1rem; min-height:0; min-width:0; }
.ls-kod-list { flex:0 0 340px; display:flex; flex-direction:column; min-height:0; overflow-y:auto;
    border:1px solid var(--bs-border-color); border-radius:var(--ls-radius-lg); background:var(--bs-body-bg); box-shadow:var(--ls-shadow-sm); }
.ls-kod-search { position:sticky; top:0; z-index:2; padding:.6rem; background:var(--bs-body-bg); border-bottom:1px solid var(--bs-border-color); }
.ls-kod-search i { position:absolute; left:1.2rem; top:50%; transform:translateY(-50%); color:var(--bs-secondary-color); font-size:.85rem; pointer-events:none; }
.ls-kod-search input { padding-left:1.95rem; }
.ls-kod-grp-head { display:flex; align-items:center; gap:.3rem; padding:.55rem .75rem .3rem; font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; color:var(--bs-secondary-color); cursor:pointer; user-select:none;
    border-radius:.4rem; transition:background var(--kmp-transition, .15s ease); }
.ls-kod-grp-head:hover { background:var(--bs-secondary-bg); color:var(--bs-body-color); }
.ls-kod-grp-head::-webkit-details-marker, .ls-kod-grp-head::marker { display:none; content:""; }   /* native ok gizle → kendi chevron'umuz */
.ls-kod-grp-chev { font-size:.65rem; transition:transform var(--kmp-transition, .15s ease); flex:0 0 auto; opacity:.7; }
.ls-kod-grp[open] > .ls-kod-grp-head .ls-kod-grp-chev { transform:rotate(90deg); }
.ls-kod-grp-ico { font-size:.85rem; opacity:.85; }
.ls-kod-grp-count { margin-left:auto; background:var(--bs-secondary-bg); border-radius:1rem; padding:0 .45rem; font-size:.7rem; font-weight:600; }
@media (prefers-reduced-motion: reduce) { .ls-kod-grp-chev, .ls-kod-grp-head { transition:none; } }
.ls-kod-item { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:.5rem; width:100%; text-align:left;
    border:none; background:none; padding:.4rem .75rem; border-left:3px solid transparent; cursor:pointer; transition:background var(--ls-trans,.15s); }
.ls-kod-item:hover { background:var(--bs-secondary-bg); }
.ls-kod-item.is-sel { background:var(--ls-accent-soft); border-left-color:var(--ls-accent); }
.ls-kod-item-name { grid-column:1; grid-row:1; font-size:.85rem; font-weight:600; color:var(--bs-body-color); min-width:0; }
.ls-kod-item-meta { grid-column:1; grid-row:2; font-size:.72rem; color:var(--bs-secondary-color); min-width:0; }
.ls-kod-badge { grid-column:2; grid-row:1/3; align-self:center; font-size:.64rem; font-weight:700; letter-spacing:.02em; padding:.12rem .42rem;
    border-radius:var(--ls-radius-sm,.375rem); background:var(--bs-secondary-bg); color:var(--bs-secondary-color); white-space:nowrap; }
.ls-kod-badge--sql { background:color-mix(in srgb,#0d9488 16%,transparent); color:#0d9488; }
.ls-kod-badge--json { background:color-mix(in srgb,#7c3aed 16%,transparent); color:#7c3aed; }
.ls-kod-badge--csharp, .ls-kod-badge--vb { background:color-mix(in srgb,#194F9D 16%,transparent); color:#194F9D; }
.ls-kod-view { flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden;
    border:1px solid var(--bs-border-color); border-radius:var(--ls-radius-lg); background:var(--bs-body-bg); box-shadow:var(--ls-shadow-sm); }
.ls-kod-view-head { display:flex; align-items:center; gap:.6rem; padding:.55rem .85rem; border-bottom:1px solid var(--bs-border-color);
    background:linear-gradient(180deg,var(--bs-tertiary-bg),var(--bs-body-bg)); }
.ls-kod-view-title { display:flex; align-items:center; gap:.5rem; min-width:0; max-width:55%; }
.ls-kod-view .ls-empty { margin:auto; }
.ls-kod-view .CodeMirror { flex:1 1 auto; min-height:0; border:none; border-radius:0; }
@media (max-width:992px){ .ls-kod-explorer{ flex-direction:column; } .ls-kod-list{ flex:0 0 auto; max-height:38vh; } }

/* ── Pano (Home) cila: basit KPI içeriğini dikey ORTALA → h=2 hücrede dengeli görünüm (üst+alt boşluk eşit,
   "üstte sıkışık + altta boş" görünümü gider). Yalnız tıklanabilir basit KPI'lar (panel başlık/gövdeleri etkilenmez). */
.kmp-dash-tile .ls-kpi[role="button"] { display:flex; flex-direction:column; justify-content:center; }