/* custom.css */

/* --- Tweak Layout Asas --- */
body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    color: #000000;
}

/* --- Style untuk Menu Breadcrumb --- */
#wb_Breadcrumb1 {
    display: block;
    width: 100%;
    background-color: #f8f9fa; /* Warna latar menu (kelabu cair) */
    border-bottom: 2px solid #ddd;
    padding: 10px 0;
    text-align: center; /* Menu duduk tengah */
}

#Breadcrumb1 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

#Breadcrumb1 li {
    display: inline-block;
    margin: 0 5px;
}

#Breadcrumb1 li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333; /* Warna teks biasa */
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Efek bila mouse lalu (Hover) */
#Breadcrumb1 li a:hover {
    background-color: #007bff; /* Warna biru bila hover */
    color: #ffffff;
    text-decoration: none;
}

/* --- Style untuk Menu AKTIF (Highlight page semasa) --- */
/* Ini penting untuk kod PHP 'active' tadi berfungsi */
#Breadcrumb1 li.active a {
    background-color: #0056b3; /* Warna biru gelap untuk page semasa */
    color: #ffffff;
    pointer-events: none; /* Tak boleh klik page yang tengah buka */
}

/* --- Style Responsif untuk Mobile --- */
@media (max-width: 768px) {
    #Breadcrumb1 li {
        display: block; /* Menu jadi menegak di phone */
        margin: 5px 0;
        width: 100%;
    }
    
    #Breadcrumb1 li a {
        border: 1px solid #eee;
    }
}