/* ==========================================================================
   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 .excel-chart-answers 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.
   ========================================================================== */

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

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

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

.excel-chart-answers thead th {
  background-color: var(--eca-blue);
  color: #fff;
  text-align: left;
  padding: 14px 20px;
  font-size: 0.85rem;
  font-weight: 700;
}

.excel-chart-answers thead th:first-child {
  border-top-left-radius: 8px;
}

.excel-chart-answers thead th:last-child {
  border-top-right-radius: 8px;
}

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

.excel-chart-answers tbody tr {
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Keyboard users still get a visible focus ring around the row */
.excel-chart-answers tbody tr:focus-within {
  outline: 2px solid var(--eca-blue);
  outline-offset: -2px;
}

.excel-chart-answers tbody tr:nth-child(odd) {
  background-color: var(--eca-gray-200);
}

.excel-chart-answers tbody tr:nth-child(even) {
  background-color: #fff;
}

.excel-chart-answers tbody tr:hover {
  background-color: var(--eca-blue-light);
}

.excel-chart-answers tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--eca-border);
}

.excel-chart-answers td {
  padding: 13px 20px;
  vertical-align: middle;
}

/* Task title link (1st column) */
.excel-chart-answers td:first-child a {
  color: var(--eca-blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.excel-chart-answers td:first-child a:hover {
  color: var(--eca-blue);
  text-decoration: underline;
}

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

/* Lesson name (2nd column) */
.excel-chart-answers td:nth-child(2) {
  color: var(--eca-navy);
}

/* Student name (3rd column) */
.excel-chart-answers td:nth-child(3) {
  font-weight: 600;
}

/* Submission date (4th column) */
.excel-chart-answers td:nth-child(4) {
  color: var(--eca-gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

.excel-chart-answers td.new,
.excel-chart-answers td.fixed {
  white-space: nowrap;
}

.excel-chart-answers td.new span,
.excel-chart-answers td.fixed span,
.excel-chart-answers td.new,
.excel-chart-answers 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 */
.excel-chart-answers td.new,
.excel-chart-answers td.fixed {
  position: relative;
}

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

.excel-chart-answers td.new {
  color: var(--eca-green);
}

.excel-chart-answers td.new::before {
  background-color: var(--eca-green);
  box-shadow: 0 0 0 3px var(--eca-green-bg);
}

.excel-chart-answers td.fixed {
  color: var(--eca-amber);
}

.excel-chart-answers td.fixed::before {
  background-color: var(--eca-amber);
  box-shadow: 0 0 0 3px var(--eca-amber-bg);
}

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

.excel-chart-answers tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.excel-chart-answers tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

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

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

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

.excel-chart-answers td.accepted {
  color: var(--eca-green);
}

.excel-chart-answers td.accepted::before {
  background-color: var(--eca-green);
  box-shadow: 0 0 0 3px var(--eca-green-bg);
}

.excel-chart-answers td.rejected {
  color: #b02a1f;
}

.excel-chart-answers td.rejected::before {
  background-color: #b02a1f;
  box-shadow: 0 0 0 3px #fbe4e1;
}

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

@media (max-width: 700px) {
  .excel-chart-answers {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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