/* ------------------------------------------- */
/* Gaya Kustom Tabel (5 KOLOM + BORDER + HOVER) */
/* ------------------------------------------- */

/* Kontainer Utama - Menggunakan Grid untuk Layout Kolom */
.kerjasama-data-container {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px;
    overflow: hidden; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Asumsi font Inter atau sejenisnya sudah dimuat oleh tema */
    font-family: 'Inter', sans-serif; 
}

/* Penataan Header (Judul Kolom) - Disesuaikan untuk 5 Kolom */
.kerjasama-header, .kerjasama-row {
    display: grid;
    /* Proporsi 5 kolom: Mitra(1.5), Judul(2), No ISI(1.3), Prodi(1), Tanggal(1) */
    grid-template-columns: 1.5fr 2fr 1.3fr 1fr 1fr; 
    padding: 0; 
    border-bottom: 1px solid #eeeeee;
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* Gaya Khusus untuk Header */
.kerjasama-header {
    background-color: #004c99; /* Warna biru gelap ISI Surakarta */
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
    position: sticky; 
    top: 0;
    z-index: 20;
}

/* Area Konten yang Bisa di-scroll (untuk menampung semua 168 baris data) */
.data-scroll-area {
    max-height: 50vh; 
    overflow-y: auto; 
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #ffffff;
}

/* Gaya Baris Data */
.kerjasama-row {
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
}

/* Efek Hover BARU pada Baris */
.kerjasama-row:hover {
    background-color: #e6f0ff; 
    box-shadow: 0 0 8px rgba(0, 76, 153, 0.1); 
    z-index: 10; 
}

/* Gaya untuk baris ganjil (Alternating Row Color) */
.kerjasama-data-container .kerjasama-row:nth-child(2n) { 
    background-color: #fcfcfc;
}
.kerjasama-data-container .kerjasama-row:nth-child(2n):hover {
     background-color: #e6f0ff; 
}


/* Gaya untuk Sel Data dalam Baris */
.kerjasama-cell {
    padding: 15px 20px; 
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #e9e9e9; 
}

/* Hilangkan border kanan pada sel terakhir setiap baris */
.kerjasama-cell:last-child {
    border-right: none;
}

@media (min-width: 769px) {
    .kerjasama-cell:nth-child(2) {
        white-space: normal; 
    }
}

/* Gaya Khusus untuk Judul Kerjasama agar lebih menonjol */
.kerjasama-cell.judul {
    font-weight: 600;
}

/* Hilangkan border bawah pada baris terakhir */
.kerjasama-row:last-child {
    border-bottom: none;
}


/* ------------------------------------------- */
/* Responsif untuk Tampilan Mobile (Max-width 768px) */
/* ------------------------------------------- */

@media (max-width: 768px) {
    
    .kerjasama-header {
        display: none; 
    }

    .kerjasama-row {
        display: block; 
        border-bottom: 2px solid #004c99; 
        margin-bottom: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        padding: 0; 
    }
    .kerjasama-row:hover {
        box-shadow: 0 4px 10px rgba(0, 76, 153, 0.2);
    }

    .kerjasama-data-container .kerjasama-row:nth-child(2n) {
        background-color: #ffffff; 
    }
    
    .kerjasama-cell {
        display: block;
        padding: 10px 15px; 
        white-space: normal; 
        text-overflow: clip; 
        border-right: none; 
        border-bottom: 1px dashed #cccccc; 
    }

    .kerjasama-cell::before {
        content: attr(data-label); 
        font-weight: 700;
        color: #004c99; 
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .kerjasama-row:last-child {
        margin-bottom: 0;
    }
}

/* Utilitas Tailwind yang digunakan dalam HTML Anda, pastikan dimuat oleh tema. */
/* Jika tidak, tambahkan Tailwind CDN di setting tema/page builder. */
/* Contoh: .p-4, .text-2xl, .font-bold, .text-gray-800, dll. */