/* Exam Online - visual refresh */

/* Inter font - self-hosted */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Inter-300.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-400.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-500.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-600.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-700.ttf') format('truetype');
}

/* Tlo strony */
body.gray-bg {
    background: linear-gradient(135deg, var(--exam-bg-gradient-start, #e8f5f1) 0%, var(--exam-bg, #ffffff) 100%);
    min-height: 100vh;
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--exam-text, #1a1a1a);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.btn {
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.form-control {
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Middle-box — responsywne nadpisanie stałego max-width z style.css */
.middle-box {
    max-width: 90vw;
    width: 100%;
}

@media (min-width: 480px) {
    .middle-box {
        max-width: 450px;
    }
}

/* Karta logowania i end */
.login-card {
    background: var(--exam-card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 24px var(--exam-card-shadow, rgba(0, 0, 0, 0.08));
    padding: 40px 36px 30px;
    margin-top: 20px;
}

.login-card h2 {
    color: var(--exam-heading, #2c3e50);
    margin-bottom: 10px;
}

.login-card .form-control {
    border-radius: 6px;
    border: 1px solid var(--exam-border, #dce1e8);
    padding: 12px 14px;
    font-size: 0.875rem; /* 14px */
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--exam-card-bg, #fff);
    color: var(--exam-text, #1a1a1a);
}

.login-card .form-control:focus {
    border-color: var(--exam-accent, #1ab394);
    box-shadow: 0 0 0 3px var(--exam-accent-shadow, rgba(26, 179, 148, 0.15));
}

/* Logo */
.login-card .logo-section {
    margin-bottom: 20px;
}

.login-card .logo-section img {
    max-height: 80px;
}

/* Karty ibox */
.ibox {
    border-radius: 10px;
    box-shadow: 0 2px 16px var(--exam-ibox-shadow, rgba(0, 0, 0, 0.07));
    overflow: hidden;
    border: none;
    background: var(--exam-card-bg, #fff);
}

.ibox-title {
    border-radius: 10px 10px 0 0;
    border-top: 3px solid var(--exam-accent, #1ab394);
    background: var(--exam-ibox-header-bg, linear-gradient(to right, #f9fafb, #fff));
    padding: 20px 24px;
}

.ibox-title h1 {
    font-size: 1.375rem; /* 22px */
    color: var(--exam-heading, #2c3e50);
    margin: 0;
}

.ibox-content {
    padding: 24px;
    border: none;
    color: var(--exam-text, #1a1a1a);
}

/* Przyciski */
.btn-primary {
    background-color: var(--exam-accent, #1ab394);
    border-color: var(--exam-accent, #1ab394);
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px var(--exam-accent-shadow, rgba(26, 179, 148, 0.25));
    color: var(--exam-btn-primary-text, #fff);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--exam-accent-hover, #159c80);
    border-color: var(--exam-accent-hover, #159c80);
    box-shadow: 0 4px 12px var(--exam-accent-shadow-hover, rgba(26, 179, 148, 0.35));
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-danger {
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25);
}

.btn-danger:hover {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
    transform: translateY(-1px);
}

.btn-warning {
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Imię i nazwisko zdającego — ten sam rozmiar co timer */
.exam-header h2 {
    font-size: 1.125rem; /* 18px — połowa timera */
    font-weight: 700;
}

/* Timer badge */
.timer-badge {
    background: linear-gradient(135deg, var(--exam-accent, #1ab394) 0%, var(--exam-accent-hover, #159c80) 100%);
    color: #fff;
    border-radius: 8px;
    padding: 8px 18px;
    display: inline-block;
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(26, 179, 148, 0.3);
}

.timer-badge span {
    color: #fff !important;
}

/* Etap 6: Ostrzeżenie timera — pulsacja przy ≤5 min */
.timer-badge.timer-warning {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.4) !important;
    animation: timer-pulse 1.5s ease-in-out infinite;
}

.timer-warning-text {
    color: var(--exam-danger, #e74c3c);
    font-weight: 700;
    font-size: 0.875rem;
    margin-top: 4px;
    text-align: center;
}

/* Ukryty div dla screen readera */
.sr-timer-alert {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes timer-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Info sekcje na stronie startowej */
.exam-info-label {
    font-size: 0.75rem; /* 12px */
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--exam-text-muted, #8492a6);
    margin-bottom: 2px;
    font-weight: 600;
}

.exam-info-value {
    font-size: 1.125rem; /* 18px */
    color: var(--exam-heading, #2c3e50);
    margin-bottom: 16px;
    font-weight: 600;
}

.exam-info-value.exam-title {
    font-size: 1.5rem; /* 24px */
    color: var(--exam-accent, #1ab394);
    font-weight: 700;
    line-height: 1.3;
}

/* Pytania - odpowiedzi */
.ibox-content .i-checks label {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
    cursor: pointer;
    padding: 6px 0;
}

/* Modal */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 32px var(--exam-modal-shadow, rgba(0, 0, 0, 0.15));
    background: var(--exam-card-bg, #fff);
    color: var(--exam-text, #1a1a1a);
}

.modal-header {
    border-bottom: 1px solid var(--exam-border-light, #f0f2f5);
    padding: 20px 24px;
}

.modal-body {
    padding: 24px;
}

.modal-content > .modal-body:first-child {
    border-radius: 12px 12px 0 0;
}

.modal-footer {
    border-top: 1px solid var(--exam-border-light, #f0f2f5);
    padding: 16px 24px;
}

.modal-icon {
    color: var(--exam-warning-icon, #f0ad4e);
}

/* Stopka */
.exam-footer {
    border-top: 1px solid var(--exam-border, #e8ecef);
    padding-top: 12px;
    margin-top: 24px;
    text-align: center;
}

.exam-footer small {
    color: var(--exam-text-muted, #8492a6);
    font-size: 0.75rem; /* 12px */
}

/* Alert */
.alert {
    border-radius: 8px;
    border: none;
    font-weight: 500;
}

.alert-danger {
    background-color: var(--exam-danger-bg, #fdf0f0);
    color: var(--exam-danger, #c0392b);
}

/* Sekcja GCCS info */
.gccs-info {
    background: var(--exam-gccs-info-bg, #f7faf9);
    border-left: 3px solid var(--exam-accent, #1ab394);
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 20px;
    font-size: 0.8125rem; /* 13px */
    color: var(--exam-text-secondary, #4a5568);
    line-height: 1.5;
}

/* Checkbox oświadczenie */
.exam-declaration {
    background: var(--exam-declaration-bg, #f9fafb);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
}

/* Header row z logiem */
.exam-header {
    padding: 16px 0;
    margin-bottom: 8px;
}

.exam-header img {
    transition: opacity 0.2s;
}

/* Pytanie - ukryj pusty files_section */
#files_section:empty {
    display: none;
    padding: 0;
}

/* Pytanie - sekcja contentu */
#exam_content1.ibox-content {
    padding-top: 10px;
}

/* Pytanie - numer */
#question_nr {
    font-size: 1rem; /* 16px */
    letter-spacing: 0.3px;
    color: var(--exam-text-secondary, #4a5568);
    margin-bottom: 4px;
}

/* Pytanie - treść */
#question_title {
    color: var(--exam-accent, #1ab394);
    font-size: 1.25rem; /* 20px */
}

/* Dropzone */
.dropzone {
    border-radius: 10px !important;
    border: 2px dashed var(--exam-accent, #1ab394) !important;
    background: var(--exam-dropzone-bg, #f9fdfb) !important;
    transition: background 0.2s;
}

.dropzone:hover {
    background: var(--exam-dropzone-hover-bg, #f0faf6) !important;
}

/* Podpis canvas */
canvas {
    border-radius: 8px !important;
    border: 1px solid var(--exam-border, #dce1e8) !important;
}

/* ============================================
   WCAG Fieldset reset (Etap 2a — GATE iCheck)
   ============================================ */
#question-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ============================================
   WCAG Focus Ring (Etap 2)
   WCAG 2.4.7 (Widoczny fokus, AA)
   WCAG 2.4.11 (Wygląd fokusu, WCAG 2.2 AA)
   ============================================ */

/* Globalny focus ring — nadpisuje outline:none z Bootstrap i style.css */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.close:focus-visible {
    outline: 3px solid var(--exam-focus-ring, #005fcc) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px var(--exam-focus-shadow, rgba(0, 95, 204, 0.25)) !important;
}

/* iCheck — plugin podmienia natywne kontrolki na divy */
.icheckbox_square-green:focus-within,
.iradio_square-green:focus-within,
.icheckbox_square-green.focus,
.iradio_square-green.focus {
    outline: 3px solid var(--exam-focus-ring, #005fcc) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px var(--exam-focus-shadow, rgba(0, 95, 204, 0.25)) !important;
}

/* iCheck label — cały wiersz odpowiedzi */
.i-checks label:focus-within {
    outline: 3px solid var(--exam-focus-ring, #005fcc);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Linki w tekście */
a:focus-visible {
    border-radius: 2px;
}

/* Modal — przyciski zamknięcia */
.modal .close:focus-visible {
    outline: 3px solid var(--exam-focus-ring, #005fcc) !important;
    outline-offset: 2px !important;
}

/* Nadpisanie istniejącego focus na .form-control — wzmocnienie widoczności */
.login-card .form-control:focus-visible {
    border-color: var(--exam-focus-ring, #005fcc);
    box-shadow: 0 0 0 3px var(--exam-focus-shadow, rgba(0, 95, 204, 0.3)) !important;
}

/* Nadpisanie .btn-primary:focus — dodanie outline obok istniejącego efektu */
.btn-primary:focus-visible {
    outline: 3px solid var(--exam-focus-ring, #005fcc) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px var(--exam-focus-shadow, rgba(0, 95, 204, 0.25)) !important;
}

.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-white:focus-visible {
    outline: 3px solid var(--exam-focus-ring, #005fcc) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px var(--exam-focus-shadow, rgba(0, 95, 204, 0.25)) !important;
}

/* ============================================
   WCAG Motywy — nadpisanie style.css / Bootstrap
   Nadpisuje hardkodowane #ffffff, #f3f3f4, kolory
   z Inspinia style.css które blokują ciemny/HC motyw
   ============================================ */

/* Tło i kolor body */
body.gray-bg {
    background-color: var(--exam-bg, #ffffff) !important;
    color: var(--exam-text, #1a1a1a) !important;
}

/* Karty ibox — style.css:4879 i :4892 nadają #ffffff */
.ibox-title {
    background-color: var(--exam-card-bg, #ffffff) !important;
    border-color: var(--exam-border, #e7eaec) !important;
    color: var(--exam-heading, #2c3e50) !important;
}

.ibox-content {
    background-color: var(--exam-card-bg, #ffffff) !important;
    border-color: var(--exam-border, #e7eaec) !important;
    color: var(--exam-text, #1a1a1a) !important;
}

/* Nagłówki wewnątrz ibox */
.ibox-content h1,
.ibox-content h2,
.ibox-content h3,
.ibox-content h4,
.ibox-content h5 {
    color: var(--exam-heading, #2c3e50) !important;
}

/* Tekst pytań i odpowiedzi */
.ibox-content .i-checks label {
    color: var(--exam-text, #1a1a1a) !important;
}

.ibox-content p,
.ibox-content strong,
.ibox-content b {
    color: var(--exam-text, #1a1a1a);
}

/* .text-navy z style.css:5116 — !important nadpisuje */
.text-navy {
    color: var(--exam-accent, #1ab394) !important;
}

/* .text-danger */
.text-danger {
    color: var(--exam-danger, #ed5565) !important;
}

/* Przyciski btn-white i btn-danger */
.btn-white {
    background-color: var(--exam-card-bg, #fff) !important;
    border-color: var(--exam-border, #e7eaec) !important;
    color: var(--exam-text, #1a1a1a) !important;
}

.btn-danger {
    color: #fff !important;
}

/* Modal — style.css może nadawać białe tło */
.modal-content {
    background-color: var(--exam-card-bg, #fff) !important;
    color: var(--exam-text, #1a1a1a) !important;
}

.modal-header {
    color: var(--exam-heading, #2c3e50) !important;
    border-bottom-color: var(--exam-border-light, #f0f2f5) !important;
}

.modal-header h4,
.modal-header .modal-title,
.modal-body h2,
.modal-body h3 {
    color: var(--exam-heading, #2c3e50) !important;
}

.modal-body p,
.modal-body strong,
.modal-body b,
.modal-body span {
    color: var(--exam-text, #1a1a1a) !important;
}

/* .inmodal z style.css:4504 wymusza jasne tło modal-body */
.inmodal .modal-body {
    background: var(--exam-card-bg, #f8fafb) !important;
}

.inmodal .modal-header {
    background: var(--exam-card-bg, #fff) !important;
}

.inmodal .modal-icon {
    color: var(--exam-warning-icon, #e2e3e3) !important;
}

.inmodal .modal-title {
    color: var(--exam-heading, #2c3e50) !important;
}

.modal-footer {
    background-color: var(--exam-card-bg, #fff) !important;
    border-top-color: var(--exam-border-light, #f0f2f5) !important;
}

/* Przycisk zamknięcia modala × */
.modal-header .close {
    color: var(--exam-text, #1a1a1a) !important;
    opacity: 0.7;
    text-shadow: none;
}

.modal-header .close:hover {
    color: var(--exam-text, #1a1a1a) !important;
    opacity: 1;
}

/* Imię i nazwisko zdającego, tekst nad timerem */
.exam-header h4,
.exam-header h3,
.exam-header b,
.exam-header strong {
    color: var(--exam-heading, #2c3e50) !important;
}

/* Radio buttony iCheck — kółka widoczne w ciemnym/HC */
.iradio_square-green,
.icheckbox_square-green {
    border-color: var(--exam-border, #dce1e8);
}

/* Podpis canvas */
canvas {
    background: var(--exam-card-bg, #fff) !important;
}

/* ============================================
   WCAG Etap 9: Obszar klikalny min 24x24px
   WCAG 2.5.8 (Rozmiar celu, AA — WCAG 2.2)
   ============================================ */

/* iCheck radio/checkbox — powiększenie obszaru klikalnego do min 24x24px
   Sprite zostaje 22x22, ale skalujemy wizualnie i dodajemy padding */
.icheckbox_square-green,
.iradio_square-green {
    transform: scale(1.3);
    transform-origin: center center;
    margin: 3px;
}

/* Label odpowiedzi — powiększenie obszaru klikalnego */
.ibox-content .i-checks label {
    padding: 10px 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wiersz odpowiedzi (.exam-answer) — padding dla łatwiejszego klikania */
.exam-answer {
    margin-bottom: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

.exam-answer:hover {
    background: var(--exam-info-bg, rgba(0,0,0,0.02));
}