body {
    background-image: url('../img/BG.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0b69a3;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    margin: 0;
}

.login-container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
}

.logo-placeholder {
    text-align: center;
    margin-bottom: 20px;
}

.logo-placeholder img {
    max-width: 120px; 
    height: auto;
}

.form-control::placeholder {
    text-align: center;
    font-size: 0.9rem;
}

.form-control, .form-select {
    text-align: center;
}

/* Button Custom Styles */
.btn-batal {
    background-color: #8b0000;
    color: white;
    border: 1px solid #5a0000;
}
.btn-batal:hover {
    background-color: #a50000;
    color: white;
}

.btn-masuk, .btn-simpan, .btn-hijau, .btn-daftar-santri {
    background-color: #4b8b1a;
    color: white;
    border: 1px solid #2e590c;
}
.btn-masuk:hover, .btn-simpan:hover, .btn-hijau:hover, .btn-daftar-santri:hover {
    background-color: #5ca124;
    color: white;
}

.btn-daftar-baru {
    background-color: #f7931e;
    color: white;
    border: 1px solid #c97512;
}
.btn-daftar-baru:hover {
    background-color: #ffa436;
    color: white;
}

.text-header-small {
    font-size: 0.85rem;
    line-height: 1.4;
}

.text-info-small {
    font-size: 0.75rem;
    line-height: 1.3;
}

.custom-hr {
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    margin: 10px 0;
}

.text-white-shadow {
    color: white;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}

/* Alert System */
.alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 300px;
    max-width: 90%;
}

.custom-alert {
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    animation: slideIn 0.3s ease-out;
}

.custom-alert.success {
    background-color: #4b8b1a; /* Hijau */
}

.custom-alert.error {
    background-color: #8b0000; /* Merah */
}

.custom-alert .btn-close-alert {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0 0 10px;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 576px) {
    .alert-container {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }
    .custom-alert {
        margin-bottom: 0;
        border-radius: 0;
    }
}

/* Flatpickr Customization */
.flatpickr-months {
    background-color: #086bae !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.flatpickr-current-month, .flatpickr-month {
    color: white !important;
    fill: white !important;
}

.flatpickr-month {
    background: transparent !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #086bae !important;
    color: white !important;
}

.flatpickr-calendar {
    border: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

/* Bagian yang diperbaiki */
.flatpickr-weekdays,
.flatpickr-weekday {
    background-color: #086bae !important;
    color: white !important;
}

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
    fill: white !important;
    color: white !important;
}

.flatpickr-months .flatpickr-prev-month:hover, 
.flatpickr-months .flatpickr-next-month:hover {
    fill: #ff931e !important;
}

/* Validation Styling */
.form-control.is-invalid, .form-select.is-invalid {
    border: 2px solid #ff0000 !important;
}

.invalid-feedback {
    color: #ffcccc;
    font-weight: bold;
    font-size: 0.8rem;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
    display: block;
    margin-top: 4px;
}