/* Assessment management: the Settings module, and the applicant's exam page.
   Reuses the tokens and shell layout defined in app.css. */

/* --- the module's tab rail ---------------------------------------------- */
.assessment-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px}
.assessment-tabs a{flex:1 1 170px;display:grid;gap:2px;padding:10px 14px;border-radius:9px;color:#3d4c60}
.assessment-tabs a:hover{background:#f1f5f8}
.assessment-tabs a.active{background:var(--brand);color:#fff}
.assessment-tabs strong{font-size:13px}
.assessment-tabs small{font-size:11px;color:var(--muted)}
.assessment-tabs a.active small{color:#cfe8e3}

/* --- filters and bulk toolbars ------------------------------------------ */
.filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:16px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px}
.filter-bar label{flex:1 1 190px}
.filter-bar button{flex:0 0 auto}
.bulk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:12px}
.bulk-bar>span{color:var(--muted);font-size:12px}
.bulk-bar .grade-comment{flex:1 1 320px}
th.check-col,td.check-col{width:40px;padding-right:0}
.check-col input{width:auto}

/* --- issued links ------------------------------------------------------- */
.link-box{margin-bottom:18px}
.link-box h2{margin-bottom:6px}
.link-box p{margin:0 0 14px}
.link-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.link-row>span{flex:0 0 210px;display:grid;font-size:12px}
.link-row small{color:var(--muted);font-weight:500}
.link-row input{flex:1 1 260px;font-family:Consolas,Monaco,monospace;font-size:12px}

/* --- the exam toolbar (question builder) -------------------------------- */
.exam-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-bottom:16px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
/* The picker is sized to the longest exam name rather than left to swallow the row,
   and it is the part that gives way first when the row runs out of space. */
.exam-picker{flex:1 1 220px;min-width:190px;max-width:320px;margin:0}
.exam-picker label{margin:0}
/* nowrap is the whole point: squeezed between the picker and the buttons, a wrapping
   strip collapses one stat per line and turns the bar into a tall column. Keeping it
   atomic makes the bar itself wrap instead, which is a two-row toolbar rather than a mess. */
.exam-stats{flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:10px 28px;margin:0;padding-left:24px;border-left:1px solid var(--line)}
.exam-stats div{display:grid;gap:3px}
.exam-stats dt{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.exam-stats dd{margin:0;font-size:19px;font-weight:750;line-height:1.15}
.exam-stats dd small{color:var(--muted);font-size:12px;font-weight:600}
.exam-bar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto}
/* Destructive, but not competing with the primary action: outlined rather than filled. */
.exam-bar-actions .danger{background:none;box-shadow:inset 0 0 0 1px #edc9c2}
.exam-bar-actions .danger:hover{background:#fdf0ee}
.exam-bar-actions button[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
/* On a narrow screen the strip gets its own row, where it has room to wrap into a grid
   rather than overflow. The divider only reads as one while it sits beside the picker. */
@media(max-width:1000px){
 .exam-picker{max-width:none}
 .exam-stats{flex:1 1 100%;flex-wrap:wrap;padding-left:0;border-left:0}
 .exam-bar-actions{margin-left:0}
}

.exam-facts{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:12px}
.exam-facts strong{display:block;color:var(--ink);font-size:17px;font-weight:750}

/* --- questions, in the builder and in a marked attempt ------------------ */
.question-list{display:grid;gap:14px}
.question-card{border:1px solid var(--line);border-radius:11px;padding:16px 18px;background:#fbfcfd}
.question-card.is-right{border-left:4px solid #12a37f}
.question-card.is-wrong{border-left:4px solid #c4483a}
.question-card>header{display:flex;align-items:flex-start;gap:14px}
.question-head{flex:1}
.question-head strong{display:block;font-size:14px;line-height:1.5}
.question-head small{display:block;margin-top:5px;color:var(--muted);font-weight:500}
.question-index{flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:800}
.question-score{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--brand)}
.question-options{list-style:none;margin:12px 0 0 42px;padding:0;display:grid;gap:6px}
.question-options li{display:flex;align-items:baseline;gap:9px;font-size:13px;color:#3d4c60}
.question-options li.is-correct{color:#0b6b52;font-weight:700}
.question-options li.is-chosen{background:#eef4f8;border-radius:7px;padding:4px 8px;margin-left:-8px}
.question-options i{color:var(--muted);font-size:10.5px;font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.question-essay{margin:12px 0 0 42px;color:var(--muted);font-size:12px}
.answer-text{margin:12px 0 0 42px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:9px;font-size:13px;line-height:1.6;white-space:pre-wrap}
.grade-field{margin:12px 0 0 42px;max-width:220px}
.grade-field input{max-width:120px}
.grade-field small{color:var(--muted);font-weight:500}

/* --- the option editor inside the question dialog ----------------------- */
.option-box{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.option-box>small{color:var(--muted);font-weight:500;line-height:1.6}
.option-row{display:flex;align-items:center;gap:12px}
.option-row input[type=text],.option-row>input{flex:1}
.option-row .check{flex:0 0 auto;white-space:nowrap}

/* --- one attempt -------------------------------------------------------- */
.attempt-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.attempt-head h2{margin:4px 0 6px;font-size:21px}
.attempt-head p{margin:0;font-size:12px}
.attempt-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.attempt-facts article{padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:11px}
.attempt-facts span{display:block;color:var(--muted);font-size:11px}
.attempt-facts strong{display:block;margin-top:6px;font-size:15px}
tr.reason-row td{padding-top:0;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}

/* --- the applicant's exam page ------------------------------------------ */
.exam-intro .exam-facts{margin:20px 0;padding:16px 18px;background:#f4f8f9;border-radius:11px}
.exam-intro form{margin:20px 0 12px}
.exam-wrap{width:min(860px,100%)}
.exam-paper{display:grid;gap:14px}
.exam-bar-fixed{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.exam-bar-fixed strong{display:block;font-size:16px;margin-top:3px}
.exam-bar-fixed small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.exam-timer{text-align:right;padding:8px 16px;border-radius:10px;background:#eef4f8}
.exam-timer span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.exam-timer strong{font-family:Consolas,Monaco,monospace;font-size:24px;font-weight:700;letter-spacing:1px}
.exam-timer.is-low{background:#fdf3e2}
.exam-timer.is-low strong{color:#8a6420}
.exam-timer.is-urgent{background:#fbeae8}
.exam-timer.is-urgent strong{color:#912018}
.exam-question{padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:12px}
.exam-question>header{display:flex;align-items:flex-start;gap:14px}
.exam-question strong{display:block;font-size:15px;line-height:1.55;font-weight:700}
.exam-question small{display:block;margin-top:5px;color:var(--muted);font-weight:500}
.exam-question textarea{margin-top:14px}
.exam-choices{display:grid;gap:8px;margin:14px 0 0 42px}
.exam-choices .check{gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;cursor:pointer}
.exam-choices .check:hover{border-color:var(--brand);background:#f5faf9}
.exam-choices .check:focus-within{outline:2px solid rgba(12,117,106,.18)}
.exam-guidance{margin:10px 0 0;color:var(--muted);font-size:12px}
.exam-submit{padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:center}
.exam-submit p{margin:0 0 14px;color:var(--muted);font-size:12.5px}

@media(max-width:900px){
 .attempt-facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
 .attempt-facts{grid-template-columns:1fr}
 .question-options,.question-essay,.answer-text,.grade-field,.exam-choices{margin-left:0}
 .exam-timer{width:100%;text-align:left}
}