/* =====================================================
GLOBAL STYLES
===================================================== */

body{
background:#f5f7fa;
font-family: "Segoe UI", Arial, sans-serif;
margin:0;
padding:0;
color:#333;
}

a{
text-decoration:none;
}

.content-area{
padding:30px 0;
}

/* =====================================================
HEADER
===================================================== */

.top-header{
background:#ffffff;
border-bottom:4px solid #c00000;
padding:15px 0;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.logo{
height:90px;
width:auto;
}

.university-title{
color:#b30000;
font-size:30px;
font-weight:700;
}

.campus-title{
color:#444;
font-size:18px;
font-weight:600;
}

.exam-title{
color:#0d6efd;
font-size:22px;
font-weight:700;
}

/* =====================================================
CARDS
===================================================== */

.card{
border:none;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.card-header{
font-weight:600;
}

/* =====================================================
LOGIN PAGE
===================================================== */

.login-container{
max-width:1000px;
margin:auto;
}

.login-title{
font-size:22px;
font-weight:600;
margin-bottom:20px;
}

.login-divider{
border-left:1px solid #ddd;
}

@media(max-width:768px){

```
.login-divider{
    border-left:none;
    border-top:1px solid #ddd;
    margin-top:25px;
    padding-top:25px;
}
```

}

/* =====================================================
FORMS
===================================================== */

.form-label{
font-weight:600;
}

.form-control{
border-radius:10px;
}

.form-control:focus{
box-shadow:none;
border-color:#0d6efd;
}

/* =====================================================
BUTTONS
===================================================== */

.btn{
border-radius:10px;
font-weight:600;
}

.btn-primary{
padding:10px 20px;
}

.btn-success{
padding:10px 20px;
}

.btn-danger{
padding:10px 20px;
}

/* =====================================================
DASHBOARD
===================================================== */

.dashboard-card{
text-align:center;
padding:25px;
transition:0.3s;
cursor:pointer;
}

.dashboard-card:hover{
transform:translateY(-5px);
}

.dashboard-icon{
font-size:40px;
margin-bottom:15px;
}

.dashboard-title{
font-size:18px;
font-weight:600;
}

/* =====================================================
TABLES
===================================================== */

.table{
background:#fff;
}

.table thead{
background:#0d6efd;
color:white;
}

.table th{
vertical-align:middle;
}

.table td{
vertical-align:middle;
}

/* =====================================================
EXAM PAGE
===================================================== */

.question-card{
padding:25px;
}

.question-number{
font-size:18px;
font-weight:700;
color:#0d6efd;
}

.question-text{
font-size:18px;
margin:15px 0;
}

.option-box:has(input:checked){
    background:#e7f1ff;
    border-color:#0d6efd;
}

.option-box:hover{
background:#f8f9fa;
border-color:#0d6efd;
}

.exam-timer{
font-size:22px;
font-weight:700;
color:#dc3545;
}

.question-palette{
background:#fff;
border-radius:15px;
padding:20px;

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
}

.palette-btn{
width:60px;
height:60px;
margin:5px;

display:inline-flex;
align-items:center;
justify-content:center;

font-size:20px;
font-weight:600;

white-space:nowrap;
overflow:hidden;
}

/* =====================================================
SUBMITTED PAGE
===================================================== */

.success-box{
text-align:center;
padding:50px 20px;
}

.success-icon{
font-size:70px;
color:#198754;
}

.success-title{
font-size:28px;
font-weight:700;
margin-top:15px;
}

.success-message{
font-size:18px;
color:#666;
}

/* =====================================================
ALERTS
===================================================== */

.alert{
border-radius:10px;
}

/* =====================================================
FOOTER
===================================================== */

.footer{
margin-top:50px;
padding:15px;
text-align:center;
color:#666;
font-size:14px;
}
