/* =========================================================
   C:\Users\ferha\source\repos\EFYazilimOnline\EFYazilimWeb\wwwroot\css\efy-private-layout.css
   FIX: Sidebar footer (Çıkış) alt FooterBar altında kalmasın
   ========================================================= */

/* =========================================================
   THEME TOKENS
   ========================================================= */
:root {
    --bg0: #0b1020;
    --bg1: #101a33;
    --bg2: #0f1730;
    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.04);
    --border: rgba(255,255,255,.12);
    --border2: rgba(255,255,255,.08);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.62);
    --a1: #2e74ff;
    --a2: #2fb573;
    --shadow: 0 18px 55px rgba(0,0,0,.35);
    --content-bg: rgba(12,16,28,.72);
    --content-bg2: rgba(255,255,255,.06);
    --content-border: rgba(255,255,255,.14);
    --content-border2: rgba(255,255,255,.10);
    --content-text: rgba(255,255,255,.92);
    --content-muted: rgba(255,255,255,.62);
    --content-shadow: 0 16px 45px rgba(0,0,0,.30);
    /* ✅ FooterBar yüksekliği (content + sidebar footer altında kalmasın) */
    --efy-footer-h: 46px;
    /* ✅ Desktop üst header bar yüksekliği */
    --efy-topbar-h: 72px;
    /* ✅ Kart/panel arka plan — tüm sayfalar için global */
    --card-bg: #1e2335;
    --input-bg: #14213a;
}

    :root[data-theme="light"] {
        --bg0: #f5f7ff;
        --bg1: #eef3ff;
        --bg2: #ffffff;
        --card: rgba(255,255,255,.92);
        --card2: rgba(17,24,39,.03);
        --border: rgba(17,24,39,.12);
        --border2: rgba(17,24,39,.08);
        --text: rgba(17,24,39,.92);
        --muted: rgba(17,24,39,.62);
        --shadow: 0 16px 45px rgba(17,24,39,.10);
        --content-bg: rgba(255,255,255,.98);
        --content-bg2: rgba(17,24,39,.03);
        --content-border: rgba(17,24,39,.12);
        --content-border2: rgba(17,24,39,.08);
        --content-text: rgba(17,24,39,.92);
        --content-muted: rgba(17,24,39,.62);
        --content-shadow: 0 16px 45px rgba(17,24,39,.10);
        --card-bg: #ffffff;
        --input-bg: #f9fafb;
    }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color: var(--text);
    min-height: 100vh;
    background: radial-gradient(900px 520px at 12% 18%, rgba(46,116,255,.16), transparent 60%), radial-gradient(980px 700px at 85% 75%, rgba(47,181,115,.14), transparent 58%), linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2));
    /* ✅ Kritik: fixed footer bar üstüne binmesin */
    padding-bottom: var(--efy-footer-h);
}

/* =========================================================
   APP GRID
   ========================================================= */
.app {
    display: grid;
    grid-template-columns: 300px 1fr;
    /* ✅ Kritik: desktop header + footer bar için yer ayır */
    margin-top: var(--efy-topbar-h);
    min-height: calc(100vh - var(--efy-footer-h) - var(--efy-topbar-h));
}

    /* COLLAPSED GRID */
    .app.side-collapsed {
        grid-template-columns: 96px 1fr;
    }

/* =========================================================
   SIDEBAR
   ========================================================= */
.side {
    position: sticky;
    top: var(--efy-topbar-h);
    /* ✅ Kritik: header + footer bar yüksekliği kadar kısalt */
    height: calc(100vh - var(--efy-footer-h) - var(--efy-topbar-h));
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-right: 1px solid var(--border2);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

:root[data-theme="light"] .side {
    background: rgba(255,255,255,.55);
}

/* =========================================================
   BRAND
   ========================================================= */
.brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 14px;
    border-bottom: 1px solid var(--border2);
    margin-bottom: 12px;
}

.brand-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--a1), var(--a2));
    flex: 0 0 auto;
}

.brand .t {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .brand .t b {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand .t small {
        font-size: 12px;
        color: var(--muted);
    }

/* COLLAPSED BRAND */
.app.side-collapsed .brand .t {
    display: none;
}

/* theme button (mevcut) */
.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--card2);
    color: var(--text);
    cursor: pointer;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

    .theme-btn:hover {
        filter: brightness(1.05);
    }

/* =========================================================
   MENU SCROLL
   ========================================================= */
.menu-scroll {
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 6px;
}

    .menu-scroll::-webkit-scrollbar {
        width: 10px;
    }

    .menu-scroll::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.12);
        border-radius: 999px;
        border: 2px solid rgba(0,0,0,.18);
    }

:root[data-theme="light"] .menu-scroll::-webkit-scrollbar-thumb {
    background: rgba(17,24,39,.18);
    border: 2px solid rgba(255,255,255,.65);
}

/* =========================================================
   APP MENU (NEW MARKUP uyumlu)
   ========================================================= */
.side nav.nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

    /* Leaf link */
    .side nav.nav a.menu-item,
    .side nav.nav a.menu-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid transparent;
        background: var(--card2);
        transition: background .14s ease, border-color .14s ease, transform .08s ease;
    }

        /* Hover */
        .side nav.nav a.menu-item:hover,
        .side nav.nav a.menu-link:hover {
            background: var(--card);
            border-color: var(--border2);
        }

        /* Active */
        .side nav.nav a.menu-item.active,
        .side nav.nav a.menu-link.active {
            background: linear-gradient(135deg, rgba(46,116,255,.14), rgba(47,181,115,.16));
            border-color: rgba(46,116,255,.22);
            box-shadow: var(--shadow);
        }

        /* sub */
        .side nav.nav a.menu-item.sub {
            background: rgba(255,255,255,.035);
        }

:root[data-theme="light"] .side nav.nav a.menu-item.sub {
    background: rgba(17,24,39,.02);
}

/* ICON (shared) */
.side nav.nav .ico {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border2);
    flex: 0 0 auto;
    color: var(--text);
}

:root[data-theme="light"] .side nav.nav .ico {
    background: rgba(17,24,39,.04);
}

.side nav.nav .ico i {
    font-size: 16px;
    line-height: 1;
}

/* TEXT */
.side nav.nav .txt {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* -------------------------
   GROUP (accordion)
   ------------------------- */
.menu-group {
    background: transparent;
    border: 0;
    border-radius: 14px;
    overflow: visible;
}

.side nav.nav .menu-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--card2);
    transition: background .14s ease, border-color .14s ease;
}

    .side nav.nav .menu-group-head:hover {
        background: var(--card);
        border-color: var(--border2);
    }

    .side nav.nav .menu-group-head .menu-link,
    .side nav.nav .menu-group-head .menu-text {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
        background: transparent;
        border: 0;
        padding: 0;
        border-radius: 0;
    }

/* caret button */
.side nav.nav .menu-toggle {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--border2);
    background: rgba(255,255,255,.06);
    color: var(--muted);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

:root[data-theme="light"] .side nav.nav .menu-toggle {
    background: rgba(17,24,39,.04);
}

.side nav.nav .menu-toggle:hover {
    filter: brightness(1.05);
}

/* open rotate */
.side nav.nav .menu-group.open .menu-toggle i {
    transform: rotate(180deg);
}

/* group items container */
.menu-group-items {
    padding: 6px 6px 10px;
}

/* =========================================================
   COLLAPSED MODE (ikon-only, taşma yok)
   ========================================================= */
.app.side-collapsed .side {
    padding: 14px 10px;
}

.app.side-collapsed .brand {
    padding: 10px 8px 14px;
}

/* Yazılar yok */
.app.side-collapsed .side nav.nav .txt {
    display: none !important;
}

/* Her satırı ortala */
.app.side-collapsed .side nav.nav a.menu-item,
.app.side-collapsed .side nav.nav .menu-group-head {
    justify-content: center;
    padding: 10px 8px;
}

/* İkon biraz büyüsün */
.app.side-collapsed .side nav.nav .ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

/* caret kapalı */
.app.side-collapsed .side nav.nav .menu-toggle {
    display: none !important;
}

/* collapsed iken group içeriği asla açılmasın */
.app.side-collapsed .menu-group-items {
    display: none !important;
}

/* collapsed iken ağır gölge olmasın */
.app.side-collapsed .side nav.nav a.menu-item.active,
.app.side-collapsed .side nav.nav a.menu-link.active {
    box-shadow: none;
}

/* =========================================================
   FOOTER (SIDEBAR)
   ========================================================= */
.side-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border2);
    /* ✅ Ek güvenlik: footer bar üstüne binmesin */
    margin-bottom: 6px;
}

/* önceki userbox css'i dursa da problem değil, ama artık kullanılmıyor */
.userbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--card2);
    border: 1px solid var(--border);
}

    .userbox .u {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: hidden;
        min-width: 0;
    }

        .userbox .u b {
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .userbox .u small {
            font-size: 11.5px;
            color: var(--muted);
        }

.logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card2);
    cursor: pointer;
    color: var(--text);
}

    .logout:hover {
        filter: brightness(1.05);
    }

.side-logout-form {
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px;
}

/* =========================================================
   MAIN
   ========================================================= */
.main {
    padding: 18px;
    min-width: 0;
    /* ✅ FooterBar sabit olduğu için içerik footer altında kalmasın */
    padding-bottom: calc(var(--efy-footer-h) + 18px);
}

.content {
    color: var(--content-text);
    background: var(--content-bg);
    border: 1px solid var(--content-border2);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--content-shadow);
    /* ✅ içerik içinde scroll varsa da güvenli olsun */
    padding-bottom: calc(var(--efy-footer-h) + 14px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
    .app,
    .app.side-collapsed {
        grid-template-columns: 1fr;
        min-height: auto; /* mobilde sticky vs değişiyor */
    }

    .side {
        height: auto;
        position: relative;
        border-right: 0;
        border-bottom: 1px solid var(--border2);
        padding-bottom: 12px;
    }

    .menu-scroll {
        max-height: 420px;
        padding-right: 0;
    }
}

/* =========================================================
   FOOTER BAR (BOTTOM FIXED)
   ========================================================= */
.efy-footerbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--efy-footer-h);
    z-index: 9999;
    background: rgba(10, 14, 26, .72);
    border-top: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    padding-bottom: env(safe-area-inset-bottom);
}

.efy-footerbar__inner {
    height: var(--efy-footer-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
}

.efy-footerbar__left,
.efy-footerbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.efy-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    white-space: nowrap;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.efy-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--a1), var(--a2));
    box-shadow: 0 0 0 4px rgba(46,116,255,.10);
    flex: 0 0 auto;
}

.efy-label {
    font-weight: 700;
    color: rgba(255,255,255,.92);
    overflow: hidden;
    text-overflow: ellipsis;
}

.efy-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .efy-item .k {
        color: rgba(255,255,255,.60);
        font-size: 12px;
    }

    .efy-item .v {
        color: rgba(255,255,255,.90);
        font-size: 12.5px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 900px) {
    .efy-item {
        display: none;
    }

    .efy-footerbar__right {
        display: none;
    }
}

@media (max-width: 520px) {
    .efy-footerbar__inner {
        padding: 0 10px;
    }

    .efy-chip {
        max-width: 280px;
    }
}

/* =========================================================
   SELECT / COMBOBOX — dark & light native dropdown fix
   CSS variables work on <select> itself but NOT on <option>
   popup (OS-rendered). Solid colours are required here.
   Applies to ALL pages using this stylesheet.
   ========================================================= */
:root select {
    background-color: #141d35;
    color: rgba(255,255,255,.9);
    color-scheme: dark;
}
:root select option {
    background-color: #141d35;
    color: rgba(255,255,255,.9);
}
:root[data-theme="light"] select {
    background-color: #ffffff;
    color: rgba(17,24,39,.9);
    color-scheme: light;
}
:root[data-theme="light"] select option {
    background-color: #ffffff;
    color: rgba(17,24,39,.9);
}