/* ========================================== */
/* TEMA 1: MUTED TEAL                         */
/* ========================================== */
:root {
    --bs-primary: #319795; /* Warna utama Teal */
    --bs-primary-rgb: 49, 151, 149; 
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #285e61 !important; /* Teal yang lebih gelap untuk hover */
    border-color: #285e61 !important;
}

.bg-primary.bg-opacity-10 {
    background-color: rgba(49, 151, 149, 0.1) !important;
}

/* ========================================== */
/* PENYESUAIAN WARNA AKTIF SIDEBAR            */
/* ========================================== */

/* Mengubah warna latar menu yang aktif dan saat disorot mouse */
.sidebar .nav-link:hover, 
.sidebar .active { 
    background-color: var(--bs-primary) !important; 
    color: #ffffff !important; 
}

/* Mengubah warna ikon agar selaras */
.sidebar .nav-link i {
    color: rgba(255, 255, 255, 0.7);
}

.sidebar .nav-link:hover i, 
.sidebar .active i {
    color: #ffffff !important;
}

/* style.css */
body {
    min-height: 100vh;
    overflow-x: hidden;
}

.sidebar {
    min-height: 100vh;
    background-color: #212529; /* Warna gelap ala Admin */
    color: white;
    transition: all 0.3s;
}

.sidebar a {
    color: #adb5bd;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

.sidebar a:hover, .sidebar a.active {
    background-color: #0d6efd; /* Warna biru Bootstrap */
    color: white;
}

.content-area {
    width: 100%;
    padding: 20px;
    background-color: #f8f9fa;
}

.d-flex {
    display: flex;
}