/* client/quiz.ui.css */

/* Host modal */
.quiz-host-modal { position: fixed; inset: 0; z-index: 6000; display: none; }

.quiz-host-modal.show { display: block; }
.quiz-host-modal .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.quiz-host-modal .card { position: relative; width: min(780px, 92vw); margin: 5vh auto; background: #0b0f14; color: #e5e7eb; border: 1px solid #1f2937; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.4); padding: 14px; }
.quiz-host-modal .head { display: flex; justify-content: space-between; align-items: center; }
.quiz-host-modal .tabs { display: flex; gap: 6px; }
.quiz-host-modal .tab { border: 0; background: #111827; color: #e5e7eb; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.quiz-host-modal .tab.active { background: #1f2937; }
.quiz-host-modal .mini.close { background: transparent; border: 0; color: #e5e7eb; font-size: 22px; line-height: 1; cursor: pointer; }
.quiz-host-modal label { display: block; font-size: 13px; opacity: 0.9; margin: 8px 0 6px; }
.quiz-host-modal input[type="text"],
.quiz-host-modal input[type="number"] { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid #273142; background: #0f172a; color: #e5e7eb; }
.quiz-host-modal .optgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quiz-host-modal .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.quiz-host-modal .correct { display: flex; gap: 10px; align-items: center; background: #0f172a; border: 1px solid #1f2937; padding: 8px 10px; border-radius: 10px; }
.quiz-host-modal .actions { display: flex; gap: 10px; margin-top: 12px; }
.quiz-host-modal .btn { border: 1px solid #273142; background: #111827; color: #e5e7eb; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.quiz-host-modal .btn.primary { background: #3552d5; border-color: #3552d5; }
.quiz-host-modal .btn.danger  { background: #7a1b1b; border-color: #7a1b1b; }
.quiz-host-modal .btn.ghost   { background: transparent; }
.quiz-host-modal .tabpane { display: none; margin-top: 10px; }
.quiz-host-modal .tabpane.show { display: block; }
.quiz-host-modal .qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quiz-host-modal .ql { border: 1px solid #273142; border-radius: 12px; padding: 10px; background: #0f172a; }
.quiz-host-modal .ql .qtxt { font-weight: 600; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-host-modal .ql .meta { display: flex; gap: 10px; font-size: 12px; opacity: .8; margin-bottom: 8px; }
.quiz-host-modal .empty { padding: 14px; opacity: .7; }

/* Host live banner */
.quiz-host-live {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: max(12px, env(safe-area-inset-top)); /* keep clear of notches */
  bottom: auto !important;                  /* ensure it can’t stick to bottom */
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #273142;
  border-radius: 999px;
  padding: 8px 12px;
  z-index: 4001;                            /* bump to 9999 if anything overlaps */
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiz-host-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; }

/* Student sidebar quiz */
.quiz-side { border: 1px solid #273142; background: #0b0f14; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.quiz-side.hidden { display: none; }
.quiz-side .qs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quiz-side .qs-title { font-weight: 700; letter-spacing: .3px; }
.quiz-side .qs-timer { position: relative; width: 60px; height: 60px; }
.quiz-side .qs-ttxt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.quiz-side .timer { width: 60px; height: 60px; }
.quiz-side .timer .bg { fill: none; stroke: #1f2937; stroke-width: 10; }
.quiz-side .timer .fg { fill: none; stroke: #3b82f6; stroke-width: 10; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .1s linear; }

.quiz-side .qs-q { font-size: 14px; margin: 10px 0; font-weight: 600; }
.quiz-side .qs-opts { display: grid; gap: 8px; }
.quiz-side .qs-opt { display: flex; align-items: center; gap: 8px; border: 1px solid #1f2937; background: linear-gradient(180deg, #0f172a, #0b1020); color: #e5e7eb; border-radius: 999px; padding: 10px 12px; text-align: left; cursor: pointer; }
.quiz-side .qs-opt:hover { border-color: #2b3a5a; }
.quiz-side .qs-opt .pill { min-width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; background: #122043; border: 1px solid #244; }
.quiz-side .qs-opt.chosen { outline: 2px solid #3b82f6; }


/* Quiz result feedback modal */
.quiz-fb{ position:fixed; inset:0; z-index:4500; display:block; }
.quiz-fb.hidden{ display:none; }
.quiz-fb .scrim{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.quiz-fb .card{
  position:relative; width:min(420px,92vw); margin:20vh auto 0;
  background:#0b0f14; color:#e5e7eb; border:1px solid #1f2937;
  border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.4); padding:16px; text-align:center;
}
.quiz-fb .ttl{ font-weight:800; font-size:20px; margin-bottom:6px; }
.quiz-fb .msg{ opacity:.9; }



/* Larger, noticeable info icon in the Questions list (host side) */
.q-info-btn{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background:#0f172a; color:#93c5fd; border:1px solid #1f2937;
  cursor:pointer; font-size:18px;
}
.q-info-btn:hover{ background:#111827; }
.q-info-btn i{ font-size:18px; }


/* Larger, clearer info icon for host question rows */
.q-info-btn,
[data-quiz-info],
.quizHost .info,
.quizQuestions .info,
.qInfo,
.infoBtn,
button[data-act="info"] {
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  font-size:18px; color:#93c5fd;
  background:#0f172a; border:1px solid #1f2937;
  cursor:pointer;
}
.q-info-btn:hover,
[data-quiz-info]:hover,
.quizHost .info:hover,
.qInfo:hover,
.infoBtn:hover { background:#111827; }



/* === Student popup (taking) – force dark pill + white text, beats any earlier !important === */
.quizPanel.taking .qOptGrid .qOptRow,
.quizPanel.taking .qOptGrid .qOptRow * {
  color: #fff !important;
}

.quizPanel.taking .qOptGrid .qOptRow {
  background: #0f172a !important;
  border-color: #1f2937 !important;
}

.quizPanel.taking .qOptGrid .qOptRow:has(:checked) {
  background: #122043 !important;
  border-color: #3b82f6 !important;
  outline: 2px solid #3b82f6 !important;
  outline-offset: 0 !important;
}

/* If your app sometimes uses a .quizPopup wrapper, cover that too */
.quizPopup .qOptRow,
.quizPopup .qOptRow * { color: #fff !important; }
.quizPopup .qOptRow { background:#0f172a !important; border-color:#1f2937 !important; }
.quizPopup .qOptRow:has(:checked){
  background:#122043 !important; border-color:#3b82f6 !important; outline:2px solid #3b82f6 !important;
}


/* === Make the shared Quiz Panel itself dark so host UI is uniform === */
.quizPanel {
  background: #0b0f14 !important;
  border: 1px solid #1f2937 !important;
  color: #e5e7eb !important;
}
.quizPanel .qpHeader {
  background: #0b0f14 !important;
  border-bottom: 1px solid #1f2937 !important;
}
.quizPanel .qpHeader h4 { color: #e5e7eb !important; }
.quizPanel .closeBtn { color: #cbd5e1 !important; }
.quizPanel .closeBtn:hover { color: #ffffff !important; }

/* Host list/form area already uses dark via quiz.ui.js injected CSS – keep as-is */


/* Dim/disable the Trigger buttons when a quiz is live */
#qList [data-act="go"].disabled,
#qList [data-act="go"][disabled]{
  opacity:.5;
  pointer-events:none;
}