/* Manager monthly test — UI styles (used inside #pnl-test of index.html) */

.mt-root{max-width:860px;margin:0 auto}
.mt-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:14px}
.mt-card h2{font-size:16px;font-weight:800;letter-spacing:-0.2px;margin-bottom:4px}
.mt-card h3{font-size:13.5px;font-weight:800;margin-bottom:8px}
.mt-sub{color:var(--text2);font-size:12px;line-height:1.5;margin-bottom:14px}
.mt-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mt-hero-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#0058f8 0%,#0eaae4 100%);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 14px rgba(0,88,248,0.35);flex:none}
.mt-hero h1{font-size:19px;font-weight:800;letter-spacing:-0.3px}
.mt-month-badge{display:inline-block;background:rgba(247,148,29,0.12);color:var(--orange);font-weight:800;font-size:12px;padding:4px 12px;border-radius:20px;margin-left:10px;vertical-align:middle}
.mt-note{font-size:11.5px;color:var(--text3)}

/* Rules */
.mt-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:16px}
.mt-rule{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px}
.mt-rule .r-ico{font-size:18px}
.mt-rule .r-txt{font-size:11.5px;color:var(--text2);margin-top:6px;line-height:1.45}
.mt-rule b{color:var(--text)}
.mt-grades{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mt-grade-chip{font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--bg);color:var(--text2)}

/* Forms / buttons */
.mt-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.mt-row label{font-size:12px;font-weight:700;color:var(--text2)}
.mt-input{flex:1;min-width:200px;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:13.5px;background:var(--bg);color:var(--text)}
.mt-input:focus{outline:none;border-color:var(--accent2);background:#fff}
.mt-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:11px 20px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .18s;white-space:nowrap}
.mt-btn.primary{background:linear-gradient(135deg,#0058f8 0%,#0eaae4 100%);color:#fff;box-shadow:0 4px 12px rgba(0,88,248,0.3)}
.mt-btn.primary:hover{filter:brightness(1.08)}
.mt-btn.primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.mt-btn.soft{background:var(--bg);border:1.5px solid var(--border);color:var(--text)}
.mt-btn.soft:hover{border-color:var(--accent2);color:var(--accent)}
.mt-btn.green{background:var(--green);color:#fff}
.mt-btn.danger{background:var(--red);color:#fff}
.mt-hint{font-size:11.5px;color:var(--text3);margin-top:8px}

/* Quiz header */
.mt-quiz-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mt-progress-track{flex:1;min-width:140px;height:8px;background:var(--bg);border-radius:20px;overflow:hidden}
.mt-progress-fill{height:100%;background:linear-gradient(90deg,#0058f8,#0eaae4);border-radius:20px;transition:width .25s}
.mt-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--accent);background:rgba(14,170,228,0.1);padding:6px 12px;border-radius:20px}
.mt-counter{font-weight:800;font-size:12.5px;color:var(--text2)}
.mt-type-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:8px;margin-bottom:10px}
.mt-type-badge.single{background:rgba(14,170,228,0.12);color:#0878a8}
.mt-type-badge.multi{background:rgba(247,148,29,0.14);color:#c26e06}
.mt-q-text{font-size:15.5px;font-weight:700;line-height:1.5;margin-bottom:14px}
.mt-q-hint{font-size:11.5px;color:var(--orange);font-weight:700;margin-bottom:10px}

/* Options */
.mt-opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:9px;cursor:pointer;font-family:inherit;font-size:13.5px;line-height:1.45;color:var(--text);transition:all .15s}
.mt-opt:hover{border-color:var(--accent2);background:rgba(14,170,228,0.05)}
.mt-opt.on{background:rgba(0,88,248,0.07);border-color:#0058f8}
.mt-opt .mt-opt-letter{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--text2);transition:all .15s}
.mt-opt.sq .mt-opt-letter{border-radius:8px}
.mt-opt.on .mt-opt-letter{background:#0058f8;border-color:#0058f8;color:#fff}

/* Question navigation */
.mt-qnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
.mt-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.mt-dot{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg);color:var(--text2);font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;line-height:1}
.mt-dot.answered{background:rgba(0,88,248,0.15);border-color:#0058f8;color:#0058f8}
.mt-dot.current{background:#0058f8;border-color:#0058f8;color:#fff;box-shadow:0 2px 8px rgba(0,88,248,0.4)}
.mt-dot.unanswered-current{background:#fff;border:2px dashed var(--orange);color:var(--orange)}

/* Result */
.mt-result-head{text-align:center;padding:6px 0 4px}
.mt-ring{width:132px;height:132px;border-radius:50%;margin:8px auto;display:flex;align-items:center;justify-content:center;position:relative}
.mt-ring-inner{width:106px;height:106px;border-radius:50%;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center}
.mt-ring-val{font-size:26px;font-weight:800;letter-spacing:-0.5px}
.mt-ring-cap{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.mt-grade{display:inline-block;font-size:15px;font-weight:800;padding:8px 18px;border-radius:20px;margin-top:10px}
.mt-grade.pass{background:rgba(58,181,73,0.14);color:#2b9440}
.mt-grade.fail{background:rgba(239,68,68,0.12);color:#d13434}
.mt-stat-line{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:14px 0;font-size:12.5px;color:var(--text2)}
.mt-stat-line b{color:var(--text)}

/* Review */
.mt-review-item{border:1.5px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.mt-review-item.good{border-color:rgba(58,181,73,0.5)}
.mt-review-item.part{border-color:rgba(247,148,29,0.55)}
.mt-review-item.bad{border-color:rgba(239,68,68,0.45)}
.mt-review-head{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--bg);cursor:pointer}
.mt-review-status{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
.mt-review-item.good .mt-review-status{background:var(--green)}
.mt-review-item.part .mt-review-status{background:var(--orange)}
.mt-review-item.bad .mt-review-status{background:var(--red)}
.mt-review-q{flex:1;font-size:12.5px;font-weight:700;line-height:1.4}
.mt-review-chev{color:var(--text3);transition:transform .2s}
.mt-review-item.open .mt-review-chev{transform:rotate(180deg)}
.mt-review-body{padding:12px 14px;border-top:1px solid var(--border);font-size:12.5px;line-height:1.55}
.mt-ans{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.mt-ans .tag{flex:none;font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px}
.mt-ans .tag.you{background:rgba(239,68,68,0.12);color:#d13434}
.mt-ans .tag.right{background:rgba(58,181,73,0.14);color:#2b9440}
.mt-ans .tag.part{background:rgba(247,148,29,0.14);color:#c26e06}
.mt-explain{background:rgba(14,170,228,0.06);border-left:3px solid var(--accent2);padding:9px 12px;border-radius:0 10px 10px 0;margin-top:8px;color:var(--text2)}
.mt-kb-link{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:800;color:#0058f8;cursor:pointer;text-decoration:none}
.mt-kb-link:hover{text-decoration:underline}

/* Tables (history / summary) */
.mt-tbl-wrap{overflow-x:auto}
.mt-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.mt-tbl th{background:var(--bg);text-align:left;padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text2);white-space:nowrap}
.mt-tbl td{padding:9px 12px;border-top:1px solid var(--border);white-space:nowrap}
.mt-tbl tr:hover td{background:rgba(14,170,228,0.04)}
.mt-pct{font-weight:800}
.mt-pct.pass{color:#2b9440}
.mt-pct.fail{color:#d13434}
.mt-empty{padding:16px;text-align:center;color:var(--text3);font-size:12px}
.mt-alert{padding:12px 14px;border-radius:10px;font-size:12.5px;margin-bottom:14px}
.mt-alert.ok{background:rgba(58,181,73,0.1);border:1px solid rgba(58,181,73,0.35);color:#2b9440}
.mt-alert.warn{background:rgba(247,148,29,0.1);border:1px solid rgba(247,148,29,0.4);color:#c26e06}
.mt-alert.err{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.35);color:#d13434}
.mt-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,88,248,0.2);border-top-color:#0058f8;border-radius:50%;animation:mtspin .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes mtspin{to{transform:rotate(360deg)}}

/* Confirm modal */
.mt-modal-backdrop{position:fixed;inset:0;background:rgba(15,20,45,0.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.mt-modal{background:var(--bg2);border-radius:var(--radius);box-shadow:var(--shadow);max-width:440px;width:100%;padding:20px;animation:mtpop .18s ease}
@keyframes mtpop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.mt-modal h3{font-size:14.5px;font-weight:800;margin-bottom:8px}
.mt-modal p{font-size:12.5px;color:var(--text2);line-height:1.5;margin-bottom:12px}
.mt-unanswered{font-size:12px;color:#c26e06;background:rgba(247,148,29,0.1);border-radius:10px;padding:9px 12px;margin-bottom:14px}
.mt-modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

@media(max-width:640px){
  .mt-card{padding:16px}
  .mt-qnav{flex-direction:column;align-items:stretch}
  .mt-dots{order:2}
}