/* assets/css/style.css */

/* Version: 1.1 */



/* --- GENERAL AESTHETICS --- */

:root {

    --primary-color: #9C0033; /* Emerald Green */

    --accent-color: #27AE60; /* Darker Green (Hover) */

    --background-color: #E8F6EF; /* Very Light Green */

    --text-color: #333333; /* Dark Charcoal for readability */

    --light-border: #BDC3C7; /* Light Gray for lines */

    --danger-color: #E74C3C; /* Red for errors/danger */

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    /* UNIVERSAL STYLES (Applies to ALL pages) */

    font-family: 'Poppins', sans-serif;

    background-color: var(--background-color); /* This is the DEFAULT light green fallback */

    color: var(--text-color);

    line-height: 1.6;

    padding: 20px;



    /* OPTIONAL: Keep these if you want the background to be fixed on all pages, 

       even without a picture */

    background-attachment: fixed; 

}



/* --- NEW: Utility to remove body padding for full-screen backgrounds --- */

.full-bleed-bg {

    padding: 0;

}



.bg-index {

    /* USE THE FULL ABSOLUTE PATH CONFIRMED TO WORK */

    background-image: url('../../images/background_index.jpg'); 

    background-size: cover;

    background-attachment: fixed;

}



.bg-login {

    background-image: url('../../images/login.jpg');

    background-size: cover;

    background-attachment: fixed;

}



.bg-register {

    background-image: url('../../images/register.png');

    background-size: cover;

    background-attachment: fixed;

}



.bg-user {

    background-image: url('../../images/User.png');

    background-size: cover;

    background-attachment: fixed;

}



.bg-admin {

    background-image: url('../../images/Admin.png');

    background-size: cover;

    background-attachment: fixed;

}



/* --- NEW: Centering for Auth Pages (Login/Register) --- */

.auth-page {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 20px; /* Add padding for smaller screens */

}



.container {

    max-width: 900px;

    margin: 40px auto;

    padding: 10px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



/* --- NEW: Style for the welcome box on index.php --- */

.welcome-box {

    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white background */

    text-align: center;

    padding: 40px;

}



/* --- NEW: Responsive title for the welcome box --- */

.welcome-box h1 {

    font-size: 3.5rem; /* Base size for desktops */

    font-weight: 600;

    color: black;

}



h1, h2, h3 {

    /* Change the color directly to black (#000000 or #333333 for a softer black) */

    color: var(--text-color); 

    /* OR: color: #333333; */

    

    margin-bottom: 15px;

    text-align: center;

}



/* --- NEW: MAIN APPLICATION HEADER --- */

.main-header {

    background-color: var(--primary-color); /* #9C0033 */

    color: white;

    padding: 20px 0;

    margin-bottom: 30px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

}



.main-header h1 {

    margin: 0;

    color: white; /* Overrides the default h1 color */

    font-size: 2.2em;

}



/* --- NEW: Responsive Application Header --- */

.app-header {

    /*display: flex;*/

    justify-content: center;

    align-items: center;

    flex-wrap: wrap; /* Allows items to wrap to the next line on small screens */

    /*gap: 15px;  Adds space between items when they wrap */

}



.app-header h1 {

    /*letter-spacing: 4px; Creates the spaced-out effect */

    text-transform: uppercase;

}



/* --- BUTTONS & FORMS --- */

.btn {

    display: inline-block;

    padding: 10px 20px;

    margin: 5px;

    font-size: 1em;

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.btn-primary {

    background-color: var(--primary-color);

    color: rgb(252, 250, 250);

}



.btn-primary:hover {

    background-color: var(--accent-color);

}



.btn-back {

    display: inline-block; /* Treat as a block but flow with text if needed */

    background-color: #f0f0f0;

    color: var(--text-color);

    padding: 8px 16px;

    border-radius: 6px;

    text-decoration: none;

}



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: 500;

}



input[type="text"],

input[type="password"],

input[type="email"],

input[type="number"],

textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid var(--light-border);

    border-radius: 8px;

    font-size: 1em;

    transition: border-color 0.3s;

}



input:focus, textarea:focus {

    border-color: var(--primary-color);

    outline: none;

}



/* --- EXAM SPECIFIC STYLING --- */

.question-card {

    border: 1px solid var(--primary-color);

    border-radius: 10px;

    padding: 25px;

    margin-bottom: 25px;

    background-color: #FFFFFF;

    box-shadow: 0 2px 4px rgba(46, 204, 113, 0.1); /* Subtle green shadow */

}



.question-text {

    font-size: 1.4em;

    font-weight: 600;

    margin-bottom: 20px;

}



.choice-option {

    display: block;

    padding: 15px;

    margin-bottom: 10px;

    border: 1px solid var(--light-border);

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.2s, border-color 0.2s;

}



.choice-option:hover {

    background-color: var(--background-color); /* Light hover effect */

    border-color: var(--accent-color);

}



/* Hidden radio buttons, styled by the surrounding label */

.choice-option input[type="radio"] {

    display: none;

}



/* Highlight selected choice */

.choice-option input[type="radio"]:checked {

    background-color: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

    /* For visual feedback on the label */

    box-shadow: 0 0 5px rgba(46, 204, 113, 0.5) inset;

}



.choice-option input[type="radio"]:checked + span {

    font-weight: 700;

}





/* Timer Display */

.timer {

    position: sticky;

    top: 0;

    padding: 10px;

    background-color: var(--accent-color);

    color: white;

    font-size: 1.2em;

    font-weight: 700;

    text-align: center;

    border-radius: 0 0 8px 8px;

    z-index: 1000;

}



/* --- UTILITY & MESSAGES --- */

.alert-error {

    background-color: #FDD;

    color: var(--danger-color);

    border: 1px solid var(--danger-color);

    padding: 15px;

    border-radius: 8px;

    margin-bottom: 20px;

}

.alert-success {

    background-color: #D4EDDA;

    color: #155724;

    padding: 15px;

    border-radius: 8px;

    margin-bottom: 20px;

}



.score-display {

    background-color: #f8f9fa;

    border: 1px solid #dee2e6;

    border-radius: 8px;

    padding: 20px;

    margin: 20px auto;

    text-align: center;

    max-width: 320px;

}



.score-label {

    display: block;

    font-size: 1.1em;

    color: #6c757d;

    margin-bottom: 10px;

}



.score-value {

    display: block;

    font-size: 2.8em;

    font-weight: 700;

    color: var(--primary-color);

}



.review-header {

    text-align: center;

    margin-bottom: 30px;

}



.review-question.correct {

    border-left: 5px solid var(--accent-color); /* Green bar */

}



.review-question.incorrect {

    border-left: 5px solid var(--danger-color); /* Red bar */

}



.review-choice {

    padding: 10px;

    margin-bottom: 5px;

    border-radius: 5px;

    border: 1px solid #ddd;

}



.review-choice.correct-answer {

    background-color: #D4EDDA; /* Light green */

    border-color: var(--accent-color);

    font-weight: bold;

}



.review-choice.user-answer.incorrect {

    background-color: #F8D7DA; /* Light red */

    border-color: var(--danger-color);

}

.welcome-tagline {

    margin-top: 30px;

    color: var(--text-color); /* Using the dark charcoal color */

    /* OR: color: #333333; */

}


/* --- MEDIA QUERIES FOR RESPONSIVENESS --- */

@media (max-width: 768px) {

    .welcome-box h1 {

        font-size: 2.5rem; /* Smaller font for tablets */

    }



    /* --- Responsive Exam History Table --- */

    .history-table {

        border: 0;

    }

    .history-table thead {

        display: none; /* Hide table headers on mobile */

    }

    .history-table tr {

        display: block; /* Each row becomes a card */

        margin-bottom: 20px;

        border: 1px solid var(--light-border);

        border-radius: 8px;

        box-shadow: 0 2px 4px rgba(0,0,0,0.05);

        padding: 15px;

    }

    .history-table td {

        display: flex; /* Use flexbox for label-value alignment */

        justify-content: space-between;

        padding: 8px 0;

        border-bottom: 1px dotted #ccc;

        text-align: right; /* Align value to the right */

    }

    .history-table td:last-child {

        border-bottom: 0;

        padding-top: 15px; /* More space for the button */

    }

    .history-table td::before {

        content: attr(data-label); /* Use data-label for the title */

        font-weight: 600;

        text-align: left;

        margin-right: 10px;

    }



    /* --- Improved Readability for Exam Page --- */

    .question-text {

        font-size: 1.2em; /* Slightly larger question text on mobile */

    }

    .choice-option {

        font-size: 1.05em; /* Slightly larger choice text */

    }

}



@media (max-width: 480px) {

    .welcome-box h1 {

        font-size: 2rem; /* Even smaller for mobile phones */

        line-height: 1.2;

    }



    /* --- NEW: Responsive header title --- */

    .app-header h1 {

        font-size: 1.5rem; /* Smaller font for mobile */

        letter-spacing: 2px; /* Reduce spacing on mobile */

        width: 100%; /* Ensure it takes full width to center properly */

    }

}