/* wp-content/plugins/dosen-tu-presence/assets/css/frontend.css */

.dtp-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Jarak antar kartu */
    justify-content: center; /* Opsional: Pusatkan kartu jika tidak memenuhi lebar penuh */
    padding: 20px 0;
}

.dtp-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    width: calc(33.333% - 14px); /* Untuk 3 kolom dengan gap */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Pastikan konten di bawah gambar */
    background-color: #fff;
    position: relative; /* Tetap relatif jika nanti ada elemen lain yang absolute */
    padding-bottom: 15px; /* Sedikit padding di bawah card */
}

@media (max-width: 992px) {
    .dtp-card {
        width: calc(50% - 10px); /* 2 kolom untuk tablet */
    }
}

@media (max-width: 768px) {
    .dtp-card {
        width: 100%; /* 1 kolom untuk mobile */
    }
}

.dtp-card-photo {
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio (square) */
    position: relative;
    overflow: hidden; /* Penting untuk cropping gambar */
    background-color: #f0f0f0; /* Placeholder background */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtp-card-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crops the image to fill the container */
    object-position: center center; /* Center the image */
}

.dtp-card-content {
    padding: 15px; /* Padding default untuk konten */
    flex-grow: 1; /* Konten mengisi sisa ruang */
    padding-top: 5px; /* Kurangi padding-top untuk menaikkan konten */
}

/* Gaya untuk status di dalam konten */
.dtp-card-status-label {
    display: block; /* Tetap block agar mengisi lebar penuh */
    padding: 8px 0; /* Padding horizontal menjadi 0 untuk lebar full */
    border-radius: 0; /* Hilangkan border-radius */
    color: #fff; /* Warna teks putih */
    font-size: 1.25em; /* Ukuran font seukuran nama */
    font-weight: bold;
    text-align: center; /* Rata tengah teks di dalam label */
    margin-bottom: 0; /* Hilangkan margin-bottom agar menempel dengan nama */
    margin-top: -5px; /* Geser ke atas agar menempel dengan foto */
    text-transform: capitalize; /* Hanya huruf awal yang kapital */
    width: auto; /* Atur width ke auto */
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
    position: relative; /* Agar z-index bekerja jika diperlukan */
    z-index: 2; /* Di atas konten lain tapi di bawah gambar jika ada */
    margin-left: -15px; /* Sesuaikan dengan padding kiri dtp-card-content */
    margin-right: -15px; /* Sesuaikan dengan padding kanan dtp-card-content */
}

/* UBAH INI: Gaya untuk garis pemisah (horizontal rule) */
.dtp-divider {
    border: none; /* Hilangkan border default */
    border-top: 1px solid #eee; /* Garis tipis abu-abu */
    margin: 10px 0; /* UBAH INI: Kurangi margin di atas dan bawah garis */
    width: 100%; /* Lebar penuh */
    box-sizing: border-box;
    margin-left: -15px;
    margin-right: -15px;
}

.dtp-card-name {
    margin-top: 10px; /* Beri margin top untuk jarak dari status */
    margin-bottom: 10px;
    font-size: 1.25em;
    color: #333;
}

.dtp-card-identifier,
.dtp-card-keterangan {
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #555;
}

/* Status specific styling (for background colors) */
.status-hadir {
    background-color: #28a745; /* Green */
}

.status-tidak-hadir {
    background-color: #dc3545; /* Red */
}

.status-sedang-mengajar {
    color: #fff; /* Pastikan warna teks putih */
    background-color: #007bff; /* Tambahkan background-color */
}

.status-cuti {
    background-color: #ffc107; /* Yellow/Orange */
}

.status-dinas-luar {
    background-color: #6f42c1; /* Purple */
}

.status-istirahat {
    background-color: #ff8c00; /* Orange */
}

.dtp-card-last-updated {
    font-size: 0.75em; /* Smaller font size */
    color: #888; /* Lighter color */
    margin-top: 10px; /* Space above the text */
    margin-bottom: 0;
}