/* =========================================
   1. GLOBAL & TYPOGRAPHY
   ========================================= */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9; /* Warna background abu-abu muda yang lembut */
    overflow-x: hidden; /* Mencegah scroll horizontal */
}

a {
    text-decoration: none;
}

/* =========================================
   2. HALAMAN LOGIN (index.php)
   ========================================= */
/* Class khusus untuk body di halaman login */
body.login-page {
    background: linear-gradient(135deg, #0062E6 0%, #33AEFF 100%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-login {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Efek bayangan melayang */
    overflow: hidden;
}

.card-login .card-header {
    background: #fff;
    padding: 30px 20px 10px;
    border-bottom: none;
}

.logo-text {
    color: #0d6efd; /* Warna biru Bootstrap utama */
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =========================================
   3. SIDEBAR & DASHBOARD (dashboard.php)
   ========================================= */
.sidebar {
    min-height: 100vh;
    background: #ffffff;
    border-right: 1px solid #e9ecef;
    box-shadow: 2px 0 5px rgba(0,0,0,0.02);
    z-index: 100;
}

/* Menu Navigasi */
.nav-link {
    color: #495057;
    font-weight: 500;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
    padding-left: 20px; /* Efek geser sedikit saat di-hover */
}

.nav-link.active {
    background-color: #e7f1ff;
    color: #0d6efd;
    font-weight: 700;
}

.nav-link i {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* =========================================
   4. INBOX / DAFTAR EMAIL
   ========================================= */
.email-list-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.email-row {
    border-left: 4px solid transparent; /* Garis indikator di kiri */
    transition: background-color 0.2s ease, transform 0.1s;
    cursor: pointer;
    padding: 15px;
}

.email-row:hover {
    background-color: #f8f9fa; /* Warna saat di-hover */
    transform: translateY(-1px); /* Efek naik sedikit */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 1;
    position: relative;
}

/* Style untuk pesan BELUM DIBACA (Unseen) */
.unseen {
    background-color: #fff;
    font-weight: 700; /* Teks tebal */
    color: #212529;
    border-left-color: #0d6efd; /* Garis biru di kiri */
}

.unseen h6 {
    color: #0d6efd; /* Nama pengirim jadi biru */
    font-weight: 800;
}

/* Style untuk pesan SUDAH DIBACA (Seen) */
.seen {
    background-color: #fafafa; /* Sedikit abu-abu */
    color: #6c757d; /* Teks agak pudar */
    font-weight: 400;
}

/* =========================================
   5. EMAIL READER (baca.php)
   ========================================= */
.email-content {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 20px 0;
}

/* Membatasi gambar dalam email agar tidak merusak layout */
.email-content img {
    max-width: 100%;
    height: auto;
}

/* =========================================
   6. RESPONSIVE (HP)
   ========================================= */
@media (max-width: 768px) {
    .sidebar {
        min-height: auto;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
    }
    
    .card-login {
        width: 90%;
    }
}