/* =========================================================
   EduSpark JEE Mock Test System - Global Stylesheet
   Theme: NTA CBT inspired (clean, functional, high contrast)
   ========================================================= */

:root{
    --navy:#0b3d63;
    --teal:#0f6674;
    --orange:#e8720c;
    --green:#2e7d32;
    --red:#c0392b;
    --purple:#6a3d9a;
    --grey-bg:#f4f6f8;
    --border:#d7dde3;
    --card-bg:#ffffff;
    --text:#1f2937;
}

*{box-sizing:border-box;}
body{
    margin:0;
    font-family:'Segoe UI', Arial, sans-serif;
    background:var(--grey-bg);
    color:var(--text);
}
a{text-decoration:none;color:inherit;}

/* ---------- Top bar ---------- */
.topbar{
    background:#fff;
    border-bottom:3px solid var(--navy);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 24px;
}
.topbar .brand{display:flex;align-items:center;gap:12px;}
.topbar .brand h1{font-size:18px;margin:0;color:var(--navy);}
.topbar .brand small{display:block;color:#6b7280;font-size:11px;}
.topbar nav a{margin-left:18px;font-weight:600;color:var(--navy);}
.topbar .user-chip{background:var(--navy);color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;}

/* ---------- Layout containers ---------- */
.container{max-width:1200px;margin:0 auto;padding:24px;}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:22px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr;}}

h2.section-title{color:var(--navy);border-left:5px solid var(--orange);padding-left:10px;margin-top:0;}

/* ---------- Buttons ---------- */
.btn{
    display:inline-block;border:none;border-radius:5px;padding:10px 20px;
    font-weight:600;font-size:14px;cursor:pointer;transition:.15s;
}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:#082a45;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:#245f27;}
.btn-orange{background:var(--orange);color:#fff;}
.btn-orange:hover{background:#c15e09;}
.btn-red{background:var(--red);color:#fff;}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--text);}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- Forms ---------- */
label{display:block;font-weight:600;margin-bottom:5px;font-size:13px;color:#374151;}
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=date],input[type=number],select,textarea{
    width:100%;padding:10px;border:1px solid var(--border);border-radius:5px;
    margin-bottom:14px;font-size:14px;background:#fff;
}
.form-narrow{max-width:440px;margin:40px auto;}
.error-box{background:#fdecea;border:1px solid var(--red);color:var(--red);padding:10px 14px;border-radius:5px;margin-bottom:14px;font-size:13px;}
.success-box{background:#eaf6ec;border:1px solid var(--green);color:var(--green);padding:10px 14px;border-radius:5px;margin-bottom:14px;font-size:13px;}
.info-box{background:#eaf2f8;border:1px solid var(--navy);color:var(--navy);padding:10px 14px;border-radius:5px;margin-bottom:14px;font-size:13px;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:10px;border:1px solid var(--border);text-align:left;}
th{background:var(--navy);color:#fff;}
tr:nth-child(even){background:#fafbfc;}

/* ---------- Credential card (after registration) ---------- */
.credential-card{
    border:2px dashed var(--orange);border-radius:8px;padding:20px;
    background:#fff8f0;text-align:center;
}
.credential-card .code{font-size:26px;font-weight:700;color:var(--navy);letter-spacing:1px;}

/* =========================================================
   EXAM / CBT INTERFACE (NTA style)
   ========================================================= */
.exam-header{background:#fff;border-bottom:1px solid var(--border);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.exam-header .meta{font-size:13px;line-height:1.6;}
.exam-header .meta b{color:var(--orange);}
.timer-box{background:#0d6efd;color:#fff;padding:6px 14px;border-radius:5px;font-weight:700;font-size:15px;}

.exam-body{display:flex;gap:0;align-items:flex-start;}
.exam-main{flex:1;background:#fff;padding:20px;border-right:1px solid var(--border);min-height:60vh;}
.exam-sidebar{width:330px;background:#fff;padding:16px;flex-shrink:0;}

.q-header{display:flex;justify-content:space-between;border-bottom:2px solid var(--navy);padding-bottom:8px;margin-bottom:16px;}
.q-header h3{margin:0;color:var(--navy);}
.q-image{max-width:100%;border:1px solid var(--border);border-radius:4px;margin-bottom:16px;}

.option-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:10px;cursor:pointer;}
.option-row:hover{background:#f5f9ff;}
.option-row.selected{border-color:var(--navy);background:#eaf2fb;}
.option-row img{max-height:60px;}
.option-label{width:28px;height:28px;border-radius:50%;border:2px solid var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.option-row.selected .option-label{background:var(--navy);color:#fff;}

.numeric-answer-box{margin-top:10px;}
.numeric-answer-box input{max-width:220px;display:inline-block;}

.action-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;border-top:1px solid var(--border);padding-top:16px;}
.nav-bar{display:flex;justify-content:space-between;margin-top:16px;}

/* Legend */
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;border:1px dashed var(--border);padding:10px;border-radius:6px;margin-bottom:14px;}
.legend .item{display:flex;align-items:center;gap:6px;}
.status-box{width:24px;height:22px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;}
.st-not-visited{background:#e5e7eb;color:#333;border:1px solid #c7ccd1;}
.st-not-answered{background:var(--red);}
.st-answered{background:var(--green);}
.st-marked{background:var(--purple);}
.st-answered-marked{background:var(--purple);position:relative;}

/* Palette grid */
.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:340px;overflow-y:auto;padding:4px;}
.palette-btn{
    aspect-ratio:1;border:1px solid #c7ccd1;border-radius:4px;background:#e5e7eb;
    font-size:12px;font-weight:700;cursor:pointer;color:#333;
}
.palette-btn.not-answered{background:var(--red);color:#fff;border-color:var(--red);}
.palette-btn.answered{background:var(--green);color:#fff;border-color:var(--green);}
.palette-btn.marked{background:var(--purple);color:#fff;border-color:var(--purple);}
.palette-btn.answered-marked{background:var(--purple);color:#fff;border-color:var(--purple);}
.palette-btn.current{outline:3px solid var(--orange);}

.section-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.section-tabs button{flex:1;padding:8px;border:1px solid var(--border);background:#f0f2f5;border-radius:5px;font-weight:600;cursor:pointer;}
.section-tabs button.active{background:var(--navy);color:#fff;}

/* ---------- Dashboard widgets ---------- */
.stat-card{background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;border-radius:8px;padding:18px;text-align:center;}
.stat-card .num{font-size:28px;font-weight:700;}
.stat-card .label{font-size:12px;opacity:.85;}

.footer-note{text-align:center;padding:16px;font-size:12px;color:#6b7280;}