/* Genel Ayarlar */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    overflow-x: hidden;
}

/* --- ÜST MENÜ (NAVBAR) --- */
.custom-navbar {
    background-color: #1e2229 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 0.75rem 1.5rem;
}

/* Çizgi Animasyonu (Hover Effect) */
.custom-navbar .nav-link {
    position: relative;
    color: rgba(255,255,255,0.7) !important;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem !important;
}

.custom-navbar .nav-link:hover, 
.custom-navbar .nav-link.active {
    color: #fff !important;
}

.custom-navbar .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #0d6efd; /* Bootstrap Primary Rengi */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.custom-navbar .nav-link:hover::after,
.custom-navbar .nav-link.active::after {
    width: 80%;
}

/* Dropdown Yumuşak Açılış */
.fade-down {
    animation: fadeDown 0.2s ease-out;
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ANA DÜZEN (WRAPPER & SIDEBAR) --- */
.wrapper {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 62px);
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #1e2229 !important;
    transition: all 0.3s ease;
}

/* Sidebar Kapalı Modu (İkonlu Küçük Mod) */
#sidebar.collapsed {
    min-width: 70px;
    max-width: 70px;
    text-align: center;
}

#sidebar.collapsed span {
    display: none; /* Metinleri gizle */
}

#sidebar.collapsed .components li a {
    padding: 15px 0;
    font-size: 1.3rem;
}

/* Sidebar Linkleri */
#sidebar .components {
    padding: 20px 0;
}

#sidebar .components li a {
    padding: 12px 20px;
    font-size: 1rem;
    display: block;
    color: #adb5bd;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- SIDEBAR İÇİ AÇILIR MENÜ AYARLARI --- */

/* Ana dropdown başlığı düzeni */
.dropdown-toggle-custom {
    display: flex !important;
    align-items: center;
    position: relative;
}

/* Sağdaki küçük ok ikonu ve dönme animasyonu */
.arrow-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* Menü açıldığında oku tersine çevir */
[aria-expanded="true"] .arrow-icon {
    transform: rotate(180deg);
}

/* Alt Menü Listesi Tasarımı */
.sub-menu-list {
    background-color: #171a1f; /* Ana menüden biraz daha koyu ton */
    padding-left: 15px; /* İçeriden girinti vererek hiyerarşi oluşturuyoruz */
    transition: all 0.3s ease;
}

.sub-menu-list li a {
    padding: 10px 20px !important;
    font-size: 0.9rem !important; /* Alt menü yazıları bir tık daha küçük */
    color: #9aa0a6 !important;
}

.sub-menu-list li a:hover {
    color: #fff !important;
    background: transparent !important; /* Arka planı boyama, sadece yazı parlasın */
    border-left: none !important; /* Sol taraftaki kalın mavi çizgiyi alt menüde kaldırıyoruz */
}

.sub-menu-list li a i {
    font-size: 0.8rem;
    margin-right: 8px;
    color: #0d6efd; /* İkonları hafif mavi yaparak şıklık katıyoruz */
}

/* Küçük font ayarı */
.fs-7 {
    font-size: 0.8rem !important;
}

/* --- SIDEBAR RENK GÜNCELLEMELERİ --- */

/* 1. ANA MENÜ ELEMANLARI (Varsayılan Durum) */
#sidebar .components li a {
    padding: 12px 20px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    color: #a0aec0; /* Daha yumuşak, modern bir gri */
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    border-left: 4px solid transparent; /* Geçiş yumuşak olsun diye başta şeffaf */
}

/* Ana Menü - Üstüne Gelince (Hover) */
#sidebar .components li a:hover {
    color: #ffffff !important;
    background-color: #242933 !important; /* Hafif açılan modern koyu ton */
    border-left-color: #3b82f6; /* Hover durumunda çizgi canlansın */
}

/* Ana Menü - Aktif/Seçili Durum (.active sınıfı olan li içindeki a) */
#sidebar .components li.active > a {
    color: #ffffff !important;
    background-color: #0d6efd !important; /* Canlı Bootstrap Mavisi */
    border-left-color: #ffffff; /* Mavi arka planda beyaz çizgi çok şık durur */
    font-weight: 500;
}


/* 2. AÇILIR ALT MENÜ ELEMANLARI (Varsayılan Durum) */
.sub-menu-list {
    background-color: #15181f; /* Ana menüden bir tık daha koyu arka plan */
    padding-left: 15px;
}

.sub-menu-list li a {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    color: #8a94a6 !important; /* Alt menü yazısı biraz daha sönük başlar */
    border-left: none !important; /* Alt menülerde sol kalın çizgiyi tamamen kaldırıyoruz */
}

/* Alt Menü - Üstüne Gelince (Hover) */
.sub-menu-list li a:hover {
    color: #3b82f6 !important; /* Yazı rengi canlı maviye döner */
    background-color: rgba(59, 130, 246, 0.08) !important; /* Çok hafif transparan mavi arka plan */
}

/* Alt Menü - Aktif/Seçili Durum (O an hangi alt sayfadaysak) */
.sub-menu-list li.active a {
    color: #3b82f6 !important;
    font-weight: 600;
    background-color: rgba(59, 130, 246, 0.15) !important; /* Seçili olduğunu belirten hafif dolgu */
}

/* İçerik Alanı */
#content {
    width: 100%;
    transition: all 0.3s ease;
}

/* Kart Efektleri */
.status-card {
    transition: transform 0.2s ease;
}
.status-card:hover {
    transform: translateY(-5px);
}