/* =========================================================
   GLOBAL STYLE
========================================================= */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* =========================================================
   INDEX.PHP
========================================================= */

.index-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #E8FFF0;
}

/* HEADER */
header.index-header {
    background: #CC0000;
    padding: 20px;
    text-align: center; /* Dikembalikan ke tengah untuk judul */
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Properti penting untuk positioning */
    position: relative; /* Menjadi acuan bagi tombol login absolut */
    /* display: flex, justify-content: space-between, dan align-items: center DIHAPUS */
}

.header-login-btn {
    position: absolute;
    top: 50%; /* Mengatur posisi vertikal ke tengah header */
    right: 20px; /* Jarak dari tepi kanan */
    transform: translateY(-50%); /* Menyesuaikan posisi tengah vertikal */
    
    /* Style tombol lama */
    padding: 10px 18px;
    font-size: 16px; 
    font-weight: bold;
    background: #0D47A1;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; 
}

.header-login-btn:hover {
    background: #4682B4;
}

.logo-sekolah {
    width: 55px;
    height: auto;
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 999;
}


/* NAVBAR */
nav.index-nav {
    background: #A80000;
    padding: 10px;
    text-align: center;
}

nav.index-nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 17px;
    font-weight: bold;
}

nav.index-nav a:hover {
    text-decoration: underline;
}

/* MAIN CONTAINER */
.index-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    flex: 1;
}

.index-left {
    width: 45%;
}

.index-left img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.index-right {
    width: 50%;
    padding-left: 40px;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

.index-btn {
    padding: 12px 20px;
    font-size: 16px;
    margin-top: 15px;
    margin-right: 10px;
    background: #0D47A1;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.index-btn:hover {
    background: #4682B4;
}

.index-btn a {
    color: white;
    text-decoration: none;
}

/* FOOTER */
.index-footer {
    background: #CC0000;
    color: #ffffff;
    padding: 15px;
    text-align: center;
    margin-top: auto;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

/* =========================================================
    FORM-PENDAFTARAN.PHP
========================================================= */

.form-container {
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

/* MERATAKAN JUDUL DI TENGAH */
.form-container h2 {
    text-align: center; 
    margin-top: 0; /* Hapus margin atas default */
    margin-bottom: 25px; /* Jarak yang rapi ke input pertama */
    font-size: 24px;
    color: #333;
}

/* MERAPIKAN KOTAK INPUT DATA */
.form-group-input {
    /* Gunakan div ini untuk membungkus label dan input jika diperlukan */
    /* Kita akan gunakan label dan input standar */
    margin-bottom: 15px; /* Jarak konsisten antar kelompok input */
}

.form-container label {
    display: block; /* PENTING: Membuat label berdiri sendiri */
    font-weight: bold;
    margin-bottom: 5px; /* Jarak kecil antara label dan kotak input */
    color: #444;
}

.form-container input,
.form-container select,
.form-container textarea {
    width: 100%;
    padding: 10px; 
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    box-sizing: border-box; 
    margin-top: 5px; 
    margin-bottom: 20px; 
}
/* PASTIKAN JUGA .btn-back-form JUGA DI TAMBAHKAN, ANDA SUDAH MEMILIKINYA */
.btn-back-form {
    display: block; 
    text-align: center;
    padding: 10px 20px;
    color: #007bff; /* Diubah menjadi biru standar */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; 
    margin-top: 10px; 
    /* TAMBAHKAN HOVER JIKA BELUM ADA */
}
.btn-back-form:hover {
    text-decoration: underline;
}

.form-container button {
    /* Style lama ini akan dihapus/ditimpa oleh .btn-submit-form */
    /* padding: 10px 20px;
    background: green;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer; */
    
    /* Tambahkan margin bawah agar ada jarak ke tombol Kembali */
    margin-bottom: 15px; 
}

/* Style tombol Simpan Data (Tombol Submit) */
.btn-submit-form {
    width: 100%; /* Lebar penuh */
    padding: 10px 20px;
    background: #28a745; /* Warna hijau yang sama */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block; /* Memastikan lebar penuh */
    margin-top: 5px; /* Jarak dari input di atasnya */
    margin-bottom: 15px; /* Jarak ke tombol Kembali */
    font-size: 16px; /* Ukuran font agar sama */
    font-weight: bold;
}

.btn-submit-form:hover {
    background: #1e7e34;
}

/* Style untuk tombol Kembali di Form Pendaftaran */
.btn-back-form {
    display: block; /* Agar menempati satu baris penuh */
    text-align: center;
    padding: 10px 20px;
    color: blue;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Hilangkan garis bawah */
    margin-top: 10px; /* Jarak dari tombol Simpan Data di atasnya */
}


/* =========================================================
   LOGIN.PHP
========================================================= */
.login-body {
    background: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-box {
    width: 360px;
    background: #fff;
    padding: 30px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}

.login-box h2 {
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
    color: #333;
    font-size: 22px;
}

.login-box .form-group {
    margin-bottom: 16px;
}

.login-box label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: #444;
    font-weight: bold;
}

.login-box input {
    width: 100%;
    padding: 10px;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    font-size: 14px;
}

.login-box button {
    width: 100%;
    padding: 11px;
    background: #4b79a1;
    border: none;
    color: white;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px;
}

.login-box button:hover {
    background: #3e6a8c;
}

.error-msg {
    background: #ffe5e5;
    color: #b10000;
    padding: 10px;
    border: 1px solid #ffbebe;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 15px;
    font-size: 14px;
}

.back {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
}

/* =========================================================
    DATA-PENDONOR.PHP
========================================================= */

/* CONTAINER & ALIGNMENT BARU */
.dashboard-container {
    max-width: 95%; /* Memperkecil lebar kontainer utama */
    margin: 20px auto; /* Rata tengah kontainer */
    padding: 20px;
}

.action-buttons {
    /* Style lama dihapus/dipindah ke .action-buttons-wrapper */
}

/* Meratakan tombol Beranda/Tambah Pendonor di tengah */
.action-buttons-wrapper {
    text-align: center; 
    margin-bottom: 20px;
    padding-top: 10px; /* Jarak dari tepi atas */
}

.action-buttons .btn {
    margin: 0 5px; /* Memberi jarak antar tombol */
}

.btn {
    padding: 8px 12px;
    border-radius: 6px;
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.btn-blue { background: #007bff; }
.btn-blue:hover { background: #0056b3; }

.btn-green { background: #28a745; }
.btn-green:hover { background: #1e7e34; }

.btn-red { background: #dc3545; }
.btn-red:hover { background: #b52a37; }

.btn-grey { background: grey; }
.btn-grey:hover { background: #555; }

/* Merapikan Judul dan Logout */
.top-actions {
    /* Cukup beri margin atas agar tombol atas tidak terlalu menempel ke judul */
    padding-top: 15px; 
    padding-bottom: 10px;
    
    position: relative; /* Tetap pertahankan relative sebagai acuan bagi judul absolute */
    height: 35px; /* Tambahkan tinggi agar ada ruang untuk judul */
}

/* Judul Data Pendonor di tengah */
.page-title {
    position: absolute; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 1; 
    
    font-size: 28px;
    color: #333;
    margin: 0;
    /* Tambahkan margin-top agar tidak terlalu mepet ke tombol atas */
    margin-top: 5px; 
}

.dashboard-logout-btn {
    position: absolute;
    /* Posisikan di pojok kanan atas dashboard container */
    top: 20px; 
    right: 20px; 
    
    padding: 8px 12px;
    background: #dc3545; /* Warna merah */
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    z-index: 10;
}

.dashboard-logout-btn:hover {
    background: #b52a37;
}

/* TABLE */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 13px; /* DIUBAH: Ukuran font tabel diperkecil */
}

table, th, td {
    border: 1px solid #bbb;
}

th {
    background: #f2f2f2;
    padding: 10px;
    text-align: center;
}

td {
    padding: 8px;
    /* Tambahkan ini jika Anda ingin semua teks data rata tengah */
    /* text-align: center; */ 
}

/* TABLE ACTIONS */
.action-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* Jarak dihilangkan karena menggunakan pembatas */
    font-size: 13px;
    white-space: nowrap; /* Mencegah baris baru */
}

/* Style untuk tombol Aksi (diubah menjadi seperti link teks) */
.action-cell .btn {
    padding: 0 5px; 
    border-radius: 0;
    font-size: 13px;
    background: none; 
    font-weight: normal;
    text-decoration: none; 
}

.action-cell .btn i {
    margin-right: 3px; /* Jarak antara ikon dan teks */
}

/* Warna Teks Aksi */
.action-cell .btn-green {
    color: #28a745; 
}
.action-cell .btn-red {
    color: #dc3545; 
}
.action-cell .btn-green:hover,
.action-cell .btn-red:hover {
    text-decoration: underline;
}

/* PEMBATAS UNTUK KOLOM AKSI */
.action-separator {
    color: #ccc;
    margin: 0 3px; /* Jarak pembatas dari tombol */
    font-weight: normal;
}

/* =========================================================
    DASHBOARD-ADMIN.PHP
========================================================= */

.dashboard-container {
    padding: 20px;
}

/* Tambahkan style untuk judul di Admin yang tidak menggunakan .page-title */
.dashboard-container h1, .dashboard-container h2 {
    text-align: center; /* Rata tengah semua judul di admin */
    margin-top: 0;
    margin-bottom: 25px; 
    font-size: 28px;
    color: #333;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.dashboard-table th {
    background: #ddd;
    padding: 8px;
}

.dashboard-table td {
    padding: 8px;
    border: 1px solid black;
}