/* assets/css/style.css */
/* --- ITO NA ANG GLOBAL FILE MO --- */

/* ----- Global Variables & Reset ----- */
:root {
    /* Maroon Theme */
    --bg-gradient: linear-gradient(135deg, #6b001a, #3a000f);
    --bg-dark: #1f0006;
    --bg-light: #3a000f; /* Para sa mga card at sidebar */

    /* Gold Theme */
    --accent-primary: #D4AF37; /* Rich Gold */
    --accent-light: #E1C16E; /* Softer Gold */
    --accent-gradient: linear-gradient(90deg, #E1C16E, #D4AF37);

    /* Text Theme */
    --text-primary: #FFFFFF; /* Para sa dark backgrounds (header/sidebar) */
    --text-secondary: #d1d1d1;
    --text-dark: #333333; /* Para sa white backgrounds (content) */
    --text-dark-secondary: #555555;
    --header-maroon: #6b001a;

    /* Input Theme */
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: rgba(212, 175, 55, 0.3);

    /* Layout */
    --sidebar-width: 260px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* assets/css/style.css */
body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-dark); 
    color: var(--text-primary);
    /* Siguraduhing walang horizontal scroll */
    overflow-x: hidden !important; 
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--accent-light);
}

/* ----- App Loading Spinner ----- */
.app-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-gradient);
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ----- SweetAlert2 Dark Theme Override ----- */
.swal2-popup {
    background: var(--bg-light) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 15px !important;
}
.swal2-title {
    color: var(--accent-light) !important;
    font-family: 'Poppins', sans-serif !important;
}
.swal2-html-container {
    color: var(--text-primary) !important;
    font-family: 'Poppins', sans-serif !important;
}
.swal2-icon.swal2-error {
    border-color: #f27474 !important;
    color: #f27474 !important;
}
.swal2-icon.swal2-success {
    border-color: #a5dc86 !important;
    color: #a5dc86 !important;
}
.swal2-confirm {
    background: var(--accent-gradient) !important;
    color: var(--bg-dark) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}
.swal2-toast {
    background: var(--bg-light) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px !important;
}
.swal2-toast .swal2-title {
    color: var(--text-primary) !important;
    font-size: 0.9rem !important;
}

/* --- ITO ANG BAGONG FIX PARA SA INPUTS --- */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    background: rgba(0,0,0,0.2) !important;
    color: var(--text-primary) !important; /* Puting text */
    border: 1px solid var(--input-border) !important; /* Gold border */
    border-radius: 8px !important;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3) !important; /* Gold focus */
}
/* Ayusin ang placeholder text color */
.swal2-popup .swal2-input::placeholder,
.swal2-popup .swal2-textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.8;
}
/* Ayusin ang select options */
.swal2-popup .swal2-select option {
    background: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}
/* Ayusin ang validation message */
.swal2-validation-message {
    background: #f0f0f0 !important;
    color: #666666 !important;
    border-radius: 8px !important;
}

/* ----- SweetAlert2 Responsive Overrides ----- */
@media (max-width: 767px) {
    .swal2-popup {
        width: 90% !important;
        max-width: 400px;
        padding: 1rem 1rem 1.5rem 1rem !important; 
    }

    .swal2-title {
        font-size: 1.5rem !important;
    }
    
    .swal2-html-container {
        margin: 0.5rem 0 !important;
    }

    .swal2-input,
    .swal2-textarea,
    .swal2-select {
        width: 90% !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 1rem !important;
    }

    .swal2-textarea {
        min-height: 100px !important; /* Bawasan ang taas sa mobile */
    }

    .swal2-actions {
        gap: 0.5rem !important;
        font-size: 0.9rem;
    }
}