/* style.css */

/* Umum untuk Font dan Layout Body */
body {
    /* Gradien latar belakang yang lembut dan modern */
    background: linear-gradient(135deg, rgb(255, 255, 255), rgb(8, 81, 165));
    /* Menggunakan font Poppins */
    font-family: 'Poppins', sans-serif;
    /* Memastikan body mengisi seluruh tinggi viewport */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    /* Layout Flexbox untuk sticky footer dan main content yang mengisi ruang */
    display: flex;
    flex-direction: column;
}

/* Styling Navbar */
.navbar {
    background: linear-gradient(90deg, #007bff, #0056b3); /* Gradien biru yang menarik */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Bayangan yang lebih menonjol */
    padding: 0.8rem 1rem; /* Padding sedikit lebih besar */
    animation: fadeInDown 0.6s ease-out forwards; /* Animasi masuk */
}

.navbar-brand {
    color: #ffffff !important; /* Pastikan warna brand putih */
    font-weight: 700; /* Lebih tebal */
    font-size: 1.6rem; /* Ukuran font lebih besar */
    letter-spacing: 0.8px; /* Sedikit spasi antar huruf */
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antara ikon dan teks */
    transition: transform 0.3s ease; /* Animasi untuk transform */
}

.navbar-brand:hover {
    transform: translateY(-3px); /* Sedikit naik saat hover */
    color: #e6e6e6 !important; /* Sedikit lebih terang saat hover */
}

.navbar-brand .bi { /* Styling untuk ikon di brand */
    font-size: 2rem; /* Ukuran ikon lebih besar */
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.navbar-brand:hover .bi {
    transform: rotate(5deg); /* Sedikit rotasi ikon saat hover */
}

.navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.85) !important; /* Warna link sedikit transparan */
    font-weight: 500;
    padding: 0.7rem 1.2rem; /* Padding yang nyaman */
    position: relative; /* Diperlukan untuk efek underline */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transisi warna dan background */
    border-radius: 5px; /* Sedikit border-radius pada link */
}

.navbar-nav .nav-item .nav-link:hover {
    color: #ffffff !important; /* Warna putih penuh saat hover */
    background-color: rgba(255, 255, 255, 0.1); /* Latar belakang transparan saat hover */
}

/* Animasi Underline pada Hover */
.navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px; /* Jarak dari teks */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff; /* Warna underline */
    border-radius: 2px;
    transition: width 0.3s ease-out; /* Animasi lebar underline */
}

.navbar-nav .nav-item .nav-link:hover::after,
.navbar-nav .nav-item .nav-link.active::after { /* Underline aktif dan saat hover */
    width: 80%; /* Lebar underline saat hover/aktif */
}

.navbar-nav .nav-item .nav-link.active {
    color: #ffffff !important; /* Warna link aktif */
    background-color: rgba(255, 255, 255, 0.2); /* Latar belakang sedikit lebih gelap untuk link aktif */
    font-weight: 600; /* Link aktif lebih tebal */
}

/* Toggler untuk Mobile */
.navbar-toggler {
    border: none; /* Menghilangkan border toggler */
    padding: 0.5rem 0.75rem;
    transition: transform 0.3s ease;
}

.navbar-toggler:focus {
    box-shadow: none; /* Menghilangkan focus outline */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; /* Warna ikon toggler putih */
}

/* Animasi masuk Navbar */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Container utama untuk memusatkan card dashboard/tabel */
.main-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Menggunakan flex-start agar card tidak terlalu ke tengah jika tabel sangat panjang */
    padding: 20px; /* Padding untuk responsivitas */
    box-sizing: border-box;
    flex-grow: 1; /* Penting! Memastikan wrapper mengisi sisa ruang vertikal */
}

.container {
    width: 100%;
    /* Max-width akan disesuaikan di masing-masing file PHP jika perlu */
}

.card {
    border-radius: 12px; /* Sudut membulat yang elegan */
    overflow: hidden;
    /* Bayangan yang lebih soft dan modern */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Transisi untuk efek hover yang halus */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: none; /* Menghilangkan border default Bootstrap */
    margin-top: 20px; /* Tambahkan sedikit margin top agar tidak terlalu menempel navbar */
}

.card:hover {
    transform: translateY(-8px); /* Sedikit naik saat dihover */
    /* Bayangan lebih menonjol saat hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.card-header {
    /* Gradien warna biru yang menarik untuk header */
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    padding: 1.8rem 1.5rem; /* Padding yang lebih besar */
    border-bottom: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara ikon dan teks */
    text-align: center;
    justify-content: center; /* Pusatkan konten header */
}

.card-header i {
    font-size: 2.2rem; /* Ukuran ikon yang lebih besar */
    line-height: 1; /* Memastikan ikon sejajar dengan teks */
}

.card-header h4 {
    margin-bottom: 0;
    font-weight: 600; /* Teks header lebih tebal */
    letter-spacing: 0.8px; /* Spasi antar huruf untuk keterbacaan */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Sedikit efek bayangan pada teks */
}

.card-body {
    padding: 30px; /* Padding yang lebih merata */
}

.table {
    margin-bottom: 0; /* Menghilangkan margin bawah default */
    border-collapse: collapse; /* Menggunakan collapse untuk border yang rapi */
    width: 100%;
}

.table th, .table td {
    padding: 1.1rem 1.5rem; /* Padding yang nyaman untuk sel tabel */
    vertical-align: middle;
    border: none; /* Hapus border Bootstrap default */
    border-bottom: 1px solid #e9ecef; /* Border bawah yang halus */
}

.table thead th {
    background-color: #f8f9fa; /* Latar belakang abu-abu muda untuk header kolom */
    font-weight: 600; /* Lebih tebal untuk header tabel */
    color: #333;
    border-top: none; /* Menghapus border atas pada thead */
    border-bottom: 2px solid #dee2e6; /* Border bawah yang lebih menonjol untuk thead */
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
    border-bottom: none; /* Menghilangkan border bawah pada baris terakhir */
}

.table tbody tr:hover {
    background-color: #f0f7ff; /* Warna hover yang lebih lembut */
    transition: background-color 0.2s ease-in-out;
}

/* Animasi masuk untuk card: Fade in dan sedikit geser ke atas */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Terapkan animasi hanya ke card dalam main-content-wrapper */
.main-content-wrapper .card {
    animation: fadeInSlideUp 0.7s ease-out forwards;
}