:root {
    --ls-topbar-h: 52px;
    --ls-sidebar-w: 220px;
    --ls-accent: #194F9D;
}

.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: .35rem;
    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;
}

.ls-login { background: var(--bs-tertiary-bg); }

/* 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: .5rem;
    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 rgba(232, 78, 27, .35); border-color: #E84E1B; }

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