/* ROOT VARIABLES */
:root { 
    --primary: #0a7a3d; 
    --accent: #ffd700; 
    --bg: #f4f7f6; 
    --white: #ffffff; 
    --border: #dce3e8; 
}

/* GENERAL STYLES */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg); 
    margin: 0; 
    padding-top: 90px; 
    transition: 0.3s; 
}

.top-header { 
    position: fixed; 
    top: 0; left: 0; right: 0; 
    height: 80px; 
    background: var(--primary); 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 30px; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
}

.school-name { font-size: 20px; font-weight: bold; color: var(--accent); }

.container { 
    max-width: 1200px; 
    margin: 20px auto; 
    background: var(--white); 
    padding: 25px; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

.filter-bar { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    background: #eef2f5; 
    padding: 15px; 
    border-radius: 8px; 
    margin-bottom: 20px; 
    align-items: flex-end; 
}

/* BUTTONS */
.btn { 
    padding: 9px 18px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    font-weight: 600; 
    transition: 0.3s; 
}

.btn-save { background: var(--primary); color: white; }

.btn-unlock { 
    background: #2d3748; 
    color: white; 
    padding: 5px 15px; 
    font-size: 13px; 
    border-radius: 4px; 
    border: 1px solid white; 
    cursor: pointer; 
    font-weight: bold; 
}

.btn-unlock:hover { background: white; color: #2d3748; }

/* TABLE STYLES */
.table-container { overflow-x: auto; }

table { border-collapse: collapse; margin-top: 10px; width: auto; }

th { 
    background: #f8f9fa; 
    padding: 12px 15px; 
    border: 1px solid var(--border); 
    font-size: 13px; 
    text-align: center; 
    position: sticky; 
    top: 0; 
    z-index: 10; 
}

td { 
    padding: 8px 12px; 
    border: 1px solid var(--border); 
    font-size: 14px; 
    position: relative; 
    text-align: center; 
}

.col-student-name { text-align: left !important; white-space: nowrap; padding-right: 20px; }

/* INPUTS */
.mark-input { 
    width: 75px; 
    text-align: center; 
    font-weight: bold; 
    border: 1px solid #ccc; 
    padding: 6px; 
    border-radius: 3px; 
    outline: none; 
}

.mark-input:focus { border-color: var(--primary); background: #fffde7; }

.avg-box { background: #f0fdf4 !important; border: 1px solid #bbf7d0; color: #166534; }

.q-input { 
    width: 35px; 
    text-align: center; 
    padding: 4px; 
    border: 1px solid #ddd; 
    font-size: 13px; 
    border-radius: 3px; 
    outline: none; 
}

.total-cell { 
    font-weight: bold; 
    background: #f0fdf4; 
    color: #166534; 
    width: 50px; 
    text-align: center; 
    border: none; 
}

/* SYSTEM STATUS & LOCKS */
#status { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    padding: 12px 25px; 
    border-radius: 5px; 
    display: none; 
    color: white; 
    font-weight: bold; 
    z-index: 2000; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}

#lock-bar { 
    position: fixed; 
    top: 80px; left: 0; right: 0; 
    background: #c53030; 
    color: white; 
    padding: 10px 30px; 
    display: none; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 999; 
    box-shadow: 0 3px 5px rgba(0,0,0,0.2); 
}

.alert-banner { 
    background: #fff5f5; 
    border: 1px solid #fc8181; 
    color: #c53030; 
    padding: 15px; 
    border-radius: 6px; 
    margin-bottom: 15px; 
    font-weight: bold; 
    text-align: center; 
}

/* BADGES */
.badge { font-size: 12px; padding: 3px 8px; border-radius: 4px; font-weight: bold; margin-bottom: 10px; display: inline-block; }
.badge-core { background: #d1fae5; color: #065f46; border: 1px solid #34d399; }
.badge-option { background: #dbeafe; color: #1e40af; border: 1px solid #60a5fa; }

/* DARK MODE */
body.dark-mode { background: #0f172a; color: #e5e7eb; }
body.dark-mode .container { background: #111827; }
body.dark-mode .top-header { background: #020617; }
body.dark-mode .filter-bar { background: #1e293b; border-color: #334155; }
body.dark-mode table th, body.dark-mode table td { background: #020617; color: #e5e7eb; border-color: #334155; }
body.dark-mode .mark-input, body.dark-mode .q-input { background: #020617; color: #e5e7eb; border: 1px solid #334155; }
body.dark-mode .avg-box, body.dark-mode .total-cell { background: #052e16 !important; color: #bbf7d0; }

/* PRINTING */
@media print { .no-print { display: none !important; } }