/* ═══════════════════════════════════════════════════════════════════
   MILAGRON UI - UYGULAMA İSKELETİ
   ───────────────────────────────────────────────────────────────────
   Kenar çubuğu, üst bar, içerik alanı ve kullanıcı menüsü.

   Bu dosya style.css'ten SONRA yüklenir; oradaki eski görsel kuralları
   bilerek ezer. style.css'in mobil/responsive katmanı korunur, yalnız
   ölçü değişen yerler (kenar çubuğu genişliği) burada yeniden verilir.

   DAVRANIŞ SÖZLEŞMESİ: toggleSidebar() .hide-desktop sınıfını ekleyip
   çıkarıyor, app.js buna bağlı. Sınıf adları ve mantık aynı bırakıldı.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Gövde ──────────────────────────────────────────────────────────
   style.css gövdeye sabit #f9f9f9 veriyor ve base.css'ten sonra
   yüklendiği için onu eziyordu. Burada tokena geri bağlanır; aksi
   halde karanlık temada sayfa zemini beyaz kalır. */
body {
    background-color: var(--mg-bg);
    color: var(--mg-text);
}

/* ═══════════════════════════════════════════════════════════════════
   KENAR ÇUBUĞU
   ═══════════════════════════════════════════════════════════════════ */
.sidebar {
    width: var(--mg-sidebar-w);
    background-color: var(--mg-surface);
    border-right: 1px solid var(--mg-border);
    color: var(--mg-text-muted);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    text-align: left;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .24s var(--mg-ease);
    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.logoContainer {
    height: var(--mg-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 1.8rem;
    /* Logo solda, kapatma düğmesi (yalnız dar ekranda görünür) sağda. */
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mg-surface);
    border-bottom: 1px solid var(--mg-border-subtle);
}

#sidebarLogo img {
    position: static;
    height: 34px;
    width: auto;
    object-fit: contain;
}

/* Koyu temada beyaz zemin için hazırlanmış logo okunmaz hale gelmesin */
:root[data-theme="dark"] #sidebarLogo img,
:root[data-theme="dark"] #mobileLogo img {
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* ── Menü ───────────────────────────────────────────────────────── */
.menu-items {
    padding: 1.2rem 1rem 3rem !important;
    margin: 0;
    text-align: left;
}

/* :not(.submenu) ŞART. Bu kural .submenu'yu de yakalıyordu ve display:flex
   ile aşağıdaki .submenu{display:none} kuralını eziyordu (seçici ağırlığı
   daha yüksek: 0,1,1 > 0,1,0). Sonuç: "Ürün İşlemleri" alt menüsü her
   sayfada açık geliyordu. */
.menu-items ul:not(.submenu) {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Bölüm başlıkları (RAPOR YÖNETİMİ, MENÜ, KARGO, AYARLAR) */
.menu-items h6 {
    margin: 2.2rem 0 .6rem !important;
    padding: 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mg-text-subtle);
}

.menu-items ul li,
.submenu li {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-radius: var(--mg-radius-md);
    padding: 0;
    margin-bottom: 0;
    cursor: pointer;
    background: transparent;
    transition: background var(--mg-transition);
}

.menu-items ul li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
    border-radius: var(--mg-radius-md);
    color: var(--mg-text-secondary);
    font-size: var(--mg-text-base);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--mg-transition), color var(--mg-transition);
}

.menu-items ul li a i {
    margin-right: 0;
    width: 1.8rem;
    text-align: center;
    font-size: 1.4rem;
    color: var(--mg-text-subtle);
    transition: color var(--mg-transition);
    flex: 0 0 auto;
}

.menu-items ul li a span {
    flex-grow: 1;
    line-height: 1.4;
}

.menu-items ul li:hover,
.submenu li:hover {
    background: transparent;
}

.menu-items ul li a:hover {
    background: var(--mg-surface-3);
    color: var(--mg-text);
}

.menu-items ul li a:hover i {
    color: var(--mg-text-secondary);
}

/* Aktif menü öğesi: sol kenarda ince vurgu çizgisi + dolu zemin */
.menu-items-active,
.menu-items ul li.menu-items-active,
.menu-items ul li a.menu-items-active {
    background: var(--mg-accent-50);
}

.menu-items ul li.menu-items-active>a,
.menu-items ul li a.menu-items-active {
    position: relative;
    background: var(--mg-accent-50);
    color: var(--mg-accent-700);
    font-weight: 600;
}

.menu-items ul li.menu-items-active>a i,
.menu-items ul li a.menu-items-active i {
    color: var(--mg-accent);
}

.menu-items ul li.menu-items-active>a::before,
.menu-items ul li a.menu-items-active::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--mg-accent);
}

/* ── Açılır alt menü ────────────────────────────────────────────── */
.dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: transparent !important;
}

.dropdown-menu .dropdown-item {
    position: relative;
}

.dropdown-toggle {
    position: relative;
}

.dropdown-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--mg-text-subtle);
    margin-left: auto;
    transition: transform var(--mg-transition);
}

.dropdown-item.open>.dropdown-toggle::after {
    transform: rotate(180deg);
}

.submenu {
    display: none;
    margin: 2px 0 2px 2.4rem;
    padding: 0 0 0 1.2rem;
    border-left: 1px solid var(--mg-border);
    gap: 0;
}

.submenu li {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--mg-text-sm);
    font-weight: 500;
}

.dropdown-menu .submenu li a {
    display: block;
    padding: .6rem .8rem;
    border-radius: var(--mg-radius-sm);
    color: var(--mg-text-muted);
    font-size: var(--mg-text-sm);
    font-weight: 500;
    text-decoration: none;
}

.dropdown-menu .submenu li a:hover {
    background: var(--mg-surface-3);
    color: var(--mg-text);
}

.close-sidebar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: var(--mg-radius-md);
    color: var(--mg-text-muted);
    cursor: pointer;
    transition: background var(--mg-transition);
}

.close-sidebar span:hover {
    background: var(--mg-surface-3);
    color: var(--mg-text);
}

/* ═══════════════════════════════════════════════════════════════════
   ÜST BAR
   ═══════════════════════════════════════════════════════════════════ */
.wrapper {
    padding-left: var(--mg-sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--mg-bg);
}

.header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--mg-topbar-h);
    box-sizing: border-box;
    padding: 0 2.4rem;
    background-color: color-mix(in srgb, var(--mg-surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--mg-border);
    box-shadow: none;
}

/* color-mix desteklemeyen tarayıcıda düz yüzey rengine düşer */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .header {
        background-color: var(--mg-surface);
    }
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 1.2rem;
}

.menu-btn {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: .6rem !important;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--mg-radius-md) !important;
    color: var(--mg-text-secondary) !important;
    cursor: pointer !important;
    font-size: 1.8rem !important;
    transition: background var(--mg-transition) !important;
}

.menu-btn:hover {
    background-color: var(--mg-surface-3) !important;
    color: var(--mg-text) !important;
}

/* ── Kullanıcı menüsü ───────────────────────────────────────────── */
.user-profile {
    position: relative;
    display: inline-block;
    margin-left: auto;
}

.user-photo {
    width: 36px;
    height: 36px;
    border-radius: var(--mg-radius-md);
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--mg-border);
    transition: box-shadow var(--mg-transition);
}

.user-photo:hover {
    box-shadow: var(--mg-ring);
}

.userDropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 248px;
    background-color: var(--mg-surface);
    border: 1px solid var(--mg-border);
    box-shadow: var(--mg-shadow-lg);
    border-radius: var(--mg-radius-xl);
    z-index: 60;
    overflow: hidden;
    text-align: left;
}

.userDropdownHeader {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    font-weight: 600;
    font-size: var(--mg-text-base);
    color: var(--mg-text);
}

.userDropdown hr {
    margin: 0;
    border-top: 1px solid var(--mg-border-subtle);
}

.userDropdown ul {
    list-style: none;
    padding: .6rem;
    margin: 0;
}

.userDropdown ul li {
    padding: 0;
    text-align: left;
}

.userDropdown a {
    display: block;
    padding: .9rem 1rem;
    border-radius: var(--mg-radius-md);
    color: var(--mg-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--mg-text-base);
    transition: background var(--mg-transition), color var(--mg-transition);
}

.userDropdown a:hover {
    background: var(--mg-surface-3);
    color: var(--mg-text);
}

/* ── Tema anahtarı (açık / koyu) ────────────────────────────────── */
.mg-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-md);
    background: var(--mg-surface);
    color: var(--mg-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--mg-transition), color var(--mg-transition), border-color var(--mg-transition);
}

.mg-theme-toggle:hover {
    background: var(--mg-surface-3);
    color: var(--mg-text);
    border-color: var(--mg-border-strong);
}

.mg-theme-toggle .mg-icon-dark {
    display: none;
}

:root[data-theme="dark"] .mg-theme-toggle .mg-icon-dark {
    display: inline;
}

:root[data-theme="dark"] .mg-theme-toggle .mg-icon-light {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   İÇERİK ALANI
   ═══════════════════════════════════════════════════════════════════ */
.content {
    flex: 1;
    padding: 2.8rem 2.4rem 4rem;
    background-color: transparent;
    border-radius: 0;
    text-align: left;
}

.content article {
    margin-left: 0;
    margin-right: 0;
}

/* Sayfa başlığı bloğu */
.pageTitle {
    font-size: var(--mg-text-2xl);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--mg-text);
    margin-bottom: .2rem;
}

.pageDescription {
    font-size: var(--mg-text-base);
    color: var(--mg-text-muted);
    margin-top: 0;
    margin-bottom: 2rem;
}

/* ── Eski popup sistemi ─────────────────────────────────────────── */
#popupContent,
#popupContent2 {
    background: var(--mg-surface);
    color: var(--mg-text);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-2xl);
    box-shadow: var(--mg-shadow-xl);
    padding: 2.4rem;
}

#popupOverlay {
    background: rgba(16, 24, 40, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.popUpHeader {
    position: relative;
    font-weight: 600;
    font-size: var(--mg-text-lg);
    color: var(--mg-text);
    margin-bottom: 1.2rem;
}

.closePopUp {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--mg-radius-md);
    font-size: 1.6rem;
    color: var(--mg-text-muted);
    cursor: pointer;
    transition: background var(--mg-transition);
}

.closePopUp:hover {
    background: var(--mg-surface-3);
    color: var(--mg-text);
}

/* ═══════════════════════════════════════════════════════════════════
   DUYARLI DÜZEN
   Ölçüler style.css'teki kırılma noktalarıyla aynı; yalnız kenar
   çubuğu genişliği token üzerinden verildiği için burada tekrarlanır.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .header {
        position: fixed;
        width: 100%;
        padding: 0 1.4rem;
    }

    .wrapper {
        padding-left: 0;
    }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--mg-shadow-xl);
    }

    .sidebar.hide-desktop {
        transform: translateX(0);
    }

    .content {
        margin-left: 0;
        margin-top: var(--mg-topbar-h);
        padding: 2rem 1.4rem 3rem;
    }

    /* Kapatma düğmesi logo şeridinin İÇİNDE, sağ ucunda durur (header.php).
       Eskiden logo şeridinin altında kendi satırı vardı; o satır yaklaşık
       56 piksel yer kaplıyor ve menüyü aşağı itiyordu. */
    .close-sidebar {
        display: flex;
        align-items: center;
        margin: 0;
        font-size: 1.8rem;
        box-sizing: border-box;
    }

    /* Kenar çubuğu logosu dar ekranda da görünür.
       style.css (eski tema) 1024px altında #sidebarLogo'yu gizliyor,
       çünkü orada logo yalnız üst barda (#mobileLogo) duruyordu. Yeni
       temada çekmecenin kendi başlığı var; !important o kuralı ezmek
       için gerekli. */
    #sidebarLogo {
        display: flex !important;
        align-items: center;
    }

    /* Üst bardaki logo ortada dursun.
       .header-content bir "space-between" satırı: solda menü düğmesi,
       sağda kullanıcı menüsü. Logo akışta kaldığı sürece menü düğmesinin
       hemen sağına yapışıyor, yani sola yaslı görünüyordu. Mutlak
       konumlandırma iki yandaki öğelerin genişliğinden bağımsız olarak
       barın tam ortasını verir; flex ile ortalamak, iki yanın genişlikleri
       eşit olmadığı için kaymaya bırakırdı.
       max-width: logonun iki yandaki düğmelerin üzerine binmesini engeller. */
    .header-content {
        position: relative;
    }

    #mobileLogo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        max-width: calc(100% - 12rem);
    }

    #mobileLogo img {
        max-width: 100%;
    }
}

@media (min-width: 1025px) and (max-width: 1400px) {
    .sidebar {
        width: var(--mg-sidebar-w-compact);
    }

    .wrapper {
        padding-left: var(--mg-sidebar-w-compact);
    }

    .menu-items {
        margin-left: 0;
        margin-right: 0;
    }

    #sidebarLogo img {
        height: 30px !important;
    }
}

@media (min-width: 1025px) {
    .sidebar.hide-desktop {
        transform: translateX(-100%);
    }

    .wrapper.hide-desktop {
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .content {
        padding: 1.6rem 1rem 3rem;
    }

    .pageTitle {
        font-size: var(--mg-text-xl);
    }
}