/*
 * File: assets/css/style.css
 * Styling Lengkap dan Final untuk CRUD Prodi Poltrada
 */

/* ==========================================================================
   PERBAIKAN GLOBAL: TEXT TRANSFORM UNTUK JUDUL
   ========================================================================== */
.prodi-crud-wrapper h1,
.prodi-crud-wrapper h3.prodi-form-title,
.prodi-crud-wrapper h3.summary-title-horizontal,
.prodi-crud-wrapper h3.jadwal-perkelas-title,
.prodi-crud-wrapper .semester-header h3,
.prodi-crud-wrapper .prodi-tab-link, /* Judul Tab juga dibuat kapital */
.prodi-crud-wrapper .wp-list-table thead th, /* Header Tabel juga dibuat kapital */
.jadwal-main-header h4 /* Judul di Jadwal Per Kelas */ {
    
    color: #0d1e4d !important
}

.prodi-crud-wrapper h2.prodi-page-title,
.prodi-monitoring-wrapper h3.prodi-page-title{
    text-transform: uppercase !important;
    color: #0d1e4d !important; /* Warna Font (Biru Tua) */
    font-weight: 600 !important; /* Ketebalan Font (Semi-Bold) */
    font-size: 18px !important; /* << Ukuran Font DITAMBAHKAN DI SINI */
}

/* ==========================================================================
   Wrapper & Tombol Utama
   ========================================================================== */

.prodi-crud-wrapper {
    margin-top: 20px;
    width: 100%;
}

.prodi-crud-wrapper .page-title-action {
    display: inline-block;
    background-color: #090999!important;
    color: white;
    padding: 8px 20px;       /* Padding disesuaikan */
    font-size: 13px;         /* Font disamakan dengan tombol utama */
    font-weight: bold;       /* Font disamakan dengan tombol utama */
    border-radius: 50px!important;     /* <===== PERUBAHAN UTAMA: Diubah menjadi pil */
    text-decoration: none;
    transition: all 0.2s;
}

.prodi-crud-wrapper .page-title-action:hover {
    background-color: #06066e; /* Warna biru lebih gelap */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.prodi-crud-wrapper .wp-list-table th.text-center,
.prodi-crud-wrapper .wp-list-table td.text-center {
    text-align: center !important;
}



/* ==========================================================================
   Tabel Data
   ========================================================================== */

.prodi-crud-wrapper .wp-list-table {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: none;
}


.prodi-crud-wrapper .wp-list-table thead th {
    background: transparent !important;
    color: white !important;
    border-color: transparent !important;
}

/* Baris dan Sel Tabel */
.prodi-crud-wrapper .wp-list-table td {
    padding: 5px 3px;/*ats-bawah, kiri-kanan*/
    vertical-align: middle;
}
.prodi-crud-wrapper .wp-list-table tbody tr:last-child td {
    border-bottom: none;
}

/* Tombol Aksi di Tabel (Edit & Hapus) */
.prodi-crud-wrapper .wp-list-table .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.prodi-crud-wrapper .button-danger {
    background: #d63638 !important; border-color: #b82f31 !important; color: white !important;
}
.prodi-crud-wrapper .button-danger:hover {
    background: #b82f31 !important; border-color: #b82f31 !important;
}


.prodi-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.prodi-pagination .paging-info {
    font-weight: bold;
    color: #475569;
}

/* ==========================================================================
   Pengaturan Lebar Kolom Tabel
   ========================================================================== */

/* Anda bisa mengubah nilai 'width' (persen) atau 'min-width' (piksel) 
   di bawah ini sesuai kebutuhan. */

/* Kolom ke-1: Nama Dosen */
.prodi-crud-wrapper .wp-list-table th:nth-child(1),
.prodi-crud-wrapper .wp-list-table td:nth-child(1) {
    width: 15%;
}

/* Kolom ke-2: Tempat/Tgl Lahir */
.prodi-crud-wrapper .wp-list-table th:nth-child(2),
.prodi-crud-wrapper .wp-list-table td:nth-child(2) {
    width: 15%;
}

/* Kolom ke-3: NIP */
.prodi-crud-wrapper .wp-list-table th:nth-child(3),
.prodi-crud-wrapper .wp-list-table td:nth-child(3) {
    width: 12%;
}

/* Kolom ke-4: NIDN */
.prodi-crud-wrapper .wp-list-table th:nth-child(4),
.prodi-crud-wrapper .wp-list-table td:nth-child(4) {
    width: 8%;
}

/* Kolom ke-5: Jabatan Akademik */
.prodi-crud-wrapper .wp-list-table th:nth-child(5),
.prodi-crud-wrapper .wp-list-table td:nth-child(5) {
    width: 8%;
}

/* Kolom ke-6: Rumpun Ilmu */
.prodi-crud-wrapper .wp-list-table th:nth-child(6),
.prodi-crud-wrapper .wp-list-table td:nth-child(6) {
    width: 10%;
}

/* Kolom ke-7: Ekspertise */
.prodi-crud-wrapper .wp-list-table th:nth-child(7),
.prodi-crud-wrapper .wp-list-table td:nth-child(7) {
    min-width: 200px;
}

/* Kolom ke-8: Kompetensi */
.prodi-crud-wrapper .wp-list-table th:nth-child(8),
.prodi-crud-wrapper .wp-list-table td:nth-child(8) {
    min-width: 200px;
}

/* Kolom ke-9: Aksi */
.prodi-crud-wrapper .wp-list-table th:nth-child(9),
.prodi-crud-wrapper .wp-list-table td:nth-child(9) {
    width: 12%;
}

/* ==========================================================================
   Form (Container, Layout, Input, Tombol)
   ========================================================================== */

/* Container Form Modern (Card Style) */
.prodi-crud-wrapper form.prodi-main-form {
    background: #ffffff;
    padding: 35px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 40px auto;
    border: 1px solid #e9e9e9;
}

/* Layout Form Satu Kolom Modern */
.prodi-crud-wrapper .form-table tr { display: block; margin-bottom: 25px; }
.prodi-crud-wrapper .form-table th,
.prodi-crud-wrapper .form-table td { display: block; padding: 0; width: 100%; }
.prodi-crud-wrapper .form-table th { padding-bottom: 8px; font-weight: 600; }
.prodi-crud-wrapper .prodi-required { color: red; margin-left: 2px; }

/* Input Form Modern */
.prodi-crud-wrapper .form-table input[type="text"],
.prodi-crud-wrapper .form-table input[type="date"],
.prodi-crud-wrapper .form-table textarea {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 15px;
    width: 100%;
    box-sizing: border-box;
}
.prodi-crud-wrapper .form-table input[type="text"]:focus,
.prodi-crud-wrapper .form-table input[type="date"]:focus,
.prodi-crud-wrapper .form-table textarea:focus {
    background-color: #fff;
    border-color: #090999;
    box-shadow: 0 0 0 1px #090999;
}

/* Menghilangkan bayangan abu-abu dari autofill browser */
.prodi-crud-wrapper .form-table input:-webkit-autofill,
.prodi-crud-wrapper .form-table input:-webkit-autofill:hover,
.prodi-crud-wrapper .form-table input:-webkit-autofill:focus,
.prodi-crud-wrapper .form-table input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f7f7f7 inset !important;
    box-shadow: 0 0 0 30px #f7f7f7 inset !important;
}

/* ==========================================================================
   Gaya Tombol Form (Simpan & Batal)
   ========================================================================== */

/* Gaya untuk Tombol Utama (Simpan Data/Statistik) */
.prodi-crud-wrapper .submit .button-primary,
#plot-pengampu-modal .prodi-modal-footer .button-primary,
#modal-edit-catatan .modal-actions .button-primary, /* <-- TAMBAHKAN BARIS INI */
.prodi-input-status-wrapper-new .status-modal-content .modal-actions .button-primary { /* <-- TOMBOL MODAL INPUT STATUS */
    background-color: #090999 !important; 
    color: white !important;
    border: none !important;
    border-radius: 50px !important;     /* <-- UBAH BENTUK JADI PIL (50px) */
    padding: 10px 25px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: auto !important;
    line-height: normal !important;
    text-shadow: none !important;
    transition: all 0.2s;
}



.prodi-crud-wrapper .submit .button-primary:hover,
#plot-pengampu-modal .prodi-modal-footer .button-primary:hover,
#modal-edit-catatan .modal-actions .button-primary:hover, /* <-- TAMBAHKAN BARIS INI */
.prodi-input-status-wrapper-new .status-modal-content .modal-actions .button-primary:hover { /* <-- TOMBOL MODAL INPUT STATUS HOVER */
    background-color: #06066e !important; /* Warna biru lebih gelap */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(9,9,153,0.2) !important;
}



/* ==========================================================================
   Perbaikan Khusus Frontend
   ========================================================================== */

/* Menghilangkan background/style dari tema di area shortcode */
.prodi-frontend-wrapper {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mengatur judul di frontend agar mirip backend */
.prodi-frontend-wrapper .prodi-page-title {
    font-size: 16px;
    font-weight: 300px;
    margin: 0 0 20px 0;
    padding: 9px 0 4px;
    line-height: 29px;
}

/* ==========================================================================
   Perbaikan Khusus Frontend
   ========================================================================== */
.prodi-frontend-wrapper { background: none !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
.prodi-frontend-wrapper .prodi-page-title { font-size: 23px; font-weight: 400; margin: 0 0 20px 0; padding: 9px 0 4px; line-height: 29px; }

/* --- BARU: Kartu Notifikasi Modern --- */
.prodi-notice {
    padding: 12px 20px;
    margin-bottom: 25px;
    border-left: 5px solid #4CAF50;
    background-color: #f0fdf4;
    color: #166534;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.prodi-notice p {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 12px;
}

/* --- GAYA TOMBOL MODERN UMUM (EDIT, HAPUS, FETCH) --- */
.prodi-crud-wrapper .button.button-edit,
.prodi-crud-wrapper .button.button-danger,
.prodi-crud-wrapper .button.button-fetch,
.prodi-crud-wrapper .remove-repeater-row {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 5px;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.prodi-crud-wrapper .button.button-edit {
    background-color: #271195;
    border-color: #071b6a;
    color: #edece5;
}

.prodi-crud-wrapper .button.button-edit:hover {
    background-color: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b;
    transform: translateY(-1px);
}

.prodi-crud-wrapper .button.button-danger {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    text-shadow: none;
}

.prodi-crud-wrapper .button.button-danger:hover {
    background: #fecaca !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    transform: translateY(-1px);
}

/* [BARU] Gaya hover spesifik untuk tombol Bersihkan Plot & Jadwal */
.prodi-crud-wrapper #clear-plot-button:hover,
.prodi-crud-wrapper #clear-jadwal-button:hover,
.prodi-crud-wrapper #cleanup-orphan-button:hover {
    background: #b91c1c !important; /* Latar merah tua solid */
    border-color: #991b1b !important; /* Border lebih gelap */
    color: #ffffff !important;      /* Teks putih */
    transform: translateY(-2px);    /* Efek naik sedikit */
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.2); /* Bayangan merah */
}

/* Penyesuaian tata letak header halaman frontend */
.prodi-page-header {
    display: flex;
    justify-content: space-between; /* Mendorong item ke ujung kiri dan kanan */
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

/* --- PERBAIKAN: Lebar Kartu Notifikasi --- */
.prodi-frontend-wrapper .prodi-notice {
    max-width: 700px;
    margin-left: 0;
    margin-right: auto;
}

/* ==========================================================================
   PERBAIKAN ALIGNMENT HEADER & AKSI (DATA DOSEN & STATISTIK)
   ========================================================================== */

/* 1. Buat SEMUA header rata kiri secara default (Tetap) */
.prodi-crud-wrapper .prodi-table-wrapper .wp-list-table thead th {
    text-align: left !important; /* Default rata kiri untuk semua header */
    vertical-align: middle;
}

/* 2. Buat header kolom AKSI menjadi rata tengah (menimpa default) */
/* Kolom Aksi Data Dosen (kolom ke-8) */
#dosen-table-container .wp-list-table th:nth-child(8) { /* <<< Target spesifik tabel dosen */
    text-align: center !important;
}

#dosen-table-container .wp-list-table th:nth-child(2),
#dosen-table-container .wp-list-table th:nth-child(4){ /* <<< Target spesifik tabel dosen */
    text-align: center !important;
}

#dosen-table-container .wp-list-table th:nth-child(3),
#dosen-table-container .wp-list-table th:nth-child(5){ /* <<< Target spesifik tabel dosen */
    text-align: left !important;
}
#dosen-table-container .wp-list-table td:nth-child(2),
#dosen-table-container .wp-list-table td:nth-child(4){ /* <<< Target sel data (td) kolom kedua */
    text-align: center !important;
}
/* Kolom Aksi Statistik Dosen (kolom ke-12) */
#statistik-table-container .wp-list-table th:nth-child(12) { /* <<< Target spesifik tabel statistik */
    text-align: center !important;
}

/* 3. Pastikan isi (ikon) kolom AKSI di body juga rata tengah (Tetap) */
#dosen-table-container .wp-list-table td:nth-child(8),
#statistik-table-container .wp-list-table td:nth-child(12) {
    text-align: center !important;
    vertical-align: middle;
}

/* 4. (Opsional) Pengaturan rata tengah untuk kolom numerik di Statistik (Tetap) */
#statistik-table-container .wp-list-table th:nth-child(2),
#statistik-table-container .wp-list-table td:nth-child(2),
#statistik-table-container .wp-list-table th:nth-child(3),
#statistik-table-container .wp-list-table td:nth-child(3),
#statistik-table-container .wp-list-table th:nth-child(4),
#statistik-table-container .wp-list-table td:nth-child(4),
#statistik-table-container .wp-list-table th:nth-child(5),
#statistik-table-container .wp-list-table td:nth-child(5),
#statistik-table-container .wp-list-table th:nth-child(7),
#statistik-table-container .wp-list-table td:nth-child(7),
#statistik-table-container .wp-list-table th:nth-child(8),
#statistik-table-container .wp-list-table td:nth-child(8),
#statistik-table-container .wp-list-table th:nth-child(9),
#statistik-table-container .wp-list-table td:nth-child(9),
#statistik-table-container .wp-list-table th:nth-child(10),
#statistik-table-container .wp-list-table td:nth-child(10),
#statistik-table-container .wp-list-table th:nth-child(11),
#statistik-table-container .wp-list-table td:nth-child(11) {
    text-align: center !important;
}
/* ==========================================================================
   PENGATURAN LEBAR KOLOM STATIS (TABEL DATA DOSEN & STATISTIK)
   ========================================================================== */

/* Menerapkan layout tetap agar lebar kolom dipatuhi */
.prodi-crud-wrapper .prodi-table-wrapper .wp-list-table {
    table-layout: fixed; /* Penting! */
    width: 100%; /* Pastikan tabel memakai lebar penuh container */
}

/* Mengatur agar teks bisa turun (wrapping) jika terlalu panjang */
.prodi-crud-wrapper .prodi-table-wrapper .wp-list-table td {
    word-wrap: break-word; /* atau overflow-wrap: break-word; */
    white-space: normal !important; /* Timpa aturan lain jika perlu */
}

/* --- Pengaturan Lebar Kolom Tabel DATA DOSEN --- */
/* (Sesuaikan nilai % atau px sesuai kebutuhan Anda) */

/* Kolom 1: Nama Dosen */
#dosen-table-container .wp-list-table th:nth-child(1),
#dosen-table-container .wp-list-table td:nth-child(1) {
    width: 22%;
}

/* Kolom 2: Prodi */
#dosen-table-container .wp-list-table th:nth-child(2),
#dosen-table-container .wp-list-table td:nth-child(2) {
    width: 8%;
}

/* Kolom 3: NIP / NIDN */
#dosen-table-container .wp-list-table th:nth-child(3),
#dosen-table-container .wp-list-table td:nth-child(3) {
    width: 10%;
}

/* Kolom 4: Jabatan Akademik */
#dosen-table-container .wp-list-table th:nth-child(4),
#dosen-table-container .wp-list-table td:nth-child(4) {
    width: 10%;
}

/* Kolom 5: Rumpun Ilmu */
#dosen-table-container .wp-list-table th:nth-child(5),
#dosen-table-container .wp-list-table td:nth-child(5) {
    width: 10%;
}

/* Kolom 6: Ekspertise */
#dosen-table-container .wp-list-table th:nth-child(6),
#dosen-table-container .wp-list-table td:nth-child(6) {
    width: 15%;
}

/* Kolom 7: Kompetensi */
#dosen-table-container .wp-list-table th:nth-child(7),
#dosen-table-container .wp-list-table td:nth-child(7) {
    width: 25%;
}

/* Kolom 8: Aksi */
#dosen-table-container .wp-list-table th:nth-child(8),
#dosen-table-container .wp-list-table td:nth-child(8) {
    width: 8%; /* Atau sesuaikan agar pas untuk 2 ikon */
    min-width: 80px; /* Lebar minimum agar ikon tidak terlalu mepet */
    text-align: center; /* Pusatkan ikon */
}

/* --- Pengaturan Lebar Kolom Tabel STATISTIK DOSEN --- */
/* (Sesuaikan nilai % atau px sesuai kebutuhan Anda) */

/* Kolom 1: Nama Dosen */
#statistik-table-container .wp-list-table th:nth-child(1),
#statistik-table-container .wp-list-table td:nth-child(1) {
    width: 21%;
}

/* Kolom 2: Score Sinta */
#statistik-table-container .wp-list-table th:nth-child(2),
#statistik-table-container .wp-list-table td:nth-child(2) {
    width: 7%;
    text-align: center;
}

/* Kolom 3: Score G. Scholar */
#statistik-table-container .wp-list-table th:nth-child(3),
#statistik-table-container .wp-list-table td:nth-child(3) {
    width: 7%;
    text-align: center;
}

/* Kolom 4: ID Sinta */
#statistik-table-container .wp-list-table th:nth-child(4),
#statistik-table-container .wp-list-table td:nth-child(4) {
    width: 5%;
}

/* Kolom 5: ID Scopus */
#statistik-table-container .wp-list-table th:nth-child(5),
#statistik-table-container .wp-list-table td:nth-child(5) {
    width: 8%;
}

/* Kolom 6: Link Eksternal */
#statistik-table-container .wp-list-table th:nth-child(6),
#statistik-table-container .wp-list-table td:nth-child(6) {
    width: 8%;
}

/* Kolom 7: Nilai Evaluasi */
#statistik-table-container .wp-list-table th:nth-child(7),
#statistik-table-container .wp-list-table td:nth-child(7) {
    width: 7%;
    text-align: center;
}

/* Kolom 8: Cakupan MK */
#statistik-table-container .wp-list-table th:nth-child(8),
#statistik-table-container .wp-list-table td:nth-child(8) {
    width: 7%;
    text-align: center;
}

/* Kolom 9: Kompetensi (Jumlah) */
#statistik-table-container .wp-list-table th:nth-child(9),
#statistik-table-container .wp-list-table td:nth-child(9) {
    width: 7%;
    text-align: center;
}

/* Kolom 10: Beban Dosen */
#statistik-table-container .wp-list-table th:nth-child(10),
#statistik-table-container .wp-list-table td:nth-child(10) {
    width: 7%;
    text-align: center;
}

/* Kolom 11: Score Publikasi + Ambil Data */
#statistik-table-container .wp-list-table th:nth-child(11),
#statistik-table-container .wp-list-table td:nth-child(11) {
    width: 8%;
}
#statistik-table-container .wp-list-table td:nth-child(11) {
    text-align: center; /* Agar skor dan tombol ditengah */
}

/* Kolom 12: Aksi */
#statistik-table-container .wp-list-table th:nth-child(12),
#statistik-table-container .wp-list-table td:nth-child(12) {
    width: 8%; /* Atau sesuaikan agar pas untuk 2 ikon */
    min-width: 80px; /* Lebar minimum agar ikon tidak terlalu mepet */
    text-align: center; /* Pusatkan ikon */
}



/* ==========================================================================
   Gaya Header Halaman (Judul, Cari, Tombol)
   ========================================================================== */

.prodi-frontend-wrapper .prodi-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef0f3;
}

/* Wadah utama untuk mensejajarkan judul dan aksi */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-page-header{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
    background: none; /* Memastikan tidak ada background */
    border: none; /* Memastikan tidak ada border */
    box-shadow: none; /* Memastikan tidak ada bayangan */
}

.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara search dan tombol */
}

/* Form pencarian itu sendiri, dipastikan tidak ada style card */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-form {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* Kotak input pencarian */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-box {
    position: relative;
}

.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-box input[type="search"]{
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 8px 15px 8px 40px;
    min-width: 300px;
    transition: all 0.3s;
    font-size: 14px;
}

.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-box input[type="search"]:focus {
    border-color: #090999;
    box-shadow: 0 0 0 1px #090999;
    background-color: #fff;
}

/* Ikon search di dalam input */
.prodi-search-box::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 S0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: 0.8;
}

/* Gaya tombol 'x' (clear) bawaan browser */
.prodi-search-box input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' class='bi bi-x-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E");
    transition: all 0.2s;
}

.prodi-search-box input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Gaya Tampilan Tab Modern (Folder Style)
   ========================================================================== */

/* Wadah utama untuk navigasi tab */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tabs{
    display: flex;
    border-bottom: 1px solid #e2e8f0; /* Garis dasar pemisah */
    margin-bottom: 0; /* Dihapus agar tab aktif bisa menempel */
}

/* Tautan tab individual */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tab-link {
    display: flex; /* Agar ikon dan teks sejajar */
    align-items: center;
    gap: 8px; /* Jarak antara ikon dan teks */
    padding: 12px 20px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    color: #64748b; /* Warna untuk tab tidak aktif */
    background-color: #f1f5f9; /* Latar abu-abu untuk tab tidak aktif */
    border: 1px solid #e2e8f0;
    border-bottom: none; /* Hilangkan border bawah */
    border-radius: 8px 8px 0 0; /* Sudut membulat hanya di atas */
    margin-right: 5px;
    margin-bottom: -1px!important; /* Trik agar menempel di atas garis */
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* Gaya untuk tab yang aktif */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tab-link.active{
    background-color: #ffffff; /* Latar putih, menyatu dengan card konten */
    color: #090999;
    font-weight: 600;
    border-bottom: 1px solid #ffffff!important; /* Menutupi garis container di bawahnya */
    z-index: 2; /* Memastikan tab aktif di atas elemen lain */
}

/* Gaya untuk card konten di bawah tab */
.prodi-frontend-wrapper .prodi-content-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 0 0px 12px 12px; /* Sudut membulat, kecuali pojok kiri atas */
    border: 1px solid #e2e8f0;
    border-top: none!important; /* Hilangkan border atas agar menyatu dengan tab */
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    width: 100%;
    box-sizing: border-box;
}


/* Efek saat mouse di atas tab yang tidak aktif */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tab-link:not(.active):hover  {
    background-color: #e2e8f0;
    color: #1e293b;
}

/* Menambahkan ikon menggunakan pseudo-element ::before */
.prodi-tab-link[href*="tab="]::before,
.prodi-tab-link:not([href*="tab="])::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor; /* Warna ikon mengikuti warna teks */
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* Ikon untuk Tab Data Dosen (tab default, tidak punya parameter ?tab=) */
.prodi-crud-wrapper .prodi-tabs a.prodi-tab-link[data-tab="dosen"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Statistik Dosen */
.prodi-tab-link[href*="tab=statistik"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   IKON UNTUK TAB HALAMAN MASTER KURIKULUM
   ========================================================================== */

/* Ikon untuk Tab Kurikulum (Bank Data) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=kurikulum"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Mata Kuliah (Per Semester) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=matakuliah"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-7v6h5V5h-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-7v6h5V5h-5z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Pengampu */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=pengampu"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   Gaya Kartu Konten Tab
   ========================================================================== */

.prodi-content-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eef0f3;
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    width: 100%;
    box-sizing: border-box;
}

/* Menyesuaikan jarak header di dalam kartu */
.prodi-content-card .prodi-page-header {
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef0f3;
}

/* Membuat tabel lebar bisa di-scroll horizontal */
.prodi-table-wrapper {
    overflow-x: auto;
}
/* Styling untuk link di dalam tabel */
.prodi-link {
    display: inline-block;
    margin: 2px;
    padding: 2px 6px;
    background-color: #f1f5f9;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
}
.prodi-link:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   Pengaturan Lebar & Wrapping Kolom Tabel Statistik (Diperkuat)
   ========================================================================== */

/* Aturan wrapping umum yang kuat untuk semua sel di tabel ini */
.statistik-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Kolom ke-1: Nama Dosen */
.statistik-table th:nth-child(1),
.statistik-table td:nth-child(1) {
    width: 20%;
}

/* Kolom ke-2 & 3: Score Sinta & Scholar */
.statistik-table th:nth-child(2),
.statistik-table td:nth-child(2),
.statistik-table th:nth-child(3),
.statistik-table td:nth-child(3) {
    width: 8%;
    text-align: center;
}

/* Kolom ke-4 & 5: ID Sinta & Scopus */
.statistik-table th:nth-child(4),
.statistik-table td:nth-child(4),
.statistik-table th:nth-child(5),
.statistik-table td:nth-child(5) {
    width: 10%;
    /* Batas lebar maksimum agar tidak melebar meski teks panjang */
    max-width: 150px; 
}

/* Kolom ke-6: Link Eksternal */
.statistik-table th:nth-child(6),
.statistik-table td:nth-child(6) {
    width: 10%;
}

/* Kolom ke-7, 8, 9, 10: Nilai, Cakupan, Kompetensi, Beban */
.statistik-table th:nth-child(7),
.statistik-table td:nth-child(7),
.statistik-table th:nth-child(8),
.statistik-table td:nth-child(8),
.statistik-table th:nth-child(9),
.statistik-table td:nth-child(9),
.statistik-table th:nth-child(10),
.statistik-table td:nth-child(10) {
    width: 8%;
    text-align: center;
}

/* Kolom ke-11: Aksi */
.statistik-table th:nth-child(11),
.statistik-table td:nth-child(11) {
    min-width: 140px;
    width: 12%;
}

/* ==========================================================================
   Memaksa Teks Panjang Turun (Text Wrapping) di Tabel
   ========================================================================== */

.prodi-crud-wrapper .wp-list-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important; /* Versi modern dari word-wrap */
}




/* ==========================================================================
   Perbaikan Text Wrapping untuk Tabel Statistik
   ========================================================================== */

/* Target spesifik untuk sel di dalam tabel statistik */
.statistik-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ==========================================================================
   Gaya Notifikasi Error
   ========================================================================== */

/* Menambahkan gaya khusus untuk notifikasi error (merah) */
.prodi-notice.prodi-notice-error {
    background-color: #fef2f2; /* Latar belakang merah sangat terang */
    border-left-color: #ef4444; /* Garis kiri merah */
    color: #b91c1c;             /* Teks merah tua */
}

/* ==========================================================================
   Gaya Tombol Ambil Data (Fetch)
   ========================================================================== */

/* Gaya untuk tombol "Ambil Data" dengan nuansa hijau */
.prodi-crud-wrapper .wp-list-table .button.button-fetch {
    background-color: #f0fdf4; /* Latar hijau sangat terang */
    border-color: #bbf7d0;     /* Border hijau muda */
    color: #166534;            /* Teks hijau tua */
    text-shadow: none;
}

.prodi-crud-wrapper .wp-list-table .button.button-fetch:hover {
    background-color: #dcfce7; /* Latar sedikit lebih gelap saat hover */
    border-color: #86efac;     /* Border sedikit lebih gelap saat hover */
    color: #14532d;            /* Teks sedikit lebih gelap saat hover */
    transform: translateY(-1px);
    box-shadow: none!important;
}

/* ==========================================================================
   GAYA UNTUK REPEATER FIELD TUGAS TAMBAHAN
   ========================================================================== */

#tugas-tambahan-repeater .repeater-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#tugas-tambahan-repeater .repeater-select {
    flex-grow: 1;
}

#tugas-tambahan-repeater .remove-repeater-row {
    flex-shrink: 0;
    font-size: 10px !important; /* <-- Perkecil tulisan */
    padding: 3px 10px !important; /* Samakan dengan tombol edit */
}

#add-repeater-row {
    /* Gaya Dasar (Mirip Tombol Sekunder) */
    display: inline-block; /* Agar bisa diberi padding & margin */
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 50px !important; /* Bentuk pil */
    text-decoration: none !important;
    text-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
    vertical-align: middle; /* Sejajarkan dengan elemen lain jika perlu */
    line-height: normal; /* Pastikan tinggi baris normal */

    /* Ukuran Spesifik (Dari aturan Anda sebelumnya) */
    margin-bottom: 8px;
    font-weight: 500 !important;
    font-size: 12px !important; /* <-- Ukuran tulisan kecil */
    padding: 4px 16px !important;  /* <-- Ukuran padding kecil */
}

#add-repeater-row:hover {
    background: #80E891 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
    transform: translateY(-1px); /* Efek sedikit naik */
}
/* ==========================================================================
   GAYA UNTUK TAB PENGAMPU (VERSI BARU)
   ========================================================================== */

.prodi-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Spasi antara search box dan tombol */
}

.pengampu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); /* Lebar minimum diperbesar */
    gap: 25px;
    margin-top: 20px;
}

.pengampu-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Sedikit bayangan untuk kedalaman */
    overflow: hidden; /* Penting untuk radius border */
    display: flex; /* Menggunakan flexbox untuk header dan body */
    flex-direction: column;
}

.pengampu-card .card-header {
    background-color: #f8fafc; /* Latar belakang header lebih terang */
    padding: 20px 25px;
    border-bottom: 1px solid #e2e8f0;
}

.pengampu-mk-title {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.15rem; /* Ukuran teks judul mata kuliah */
    font-weight: 600;
    color: #1e293b;
}

.pengampu-mk-code {
    display: inline-block;
    font-size: 0.8rem; /* Ukuran teks kode mata kuliah */
    color: #64748b;
    background-color: #eef2ff; /* Warna latar belakang pill kode */
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
}

.pengampu-card .card-body {
    padding: 20px 25px;
    flex-grow: 1; /* Agar body memenuhi sisa ruang */
}

.pengampu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antar item dosen */
}

.pengampu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #f8fafc; /* Dihapus untuk tampilan yang lebih bersih */
    padding: 0; /* Dihapus padding dari item */
    border-radius: 8px;
    border: 1px solid #f1f5f9; /* Border tipis untuk item */
    padding: 12px 15px; /* Padding kembali ke item */
}

.pengampu-item-none {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 20px; /* Padding untuk pesan "tidak ada rekomendasi" */
}

.pengampu-dosen-info {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara inisial dan nama */
}

.pengampu-dosen-inisial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ukuran inisial lebih besar */
    height: 40px;
    border-radius: 50%;
    background-color: #e0e7ff; /* Warna inisial yang lebih menonjol */
    color: #3f51b5; /* Warna teks inisial */
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dosen-text-details {
    display: flex;
    flex-direction: column;
}

.pengampu-dosen-nama {
    font-weight: 500;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.3; /* Menyesuaikan tinggi baris */
}

/* Jika ada gelar atau info tambahan */
.pengampu-dosen-gelar {
    font-size: 0.8rem;
    color: #64748b;
}

.pengampu-skor {
    font-weight: bold;
    font-size: 0.9rem; /* Ukuran tulisan skor diperkecil */
    color: #3f51b5;
    background-color: #eef2ff;
    padding: 5px 12px; /* Padding (bantalan) diperkecil */
    border-radius: 50px;
    min-width: 60px; /* Lebar minimum disesuaikan */
    text-align: center;
}

/* ==========================================================================
   GAYA WARNA BERDASARKAN SKOR PENGAMPU
   ========================================================================== */

/* Skor 80 - 100 (Hijau) */
.pengampu-skor.skor-sangat-baik {
    background-color: #f0fdf4;
    color: #0aab48;
}

/* Skor 60 - 79 (Oranye Tua) */
.pengampu-skor.skor-baik {
    background-color: #fff7ed;
    color: #d37918;
}

/* Skor 25 - 59 (Merah) */
.pengampu-skor.skor-cukup {
    background-color: #fef2f2;
    color: #e32525;
}

/* Skor 0 - 24 (Abu-abu) */
.pengampu-skor.skor-rendah {
    background-color: #f1f5f9;
    color: #6f7a89;
}


/* ==========================================================================
   GAYA UNTUK TAB MATA KULIAH PER SEMESTER
   ========================================================================== */

.semester-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background-color: #f8fafc;
    border-bottom: 1px solid #eef0f3;
}

.semester-header h3 {
    margin: 0;
    font-size: 16px;
    color: #071959;
}

.semester-table tfoot td {
    background-color: #f8fafc;
    font-size: 14px;
}

/* Pewarnaan Baris Mata Kuliah */
.semester-table-body tr.mk-wajib { background-color: #d2f0db; } /* Hijau Muda */
.semester-table-body tr.mk-dasar { background-color: #cbdcf2; } /* Biru Muda */
.semester-table-body tr.mk-keahlian { background-color: #f2eec7; } /* Kuning Muda */
.semester-table-body tr.mk-pendukung { background-color: #f3cbcb; } /* Merah Muda */
.semester-table-body tr.mk-berkarya { background-color: #cdc6f2; } /* Ungu Muda */

/* Efek hover untuk semua baris berwarna */
.semester-table-body tr[class*="mk-"]:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   GAYA UNTUK MODAL (POPUP) TAMBAH MK
   ========================================================================== */

.prodi-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prodi-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.prodi-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.prodi-modal-header h3 { margin: 0; font-size: 20px; }

/* GANTI ATURAN LAMA DENGAN VERSI BARU INI */

.prodi-modal-header .close-modal {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 10% !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 0 0 1px 0 !important;
    
    /* Properti Kunci Tambahan */
    flex-shrink: 0;     /* Mencegah tombol 'gepeng' jika judul terlalu panjang */
    align-self: center; /* Mencegah tombol 'tertarik' secara vertikal */
}

.prodi-modal-header .close-modal:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}


.prodi-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-mk-list label {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}
.modal-mk-list label:hover {
    background-color: #f8fafc;
}
.modal-mk-list label input {
    margin-right: 10px;
}

.prodi-modal-footer {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #e2e8f0;
}


.prodi-modal-footer #add-selected-mk-button {
    /* --- Salin gaya dari .button-primary --- */
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important; /* Bentuk pil */
    padding: 10px 25px !important; /* Sesuaikan padding jika perlu */
    font-size: 14px !important;
    font-weight: bold !important;
    height: auto !important;
    line-height: normal !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Hilangkan gaya default WP jika perlu */
    box-shadow: none !important;
    text-transform: none !important; /* Hapus uppercase jika ada */
    vertical-align: middle; /* Pastikan alignment vertikal baik */
}


/* Pewarnaan Baris Mata Kuliah */
.semester-table-body tr.mk-wajib { background-color: #f0fdf4; } /* Hijau Muda */
.semester-table-body tr.mk-dasar { background-color: #eff6ff; } /* Biru Muda */
.semester-table-body tr.mk-keahlian { background-color: #fefce8; } /* Kuning Muda */
.semester-table-body tr.mk-pendukung { background-color: #fef2f2; } /* Merah Muda */
.semester-table-body tr.mk-berkarya { background-color: #f5f3ff; } /* Ungu Muda */

/* Efek hover untuk semua baris berwarna */
.semester-table-body tr[class*="mk-"]:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   PENYESUAIAN GAYA TOMBOL "TAMBAH MK"
   ========================================================================== */

/* Target spesifik untuk tombol Tambah MK di header semester */
.semester-header .add-mk-button {
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important; /* Paksa bentuk pil */
    padding: 8px 20px !important;   /* Sesuaikan padding agar pas */
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: normal !important; /* Hapus tinggi baris berlebih dari gaya standar */
    height: auto !important;        /* Hapus tinggi tetap dari gaya standar */
    text-shadow: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.semester-header .add-mk-button:hover {
    background-color: #06066e !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   MEMPOSISIKAN TEKS "BELUM ADA MATA KULIAH"
   ========================================================================== */

/* Target sel di dalam baris dengan kelas .no-items */
.semester-table .no-items td {
    text-align: center !important;
    padding: 30px 0 !important; /* (Opsional) Menambah ruang atas-bawah agar lebih lega */
    color: #94a3b8;             /* (Opsional) Membuat teks sedikit lebih pudar */
}

/* Target semua sel di dalam tfoot (baris Jumlah) */
.semester-table tfoot td {
    font-weight: bold; /* (Opsional) Menebalkan tulisan agar lebih menonjol */
    color: #192A70; /* Memberi warna biru sesuai permintaan */
    font-size: 14px !important;
}

/* ==========================================================================

/* ==========================================================================
   GAYA UNTUK CARD SUMMARY TOTAL KURIKULUM
   ========================================================================== */

.summary-total-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #090999;
    width: 25%; /* 1/4 dari lebar card tabel */
    float: left;
    margin-right: 30px;
}

.summary-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
}

.summary-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f8fafc;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.summary-value.highlight {
    color: #090999;
    font-weight: 700;
}

.summary-value.percentage {
    color: #059669;
    font-weight: 700;
}

/* Responsive design untuk layar kecil */
@media (max-width: 1200px) {
    .summary-total-card {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   GAYA UNTUK CARD SUMMARY HORIZONTAL
   ========================================================================== */

.summary-total-card-horizontal {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #090999;
    width: 100%; /* Memanjang full width */
}

.summary-title-horizontal {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
}

.summary-grid-horizontal {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.summary-row-horizontal {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.summary-item-horizontal {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    text-align: center;
    min-height: 80px;
    transition: all 0.3s ease;
}

.summary-item-horizontal:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-label-horizontal {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 8px;
}

.summary-value-horizontal {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
}

.summary-value-horizontal.highlight {
    color: #090999;
    font-size: 18px;
}

.summary-value-horizontal.percentage {
    color: #059669;
    font-size: 18px;
}

/* Responsive design untuk layar kecil */
@media (max-width: 1200px) {
    .summary-row-horizontal {
        flex-wrap: wrap;
    }
    
    .summary-item-horizontal {
        flex: 1 1 calc(50% - 15px);
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .summary-item-horizontal {
        flex: 1 1 100%;
    }
    
    .summary-row-horizontal {
        gap: 10px;
    }
}

/* ==========================================================================
   GAYA UNTUK HALAMAN PLOT PERKULIAHAN
   ========================================================================== */
.plot-filter-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex; /* Aktifkan flexbox */
    align-items: center!important; /* Sejajarkan item secara vertikal */
    gap: 20px; /* Jarak antar item filter */
}

.plot-filter-container form {
    margin: 0;
}

.plot-filter-container .filter-item,
.plot-filter-container form {
    display: flex;
    align-items: center!important;
    gap: 20px; /* <-- Tambah jarak antara label dan input */
}

.plot-filter-container label {
    font-size: 13px; /* <-- Perkecil ukuran font tulisan */
    font-weight: 500;
    color: #475569;
}

/* Hapus style lama pada input tahun ajaran */
.jadwal-main-header .tahun-ajaran-input {
   display: none; /* Sembunyikan jika masih ada */
}

/* Atur kembali style input di lokasi baru */
.plot-filter-container .tahun-ajaran-input {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: #1e293b;
    width: 120px;
}

.dosen-pengampu-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* ==========================================================================
   GAYA TAMBAHAN UNTUK MODAL PLOT PENGAMPU
   ========================================================================== */
.modal-section-title {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}
.modal-section-title:first-child {
    margin-top: 0;
}
.modal-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* TAMBAHKAN DI AKHIR FILE CSS */

/* ==========================================================================
   GAYA UNTUK ELEMEN <dialog>
   ========================================================================== */

dialog#plot-pengampu-modal {
    padding: 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    max-width: 600px;
    width: 90%;
}

/* Latar belakang gelap di belakang popup */
dialog#plot-pengampu-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   PENGATURAN LEBAR KOLOM PLOT SETTING (VERSI PALING KUAT)
   ========================================================================== */

/* Pastikan tabel menggunakan layout 'fixed' */
.plot-setting-table {
    table-layout: fixed !important;
}

/* Atur lebar setiap kolom dengan selector yang sangat spesifik */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(1) { width: 5% !important; }   /* No. */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(2) { width: 7% !important; }  /* Kode */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(3) { width: 28% !important; }/* Mk */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(4) { width: 6% !important; } /* sks */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(5) { width: 37% !important; }  /* Dosen Pengampu */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(6) { width: 9% !important; }  /* Kode Pengampu */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(7) { width: 8% !important; }  /* Aksi */

/* ==========================================================================
   PENGATURAN PADDING SEL TABEL PLOT SETTING
   ========================================================================== */

.plot-setting-table td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    vertical-align: middle !important;
    text-align: left !important;
}


.plot-setting-table th {
    text-align: center !important; 
}

/* ==========================================================================
   GAYA UNTUK BADGE KODE PENGAMPU
   ========================================================================== */

.kode-pengampu-badge {
    display: inline-block;
    background-color: #090999;
    color: #fff;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    min-width: 90px;      /* <-- TAMBAHKAN BARIS INI */
    text-align: center;   /* <-- TAMBAHKAN BARIS INI */
}

/* ==========================================================================
   GAYA TOMBOL "SIMPAN" DI DALAM MODAL
   ========================================================================== */

/* Target spesifik untuk tombol Simpan di dalam modal plot pengampu */
#plot-pengampu-modal .prodi-modal-footer .button-primary {
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 25px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: auto !important;
    line-height: normal !important;
    text-shadow: none !important;
    transition: all 0.2s ease;
}

#plot-pengampu-modal .prodi-modal-footer .button-primary:hover {
    background-color: #06066e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(9, 9, 153, 0.2);
}

/* ==========================================================================
   PENYESUAIAN GAYA FONT DI DALAM MODAL PLOT PENGAMPU
   ========================================================================== */

/* 1. Perbesar tulisan "Dosen Rekomendasi" dan ikon bintangnya */
#plot-pengampu-modal .modal-section-title {
    font-size: 16px; /* Naikkan dari 14px menjadi 16px */
    align-items: center;
    display: flex;
    gap: 8px; /* Memberi jarak antara bintang dan teks */
}

/* 2. Perkecil font nama dosen di dalam daftar pilihan */
#plot-pengampu-modal .modal-mk-list label {
    font-size: 14px; /* Perkecil ukuran font keseluruhan */
}

#plot-pengampu-modal .modal-mk-list label strong {
    font-size: 13px; /* Sedikit memperkecil inisial agar proporsional */
}

/* ==========================================================================
   GAYA UNTUK PESAN "TIDAK ADA REKOMENDASI" DI MODAL
   ========================================================================== */

/* Target paragraf di dalam daftar rekomendasi */
#rekomendasi-dosen-list p {
    font-style: italic;     /* Teks miring */
    color: #64748b;         /* Warna abu-abu tua */
    font-size: 13px;         /* Ukuran font diperkecil */
    text-align: center;      /* Posisikan di tengah */
    padding: 15px 0;         /* Beri sedikit ruang vertikal */
    margin: 0;
}


/* ==========================================================================
   GAYA UNTUK BAR BEBAN DOSEN
   ========================================================================== */
/* ==========================================================================
   GAYA UNTUK BAR BEBAN DOSEN (VERSI GRADASI DINAMIS)
   ========================================================================== */

.beban-bar-container {
    width: 100%;
    background-color: #e2e8f0;
    border-radius: 50px;
    height: 12px;
    overflow: hidden;
}

.beban-bar {
    height: 100%;
    border-radius: 50px;
    transition: width 0.5s ease;
}

/* --- Gradasi Warna Bertingkat --- */

/* Beban Rendah (0-50%): Hijau solid */
.beban-bar.beban-aman {
    background: #22c55e;
}

/* Beban Sedang (51-74%): Gradien Hijau -> Kuning */
.beban-bar.beban-sedang {
    background: linear-gradient(to right, #22c55e, #facc15);
}

/* Beban Tinggi (75-89%): Gradien Hijau -> Kuning -> Merah */
.beban-bar.beban-tinggi {
    background: linear-gradient(to right, #22c55e, #facc15, #ef4444);
}

/* Beban Kritis (90-100%): Gradien Hijau -> Kuning -> Merah Tua */
.beban-bar.beban-kritis {
    background: linear-gradient(to right, #22c55e, #facc15, #b91c1c);
}

   
/* ==========================================================================
   PENGATURAN LEBAR KOLOM REKAP BEBAN (VERSI PALING KUAT)
   ========================================================================== */
   
.prodi-frontend-wrapper .rekap-beban-table {
    table-layout: fixed !important;
    width: 100%; 
}

/* Target spesifik untuk tabel rekap (Total 8 Kolom) */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(1) { width: 5% !important; }   /* No. */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(2) { width: 25% !important; }  /* Nama Dosen (Disesuaikan) */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(3) { width: 12% !important; }  /* Beban Tugas Tambahan */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(4) { width: 12% !important; }  /* Beban Mengajar */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(5) { width: 18% !important; }  /* Bar Beban */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(6) { width: 10% !important; }  /* Total Beban (SKS) */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(7) { width: 10% !important; }  /* BARU: Total Mata Kuliah */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(8) { width: 8% !important; }   /* Total Kelas (Disesuaikan) */

/*
 * File: assets/css/style.css
 * Styling Lengkap dan Final untuk CRUD Prodi Poltrada
 */

/* ==========================================================================
   Wrapper & Tombol Utama
   ========================================================================== */

.prodi-crud-wrapper {
    margin-top: 20px;
    width: 100%;
}

.prodi-crud-wrapper .page-title-action {
    display: inline-block;
    background-color: #090999!important;
    color: white;
    padding: 8px 20px;       /* Padding disesuaikan */
    font-size: 13px;         /* Font disamakan dengan tombol utama */
    font-weight: bold;       /* Font disamakan dengan tombol utama */
    border-radius: 50px!important;     /* <===== PERUBAHAN UTAMA: Diubah menjadi pil */
    text-decoration: none;
    transition: all 0.2s;
}

.prodi-crud-wrapper .page-title-action:hover {
    background-color: #06066e!important; /* Warna biru lebih gelap */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.prodi-crud-wrapper .wp-list-table th.text-center,
.prodi-crud-wrapper .wp-list-table td.text-center {
    text-align: center !important;
}



/* ==========================================================================
   Tabel Data
   ========================================================================== */

.prodi-crud-wrapper .wp-list-table {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: none;
}


.prodi-crud-wrapper .wp-list-table thead th {
    background: transparent !important;
    color: white !important;
    border-color: transparent !important;
}

/* Baris dan Sel Tabel */
.prodi-crud-wrapper .wp-list-table td {
    padding: 5px 3px;/*ats-bawah, kiri-kanan*/
    vertical-align: middle;
}
.prodi-crud-wrapper .wp-list-table tbody tr:last-child td {
    border-bottom: none;
}

/* Tombol Aksi di Tabel (Edit & Hapus) */
.prodi-crud-wrapper .wp-list-table .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.prodi-crud-wrapper .button-danger {
    background: #d63638 !important; border-color: #b82f31 !important; color: white !important;
}
.prodi-crud-wrapper .button-danger:hover {
    background: #b82f31 !important; border-color: #b82f31 !important;
}


/* ==========================================================================
   Pengaturan Lebar Kolom Tabel
   ========================================================================== */

/* Anda bisa mengubah nilai 'width' (persen) atau 'min-width' (piksel) 
   di bawah ini sesuai kebutuhan. */

/* Kolom ke-1: Nama Dosen */
.prodi-crud-wrapper .wp-list-table th:nth-child(1),
.prodi-crud-wrapper .wp-list-table td:nth-child(1) {
    width: 15%;
}

/* Kolom ke-2: Tempat/Tgl Lahir */
.prodi-crud-wrapper .wp-list-table th:nth-child(2),
.prodi-crud-wrapper .wp-list-table td:nth-child(2) {
    width: 15%;
}

/* Kolom ke-3: NIP */
.prodi-crud-wrapper .wp-list-table th:nth-child(3),
.prodi-crud-wrapper .wp-list-table td:nth-child(3) {
    width: 12%;
}

/* Kolom ke-4: NIDN */
.prodi-crud-wrapper .wp-list-table th:nth-child(4),
.prodi-crud-wrapper .wp-list-table td:nth-child(4) {
    width: 8%;
}

/* Kolom ke-5: Jabatan Akademik */
.prodi-crud-wrapper .wp-list-table th:nth-child(5),
.prodi-crud-wrapper .wp-list-table td:nth-child(5) {
    width: 8%;
}

/* Kolom ke-6: Rumpun Ilmu */
.prodi-crud-wrapper .wp-list-table th:nth-child(6),
.prodi-crud-wrapper .wp-list-table td:nth-child(6) {
    width: 10%;
}

/* Kolom ke-7: Ekspertise */
.prodi-crud-wrapper .wp-list-table th:nth-child(7),
.prodi-crud-wrapper .wp-list-table td:nth-child(7) {
    min-width: 200px;
}

/* Kolom ke-8: Kompetensi */
.prodi-crud-wrapper .wp-list-table th:nth-child(8),
.prodi-crud-wrapper .wp-list-table td:nth-child(8) {
    min-width: 200px;
}

/* Kolom ke-9: Aksi */
.prodi-crud-wrapper .wp-list-table th:nth-child(9),
.prodi-crud-wrapper .wp-list-table td:nth-child(9) {
    width: 12%;
}

/* ==========================================================================
   Form (Container, Layout, Input, Tombol)
   ========================================================================== */

/* Container Form Modern (Card Style) */
.prodi-crud-wrapper form.prodi-main-form {
    background: #ffffff;
    padding: 35px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 40px auto;
    border: 1px solid #e9e9e9;
}

/* Layout Form Satu Kolom Modern */
.prodi-crud-wrapper .form-table tr { display: block; margin-bottom: 25px; }
.prodi-crud-wrapper .form-table th,
.prodi-crud-wrapper .form-table td { display: block; padding: 0; width: 100%; }
.prodi-crud-wrapper .form-table th { padding-bottom: 8px; font-weight: 600; }
.prodi-crud-wrapper .prodi-required { color: red; margin-left: 2px; }

/* Input Form Modern */
.prodi-crud-wrapper .form-table input[type="text"],
.prodi-crud-wrapper .form-table input[type="date"],
.prodi-crud-wrapper .form-table textarea {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 15px;
    width: 100%;
    box-sizing: border-box;
}
.prodi-crud-wrapper .form-table input[type="text"]:focus,
.prodi-crud-wrapper .form-table input[type="date"]:focus,
.prodi-crud-wrapper .form-table textarea:focus {
    background-color: #fff;
    border-color: #090999;
    box-shadow: 0 0 0 1px #090999;
}

/* Menghilangkan bayangan abu-abu dari autofill browser */
.prodi-crud-wrapper .form-table input:-webkit-autofill,
.prodi-crud-wrapper .form-table input:-webkit-autofill:hover,
.prodi-crud-wrapper .form-table input:-webkit-autofill:focus,
.prodi-crud-wrapper .form-table input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f7f7f7 inset !important;
    box-shadow: 0 0 0 30px #f7f7f7 inset !important;
}

/* ==========================================================================
   Gaya Tombol Form (Simpan & Batal)
   ========================================================================== */

/* Gaya untuk Tombol Utama (Simpan Data/Statistik) */
.prodi-crud-wrapper .submit .button-primary {
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 25px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: auto !important;
    line-height: normal !important;
    text-shadow: none !important;
    transition: all 0.2s;
}

.prodi-crud-wrapper .submit .button-primary:hover {
    background-color: #06066e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(9,9,153,0.2);
}



/* ==========================================================================
   Perbaikan Khusus Frontend
   ========================================================================== */

/* Menghilangkan background/style dari tema di area shortcode */
.prodi-frontend-wrapper {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mengatur judul di frontend agar mirip backend */
.prodi-frontend-wrapper .prodi-page-title {
    font-size: 16px;
    font-weight: 300px;
    margin: 0 0 20px 0;
    padding: 9px 0 4px;
    line-height: 29px;
}

/* ==========================================================================
   Perbaikan Khusus Frontend
   ========================================================================== */
.prodi-frontend-wrapper { background: none !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
.prodi-frontend-wrapper .prodi-page-title { font-size: 23px; font-weight: 400; margin: 0 0 20px 0; padding: 9px 0 4px; line-height: 29px; }

/* --- BARU: Kartu Notifikasi Modern --- */
.prodi-notice {
    padding: 12px 20px;
    margin-bottom: 25px;
    border-left: 5px solid #4CAF50;
    background-color: #f0fdf4;
    color: #166534;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.prodi-notice p {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 12px;
}

/* --- GAYA TOMBOL MODERN UMUM (EDIT, HAPUS, FETCH) --- */
.prodi-crud-wrapper .button.button-edit,
.prodi-crud-wrapper .button.button-danger,
.prodi-crud-wrapper .button.button-fetch,
.prodi-crud-wrapper .remove-repeater-row {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 5px;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.prodi-crud-wrapper .button.button-edit {
    background-color: #271195;
    border-color: #071b6a;
    color: #edece5;
}

.prodi-crud-wrapper .button.button-edit:hover {
    background-color: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b;
    transform: translateY(-1px);
}

.prodi-crud-wrapper .button.button-danger {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    text-shadow: none;
}

.prodi-crud-wrapper .button.button-danger:hover {
    background: #fecaca !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    transform: translateY(-1px);
}

/* Penyesuaian tata letak header halaman frontend */
.prodi-page-header {
    display: flex;
    justify-content: space-between; /* Mendorong item ke ujung kiri dan kanan */
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

/* --- PERBAIKAN: Lebar Kartu Notifikasi --- */
.prodi-frontend-wrapper .prodi-notice {
    max-width: 700px;
    margin-left: 0;
    margin-right: auto;
}


/* ==========================================================================
   Pengaturan Lebar Kolom Tabel
   ========================================================================== */


/* Kolom ke-1: Nama Dosen */
.prodi-crud-wrapper .wp-list-table th:nth-child(1),
.prodi-crud-wrapper .wp-list-table td:nth-child(1) {
    min-width: 250px;
}

/* Kolom ke-2: Tempat/Tgl Lahir */
.prodi-crud-wrapper .wp-list-table th:nth-child(2),
.prodi-crud-wrapper .wp-list-table td:nth-child(2) {
    width: 15%;
}

/* Kolom ke-3: NIP */
.prodi-crud-wrapper .wp-list-table th:nth-child(3),
.prodi-crud-wrapper .wp-list-table td:nth-child(3) {
    width: 12%;
}

/* Kolom ke-4: NIDN */
.prodi-crud-wrapper .wp-list-table th:nth-child(4),
.prodi-crud-wrapper .wp-list-table td:nth-child(4) {
    width: 8%;
}

/* Kolom ke-5: Jabatan Akademik */
.prodi-crud-wrapper .wp-list-table th:nth-child(5),
.prodi-crud-wrapper .wp-list-table td:nth-child(5) {
    width: 10%;
}

/* Kolom ke-6: Rumpun Ilmu */
.prodi-crud-wrapper .wp-list-table th:nth-child(6),
.prodi-crud-wrapper .wp-list-table td:nth-child(6) {
    width: 10%;
}

/* Kolom ke-7: Ekspertise */
.prodi-crud-wrapper .wp-list-table th:nth-child(7),
.prodi-crud-wrapper .wp-list-table td:nth-child(7) {
    /* Untuk kolom dengan teks panjang, lebih baik menggunakan min-width */
    min-width: 150px;
}

/* Kolom ke-8: Kompetensi */
.prodi-crud-wrapper .wp-list-table th:nth-child(8),
.prodi-crud-wrapper .wp-list-table td:nth-child(8) {
    min-width: 200px;
}

/* Kolom ke-9: Aksi */
.prodi-crud-wrapper .wp-list-table th:nth-child(9),
.prodi-crud-wrapper .wp-list-table td:nth-child(9) {
    width: 12%;
}

/* ==========================================================================
   Gaya Header Halaman (Judul, Cari, Tombol)
   ========================================================================== */

.prodi-frontend-wrapper .prodi-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef0f3;
}

/* Wadah utama untuk mensejajarkan judul dan aksi */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-page-header{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
    background: none; /* Memastikan tidak ada background */
    border: none; /* Memastikan tidak ada border */
    box-shadow: none; /* Memastikan tidak ada bayangan */
}

.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara search dan tombol */
}

/* Form pencarian itu sendiri, dipastikan tidak ada style card */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-form {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* Kotak input pencarian */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-box {
    position: relative;
}

.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-box input[type="search"]{
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 8px 15px 8px 40px;
    min-width: 300px;
    transition: all 0.3s;
    font-size: 14px;
}

.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-search-box input[type="search"]:focus {
    border-color: #090999;
    box-shadow: 0 0 0 1px #090999;
    background-color: #fff;
}

/* Ikon search di dalam input */
.prodi-search-box::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 S0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: 0.8;
}

/* Gaya tombol 'x' (clear) bawaan browser */
.prodi-search-box input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' class='bi bi-x-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E");
    transition: all 0.2s;
}

.prodi-search-box input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Gaya Tampilan Tab Modern (Folder Style)
   ========================================================================== */

/* Wadah utama untuk navigasi tab */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tabs{
    display: flex;
    border-bottom: 1px solid #e2e8f0; /* Garis dasar pemisah */
    margin-bottom: 0; /* Dihapus agar tab aktif bisa menempel */
}

/* Tautan tab individual */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tab-link {
    display: flex; /* Agar ikon dan teks sejajar */
    align-items: center;
    gap: 8px; /* Jarak antara ikon dan teks */
    padding: 12px 20px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    color: #64748b; /* Warna untuk tab tidak aktif */
    background-color: #f1f5f9; /* Latar abu-abu untuk tab tidak aktif */
    border: 1px solid #e2e8f0;
    border-bottom: none; /* Hilangkan border bawah */
    border-radius: 8px 8px 0 0; /* Sudut membulat hanya di atas */
    margin-right: 5px;
    margin-bottom: -1px; /* Trik agar menempel di atas garis */
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* Gaya untuk tab yang aktif */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tab-link.active{
    background-color: #ffffff; /* Latar putih, menyatu dengan card konten */
    color: #090999;
    font-weight: 600;
    border-bottom: 1px solid #ffffff; /* Menutupi garis container di bawahnya */
    z-index: 2; /* Memastikan tab aktif di atas elemen lain */
}

/* Gaya untuk card konten di bawah tab */
.prodi-frontend-wrapper .prodi-content-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 0 12px 12px 12px; /* Sudut membulat, kecuali pojok kiri atas */
    border: 1px solid #e2e8f0;
    border-top: none; /* Hilangkan border atas agar menyatu dengan tab */
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    width: 100%;
    box-sizing: border-box;
}


/* Efek saat mouse di atas tab yang tidak aktif */
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-tab-link:not(.active):hover  {
    background-color: #e2e8f0;
    color: #1e293b;
}

/* Menambahkan ikon menggunakan pseudo-element ::before */
.prodi-tab-link[href*="tab="]::before,
.prodi-tab-link:not([href*="tab="])::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor; /* Warna ikon mengikuti warna teks */
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* Ikon untuk Tab Data Dosen (tab default, tidak punya parameter ?tab=) */
.prodi-tab-link:not([href*="tab="])::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Statistik Dosen */
.prodi-tab-link[href*="tab=statistik"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   IKON UNTUK TAB HALAMAN MASTER KURIKULUM
   ========================================================================== */

/* Ikon untuk Tab Kurikulum (Bank Data) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=kurikulum"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Mata Kuliah (Per Semester) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=matakuliah"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-7v6h5V5h-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-7v6h5V5h-5z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Pengampu */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=pengampu"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   Gaya Kartu Konten Tab
   ========================================================================== */

.prodi-content-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eef0f3;
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    width: 100%;
    box-sizing: border-box;
}

/* Menyesuaikan jarak header di dalam kartu */
.prodi-content-card .prodi-page-header {
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef0f3;
}

/* Membuat tabel lebar bisa di-scroll horizontal */
.prodi-table-wrapper {
    overflow-x: auto;
}
/* Styling untuk link di dalam tabel */
.prodi-link {
    display: inline-block;
    margin: 2px;
    padding: 2px 6px;
    background-color: #f1f5f9;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
}
.prodi-link:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   Pengaturan Lebar & Wrapping Kolom Tabel Statistik (Diperkuat)
   ========================================================================== */

/* Aturan wrapping umum yang kuat untuk semua sel di tabel ini */
.statistik-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Kolom ke-1: Nama Dosen */
.statistik-table th:nth-child(1),
.statistik-table td:nth-child(1) {
    width: 20%;
}

/* Kolom ke-2 & 3: Score Sinta & Scholar */
.statistik-table th:nth-child(2),
.statistik-table td:nth-child(2),
.statistik-table th:nth-child(3),
.statistik-table td:nth-child(3) {
    width: 8%;
    text-align: center;
}

/* Kolom ke-4 & 5: ID Sinta & Scopus */
.statistik-table th:nth-child(4),
.statistik-table td:nth-child(4),
.statistik-table th:nth-child(5),
.statistik-table td:nth-child(5) {
    width: 10%;
    /* Batas lebar maksimum agar tidak melebar meski teks panjang */
    max-width: 150px; 
}

/* Kolom ke-6: Link Eksternal */
.statistik-table th:nth-child(6),
.statistik-table td:nth-child(6) {
    width: 10%;
}

/* Kolom ke-7, 8, 9, 10: Nilai, Cakupan, Kompetensi, Beban */
.statistik-table th:nth-child(7),
.statistik-table td:nth-child(7),
.statistik-table th:nth-child(8),
.statistik-table td:nth-child(8),
.statistik-table th:nth-child(9),
.statistik-table td:nth-child(9),
.statistik-table th:nth-child(10),
.statistik-table td:nth-child(10) {
    width: 8%;
    text-align: center;
}

/* Kolom ke-11: Aksi */
.statistik-table th:nth-child(11),
.statistik-table td:nth-child(11) {
    min-width: 140px;
    width: 12%;
}

/* ==========================================================================
   Memaksa Teks Panjang Turun (Text Wrapping) di Tabel
   ========================================================================== */

.prodi-crud-wrapper .wp-list-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important; /* Versi modern dari word-wrap */
}



/* ==========================================================================
   Perbaikan Text Wrapping untuk Tabel Statistik
   ========================================================================== */

/* Target spesifik untuk sel di dalam tabel statistik */
.statistik-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ==========================================================================
   Gaya Notifikasi Error
   ========================================================================== */

/* Menambahkan gaya khusus untuk notifikasi error (merah) */
.prodi-notice.prodi-notice-error {
    background-color: #fef2f2; /* Latar belakang merah sangat terang */
    border-left-color: #ef4444; /* Garis kiri merah */
    color: #b91c1c;             /* Teks merah tua */
}

/* ==========================================================================
   Gaya Tombol Ambil Data (Fetch)
   ========================================================================== */

/* Gaya untuk tombol "Ambil Data" dengan nuansa hijau */
.prodi-crud-wrapper .wp-list-table .button.button-fetch {
    background-color: #f0fdf4; /* Latar hijau sangat terang */
    border-color: #bbf7d0;     /* Border hijau muda */
    color: #166534;            /* Teks hijau tua */
    text-shadow: none;
}

.prodi-crud-wrapper .wp-list-table .button.button-fetch:hover {
    background-color: #dcfce7; /* Latar sedikit lebih gelap saat hover */
    border-color: #86efac;     /* Border sedikit lebih gelap saat hover */
    color: #14532d;            /* Teks sedikit lebih gelap saat hover */
    transform: translateY(-1px);
}

/* ==========================================================================
   GAYA UNTUK REPEATER FIELD TUGAS TAMBAHAN
   ========================================================================== */

#tugas-tambahan-repeater .repeater-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#tugas-tambahan-repeater .repeater-select {
    flex-grow: 1;
}

#tugas-tambahan-repeater .remove-repeater-row {
    flex-shrink: 0;
    font-size: 10px !important; /* <-- Perkecil tulisan */
    padding: 3px 10px !important; /* Samakan dengan tombol edit */
}

#add-repeater-row {
    margin-bottom: 8px;
    font-weight: 500 !important;
    font-size: 12px !important; /* <-- Perkecil tulisan */
    padding: 4px 16px !important;  /* <-- Perkecil ukuran tombol */
}

/* ==========================================================================
   GAYA UNTUK TAB PENGAMPU (VERSI BARU)
   ========================================================================== */

.prodi-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Spasi antara search box dan tombol */
}

.pengampu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); /* Lebar minimum diperbesar */
    gap: 25px;
    margin-top: 20px;
}

.pengampu-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Sedikit bayangan untuk kedalaman */
    overflow: hidden; /* Penting untuk radius border */
    display: flex; /* Menggunakan flexbox untuk header dan body */
    flex-direction: column;
}

.pengampu-card .card-header {
    background-color: #f8fafc; /* Latar belakang header lebih terang */
    padding: 20px 25px;
    border-bottom: 1px solid #e2e8f0;
}

.pengampu-mk-title {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.15rem; /* Ukuran teks judul mata kuliah */
    font-weight: 600;
    color: #1e293b;
}

.pengampu-mk-code {
    display: inline-block;
    font-size: 0.8rem; /* Ukuran teks kode mata kuliah */
    color: #64748b;
    background-color: #eef2ff; /* Warna latar belakang pill kode */
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
}

.pengampu-card .card-body {
    padding: 20px 25px;
    flex-grow: 1; /* Agar body memenuhi sisa ruang */
}

.pengampu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antar item dosen */
}

.pengampu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #f8fafc; /* Dihapus untuk tampilan yang lebih bersih */
    padding: 0; /* Dihapus padding dari item */
    border-radius: 8px;
    border: 1px solid #f1f5f9; /* Border tipis untuk item */
    padding: 12px 15px; /* Padding kembali ke item */
}

.pengampu-item-none {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 20px; /* Padding untuk pesan "tidak ada rekomendasi" */
}

.pengampu-dosen-info {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara inisial dan nama */
}

.pengampu-dosen-inisial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ukuran inisial lebih besar */
    height: 40px;
    border-radius: 50%;
    background-color: #e0e7ff; /* Warna inisial yang lebih menonjol */
    color: #3f51b5; /* Warna teks inisial */
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dosen-text-details {
    display: flex;
    flex-direction: column;
}

.pengampu-dosen-nama {
    font-weight: 500;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.3; /* Menyesuaikan tinggi baris */
}

/* Jika ada gelar atau info tambahan */
.pengampu-dosen-gelar {
    font-size: 0.8rem;
    color: #64748b;
}

.pengampu-skor {
    font-weight: bold;
    font-size: 0.9rem; /* Ukuran tulisan skor diperkecil */
    color: #3f51b5;
    background-color: #eef2ff;
    padding: 5px 12px; /* Padding (bantalan) diperkecil */
    border-radius: 50px;
    min-width: 60px; /* Lebar minimum disesuaikan */
    text-align: center;
}

/* ==========================================================================
   GAYA WARNA BERDASARKAN SKOR PENGAMPU
   ========================================================================== */

/* Skor 80 - 100 (Hijau) */
.pengampu-skor.skor-sangat-baik {
    background-color: #f0fdf4;
    color: #0aab48;
}

/* Skor 60 - 79 (Oranye Tua) */
.pengampu-skor.skor-baik {
    background-color: #fff7ed;
    color: #d37918;
}

/* Skor 25 - 59 (Merah) */
.pengampu-skor.skor-cukup {
    background-color: #fef2f2;
    color: #e32525;
}

/* Skor 0 - 24 (Abu-abu) */
.pengampu-skor.skor-rendah {
    background-color: #f1f5f9;
    color: #6f7a89;
}


/* ==========================================================================
   GAYA UNTUK TAB MATA KULIAH PER SEMESTER
   ========================================================================== */

.semester-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background-color: #f8fafc;
    border-bottom: 1px solid #eef0f3;
}

.semester-header h3 {
    margin: 0;
    font-size: 16px;
    color: #334155;
}

.semester-table tfoot td {
    background-color: #f8fafc;
    font-size: 14px;
}

/* Pewarnaan Baris Mata Kuliah */
.semester-table-body tr.mk-wajib { background-color: #d2f0db; } /* Hijau Muda */
.semester-table-body tr.mk-dasar { background-color: #cbdcf2; } /* Biru Muda */
.semester-table-body tr.mk-keahlian { background-color: #f2eec7; } /* Kuning Muda */
.semester-table-body tr.mk-pendukung { background-color: #f3cbcb; } /* Merah Muda */
.semester-table-body tr.mk-berkarya { background-color: #cdc6f2; } /* Ungu Muda */

/* Efek hover untuk semua baris berwarna */
.semester-table-body tr[class*="mk-"]:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   GAYA UNTUK MODAL (POPUP) TAMBAH MK
   ========================================================================== */

.prodi-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prodi-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.prodi-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.prodi-modal-header h3 { margin: 0; font-size: 20px; }

/* GANTI ATURAN LAMA DENGAN VERSI BARU INI */

.prodi-modal-header .close-modal {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 10% !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 0 0 1px 0 !important;
    
    /* Properti Kunci Tambahan */
    flex-shrink: 0;     /* Mencegah tombol 'gepeng' jika judul terlalu panjang */
    align-self: center; /* Mencegah tombol 'tertarik' secara vertikal */
}

.prodi-modal-header .close-modal:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}


.prodi-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-mk-list label {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}
.modal-mk-list label:hover {
    background-color: #f8fafc;
}
.modal-mk-list label input {
    margin-right: 10px;
}

.prodi-modal-footer {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #e2e8f0;
}


/* Pewarnaan Baris Mata Kuliah */
.semester-table-body tr.mk-wajib { background-color: #f0fdf4; } /* Hijau Muda */
.semester-table-body tr.mk-dasar { background-color: #eff6ff; } /* Biru Muda */
.semester-table-body tr.mk-keahlian { background-color: #fefce8; } /* Kuning Muda */
.semester-table-body tr.mk-pendukung { background-color: #fef2f2; } /* Merah Muda */
.semester-table-body tr.mk-berkarya { background-color: #f5f3ff; } /* Ungu Muda */

/* Efek hover untuk semua baris berwarna */
.semester-table-body tr[class*="mk-"]:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   PENYESUAIAN GAYA TOMBOL "TAMBAH MK"
   ========================================================================== */

/* Target spesifik untuk tombol Tambah MK di header semester */
.semester-header .add-mk-button {
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important; /* Paksa bentuk pil */
    padding: 8px 20px !important;   /* Sesuaikan padding agar pas */
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: normal !important; /* Hapus tinggi baris berlebih dari gaya standar */
    height: auto !important;        /* Hapus tinggi tetap dari gaya standar */
    text-shadow: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.semester-header .add-mk-button:hover {
    background-color: #06066e !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   MEMPOSISIKAN TEKS "BELUM ADA MATA KULIAH"
   ========================================================================== */

/* Target sel di dalam baris dengan kelas .no-items */
.semester-table .no-items td {
    text-align: center !important;
    padding: 30px 0 !important; /* (Opsional) Menambah ruang atas-bawah agar lebih lega */
    color: #94a3b8;             /* (Opsional) Membuat teks sedikit lebih pudar */
}

/* Target semua sel di dalam tfoot (baris Jumlah) */
.semester-table tfoot td {
    font-weight: bold; /* (Opsional) Menebalkan tulisan agar lebih menonjol */
    color: #192A70; /* Memberi warna biru sesuai permintaan */
    font-size: 14px !important;
}

/* ==========================================================================

/* ==========================================================================
   GAYA UNTUK CARD SUMMARY TOTAL KURIKULUM
   ========================================================================== */

.summary-total-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #090999;
    width: 25%; /* 1/4 dari lebar card tabel */
    float: left;
    margin-right: 30px;
}

.summary-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
}

.summary-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f8fafc;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.summary-value.highlight {
    color: #090999;
    font-weight: 700;
}

.summary-value.percentage {
    color: #059669;
    font-weight: 700;
}

/* Responsive design untuk layar kecil */
@media (max-width: 1200px) {
    .summary-total-card {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   GAYA UNTUK CARD SUMMARY HORIZONTAL
   ========================================================================== */

.summary-total-card-horizontal {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #090999;
    width: 100%; /* Memanjang full width */
}

.summary-title-horizontal {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
}

.summary-grid-horizontal {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.summary-row-horizontal {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.summary-item-horizontal {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    text-align: center;
    min-height: 80px;
    transition: all 0.3s ease;
}

.summary-item-horizontal:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-label-horizontal {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 8px;
}

.summary-value-horizontal {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
}

.summary-value-horizontal.highlight {
    color: #090999;
    font-size: 18px;
}

.summary-value-horizontal.percentage {
    color: #059669;
    font-size: 18px;
}

/* Responsive design untuk layar kecil */
@media (max-width: 1200px) {
    .summary-row-horizontal {
        flex-wrap: wrap;
    }
    
    .summary-item-horizontal {
        flex: 1 1 calc(50% - 15px);
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .summary-item-horizontal {
        flex: 1 1 100%;
    }
    
    .summary-row-horizontal {
        gap: 10px;
    }
}

/* ==========================================================================
   GAYA UNTUK HALAMAN PLOT PERKULIAHAN
   ========================================================================== */
.plot-filter-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.dosen-pengampu-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* ==========================================================================
   GAYA TAMBAHAN UNTUK MODAL PLOT PENGAMPU
   ========================================================================== */
.modal-section-title {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}
.modal-section-title:first-child {
    margin-top: 0;
}
.modal-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* TAMBAHKAN DI AKHIR FILE CSS */

/* ==========================================================================
   GAYA UNTUK ELEMEN <dialog>
   ========================================================================== */

dialog#plot-pengampu-modal {
    padding: 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    max-width: 600px;
    width: 90%;
}

/* Latar belakang gelap di belakang popup */
dialog#plot-pengampu-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   PENGATURAN LEBAR KOLOM PLOT SETTING (VERSI PALING KUAT)
   ========================================================================== */

/* Pastikan tabel menggunakan layout 'fixed' */
.plot-setting-table {
    table-layout: fixed !important;
}

/* Atur lebar setiap kolom dengan selector yang sangat spesifik */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(1) { width: 5% !important; }   /* No. */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(2) { width: 7% !important; }  /* Kode */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(3) { width: 28% !important; }/* Mk */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(4) { width: 6% !important; } /* sks */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(5) { width: 35% !important; }  /* Dosen Pengampu */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(6) { width: 9% !important; }  /* Kode Pengampu */
.prodi-frontend-wrapper .plot-setting-table th:nth-child(7) { width: 10% !important; }  /* Aksi */

/* ==========================================================================
   PENGATURAN PADDING SEL TABEL PLOT SETTING
   ========================================================================== */

.plot-setting-table td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    vertical-align: middle !important;
    text-align: left !important;
}


.plot-setting-table th {
    text-align: center !important; 
}

/* ==========================================================================
   GAYA UNTUK BADGE KODE PENGAMPU
   ========================================================================== */

.kode-pengampu-badge {
    display: inline-block;
    background-color: #090999;
    color: #fff;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    min-width: 90px;      /* <-- TAMBAHKAN BARIS INI */
    text-align: center;   /* <-- TAMBAHKAN BARIS INI */
}

/* ==========================================================================
   GAYA TOMBOL "SIMPAN" DI DALAM MODAL
   ========================================================================== */

/* Target spesifik untuk tombol Simpan di dalam modal plot pengampu */
#plot-pengampu-modal .prodi-modal-footer .button-primary {
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 25px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: auto !important;
    line-height: normal !important;
    text-shadow: none !important;
    transition: all 0.2s ease;
}

#plot-pengampu-modal .prodi-modal-footer .button-primary:hover {
    background-color: #06066e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(9, 9, 153, 0.2);
}

/* ==========================================================================
   PENYESUAIAN GAYA FONT DI DALAM MODAL PLOT PENGAMPU
   ========================================================================== */

/* 1. Perbesar tulisan "Dosen Rekomendasi" dan ikon bintangnya */
#plot-pengampu-modal .modal-section-title {
    font-size: 16px; /* Naikkan dari 14px menjadi 16px */
    align-items: center;
    display: flex;
    gap: 8px; /* Memberi jarak antara bintang dan teks */
}

/* 2. Perkecil font nama dosen di dalam daftar pilihan */
#plot-pengampu-modal .modal-mk-list label {
    font-size: 14px; /* Perkecil ukuran font keseluruhan */
}

#plot-pengampu-modal .modal-mk-list label strong {
    font-size: 13px; /* Sedikit memperkecil inisial agar proporsional */
}

/* ==========================================================================
   GAYA UNTUK PESAN "TIDAK ADA REKOMENDASI" DI MODAL
   ========================================================================== */

/* Target paragraf di dalam daftar rekomendasi */
#rekomendasi-dosen-list p {
    font-style: italic;     /* Teks miring */
    color: #64748b;         /* Warna abu-abu tua */
    font-size: 13px;         /* Ukuran font diperkecil */
    text-align: center;      /* Posisikan di tengah */
    padding: 15px 0;         /* Beri sedikit ruang vertikal */
    margin: 0;
}


/* ==========================================================================
   GAYA UNTUK BAR BEBAN DOSEN
   ========================================================================== */
/* ==========================================================================
   GAYA UNTUK BAR BEBAN DOSEN (VERSI GRADASI DINAMIS)
   ========================================================================== */

.beban-bar-container {
    width: 100%;
    background-color: #e2e8f0;
    border-radius: 50px;
    height: 12px;
    overflow: hidden;
}

.beban-bar {
    height: 100%;
    border-radius: 50px;
    transition: width 0.5s ease;
}

/* --- Gradasi Warna Bertingkat --- */

/* Beban Rendah (0-50%): Hijau solid */
.beban-bar.beban-aman {
    background: #22c55e;
}

/* Beban Sedang (51-74%): Gradien Hijau -> Kuning */
.beban-bar.beban-sedang {
    background: linear-gradient(to right, #22c55e, #facc15);
}

/* Beban Tinggi (75-89%): Gradien Hijau -> Kuning -> Merah */
.beban-bar.beban-tinggi {
    background: linear-gradient(to right, #22c55e, #facc15, #ef4444);
}

/* Beban Kritis (90-100%): Gradien Hijau -> Kuning -> Merah Tua */
.beban-bar.beban-kritis {
    background: linear-gradient(to right, #22c55e, #facc15, #b91c1c);
}

/* ==========================================================================
   PENGATURAN LEBAR KOLOM REKAP BEBAN (VERSI PALING KUAT)
   ========================================================================== */
   
.prodi-frontend-wrapper .rekap-beban-table {
    table-layout: fixed !important;
    width: 100%; 
}

/* Target spesifik untuk tabel rekap */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(1) { width: 8% !important; }   /* No. */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(2) { width: 33% !important; }  /* Nama Dosen */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(3) { width: 15% !important; }  /* Beban Tugas Tambahan */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(4) { width: 15% !important; }  /* Beban Mengajar */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(5) { width: 20% !important; }  /* Bar Beban */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(6) { width: 15% !important; }  /* Total Beban */
.prodi-frontend-wrapper .rekap-beban-table th:nth-child(7) { width: 13% !important; }  /* Total Kelas (Ampu MK) */


/* ==========================================================================
   GAYA UNTUK TABEL MATRIKS JADWAL
   ========================================================================== */
.jadwal-matrix-wrapper {
    overflow-x: auto; /* Memungkinkan tabel di-scroll ke samping */
}
.jadwal-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 1800px; /* Lebar minimum agar tidak terlalu sempit */
}
.jadwal-matrix-table th, .jadwal-matrix-table td {
    border: 1px solid #e2e8f0;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}
.jadwal-matrix-table thead th {
    background-color: #f1f5f9;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 2;
}
.jadwal-matrix-table tbody th {
    background-color: #f8fafc;
    font-weight: bold;
    position: sticky;
    left: 0;
    z-index: 1;
}
.jadwal-matrix-table select {
    width: 100%;
    border: none;
    background: transparent;
}

/* ==========================================================================
   GAYA UNTUK DETEKSI BENTROK JADWAL
   ========================================================================== */

/* Gaya untuk sel yang bentrok sebagian (tim vs tim/individu) */
.jadwal-matrix-table td.cell-bentrok-sebagian {
    background-color: #fefce8 !important; /* Kuning Terang */
    border: 1px solid #facc15 !important;
}

/* Gaya untuk sel yang bentrok penuh (individu vs individu) */
.jadwal-matrix-table td.cell-bentrok-penuh {
    background-color: #fef2f2 !important; /* Merah Terang */
    border: 1px solid #fca5a5 !important;
}

/* ==========================================================================
   GAYA UNTUK TOMBOL AKSI IKON (PLOT SETTING)
   ========================================================================== */

/* Kontainer untuk mensejajarkan tombol */
.plot-actions-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Jarak antar tombol */
}

/* Gaya dasar untuk semua tombol ikon */
.prodi-icon-button {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 50% !important; /* Membuat tombol menjadi bulat */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Ukuran ikon SVG di dalam tombol */
.prodi-icon-button svg {
    width: 16px;
    height: 16px;
}

/* Warna spesifik untuk setiap tombol */
.prodi-icon-button.button-set {
    background-color: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}
.prodi-icon-button.button-duplicate {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}
.prodi-icon-button.button-delete {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}

/* Efek saat kursor di atas tombol */
.prodi-icon-button.button-set:hover {
    background-color: #4338ca !important;
    color: #fff !important;
}
.prodi-icon-button.button-duplicate:hover {
    background-color: #166534 !important;
    color: #fff !important;
}
.prodi-icon-button.button-delete:hover {
    background-color: #b91c1c !important;
    color: #fff !important;
}

/* Gaya untuk tombol 'Lepas' saat nonaktif */
.prodi-icon-button.button-delete:disabled {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed;
}

/* ==========================================================================
   IKON UNTUK TAB PLOT PERKULIAHAN
   ========================================================================== */

/* Ikon untuk Tab Rekap (Grafik Batang) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=rekap"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Setting (Roda Gigi) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=setting"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38 2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38 2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Input Jadwal (Grid/Tabel) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=input_jadwal"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
}

/* Ikon untuk Tab Jadwal Perkelas (Kalender) */
.prodi-crud-wrapper .prodi-tabs .prodi-tab-link[href*="tab=jadwal_perkelas"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   PENYESUAIAN GAYA TOMBOL CETAK JADWAL
   ========================================================================== */

/* Target spesifik untuk kedua tombol cetak di header */
.prodi-header-actions #print-jadwal-button,
.prodi-header-actions #print-all-jadwal-button {
    /* --- Pengaturan Dasar & Flex --- */
    display: inline-flex !important; /* Pastikan inline-flex */
    align-items: center;
    justify-content: center; /* Pusatkan konten (ikon & teks) */
    flex-shrink: 0;          /* Jangan biarkan tombol mengecil */
    flex-grow: 0;            /* Jangan biarkan tombol membesar/meregang */
    box-sizing: border-box;  /* Perhitungan padding & border yang benar */

    /* --- Warna & Tampilan --- */
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important; /* Bentuk pil */
    text-decoration: none !important;
    text-shadow: none !important;

    /* --- Ukuran (Kembali ke Aturan Awal yang Lebih Kecil) --- */
    padding: 8px 20px !important;   /* Padding Atas/Bawah | Kiri/Kanan */
    font-size: 13px !important;     /* Ukuran font */
    font-weight: bold !important;
    height: auto !important;        /* Tinggi otomatis sesuai konten & padding */
    line-height: normal !important; /* Tinggi baris normal */
    /* Hapus/Komentari jika ada width/max-width yang tidak diinginkan */
    /* width: auto; */
    /* max-width: none; */

    /* --- Interaksi --- */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Ukuran Ikon di dalam tombol */
.prodi-header-actions #print-jadwal-button svg,
.prodi-header-actions #print-all-jadwal-button svg {
    width: 1em; /* Ukuran ikon relatif terhadap font-size tombol */
    height: 1em;
    margin-right: 8px; /* Jarak ikon ke teks */
    fill: currentColor;
}

/* Efek hover untuk kedua tombol */
.prodi-header-actions #print-jadwal-button:hover,
.prodi-header-actions #print-all-jadwal-button:hover {
    background-color: #06066e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Pastikan container tidak memaksa tombol meregang */
.prodi-page-header .prodi-header-actions {
    /* Anda bisa tambahkan ini jika perlu, tapi coba tanpa ini dulu */
    /* justify-content: flex-end; */ /* Contoh: Merapatkan ke kanan */
}

/* ==========================================================================
   GAYA UNTUK HEADER UTAMA JADWAL PER KELAS
   ========================================================================== */

.jadwal-main-header {
    text-align: center;
    padding: 10px 0 0 0; /* <-- Jarak hanya di atas, 0 di bawah */
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    
}

.jadwal-main-header h4 {
    margin: 2px 0 !important;
    font-weight: bold;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.2 !important; /* <-- Tambahkan baris ini */
}

.jadwal-main-header h4:first-child {
    font-size: 16px;
}

.tahun-ajaran-input {
    border: none;
    border-bottom: 1px solid #94a3b8;
    background: transparent;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: #1e293b;
    width: 120px;
}

.jadwal-perkelas-title {
    background-color: #e1f7ea; /* hiaju muda  */
    color: #36423b;               /* Teks menjadi putih agar kontras */
    padding: 10px;              /* Padding agar lebih tebal */
    margin: 15px 0px 0 0!important;    /* margin atas/bawah */
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    display: block;             /* Penting: Membuatnya memenuhi lebar penuh */
    border-radius: 0;           /* Hapus sudut yang melengkung */
}

.jadwal-header-logo {
    background-color: transparent !important;
    position: absolute; /* Membuat logo "melayang" relatif terhadap header */
    left: 30px;         /* Jarak dari tepi kiri */
    top: 35%;           /* Posisikan 50% dari atas header */
    transform: translateY(-50%); /* Geser ke atas 50% dari TINGGI LOGO itu sendiri */
    height: 60px;       /* Atur tinggi logo (sesuaikan jika perlu) */
    width: auto;        /* Lebar akan mengikuti tinggi agar proporsional */
}


/* ==========================================================================
   GAYA UNTUK TABEL JADWAL PER KELAS (VERSI 5.0 - Final)
   ========================================================================== */
   
.jadwal-perkelas-table th,
.jadwal-perkelas-table td {
    padding: 6px;
    border: 1px solid #9fa3a7!important;
    text-align: center !important;
    vertical-align: middle !important;
}


.jadwal-perkelas-wrapper {
    margin-top: 0;
    border: 1px solid #e2e8f0;
    border-top: none; /* <-- Tambahkan ini agar tidak ada border ganda */
    border-radius: 0 0 8px 8px; /* Sesuaikan radius */
    overflow-x: auto;
    background: #fff;
    padding: 0; /* <-- Ubah padding menjadi 0 */
}

.jadwal-perkelas-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-top: 0!important;
    /*table-layout: fixed;*/

}


.jadwal-perkelas-wrapper .jadwal-perkelas-table {
    margin-bottom: 0; /* Pastikan tidak ada margin bawah pada tabel */
}

.jadwal-perkelas-table th,
.jadwal-perkelas-table td {
    border: 1px solid #e2e8f0;
    padding: 6px;
    vertical-align: middle;
}

/* Hilangkan border atas pada baris kedua setiap slot waktu */
.jadwal-perkelas-table tbody tr:nth-child(2n) td {
    border-top: none;
    padding-top: 4px;
}
/* Beri sedikit padding atas pada baris pertama */
.jadwal-perkelas-table tbody tr:nth-child(2n-1) td {
    padding-bottom: 4px;
}


.jadwal-perkelas-table thead th {
    background-color: #475569;
    color: white;
    font-size: 14px;
    padding: 10px 6px;
}

.jadwal-perkelas-table .jam-cell {
    background-color: #f8fafc;
    color: #000;
    font-weight: bold;
    font-size: 8px;
    vertical-align: middle;
}

/* Gaya untuk Sel Mata Kuliah */
.jadwal-perkelas-table .jadwal-cell-matakuliah {
    text-align: left;
    font-size: 10px;
    vertical-align: bottom; /* Rata bawah untuk baris MK */
}

/* Rata atas untuk baris Dosen */
.jadwal-perkelas-table tbody tr:nth-child(2n) .jadwal-cell-matakuliah {
    vertical-align: top;
    
}

/* Gaya untuk Nama Dosen */
.jadwal-nama-dosen {
    font-size: 9px;
    font-weight: 700!important;
    color: #475569;
    line-height: 1.2;
    
}

/* Mengatur Nama Mata Kuliah menjadi Kapital */
.jadwal-perkelas-table .jadwal-cell-matakuliah > div:not(.jadwal-nama-dosen) {
    text-transform: uppercase;
    font-weight: normal;
}


.jadwal-perkelas-table .jadwal-cell-kode {
    text-align: center;
    width: 3%;          /* Diperkecil dari 8% */
    color: #334155;
    font-size: 7px;    /* Font diperkecil */
    line-height: 1.4;   /* Menambah jarak antar baris kode */
    word-break: break-all; /* Memaksa teks panjang untuk patah */
}

.jadwal-perkelas-table .jadwal-nama-mk {
    text-transform: uppercase;
    font-size: 10px;
}


/* Mengatur warna baris pertama header menjadi biru muda */
.jadwal-perkelas-table thead tr:first-child th {
    background-color: #4b74e5; /* Kode warna untuk Biru Muda */
    color: #dfebed;           /* Warna teks diubah menjadi Biru Tua agar terbaca */
    font-size: 12px;      /* Ubah ukuran font di sini */
    font-weight: bold;  /* Ubah ketebalan (misal: 'normal') */
    padding: 6px;/*tinggi Baris*/
}

.jadwal-perkelas-table thead tr:last-child th {
    background-color: #dbeafe; /* <-- Kode warna untuk Biru Tua */
    font-size: 11px;
    color: #1e3a8a; 
    padding: 4px;/*tinggi Baris*/
}


/* ==========================================================================
   PERBAIKAN FINAL UNTUK WARNA SEL ISTIRAHAT
   ========================================================================== */

.jadwal-perkelas-table tr.slot-ganjil > td.istirahat-cell,
.jadwal-perkelas-table tr.slot-genap > td.istirahat-cell {
    background-color: #fefce8 !important; /* Warna Kuning Muda */
}

/* Aturan lama untuk teks (bisa dibiarkan atau digabung) */
.jadwal-perkelas-table .istirahat-cell {
    font-weight: bold;
    color: #64748b;
    font-size: 12px;
}


/* ==========================================================================
   GAYA ZEBRA UNTUK BARIS TABEL JADWAL PER KELAS
   ========================================================================== */

.jadwal-perkelas-table tr.slot-ganjil > td {
    background-color: #f7f9fa!important;/*(abu terang)*/
}

.jadwal-perkelas-table tr.slot-genap > td {
    background-color: #e8eaeb!important;/*(abu gelap)*/
}

/* Mengatur warna font untuk semua teks di dalam sel tbody */
.jadwal-perkelas-table tbody .jadwal-cell-kode,
.jadwal-perkelas-table tbody .jadwal-cell-matakuliah,
.jadwal-perkelas-table tbody .jadwal-nama-dosen {
    color: #000; /* Kode warna untuk hitam */
}


/* ==========================================================================
   GAYA UNTUK PENGATURAN & BLOK PENANDA TANGAN
   ========================================================================== */

.penandatangan-settings-card {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    gap: 20px;
}
.penandatangan-settings-card input[type="text"] {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    width: 250px;
}

.jadwal-perkelas-wrapper .jadwal-penandatangan-wrapper, 
.jadwal-perkelas-wrapper-print .jadwal-penandatangan-wrapper {
    width: 300px;
    margin-left: auto;
    text-align: center;
    font-size: 14px;
    padding: 15px 20px 20px 20px; /* Atas, Kanan, Bawah, Kiri */
    display: flex;
    flex-direction: column; /* Paksa semua anak elemen tersusun vertikal */
    align-items: center;   /* Pusatkan semua anak elemen secara horizontal */
}




.jadwal-penandatangan-wrapper p {
    margin: 0;
    line-height: 1;
}
.jadwal-penandatangan-wrapper .signature-space {
    height: 60px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    font-size: 12px;
}
.jadwal-penandatangan-wrapper .signature-name {
    font-weight: bold;
    text-decoration: underline!important;
}

#qrcode-container {
    width: 100px;
    height: 100px;
    margin: 10px auto; /* Posisikan di tengah */
}

#qrcode-container,
.qrcode-print {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
.signature-date {
    display: none !important;
    font-size: 11px;
    font-style: italic;
    color: #64748b;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}


/* ==========================================================================
   GAYA UNTUK TOMBOL IKON PERINGATAN (BARU)
   ========================================================================== */

.prodi-icon-button.button-warning {
    background-color: #fefce8 !important; /* Kuning sangat terang */
    color: #a16207 !important;           /* Teks/ikon kuning tua */
    border-color: #facc15 !important;    /* Border kuning */
}

.prodi-icon-button.button-warning:hover {
    background-color: #a16207 !important; /* Latar menjadi kuning tua saat hover */
    color: #ffffff !important;           /* Ikon menjadi putih */
}

/* ==========================================================================
   ATURAN HEADER TABEL FINAL DAN UNIVERSAL
   ========================================================================== */

/* 1. Aturan Dasar untuk SEMUA header tabel di dalam plugin */
/* [PERBAIKAN] Terapkan gradien ke THEAD, bukan TR atau TH */
.prodi-crud-wrapper .wp-list-table thead,
.prodi-peta-plot-page .peta-plot-table thead {
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
    border-collapse: collapse; /* Pastikan border menyatu */
}
/* [PERBAIKAN] Buat TR (baris) transparan */
.prodi-crud-wrapper .wp-list-table thead tr,
.prodi-peta-plot-page .peta-plot-table thead tr {
    background: transparent !important;
    border: none !important;
}

.prodi-crud-wrapper .wp-list-table thead th {
    background: transparent !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2) !important; /* Garis pemisah tipis */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* <-- !important DIHAPUS */
    border-top: none !important;
}
/* [PERBAIKAN] Hapus border-bottom dari header peta-plot agar tidak duplikat */

.prodi-crud-wrapper .wp-list-table thead tr:first-child th,
.prodi-peta-plot-page .peta-plot-table thead tr:first-child th {
     border-top: none !important;
}
/* [PERBAIKAN] Hapus border bawah untuk baris terakhir (agar rapi) */
.prodi-crud-wrapper .wp-list-table thead tr:last-child th {
     border-bottom: none !important;
}

/* [DIHAPUS] Aturan 'border-bottom: none' untuk peta-plot-table dihapus agar border tbody terlihat */
.prodi-peta-plot-page .peta-plot-table thead tr:last-child th {
     /* border-bottom: none !important; */
}

/* [DIHAPUS] Aturan 'border-bottom: none' untuk peta-plot-table dihapus agar border tbody terlihat */
.prodi-peta-plot-page .peta-plot-table thead tr:last-child th {
     /* border-bottom: none !important; */
}


/* 2. Aturan SPESIFIK yang menimpa aturan dasar saat filter aktif */

/* Filter "Semua Prodi": Latar kuning, teks gelap */
.prodi-crud-wrapper.prodi-filter-semua .wp-list-table thead,
.prodi-peta-plot-page.prodi-filter-semua .peta-plot-table thead {
    background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%) !important;
}
.prodi-crud-wrapper.prodi-filter-semua .wp-list-table thead tr,
.prodi-peta-plot-page.prodi-filter-semua .peta-plot-table thead tr {
    background: transparent !important;
}
.prodi-crud-wrapper.prodi-filter-semua .wp-list-table thead th,
.prodi-peta-plot-page.prodi-filter-semua .peta-plot-table thead th {
    background: transparent !important;
    color: #493303 !important;
    border-color: rgba(73, 51, 3, 0.2) !important;
}

/* Filter "TO": Latar biru, teks putih */
.prodi-crud-wrapper.prodi-filter-to .wp-list-table thead,
.prodi-peta-plot-page.prodi-filter-to .peta-plot-table thead {
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
}
.prodi-crud-wrapper.prodi-filter-to .wp-list-table thead tr,
.prodi-peta-plot-page.prodi-filter-to .peta-plot-table thead tr {
    background: transparent !important;
}
.prodi-crud-wrapper.prodi-filter-to .wp-list-table thead th,
.prodi-peta-plot-page.prodi-filter-to .peta-plot-table thead th {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Filter "MLOG": Latar merah, teks putih */
.prodi-crud-wrapper.prodi-filter-mlog .wp-list-table thead,
.prodi-peta-plot-page.prodi-filter-mlog .peta-plot-table thead {
    background: linear-gradient(90deg, #c31432 0%, #240b36 100%) !important;
}
.prodi-crud-wrapper.prodi-filter-mlog .wp-list-table thead tr,
.prodi-peta-plot-page.prodi-filter-mlog .peta-plot-table thead tr {
    background: transparent !important;
}
.prodi-crud-wrapper.prodi-filter-mlog .wp-list-table thead th,
.prodi-peta-plot-page.prodi-filter-mlog .peta-plot-table thead th {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Filter "MTJ": Latar hijau, teks putih */
.prodi-crud-wrapper.prodi-filter-mtj .wp-list-table thead,
.prodi-peta-plot-page.prodi-filter-mtj .peta-plot-table thead {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%) !important;
}
.prodi-crud-wrapper.prodi-filter-mtj .wp-list-table thead tr,
.prodi-peta-plot-page.prodi-filter-mtj .peta-plot-table thead tr {
    background: transparent !important;
}
.prodi-crud-wrapper.prodi-filter-mtj .wp-list-table thead th,
.prodi-peta-plot-page.prodi-filter-mtj .peta-plot-table thead th {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   Pewarnaan Border Kartu Ringkasan Sesuai Filter Prodi
   ========================================================================== */

/* Warna Kuning Tua untuk "Semua Prodi" */
.prodi-crud-wrapper.prodi-filter-semua .summary-total-card-horizontal {
    border-left-color: #f7971e;
}

/* Warna Biru untuk "TO" */
.prodi-crud-wrapper.prodi-filter-to .summary-total-card-horizontal {
    border-left-color: #090999;
}

/* Warna Merah untuk "MLOG" */
.prodi-crud-wrapper.prodi-filter-mlog .summary-total-card-horizontal {
    border-left-color: #c31432;
}

/* Warna Hijau untuk "MTJ" */
.prodi-crud-wrapper.prodi-filter-mtj .summary-total-card-horizontal {
    border-left-color: #11998e;
}

/* ==========================================================================
   GAYA UNTUK FILTER PRODI GLOBAL
   ========================================================================== */

.prodi-global-filter-container {
    /* Menggunakan gaya modern yang sudah ada di filter lain */
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07);
    padding: 18px 25px;
      margin-top: 10px;
    margin-bottom: 25px;
    border-radius: 12px;

    /* [KUNCI PERBAIKAN] */
    display: flex !important;
    align-items: center;
    justify-content: space-between; /* <-- Ini akan mendorong tombol ke kanan */
    flex-wrap: wrap; /* Izinkan wrap di layar kecil */
    gap: 15px 20px; /* Jarak vertikal | Jarak horizontal */
}

.prodi-global-filter-container form {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Izinkan item di dalam form (filter, tgl) untuk wrap */
    gap: 15px 20px; /* Sesuaikan gap */
    
    flex-grow: 1; /* Biarkan form mengambil ruang di kiri */
}

.prodi-global-filter-container label {
    font-weight: 500;
    color: #334155;
}

.prodi-global-filter-container select {
    min-width: 200px;
}

/* ==========================================================================
   ATURAN WARNA HEADER TABEL BERDASARKAN FILTER PRODI
   ========================================================================== */

/* * Aturan ini bekerja dengan menargetkan kelas `.prodi-filter-*` 
 * yang secara dinamis ditambahkan oleh JavaScript pada wrapper utama.
 */

/* Filter "Semua Prodi": Latar kuning, teks gelap */
.prodi-crud-wrapper.prodi-filter-semua .wp-list-table thead tr {
    background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);
}
.prodi-crud-wrapper.prodi-filter-semua .wp-list-table thead th {
    color: #493303 !important;
}

/* Filter "TO" (Teknologi Otomotif): Latar biru, teks putih */
.prodi-crud-wrapper.prodi-filter-to .wp-list-table thead tr {
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 0%, rgba(0, 212, 255, 1) 100%);
}
.prodi-crud-wrapper.prodi-filter-to .wp-list-table thead th {
    color: #ffffff !important;
}

/* Filter "MLOG" (Manajemen Logistik): Latar merah, teks putih */
.prodi-crud-wrapper.prodi-filter-mlog .wp-list-table thead tr {
    background: linear-gradient(90deg, #c31432 0%, #240b36 100%);
}
.prodi-crud-wrapper.prodi-filter-mlog .wp-list-table thead th {
    color: #ffffff !important;
}

/* Filter "MTJ" (Manajemen Transportasi Jalan): Latar hijau, teks putih */
.prodi-crud-wrapper.prodi-filter-mtj .wp-list-table thead tr {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}
.prodi-crud-wrapper.prodi-filter-mtj .wp-list-table thead th {
    color: #ffffff !important;
}

/* ==========================================================================
   GAYA MODERN UNTUK FILTER DROPDOWN GLOBAL
   ========================================================================== */

/* 1. Styling Container (Opsional: lebih minimalis) */
.prodi-global-filter-container {
    background-color: #ffffff; /* Ubah ke putih */
    border: none; /* Hilangkan border */
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07); /* Bayangan halus */
    padding: 18px 25px; /* Sedikit lebih lega */
    margin-bottom: 25px; /* Jarak bawah */
    border-radius: 12px; /* Sesuaikan dengan card lain */
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antar label & select */
}

/* 2. Styling Label */
.prodi-global-filter-container label {
    font-weight: 600; /* Sedikit lebih tebal */
    color: #334155;
    font-size: 14px;
    flex-shrink: 0; /* Agar label tidak mengecil */
}

/* 3. Styling Select Dropdown Utama */
.prodi-global-filter-container select {
    /* --- Menghilangkan Tampilan Bawaan --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f8fafc !important; /* Latar abu-abu muda */

    /* --- Bentuk & Ukuran --- */
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important; /* Bentuk pil */
    padding: 10px 40px 10px 20px !important; /* Atas/Bawah | Kanan (lebih lebar utk ikon) | Kiri */
    min-width: 250px; /* Lebar minimum */
    height: auto !important; /* Biarkan tinggi mengikuti padding */
    line-height: normal !important;

    /* --- Font & Warna --- */
    font-size: 14px !important;
    font-weight: 500;
    color: #1e293b !important; /* Warna teks gelap */

    /* --- Ikon Panah Kustom (SVG) --- */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center; /* Posisi ikon di kanan */
    background-size: 16px 16px; /* Ukuran ikon */

    /* --- Transisi & Interaksi --- */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 4. Efek Hover */
.prodi-global-filter-container select:hover {
    border-color: #cbd5e1;
    background-color: #f1f5f9 !important;
}

/* 5. Efek Focus (Saat diklik/aktif) */
.prodi-global-filter-container select:focus {
    border-color: #090999 !important; /* Border biru tema */
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2); /* Efek glow biru */
    outline: none; /* Hilangkan outline bawaan */
    background-color: #ffffff !important; /* Latar jadi putih saat aktif */
}

/* 6. Menghilangkan margin bawaan form jika ada */
.prodi-global-filter-container form {
    margin: 0;
    display: flex; /* Jaga agar label & select tetap sejajar */
    align-items: center;
    gap: 15px;
    flex-grow: 1; /* Biarkan form mengambil sisa ruang jika perlu */
}


/* ==========================================================================
   PERBAIKAN ALIGNMENT KOLOM NUMERIK (TABEL KURIKULUM)
   ========================================================================== */

/* Target header (th) dan sel data (td) untuk kolom numerik di tabel Kurikulum */
/* Kolom 4 (Teori SKS) s/d Kolom 9 (Total SKS) */
#kurikulum-table-container .wp-list-table th:nth-child(n+4):nth-child(-n+9),
#kurikulum-table-container .wp-list-table td:nth-child(n+4):nth-child(-n+9) {
    text-align: center !important; /* Membuat header DAN body rata tengah */
    vertical-align: middle; /* Pastikan rata tengah vertikal juga */
}

/* (Opsional) Pastikan kolom Aksi (Kolom 3) tetap rata tengah */
#kurikulum-table-container .wp-list-table th:nth-child(3),
#kurikulum-table-container .wp-list-table td:nth-child(3) {
    text-align: center !important;
    vertical-align: middle;
}

/* (Opsional) Pastikan kolom Aksi (Kolom 10) tetap rata tengah */
#kurikulum-table-container .wp-list-table th:nth-child(10),
#kurikulum-table-container .wp-list-table td:nth-child(10) {
    text-align: center !important;
    vertical-align: middle;
}


/* ==========================================================================
   LEBAR KOLOM TABEL MATA KULIAH (SEMUA PIKSEL) - DENGAN SELECTOR BENAR
   ========================================================================== */

/* Targetkan wrapper ID atau langsung kelas tabelnya */
#matakuliah-content-wrapper .semester-table { /* <<< UBAH SELECTOR */
    table-layout: fixed !important;
    width: 100%;
}

#matakuliah-content-wrapper .semester-table th:nth-child(1) { width: 5% !important; }  /* No. */
#matakuliah-content-wrapper .semester-table th:nth-child(2) { width: 10% !important; } /* Kode */
#matakuliah-content-wrapper .semester-table th:nth-child(3) { width: 35% !important; } /* Mata Kuliah */
#matakuliah-content-wrapper .semester-table th:nth-child(4) { width: 5% !important; }  /* SKS */
#matakuliah-content-wrapper .semester-table th:nth-child(5) { width: 8% !important; }  /* SKS Teori */
#matakuliah-content-wrapper .semester-table th:nth-child(6) { width: 8% !important; }  /* SKS Praktek */
#matakuliah-content-wrapper .semester-table th:nth-child(7) { width: 8% !important; }  /* Jam Teori */
#matakuliah-content-wrapper .semester-table th:nth-child(8) { width: 8% !important; }  /* Jam Praktek */
#matakuliah-content-wrapper .semester-table th:nth-child(9) { width: 8% !important; }  /* Aksi */

/* Reset td */
#matakuliah-content-wrapper .semester-table td { /* <<< UBAH SELECTOR */
    width: auto;
}

/* Penyesuaian Mata Kuliah (jika pakai auto/%) */
#matakuliah-content-wrapper .semester-table th:nth-child(3),
#matakuliah-content-wrapper .semester-table td:nth-child(3) {
     width: auto !important; /* Atau persentase sisa */
     word-wrap: break-word;
     overflow-wrap: break-word;
}

/* ==========================================================================
   PENGATURAN Header justify
   ========================================================================== */
#matakuliah-content-wrapper .semester-table th:nth-child(9), /* <<< Selector Header */
#matakuliah-content-wrapper .semester-table td:nth-child(9) { /* <<< Selector Body */
    text-align: center !important; /* <<< Aturan ini */}







/* ==========================================================================
   PENGATURAN LEBAR KOLOM TABEL DAFTAR KURIKULUM
   ========================================================================== */

/* Pastikan layout fixed aktif */
#kurikulum-table-container .wp-list-table {
    table-layout: fixed !important;
    width: 100%;
}

/* --- Sesuaikan nilai 'width' di bawah ini --- */

/* Kolom 1: Kode */
#kurikulum-table-container .wp-list-table th:nth-child(1),
#kurikulum-table-container .wp-list-table td:nth-child(1) {
    width: 8% !important; /* Contoh */
}

/* Kolom 2: Nama Mata Kuliah */
#kurikulum-table-container .wp-list-table th:nth-child(2),
#kurikulum-table-container .wp-list-table td:nth-child(2) {
    width: 27% !important; /* Contoh - Kolom terlebar */
}

/* Kolom 3: Prodi */
#kurikulum-table-container .wp-list-table th:nth-child(3),
#kurikulum-table-container .wp-list-table td:nth-child(3) {
    width: 7% !important; /* Contoh */
}

/* Kolom 4: Teori (SKS) */
#kurikulum-table-container .wp-list-table th:nth-child(4),
#kurikulum-table-container .wp-list-table td:nth-child(4) {
    width: 7% !important; /* Contoh */
}

/* Kolom 5: Praktik (SKS) */
#kurikulum-table-container .wp-list-table th:nth-child(5),
#kurikulum-table-container .wp-list-table td:nth-child(5) {
    width: 7% !important; /* Contoh */
}

/* Kolom 6: Jam Teori */
#kurikulum-table-container .wp-list-table th:nth-child(6),
#kurikulum-table-container .wp-list-table td:nth-child(6) {
    width: 8% !important; /* Contoh */
}

/* Kolom 7: Jam Praktik */
#kurikulum-table-container .wp-list-table th:nth-child(7),
#kurikulum-table-container .wp-list-table td:nth-child(7) {
    width: 8% !important; /* Contoh */
}

/* Kolom 8: Jam MK */
#kurikulum-table-container .wp-list-table th:nth-child(8),
#kurikulum-table-container .wp-list-table td:nth-child(8) {
    width: 8% !important; /* Contoh */
}

/* Kolom 9: Total SKS */
#kurikulum-table-container .wp-list-table th:nth-child(9),
#kurikulum-table-container .wp-list-table td:nth-child(9) {
    width: 7% !important; /* Contoh */
}

/* Kolom 10: Aksi */
#kurikulum-table-container .wp-list-table th:nth-child(10),
#kurikulum-table-container .wp-list-table td:nth-child(10) {
    width: 8% !important; /* Contoh - pastikan cukup untuk ikon */
    min-width: 80px; /* Lebar minimum */
}


/* ==========================================================================
   STYLING FILTER LOKAL TAB REKAP (Opsional)
   ========================================================================== */
.prodi-local-filter-container {
    display: flex; /* Optional: if you add more elements */
    align-items: center;
}

.prodi-local-filter-container select {
    /* Anda bisa menyalin gaya dari .prodi-global-filter-container select */
    /* Atau biarkan default jika tidak masalah */
    min-width: 200px;
    padding: 8px 12px;
}

/* ==========================================================================
   GAYA MODERN UNTUK FILTER LOKAL TAB REKAP
   ========================================================================== */

/* 1. Styling Container Filter Lokal */
.prodi-local-filter-container {
    background-color: #ffffff; /* Latar putih */
    border: none;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07); /* Bayangan halus */
    padding: 18px 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    display: inline-block;
    align-items: center;
    gap: 15px;
}

/* 2. Styling Label */
.prodi-local-filter-container label {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
    flex-shrink: 0;
}

/* 3. Styling Select Dropdown (#prodi_filter_rekap) */
.prodi-local-filter-container select#prodi_filter_rekap {
    /* --- Menghilangkan Tampilan Bawaan --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f8fafc !important; /* Latar abu-abu muda */

    /* --- Bentuk & Ukuran --- */
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important; /* Bentuk pil */
    padding: 10px 40px 10px 20px !important; /* Atas/Bawah | Kanan (utk ikon) | Kiri */
    min-width: 250px;
    height: auto !important;
    line-height: normal !important;

    /* --- Font & Warna --- */
    font-size: 14px !important;
    font-weight: 500;
    color: #1e293b !important;

    /* --- Ikon Panah Kustom --- */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 16px;

    /* --- Transisi & Interaksi --- */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 4. Efek Hover */
.prodi-local-filter-container select#prodi_filter_rekap:hover {
    border-color: #cbd5e1;
    background-color: #f1f5f9 !important;
}

/* 5. Efek Focus (Saat diklik/aktif) */
.prodi-local-filter-container select#prodi_filter_rekap:focus {
    border-color: #090999 !important; /* Border biru tema */
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2); /* Efek glow biru */
    outline: none;
    background-color: #ffffff !important; /* Latar jadi putih */
}

/* 6. Styling Form di dalam container */
.prodi-local-filter-container form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

/* ==========================================================================
   PEWARNAAN HEADER TABEL REKAP BERDASARKAN FILTER PRODI
   ========================================================================== */

/* Filter "Semua Prodi": Latar kuning, teks gelap */
.prodi-crud-wrapper.prodi-filter-semua .rekap-beban-table thead tr {
    background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);
}
.prodi-crud-wrapper.prodi-filter-semua .rekap-beban-table thead th {
    color: #493303 !important; /* Teks gelap */
}

/* Filter "TO": Latar biru, teks putih */
.prodi-crud-wrapper.prodi-filter-to .rekap-beban-table thead tr {
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 0%, rgba(0, 212, 255, 1) 100%);
}
.prodi-crud-wrapper.prodi-filter-to .rekap-beban-table thead th {
    color: #ffffff !important; /* Teks putih */
}

/* Filter "MLOG": Latar merah, teks putih */
.prodi-crud-wrapper.prodi-filter-mlog .rekap-beban-table thead tr {
    background: linear-gradient(90deg, #c31432 0%, #240b36 100%);
}
.prodi-crud-wrapper.prodi-filter-mlog .rekap-beban-table thead th {
    color: #ffffff !important; /* Teks putih */
}

/* Filter "MTJ": Latar hijau, teks putih */
.prodi-crud-wrapper.prodi-filter-mtj .rekap-beban-table thead tr {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}
.prodi-crud-wrapper.prodi-filter-mtj .rekap-beban-table thead th {
    color: #ffffff !important; /* Teks putih */
}


/* ==========================================================================
   GAYA MODERN UNTUK FILTER SEMESTER (TAB SETTING PLOT)
   ========================================================================== */

/* 1. Styling Container Filter Semester (Bisa gunakan gaya .plot-filter-container yang ada) */
/* Pastikan container ini punya style yang diinginkan, misal: */
.plot-filter-container {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07);
    padding: 18px 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara form items */
}

/* 2. Styling Label (Jika perlu, sesuaikan dari gaya filter global) */
.plot-filter-container label {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
    flex-shrink: 0;
}

/* 3. Styling Select Dropdown Semester (#semester_type) */
.plot-filter-container select#semester_type {
    /* --- Menghilangkan Tampilan Bawaan --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f8fafc !important; /* Latar abu-abu muda */

    /* --- Bentuk & Ukuran --- */
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important; /* Bentuk pil */
    padding: 10px 40px 10px 20px !important; /* Atas/Bawah | Kanan (utk ikon) | Kiri */
    /* min-width: 200px; /* Lebar minimum (sesuaikan jika perlu) */
    width: auto; /* Biarkan lebar mengikuti konten + padding */
    height: auto !important;
    line-height: normal !important;

    /* --- Font & Warna --- */
    font-size: 14px !important;
    font-weight: 500;
    color: #1e293b !important;

    /* --- Ikon Panah Kustom --- */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 16px;

    /* --- Transisi & Interaksi --- */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 4. Efek Hover */
.plot-filter-container select#semester_type:hover {
    border-color: #cbd5e1;
    background-color: #f1f5f9 !important;
}

/* 5. Efek Focus */
.plot-filter-container select#semester_type:focus {
    border-color: #090999 !important;
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2);
    outline: none;
    background-color: #ffffff !important;
}

/* 6. Styling Form di dalam container */
.plot-filter-container form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara label dan select */
}

/* ==========================================================================
   GAYA MODERN UNTUK FILTER TAHUN AJARAN & KELAS (TAB JADWAL PERKELAS)
   ========================================================================== */

/* Pastikan container .plot-filter-container punya gaya modern */
/* (Aturan ini mungkin sudah ada dari styling filter semester) */
.plot-filter-container {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07);
    padding: 18px 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    display: flex; /* Gunakan flexbox */
    align-items: center; /* Sejajarkan item */
    flex-wrap: wrap; /* Izinkan wrap jika layar sempit */
    gap: 15px 25px; /* Jarak vertikal | Jarak horizontal antar item */
}

/* Container untuk setiap pasangan label-input */
.plot-filter-container .filter-item,
.plot-filter-container form { /* Target form juga jika perlu */
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antara label dan input/select */
    margin: 0; /* Hapus margin default form */
}

/* Styling Label */
.plot-filter-container label {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
    flex-shrink: 0;
}

/* Styling Input Tahun Ajaran (#tahun_ajaran_input) */
.plot-filter-container input#tahun_ajaran_input {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* Sedikit kotak agar beda dari dropdown */
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    width: 150px; /* Sesuaikan lebar */
    text-align: center;
    transition: all 0.2s ease-in-out;
}
.plot-filter-container input#tahun_ajaran_input:focus {
    border-color: #090999;
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2);
    outline: none;
    background-color: #ffffff;
}

/* Styling Dropdown Pilih Kelas (#kelas_selector) */
.plot-filter-container select#kelas_selector {
    /* --- Salin gaya dari dropdown filter lain --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important; /* Bentuk pil */
    padding: 10px 40px 10px 20px !important;
    width: auto; /* Lebar otomatis */
    min-width: 150px; /* Lebar minimum */
    height: auto !important;
    line-height: normal !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #1e293b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.plot-filter-container select#kelas_selector:hover {
    border-color: #cbd5e1;
    background-color: #f1f5f9 !important;
}
.plot-filter-container select#kelas_selector:focus {
    border-color: #090999 !important;
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2);
    outline: none;
    background-color: #ffffff !important;
}

/* ==========================================================================
   GAYA MODERN UNTUK BAGIAN PENANDATANGAN
   ========================================================================== */

/* Styling Container Penandatangan */
.penandatangan-settings-card {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07);
    padding: 18px 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    display: flex; /* Gunakan flexbox */
    align-items: center;
    flex-wrap: wrap; /* Izinkan wrap */
    gap: 15px 25px; /* Jarak vertikal | Jarak horizontal */
}

/* Container untuk setiap pasangan label-input/checkbox */
.penandatangan-settings-card .filter-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antara label dan input */
}

/* Styling Label */
.penandatangan-settings-card label {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer; /* Agar label checkbox bisa diklik */
}

/* Styling Input Teks Penandatangan */
.penandatangan-settings-card input[type="text"] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* Kotak rounded */
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    /* width: 250px; /* Hapus width tetap agar lebih fleksibel */
    flex-grow: 1; /* Biarkan input mengisi ruang jika perlu */
    min-width: 180px; /* Lebar minimum */
    transition: all 0.2s ease-in-out;
}
.penandatangan-settings-card input[type="text"]:focus {
    border-color: #090999;
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2);
    outline: none;
    background-color: #ffffff;
}

/* Styling Checkbox "Ditandatangani" */
.penandatangan-settings-card input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    margin-right: 5px; /* Sedikit jarak kanan dari label */
}
.penandatangan-settings-card input[type="checkbox"]:checked {
    background-color: #090999;
    border-color: #090999;
}
/* Style untuk label checkbox agar lebih rapi */
.penandatangan-settings-card .filter-item label[for="ttd-signed-checkbox"] {
    display: inline-flex; /* Sejajarkan checkbox dan teks label */
    align-items: center;
    font-weight: normal; /* Buat normal saja */
}

/* ==========================================================================
   GAYA MODERN UNTUK FILTER DROPDOWN GLOBAL (TERMASUK TOMBOL EXPORT)
   ========================================================================== */

/* 1. Styling Container */
.prodi-global-filter-container.dosen-filter-export-container { /* Target container spesifik */
    /* ... (gaya background, shadow, padding, margin, radius tetap sama) ... */
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07);
    padding: 18px 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    /* === UBAH BAGIAN INI === */
    display: flex; /* Gunakan flexbox */
    justify-content: space-between; /* Dorong filter ke kiri, tombol ke kanan */
    align-items: center; /* Sejajarkan vertikal */
    flex-wrap: wrap; /* Izinkan wrap di layar kecil */
    gap: 15px; /* Jarak jika wrap */
    /* ======================= */
}

/* Form Filter (tidak perlu lebar penuh) */
.prodi-global-filter-container.dosen-filter-export-container form {
    display: inline-flex; /* Agar sejajar */
    align-items: center;
    gap: 10px; /* Jarak label & select */
    margin: 0;
    /* Hapus flex-grow */
}

/* Tombol Export (Gunakan gaya page-title-action yang sudah ada) */
.prodi-global-filter-container.dosen-filter-export-container #export-dosen-button {
    /* Style dasar sudah dari .page-title-action */
    /* Anda bisa menambahkan penyesuaian di sini jika perlu */
    /* Misal: margin-left: auto; jika justify-content: flex-start; */
    display: inline-flex; /* Pastikan flex untuk ikon */
    align-items: center;
}

/* Styling Label (Tetap sama) */
.prodi-global-filter-container label { /* ... */ }

/* Styling Select Dropdown (Tetap sama) */
.prodi-global-filter-container select { /* ... */ }
/* ... (hover & focus tetap sama) ... */

/* ==========================================================================
   PENYESUAIAN GAYA TOMBOL EXPORT (PUTIH-BIRU)
   ========================================================================== */

/* Target spesifik untuk tombol export di kedua halaman */
.prodi-header-actions #print-jadwal-button,
.prodi-header-actions #print-all-jadwal-button,
.prodi-global-filter-container #export-dosen-button {
    /* --- Warna & Tampilan Baru --- */
    background-color: #ffffff !important;         /* Latar Putih */
    color: #090999 !important;               /* Teks Biru */
    border: 1px solid #090999 !important;    /* Border Biru */

    /* --- Gaya Dasar (dari aturan sebelumnya, pastikan ada) --- */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    border-radius: 50px !important; /* Bentuk pil */
    text-decoration: none !important;
    text-shadow: none !important;
    padding: 8px 20px !important;   /* Sesuaikan padding jika perlu */
    font-size: 13px !important;
    font-weight: bold !important;
    height: auto !important;
    line-height: normal !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Ukuran Ikon di dalam tombol (Tetap sama) */
.prodi-header-actions #print-jadwal-button svg,
.prodi-header-actions #print-all-jadwal-button svg,
.prodi-global-filter-container #export-dosen-button svg {
    width: 1em;
    height: 1em;
    margin-right: 8px;
    fill: currentColor; /* Warna ikon mengikuti warna teks (biru) */
}

/* Efek hover baru */
.prodi-header-actions #print-jadwal-button:hover,
.prodi-header-actions #print-all-jadwal-button:hover,
.prodi-global-filter-container #export-dosen-button:hover {
    background-color: #eef2ff !important; /* Latar Biru Sangat Muda */
    border-color: #06066e !important;    /* Border Biru Tua */
    color: #06066e !important;           /* Teks Biru Tua */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ==========================================================================
   GAYA HEADER HALAMAN (Judul, Cari, Tombol) - PENYESUAIAN
   ========================================================================== */

/* Pastikan header menggunakan flex */
.prodi-crud-wrapper .prodi-page-header {
    display: flex;
    /* HAPUS ATAU KOMENTARI justify-content: space-between; JIKA ADA */
    /* justify-content: space-between; */
    align-items: center;
    margin-bottom: 20px; /* Jarak bawah */
    padding-bottom: 20px; /* Padding bawah jika ada border */
    border-bottom: 1px solid #eef0f3; /* Jika ada border */
    gap: 20px; /* Jarak antara judul dan grup aksi jika berdekatan */
}

/* Biarkan judul mengambil ruang seperlunya */
.prodi-crud-wrapper .prodi-page-header .prodi-page-title {
    margin-right: auto; /* Mendorong grup aksi ke kanan */
    flex-shrink: 0; /* Jangan biarkan judul mengecil */
}

/* Pastikan grup aksi menggunakan flex dan punya jarak antar item */
.prodi-crud-wrapper .prodi-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara search box dan tombol */
    /* HAPUS margin-left: auto; JIKA ADA DI SINI */
}

/* (Opsional) Jika judul terlalu panjang dan mendorong aksi, uncomment ini */
/*
.prodi-crud-wrapper .prodi-page-header {
    justify-content: space-between; // Kembalikan jika perlu
}
.prodi-crud-wrapper .prodi-header-actions {
     margin-left: 20px; // Beri jarak kiri eksplisit
}
*/


/* ==========================================================================
   GAYA UNTUK HALAMAN MONITORING PERKULIAHAN
   ========================================================================== */

.monitoring-table-wrapper {
    overflow-x: auto; /* Memungkinkan scroll horizontal */
}

.monitoring-table {
    width: 100%;
    min-width: 1200px; /* Lebar minimum tabel */
    border-collapse: collapse; /* Pastikan border menyatu */
}

.monitoring-table th,
.monitoring-table td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 11px; /* Ukuran font lebih kecil */
    white-space: normal; /* Izinkan teks turun */
    word-break: break-word;
}

.monitoring-table thead th {
    background-color: #f1f5f9; /* Header sedikit abu-abu */
    font-weight: 600;
    position: sticky; /* Header menempel saat scroll */
    top: 0;
    z-index: 10;
}

.monitoring-table .jam-column {
    width: 150px !important; /* <<< TAMBAHKAN/UBAH: Lebarkan kolom (sesuaikan nilainya) */
    font-weight: bold;
    background-color: #f8fafc;
    position: sticky;
    left: 0;
    z-index: 5;
    white-space: nowrap !important; /* <<< TAMBAHKAN: Agar teks header tidak turun */
    text-align: center !important;  /* <<< TAMBAHKAN: Pastikan header rata tengah */
}

.monitoring-table .jam-cell {
    font-weight: bold;
    background-color: #f8fafc;
    white-space: nowrap !important; /* <<< TAMBAHKAN: Agar teks jam tidak turun */
    text-align: center !important;  /* <<< TAMBAHKAN: Pastikan sel rata tengah */
    /* Width biasanya mengikuti header karena sticky, tapi bisa ditambahkan jika perlu */
    /* width: 150px !important; */
}

/* Styling untuk Baris Istirahat */
.monitoring-table .row-istirahat td {
    background-color: #e2e8f0; /* Warna latar abu-abu untuk istirahat */
    font-style: italic;
    color: #64748b;
}
.monitoring-table .row-istirahat .jam-cell {
    background-color: #f1f5f9; /* Sesuaikan jika perlu */
}

/* (Opsional) Jika perlu, sesuaikan juga padding agar lebih pas */
.monitoring-table th,
.monitoring-table td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px; /* Sedikit penyesuaian padding jika perlu */
    text-align: center;
    vertical-align: middle;
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
}

/* ==========================================================================
   GAYA PILL BADGE STATUS UNTUK MONITORING (Selektor ID + Sangat Spesifik + Redundansi Gaya Dasar)
   ========================================================================== */

/* Kontainer sel (td) */
#monitoring-table-body td.status-cell {
    padding: 6px 5px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* === BAGIAN 1: Styling dasar Pill Badge (Diterapkan ke SEMUA span status) === */
/* Selector ini mencakup SEMUA variasi status */
#monitoring-table-body td.status-cell span,
#monitoring-table-body td.status-default span,
#monitoring-table-body td.status-unknown span,
#monitoring-table-body td.status-masuk span,
#monitoring-table-body td.status-kosong span,
#monitoring-table-body td.status-tugas span,
#monitoring-table-body td.status-mandiri span,
#monitoring-table-body td.status-pengganti span {
    /* Gaya Bentuk Dasar Badge (Diulang di sini untuk kepastian) */
    display: inline-flex !important; /* Gunakan inline-flex */
    align-items: center !important; /* Vertically center text */
    justify-content: center !important; /* Horizontally center text */
    border-radius: 5px !important;
    font-size: 12px !important; /* Ukuran font dasar */
    font-weight: 600 !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    font-style: normal !important;
    box-sizing: border-box !important; /* Include padding/border in height/width */
    white-space: normal !important; /* Allow text wrapping */
    line-height: 1.2 !important; /* Adjust line height slightly for wrapping */white-space: normal !important; /* Izinkan teks turun jika terlalu panjang */
    
    /* --- Konsistensi Ukuran --- */
    height: 32px !important; /* <<< Tentukan tinggi badge (sesuaikan 32px jika perlu) */
    width: 90px !important; /* <<< Jaga min-width dari sebelumnya (sesuaikan jika perlu) */
    padding: 0 10px !important; /* <<< Atur padding horizontal saja (sesuaikan 10px jika perlu) */

    
    
    /* ===================== */
}

/* === BAGIAN 2: Warna Badge Spesifik (Hanya Warna + Font Style jika perlu) === */

/* Warna Badge Status Default/Unknown (Abu-abu) */
#monitoring-table-body td.status-default span,
#monitoring-table-body td.status-unknown span {
    background-color: #f1f5f9 !important; /* Abu-abu Sangat Muda */
    color: #64748b !important; /* Abu-abu Tua */
    border-color: #e2e8f0 !important; /* Border Abu-abu Muda */
    font-style: italic !important; /* Miring untuk default/unknown */
}

/* Warna Badge Status Masuk (Hijau) */
#monitoring-table-body td.status-masuk span {
    background-color: #22c55e !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}
/* Warna Badge Status Kosong (Merah) */
#monitoring-table-body td.status-kosong span {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Warna Badge Status Tugas (Oranye) */
#monitoring-table-body td.status-tugas span {
    background-color: #f97316 !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

/* Warna Badge Status Belajar Mandiri (Kuning) */
#monitoring-table-body td.status-mandiri span {
    background-color: #eab308 !important;
    color: #ffffff !important;
    border-color: #ca8a04 !important;
}

/* Warna Badge Status Jam Pengganti (Biru Muda) - Disesuaikan padding & font-size */
#monitoring-table-body td.status-pengganti span {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    /* Penyesuaian spesifik untuk Jam Pengganti agar teks muat */
    font-size: 10px !important;
    white-space: normal !important; /* Izinkan teks turun jika panjang */
    padding: 4px 8px !important;    /* Padding lebih kecil */
    border-radius: 8px !important;   /* Radius berbeda jika diinginkan */
    min-width: auto !important;    /* Hapus min-width agar bisa lebih sempit */
}

#monitoring-status-info {
    font-size: 0.9em;
    color: #334155;
}

/* ==========================================================================
   GAYA UNTUK TOOLTIP STATUS MONITORING
   ========================================================================== */

.status-tooltip {
    display: none; /* Sembunyikan default */
    position: absolute; /* Posisi relatif terhadap elemen terdekat yang 'positioned' */
    background-color: #334155; /* Latar belakang gelap */
    color: #ffffff; /* Teks putih */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    z-index: 100; /* Pastikan muncul di atas elemen lain */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    max-width: 250px; /* Lebar maksimum tooltip */
    pointer-events: none; /* Agar tooltip tidak mengganggu hover ke elemen lain */
    white-space: normal; /* Izinkan teks turun baris */
}

/* (Opsional) Style untuk judul MK di dalam tooltip */
.status-tooltip strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}


/* ==========================================================================
   GAYA BARU UNTUK INPUT STATUS PERKULIAHAN (MOBILE FIRST) - LEBIH SPESIFIK
   ========================================================================== */

/* Wrapper Utama */
.prodi-input-status-wrapper-new {
    max-width: 600px; /* Batasi lebar di desktop agar tidak terlalu lebar */
    margin: 20px auto; /* Pusatkan di desktop */
    padding: 0 15px; /* Padding samping untuk mobile */
}

/* Judul Utama & Subjudul */
.prodi-input-status-wrapper-new .input-status-main-title {
    text-align: center;
    text-transform: uppercase !important;
    color: #0d1e4d !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin-bottom: 5px;
}
.prodi-input-status-wrapper-new .input-status-subtitle {
    text-align: center;
    color: #475569;
    font-size: 14px;
    margin-bottom: 25px;
}

/* Styling Dasar Kartu (Lebih Spesifik) */
.prodi-input-status-wrapper-new .status-card {
    background: #ffffff !important; /* Paksa background putih */
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07) !important;
    display: block !important; /* Pastikan display block */
}

.prodi-input-status-wrapper-new .status-card .card-title {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 10px !important;
}

.prodi-input-status-wrapper-new .status-card .card-description {
    font-size: 14px !important;
    color: #475569 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* Kartu Jadwal Sekarang (Lebih Spesifik) */
.prodi-input-status-wrapper-new .jadwal-sekarang-card .jadwal-info p {
    margin: 5px 0 !important;
    font-size: 14px !important;
    color: #334155 !important;
}
.prodi-input-status-wrapper-new .jadwal-sekarang-card .jadwal-info strong {
    color: #1e293b !important;
}

.prodi-input-status-wrapper-new .jadwal-sekarang-card .button-lapor {
    display: block !important;
    width: 100% !important;
    margin-top: 15px !important;
    text-align: center !important;
    background-color: #090999 !important;
    color: white !important; border: none !important; border-radius: 50px !important; /* Bentuk pil */
    padding: 10px 15px !important; font-size: 14px !important; font-weight: bold !important;
    height: auto !important; line-height: normal !important; text-shadow: none !important;
    transition: all 0.2s !important; cursor: pointer !important;
}
.prodi-input-status-wrapper-new .jadwal-sekarang-card .button-lapor:hover {
    background-color: #06066e !important;
    transform: translateY(-2px) !important;
}


/* Kartu Perkuliahan Dilaporkan (Lebih Spesifik) */
.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .laporan-list {
    margin-bottom: 20px !important;
}
.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .laporan-item {
    font-size: 14px !important;
    color: #334155 !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}
.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .laporan-item:last-child {
    border-bottom: none !important;
}
.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .laporan-item strong {
    font-weight: 600 !important;
}

.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .button-lapor-tambahan {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #475569 !important;
    vertical-align: top !important; height: auto !important; padding: 10px 15px !important;
    font-size: 14px !important; font-weight: bold !important; border-radius: 50px !important; /* Bentuk pil */
    
    text-shadow: none !important; line-height: normal !important; text-decoration: none !important;
    transition: all 0.2s ease-in-out !important; cursor: pointer !important;
}
.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .button-lapor-tambahan:hover {
    background: #f8fafc !important; border-color: #94a3b8 !important; color: #1e293b !important;
}

/* Styling Modal/Popup (Lebih Spesifik) */
/* Selector modal overlay harus spesifik */
.prodi-input-status-wrapper-new .status-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 1050 !important;
    display: flex; /* <<< HAPUS !important DARI SINI */
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    /* display: none; <-- Biarkan JS yang handle, hapus !important jika ada */
}

/* Selector modal content harus spesifik */
.prodi-input-status-wrapper-new .status-modal-content {
    background: #fff !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 450px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
    padding: 25px !important;
    position: relative !important;
    display: block !important; /* Pastikan display block */
}

/* Selector elemen di dalam modal harus spesifik */
.prodi-input-status-wrapper-new .status-modal-content .modal-title {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 10px !important;
}

.prodi-input-status-wrapper-new .status-modal-content p {
    font-size: 14px !important;
    color: #475569 !important;
    margin: 0 0 10px 0 !important;
}
.prodi-input-status-wrapper-new .status-modal-content p strong {
    color: #334155 !important;
}

.prodi-input-status-wrapper-new .status-modal-content .form-field {
    margin-bottom: 15px !important;
}

.prodi-input-status-wrapper-new .status-modal-content label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-bottom: 5px !important;
}

.prodi-input-status-wrapper-new .status-modal-content select {
    width: 100% !important;
    padding: 10px 15px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #f8fafc !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    /* Hapus appearance agar default browser */
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    /* Atur background image none jika ingin benar-benar default */
    background-image: none !important;
}
.prodi-input-status-wrapper-new .status-modal-content select:focus {
    background-color: #fff !important;
    border-color: #090999 !important;
    box-shadow: 0 0 0 1px #090999 !important;
    outline: none !important;
}

.prodi-input-status-wrapper-new .status-modal-content .modal-actions {
    margin-top: 25px !important;
    padding-top: 15px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* Tombol Modal (Lebih Spesifik) */
.prodi-input-status-wrapper-new .status-modal-content .modal-actions .button-primary {
    background-color: #090999 !important; color: white !important; border: none !important;
    border-radius: 50px !important; padding: 8px 20px !important; font-size: 14px !important;
    font-weight: bold !important; height: auto !important; line-height: normal !important;
    text-shadow: none !important; transition: all 0.2s; cursor: pointer;
}
.prodi-input-status-wrapper-new .status-modal-content .modal-actions .button-primary:hover {
    background-color: #06066e !important;
    transform: translateY(-2px) !important;
}


/* Pesan error (Lebih Spesifik) */
.prodi-input-status-wrapper-new .modal-error-message { /* Target class spesifik jika dibuat */
    color: #b91c1c !important;
    font-size: 13px !important;
    margin-top: 10px !important;
    text-align: center !important;
    display: block !important; /* Pastikan terlihat jika ada */
}






/* ==========================================================================
   GAYA BARU UNTUK DAFTAR LAPORAN PERKULIAHAN
   ========================================================================== */

.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .laporan-item {
    padding: 15px 0 !important; /* Padding atas/bawah antar item */
    border-bottom: 1px solid #e2e8f0 !important; /* Garis pemisah solid */
}
.prodi-input-status-wrapper-new .perkuliahan-dilaporkan-card .laporan-item:last-child {
    border-bottom: none !important;
    padding-bottom: 5px !important; /* Kurangi padding bawah item terakhir */
}

.prodi-input-status-wrapper-new .laporan-item-content {
    display: flex; /* Gunakan flex untuk layout utama */
    flex-direction: column; /* Susun header dan details secara vertikal */
    gap: 5px; /* Jarak antara header dan details */
}

.prodi-input-status-wrapper-new .laporan-header {
    display: flex; /* Flex untuk header (nomor, jam, badge status) */
    align-items: center; /* Sejajarkan vertikal */
    justify-content: space-between; /* Dorong badge ke kanan */
    gap: 10px; /* Jarak antara nomor dan jam */
}

.prodi-input-status-wrapper-new .laporan-number {
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0; /* Jangan biarkan nomor mengecil */
}

.prodi-input-status-wrapper-new .laporan-jam {
    font-weight: 600;
    color: #334155;
    flex-grow: 1; /* Biarkan jam mengambil sisa ruang */
}

/* Styling Badge Status di dalam List */
.prodi-input-status-wrapper-new .laporan-status-badge {
    /* Salin gaya dasar badge dari CSS Monitoring */
    display: inline-block !important;
    padding: 5px 12px !important; /* Padding lebih kecil */
    border-radius: 5px !important;
    font-size: 11px !important; /* Font lebih kecil */
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    min-width: 60px !important; /* Lebar minimum lebih kecil */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    font-style: normal !important;
    white-space: nowrap !important; /* Jangan turun baris */
    flex-shrink: 0; /* Jangan biarkan badge mengecil */
}
/* Salin juga warna spesifik status dari CSS Monitoring */
.prodi-input-status-wrapper-new .laporan-status-badge.status-default,
.prodi-input-status-wrapper-new .laporan-status-badge.status-unknown {
    background-color: #f1f5f9 !important; color: #64748b !important; border-color: #e2e8f0 !important; font-style: italic !important;
}
.prodi-input-status-wrapper-new .laporan-status-badge.status-masuk {
    background-color: #22c55e !important; color: #ffffff !important; border-color: #16a34a !important;
}
.prodi-input-status-wrapper-new .laporan-status-badge.status-kosong {
    background-color: #ef4444 !important; color: #ffffff !important; border-color: #dc2626 !important;
}
.prodi-input-status-wrapper-new .laporan-status-badge.status-tugas {
    background-color: #f97316 !important; color: #ffffff !important; border-color: #ea580c !important;
}
.prodi-input-status-wrapper-new .laporan-status-badge.status-mandiri {
    background-color: #eab308 !important; color: #ffffff !important; border-color: #ca8a04 !important;
}
.prodi-input-status-wrapper-new .laporan-status-badge.status-pengganti {
    background-color: #3b82f6 !important; color: #ffffff !important; border-color: #2563eb !important;
    /* Font size kecil khusus pengganti (jika perlu, tapi coba samakan dulu) */
    /* font-size: 10px !important; */
}


.prodi-input-status-wrapper-new .laporan-details {
    display: flex;
    flex-direction: column; /* MK di atas Dosen */
    padding-left: 25px; /* Indentasi agar sejajar di bawah Jam */
    gap: 2px; /* Jarak kecil antara MK dan Dosen */
}

.prodi-input-status-wrapper-new .laporan-mk {
    font-size: 13px;
    color: #475569;
}

.prodi-input-status-wrapper-new .laporan-dosen {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

/* ==========================================================================
   GAYA UNTUK NOTIFIKASI LONCENG DI INPUT STATUS
   ========================================================================== */

/* Kontainer yang mengatur judul dan lonceng agar sejajar */
.prodi-input-status-wrapper-new .jadwal-sekarang-card .card-header-with-notification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9 !important; /* Pertahankan border card-title */
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
}

.prodi-input-status-wrapper-new .jadwal-sekarang-card .card-header-with-notification .card-title {
    margin-bottom: 0 !important; /* Hapus margin bawah dari judul */
    border-bottom: none !important; /* Hapus border duplikat */
    padding-bottom: 0 !important;
}

/* Gaya Tombol Lonceng */
.notification-bell-button {
    position: relative !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 5px 8px !important; /* Tambah padding agar badge tidak menempel tepi */
    color: #FFD700 !important; /* Warna ikon lonceng (Emas/Gold) */
    border-radius: 50% !important; /* Tambahkan border-radius agar lebih bulat */
    transition: all 0.2s ease !important; /* <<< GANTI INI: (dari 'color' menjadi 'all') */
    flex-shrink: 0;
    margin-left: auto !important; /* Dorong tombol ke kanan penuh */
    margin-right: -10px !important; /* Tarik kembali agar badge terlihat di dalam card */
    transform: translateY(0) !important; /* <<< TAMBAHKAN INI: (Posisi awal) */
    box-shadow: none !important; /* <<< TAMBAHKAN INI: (Shadow awal) */
}

.notification-bell-button:hover {
    color: #C39414 !important; /* Warna Merah saat hover */
    transform: translateY(-2px) !important; /* Opsional: Efek naik seperti tombol lain */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* <-- TAMBAHKAN BAYANGAN HOVER DI SINI */
}

.notification-bell-button svg {
    width: 28px !important; /* Perbesar sedikit */
    height: 28px !important;
    display: block !important;
    vertical-align: middle !important;
}
/* Gaya Badge Lingkaran Merah dengan Angka */
.notification-badge {
    position: absolute !important;
    top: -2px !important; /* Geser ke atas */
    right: -2px !important; /* Geser ke kanan */
    background-color: #ef4444 !important; /* Merah */
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    padding: 0 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    z-index: 5 !important;
}

/* Gaya List di dalam Modal Notifikasi */
.notification-list-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0;
}

.notification-list-content p {
    font-weight: 500;
    color: #1e293b;
}

.notification-list-content ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.notification-list-content .unreported-item {
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.notification-list-content .unreported-item strong {
    color: #d63638; /* Merah untuk penanda waktu */
}

.notification-list-content .unreported-item span {
    color: #475569;
}


/* ==========================================================================
   GAYA UNTUK JAM DIGITAL REALTIME (INPUT STATUS)
   ========================================================================== */

/* Find this block (or similar): */
.prodi-input-status-wrapper-new .input-status-subtitle {
    text-align: center;
    color: #475569;
    font-size: 14px;
    margin-bottom: 25px; /* Note this margin */
}

#digital-clock {
    display: inline-block !important; /* Ubah ke inline-block agar background membungkus teks */
    font-size: 18px !important;         /* Sedikit perkecil agar pas di badge */
    color: #0d1e4d  !important;         /* Teks putih */
    font-weight: bold !important;
    text-align: center !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
    background-color: #F7EDC6 !important; /* Latar belakang biru tua */
    padding: 4px 20px !important;        /* Padding atas/bawah | kiri/kanan */
    border-radius: 10px !important;       /* Bentuk pil */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: Tambah bayangan halus */
    
    width: fit-content; /* Lebar sesuai konten */
    margin-left: auto!important; /* Margin kiri otomatis */
    margin-right: auto !important; /* Margin kanan otomatis */
    
    text-align: center !important; /* Jaga text-align untuk konten di dalam badge */
    line-height: 1.2 !important;
    
    
}


/* Atur ulang text-align subtitle jika perlu */
.prodi-input-status-wrapper-new .input-status-subtitle {
    text-align: center; /* Pastikan subtitle juga center */
}

/* ==========================================================================
   GAYA UNTUK HIGHLIGHT BARIS WAKTU SEKARANG (MONITORING) - Stroke Merah + Inner Shadow Biru
   ========================================================================== */

.monitoring-table tbody tr.current-time-slot {
    outline: 2px solid #FAEFC5 !important; /* <<< TAMBAHKAN: Stroke/Garis Tepi Merah */
    outline-offset: -1px; /* Sesuaikan offset agar pas di luar border sel */
    box-shadow: none !important; /* Pastikan TR tidak punya box-shadow */
    /* Optional: Background berbeda untuk seluruh baris */
   
}

/* Terapkan inner shadow biru ke SETIAP SEL di dalam baris aktif */
.monitoring-table tbody tr.current-time-slot > td,
.monitoring-table tbody tr.current-time-slot > th.jam-cell {
    box-shadow: inset 0 0 5px 2px rgba(252, 236, 169, 1) !important; /* Inner shadow biru */
    background-color: inherit !important; /* Ambil background dari TR */
    outline: none !important; /* Pastikan sel tidak punya outline */
}

/* ==========================================================================
   GAYA UNTUK NOTIFIKASI SUKSES (TOAST INPUT STATUS)
   ========================================================================== */
/* Increase Specificity */
.prodi-input-status-wrapper-new .prodi-success-toast {
    position: fixed !important; /* Add important just in case */
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #166534 !important;
    color: #ffffff !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 1100 !important;
    opacity: 0 !important; /* Start transparent */
    visibility: hidden !important; /* Start hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease !important; /* Smoother transition */
}

.prodi-input-status-wrapper-new .prodi-success-toast.show {
    opacity: 1 !important; /* Make visible */
    visibility: visible !important;
}

/* Keep SVG and span styles as they were */
.prodi-input-status-wrapper-new .prodi-success-toast svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.prodi-input-status-wrapper-new .prodi-success-toast span {
    font-size: 14px;
    font-weight: 500;
}

/* ==========================================================================
   GAYA UNTUK SEL KEGIATAN NON-MK (KPS & MDR) DI JADWAL PERKELAS
   ========================================================================== */

/* Gaya dasar untuk sel KPS dan MDR (mirip istirahat tapi beda warna) */
.jadwal-perkelas-table .kps-cell,
.jadwal-perkelas-table .mdr-cell {
    font-weight: bold;
    font-size: 10px;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Warna untuk KPS (Contoh: Ungu Muda) */
.jadwal-perkelas-table .kps-cell {
    background-color: #ede9fe !important; /* light-blue-100 */
    color: #5b21b6; /* violet-800 */
}

/* Warna untuk MDR (Contoh: Kuning Muda) */
.jadwal-perkelas-table .mdr-cell {
    background-color: #FAD6AF !important; 
    color: #B34817; 
}

/* Pastikan warna zebra tidak menimpa warna KPS/MDR */
.jadwal-perkelas-table tr.slot-ganjil > td.kps-cell,
.jadwal-perkelas-table tr.slot-genap > td.kps-cell {
    background-color: #ede9fe !important;
}
.jadwal-perkelas-table tr.slot-ganjil > td.mdr-cell,
.jadwal-perkelas-table tr.slot-genap > td.mdr-cell {
    background-color: #FAD6AF !important;
}

/* Pastikan warna istirahat juga tidak tertimpa zebra */
.jadwal-perkelas-table tr.slot-ganjil > td.istirahat-cell,
.jadwal-perkelas-table tr.slot-genap > td.istirahat-cell {
    background-color: #fefce8 !important; /* Warna Kuning Muda */
}

/* ==========================================================================
   GAYA UNTUK TOMBOL LAPOR (INPUT STATUS) SAAT DISABLED
   ========================================================================== */

/* Target tombol lapor di dalam wrapper input status saat disabled */
.prodi-input-status-wrapper-new .button-lapor:disabled {
    background-color: #f1f5f9 !important; /* Latar abu-abu muda */
    color: #94a3b8 !important;            /* Teks abu-abu (untuk span) */
    cursor: not-allowed;                  /* Kursor "dilarang" */
    opacity: 0.8;                         /* Sedikit transparan */
    /* Tambahkan flexbox untuk mensejajarkan ikon dan teks */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Jarak antara ikon dan teks */
}

/* Target teks (span) di dalam tombol disabled */
.prodi-input-status-wrapper-new .button-lapor:disabled span {
    color: #94a3b8 !important; /* Pastikan teks tetap abu-abu */
}

/* Target IKON (svg) di dalam tombol disabled */
.prodi-input-status-wrapper-new .button-lapor:disabled svg.lapor-icon-check {
    fill: #22c55e !important; /* <-- WARNA HIJAU DI SINI */
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   GAYA UNTUK NOTIFIKASI LONCENG & MODAL (HALAMAN MONITORING)
   ========================================================================== */

/* Pastikan wrapper modal bisa ditemukan (jika modal di dalam wrapper) */
.prodi-monitoring-wrapper .status-modal-overlay {
    /* (Gaya overlay jika perlu) */
}

/* Atau jika di luar wrapper (lebih baik) */
.status-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 1050 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

.status-modal-content {
    background: #fff !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 450px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
    padding: 25px !important;
    position: relative !important;
    display: block !important;
}

/* Salin semua gaya modal dari .prodi-input-status-wrapper-new */
.status-modal-content .modal-title {
    margin-top: 0 !important; margin-bottom: 20px !important; font-size: 16px !important;
    font-weight: 600 !important; color: #1e293b !important;
    border-bottom: 1px solid #f1f5f9 !important; padding-bottom: 10px !important;
}
.status-modal-content p {
    font-size: 14px !important; color: #475569 !important; margin: 0 0 10px 0 !important;
}
.status-modal-content p strong { color: #334155 !important; }
.status-modal-content .modal-actions {
    margin-top: 25px !important; padding-top: 15px !important;
    border-top: 1px solid #f1f5f9 !important; display: flex !important;
    justify-content: flex-end !important; gap: 10px !important;
}



/* Gaya Tombol Lonceng (Global) */
.notification-bell-button {
    position: relative !important; background: none !important; border: none !important;
    cursor: pointer !important; padding: 5px 8px !important; color: #FFD700 !important;
    border-radius: 50% !important; transition: color 0.2s ease; flex-shrink: 0;
}
.notification-bell-button:hover { color: #c31432; }
.notification-bell-button svg {
    width: 28px !important; height: 28px !important; display: block !important; vertical-align: middle !important;
}
.notification-badge {
    position: absolute !important; top: -2px !important; right: -2px !important;
    background-color: #ef4444 !important; color: white !important; font-size: 10px !important;
    font-weight: bold !important; border-radius: 50% !important; min-width: 18px !important;
    height: 18px !important; line-height: 18px !important; text-align: center !important;
    padding: 0 4px !important; box-shadow: none!important; z-index: 5 !important;
}

/* Gaya List Modal Notifikasi (Global) */
.notification-list-content {
    max-height: 300px; overflow-y: auto; padding: 10px 0;
}
.notification-list-content p { font-weight: 500; color: #1e293b; }
.notification-list-content ul { list-style: none; padding: 0; margin-top: 15px; }
.notification-list-content .unreported-item {
    padding: 10px 0; border-bottom: 1px dashed #e2e8f0;
    display: flex; flex-direction: column; font-size: 13px;
}
.notification-list-content .unreported-item strong {
    color: #d63638; /* Merah untuk penanda waktu/kelas */
    font-size: 14px; /* Sedikit lebih besar */
}
.notification-list-content .unreported-item span {
    color: #475569;
    padding-left: 5px; /* Sedikit indentasi */
}

/* ==========================================================================
   GAYA TOMBOL SEKUNDER (BATAL/TUTUP) - (PERBAIKAN FINAL SPECIFICITY)
   ========================================================================== */
/*
 * Target: SEMUA tombol sekunder/tutup di Form dan Modal.
 * Metode: Menggunakan selector path lengkap yang spesifik untuk setiap lokasi
 * agar menang melawan style tema default (body.fl-builder-active .button).
*/

/* --- Gaya Dasar (Tombol Putih BENTUK PIL) --- */

/* Target 1: Tombol "Batal" di Form (Dosen, Kurikulum) */
body .prodi-crud-wrapper .prodi-content-card form.prodi-main-form .submit .button.prodi-button-batal,

/* Target 2: Halaman Input Status: Modal 1 (Laporan Normal) */
body .prodi-input-status-wrapper-new #modal-laporan-normal .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button,

/* Target 3: Halaman Input Status: Modal 2 (Laporan Tambahan) */
body .prodi-input-status-wrapper-new #modal-laporan-tambahan .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button,

/* Target 4: Halaman Input Status: Modal 3 (Notifikasi) */
body .prodi-input-status-wrapper-new #modal-notification-list .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button,

/* Target 5: Halaman Monitoring: Modal 1 (Notifikasi) */
body .prodi-monitoring-wrapper #modal-notification-list .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button,

/* Target 6: Halaman Rekap: Modal Edit Catatan */
body:not(.fl-builder-edit) #modal-edit-catatan .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button,
/* Target 7: Halaman Profil Dosen: Modal GCal */
body:not(.fl-builder-edit) #jadwal-gcal-modal .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    vertical-align: top !important;
    height: auto !important;
    padding: 10px 25px !important;      /* Padding untuk bentuk pil */
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 50px !important;     /* BENTUK PIL */
    text-shadow: none !important;
    line-height: normal !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
    text-transform: none !important; /* Mencegah teks menjadi KAPITAL */
}

/* --- Gaya Hover (Latar Abu-abu Muda) --- */

/* Target 1: Tombol "Batal" di Form (Dosen, Kurikulum) - HOVER */
body:not(.fl-builder-edit) .prodi-crud-wrapper .prodi-content-card form.prodi-main-form .submit .button.prodi-button-batal:hover,

/* Target 2: Halaman Input Status: Modal 1 (Laporan Normal) - HOVER */
body:not(.fl-builder-edit) .prodi-input-status-wrapper-new #modal-laporan-normal .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button:hover,

/* Target 3: Halaman Input Status: Modal 2 (Laporan Tambahan) - HOVER */
body:not(.fl-builder-edit) .prodi-input-status-wrapper-new #modal-laporan-tambahan .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button:hover,

/* Target 4: Halaman Input Status: Modal 3 (Notifikasi) - HOVER */
body:not(.fl-builder-edit) .prodi-input-status-wrapper-new #modal-notification-list .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button:hover,

/* Target 5: Halaman Monitoring: Modal 1 (Notifikasi) - HOVER */
body:not(.fl-builder-edit) .prodi-monitoring-wrapper #modal-notification-list .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button:hover,

/* Target 6: Halaman Rekap: Modal Edit Catatan - HOVER */
body:not(.fl-builder-edit) #modal-edit-catatan .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button:hover,
/* Target 7: Halaman Profil Dosen: Modal GCal - HOVER */
body:not(.fl-builder-edit) #jadwal-gcal-modal .status-modal-content .modal-actions .button.prodi-button-batal.modal-close-button:hover {
    background: #D8E3E6 !important;    /* Latar abu-abu sangat muda */
    border-color: #CF6348 !important;   /* Border abu-abu */
    color: #5C4328 !important;           /* Teks biru tua */
    transform: translateY(-2px) !important; /* EFEK NAIK DITAMBAHKAN DI SINI */
    box-shadow: none !important; 
}


/* ==========================================================================
   GAYA UNTUK TAB FOLDER HALAMAN DASHBOARD (BARU)
   ========================================================================== */

/* Wadah navigasi tab */
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0; /* Garis dasar pemisah */
    margin-bottom: 0; /* Penting: Dihapus agar tab aktif bisa menempel */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    gap: 0;
    margin-top: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
}

/* Tautan tab individual (Folder Style) */
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    color: #64748b; /* Warna default tab tidak aktif */
    background-color: #f1f5f9; /* Latar abu-abu untuk tab tidak aktif */
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 8px 8px 0 0; /* Sudut membulat hanya di atas */
    margin-right: 5px;
    margin-bottom: -1px; /* Trik agar menempel di atas garis container */
    position: relative;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: none;
}

/* Gaya tab aktif (Folder Style) */
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link.active {
    background-color: #ffffff; /* Latar putih, menyatu dengan card konten */
    color: #090999; /* Warna teks aktif */
    font-weight: 600; /* Font tebal */
    border-color: #e2e8f0;
    border-bottom: 1px solid #ffffff !important; /* Penting: Menutupi garis container di bawahnya */
    z-index: 2; /* Memastikan tab aktif di atas garis */
    box-shadow: none;
}

/* Hover tab TIDAK AKTIF (Folder Style) */
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link:not(.active):hover {
    background-color: #e2e8f0;
    color: #1e293b;
    border-color: #e2e8f0;
}
/* ==========================================================================
   GAYA UNTUK CAROUSEL DOSEN (DASHBOARD)
   ========================================================================== */

/* [BARU] Wrapper card untuk carousel */
.dosen-carousel-card-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    margin-top: 20px; /* Jarak dari judul tab H2 */
    position: relative; /* Agar tombol navigasi bisa diposisikan */
}

/* [BARU] Judul di dalam card carousel */
.dosen-carousel-title {
    margin-top: 0;
    margin-bottom: 25px; /* Jarak ke carousel */
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    text-align: center; /* Judul di tengah */
}

/* Pastikan slide memiliki tinggi yang konsisten */
.prodi-dosen-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px; /* Ruang untuk pagination di bawah */
}

/* Mengatur ukuran card profil agar tidak terlalu besar di dalam slide */
.prodi-dosen-carousel .profil-card {
    max-width: 1200px; /* Atur lebar maksimum card */
    margin: 0 auto;
    border: none; /* Hapus border card profil (sudah dibungkus) */
    box-shadow: none; /* Hapus shadow card profil (sudah dibungkus) */
}

/* PERBAIKAN: Mencegah card utama (profil-utama) membungkus (wrapping) 
  foto dan info saat berada di dalam carousel.
*/
.prodi-dosen-carousel .profil-utama {
    flex-wrap: nowrap !important; /* Paksa agar foto dan info tetap berdampingan */
    gap: 20px !important; /* Opsional: Kurangi jarak agar muat */
}

/* (Opsional) Sesuaikan ukuran foto agar lebih kecil di carousel */
.prodi-dosen-carousel .profil-foto, 
.prodi-dosen-carousel .profil-foto-placeholder {
    width: 180px; /* Lebih kecil dari 180px */
    height: 240px; /* Disesuaikan dari 240px */
}

/* (Opsional) Sesuaikan ukuran font nama agar tidak terlalu besar */
.prodi-dosen-carousel .profil-nama {
    font-size: 24px; /* Lebih kecil dari 28px */
}

/* Kustomisasi Tombol Navigasi Panah (prodi-carousel-nav) */
.prodi-carousel-nav {
    color: #090999 !important; /* Warna biru tema */
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #e2e8f0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    top: 55% !important; /* [DIUBAH] Reposisi tombol agar di tengah slide */
}
.prodi-carousel-nav::after {
    font-size: 20px !important; /* Ukuran ikon panah */
    font-weight: bold !important;
}
.prodi-carousel-nav:hover {
    background-color: #ffffff !important;
    color: #06066e !important;
    transform: translateY(-50%) scale(1.1) !important; /* Perbaiki transform hover */
}

/* Penyesuaian posisi spesifik Kiri/Kanan */
.dosen-carousel-card-wrapper .swiper-button-prev.prodi-carousel-nav {
    left: 15px !important; /* Jarak dari tepi card */
}
.dosen-carousel-card-wrapper .swiper-button-next.prodi-carousel-nav {
    right: 15px !important; /* Jarak dari tepi card */
}

/* Kustomisasi Pagination (Titik-titik) */
.dosen-carousel-card-wrapper .prodi-carousel-pagination {
    bottom: 15px !important; /* Posisikan di dalam card */
}
.dosen-carousel-card-wrapper .prodi-carousel-pagination .swiper-pagination-bullet {
    background-color: #cbd5e1;
    opacity: 0.8;
}
.dosen-carousel-card-wrapper .prodi-carousel-pagination .swiper-pagination-bullet-active {
    background-color: #090999;
    opacity: 1;
}



/* ==========================================================================
   GAYA UNTUK INKONSISTENSI PENGAMPU (PLOT JADWAL)
   ========================================================================== */

/* Gaya untuk sel yang inkonsisten (MK sama, Dosen beda, di Kelas yg sama) */
.jadwal-matrix-table td.cell-inkonsisten {
    background-color: #F5E9DF !important; /* Kuning Terang (sama seperti bentrok sebagian) */
    border: 1px solid #FFCA99 !important;
}

/* ==========================================================================
   GAYA UNTUK HALAMAN REKAP PERKULIAHAN
   ========================================================================== */

/* Kontainer Filter Tanggal */
.prodi-rekap-filter-container {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 87, 158, 0.07);
    padding: 18px 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 20px;
}

.prodi-rekap-filter-container form {
    display: contents; /* Biarkan form mengikuti layout flex parent */
}

.prodi-rekap-filter-container .filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prodi-rekap-filter-container label {
    font-weight: 500;
    color: #334155;
    font-size: 14px;
    flex-shrink: 0;
}

/* Input Datepicker (Sekarang digunakan di Rekap & Plot) */
.prodi-rekap-filter-container .rekap-datepicker,
.prodi-global-filter-container .rekap-datepicker {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px !important; /* <-- Ganti jadi pill */
    padding: 10px 20px !important;   /* <-- Sesuaikan padding */
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    width: 150px;
    transition: all 0.2s ease-in-out;
}
.prodi-rekap-filter-container .rekap-datepicker:focus {
    border-color: #090999;
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2);
    outline: none;
    background-color: #ffffff;
}

/* Tombol Filter (Gaya Primer) */
.prodi-rekap-filter-container .button-primary {
    background-color: #090999 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 25px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: auto !important;
    line-height: normal !important;
    text-shadow: none !important;
    transition: all 0.2s;
}
.prodi-rekap-filter-container .button-primary:hover {
    background-color: #06066e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(9,9,153,0.2);
}

/* Tabel Rekap */
.rekap-perkuliahan-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.rekap-perkuliahan-table th,
.rekap-perkuliahan-table td {
    padding: 10px !important;
    vertical-align: top !important;
    font-size: 13px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: left !important; /* Memaksa rata kiri (default) */
}





/* Header Grup Kelas */
/* Header Grup Kelas (TIDAK DIGUNAKAN LAGI, bisa dihapus atau biarkan) */
.rekap-perkuliahan-table .rekap-kelas-group-header td {
    background-color: #f1f5f9 !important;
    font-weight: bold !important;
    color: #1e293b !important;
    font-size: 14px !important;
    padding: 12px !important;
}

/* [DIUBAH] Tampilkan kolom KELAS */

.rekap-perkuliahan-table .col-kelas { 
    width: 8% !important; /* Beri lebar, misal 8% */
    text-align: center !important;
    vertical-align: middle !important; /* Posisikan teks di tengah (vertikal) */
    font-weight: bold !important;
    color: #1e293b !important;
    /* [PENTING] Border bawah untuk sel KELAS (rowspan) */
    border-bottom: 3px solid #0d1e4d !important; 
}
/* Pengaturan Lebar Kolom (Total 100%) */
.rekap-perkuliahan-table .col-kelas { width: 8% !important; }
.rekap-perkuliahan-table .col-no { width: 4% !important; }
.rekap-perkuliahan-table .col-mk { width: 20% !important; }
.rekap-perkuliahan-table .col-dosen { width: 22% !important; } /* dikurangi 3% */
.rekap-perkuliahan-table .col-sks { width: 5% !important; }
.rekap-perkuliahan-table .col-rekap-tgl { width: 12% !important; }
.rekap-perkuliahan-table .col-total-hadir { width: 8% !important; }
.rekap-perkuliahan-table .col-ket { width: 15% !important; } /* dikurangi 3% */
.rekap-perkuliahan-table .col-aksi { width: 6% !important; } /* [BARU] 6% */
/* Total: 8 + 4 + 20 + 22 + 5 + 12 + 8 + 15 + 6 = 100% */


/* [BARU] Garis pemisah tebal antar grup kelas (hanya di baris terakhir) */
.rekap-perkuliahan-table tr.rekap-kelas-last-row td {
    border-bottom: 3px solid #0d1e4d !important;
}

/* Pastikan sel dosen (team teaching) rata tengah vertikal */
.rekap-perkuliahan-table td.col-dosen {
    vertical-align: middle !important;
}

/* Pastikan sel dosen (team teaching) rata tengah vertikal */
.rekap-perkuliahan-table td.col-dosen {
    vertical-align: middle !important;
}

/* Penyesuaian Alignment (Header) */
.prodi-crud-wrapper .prodi-table-wrapper .rekap-perkuliahan-table thead th.col-no,
.prodi-crud-wrapper .prodi-table-wrapper .rekap-perkuliahan-table thead th.col-sks,
.prodi-crud-wrapper .prodi-table-wrapper .rekap-perkuliahan-table thead th.col-rekap-tgl,
.prodi-crud-wrapper .prodi-table-wrapper .rekap-perkuliahan-table thead th.col-total-hadir,
.prodi-crud-wrapper .prodi-table-wrapper .rekap-perkuliahan-table thead th.col-ket,
.prodi-crud-wrapper .prodi-table-wrapper .rekap-perkuliahan-table thead th.col-aksi {
    text-align: center !important;
}
    
.prodi-crud-wrapper .prodi-table-wrapper .rekap-perkuliahan-table thead th.col-kelas{
    text-align: center !important;
}

/* Penyesuaian Alignment (Data) */
.rekap-perkuliahan-table td.col-no,
.rekap-perkuliahan-table td.col-sks,
.rekap-perkuliahan-table td.col-rekap-tgl,
.rekap-perkuliahan-table td.col-total-hadir {
    text-align: center !important;
    vertical-align: middle !important;
}

/* [BARU] Garis pemisah tebal antar grup kelas */

/* Bagian 1: Terapkan border ke semua sel di baris terakhir (kecuali sel KELAS, karena tidak ada) */
.rekap-perkuliahan-table tr.rekap-kelas-last-row td {
    border-bottom: 1px solid #E6EAF0 !important;
}

/* Bagian 2: Terapkan border bawah ke sel KELAS (yang punya rowspan) */
.rekap-perkuliahan-table td.col-kelas {
    border-bottom: 1px solid #E6EAF0 !important;
}

/* Pastikan sel rowspan rata tengah vertikal */
.rekap-perkuliahan-table td.col-kelas,
.rekap-perkuliahan-table td.col-no,
.rekap-perkuliahan-table td.col-mk,
.rekap-perkuliahan-table td.col-sks,
.rekap-perkuliahan-table td.col-rekap-tgl,
.rekap-perkuliahan-table td.col-total-hadir,
.rekap-perkuliahan-table td.col-ket {
    vertical-align: top !important;
}


/* ==========================================================================
   GAYA UNTUK FITUR CATATAN REKAP
   ========================================================================== */

/* [BARU] Penyesuaian untuk kolom Aksi */
.rekap-perkuliahan-table td.col-aksi {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Tombol pensil edit */
.edit-catatan-button {
    opacity: 0.3; /* Sembunyikan sedikit */
    transition: all 0.2s ease;
}

/* Tampilkan tombol pensil saat hover di baris */
.rekap-perkuliahan-table tbody tr:hover .edit-catatan-button {
    opacity: 1;
}

/* Modal (menggunakan gaya modal input status yang sudah ada) */
#modal-edit-catatan .status-modal-overlay {
    /* (Sudah ada) */
}
#modal-edit-catatan .status-modal-content {
    /* (Sudah ada) */
}

/* ==========================================================================
   GAYA TAB FOLDER UNTUK HALAMAN REKAP & PETA PLOT (LOGO + TEKS)
   ========================================================================== */

/* 1. Wadah navigasi tab */
.prodi-crud-wrapper .prodi-tabs.rekap-tabs,
.prodi-peta-plot-page .prodi-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0; 
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

/* 2. Tautan tab individual (Gaya Folder) */
.prodi-crud-wrapper .prodi-tabs.rekap-tabs .prodi-tab-link,
.prodi-peta-plot-page .prodi-tabs .prodi-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Jarak antara logo dan teks */
    padding: 12px 20px;
    font-size: 14px; /* [PENTING] Pastikan teks terlihat */
    text-decoration: none;
    font-weight: 500;
    color: #64748b; 
    background-color: #f1f5f9; /* Latar abu-abu (folder) */
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 8px 8px 0 0; /* Sudut folder */
    margin-right: 5px;
    margin-bottom: -1px; /* Trik menempel */
    position: relative;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: none;
}

/* 3. Gaya tab aktif (Folder Aktif) */
.prodi-crud-wrapper .prodi-tabs.rekap-tabs .prodi-tab-link.active,
.prodi-peta-plot-page .prodi-tabs .prodi-tab-link.active {
    background-color: #ffffff; /* Latar putih (menyatu card) */
    color: #090999; 
    font-weight: 600; 
    border-color: #e2e8f0;
    border-bottom: 1px solid #ffffff !important; /* Menutupi garis */
    z-index: 2;
    box-shadow: none;
}

/* 4. Hover tab TIDAK AKTIF */
.prodi-crud-wrapper .prodi-tabs.rekap-tabs .prodi-tab-link:not(.active):hover,
.prodi-peta-plot-page .prodi-tabs .prodi-tab-link:not(.active):hover {
    background-color: #e2e8f0;
    color: #1e293b;
    border-color: #e2e8f0;
}

/* 5. Buat ruang untuk ikon/logo */
.prodi-crud-wrapper .prodi-tabs.rekap-tabs .prodi-tab-link::before,
.prodi-peta-plot-page .prodi-tabs .prodi-tab-link::before {
    content: '';
    display: inline-block;
    width: 24px;  
    height: 24px; 
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important; /* [PENTING] Hapus kotak hitam */
}

/* 6. Atur gambar spesifik untuk setiap tab */
.prodi-crud-wrapper .prodi-tabs.rekap-tabs .prodi-tab-link[data-tab="to"]::before,
.prodi-peta-plot-page .prodi-tabs .prodi-tab-link[data-tab="to"]::before {
    background-image: url('../images/logo-to.png');
}

.prodi-crud-wrapper .prodi-tabs.rekap-tabs .prodi-tab-link[data-tab="mlog"]::before,
.prodi-peta-plot-page .prodi-tabs .prodi-tab-link[data-tab="mlog"]::before {
    background-image: url('../images/logo-mlog.png');
}

.prodi-crud-wrapper .prodi-tabs.rekap-tabs .prodi-tab-link[data-tab="mtj"]::before,
.prodi-peta-plot-page .prodi-tabs .prodi-tab-link[data-tab="mtj"]::before {
    background-image: url('../images/logo-mtj.png');
}
/* ==========================================================================
   GAYA UNTUK LOGO TAB FOLDER DASHBOARD
   ========================================================================== */

/* 1. Buat ruang untuk ikon/logo */
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link::before {
    content: '';
    display: inline-block;
    width: 24px;  /* Atur ukuran logo */
    height: 24px; /* Atur ukuran logo */
    /* Hapus 'margin-right: 8px;' jika Anda ingin logo saja tanpa teks */
    /* margin-right: 8px; */ 
    background-size: contain; /* Agar logo pas */
    background-repeat: no-repeat;
    background-position: center;
    /* Kita tidak pakai background-color: currentColor; karena ini logo berwarna */
}

/* 2. Atur gambar spesifik untuk setiap tab */
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="to"]::before {
    background-image: url('../images/logo-to.png');
}

.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="mlog"]::before {
    background-image: url('../images/logo-mlog.png');
}

.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="mtj"]::before {
    background-image: url('../images/logo-mtj.png');
}

/* ==========================================================================
   PERBAIKAN FORCE-CENTER UNTUK HEADER PETA PLOT
   ========================================================================== */

/*
 * Aturan ini menargetkan header SKS dan TINGKAT di halaman peta-plot
 * dengan selector yang sangat spesifik untuk mengalahkan tema.
*/
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-peta-plot-page .peta-plot-table th.col-sks,
.prodi-crud-wrapper.prodi-frontend-wrapper .prodi-peta-plot-page .peta-plot-table th.col-tingkat {
    text-align: center !important;
}

/* ==========================================================================
   [BARU] GAYA UNTUK FILTER TANGGAL VERTIKAL (PERBAIKAN)
   ========================================================================== */

/* * Targetkan class .filter-item-vertical di dalam form.
 * Jadikan item ini sebagai flex container BARU dengan arah vertikal.
*/
.prodi-global-filter-container form .filter-item.filter-item-vertical {
    display: flex !important; /* Paksa item ini menjadi flex container */
    flex-direction: column !important; /* Atur arahnya jadi vertikal (tumpuk) */
    align-items: flex-start !important; /* Ratakan label ke kiri */
    gap: 5px !important; /* Jarak antara label dan input */
}

/* Sesuaikan labelnya agar rapi */
.prodi-global-filter-container form .filter-item-vertical label {
    font-weight: 500;
    padding-left: 10px; /* Sedikit indentasi */
    /* Hapus margin-bottom jika ada */
    margin-bottom: 0; 
}

/* Pastikan inputnya mengambil lebar yang pas */
.prodi-global-filter-container form .filter-item-vertical .rekap-datepicker {
    width: 100%; /* Buat input mengisi lebar kontainer item */
    box-sizing: border-box; /* Pastikan padding tidak merusak lebar */
}

/* ==========================================================================
   [REVISI] GAYA UNTUK TABEL E-JADWAL (RESPONSIF & SPESIFIK)
   ========================================================================== */

/* 1. Wrapper untuk scroll horizontal di mobile */
/* Menggunakan .prodi-frontend-wrapper untuk meningkatkan spesifisitas */
.prodi-frontend-wrapper .e-jadwal-table-wrapper {
    overflow-x: auto;
}

/* 2. Styling Tabel Utama */
.prodi-frontend-wrapper .e-jadwal-table {
    width: 100%;
    min-width: 500px; /* Lebar minimum sebelum scroll */
    border-collapse: collapse;
}

.prodi-frontend-wrapper .e-jadwal-table th,
.prodi-frontend-wrapper .e-jadwal-table td {
    padding: 12px 15px; /* Padding standar */
    text-align: left;
    vertical-align: middle;
    font-size: 14px; /* Font standar */
    border-bottom: 1px solid #f1f5f9;
    /* Reset properti tema yang mungkin mengganggu */
    background: none; 
}

.prodi-frontend-wrapper .e-jadwal-table th {
    font-weight: 600;
    color: #475569;
    /* Hapus/timpa gradien header jika ada */
    background: #f8fafc !important; /* Latar header abu-abu muda */
    color: #475569 !important; /* Teks header gelap */
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 3. Pengaturan Lebar Kolom (Disesuaikan setelah hapus profil) */
.prodi-frontend-wrapper .e-jadwal-table th.col-no,
.prodi-frontend-wrapper .e-jadwal-table td.col-no {
    width: 10%; /* Lebar kolom No. */
    text-align: left;
}

.prodi-frontend-wrapper .e-jadwal-table th.col-nama,
.prodi-frontend-wrapper .e-jadwal-table td.col-nama {
    width: 58%; /* Lebar kolom Nama (diperbesar) */
    padding-left: 1px !important;
    text-align: left;
}

.prodi-frontend-wrapper .e-jadwal-table th.col-link,
.prodi-frontend-wrapper .e-jadwal-table td.col-link {
    width: 32%; /* Lebar kolom Link ICS */
    text-align: left !important; /* Data/Ikon rata kiri */
    padding-left: 1px !important; /* Beri sedikit jarak dari tepi kiri */
}



.prodi-frontend-wrapper .e-jadwal-table td.col-nama {
    text-align: left !important;
}

/* 4. Styling Link (Hanya ICS) */
.prodi-frontend-wrapper .e-jadwal-table .e-jadwal-link-ics {
    display: inline-block; /* Membantu styling gambar */
    text-decoration: none; /* Menghilangkan underline untuk link ICS */
}

/* Efek hover untuk Link ICS (gambar logo) */
.prodi-frontend-wrapper .e-jadwal-table .e-jadwal-link-ics img {
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.9;
}
.prodi-frontend-wrapper .e-jadwal-table .e-jadwal-link-ics:hover img {
    transform: scale(1.1); /* Sedikit membesar saat hover */
    opacity: 1;
}

/* 5. Mobile Friendly (Sesuai Permintaan) */
@media (max-width: 600px) {
    .prodi-frontend-wrapper .e-jadwal-table th,
    .prodi-frontend-wrapper .e-jadwal-table td {
        font-size: 11px;} 
}



/* ==========================================================================
   [BARU] GAYA UNTUK POP-UP COPY LINK (TOAST)
   ========================================================================== */
.prodi-copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #334155; /* Latar belakang gelap */
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px; /* Bentuk pil */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.prodi-copy-toast.show {
    opacity: 1;
    visibility: visible;
    bottom: 40px; /* Efek sedikit naik saat muncul */
}

/* ==========================================================================
   [BARU] PENGATURAN LEBAR KOLOM TABEL PRODUKTIVITAS (LEBIH SPESIFIK)
   ========================================================================== */

/* Paksa tabel untuk mematuhi lebar kolom yang ditentukan */
#tab-pane-detail .produktivitas-rank-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Sesuaikan persentase di bawah ini sesuai kebutuhan Anda */
#tab-pane-detail .produktivitas-rank-table .col-rank { 
    width: 5% !important;
    text-align: center !important;
}
#tab-pane-detail .produktivitas-rank-table .col-nama { 
    width: 27% !important; 
}
#tab-pane-detail .produktivitas-rank-table .col-skor-akhir { 
    width: 8% !important; 
    text-align: center !important;
}
#tab-pane-detail .produktivitas-rank-table .col-skor-pendidikan { 
    width: 18% !important; 
    text-align: center !important;
}
#tab-pane-detail .produktivitas-rank-table .col-skor-penelitian { 
    width: 18% !important; 
    text-align: center !important;
}
#tab-pane-detail .produktivitas-rank-table .col-skor-pengabdian { 
    width: 18% !important; 
    text-align: center !important;
}
#tab-pane-detail .produktivitas-rank-table .col-rincian { 
    width: 6% !important; 
    text-align: center !important;
}

/* Memastikan sel di <tbody> juga rata tengah (jika diperlukan) */
#tab-pane-detail .produktivitas-rank-table tbody td {
    vertical-align: middle !important;
}

/* Styling Sel (Rata Tengah untuk Angka) */
.produktivitas-rank-table td,
.produktivitas-rank-table th {
    text-align: left;
    vertical-align: middle;
    padding: 12px 15px;
}

.produktivitas-rank-table .col-rank,
.produktivitas-rank-table .col-skor-akhir,
.produktivitas-rank-table .col-skor-pendidikan,
.produktivitas-rank-table .col-skor-penelitian,
.produktivitas-rank-table .col-skor-pengabdian {
    text-align: center!important;
}

/* Styling Skor Akhir (Ukuran Disesuaikan) */
.produktivitas-rank-table th.col-skor-akhir {
    font-size: 13px; /* <-- Perkecil font header */
    vertical-align: middle;
}

.produktivitas-rank-table td.col-skor-akhir {
    font-size: 15px; /* <-- Perkecil font body (dari 1.2em) */
    font-weight: 700;
    color: #090999;
}

.produktivitas-rank-table .col-nama a {
    font-weight: 600;
    color: #334155;
    text-decoration: none;
}
.produktivitas-rank-table .col-nama a:hover {
    color: #090999;
}

/* ==========================================================================
   [BARU] Sembunyikan Ikon Tab Bawaan di Halaman Produktivitas
   (Karena sudah menggunakan Emoji 🏆, 📊)
   ========================================================================== */

/*
 * Aturan ini secara spesifik menargetkan ikon ::before
 * HANYA untuk tab 'rank' dan 'detail'
 * dan menyembunyikannya.
*/
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="rank"]::before,
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="detail"]::before,
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="summary"]::before {
    display: none !important;
}
/* ==========================================================================
   [BARU] GAYA UNTUK TOMBOL & DETAIL SKOR PRODUKTIVITAS
   ========================================================================== */

/* Styling Tombol Toggle [ + ] */
.produktivitas-rank-table .toggle-detail-btn {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}



/* [PERBAIKAN] Styling untuk baris detail 7-sel */

/* 1. Styling untuk sel offset (kolom 1, 2, 3, 7) */
#tab-pane-detail .produktivitas-rank-table .produktivitas-detail-row td.detail-offset {
    background-color: #F7F4ED !important;
    border: none !important;
    padding: 0 !important;
    border-bottom: 1px dashed #0B56B8 !important; /* Garis bawah agar rapi */
    vertical-align: top !important; /* Pastikan sel offset juga rata atas */
}

/* 2. Styling untuk sel konten (kolom 4, 5, 6) */
#tab-pane-detail .produktivitas-rank-table .produktivitas-detail-row td.detail-content {
    background-color: #F7F4ED !important; /* Latar abu-abu sangat muda */
    border-bottom: 1px dashed #0B56B8 !important;
    padding: 25px !important;
    vertical-align: top !important; /* Konten mulai dari atas (DIPAKSA) */
}

/* 3. Styling konten di dalam sel (nama kelas lama masih bisa dipakai) */
.produktivitas-detail-content {
    font-size: 13px;
    color: #334155;
}

/* (Hapus aturan flexbox untuk .detail-kategori dan .detail-kategori > li) */

.produktivitas-detail-content .detail-kategori-item strong {
    font-size: 14px;
    color: #0d1e4d;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
    margin-bottom: 8px;
    display: block;
}

.produktivitas-detail-content .detail-kategori-item ul {
    list-style: disc;
    padding-left: 10px!important;
    margin: 0;
}

.produktivitas-detail-content .detail-kategori-item li {
    margin-bottom: 3px;
}

/* Styling Tombol Toggle [ ▼ ] (Meniru gaya .prodi-icon-button.button-set) */
.produktivitas-rank-table .toggle-detail-btn {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 50% !important; /* Bulat */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    
    /* Warna biru (button-set) */
    background-color: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;

    /* Styling Teks Segitiga */
    font-size: 10px; /* Ukuran ikon segitiga */
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.produktivitas-rank-table .toggle-detail-btn:hover {
    background-color: #4338ca !important; /* Biru solid */
    color: #fff !important; /* Teks putih */
    transform: scale(1.1);
}

/* [TAMBAHKAN BLOK INI] 
   Aturan ini memaksa tombol untuk kembali ke gaya normal (biru muda) 
   saat di-fokus (setelah diklik), kecuali jika mouse masih ada di atasnya. */
.produktivitas-rank-table .toggle-detail-btn:focus {
    background-color: #eef2ff !important;
    color: #4338ca !important;
    transform: scale(1.0);
    box-shadow: none !important;
    outline: none !important;
}
.produktivitas-rank-table .toggle-detail-btn:hover:focus {
    background-color: #4338ca !important; /* Biru solid */
    color: #fff !important; /* Teks putih */
    transform: scale(1.1);
}

/* ==========================================================================
   [REVISI FINAL] GAYA UNTUK GRID PERINGKAT PRODUKTIVITAS
   ========================================================================== */

/* Grid 3 Kolom */
.produktivitas-rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Tiga kolom sama lebar */
    gap: 20px;
    margin-top: 15px;
}

/* Kartu Individual per Prodi */
.produktivitas-rank-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 87, 158, 0.05);
}

.produktivitas-rank-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

/* Daftar Peringkat di dalam Kartu */
.produktivitas-rank-list {
    list-style: none;
    padding: 15px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rank-list-item-empty {
    text-align: center;
    font-style: italic;
    color: #94a3b8;
    padding: 10px;
}

/* Item Peringkat Individual (Dosen) - <li> */
.rank-list-item {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    border-radius: 0;
}

/* Link Wrapper - <a> */
.rank-list-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit; 
    border: 1px solid #f1f5f9;
    background: #fdfdff;
    border-left-width: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Styling Peringkat 1, 2, 3 (di <a>) */
.rank-list-item.rank-1 .rank-list-link { border-left-color: #FFD700; }
.rank-list-item.rank-2 .rank-list-link { border-left-color: #C0C0C0; }
.rank-list-item.rank-3 .rank-list-link { border-left-color: #CD7F32; }

/* [PERBAIKAN HOVER] Menggunakan class .is-hovering dari JS untuk mengalahkan tema */
.prodi-crud-wrapper #tab-pane-rank .produktivitas-rank-list .rank-list-link.is-hovering {
    background-color: #f8fafc; /* Latar abu-abu lebih gelap */
    border-color: #e2e8f0; /* Border lebih gelap */
}

/* Konten di dalam <a> */
.rank-list-foto img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rank-list-info {
    flex-grow: 1;
    min-width: 0;
}

.rank-list-nama {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-list-score {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.rank-list-medal img {
    width: 55px; /* Ukuran medali lebih kecil */
    height: auto;
    flex-shrink: 0;
}

/* Responsif untuk layar kecil (Mobile) */
@media (max-width: 992px) {
    .produktivitas-rank-grid {
        grid-template-columns: 1fr; /* Tumpuk 1 kolom */
    }
}


/* ==========================================================================
   [BARU] Sembunyikan Ikon Tab Bawaan di Halaman Produktivitas
   (Menambahkan 'pedoman')
   ========================================================================== */
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="rank"]::before,
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="detail"]::before,
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="summary"]::before,
.prodi-crud-wrapper .prodi-tabs.dashboard-tabs .prodi-tab-link[data-tab="pedoman"]::before {
    display: none !important;
}

/* ==========================================================================
   [BARU] GAYA UNTUK TAB PEDOMAN PRODUKTIVITAS
   ========================================================================== */

.pedoman-wrapper {
    max-width: 900px; /* Batasi lebar agar mudah dibaca */
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
}

.pedoman-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}
.pedoman-section:last-child {
    border-bottom: none;
}

.pedoman-section h3 {
    font-size: 20px;
    font-weight: 600;
    color: #0d1e4d;
    margin-top: 0;
    margin-bottom: 15px;
}

.pedoman-highlight {
    background-color: #eef2ff; /* Biru muda */
    border: 1px solid #c7d2fe;
    border-left: 4px solid #4338ca; /* Biru tua */
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-family: monospace;
    font-size: 14px;
    color: #1e293b;
    margin: 15px 0;
}

.pedoman-list,
.pedoman-list-decimal {
    padding-left: 20px;
    margin-top: 10px;
}

.pedoman-list li {
    margin-bottom: 10px;
}
.pedoman-list li p {
    margin: 5px 0 0 0;
    color: #475569;
}

.pedoman-list-decimal li {
    margin-bottom: 15px;
}

.pedoman-kategori-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.pedoman-kategori-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
}

.pedoman-kategori-card h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
}

.pedoman-kategori-card .pedoman-list.metrik {
    font-size: 13px;
    padding-left: 18px;
}
.pedoman-kategori-card .pedoman-list.metrik li {
    margin-bottom: 8px;
    color: #475569;
}
.pedoman-kategori-card .pedoman-list.metrik li b {
    color: #334155;
}

/* Responsif untuk grid pedoman */
@media (max-width: 992px) {
    .pedoman-kategori-grid {
        grid-template-columns: 1fr; /* Tumpuk 1 kolom */
    }
}

/* ==========================================================================
   GAYA KHUSUS DASHBOARD HASIL EVALUASI (SPM)
   ========================================================================== */

/* --- 1. Penyesuaian Container Filter --- */
/* Agar filter tidak terlalu sempit di layar kecil */
.prodi-global-filter-container {
    flex-wrap: wrap;
}

.prodi-global-filter-container .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.prodi-global-filter-container select {
    min-width: 150px; /* Lebar minimal dropdown */
    border-radius: 50px;
    padding: 5px 30px 5px 15px;
    font-size: 13px;
    background-position: right 10px center;
}

/* Input Search khusus filter */
#filter-search {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px 15px;
    width: 200px;
    font-size: 13px;
    transition: all 0.3s;
}
#filter-search:focus {
    width: 250px; /* Efek melebar saat fokus */
    border-color: #090999;
    outline: none;
}

/* --- 2. Tabel Hasil Evaluasi --- */
#evaluasi-result-tbody td {
    vertical-align: middle !important;
    font-size: 13px;
}

#evaluasi-result-tbody .text-muted {
    color: #94a3b8;
    font-size: 11px;
}

/* Tombol Detail (Mata) */
.btn-detail-evaluasi {
    color: #090999 !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 50px !important;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-detail-evaluasi:hover {
    background: #090999 !important;
    color: white !important;
    transform: scale(1.1);
}

/* --- 3. Modal Detail Evaluasi --- */
#modal-detail-evaluasi .status-modal-content {
    padding: 0; /* Reset padding container */
    overflow: hidden;
}

#modal-detail-evaluasi h4.modal-title {
    background-color: #f8fafc;
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 18px;
    color: #0d1e4d;
}

#modal-detail-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto; /* Scroll jika konten panjang */
}

/* Tabel Info di dalam Modal */
#modal-detail-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
#modal-detail-body table th, 
#modal-detail-body table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}
#modal-detail-body table th {
    color: #64748b;
    font-weight: 500;
    width: 30%;
}
#modal-detail-body table td {
    color: #1e293b;
    font-weight: 600;
}

/* List Rincian Nilai */
#modal-detail-body ol {
    padding-left: 25px;
    margin-bottom: 20px;
}
#modal-detail-body ol li {
    margin-bottom: 6px;
    color: #475569;
    border-bottom: 1px dashed #f1f5f9;
    padding-bottom: 2px;
}
#modal-detail-body ol li strong {
    float: right; /* Nilai di kanan */
}

/* Kotak Komentar */
#modal-detail-body h5 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #0d1e4d;
    font-size: 15px;
    border-left: 4px solid #090999;
    padding-left: 10px;
}

/* Footer Modal (Tombol Tutup) */
#modal-detail-evaluasi .modal-actions {
    padding: 15px 20px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: right;
    margin-top: 0;
}

/* ==========================================================================
   GAYA TAB NAVIGASI HASIL EVALUASI (LOGO & WARNA)
   ========================================================================== */

/* 1. Reset gaya ikon default (mask) agar logo asli terlihat */
#eval-result-tabs .prodi-tab-link::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: transparent !important; /* Hapus warna solid mask */
    -webkit-mask-image: none !important;      /* Hapus mask SVG */
    mask-image: none !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

/* 2. Atur Logo untuk Masing-masing Prodi */
/* Perhatikan: Selector atribut [data-tab="..."] harus sesuai dengan HTML (Case Sensitive) */

/* Logo TO */
#eval-result-tabs .prodi-tab-link[data-tab="TO"]::before {
    background-image: url('../images/logo-to.png');
}

/* Logo MLOG */
#eval-result-tabs .prodi-tab-link[data-tab="MLOG"]::before {
    background-image: url('../images/logo-mlog.png');
}

/* Logo MTJ */
#eval-result-tabs .prodi-tab-link[data-tab="MTJ"]::before {
    background-image: url('../images/logo-mtj.png');
}

/* 3. (Opsional) Penyesuaian Warna Tab Aktif */
/* Agar tab aktif memiliki border bawah sesuai warna prodi masing-masing */

#eval-result-tabs .prodi-tab-link[data-tab="TO"].active {
    color: #090999; /* Biru */
    border-bottom-color: #ffffff !important; 
}

#eval-result-tabs .prodi-tab-link[data-tab="MLOG"].active {
    color: #c31432; /* Merah */
    border-bottom-color: #ffffff !important;
}

#eval-result-tabs .prodi-tab-link[data-tab="MTJ"].active {
    color: #166534; /* Hijau */
    border-bottom-color: #ffffff !important;
}

/* ==========================================================================
   PENGATURAN ALIGNMENT TABEL HASIL EVALUASI (URGENT FIX)
   ========================================================================== */

/* 1. Rata Tengah untuk kolom: No(1), Tanggal(2), Kelas(4), Rerata(7), Detail(8) */
#evaluasi-result-tbody td:nth-child(1),
#evaluasi-result-tbody td:nth-child(2),
#evaluasi-result-tbody td:nth-child(4),
#evaluasi-result-tbody td:nth-child(7),
#evaluasi-result-tbody td:nth-child(8) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* 2. Rata Kiri untuk kolom teks panjang: Responden(3), Mata Kuliah(5), Dosen(6) */
#evaluasi-result-tbody td:nth-child(3),
#evaluasi-result-tbody td:nth-child(5),
#evaluasi-result-tbody td:nth-child(6) {
    text-align: left !important;
    vertical-align: middle !important;
    padding-left: 15px !important; /* Memberi sedikit jarak dari garis kiri */
}

/* 3. Styling khusus untuk Nama Responden & NIM agar lebih rapi */
#evaluasi-result-tbody td:nth-child(3) small {
    display: block;
    margin-top: 2px;
    color: #64748b; /* Warna abu-abu untuk NIM */
}

/* 4. Penyesuaian Header (Agar sinkron dengan body) */
/* Kita targetkan tabel di dalam wrapper frontend secara spesifik */
.prodi-frontend-wrapper .wp-list-table thead th:nth-child(1), /* No */
.prodi-frontend-wrapper .wp-list-table thead th:nth-child(2), /* Tanggal */
.prodi-frontend-wrapper .wp-list-table thead th:nth-child(4), /* Kelas */
.prodi-frontend-wrapper .wp-list-table thead th:nth-child(7), /* Rerata */
.prodi-frontend-wrapper .wp-list-table thead th:nth-child(8)  /* Detail */
{
    text-align: center !important;
}

.prodi-frontend-wrapper .wp-list-table thead th:nth-child(3), /* Responden */
.prodi-frontend-wrapper .wp-list-table thead th:nth-child(5), /* MK */
.prodi-frontend-wrapper .wp-list-table thead th:nth-child(6)  /* Dosen */
{
    text-align: left !important;
    padding-left: 15px !important;
}

/* ==========================================================================
   [PERBAIKAN] LAYOUT TABEL HASIL EVALUASI (ISOLASI ID)
   Hanya berlaku untuk tabel dengan ID #evaluasi-result-table
   ========================================================================== */

/* 1. Layout Tetap Khusus Tabel Ini */
#evaluasi-result-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* 2. Lebar Kolom (Hanya untuk Tabel Evaluasi) */
#evaluasi-result-table thead th:nth-child(1) { width: 5% !important; }  /* No */
#evaluasi-result-table thead th:nth-child(2) { width: 9% !important; }  /* Tanggal */
#evaluasi-result-table thead th:nth-child(3) { width: 17% !important; } /* Responden */
#evaluasi-result-table thead th:nth-child(4) { width: 7% !important; }  /* Kelas */
#evaluasi-result-table thead th:nth-child(5) { width: 23% !important; } /* Mata Kuliah */
#evaluasi-result-table thead th:nth-child(6) { width: 23% !important; } /* Dosen */
#evaluasi-result-table thead th:nth-child(7) { width: 8% !important; }  /* Rerata */
#evaluasi-result-table thead th:nth-child(8) { width: 8% !important; }  /* Detail */

/* 3. Alignment (Hanya untuk Tabel Evaluasi) */
#evaluasi-result-table tbody td:nth-child(1),
#evaluasi-result-table tbody td:nth-child(2),
#evaluasi-result-table tbody td:nth-child(4),
#evaluasi-result-table tbody td:nth-child(7),
#evaluasi-result-table tbody td:nth-child(8) {
    text-align: center !important;
    vertical-align: middle !important;
}

#evaluasi-result-table tbody td:nth-child(3),
#evaluasi-result-table tbody td:nth-child(5),
#evaluasi-result-table tbody td:nth-child(6) {
    text-align: left !important;
    vertical-align: middle !important;
    padding-left: 10px !important;
}

/* 4. Reset Header Alignment (Hanya untuk Tabel Evaluasi) */
#evaluasi-result-table thead th {
    text-align: center !important; /* Default tengah */
}
#evaluasi-result-table thead th:nth-child(3),
#evaluasi-result-table thead th:nth-child(5),
#evaluasi-result-table thead th:nth-child(6) {
    text-align: left !important; /* Kiri untuk teks panjang */
    padding-left: 10px !important;
}

/* 5. Text Wrapping (Hanya untuk Tabel Evaluasi) */
#evaluasi-result-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
}


/* ==========================================================================
   PERBAIKAN: GAYA TOMBOL PAGINASI & TUTUP MODAL
   ========================================================================== */

/* 1. Tombol Paginasi (Prev/Next) */
.prodi-frontend-wrapper .btn-eval-page {
    background-color: #ffffff !important; /* Latar Putih */
    border: 1px solid #cbd5e1 !important; /* Border Abu-abu */
    color: #475569 !important;           /* Teks Abu-abu */
    
    /* Bentuk Pil Modern */
    border-radius: 50px !important; 
    padding: 6px 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    
    /* Reset gaya bawaan */
    text-transform: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

.prodi-frontend-wrapper .btn-eval-page:hover {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px); /* Efek naik sedikit */
}

/* 2. Tombol Tutup di Modal Detail */
/* Target spesifik ID modal agar menang melawan style tema */
#modal-detail-evaluasi .modal-close-button {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    
    /* Bentuk Pil Modern */
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    
    text-transform: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

#modal-detail-evaluasi .modal-close-button:hover {
    background-color: #fee2e2 !important; /* Merah sangat muda (efek batal/tutup) */
    color: #b91c1c !important;            /* Teks Merah */
    border-color: #fca5a5 !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   MODIFIKASI UKURAN MODAL DETAIL
   ========================================================================== */

/* Target spesifik konten modal detail evaluasi */
#modal-detail-evaluasi .status-modal-content {
    /* Ubah 900px menjadi ukuran yang Anda inginkan (misal: 1000px atau 1200px) */
    max-width: 900px !important; 
    
    /* Pastikan tetap responsif di layar kecil */
    width: 95% !important; 
}


/* ==========================================================================
   GAYA HALAMAN REKAPITULASI EDOT (EXECUTIVE)
   ========================================================================== */

.rekap-edot-card {
    background: #ffffff;
    border: 1px solid #ccc; /* Border abu-abu solid */
    border-radius: 0; /* Kotak tegas seperti dokumen */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 20px;
    page-break-inside: avoid; /* Bagus untuk print */
}

.rekap-edot-header {
    text-align: center;
    margin-bottom: 15px;
}

.rekap-edot-title {
    font-family: 'Arial', sans-serif; /* Font formal */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0;
}

/* Tabel Rekap (Gaya Dokumen Formal) */
.rekap-edot-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
}

.rekap-edot-table th, 
.rekap-edot-table td {
    border: 1px solid #000 !important; /* Border hitam tegas */
    padding: 6px 8px;
    vertical-align: middle;
}

.rekap-edot-table thead th {
    background-color: #fff !important; /* Putih bersih */
    color: #000 !important;
    font-weight: bold;
    text-align: center !important;
}

.rekap-edot-table tbody td {
    color: #000;
}

.rekap-edot-table .font-bold {
    font-weight: bold;
}

/* Baris Footer (Sub Total) */
.rekap-edot-table .rekap-edot-footer td {
    background-color: #f9f9f9;
    border-top: 2px solid #000 !important; /* Garis pemisah lebih tebal */
}

/* Responsif Grid */
@media (max-width: 768px) {
    #rekap-edot-grid-container {
        grid-template-columns: 1fr !important; /* Satu kolom di HP */
        min-width: 0 !important;
    }
    .rekap-edot-card {
        overflow-x: auto; /* Scroll jika tabel lebar */
    }
}

/* ==========================================================================
   PENYESUAIAN TAMPILAN REKAP EDOT (LOGO TAB)
   ========================================================================== */

/* 1. Reset gaya ikon default (mask) agar logo asli terlihat */
#rekap-edot-tabs .prodi-tab-link::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: transparent !important; /* Hapus warna solid */
    -webkit-mask-image: none !important;      /* Hapus mask SVG */
    mask-image: none !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

/* 2. Pasang Logo Prodi */
#rekap-edot-tabs .prodi-tab-link[data-tab="TO"]::before {
    background-image: url('../images/logo-to.png');
}

#rekap-edot-tabs .prodi-tab-link[data-tab="MLOG"]::before {
    background-image: url('../images/logo-mlog.png');
}

#rekap-edot-tabs .prodi-tab-link[data-tab="MTJ"]::before {
    background-image: url('../images/logo-mtj.png');
}

/* 3. Styling Judul Kartu agar lebih rapi (Spasi antar baris) */
.rekap-edot-title {
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}

/* ==========================================================================
   GAYA TOMBOL "TAMPILKAN DATA" (REKAP EDOT)
   ========================================================================== */

/* Target spesifik ID tombol di dalam wrapper plugin */
.prodi-frontend-wrapper #btn-refresh-rekap-edot {
    /* Gaya Dasar (Biru Plugin) */
    background-color: #090999 !important; 
    color: #ffffff !important;
    border: none !important;
    
    /* Bentuk Pil */
    border-radius: 50px !important; 
    padding: 8px 25px !important;
    
    /* Tipografi */
    font-size: 14px !important;
    font-weight: bold !important;
    text-shadow: none !important;
    line-height: normal !important;
    height: auto !important;
    
    /* Interaksi */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

/* Efek Hover */
.prodi-frontend-wrapper #btn-refresh-rekap-edot:hover {
    background-color: #06066e !important; /* Biru lebih gelap */
    transform: translateY(-2px) !important; /* Efek naik */
    box-shadow: 0 4px 10px rgba(9, 9, 153, 0.2) !important; /* Bayangan */
}

/* ==========================================================================
   GAYA VISUALISASI BINTANG (REKAP EDOT) - HORIZONTAL
   ========================================================================== */

/* Wrapper utama: Bintang dan Angka sejajar horizontal */
.rekap-edot-star-wrapper {
    display: flex;
    flex-direction: row; /* <-- Baris (Horizontal) */
    align-items: center; /* Rata tengah secara vertikal */
    justify-content: center; /* Rata tengah di dalam sel */
    gap: 8px; /* Jarak antara bintang dan angka */
    line-height: 1;
    white-space: nowrap; /* Mencegah turun baris */
}

/* Angka Skor */
.rekap-edot-score {
    font-weight: bold;
    color: #334155;
    font-size: 13px;
}

/* Container Bintang (Relatif) */
.star-rating {
    position: relative;
    display: inline-block;
    font-size: 14px; /* Ukuran Bintang */
    color: #e2e8f0; /* Warna Bintang Kosong */
    white-space: nowrap;
    line-height: 1;
}

/* Bintang Terisi (Absolut di atas Container) */
.star-rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #fbbf24; /* Warna Kuning Emas */
    z-index: 1;
}

/* Karakter Bintang Dasar */
.star-rating-base {
    z-index: 0;
}

/* ==========================================================================
   PERATAAN TEKS TABEL REKAP EDOT (SKS & PERFORMANCE)
   ========================================================================== */

/* Target spesifik kolom ke-3 (SKS T), ke-4 (SKS P), dan ke-5 (Performance) */
.rekap-edot-table tbody td:nth-child(3), 
.rekap-edot-table tbody td:nth-child(4), 
.rekap-edot-table tbody td:nth-child(5) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Opsional: Pastikan header untuk kolom-kolom tersebut juga rata tengah */
/* Header baris kedua (T, P) adalah th ke-1 dan ke-2 di tr ke-2 */
.rekap-edot-table thead tr:nth-child(2) th {
    text-align: center !important;
}

/* Header baris pertama (Performance) adalah th ke-4 */
.rekap-edot-table thead tr:nth-child(1) th:nth-child(4) {
    text-align: center !important;
}

.rekap-edot-table .rekap-edot-footer td:nth-child(2), 
.rekap-edot-table .rekap-edot-footer td:nth-child(3) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   GAYA DASHBOARD SPM (CARD & TOGGLE)
   ========================================================================== */

.spm-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.spm-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.spm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.spm-card-title {
    margin: 0 !important;
    font-size: 16px !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* --- Statistik Responden --- */
.respondent-stats-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 15px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.stat-item.to { background: #eef2ff; border-color: #c7d2fe; }
.stat-item.mlog { background: #fef2f2; border-color: #fca5a5; }
.stat-item.mtj { background: #f0fdf4; border-color: #bbf7d0; }

.stat-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.stat-number {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}
.stat-desc {
    font-size: 11px;
    color: #94a3b8;
}

/* --- Toggle Switch CSS --- */
.spm-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spm-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.spm-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.spm-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1; /* Abu-abu (mati) */
    transition: .4s;
}

.spm-slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .spm-slider {
    background-color: #16a34a; /* Hijau (aktif) */
}

input:focus + .spm-slider {
    box-shadow: 0 0 1px #16a34a;
}

input:checked + .spm-slider:before {
    transform: translateX(24px);
}

/* Rounded sliders */
.spm-slider.round {
    border-radius: 34px;
}
.spm-slider.round:before {
    border-radius: 50%;
}

/* Status Text */
#status-text {
    font-size: 12px;
    font-weight: bold;
}
#status-text.active { color: #16a34a; }
#status-text.inactive { color: #ef4444; }


/* ==========================================================================
   GAYA RINCIAN KELAS DASHBOARD SPM
   ========================================================================== */

/* Container daftar kelas */
.class-detail-list {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0,0,0,0.1); /* Garis pemisah tipis */
    text-align: left;
    font-size: 12px;
}

/* Baris per kelas */
.class-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: #475569;
}

.class-detail-item .cls-name {
    font-weight: 600;
}

.class-detail-item .cls-count {
    background: rgba(255,255,255,0.6);
    padding: 0 6px;
    border-radius: 4px;
    font-weight: bold;
    color: #1e293b;
}

.class-detail-empty {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
    margin-top: 5px;
}

/* Sesuaikan padding item utama agar muat list */
.stat-item {
    padding-bottom: 15px;
}

/* ==========================================================================
   GAYA TOMBOL EXPORT PDF (POSISI KANAN & MODERN)
   ========================================================================== */

/* Target spesifik ID tombol di dalam wrapper plugin untuk mengalahkan tema */
.prodi-frontend-wrapper #btn-export-pdf-edot {
    /* 1. Gaya Dasar (Merah) */
    background-color: #D91161 !important; 
    color: #ffffff !important;
    border: none !important;
    
    /* 2. Bentuk Pil Modern */
    border-radius: 50px !important; 
    padding: 8px 20px !important;
    
    /* 3. Tipografi & Layout */
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: normal !important;
    height: auto !important;
    
    /* 4. Flexbox untuk Ikon & Teks */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Jarak ikon ke teks */
    
    /* 5. Interaksi */
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Efek Hover */
.prodi-frontend-wrapper #btn-export-pdf-edot:hover {
    background-color: #991b1b !important; /* Merah lebih gelap */
    transform: translateY(-2px) !important; /* Efek naik */
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.2) !important; /* Bayangan merah halus */
}

/* Pastikan ikon SVG tidak terdistorsi */
.prodi-frontend-wrapper #btn-export-pdf-edot svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: currentColor;
}

/* ==========================================================================
   GAYA CARD TOP 10 DOSEN (DASHBOARD SPM)
   ========================================================================== */

.spm-top-dosen-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Link Wrapper */
.spm-dosen-item-link {
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.2s ease;
}
.spm-dosen-item-link:hover {
    transform: translateY(-2px);
}

/* Item Container */
.spm-dosen-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.spm-dosen-item-link:hover .spm-dosen-item {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Left Side */
.spm-dosen-item .item-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rank-number {
    font-size: 16px;
    font-weight: 800;
    color: #94a3b8;
    min-width: 30px;
}

/* Foto */
.dosen-img-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #f1f5f9;
}
.dosen-img-wrapper img, 
.dosen-img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dosen-img-placeholder {
    background-color: #e2e8f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Detail Nama & Badge */
.dosen-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dosen-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}
.dosen-badges {
    display: flex;
    gap: 5px;
}

/* Right Side (Score) */
.spm-dosen-item .item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.performance-score {
    font-size: 18px;
    font-weight: 800;
    color: #090999;
}

/* Star Rating CSS */
.spm-star-rating {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
}
.stars-outer {
    position: relative;
    display: inline-block;
}
.stars-outer::before {
    content: "\2605 \2605 \2605 \2605 \2605"; /* 5 Bintang Kosong */
    font-family: "Arial", sans-serif; /* Fallback font that supports unicode stars usually */
    color: #e2e8f0;
}
.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}
.stars-inner::before {
    content: "\2605 \2605 \2605 \2605 \2605"; /* 5 Bintang Isi */
    color: #f59e0b; /* Amber/Gold */
}

/* Sistem Tirai (Toggle) */
.item-hidden {
    display: none ;
}

.spm-toggle-list-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 0 0 0;
    margin-top: 15px;
    border-top: 1px dashed #e2e8f0;
    cursor: pointer;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s;
}
.spm-toggle-list-btn:hover {
    color: #090999;
}
.spm-toggle-list-btn.expanded svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   PERBAIKAN FINAL: GAYA BADGE DOSEN (KONSISTEN DENGAN SUMMARY)
   ========================================================================== */

/* 1. Gaya Dasar Badge */
.spm-dosen-item .badge-inisial,
.spm-dosen-item .badge-prodi {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px; /* Bentuk Pil */
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* 2. Badge Inisial (Warna Solid Gelap) */
.spm-dosen-item .badge-inisial {
    color: #ffffff !important;
    min-width: 35px;
}
/* Warna per Prodi */
.spm-dosen-item .badge-inisial.badge-prodi-to { background-color: #090999 !important; } /* Biru */
.spm-dosen-item .badge-inisial.badge-prodi-mlog { background-color: #c31432 !important; } /* Merah */
.spm-dosen-item .badge-inisial.badge-prodi-mtj { background-color: #42BA3A !important; } /* Hijau */

/* 3. Badge Nama Prodi (Warna Soft/Outline) */
.spm-dosen-item .badge-prodi {
    border: 1px solid; /* Border tipis */
}
/* Warna per Prodi */
.spm-dosen-item .badge-prodi.badge-prodi-to { 
    background-color: #eef2ff; color: #4338ca; border-color: #c7d2fe; 
}
.spm-dosen-item .badge-prodi.badge-prodi-mlog { 
    background-color: #fef2f2; color: #b91c1c; border-color: #fca5a5; 
}
.spm-dosen-item .badge-prodi.badge-prodi-mtj { 
    background-color: #f0fdf4; color: #166534; border-color: #bbf7d0; 
}

/* ==========================================================================
   GAYA LIST MATA KULIAH DI KARTU TOP DOSEN
   ========================================================================== */

.dosen-mk-list {
    font-size: 11px; /* Ukuran huruf kecil */
    color: #64748b; /* Warna abu-abu */
    margin-top: 6px; /* Jarak dari badge */
    line-height: 1.4; /* Spasi antar baris */
    
    /* Batasi tampilan teks (opsional, agar tidak terlalu panjang) */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dosen-mk-list .mk-label {
    font-weight: bold;
    color: #475569;
    margin-right: 3px;
}

/* ==========================================================================
   PERBAIKAN FINAL: LAYOUT TABEL HASIL EVALUASI (RESTORASI)
   Menggunakan ID #evaluasi-result-table agar tidak tertimpa style tabel lain.
   ========================================================================== */

/* 1. Paksa Layout Tetap */
#evaluasi-result-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* 2. Pengaturan Lebar Kolom (Sesuai kesepakatan awal) */
/* Total: 100% */
#evaluasi-result-table thead th:nth-child(1) { width: 5% !important; }  /* No */
#evaluasi-result-table thead th:nth-child(2) { width: 9% !important; }  /* Tanggal */
#evaluasi-result-table thead th:nth-child(3) { width: 17% !important; } /* Responden */
#evaluasi-result-table thead th:nth-child(4) { width: 7% !important; }  /* Kelas */
#evaluasi-result-table thead th:nth-child(5) { width: 23% !important; } /* Mata Kuliah */
#evaluasi-result-table thead th:nth-child(6) { width: 23% !important; } /* Dosen */
#evaluasi-result-table thead th:nth-child(7) { width: 8% !important; }  /* Rerata */
#evaluasi-result-table thead th:nth-child(8) { width: 8% !important; }  /* Detail */

/* 3. Pengaturan Alignment (Perataan Teks) */

/* Rata Tengah: No, Tanggal, Kelas, Rerata, Detail */
#evaluasi-result-table tbody td:nth-child(1),
#evaluasi-result-table tbody td:nth-child(2),
#evaluasi-result-table tbody td:nth-child(4),
#evaluasi-result-table tbody td:nth-child(7),
#evaluasi-result-table tbody td:nth-child(8) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Rata Kiri: Responden, Mata Kuliah, Dosen */
#evaluasi-result-table tbody td:nth-child(3),
#evaluasi-result-table tbody td:nth-child(5),
#evaluasi-result-table tbody td:nth-child(6) {
    text-align: left !important;
    vertical-align: middle !important;
    padding-left: 10px !important; /* Jarak sedikit dari garis */
}

/* Penyesuaian Header agar sinkron dengan Body */
#evaluasi-result-table thead th:nth-child(1), 
#evaluasi-result-table thead th:nth-child(2),
#evaluasi-result-table thead th:nth-child(4),
#evaluasi-result-table thead th:nth-child(7),
#evaluasi-result-table thead th:nth-child(8) {
    text-align: center !important;
}

#evaluasi-result-table thead th:nth-child(3),
#evaluasi-result-table thead th:nth-child(5),
#evaluasi-result-table thead th:nth-child(6) {
    text-align: left !important;
    padding-left: 10px !important;
}

/* 4. Pastikan teks panjang turun ke bawah (Wrapping) */
#evaluasi-result-table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 5. Styling kecil untuk NIM di bawah nama */
#evaluasi-result-table td:nth-child(3) small {
    display: block;
    color: #64748b;
    font-size: 11px;
    margin-top: 2px;
}

/* ==========================================================================
   GAYA CARD IKD GLOBAL (DASHBOARD SPM)
   ========================================================================== */

.ikd-body-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 200px; /* Tinggi minimal agar seimbang */
}

/* Angka Utama (Besar) */
.ikd-main-score {
    font-size: 48px;
    font-weight: 800;
    color: #090999;
    line-height: 1;
    margin-bottom: 10px;
}

.ikd-scale {
    font-size: 16px;
    font-weight: 500;
    color: #94a3b8;
    vertical-align: baseline;
}

/* Wrapper Bintang & Predikat */
.ikd-stars-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* Bintang Ukuran Besar */
.spm-star-rating.large {
    font-size: 24px; /* Perbesar bintang */
}

/* Badge Predikat */
.ikd-predikat {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ikd-predikat.badge-sangat-baik { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.ikd-predikat.badge-baik { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.ikd-predikat.badge-cukup { background: #fefce8; color: #854d0e; border: 1px solid #fde047; }
.ikd-predikat.badge-kurang { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* Indikator Tren */
.ikd-trend {
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 8px;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.ikd-trend.trend-up {
    color: #166534;
    background: #f0fdf4;
}
.ikd-trend.trend-down {
    color: #b91c1c;
    background: #fef2f2;
}
.ikd-trend.trend-neutral {
    color: #64748b;
}

.trend-icon {
    font-size: 16px;
    line-height: 1;
}

.trend-label {
    color: #64748b;
    font-weight: normal;
    margin-left: 3px;
}

/* ==========================================================================
   GAYA CARD FEEDBACK (SUARA TARUNA)
   ========================================================================== */

/* Mini Tabs di Header Card */
.spm-mini-tabs {
    display: flex;
    gap: 5px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
}

.mini-tab-link {
    background: transparent;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mini-tab-link.active {
    background: #ffffff;
    color: #090999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* List Komentar */
.spm-feedback-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 500px; /* Scroll jika terlalu panjang */
    overflow-y: auto;
}

.feedback-item {
    background: #fdfdff;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    padding: 15px;
    border-left: 4px solid #cbd5e1; /* Default border */
}

/* Warna border kiri sesuai Prodi (menggunakan parent container id logic via JS atau CSS spesifik) */
#feedback-to .feedback-item { border-left-color: #090999; }
#feedback-mlog .feedback-item { border-left-color: #c31432; }
#feedback-mtj .feedback-item { border-left-color: #42BA3A; }

.feedback-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

.feedback-class {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    color: #fff;
}

.feedback-date {
    color: #94a3b8;
    font-size: 11px;
}

.feedback-target {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #f1f5f9;
}

.feedback-content {
    font-size: 14px;
    color: #334155;
    font-style: italic;
    line-height: 1.5;
}

.feedback-empty-state {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
    font-style: italic;
}

/* ==========================================================================
   GAYA NAVIGASI TAB CARD FEEDBACK
   ========================================================================== */
/* Header Layout (Judul di Atas, Tab di Bawahnya) */
.feedback-header-layout {
    display: flex;
    flex-direction: column; /* [KUNCI] Susun secara vertikal (atas-bawah) */
    align-items: flex-start; /* Rata kiri */
    justify-content: center;
    gap: 15px; /* Jarak antara Judul dan Tab */
    
    padding-bottom: 0 !important;
    border-bottom: 1px solid #e2e8f0; /* Garis dasar */
}

/* Pastikan judul tidak memiliki padding/margin berlebih di bawahnya */
.feedback-header-layout .spm-card-title {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* Pastikan Tab menempel ke garis bawah */
.feedback-tabs-folder {
    margin-bottom: -1px !important; /* Agar border tab aktif menutupi garis header */
    width: 100%; /* Opsional: agar tab mengambil lebar penuh jika perlu */
}
.feedback-header-layout .spm-card-title {
    border-bottom: none !important;
    padding-bottom: 15px; /* Kembalikan padding judul */
    margin-bottom: 0 !important;
}

/* Container Tab */
.feedback-tabs-wrapper {
    position: relative;
    top: 1px; /* Trik agar garis aktif menimpa garis border header */
}

.feedback-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px; /* Jarak antar tab */
}

/* Item Tab */
.feedback-tab-item {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    padding: 0 5px 15px 5px; /* Spasi agar area klik nyaman */
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.feedback-tab-item:hover {
    color: #090999;
}

/* Status Aktif (Garis Bawah Biru) */
.feedback-tab-item.active {
    color: #090999;
}

.feedback-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Ketebalan garis aktif */
    background-color: #090999;
    border-radius: 2px 2px 0 0;
}

/* ==========================================================================
   GAYA TAB FOLDER UNTUK CARD FEEDBACK (KONSISTENSI UI)
   ========================================================================== */

/* 1. Penyesuaian Container Tab di dalam Header */
.feedback-tabs-folder {
    border-bottom: none !important; /* Header card sudah punya border */
    margin-bottom: -1px !important; /* Agar tab menempel di garis header */
    gap: 5px; /* Jarak antar tab */
}

/* 2. Styling Link Tab (Memaksa gaya folder) */
.feedback-tabs-folder .prodi-tab-link {
    padding: 8px 15px !important;
    font-size: 12px !important;
    border-radius: 6px 6px 0 0 !important;
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

/* 3. State Aktif (Putih & Menyatu dengan Body) */
.feedback-tabs-folder .prodi-tab-link.active {
    background-color: #ffffff !important;
    color: #090999 !important;
    font-weight: bold;
    border-color: #e2e8f0;
    border-bottom: 1px solid #ffffff !important; /* Menutupi garis header */
    z-index: 10;
    position: relative;
    top: 1px; /* Turunkan 1px untuk menutupi garis */
}

/* 4. Menampilkan Logo Prodi di Tab (Copy Logic dari Tab Utama) */
.feedback-tabs-folder .prodi-tab-link::before {
    content: '';
    display: inline-block;
    width: 18px;  
    height: 18px; 
    
    /* --- RESET GAYA MASKING BAWAAN --- */
    background-color: transparent !important; /* Hapus warna solid (hitam/abu) */
    -webkit-mask-image: none !important;      /* Hapus masker bentuk */
    mask-image: none !important;
    /* --------------------------------- */
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0; /* Gap sudah diatur di parent */
}

/* URL Logo (Pastikan path sesuai dengan struktur folder Anda) */
.feedback-tabs-folder .prodi-tab-link[data-tab="to"]::before {
    background-image: url('../images/logo-to.png');
}
.feedback-tabs-folder .prodi-tab-link[data-tab="mlog"]::before {
    background-image: url('../images/logo-mlog.png');
}
.feedback-tabs-folder .prodi-tab-link[data-tab="mtj"]::before {
    background-image: url('../images/logo-mtj.png');
}

/* ==========================================================================
   GAYA TOMBOL "SALIN SEMUA" (TRANSPARAN / TANPA BACKGROUND)
   ========================================================================== */

/* Target spesifik ID tombol */
.prodi-frontend-wrapper #btn-copy-all-comments {
    /* 1. Hapus Background & Border */
    background-color: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    
    /* 2. Atur Warna Teks */
    color: #64748b !important; /* Abu-abu */
    
    /* 3. Reset Ukuran & Bentuk (Hapus gaya lingkaran/pil) */
    width: auto !important;
    height: auto !important;
    border-radius: 4px !important; /* Sedikit rounded */
    padding: 5px 10px !important;  /* Padding kecil untuk area klik */
    
    /* 4. Flexbox untuk ikon & teks */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Efek Hover */
.prodi-frontend-wrapper #btn-copy-all-comments:hover {
    background-color: #f1f5f9 !important; /* Background tipis saat hover */
    color: #090999 !important;           /* Berubah biru */
    transform: none !important;          /* Hapus efek naik */
}

/* Pastikan Ikon SVG mengikuti warna teks */
.prodi-frontend-wrapper #btn-copy-all-comments svg {
    fill: currentColor !important;
    width: 14px !important;
    height: 14px !important;
}

/* ==========================================================================
   GAYA RINCIAN IKD PER PRODI (DASHBOARD SPM)
   ========================================================================== */

/* Container Rincian */
.ikd-breakdown-container {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #e2e8f0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 10px;
}

/* Mini Card per Prodi */
.ikd-mini-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s ease;
}
.ikd-mini-card:hover {
    transform: translateY(-2px);
}

/* Warna Border Khas Prodi */
.ikd-mini-card.prodi-to { border-bottom: 3px solid #090999; }
.ikd-mini-card.prodi-mlog { border-bottom: 3px solid #c31432; }
.ikd-mini-card.prodi-mtj { border-bottom: 3px solid #42BA3A; }

.ikd-mini-card .mini-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    display: block;
    margin-bottom: 5px;
}

.ikd-mini-card .mini-score-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.ikd-mini-card .mini-score {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
}

/* Override ukuran bintang untuk mini card */
.ikd-mini-card .spm-star-rating.small {
    font-size: 10px;
}

.ikd-mini-card .mini-predikat {
    font-size: 10px;
    color: #090999;
    font-weight: 600;
    text-transform: uppercase;
}

/* Responsif untuk layar kecil */
@media (max-width: 480px) {
    .ikd-breakdown-container {
        grid-template-columns: 1fr; /* Tumpuk jadi 1 kolom di HP */
    }
    .ikd-mini-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom-width: 1px;
        border-left-width: 4px; /* Pindah border warna ke kiri */
    }
    .ikd-mini-card.prodi-to { border-left: 4px solid #090999; border-bottom: 1px solid #e2e8f0; }
    .ikd-mini-card.prodi-mlog { border-left: 4px solid #c31432; border-bottom: 1px solid #e2e8f0; }
    .ikd-mini-card.prodi-mtj { border-left: 4px solid #42BA3A; border-bottom: 1px solid #e2e8f0; }
}
/* Badge Tren Mini (di dalam kartu prodi) */
.ikd-mini-card .mini-trend-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 5px; /* Jarak ke predikat */
    line-height: 1;
}

.ikd-mini-card .mini-trend-badge.trend-up {
    background-color: #dcfce7;
    color: #166534;
}

.ikd-mini-card .mini-trend-badge.trend-down {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ==========================================================================
   GAYA SPESIFIK TABEL HASIL MAGANG (FINAL ALIGNMENT FIX)
   ========================================================================== */

/* 1. Layout Tabel */
.prodi-frontend-wrapper .magang-result-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1000px;
}

/* 2. Lebar Kolom */
.prodi-frontend-wrapper .magang-result-table th.col-no { width: 5% !important; }
.prodi-frontend-wrapper .magang-result-table th.col-tanggal { width: 10% !important; }
.prodi-frontend-wrapper .magang-result-table th.col-nama { width: 20% !important; }
.prodi-frontend-wrapper .magang-result-table th.col-notar { width: 10% !important; }
.prodi-frontend-wrapper .magang-result-table th.col-lp { width: 10% !important; } /* Lebar disesuaikan */
.prodi-frontend-wrapper .magang-result-table th.col-jenis { width: 10% !important; }
.prodi-frontend-wrapper .magang-result-table th.col-lokasi { width: 20% !important; }
.prodi-frontend-wrapper .magang-result-table th.col-alamat { width: 15% !important; }

/* 3. Perataan Header (TH) */
.prodi-frontend-wrapper .magang-result-table thead th {
    vertical-align: middle !important;
    font-size: 13px !important;
    padding: 12px 8px !important;
    text-align: center !important; /* Default Tengah untuk Header */
}
/* Header Rata Kiri */
.prodi-frontend-wrapper .magang-result-table thead th:nth-child(3), /* Nama */
.prodi-frontend-wrapper .magang-result-table thead th:nth-child(7), /* Lokasi */
.prodi-frontend-wrapper .magang-result-table thead th:nth-child(8)  /* Alamat */ {
    text-align: left !important;
    padding-left: 15px !important;
}

/* 4. Perataan Body (TD) - INI YANG MEMPERBAIKI BODY */
.prodi-frontend-wrapper .magang-result-table tbody td {
    vertical-align: middle !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    color: #334155;
}

/* Kelompok Rata Tengah (No, Tgl, Notar, LP, Jenis) */
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(1),
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(2),
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(4), /* Notar */
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(5), /* L/P */
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(6)  /* Jenis */ {
    text-align: center !important;
}

/* Kelompok Rata Kiri (Nama, Lokasi, Alamat) */
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(3),
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(7),
.prodi-frontend-wrapper .magang-result-table tbody td:nth-child(8) {
    text-align: left !important;
    padding-left: 15px !important;
}

/* FORCE clickable + override semua style lain */
.btn-icon-add{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  border:none !important;
  background:#2271b1 !important;
  color:#ffffff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
  pointer-events:auto !important;
  z-index:9999 !important;
}

.btn-icon-add svg{
  width:20px !important;
  height:20px !important;
  stroke:currentColor !important;
  fill:none !important;
  pointer-events:none !important; /* biar klik ke button */
}

.btn-icon-add:hover{
  background:#135e96 !important;
}

.btn-icon-add:active{
  transform:scale(.95) !important;
}

.btn-icon-add:focus{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(34,113,177,.4) !important;
}


.peta-info-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:14px 16px;
    margin:10px 0 16px 0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.peta-info-title{
    font-weight:700;
    margin-bottom:8px;
}
.peta-info-row{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    align-items:center;
}

/* Card periode aktif - Profil & Statistik */
.dosen-periode-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 14px;          /* ↓ padding diperkecil */
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.3;            /* ↓ jarak antar baris */
}

/* Judul card */
.dosen-periode-card .prodi-info-title {
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;              /* slate-900 */
    margin-bottom: 4px;          /* ↓ jarak ke isi */
}

/* Baris isi */
.dosen-periode-card .prodi-info-row {
    display: flex;
    gap: 18px;                   /* ↓ jarak antar kolom */
    flex-wrap: wrap;
    color: #475569;              /* slate-600 */
}

/* Label (Tahun Ajaran, Semester, Periode) */
.dosen-periode-card .prodi-info-row strong {
    font-weight: 500;
    color: #334155;              /* slate-700 */
}

/* Nilai (2025/2026, GANJIL, dst) */
.dosen-periode-card .prodi-info-row div {
    line-height: 1.35;           /* lebih rapat lagi */
}

.mk-diampu-meta {
    font-weight: 400;
    font-size: 0.85em;
    color: #64748b; /* slate-500 */
    margin-left: 6px;
}

/* =========================================================
   Card Periode Aktif – refinement (pill input)
   ========================================================= */

.prodi-periode-aktif-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 16px 18px;
}

/* Judul */
.prodi-periode-aktif-card .prodi-page-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

/* NOTE di atas input */
.prodi-periode-aktif-card .prodi-periode-note {
  display: inline-block;          /* ⬅️ kunci: tidak full width */
  font-size: 12px;
  font-style: italic;
  color: #b45309;
  background: rgba(251,191,36,.15);
  border-left: 3px solid #f59e0b;
  padding: 4px 8px;               /* lebih ringkas */
  border-radius: 6px;

  margin-bottom: 5px;
  line-height: 1.35;
  max-width: 100%;
}


/* Grid input */
.prodi-periode-aktif-card .prodi-periode-grid {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Label */
.prodi-periode-aktif-card label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #444;
}


/* Pastikan popup datepicker berada di atas tab/menu */
.prodi-periode-aktif-card .ui-datepicker,
.ui-datepicker {
  z-index: 999999 !important;
}

/* === PILL INPUT === */
.prodi-periode-aktif-card input.rekap-datepicker {
  width: 240px;
  max-width: 100%;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px; /* PILL */
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  font-size: 14px;
  transition: all .15s ease;
}

/* Fokus */
.prodi-periode-aktif-card input.rekap-datepicker:focus {
  outline: none;
  border-color: #2563eb; /* biru lembut */
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}


/* === Dashboard SPM: samakan style dropdown dengan filter standar (pill) === */
.plot-filter-container select#filter-tahun,
.plot-filter-container select#filter-semester{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    padding: 10px 40px 10px 20px !important;
    width: auto;
    min-width: 150px;
    height: auto !important;
    line-height: normal !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #1e293b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.plot-filter-container select#filter-tahun:hover,
.plot-filter-container select#filter-semester:hover{
    border-color: #cbd5e1;
    background-color: #f1f5f9 !important;
}

.plot-filter-container select#filter-tahun:focus,
.plot-filter-container select#filter-semester:focus{
    border-color: #090999 !important;
    box-shadow: 0 0 0 2px rgba(9, 9, 153, 0.2);
    outline: none;
    background-color: #ffffff !important;
}

/* SPM: tombol aksi sejajar setelah filter */
.plot-filter-container .filter-item.spm-filter-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* SPM: Reset ikut gaya tombol (a.page-title-action) */
.plot-filter-container .filter-item.spm-filter-actions a.button.page-title-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 38px;          /* samakan tinggi */
  padding: 0 16px;       /* samakan padding */
  border-radius: 999px;  /* pill */
}

/* Opsional: kalau Reset ingin warna beda tapi tetap konsisten */
.plot-filter-container .filter-item.spm-filter-actions a.spm-reset-btn{
  opacity: 0.95;
}
.plot-filter-container .filter-item.spm-filter-actions a.spm-reset-btn:hover{
  opacity: 1;
}

/* =========================
   SPM Filter - Reset Button
   ========================= */

/* Reset = tombol sekunder */
.plot-filter-container .spm-filter-actions .spm-reset-btn{
    background: #f8fafc !important;     /* abu terang */
    color: #334155 !important;          /* slate */
    border: 1px solid #cbd5e1 !important;
}

/* Hover reset */
.plot-filter-container .spm-filter-actions .spm-reset-btn:hover{
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Pastikan tetap pill & sejajar */
.plot-filter-container .spm-filter-actions a.button.page-title-action{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration: none;
}

/* Top Dosen: score + persen + delta */
.spm-topscore-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.spm-topscore-line { display:flex; align-items:baseline; gap:8px; }

.performance-percent { font-size: 12px; font-weight: 600; color: #64748b; }
.spm-delta-suffix { margin-left: 6px; font-size: 11px; opacity: 0.75; }

/* Tambahan untuk kondisi netral */
.mini-trend-badge.trend-flat { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }

/* Paksa tombol delete jadi merah (mengalahkan .wp-core-ui .button) */
.wp-core-ui .button.prodi-btn-delete-evaluasi,
.prodi-content-card .button.prodi-btn-delete-evaluasi,
.prodi-crud-wrapper .button.prodi-btn-delete-evaluasi {
  background: #b42318 !important;
  border-color: #b42318 !important;
  color: #fff !important;
}

/* Hover */
.wp-core-ui .button.prodi-btn-delete-evaluasi:hover,
.prodi-content-card .button.prodi-btn-delete-evaluasi:hover,
.prodi-crud-wrapper .button.prodi-btn-delete-evaluasi:hover {
  background: #9f1c14 !important;
  border-color: #9f1c14 !important;
  opacity: 1 !important;
}

/* Icon ikut putih */
.wp-core-ui .button.prodi-btn-delete-evaluasi svg,
.prodi-content-card .button.prodi-btn-delete-evaluasi svg,
.prodi-crud-wrapper .button.prodi-btn-delete-evaluasi svg {
  fill: currentColor !important;
}


/* --- Indikator Status Periode --- */
.prodi-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    vertical-align: middle;
}

.badge-active-sync {
    background-color: #dcfce7; /* Hijau Muda */
    color: #166534;           /* Hijau Tua */
    border: 1px solid #bbf7d0;
}

.badge-archive-sync {
    background-color: #f1f5f9; /* Abu-abu */
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.dot-indicator {
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}