/* =====================================================
   BISE OMR Scanner v3 — Front-end CSS
   ===================================================== */
:root {
  --p:    #1a6e3c;
  --pa:   #145530;
  --acc:  #e8f5ee;
  --brd:  #c6ddd0;
  --err:  #d32f2f;
  --ok:   #388e3c;
  --warn: #f57c00;
  --rad:  12px;
  --shad: 0 4px 24px rgba(0,0,0,.10);
}

/* ── Widget ─────────────────────────────────────────── */
.bise-omr-widget {
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:15px;
  background:#fff;
  border:1.5px solid var(--brd);
  border-radius:var(--rad);
  box-shadow:var(--shad);
  overflow:hidden;
}
.bise-omr-widget * { box-sizing:border-box; }

/* ── Header ─────────────────────────────────────────── */
.bise-header {
  display:flex; align-items:center; gap:14px;
  background:var(--p); color:#fff; padding:16px 20px;
}
.bise-logo-svg { width:44px; height:44px; flex-shrink:0; }
.bise-title    { font-size:1.1rem; font-weight:800; line-height:1.2; }
.bise-subtitle { font-size:.72rem; opacity:.82; margin-top:2px; }

/* ── Step bar ───────────────────────────────────────── */
.bise-stepbar {
  display:flex; background:var(--acc);
  border-bottom:1px solid var(--brd);
}
.bise-step {
  flex:1; display:flex; flex-direction:column;
  align-items:center; padding:10px 4px; gap:3px;
  font-size:.72rem; color:#888;
  border-bottom:3px solid transparent; transition:all .2s;
}
.bise-step span {
  width:22px; height:22px; border-radius:50%;
  background:#ccc; color:#fff;
  display:grid; place-items:center;
  font-size:.72rem; font-weight:700;
}
.bise-step em { font-style:normal; }
.bise-step.active { color:var(--p); border-bottom-color:var(--p); font-weight:600; }
.bise-step.active span { background:var(--p); }
.bise-step.done span   { background:var(--ok); }

/* ── Panel ──────────────────────────────────────────── */
.bise-panel { padding:20px; }
.bise-panel h3 { margin:0 0 10px; font-size:1rem; color:#222; }
.bise-hint { color:#666; font-size:.82rem; margin:0 0 10px; }
.req { color:var(--err); }

/* ── Form grid ──────────────────────────────────────── */
.bise-field-group {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
.bise-field-full { grid-column:1 / -1; }
@media(max-width:500px) {
  .bise-field-group { grid-template-columns:1fr; }
  .bise-field-full  { grid-column:1; }
}
.bise-field { display:flex; flex-direction:column; gap:4px; }
.bise-field label { font-size:.8rem; font-weight:700; color:#444; }
.bise-field select,
.bise-field input  {
  width:100%; padding:10px 12px;
  border:1.5px solid #ccc; border-radius:8px;
  font-size:.92rem; background:#fff;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px;
}
.bise-field input { background-image:none; padding-right:12px; }
.bise-field select:focus,
.bise-field input:focus {
  outline:none; border-color:var(--p);
  box-shadow:0 0 0 3px rgba(26,110,60,.12);
}
.bise-field select:disabled { background:#f5f5f5; color:#aaa; cursor:not-allowed; }
.bise-sp { font-size:.8rem; color:#888; margin-top:3px; }

/* ── Buttons ────────────────────────────────────────── */
.bise-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.bise-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:8px;
  font-size:.9rem; font-weight:700;
  cursor:pointer; border:none; transition:all .18s;
}
.bise-btn-primary { background:var(--p); color:#fff; }
.bise-btn-primary:hover { background:var(--pa); }
.bise-btn-outline { background:#fff; color:var(--p); border:2px solid var(--p); }
.bise-btn-ghost   { background:#f0f0f0; color:#555; }
.bise-link { background:none; border:none; color:var(--p); cursor:pointer; font-weight:700; text-decoration:underline; padding:0; font-size:.9rem; }

/* ── Scan tabs ──────────────────────────────────────── */
.bise-scan-tabs { display:flex; gap:8px; margin-bottom:14px; }
.bise-tab {
  flex:1; padding:9px; border-radius:8px;
  border:2px solid var(--brd); background:#fff;
  font-size:.88rem; font-weight:600; cursor:pointer; transition:all .18s;
}
.bise-tab.active { border-color:var(--p); background:var(--acc); color:var(--p); }

/* ── Camera + overlay ───────────────────────────────── */
.bise-cam-wrap {
  position:relative; width:100%; max-width:520px;
  margin:0 auto; border-radius:10px;
  overflow:hidden; background:#111;
  aspect-ratio:4/3;
}
#bise-vid {
  width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Overlay canvas sits exactly on top */
#overlay-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.bise-cam-ctrl {
  display:flex; gap:10px; justify-content:center;
  flex-wrap:wrap; margin-top:10px;
}

/* ── Upload drop zone ───────────────────────────────── */
.bise-dropzone {
  border:2.5px dashed var(--brd); border-radius:12px;
  padding:36px 20px; text-align:center; background:#fafafa;
  cursor:pointer; transition:all .2s;
}
.bise-dropzone:hover,
.bise-dropzone.over { border-color:var(--p); background:var(--acc); }
.bise-dz-inner p { margin:4px 0; color:#555; font-size:.88rem; }

/* ── Review grid ────────────────────────────────────── */
.bise-review-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:6px; margin:10px 0;
  max-height:500px; overflow-y:auto;
  padding:2px 4px 2px 2px;
}

.bise-qrow {
  display:flex; align-items:center; gap:8px;
  border-radius:8px; padding:7px 10px;
  border:1.5px solid #e0e0e0; background:#f8f8f8;
  transition:background .15s;
}
.bise-qrow-correct { background:#e8f5e9; border-color:#a5d6a7; }
.bise-qrow-wrong   { background:#fdecea; border-color:#ef9a9a; }
.bise-qrow-blank   { background:#fff8e1; border-color:#ffe082; }

.bise-qnum {
  font-weight:800; color:var(--p);
  min-width:30px; font-size:.8rem;
}
.bise-bubbles { display:flex; gap:4px; }

.bise-bub {
  width:30px; height:30px; border-radius:50%;
  border:2px solid #ccc; background:#fff;
  font-weight:800; font-size:.78rem;
  cursor:pointer; display:grid; place-items:center;
  transition:all .15s;
}
.bise-bub:hover          { border-color:var(--p); color:var(--p); }
/* Student selected correctly */
.bise-bub-ok             { background:#388e3c; border-color:#388e3c; color:#fff; }
/* Student selected wrongly */
.bise-bub-wrong          { background:#d32f2f; border-color:#d32f2f; color:#fff; }
/* Correct answer hint (student left blank) */
.bise-bub-correct-hint   { border-color:#388e3c; color:#388e3c; border-width:2.5px; }

.bise-correct-ans {
  margin-left:auto; font-size:.72rem; font-weight:800;
  color:#388e3c; white-space:nowrap;
}

/* Legend */
.legend-ok    { color:#388e3c; }
.legend-wrong { color:#d32f2f; }
.legend-hint  { color:#1a6e3c; }

/* ── Processing ─────────────────────────────────────── */
.bise-spinner {
  width:52px; height:52px; margin:0 auto 16px;
  border:5px solid #e0e0e0; border-top-color:var(--p);
  border-radius:50%; animation:spin .9s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Error / notice ─────────────────────────────────── */
.bise-err {
  background:#fdecea; border:1px solid #f5c6cb;
  border-radius:7px; color:var(--err);
  padding:9px 14px; font-size:.85rem; margin-top:10px;
}
.bise-notice-ok {
  background:#e8f5e9; border:1px solid #a5d6a7;
  border-radius:7px; color:#2e7d32;
  padding:9px 14px; font-size:.88rem; margin-bottom:12px;
}
.bise-notice-info {
  background:#fff3e0; border:1px solid #ffcc80;
  border-radius:7px; color:#e65100;
  padding:9px 14px; font-size:.88rem; margin-bottom:12px;
}

/* ── Result ─────────────────────────────────────────── */
.bise-res-head {
  text-align:center; background:var(--acc);
  border-radius:10px; padding:20px; margin-bottom:16px;
}
.bise-circle {
  width:110px; height:110px; border-radius:50%;
  border:6px solid var(--p); background:#fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  margin:0 auto 12px;
}
.bise-circle .pct { font-size:1.8rem; font-weight:900; line-height:1; }
.bise-circle small { font-size:.6rem; color:#888; }
.bise-res-head h3  { margin:0 0 6px; font-size:1rem; }
.bise-meta { font-size:.8rem; color:#666; margin:4px 0 0; }
.bise-meta strong { color:#333; }
.bise-score-row {
  display:flex; justify-content:center;
  gap:20px; flex-wrap:wrap; margin-top:12px;
}
.bise-sc  { text-align:center; }
.bise-sc .v { font-size:1.3rem; font-weight:800; }
.bise-sc .l { font-size:.68rem; color:#777; display:block; }
.v.c { color:var(--ok); }
.v.w { color:var(--err); }
.v.b { color:var(--warn); }

.bise-detail-tbl {
  width:100%; border-collapse:collapse; font-size:.83rem;
}
.bise-detail-tbl th {
  background:var(--p); color:#fff; padding:7px 10px; text-align:left;
}
.bise-detail-tbl td { padding:6px 10px; border-bottom:1px solid #eee; }
.bise-detail-tbl tr:nth-child(even) td { background:#f8f8f8; }
.ok { color:var(--ok); font-weight:700; }
.ng { color:var(--err); font-weight:700; }
.bk { color:var(--warn); font-weight:700; }

/* ── Print ──────────────────────────────────────────── */
@media print {
  .bise-actions, .bise-stepbar, .bise-header,
  .bise-scan-tabs, #bs2, #bs3 { display:none !important; }
  .bise-omr-widget { border:none; box-shadow:none; }
  #bs4 { display:block !important; }
}