/* assets/css/style.css */

/* Variabel Warna */
:root {
    --color-primary: #004d40; /* Hijau Tua/Emerald, Mewah */
    --color-secondary: #00c853; /* Hijau Cerah */
    --color-accent: #ffeb3b; /* Kuning Emas/Krem, untuk aksen mewah */
    --color-bg-light: #f4f6f9;
    --color-text-dark: #2c3e50;
    --color-white: #ffffff;
}

/* Animasi Dasar */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 77, 64, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0, 77, 64, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 77, 64, 0); }
}

/* BODY dan Umum */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
}

/* --- Login Page --- */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-primary), #1de9b6); 
}

.login-container {
    background-color: var(--color-white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 350px;
    animation: slideIn 0.8s ease-out;
}

.login-title {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--color-secondary);
    padding-bottom: 10px;
}

/* Input Form Dasar */
.form-group input, .form-group button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-group button {
    margin-top: 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
.form-group button:hover {
    background-color: #003d33;
}


/* --- Admin Layout --- */
.main-header {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.main-header .logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 1px;
}
/* ... (CSS Sidebar, Footer, Dashboard stats, dll. sama seperti sebelumnya) ... */

.wrapper {
    display: flex;
    min-height: calc(100vh - 120px); 
}

.sidebar {
    width: 250px;
    background-color: #ffffff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    padding-top: 20px;
}

.sidebar .menu-item {
    display: block;
    padding: 15px 25px;
    text-decoration: none;
    color: var(--color-text-dark);
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}

.sidebar .menu-item:hover {
    background-color: #e8f5e9; 
    color: var(--color-primary);
    border-left: 5px solid var(--color-secondary);
}

.sidebar .menu-item.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-left: 5px solid var(--color-secondary);
}

.content-area {
    flex-grow: 1;
    padding: 30px;
    animation: slideIn 0.5s ease-out;
}

/* --- Data Table --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.data-table th, .data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.data-table th {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Status Styling */
.status-belum-bayar { color: #d32f2f; font-weight: bold; }
.status-dp { color: #f9a825; font-weight: bold; }
.status-lunas { color: #2e7d32; font-weight: bold; animation: pulse 2s infinite; }

/* --- Tombol Aksi (Untuk Konfirmasi & Tambah Siswa) --- */
.btn {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-dp { background-color: #ffc107; color: var(--color-text-dark); }
.btn-lunas { background-color: var(--color-secondary); color: var(--color-white); }
.btn-tambah { background-color: var(--color-secondary); color: var(--color-white); padding: 10px 20px; }
.btn-tambah:hover { background-color: #00a844; }


/* --- Form Tambah Siswa/Alerts --- */
.form-card {
    background-color: var(--color-white);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    border-left: 5px solid var(--color-primary);
    animation: slideIn 0.5s ease-out;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color-primary);
}

/* --- Notifikasi (Alerts) --- */
/* --- Notifikasi (Alerts) --- */
/* assets/css/style.css */

/* --- Notifikasi (Alerts) --- */
/* assets/css/style.css */

/* --- Notifikasi (Alerts) --- */
.alert {
    padding: 15px;
    margin-bottom: 20px; 
    margin-top: 15px; /* Jarak dari judul halaman */
    border-radius: 8px;
    font-weight: bold;
    animation: slideIn 0.4s ease-out;
    
    /* PROPERTI KRUSIAL FINAL */
    
    /* 1. Reset posisi dan display */
    position: relative; 
    display: block;
    float: none;

    /* 2. Mengatur lebar agar 100% dari parent (.content-area) */
    width: 100%; 
    max-width: 100%;
    
    /* 3. Pastikan box model-nya benar */
    box-sizing: border-box; 
    
    /* 4. Menghilangkan potensi margin yang terlalu besar */
    margin-left: 0;
    margin-right: 0;
}

.alert.success {
    background-color: #e6f7d5; /* Hijau muda */
    color: #387000;
    border: 1px solid #73d13d;
}

.alert.error {
    background-color: #fff2e8; /* Merah muda */
    color: #cf1322;
    border: 1px solid #ff4d4f;
}


/* assets/css/style.css */

.content-area {
    flex-grow: 1;
    flex-shrink: 0; /* Tambahkan ini jika belum ada */
    padding: 30px;
    animation: slideIn 0.5s ease-out;
    box-sizing: border-box; 
    /* ... kode lainnya ... */
}
/* --- Modal Styles --- */
.modal {
    display: none; /* Tersembunyi secara default */
    position: fixed; 
    z-index: 100; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.4); /* Background gelap */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% dari atas dan di tengah horizontal */
    padding: 20px;
    border: 1px solid #888;
    width: 40%; /* Lebar pop-up */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

@keyframes animatetop {
    from {top: -300px; opacity: 0} 
    to {top: 10%; opacity: 1}
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Tombol Aksi */
.btn-edit { background-color: #ffc107; color: var(--color-text-dark); }
.btn-hapus { background-color: #d32f2f; color: var(--color-white); }

/* assets/css/style.css */

.form-group input[type="text"],
.form-group textarea,
.form-group select { /* <-- TAMBAHKAN SELECT DI SINI */
    width: 100%;
    padding: 10px;
    margin-top: 5px; /* Sesuaikan jika perlu jarak dari label */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; 
    /* Properti ini memastikan lebar dan padding seragam */
}

/* assets/css/style.css */

/* ... kode sebelumnya ... */

.search-and-new-payment-container {
    display: flex;
    justify-content: flex-end; /* Posisikan ke kanan */
    margin-bottom: 20px;
}

.search-form input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px; /* Sudut kiri bulat */
    width: 200px;
    box-sizing: border-box;
}

.btn-primary-small {
    padding: 8px 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 0 5px 5px 0; /* Sudut kanan bulat */
    cursor: pointer;
    margin-left: -1px; /* Hilangkan garis pemisah antara input dan tombol */
}
.btn-primary-small:hover {
    background-color: #003d33;
}

/* assets/css/style.css */

/* --- PERBAIKAN Aksi Konfirmasi Susun Vertikal --- */

.action-buttons-vertical form {
    /* Penting: Pastikan form mengambil lebar penuh TD dan elemen di dalamnya menjadi blok */
    display: flex;
    flex-direction: column; /* Susun vertikal */
    gap: 5px; /* Jarak antar tombol */
    width: 100%;
}

.action-buttons-vertical .btn {
    /* Pastikan tombol mengisi seluruh lebar yang tersedia (blok) */
    width: 100%;
    margin: 0; /* Hapus margin horizontal bawaan dari .btn */
    padding: 5px 8px; /* Kecilkan padding tombol agar lebih pas */
    font-size: 0.9em; /* Kecilkan font */
    text-align: center;
}

/* --- PERBAIKAN Umum Tabel Konfirmasi --- */
.data-table-container {
    /* Tambahkan scrollbar horizontal jika tabel terlalu lebar */
    overflow-x: auto;
}

.konfirmasi-table th, .konfirmasi-table td {
    /* Batasi lebar kolom yang tidak terlalu penting */
    white-space: nowrap; /* Mencegah wrap teks (agar lebih mudah discroll) */
    padding: 8px 10px;
}

/* Memastikan kolom Nama dan Kekurangan tampil dengan warna yang benar */
.konfirmasi-table td:nth-child(2), /* Nama Siswa */
.konfirmasi-table td:nth-child(6) { /* Kekurangan Bayar */
    min-width: 120px; 
}


/* assets/css/style.css */

/* Variabel Warna (Pastikan ini ada) */
:root {
    --color-primary: #004d40; /* Hijau Tua/Emerald, Mewah */
    --color-secondary: #00c853; /* Hijau Cerah */
    --color-text-dark: #2c3e50;
    --color-white: #ffffff;

    /* Tambahan untuk Dashboard */
    --color-success: #388e3c; /* Hijau Sukses */
    --color-warning: #ffb300; /* Kuning Peringatan */
    --color-info: #1976d2; /* Biru Info */
    --color-red: #d32f2f;
}

/* ... Kode CSS lainnya ... */

/* --- Dashboard Stats (Card Styling) --- */
.dashboard-stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap; /* Memastikan responsif jika banyak kartu */
}

.stat-card {
    flex: 1;
    min-width: 250px; /* Batasan agar tidak terlalu kecil */
    background: var(--color-white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Efek Card Shadow */
    border-left: 5px solid var(--color-primary); /* Garis Aksen */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.stat-card h3 {
    margin-top: 0;
    font-size: 0.9em;
    color: var(--color-text-dark);
    text-transform: uppercase;
    font-weight: 600;
}

.stat-card p {
    font-size: 2.2em;
    font-weight: bold;
    margin: 5px 0 0 0;
    color: var(--color-primary); /* Warna utama untuk angka besar */
}

/* Kustomisasi Garis Aksen Card */
.total-biaya { 
    border-left-color: var(--color-secondary); 
}
.total-siswa { 
    border-left-color: var(--color-info); 
}
.total-uang-masuk { 
    border-left-color: var(--color-success); 
}

/* Kartu Status Spesifik (untuk baris kedua) */
.success-card {
    border-left-color: var(--color-success);
}
.warning-card {
    border-left-color: var(--color-warning);
}
.pending-card {
    border-left-color: var(--color-red);
}