/* laf-pagelayout2.css — LAFPageLayout2 bileşeninin stilleri */

.laf-pagelayout-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--LAF-palette-background);
}

/* JS tarafından toggle edilir (LAF2_Hide / LAF2_AnimateIn) */
.laf-pagelayout-init {
    opacity: 0;
    transform: translateY(30px);
}

/* JS tarafından eklenir (LAF2_AnimateIn) */
.laf-pagelayout-animate-in {
    animation: laf-pagelayout-fade-slide-in 0.45s ease forwards;
    animation-delay: 0.05s;
}

@keyframes laf-pagelayout-fade-slide-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.laf-pagelayout-header {
    flex-shrink: 0;
    height: 52px;
    overflow: visible;
    position: relative;
    z-index: 301;
}

.laf-pagelayout-footer {
    flex-shrink: 0;
    height: 25px;
    overflow: hidden;
    background: linear-gradient(to left, var(--LAF-palette-surface), var(--LAF-palette-background)) !important;
}

.laf-pagelayout-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.laf-pagelayout-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── DRAWER — desktop ─────────────────────────────────── */
.laf-pagelayout-drawer {
    flex-shrink: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--LAF-palette-background);
    border-left: 1px solid var(--mud-palette-lines-default);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.laf-pagelayout-drawer--open {
    width: var(--laf-pagelayout-drawer-width);
/*    transition: none;
*/

}

/* JS resize sırasında eklenir — sürüklerken animasyon olmasın */
.laf-pagelayout-drawer--resizing {
    transition: none !important;
}

/* Sabit genişlik — kapanırken reflow olmaz */
.laf-pagelayout-drawer-inner {
    width: var(--laf-pagelayout-drawer-width);
    min-width: var(--laf-pagelayout-drawer-width);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ── DRAWER — overlay ─────────────────────────────────── */
.laf-pagelayout-drawer--overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    z-index: 300;
    border-left: none;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
}

    .laf-pagelayout-drawer--overlay.laf-pagelayout-drawer--open {
        width: var(--laf-pagelayout-drawer-width);
    }

    .laf-pagelayout-drawer--overlay .laf-pagelayout-drawer-inner {
        width: var(--laf-pagelayout-drawer-width);
        min-width: var(--laf-pagelayout-drawer-width);
    }

/* ── OVERLAY BACKDROP ─────────────────────────────────── */
.laf-pagelayout-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 299;
    cursor: pointer;
    animation: laf-pagelayout-overlay-in 0.2s ease forwards;
}

@keyframes laf-pagelayout-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── RESIZER — desktop ────────────────────────────────── */
.laf-pagelayout-resizer {
    flex-shrink: 0;
    width: 0;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: visible;
    position: relative;
    /* z-index yok — popup'lar üste çıkabilsin */
}

/* ── RESIZER — overlay ────────────────────────────────── */
.laf-pagelayout-resizer--overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    overflow: visible;
    z-index: 301;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .laf-pagelayout-resizer::before,
    .laf-pagelayout-resizer--overlay::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8px;
        right: -8px;
        cursor: ew-resize;
    }

/* ── RESIZER GRIP ─────────────────────────────────────── */
.laf-pagelayout-resizer-grip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    position: relative; /* absolute değil — stacking context oluşturmaz */
    padding: 4px 3px;
    border-radius: 3px;
    background: var(--LAF-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Overlay modda grip gizle */
.laf-pagelayout-resizer--overlay .laf-pagelayout-resizer-grip {
    display: none;
}

.laf-pagelayout-resizer-grip span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
    opacity: 0.5;
    transition: opacity 0.2s;
}

/* .laf-pagelayout-resizer--active JS tarafından sürükleme sırasında eklenir */
.laf-pagelayout-resizer:hover .laf-pagelayout-resizer-grip span,
.laf-pagelayout-resizer--active .laf-pagelayout-resizer-grip span {
    opacity: 1;
}