/* ====================================================
Plik: css/style.css
Opis: Kompletny styl całej aplikacji z motywami, responsywnością, estetyką.
==================================================== */

/* =========================
   Definicje zmiennych motywów systemowych (automatyczne)
   ========================= */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1e1e1e;       /* Tło ciemny tryb */
    --text-color: #f0f0f0;     /* Tekst ciemny tryb */
    --header-bg: #2c2c2c;      /* Nagłówek ciemny tryb */
    --card-bg: #333333;        /* Karty ciemny tryb */
    --link-color: #66aaff;     /* Linki i przyciski ciemny tryb */
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --header-bg: #f4f4f4;
    --card-bg: #f9f9f9;
    --link-color: #0066cc;
  }
}

/* =========================
   Motywy wymuszane przez klasę body
   ========================= */
body.light { --bg-color: #ffffff; --text-color: #000000; --header-bg: #f4f4f4; --card-bg: #f9f9f9; --link-color: #0066cc; }
body.dark { --bg-color: #1e1e1e; --text-color: #f0f0f0; --header-bg: #2c2c2c; --card-bg: #333333; --link-color: #66aaff; }
body.blue { --bg-color: #1e2a3a; --text-color: #ffffff; --header-bg: #253446; --card-bg: #2b3e50; --link-color: #4ab3ff; }
body.retro { --bg-color: #f4ecd8; --text-color: #000000; --header-bg: #e0d8c0; --card-bg: #f7f0da; --link-color: #a52a2a; }

/* =========================
   Style główne
   ========================= */
body {
  font-family: Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.6;
}

header, h2 {
  background-color: var(--header-bg);
  padding: 1em;
  margin: 0;
}

/* =========================
   Nawigacja i przyciski
   ========================= */
nav ul {
  list-style: none;
  display: flex;
  gap: 1em;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

nav ul li {
  display: flex;
}

.nav-btn,
button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.8em 1.2em;
  background-color: var(--link-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
  white-space: nowrap;
}

.nav-btn:hover,
button:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.survey-title-btn {
  display: block;
  width: 95%;
  margin: 0 auto 0 auto;
  padding: 0.8em 1.2em;
  background-color: var(--link-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  font-size: 1.2em;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
}

.survey-title-btn:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

/* =========================
   Styl dla odpowiedzi oraz przycisku Usuń pytanie (spójne)
   ========================= */
.answer-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.2em;
  border: 2px solid var(--link-color);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  color: var(--link-color);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.answer-option input {
  display: none;
}

.answer-option span {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.answer-option input:checked ~ span,
.answer-option.checked span {
  color: #fff;
}

.answer-option input:checked,
.answer-option.checked {
  background-color: var(--link-color);
  border-color: var(--link-color);
  color: #fff;
}

/* =========================
   Karty, bloki ankiet, multimedia
   ========================= */
.qblock,
.survey-card {
  margin-bottom: 1em;
  background-color: var(--card-bg);
  padding: 1em;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

.survey-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

img,
video {
  max-width: 100%;
  max-height: 200mm;
  object-fit: contain;
}

.qblock img,
.qblock video,
.qblock audio {
  margin-top: 1em;
  object-fit: contain;
  max-width: 100%;
  max-height: 200mm;
}

/* =========================
   Stopka sticky na dole
   ========================= */
.site-footer {
  background-color: var(--header-bg);
  padding: 1em;
  text-align: center;
  font-size: 0.9em;
  border-top: 1px solid #ccc;
  margin-top: auto;
}

/* =========================
   Responsywność dla małych ekranów
   ========================= */
@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
    gap: 0.5em;
  }

  .survey-details {
    flex-direction: column;
    gap: 0.5em;
  }

  .qblock {
    padding: 0.8em;
  }
}

/* =========================
   Banner komunikatów
   ========================= */
.banner {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 0.8em 1.2em;
  border-radius: 5px;
  z-index: 9999;
  display: none;
  color: #fff;
}

.banner.success {
  background-color: #28a745;
}

.banner.error {
  background-color: #dc3545;
}
/* Przyciski akcji na dole formularza */
.form-actions-center {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-top: 3em;
}

/* Ujednolicenie rozmiaru przycisków Utwórz i Anuluj */
.action-btn {
    width: 220px;
    padding: 0.8em 1.2em;
    font-size: 1em;
}
.create-survey-form {
  width: 95%;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-group label {
  margin-bottom: 0.5em;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  max-width: 400px;
  padding: 0.6em;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.form-left {
  margin-top: 1em;
}

.add-btn {
  margin-left: 0.5em;
}

.form-actions-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  margin-top: 3em;
}

.action-btn {
  width: 220px;
  height: 44px;
  font-size: 1em;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  background-color: var(--link-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
}

.action-btn:hover {
  opacity: 0.85;
  transform: scale(1.05);
}