/* ==========================================================================
   GAYA UNTUK HALAMAN PERBANDINGAN DOSEN (VERSI FINAL)
   ========================================================================== */

.prodi-comparison-page {
    margin-top: 30px;
}

.comparison-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ==========================================================================
   BAGIAN ATAS: KARTU PROFIL RINGKAS
   ========================================================================== */

.profile-summary-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.summary-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    /* Hanya atur padding vertikal di sini */
    padding-top: 25px;
    padding-bottom: 25px;
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.summary-photo img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-dosen-name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.summary-dosen-name-selector {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Mendorong nama & tombol ke ujung */
    width: 100%; /* Memastikan kontainer mengambil lebar penuh */
}

#summary-card-b .summary-dosen-name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e2f5b;
    line-height: 1.3;
}

.summary-dosen-name-selector .choices {
    margin: 0;
}
.summary-dosen-name-selector .choices__inner {
    font-size: 16px;
    padding: 8px 15px !important;
}

.summary-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
.summary-meta-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}
.summary-meta-list li span:first-child {
    color: #64748b;
}
.summary-meta-list li span:last-child {
    font-weight: 600;
    color: #334155;
}
.summary-meta-list.is-empty li span:last-child {
    color: #94a3b8;
    font-weight: normal;
}

/* ==========================================================================
   BAGIAN BAWAH: TABEL SKOR MATA KULIAH
   ========================================================================== */

.score-table-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    overflow: hidden;
}

.comparison-score-table {
    width: 100%;
    border-collapse: collapse;
}
.comparison-score-table th, 
.comparison-score-table td {
    padding: 12px 15px;
    text-align: center;
    vertical-align: middle;
}

/* [BARU] Atur jarak spesifik untuk bar dan nama MK */
.comparison-score-table .bar-a {
    padding-right: 10px !important; /* Tambahkan jarak di kanan bar */
}

.comparison-score-table .course-name-cell {
    padding-left: 10px !important; /* Tambahkan jarak di kiri nama MK */
    text-align: center !important; /* Paksa nama MK rata kiri (seperti di gambar) */
}

.comparison-score-table th.course-name {
    text-align: center !important; /* Paksa header nama MK rata kiri */
    padding-left: 10px !important;
}
.comparison-score-table thead {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.comparison-score-table th {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
}

.comparison-score-table .score-a,
.comparison-score-table .score-b { width: 10%; }

.comparison-score-table .bar-a,
.comparison-score-table .bar-b { width: 15%; }

.comparison-score-table .course-name { width: 50%; }

.comparison-score-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
}
.comparison-score-table tbody tr:last-child {
    border-bottom: none;
}
.comparison-score-table tbody tr:hover {
    background-color: #f8fafc;
}

.course-name-cell {
    font-weight: 500;
    color: #334155;
    font-size: 15px;
}

.score-value {
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
    padding: 3px 12px;
    border-radius: 50px;
    min-width: 50px;
    text-align: center;
}

.score-value.skor-sangat-baik { background-color: #f0fdf4; color: #0aab48; }
.score-value.skor-baik { background-color: #fff7ed; color: #d37918; }
.score-value.skor-cukup { background-color: #fef2f2; color: #e32525; }
.score-value.skor-rendah { background-color: #f1f5f9; color: #6f7a89; }

.score-bar-wrapper {
    background-color: #f1f5f9;
    height: 12px;
    border-radius: 4px;
    width: 100%;
}

.bar-cell.bar-a .score-bar-wrapper {
    direction: rtl;
}

.score-bar {
    height: 100%;
    border-radius: 4px;
    width: 0%; 
    transition: width 0.5s ease-in-out;
}

.score-bar.bar-is-higher-a {
    background-color: #090999; /* Biru */
}

.score-bar.bar-is-higher-b {
    background-color: #d63638; /* Merah */
}

/* GANTI SEMUA ATURAN PADDING KARTU DENGAN SATU BLOK INI */

/* 1. Berikan padding horizontal yang SAMA untuk kedua kartu */
.summary-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 87, 158, 0.07);
    /* Atur padding seragam: 25px atas-bawah, 30px kiri-kanan */
    padding: 25px 30px;
}

/* 2. Aturan layout untuk Dosen B tetap dipertahankan */
#summary-card-b .summary-header {
    justify-content: space-between; 
}


#summary-card-b .summary-meta-list {
    position: relative;
    left: -35px; /* Geser blok ini ke kiri sejauh 15px */
}   
    
/* ==========================================================================
   PENYESUAIAN FINAL TATA LETAK
   ========================================================================== */



/* 2. Geser nama Dosen A ke kanan */
#summary-card-a .summary-header {
    justify-content: space-between;
}


/* Target NILAI (span pertama di kartu B): Dibuat tebal & berwarna gelap */
#summary-card-b .summary-meta-list li span:first-child {
    font-weight: 600;
    color: #334155;
}

/* Target LABEL (span terakhir di kartu B): Dibuat normal & berwarna abu-abu */
#summary-card-b .summary-meta-list li span:last-child {
    font-weight: normal;
    color: #64748b;
}

/* ==========================================================================
   GAYA DROPDOWN PIL (MENYESUAIKAN DENGAN GAYA PROFIL)
   ========================================================================== */

/* Menargetkan bagian dalam dropdown di kartu Dosen B */
#summary-card-b .choices__inner {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px; /* <-- Kunci utama untuk bentuk pil */
    font-size: 14px;
    padding: 10px 15px !important;
    transition: all 0.2s ease;
}

/* Memberi efek highlight saat dropdown aktif/di-klik */
#summary-card-b .choices.is-open .choices__inner,
#summary-card-b .choices__inner:focus-within {
    border-color: #090999;
    box-shadow: 0 0 0 1px #090999;
}

/* Tambahkan di bagian paling akhir file comparison-page.css */

/* ==========================================================================
   PENYESUAIAN LANJUTAN DROPDOWN (DAFTAR & TOMBOL X)
   ========================================================================== */

/* 1. Gaya untuk daftar pilihan yang muncul (dropdown) */
#summary-card-b .choices__list--dropdown {
    margin-top: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* Sudut membulat yang konsisten */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* 2. Gaya untuk item yang disorot (highlight) saat dipilih */
#summary-card-b .choices__item--selectable.is-highlighted {
    background-color: #090999; /* Warna biru tema */
}

/* ==========================================================================
   FINAL: GAYA TOMBOL HAPUS (HANYA SIMBOL 'X')
   ========================================================================== */

#summary-card-b .button-reset-compare {
    /* 1. Hapus Latar Belakang & Border */
    background: transparent;
    border: none;

    /* 2. Gunakan Flexbox untuk centering sempurna */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 3. Atur Tampilan Simbol '×' */
    color: #b91c1c;
    font-size: 32px;
    font-weight: 300;
    line-height: 1; /* Mencegah tinggi baris berlebih */

    /* 4. Atur Posisi & Interaksi Tombol */
    padding: 0 10px;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

#summary-card-b .button-reset-compare:hover {
    color: #ef4444;
    background: transparent; /* Pastikan background tetap transparan saat hover */
}

#summary-card-b .choices__placeholder {
    color:#f5f6fb!important;
    opacity: 1; /* Memastikan teks tidak transparan */
}

#summary-card-b .choices__list--dropdown .choices__item[data-value=""] {
    display: none !important;
}

/* Tambahkan di bagian paling akhir file css */

/* ==========================================================================
   GAYA UNTUK PLACEHOLDER FOTO PROFIL DOSEN B
   ========================================================================== */

#summary-card-b .summary-photo-placeholder {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #e2e8f0;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    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;
}