/* ===== Exam module ===== */
.ex-head { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.ex-head .form-group { flex: 1 1 240px; margin: 0; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.ex-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ex-master { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.ex-master input { width: 20px; height: 20px; }
.ex-toolbar-right { display: flex; gap: 8px; }

.ex-rows { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.ex-row {
  display: grid;
  grid-template-columns: 34px minmax(150px, 1.4fr) minmax(150px, 1fr) minmax(140px, 1.2fr) auto;
  align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; background: #fff;
}
.ex-row.is-off { opacity: .55; }
.ex-chk input { width: 20px; height: 20px; }
.ex-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ex-id b { font-size: 1rem; }
.ex-id span { font-size: .86rem; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ex-marks input { width: 72px; padding: 8px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; text-align: center; font-size: 1rem; }
.ex-marks small { opacity: .6; }
.ex-grade { font-style: normal; font-size: .78rem; font-weight: 600; color: #1B3A6B; flex-basis: 100%; }
.ex-remark { padding: 8px 10px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; width: 100%; }
.ex-acts { display: flex; gap: 6px; }
.ex-btn {
  position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-color, #e5e7eb);
  background: #f8fafc; cursor: pointer; font-size: 1rem; color: #1B3A6B;
}
.ex-btn:active { transform: scale(.96); }
.ex-wa { color: #16a34a; }
.ex-wa.no-phone { color: #9ca3af; }
.ex-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px;
  background: #2563EB; color: #fff; font-size: .68rem; line-height: 18px; padding: 0 4px;
}

/* modals */
.ex-modal-ov { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 4000; padding: 16px; }
.ex-modal { background: #fff; border-radius: 16px; padding: 18px; width: min(560px, 100%); max-height: 88vh; overflow-y: auto; }
.ex-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.ex-modal-sub { font-size: .85rem; opacity: .65; margin: 0 0 12px; }
.ex-x { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #64748b; }
.ex-modal-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.ex-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ex-thumb { position: relative; }
.ex-thumb img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid #e5e7eb; }
.ex-thumb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 12px; border: none; background: #ef4444; color: #fff; cursor: pointer; }

.ex-check { width: 100%; border-collapse: collapse; }
.ex-check th, .ex-check td { border: 1px solid #e5e7eb; padding: 8px; text-align: center; font-size: .9rem; }
.ex-check td:first-child, .ex-check th:first-child { text-align: left; }
.ex-check input { width: 18px; height: 18px; }
.ex-flags { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.ex-flags label { display: flex; align-items: center; gap: 8px; }

@media (max-width: 720px) {
  .ex-row { grid-template-columns: 30px 1fr auto; grid-template-areas: "chk id acts" "marks marks marks" "rem rem rem"; row-gap: 8px; }
  .ex-chk { grid-area: chk; }
  .ex-id { grid-area: id; }
  .ex-acts { grid-area: acts; }
  .ex-marks { grid-area: marks; }
  .ex-remark { grid-area: rem; }
  .ex-rows { max-height: none; }
}

/* ===== simplified, teacher-friendly exam UI ===== */
.ex-step .card-body { padding: 18px; }
.ex-step-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.ex-step-no {
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:#2563EB; color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.ex-step-title h3 { margin:0 0 2px; font-size:1.05rem; color:#1B3A6B; }
.ex-step-title p { margin:0; font-size:.86rem; opacity:.7; line-height:1.5; }
.ex-big { min-height:48px; padding:0 18px; border-radius:12px; font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.ex-danger { color:#e11d48; }
.ex-search {
  flex:1 1 220px; min-width:180px; min-height:46px; padding:0 14px;
  border:1px solid var(--border-color,#e5e7eb); border-radius:12px; font-size:1rem;
}
.ex-progress { font-weight:700; color:#1B3A6B; background:#EEF2F8; border-radius:999px; padding:8px 14px; }
.ex-master { min-height:46px; }
.ex-lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; opacity:.6; font-weight:700; }
.ex-row { grid-template-columns: 34px minmax(140px,1.2fr) minmax(170px,1fr) minmax(180px,1.2fr) auto; }
.ex-marks input { width:84px; min-height:44px; font-size:1.05rem; font-weight:700; }
.ex-remark { min-height:44px; }
.ex-btn {
  width:auto; min-width:64px; height:46px; padding:0 12px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-weight:600;
}
.ex-btn span:not(.ex-count) { font-size:.68rem; }
.ex-btn.ex-wa { border-color:#bbf7d0; background:#f0fdf4; }
.ex-btn.ex-wa.no-phone { background:#f8fafc; }
.ex-savebar {
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border-color,#e5e7eb);
}
@media (max-width:720px){
  .ex-row { grid-template-columns: 30px 1fr; grid-template-areas:"chk id" "marks marks" "rem rem" "acts acts"; }
  .ex-remwrap { grid-area: rem; }
  .ex-acts { grid-area: acts; justify-content:space-between; }
  .ex-btn { flex:1; }
  .ex-savebar button { flex:1 1 100%; }
  .ex-progress { width:100%; text-align:center; }
}