/* ==========================================================================
   Excel course — all Excel-related styles.
   Loaded on every page (header.tpl.php) because the Excel answer UI appears on
   both the student lesson page and the teacher review pages, and the student
   never receives panel.css. Previously these rules were split between
   panel.css (teacher) and main/lekcja.css (student); consolidated here so a
   single always-loaded file covers both.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Student side — answer editor (value / table / chart) + save button
   -------------------------------------------------------------------------- */

#save-excel-answers {
	border: none;
	cursor: pointer;
}

#excel-answer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.excel-desc {
    font-size: 17px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12px;
    text-align: center;
}

#odpowiedz_excel {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Wariant 1: input text */
.excel-value {
    min-width: 260px;
    padding: 12px 16px;
    font-size: 16px;
	width: auto;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c7d2da;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
	max-width: calc(90vw - 380px);
}

.excel-value:focus {
    border-color: #2f8fd4;
    box-shadow: 0 0 0 3px rgba(47, 143, 212, 0.15);
}

/* Wariant 2: textarea */
.excel-table {
	min-width: 50ch;
	min-height: 15em;
    max-width: calc(90vw - 380px);
    max-height: 50vh;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.4;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c7d2da;
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    white-space: pre;
    overflow: auto;
    resize: none; /* rozmiar teraz kontrolowany przez JS */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.excel-table:focus {
    border-color: #2f8fd4;
    box-shadow: 0 0 0 3px rgba(47, 143, 212, 0.15);
}

/* Wariant 3: input file */
.excel-chart {
    width: 280px;
    padding: 10px 14px;
    font-size: 15px;
    color: #555555;
    background-color: #f7f9fb;
    border: 1px dashed #a9bccb;
    border-radius: 6px;
    cursor: pointer;
}

.excel-chart::file-selector-button {
    padding: 7px 14px;
    margin-right: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background-color: #2f8fd4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.excel-chart::file-selector-button:hover {
    background-color: #2578b5;
}

.excel-table-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.excel-table-preview {
    border: 1px solid #c7d2da;
    border-radius: 6px;
    overflow: auto;
    max-width: 100%;
}

.excel-table-preview table {
    border-collapse: collapse;
    font-size: 14px;
    font-family: inherit;
    color: #333333;
}

.excel-table-preview td {
    border: 1px solid #dde3e8;
    padding: 6px 10px;
    white-space: pre;
    background-color: #ffffff;
}

.excel-table-preview tr:nth-child(even) td {
    background-color: #f7f9fb;
}

.excel-table-preview td:hover {
    outline: 1px solid #2f8fd4;
    outline-offset: -1px;
}

.excel-table-edit-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #2f8fd4;
    background-color: #ffffff;
    border: 1px solid #2f8fd4;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.excel-table-edit-btn:hover {
    background-color: #2f8fd4;
    color: #ffffff;
}

.excel-table-save-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background-color: #2f8fd4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.excel-table-save-btn:hover {
    background-color: #2578b5;
}

/* Inline correct/incorrect badge shown to the student after saving */
#excel-answer-result {
  margin-top: 12px;
  font-weight: 700;
}

/* Task content block shown on the "show solution" page */
.excel-solution-content {
  border: 1px solid #e1e6ec;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 12px 0 24px;
  background: #fff;
  text-align: left;
}

/* Read-only value/table answer shown on the "show solution" page */
.excel-solution-text {
  display: inline-block;
  max-width: 100%;
  margin: 8px 0;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #c7d2da;
  border-radius: 6px;
  white-space: pre;
  overflow: auto;
}

/* ==========================================================================
   Teacher side — Excel Chart Answers Table
   Scoped entirely to .answer-queue-table so it can't leak onto other tables.
   Palette lifted from InstaKółko (blue header, navy text, green = done)
   plus one added accent (amber) to flag submissions that still need review.
   ========================================================================== */

.answer-queue-table {
  --aq-blue-dark: #0f4c81;
  --aq-blue: #1568b8;
  --aq-blue-light: #eaf3fc;
  --aq-navy: #16264a;
  --aq-gray-500: #6b7686;
  --aq-gray-200: #edf0f4;
  --aq-border: #e1e6ec;
  --aq-green: #4c8f34;
  --aq-green-bg: #e8f4e1;
  --aq-amber: #c1710a;
  --aq-amber-bg: #fbf0dd;

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  color: var(--aq-navy);
  background: #fff;
  border: 1px solid var(--aq-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 33, 66, 0.06);
}

/* ---- Header ---- */

.answer-queue-table thead th {
  background-color: var(--aq-blue);
  color: #fff;
  text-align: left;
  padding: 14px 20px;
  font-size: 0.85rem;
  font-weight: 700;
}

.answer-queue-table thead th:first-child {
  border-top-left-radius: 8px;
}

.answer-queue-table thead th:last-child {
  border-top-right-radius: 8px;
}

/* ---- Body ---- */

.answer-queue-table tbody tr {
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Keyboard users still get a visible focus ring around the row */
.answer-queue-table tbody tr:focus-within {
  outline: 2px solid var(--aq-blue);
  outline-offset: -2px;
}

.answer-queue-table tbody tr:nth-child(odd) {
  background-color: var(--aq-gray-200);
}

.answer-queue-table tbody tr:nth-child(even) {
  background-color: #fff;
}

.answer-queue-table tbody tr:hover {
  background-color: var(--aq-blue-light);
}

.answer-queue-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--aq-border);
}

.answer-queue-table td {
  padding: 13px 20px;
  vertical-align: middle;
}

/* Task title link (1st column) */
.answer-queue-table td:first-child a {
  color: var(--aq-blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.answer-queue-table td:first-child a:hover {
  color: var(--aq-blue);
  text-decoration: underline;
}

/* Stretch this link to cover the entire row (tr is the positioned ancestor) */
.answer-queue-table td:first-child a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Lesson name (2nd column) */
.answer-queue-table td:nth-child(2) {
  color: var(--aq-navy);
}

/* Student name (3rd column) */
.answer-queue-table td:nth-child(3) {
  font-weight: 600;
}

/* Submission date (4th column) */
.answer-queue-table td:nth-child(4) {
  color: var(--aq-gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Status column: previous_grade (new / fixed) ---- */

.answer-queue-table td.new,
.answer-queue-table td.fixed {
  white-space: nowrap;
}

.answer-queue-table td.new span,
.answer-queue-table td.fixed span,
.answer-queue-table td.new,
.answer-queue-table td.fixed {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Turn the raw text into a pill badge without touching the markup */
.answer-queue-table td.new,
.answer-queue-table td.fixed {
  position: relative;
}

.answer-queue-table td.new::before,
.answer-queue-table td.fixed::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.answer-queue-table td.new {
  color: var(--aq-green);
}

.answer-queue-table td.new::before {
  background-color: var(--aq-green);
  box-shadow: 0 0 0 3px var(--aq-green-bg);
}

.answer-queue-table td.fixed {
  color: var(--aq-amber);
}

.answer-queue-table td.fixed::before {
  background-color: var(--aq-amber);
  box-shadow: 0 0 0 3px var(--aq-amber-bg);
}

/* ---- Bottom corners (last row) ---- */

.answer-queue-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.answer-queue-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* ---- Status column: graded (accepted / rejected) ---- */

.answer-queue-table td.accepted,
.answer-queue-table td.rejected {
  position: relative;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.answer-queue-table td.accepted::before,
.answer-queue-table td.rejected::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.answer-queue-table td.accepted {
  color: var(--aq-green);
}

.answer-queue-table td.accepted::before {
  background-color: var(--aq-green);
  box-shadow: 0 0 0 3px var(--aq-green-bg);
}

.answer-queue-table td.rejected {
  color: #b02a1f;
}

.answer-queue-table td.rejected::before {
  background-color: #b02a1f;
  box-shadow: 0 0 0 3px #fbe4e1;
}

/* ---- Responsive ---- */

@media (max-width: 700px) {
  .answer-queue-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Excel answers page — pending vs graded sections + pagination
   ========================================================================== */

h2.answer-queue-section {
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e1e6ec;
  font-size: 1.05rem;
  font-weight: 700;
  color: #16264a;
}

.answer-queue-empty {
  color: #6b7686;
  font-style: italic;
  margin: 0 0 8px;
}

.answer-queue-filter {
  margin: 0 0 12px;
}

.answer-queue-filter .btn {
  margin-left: 8px;
}

.answer-queue-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
  font-size: 0.9rem;
}

.answer-queue-pagination a {
  color: #0f4c81;
  font-weight: 700;
  text-decoration: none;
}

.answer-queue-pagination a:hover {
  text-decoration: underline;
}

.answer-queue-pagination .disabled {
  color: #b6bec9;
  cursor: default;
}

.answer-queue-pagination-current {
  color: #16264a;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Excel Single Answer — student vs. reference chart comparison
   Reuses the .answer-queue-table palette/card look above.
   ========================================================================== */

.answer-queue-single {
  --aqs-blue: #1568b8;
  --aqs-navy: #16264a;
  --aqs-border: #e1e6ec;
  --aqs-green: #4c8f34;
  --aqs-green-bg: #e8f4e1;
  --aqs-red: #c0392b;
  --aqs-red-bg: #fbe4e1;
}

.answer-queue-status {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
}

.answer-queue-status.accepted {
  color: var(--aqs-green);
  background: var(--aqs-green-bg);
}

.answer-queue-status.rejected {
  color: var(--aqs-red);
  background: var(--aqs-red-bg);
}

.answer-queue-compare {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.answer-queue-compare-col {
  flex: 1 1 0;
  border: 1px solid var(--aqs-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 33, 66, 0.06);
  padding: 14px;
  text-align: center;
}

.answer-queue-compare-col h2 {
  font-size: 0.95rem;
  color: var(--aqs-navy);
  margin: 0 0 10px;
}

.answer-queue-compare-col img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--aqs-border);
  border-radius: 4px;
}

.answer-queue-grading {
  margin-bottom: 20px;
}

.answer-queue-grading textarea {
  width: 100%;
  min-height: 70px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--aqs-border);
  border-radius: 4px;
  font: inherit;
  resize: vertical;
}

.answer-queue-auto-advance {
  display: block;
  margin-bottom: 12px;
  font-weight: 400;
  cursor: pointer;
}

.answer-queue-auto-advance input {
  margin-right: 6px;
  vertical-align: middle;
}

@media (max-width: 700px) {
  .answer-queue-compare {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   Logikus assignment pane — takes the place of the reference-chart column when
   the teacher has to pick the lesson and task before grading.
   --------------------------------------------------------------------------- */

.answer-queue-assign {
  text-align: left;
}

.answer-queue-picker {
  margin-bottom: 12px;
}

.answer-queue-picker .ui-selectmenu-button {
  width: 100%;
}

.answer-queue-hint {
  margin: 0 0 12px;
  color: var(--aqs-gray-500, #6b7686);
  font-style: italic;
}

.answer-queue-warning {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fbe4e1;
  color: #b02a1f;
}

.answer-queue-suggestion {
  margin: 0 0 6px;
  color: var(--aqs-blue);
}

.answer-queue-confirm,
.answer-queue-photo-remove {
  display: block;
  font-weight: 400;
  cursor: pointer;
}

.answer-queue-confirm input,
.answer-queue-photo-remove input {
  margin-right: 6px;
  vertical-align: middle;
}

.answer-queue-points {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.answer-queue-points label {
  margin: 0;
}

.answer-queue-points input {
  width: 90px;
}

.answer-queue-photo-upload {
  margin-top: 16px;
}

.answer-queue-photo-upload > label {
  display: block;
}

.answer-queue-photo-preview {
  margin-top: 10px;
}

.answer-queue-photo-remove {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.answer-queue-instructor-photos {
  margin-top: 20px;
}

/* A phone photo of a sheet of paper is portrait and far taller than a chart
   screenshot; without this the grading buttons sit below the fold every time.
   Scoped to the single/main image so the thumbnail strip keeps its own size. */
.answer-queue-single.course-logikus .answer-queue-compare-col > img,
.answer-queue-single.course-logikus .photo-gallery-single,
.answer-queue-single.course-logikus .photo-gallery-main {
  max-height: 60vh;
}

.answer-queue-single .answer-queue-photo-preview .photo-gallery-single,
.answer-queue-single .answer-queue-photo-preview .photo-gallery-main {
  max-height: 30vh;
}

/* Photo gallery — a Logikus solution may run over several sheets of paper. Loaded
   on every page (header.tpl.php), so everything here is scoped to .photo-gallery
   or .photo-lightbox and is shared by the teacher's queue and the lesson panel. */
.photo-gallery {
  max-width: 100%;
}

.photo-gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-gallery-main,
.photo-gallery-single {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  cursor: zoom-in;
}

.photo-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 56px;
  border: 0;
  border-radius: 4px;
  background: rgba(22, 38, 74, 0.55);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.photo-gallery-nav:hover {
  background: rgba(22, 38, 74, 0.8);
}

.photo-gallery-prev { left: 4px; }
.photo-gallery-next { right: 4px; }

.photo-gallery-counter {
  margin: 6px 0 4px;
  color: #6b7a90;
  font-size: 13px;
}

.photo-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-gallery-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.photo-gallery-thumb.is-current {
  border-color: #1568b8;
}

.photo-gallery-thumb img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 2px;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 30, 0.92);
}

.photo-lightbox[hidden] {
  display: none;
}

body.photo-lightbox-open {
  overflow: hidden;
}

.photo-lightbox-image {
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
}

.photo-lightbox-nav,
.photo-lightbox-close {
  position: absolute;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.photo-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 72px;
  font-size: 40px;
}

.photo-lightbox-nav:hover,
.photo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.photo-lightbox-prev { left: 12px; }
.photo-lightbox-next { right: 12px; }

.photo-lightbox-close {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 28px;
}

.photo-lightbox-counter {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #dbe3ef;
  font-size: 14px;
}