body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 

    background: url("Image.jpg") no-repeat center center fixed;
    background-size: cover;

    /* TETAPAN UNTUK MEMUSATKAN KANDUNGAN DI TENGAH SKRIN */
    display: flex; /* Guna Flexbox */
    justify-content: center; /* Pusatkan secara mendatar (horizontal) */
    align-items: center; /* Pusatkan secara menegak (vertical) */
    height: 100vh; /* Ambil ketinggian penuh viewport */
    position: relative; /* Penting untuk overlay */
}


.login-box {
    width: 300px; 
    padding: 20px; 
    /* Gunakan warna putih lutsinar supaya nampak sebahagian background */
    background: rgba(255, 255, 255, 0.9); 
    text-align: center; 
    border-radius: 8px;
    /* PENTING: Set kotak login di atas overlay (-1) */
    z-index: 10; 
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Bayangan yang lebih kuat */

      /* PENTING UNTUK CENTERKAN LOGIN BOX */
    /*display: flex;
    justify-content: center;
    align-items: center; */
    height: auto;
}

.login-box input {
    display:block; 
    width:90%; 
    margin:10px auto; 
    padding:8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Pastikan width 90% termasuk padding */
}

.sidebar {
    width:200px; 
    background:#333; 
    color:#fff; 
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    padding-top:20px;
    z-index: 100;
}

.sidebar a {
    display:block; 
    color:white; 
    padding:10px; 
    text-decoration:none;
}

.sidebar a:hover {
    background:#575757;
}

.content {
    margin-left:220px; 
    padding:20px;
}

.card {
    background:white; 
    padding:20px; 
    margin:10px 0; 
    border-radius:8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.error-message {
    background-color: #f8d7da; /* Warna latar belakang merah jambu lembut */
    color: #721c24; /* Warna teks merah gelap */
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 15px; /* Jarak antara mesej dan tajuk */
    border-radius: 4px;
    font-weight: bold;
    text-align: center; /* Teks rata ke kiri untuk nampak kemas */
}

admin-btn {
    background-color: #4285F4;
    padding: 10px 20px;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.coadmin-btn {
    background-color: #00bcd4;
    padding: 10px 20px;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.back-to-login {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.back-to-login:hover {
    color: #0056b3;
    text-decoration: underline;
}