/* =================================================================== */
/* TEMA 3: SOFT SUNSET GRADIENT (Fix Warna Menu & Submenu)             */
/* =================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- 1. LATAR BELAKANG GLOBAL --- */
body { 
    background-color: #fafaf9; 
    color: #334155; 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
}

/* --- 2. SIDEBAR GRADASI ORANGE MUDA --- */
.sidebar-permanent { 
    position: fixed; top: 0; left: 0; width: 280px; height: 100vh; 
    background: linear-gradient(180deg, #fffcfb 0%, #ffebd6 100%); 
    z-index: 1000; overflow-y: auto; 
    border-right: 1px solid #fed7aa; 
    box-shadow: 4px 0 24px rgba(249, 115, 22, 0.04); 
}
.sidebar-permanent::-webkit-scrollbar { width: 5px; }
.sidebar-permanent::-webkit-scrollbar-track { background: transparent; }
.sidebar-permanent::-webkit-scrollbar-thumb { background: #fdba74; border-radius: 3px; }

/* --- 3. HEADER & LOGO --- */
.sidebar-header { 
    padding: 24px 20px; text-align: center; 
    border-bottom: 1px solid rgba(254, 215, 170, 0.4); 
    margin-bottom: 10px; cursor: pointer; display: block; text-decoration: none; 
    position: sticky; top: 0; z-index: 10; 
    background: rgba(255, 252, 251, 0.85); 
    backdrop-filter: blur(8px);
}
.sidebar-header img { height: 45px; width: auto; margin-bottom: 10px; }
.sidebar-header h4 { font-size: 0.95rem; margin: 0; color: #1e293b; font-weight: 800; }
.sidebar-header h4 span { font-weight: normal; font-size: 0.8rem; color: #64748b; }
.sidebar-header small { font-size: 0.75rem; color: #ea580c; font-weight: 600; }

/* =================================================================== */
/* --- 4. MENU NAVIGASI (PERBAIKAN WARNA & KAPSUL) ---                 */
/* =================================================================== */
.nav-menu { list-style: none; padding: 0 16px; margin: 0; padding-bottom: 30px; }
.nav-item { margin-bottom: 6px; }

/* Tampilan Normal Menu */
.nav-link-custom { 
    display: flex; align-items: center; padding: 12px 16px; 
    color: #475569; /* Teks abu-abu gelap, mudah dibaca */
    text-decoration: none; transition: all 0.2s ease; gap: 12px; 
    font-size: 0.9rem; font-weight: 500; 
    border-radius: 10px; 
    background: transparent; border-left: none;
}
.nav-link-custom .menu-icon { opacity: 0.7; font-size: 1.1rem; transition: all 0.2s; }

/* Saat Disorot Mouse (Hover) */
.nav-link-custom:hover { 
    color: #c2410c; /* Berubah jadi Orange Gelap */
    background: rgba(255, 255, 255, 0.6); /* Kapsul putih samar */
}
.nav-link-custom:hover .menu-icon { color: #c2410c; opacity: 1; }

/* Saat Sedang Aktif (Diklik) */
.nav-link-custom.active { 
    color: #c2410c; /* Teks Orange Gelap */
    background: #ffffff; /* Latar Putih Solid 100% (Sangat Jelas) */
    font-weight: 700; 
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.1); /* Efek timbul / melayang */
}
.nav-link-custom.active .menu-icon { color: #c2410c; opacity: 1; }

/* =================================================================== */
/* --- 5. DROPDOWN SUBMENU (PERBAIKAN WARNA & KAPSUL) ---              */
/* =================================================================== */
.dropdown-toggle-custom { cursor: pointer; }
.dropdown-toggle-custom .chevron { margin-left: auto; transition: transform 0.2s; color: #9ca3af; font-size: 0.7rem; }
.dropdown-toggle-custom:hover .chevron, .dropdown-toggle-custom.active .chevron { color: #c2410c; }
.dropdown-toggle-custom .chevron.rotated { transform: rotate(90deg); }

.dropdown-menu-custom { list-style: none; padding-left: 8px; margin: 0; display: none; margin-top: 4px; }
.dropdown-menu-custom.show { display: block; }

/* Header Grup Submenu (Misal: 📌 DATA PUBLIK) */
.dropdown-header-custom { 
    padding: 16px 16px 8px 24px; font-size: 0.65rem; text-transform: uppercase; 
    color: #ea580c; /* Teks Orange Terang */
    font-weight: 800; letter-spacing: 1px; background: transparent !important; 
}

/* Tampilan Normal Submenu */
.dropdown-menu-custom li:not(.dropdown-header-custom) a { 
    display: block; padding: 10px 16px 10px 32px; 
    color: #52525b; /* Teks abu-abu gelap */
    text-decoration: none; font-size: 0.85rem; transition: all 0.2s; 
    border-radius: 8px; margin-bottom: 4px; /* Diberi margin agar kapsulnya tidak nempel */
}

/* Submenu Saat Disorot Mouse (Hover) */
.dropdown-menu-custom li:not(.dropdown-header-custom) a:hover { 
    color: #c2410c; /* Teks Orange Gelap */
    background: rgba(255, 255, 255, 0.6) !important; /* Kapsul putih samar */
}

/* Submenu Saat Sedang Aktif (Diklik) */
.dropdown-menu-custom li:not(.dropdown-header-custom) a.active { 
    color: #c2410c; /* Teks Orange Gelap */
    background: #ffffff !important; /* Latar Putih Solid 100% (Sangat Jelas) */
    font-weight: 700; 
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.06); /* Efek timbul tipis */
}

/* Titik manis untuk submenu aktif */
.dropdown-menu-custom li:not(.dropdown-header-custom) a.active::before {
    content: "•"; color: #c2410c; font-weight: bold; margin-right: 8px; font-size: 1.1em;
}

.menu-divider { height: 1px; background: rgba(254, 215, 170, 0.5); margin: 8px 16px; }

/* --- 6. AREA KONTEN (Dashboard Kanan) --- */
.main-content { margin-left: 280px; min-height: 100vh; width: calc(100% - 280px); }
.top-bar { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); padding: 10px 24px; border-bottom: 1px solid #ffedd5; display: flex; justify-content: flex-end; align-items: center; position: sticky; top: 0; z-index: 99; }
.content-container { padding: 24px; }
h1.mb-0.me-3, .h1 { color: #1e293b; font-weight: 800; }
p.lead.text-center { color: #64748b; }

/* --- 7. KARTU WARNA-WARNI (Tema Orange) --- */
.card { border-radius: 16px; border: 1px solid #ffedd5; box-shadow: 0 4px 20px rgba(0,0,0,0.02); transition: all 0.3s ease; background: #ffffff; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(249, 115, 22, 0.05); }
.card-header { background-color: #ffffff; border-bottom: 1px solid #ffedd5; padding: 1.25rem 1.5rem; font-weight: 700; border-radius: 16px 16px 0 0; color: #1e293b; }

.card.bg-primary, .card.bg-danger { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; border: none; } 
.card[style*="background:#0ea5e9"], .card.bg-info { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important; border: none; }
.card.bg-success { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; border: none; }
.card.bg-warning { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; border: none; }

.row .col-md-3 .card .card-title { font-size: 0.95rem; opacity: 0.9; margin-bottom: 10px; font-weight: 600; }
.card.text-white h1, .card.text-white h2, .card.text-white h3, .card.text-white h5, .card.text-white .card-title { color: #ffffff !important; }
.card.text-dark h1, .card.text-dark h2, .card.text-dark h3, .card.text-dark h5, .card.text-dark .card-title { color: #ffffff !important; } 

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) { .sidebar-permanent { transform: translateX(-100%); width: 260px; } .sidebar-permanent.mobile-open { transform: translateX(0); } .main-content { margin-left: 0; width: 100%; } .mobile-menu-toggle { display: block; background: none; border: none; font-size: 24px; cursor: pointer; position: fixed; top: 12px; left: 15px; z-index: 1001; } .top-bar { padding-left: 55px; } .multi-column-list { column-count: 1; } }
@media (min-width: 769px) { .mobile-menu-toggle { display: none; } .mobile-overlay { display: none !important; } }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 999; display: none; }
.mobile-overlay.show { display: block; }
.multi-column-list { column-count: 2; column-gap: 20px; }
.multi-column-list .list-group-item { break-inside: avoid; }