/* Custom Styles for Doktor Program Exam Management App */

/* General Body Styling */
body {
    font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins yang sudah Anda link */
    padding-top: 70px; /* Memberikan padding di atas untuk navbar fixed-top */
    background-color: #f8f9fa; /* Warna latar belakang umum */
    color: #333; /* Warna teks default */
}

/* Navbar Customization */
.navbar-brand {
    font-weight: 600; /* Tebal untuk brand */
    color: #fff !important; /* Memastikan warna putih */
}

/* Sidebar Offcanvas Customization */
.sidebar {
    background-color: #343a40; /* Warna latar belakang sidebar */
    color: #f8f9fa;
    width: 280px; /* Default width for sidebar */
    transition: transform 0.3s ease-in-out; /* Smooth transition for sidebar */
}

.sidebar .offcanvas-header {
    background-color: #212529; /* Darker header for sidebar */
    color: #f8f9fa;
}

.sidebar .nav-link {
    color: #ced4da; /* Warna link di sidebar */
    padding: 10px 15px;
    border-radius: 8px; /* Rounded corners for nav links */
    margin-bottom: 5px;
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: #007bff; /* Warna hover/active */
    color: #fff;
}

.sidebar .nav-link i {
    font-size: 1.1em; /* Ukuran ikon */
}

/* Main Content Area */
main {
    padding: 20px;
    margin-top: 20px; /* Memberikan ruang dari navbar */
    margin-left: 0; /* Default: no margin-left */
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for main content */
}

/* Card Customization */
.card {
    border: none;
    border-radius: 15px; /* Lebih rounded */
    overflow: hidden; /* Pastikan konten tidak keluar dari radius */
}

.card-title {
    font-weight: 600;
    color: #0056b3; /* Warna judul kartu */
}

/* Table Customization */
.table-responsive {
    border-radius: 10px; /* Rounded corners for table container */
    overflow: hidden; /* Ensure table inside respects radius */
}

.table thead tr.table-dark {
    background-color: #343a40 !important; /* Warna header tabel */
    color: #fff !important;
}

.table-hover tbody tr:hover {
    background-color: #e2e6ea; /* Warna hover baris tabel */
}

/* Chart Container */
#prosentaseChart {
    max-height: 300px; /* Membatasi tinggi grafik */
    width: 100%; /* Memastikan grafik responsif */
}

/* Responsive Adjustments using Media Queries */

/* For screens smaller than 992px (typical for tablets and mobiles) */
@media (max-width: 991.98px) {
    .sidebar {
        /* Untuk offcanvas, Bootstrap sudah mengatur transform */
        /* Pastikan sidebar ini adalah offcanvas, bukan sidebar tetap */
    }

    main {
        margin-left: 0 !important; /* Pastikan tidak ada margin kiri dari sidebar di mobile/tablet */
    }

    .navbar-brand {
        font-size: 1.1em; /* Ukuran font brand di mobile */
    }

    .card .card-title {
        font-size: 1.1em; /* Ukuran judul kartu lebih kecil di mobile */
    }
}

/* For screens larger than or equal to 992px (typical for desktops) */
@media (min-width: 992px) {
    .sidebar {
        position: fixed; /* Sidebar tetap di desktop */
        top: 56px; /* Offset dari navbar */
        height: calc(100% - 56px); /* Tinggi penuh dikurangi navbar */
        transform: translateX(0) !important; /* Pastikan sidebar terlihat */
        z-index: 1020; /* Lebih tinggi dari konten tapi di bawah navbar utama */
    }

    main {
        margin-left: 280px; /* Berikan margin kiri sesuai lebar sidebar di desktop */
    }
}

/* General button styling for better appearance */
.btn {
    border-radius: 8px; /* Rounded corners for all buttons */
    padding: 10px 20px; /* Padding yang lebih baik */
    font-weight: 500;
    transition: all 0.2s ease; /* Smooth transition for hover effects */
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
    box-shadow: 0 6px 8px rgba(0, 123, 255, 0.3);
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529; /* Warna teks yang kontras */
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #c69500;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Form control styling */
.form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 10px 15px;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Alert messages styling */
.alert {
    border-radius: 8px;
    font-weight: 500;
}

/* Custom styles for tables (already there, just to ensure consistency) */
.table th, .table td {
    vertical-align: middle;
}