/* --- Global Variables & Base Styles --- */
:root {
    --bg-color: #0d1117;
    --chesmi-red: #e8491d;
    --chesmi-yellow: #f7ca18;
    --text-color: #c9d1d9;
    --border-color: #30363d;
    --secondary-color: #161b22;
    --border-radius: 8px;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #f7ca18;
}
body { font-family: 'Roboto Mono', monospace; line-height: 1.6; margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); }
#particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }
.container { max-width: 900px; margin: 20px auto; padding: 20px; background: rgba(13, 17, 23, 0.85); border: 1px solid var(--border-color); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); border-radius: var(--border-radius); backdrop-filter: blur(5px); z-index: 1; position: relative; }
header { text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; }
.company-logo { max-height: 70px; margin-bottom: 15px; }
header h1 { color: var(--text-color); font-size: 1.8em; }
footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); font-size: 0.9em; color: #8b949e; }
.btn { display: inline-block; padding: 12px 25px; border-radius: var(--border-radius); font-size: 1em; font-weight: bold; cursor: pointer; text-decoration: none; transition: all 0.3s; border: 1px solid var(--chesmi-red); color: var(--chesmi-red); background: transparent; }
.btn:hover { background-color: var(--chesmi-red); color: var(--bg-color); box-shadow: 0 0 15px var(--chesmi-red); }
.btn i { margin-right: 8px; }
.btn-danger { border-color: var(--danger-color); color: var(--danger-color); }
.btn-danger:hover { background-color: var(--danger-color); color: #fff; box-shadow: 0 0 15px var(--danger-color); }

/* --- Login & Hub Pages --- */
.login-form { max-width: 500px; margin: 20px auto; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input { box-sizing: border-box; width: 100%; padding: 10px; background: var(--secondary-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--text-color); font-size: 1em; }
.login-form button { width: 100%; }
.hub-page .quiz-card { border: 1px solid var(--chesmi-red); color: var(--chesmi-red); background: transparent; }
.hub-page .quiz-card:hover { background-color: var(--chesmi-red); color: var(--bg-color); box-shadow: 0 0 15px var(--chesmi-red); }
.hub-page .hub-subtitle { color: var(--text-color); margin-top: -10px; font-size: 1.1em; }
.hub-page .quiz-card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 30px; }
.hub-page .quiz-card { padding: 25px; text-decoration: none; text-align: center; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; border-radius: var(--border-radius); }
.hub-page .quiz-card:hover { transform: translateY(-10px); }
.hub-page .quiz-card .card-icon { font-size: 3em; margin-bottom: 15px; }
.hub-page .quiz-card .card-title { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }
.hub-page .quiz-card .card-description { font-size: 0.9em; line-height: 1.5; }
.admin-link { font-size: 0.8em; color: #666; text-decoration: none; margin-top: 15px; display: inline-block; }
.admin-link:hover { color: var(--chesmi-yellow); }

/* --- Quiz & Results Pages --- */
.quiz-page-header { text-align: center; position: relative; }
.back-to-hub { color: #8b949e; text-decoration: none; position: absolute; top: 10px; left: 10px; font-size: 0.9em; }
.back-to-hub:hover { color: var(--chesmi-red); }
.question-area { padding: 20px; background-color: var(--secondary-color); border-radius: var(--border-radius); margin-bottom: 20px; min-height: 100px; }
.mcq-option { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid var(--border-color); color: var(--text-color); padding: 15px; margin-bottom: 10px; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.3s, border-color 0.3s; font-size: 1em; }
.mcq-option:hover { background-color: var(--border-color); border-color: var(--chesmi-yellow); }
.feedback { margin-top: 25px; padding: 20px; border-radius: var(--border-radius); text-align: left; display: none; }
body.state-secure .container, .results-pass .container { border-color: var(--success-color); }
body.state-warning .container, .results-ok .container { border-color: var(--warning-color); }
body.state-danger .container, .results-fail .container { border-color: var(--danger-color); }
.results-pass { background-color: #1a3c26; }
.results-ok { background-color: #41381c; }
.results-fail { background-color: #4d0000; }
.results-pass #scoreMessage { color: var(--success-color); }
.results-ok #scoreMessage { color: var(--warning-color); }
.results-fail #scoreMessage { color: var(--danger-color); }
.certificate-button-wrapper { margin-top: 20px; text-align: center; }
#generateCertBtn { border-color: var(--success-color); color: var(--success-color); }
#generateCertBtn:hover { background-color: var(--success-color); color: var(--bg-color); box-shadow: 0 0 15px var(--success-color); }

/* --- MODAL --- */
.modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-content { background-color: var(--secondary-color); padding: 30px; border: 1px solid var(--border-color); width: 90%; max-width: 600px; border-radius: var(--border-radius); text-align: left; }
.modal-content #startQuizBtn { float: right; }

/* --- ADMIN LOG PAGE --- */
.log-controls { margin-bottom: 20px; display: flex; gap: 15px; justify-content: center; }
.log-table-container { width: 100%; overflow-x: auto; }
#logTable { width: 100%; border-collapse: collapse; }
#logTable th, #logTable td { padding: 10px 15px; border: 1px solid var(--border-color); text-align: left; }
#logTable th { background-color: var(--secondary-color); }
#logTable tbody tr:nth-child(odd) { background-color: #1c2128; }
.status-pass { color: var(--success-color); font-weight: bold; }
.status-fail { color: var(--danger-color); font-weight: bold; }

/* --- CERTIFICATE STYLES (A4 Landscape) --- */
.certificate-page { background-color: #ccc; display: flex; justify-content: center; align-items: flex-start; padding: 20px; }
.certificate-wrapper { text-align: center; }
.certificate-container { width: 297mm; height: 210mm; /* A4 Landscape */ margin: 0 auto; background: #fff; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; border: 2px solid var(--chesmi-red); }
.certificate-border { border: 8px solid var(--chesmi-yellow); width: 100%; height: 100%; flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px; box-sizing: border-box; color: #333; }
.certificate-logo { max-height: 60px; }
.certificate-header h1 { font-family: 'Tinos', serif; font-size: 2.5em; color: var(--chesmi-red); margin: 10px 0; }
.certificate-body { text-align: center; }
.certificate-body h2 { font-family: 'Tinos', serif; font-size: 2.2em; }
.user-name { font-family: 'Tinos', serif; font-size: 2.8em; font-weight: bold; color: var(--chesmi-red); border-bottom: 2px solid #333; padding-bottom: 10px; margin: 20px 0; }
.quiz-name { font-size: 1.6em; font-weight: bold; }
.print-button-container { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
@media print { body, .certificate-page { margin: 0; padding: 0; background-color: #fff; } .print-button-container { display: none; } .certificate-wrapper { margin: 0; padding: 0; box-shadow: none; } .certificate-container { box-shadow: none; border: 10px solid #161b22; } }
/* --- Additions for Admin Password Modal --- */
.error-text {
    color: var(--danger-color);
    font-size: 0.9em;
    margin-top: 5px;
}
/* In client/style.css, ADD this to the END of the file */

/* Themed Login/Register Toggle Buttons */
.form-toggle {
    display: flex;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.toggle-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

.toggle-btn.active {
    background-color: var(--chesmi-red);
    color: #fff;
    font-weight: bold;
}

.toggle-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Container for Header Buttons on Hub Page */
.header-buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--chesmi-yellow);
    color: var(--chesmi-yellow);
}

.btn-secondary:hover {
    background-color: var(--chesmi-yellow);
    color: var(--bg-color);
}
/* In client/style.css, add this to the end */

/* Leaderboard Trophy Colors */
.fa-trophy.gold {
    color: #FFD700;
    text-shadow: 0 0 5px gold;
}
.fa-trophy.silver {
    color: #C0C0C0;
    text-shadow: 0 0 5px silver;
}
.fa-trophy.bronze {
    color: #CD7F32;
    text-shadow: 0 0 5px sienna;
}
/* === UI OVERHAUL STYLES === */

/* General Card Styles */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

.data-card {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.data-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.data-card h3 {
    margin: 0 0 10px 0;
    color: var(--chesmi-yellow);
    font-size: 1.4em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.data-card p {
    margin: 2px 0;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
}

.data-card p strong {
    color: var(--text-color);
    margin-right: 10px;
}

/* Profile Page Card Styles */
.status-icon {
    font-size: 1.2em;
    margin-right: 8px;
}
.status-pass .status-icon { color: var(--success-color); }
.status-fail .status-icon { color: var(--danger-color); }

/* Leaderboard Card Styles */
.leaderboard-rank {
    font-size: 2em;
    font-weight: bold;
    color: var(--chesmi-yellow);
    margin-right: 20px;
}
.leaderboard-card {
    flex-direction: row;
    align-items: center;
}
.leaderboard-card .data-card-content {
    flex-grow: 1;
}
.leaderboard-card.gold { border-left: 5px solid #FFD700; }
.leaderboard-card.silver { border-left: 5px solid #C0C0C0; }
.leaderboard-card.bronze { border-left: 5px solid #CD7F32; }
.leaderboard-card.gold .leaderboard-rank { color: #FFD700; }
.leaderboard-card.silver .leaderboard-rank { color: #C0C0C0; }
.leaderboard-card.bronze .leaderboard-rank { color: #CD7F32; }

/* Admin Dashboard Card Styles */
.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-card-actions {
    display: flex;
    gap: 10px;
}
.role-badge {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
}
.role-admin {
    background-color: var(--chesmi-red);
    color: white;
}
.role-user {
    background-color: var(--border-color);
    color: var(--text-color);
}
/* === Admin Modal Styles === */
.modal.show {
    display: flex;
}
.modal-content.large {
    max-width: 800px;
}
#modalUserAttempts {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}
#modalUserAttempts table {
    width: 100%;
    border-collapse: collapse;
}
#modalUserAttempts th, #modalUserAttempts td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
#modalUserAttempts th {
    background-color: var(--secondary-color);
}