/* quiz/assets/quiz.css */
/* Layout dla quizów oparty o ../styl1.css i jego tokeny */

body { background: #F2F2F2; }

:root{
  /* Base */
  --q-border: #C0C0C0;
  --q-panel: var(--c-bg-accent);

  --q-correct: rgba(46, 204, 113, 0.35);
  --q-wrong: rgba(231, 76, 60, 0.35);

  /* poprawna odpowiedź pokazana po błędzie – ma być szara */
  --q-correct-soft: #E6E6E6;

  /* żółte tło objaśnienia: #EEEECC @ 70% */
  --q-explain-bg: rgba(238, 238, 204, 0.70);

  /* Home page column widths */
  --home-col-stats: 55px;
  --home-col-attempts: 60px;
  --home-col-avg: 55px;
  --home-col-max: 50px;
  --home-col-flags: 120px;
}

/* ===== Core layout ===== */

/* Unify box sizing to avoid FF/Chromium width differences */
.q-wrap, .q-wrap *{ box-sizing: border-box; }

.q-wrap{
  /* Fill available main column width (Edge/Chrome-like), avoid narrow centered block */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 20px;
  text-align: left !important;
}

.q-topbar{
  background: var(--q-panel);
  border: 1px solid var(--q-border);
  padding: 10px 10px;
  text-align: center;
}

.q-topbar h2{
  margin: 0;
  font-size: 14pt;
  text-align: center;
}

.q-card{
  border: 1px solid var(--q-border);
  padding: 10px;
  margin-top: 10px;
  background: #F2F2F2;
  text-align: left !important;
}

.q-meta{
  font-size: var(--fs-body);
  color: var(--c-text);
  margin: 6px 0 10px;
  overflow: auto;
  text-align: left !important;
}

.q-open-note{
  margin: 6px 0 10px;
  border: 1px solid var(--q-border);
  padding: 10px 12px;
  background: var(--q-explain-bg);
  font-size: var(--fs-body);
  line-height: 1.35;
  text-align: left !important;
}

.q-open-note-title{
  font-weight: bold;
  margin-bottom: 6px;
}

.q-input{
  border: 1px solid var(--q-border);
  padding: 4px 6px;
  font-size: var(--fs-li);
  width: 260px;
  background: #fff;
}

.q-progress{
  float: right;
  font-size: var(--fs-body);
  text-align: left !important;
}

/* ===== Questions ===== */

.q-question{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dotted var(--c-sep);
  text-align: left !important;
}

.q-question-title{
  font-size: var(--fs-li);
  font-weight: bold;
  margin-bottom: 8px;
  text-align: left !important;
}

.q-answers{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  text-align: left !important;
}

.q-answer{
  display: block;
  width: 100%;
  text-align: left !important;
  font-size: var(--fs-li);
  border: 1px solid var(--q-border);
  background: #fff;
  padding: 8px 10px;
  cursor: pointer;
}

.q-answer[aria-disabled="true"]{ cursor: default; }

.q-answer.is-correct{ background: var(--q-correct); }
.q-answer.is-wrong{ background: var(--q-wrong); }

.q-answer.is-correct-soft{
  background: var(--q-correct-soft);
  border-color: #C8C8C8;
}

/* ===== Open mode ===== */

.q-open-wrap{
  margin-top:8px;
  display:flex;
  align-items:stretch;
  gap:8px;
  width:100%;
}

.q-open-submit{
  flex:0 0 auto;
}

.q-open-input{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  max-width:none;
}

/* Input feedback (reuse the same background variables as buttons) */
.q-open-input.is-correct{ background: var(--q-correct); border-color:#0a0; }
.q-open-input.is-wrong{ background: var(--q-wrong); border-color:#d00; }

.q-public{
  display:block;
  margin-top: 6px;
  border: 1px solid var(--q-border);
  padding: 8px 10px;
  background: #f2f2f2;
  font-size: var(--fs-li);
  text-align: left !important;
}

/* ===== Explanation ===== */

.q-explain{
  display: block;
  margin-top: 6px;
  border: 1px solid var(--q-border);
  padding: 8px 10px;
  background: var(--q-explain-bg);
  font-size: var(--fs-li);
  text-align: left !important;
}

.q-explain p{
  text-indent: 0 !important;
  margin: 0.4em 0;
  text-align: left !important;
}

.q-explain ul, .q-explain ol{ margin: 0.4em 0 0.4em 1.2em; }
.q-explain li{ text-align: left !important; }

/* ===== Actions ===== */

.q-actions{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--q-border);
  text-align: left !important;
}

.q-btn{
  border: 1px solid var(--q-border);
  background: var(--q-panel);
  padding: 5px 10px;
  cursor: pointer;
  font-size: var(--fs-li);
}

.q-btn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.q-small{ font-size: var(--fs-body); text-align: left !important; }

.q-link{
  color: var(--c-link);
  text-decoration: none;
}

.q-link:hover{ font-weight: bold; }

/* ===== Tables in cards ===== */
/* styl1.css centrował, więc wymuszamy left w quizach */

.q-card table{
  margin: 0 !important;
  text-align: left !important;
}

.q-card thead,
.q-card tbody,
.q-card tr,
.q-card th,
.q-card td{
  text-align: left !important;
  vertical-align: top;
}

.q-card h1, .q-card h2, .q-card h3{ text-align: left !important; }

/* Normal tables span full width; score tables are special-cased below */
.q-card table:not(.q-score-table){ width: 100%; }

.q-card td:last-child, .q-card th:last-child{ white-space: nowrap; }

/* ===== Leaderboard / stats ===== */

/* 20px nad i pod “Best score …” (padding, żeby nie było collapsing margins) */
.q-meta .best-score{
  display: block;
  margin: 0 !important;
  padding: 20px 0 !important;
}

/* Score table (default: shrink-to-fit) */
.q-score-table{
  border-collapse: collapse;
  width: auto !important;
  table-layout: fixed;
  display: inline-table;
}

.q-score-table th,
.q-score-table td{ padding: 2px 6px; }

.q-score-col-score{ width: 30px; }
.q-score-col-count{ width: 20px; }
.q-score-col-bar{ width: 200px; }

.q-score-bar{
  border: 1px solid var(--q-border);
  height: 10px;
  width: 200px;
  background: #fff;
}

.q-score-bar-fill{
  height: 10px;
  background: var(--c-bg-accent);
}

/* score chips (color may be inline from PHP; CSS defines shape) */
.q-score-cell{ white-space: nowrap; }

.q-score-chip{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}

.q-score-num{ vertical-align: middle; }

/* fallback gradient for 0..10 (kept for compatibility) */
.q-score-chip.s10{ background:hsl(120,70%,32%); }
.q-score-chip.s9 { background:hsl(108,70%,32%); }
.q-score-chip.s8 { background:hsl(96,70%,32%); }
.q-score-chip.s7 { background:hsl(84,70%,32%); }
.q-score-chip.s6 { background:hsl(72,70%,32%); }
.q-score-chip.s5 { background:hsl(60,70%,32%); }
.q-score-chip.s4 { background:hsl(48,70%,32%); }
.q-score-chip.s3 { background:hsl(36,70%,32%); }
.q-score-chip.s2 { background:hsl(24,70%,32%); }
.q-score-chip.s1 { background:hsl(12,70%,32%); }
.q-score-chip.s0 { background:hsl(0,70%,32%); }

.q-flag{
  width: 16px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 4px;
  border: 1px solid var(--q-border);
}

/* auto-result (no submit button) */
.q-auto-result{
  margin-top: 10px;
  border: 1px solid var(--q-border);
  padding: 8px 10px;
  background: var(--q-explain-bg);
}

.q-auto-stats{ margin-top: 10px; }
.q-result-line{ font-size: var(--fs-li); }
.q-result-note{ margin-top: 6px; font-size: var(--fs-body); font-style: italic; }

/* ===== Name gate (gdy Name puste przy końcu quizu) ===== */

.q-input.is-required{
  border: 3px solid #b71c1c !important;
  box-shadow: 0 0 0 2px rgba(183, 28, 28, 0.10);
}

.q-namegate{
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.q-accept{
  border: 1px solid var(--q-border);
  background: var(--q-panel);
  padding: 5px 10px;
  cursor: pointer;
  font-size: var(--fs-li);
}

.q-accept:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.q-name-msg{
  margin-top: 6px;
  font-size: var(--fs-body);
  color: #7f1d1d;
}

/* ===== Home page (index.php) ===== */

.q-home-title,
.q-home-section-title{
  text-align: center !important;
  font-weight: normal !important;
  margin: 10px 0 40px 0;
  font-size: 14pt;
}

.q-home-section-title{ margin: 10px 0 8px 0; }

.q-home-intro-card{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 14px 0;
}

.q-home-intro{
  display: flex;
  gap: 14px;
  align-items: center;
}

.q-home-intro img{
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
}

.q-home-text{
  display: flex;
  align-items: center;
}

.q-home-intro-text{ font-size: var(--fs-body-big); }

.q-home-nocard{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.q-home-desc{
  margin-top: 4px;
  font-size: var(--fs-body-big);
  opacity: 0.9;
}

.q-home-table{
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.q-home-table th,
.q-home-table td{
  border: 1px solid rgba(0,0,0,0.18);
  padding: 6px 8px;
  vertical-align: top;
  font-size: var(--fs-body-big);
}

.q-home-table thead th{
  background: rgba(0,0,0,0.03);
  font-weight: normal;
}

/* --- WYMUSZENIE ALIGNMENTU (Edge/Chrome/FF identycznie) --- */
/* domyślnie w styl1.css table/td są centrowane; tu ustawiamy precyzyjnie kolumny */

.q-home-table th:nth-child(2),
.q-home-table td:nth-child(2){                 /* Quiz */
  text-align: left !important;
  padding-left: 14px;
}

.q-home-table th:nth-child(6),
.q-home-table td:nth-child(6){                 /* Top scorer */
  text-align: left !important;
  padding-left: 14px;
  white-space: nowrap;
}

.q-home-table th:nth-child(1),
.q-home-table td:nth-child(1),                 /* Stats */
.q-home-table th:nth-child(3),
.q-home-table td:nth-child(3),                 /* Attempts */
.q-home-table th:nth-child(4),
.q-home-table td:nth-child(4),                 /* Avg % */
.q-home-table th:nth-child(5),
.q-home-table td:nth-child(5){                 /* Max */
  text-align: center !important;
}

/* szerokości kolumn (zostawione) */
.q-home-table .col-stats{ width: var(--home-col-stats); }
.q-home-table .col-attempts{ width: var(--home-col-attempts); }
.q-home-table .col-avg{ width: var(--home-col-avg); }
.q-home-table .col-max{ width: var(--home-col-max); }
.q-home-table .col-flags{ width: var(--home-col-flags); }

/* tekst w Quiz może się łamać */
.q-home-table .col-quiz{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.q-home-total td{ background: rgba(0,0,0,0.02); }

/* ===== Stats page: QA columns pinned right, centered in their columns ===== */

.q-score-table-qa{
  width: 100% !important;
  display: table !important;
  table-layout: fixed;
}

.q-score-table-qa .q-score-col-score{ width: 70px; }
.q-score-table-qa .q-score-col-count{ width: 50px; }
.q-score-table-qa .q-score-col-bar{ width: auto; }

.q-score-table-qa .q-qa-col-q{ width: 80px; white-space: nowrap; }
.q-score-table-qa .q-qa-col-a{ width: 110px; white-space: nowrap; }

.q-score-table-qa th.q-qa-col-q,
.q-score-table-qa td.q-qa-col-q,
.q-score-table-qa th.q-qa-col-a,
.q-score-table-qa td.q-qa-col-a{
  text-align: center !important;
}

/* ===== Difficulty badges (home page) ===== */

.q-new-icon{
  width: 34px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
}

.q-diff-dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px; /* square with slightly rounded corners */
  margin-right: 6px;
  vertical-align: 0px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22);
}

.q-diff-dot.d1{ background: #9BE89B; } /* light green */
.q-diff-dot.d2{ background: #1E8E3E; } /* dark green */
.q-diff-dot.d3{ background: #F1D04B; } /* yellow */
.q-diff-dot.d4{ background: #F39C12; } /* orange */
.q-diff-dot.d5{ background: #E74C3C; } /* red */

.q-difficulty-legend{
  margin-top: 10px;
  font-size: var(--fs-body-big);
}

.q-legal-notice{
  color: #555;
  font-size: var(--fs-body-big);
}

/* HTML questions: keep number and content on one line even if content starts with <div>/<p> */
.q-question-title.q-html{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.q-qnum{ white-space:nowrap; }
.q-qtext{ flex:1; min-width:0; }
/* remove default margins inside HTML question text */
.q-qtext > :first-child{ margin-top:0; }
.q-qtext > :last-child{ margin-bottom:0; }

/* Admin: list of questions must fill the card width */
.q-card table.q-questions-table{
  width:100% !important;
  max-width:100% !important;
  table-layout:fixed;
  display:table;          /* zabija inline-table */
}

.q-card table.q-questions-table th:nth-child(1),
.q-card table.q-questions-table td:nth-child(1){
  width:42px;
  white-space:nowrap;
}

.q-card table.q-questions-table th:nth-child(3),
.q-card table.q-questions-table td:nth-child(3){
  width:220px;
  white-space:nowrap;
}

.q-card table.q-questions-table th:nth-child(2),
.q-card table.q-questions-table td:nth-child(2){
  width:auto;
}