/* ============================================================
   DESIGN SYSTEM — ChemiaMatura 2027
   Rozszerza tokeny z styles.css (:root już zawiera --bg, --accent,
   --space-*, --radius-* itd.) — TEN plik ich NIE nadpisuje,
   tylko dodaje brakujące tokeny i komponenty wielokrotnego użytku.

   Ładować PO styles.css:
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="design-system.css">
   ============================================================ */

:root{
  /* --- Kolory stanu (brakowało --err jako properly zdefiniowanego tokenu) --- */
  --err:#e06a5a;
  --err-bg:rgba(224,106,90,0.08);
  --err-border:#4a2530;
  --success:var(--ok, #4caf82);
  --success-bg:rgba(76,175,130,0.08);
  --warning:var(--warn, #e0a44a);
  --warning-bg:rgba(224,164,74,0.08);
  --info:var(--accent);
  --info-bg:rgba(77,150,232,0.08);

  /* --- Typografia (skala) --- */
  --font-xs:0.72rem;
  --font-sm:0.85rem;
  --font-md:0.95rem;
  --font-lg:1.15rem;
  --font-xl:1.5rem;
  --font-2xl:2rem;
  --font-serif:'Playfair Display',serif;
  --font-sans:'DM Sans',sans-serif;

  /* --- Dodatkowe odstępy (uzupełnienie istniejącej skali --space-1..8) --- */
  --space-5:20px;
  --space-10:40px;
  --space-12:48px;

  /* --- Promienie (uzupełnienie --radius-sm/md/lg) --- */
  --radius-xs:6px;
  --radius-full:999px;

  /* --- Cienie --- */
  --shadow-sm:0 2px 6px rgba(0,0,0,0.2);
  --shadow-md:0 4px 14px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 28px rgba(0,0,0,0.4);
  --shadow-accent:0 3px 10px rgba(77,150,232,0.35);

  /* --- Przejścia --- */
  --transition-fast:0.12s ease;
  --transition-normal:0.2s ease;
  --transition-slow:0.35s ease;

  /* --- Wysokości pól/przycisków --- */
  --control-h-sm:32px;
  --control-h-md:40px;
  --control-h-lg:48px;

  /* --- Z-index skala (uporządkowanie tego co juz jest w uzyciu: overlay=150, sidebar=200) --- */
  --z-dropdown:80;
  --z-sticky:100;
  --z-overlay:150;
  --z-sidebar:200;
  --z-modal:300;
  --z-toast:400;
}

/* ============================================================
   1. BUTTON — .btn + warianty
   Istniejące .check-btn/.sol-btn/.reset-btn pozostają (używane
   w setkach miejsc) — .btn to NOWY, ujednolicony wzorzec do
   użycia w nowych ekranach/narzędziach.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
  height:var(--control-h-md);padding:0 var(--space-4);
  border:none;border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:var(--font-sm);font-weight:700;
  cursor:pointer;transition:all var(--transition-fast);
  white-space:nowrap;text-decoration:none;
}
.btn:disabled,.btn.is-disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;}
.btn:active{transform:translateY(1px);}

.btn-primary{background:linear-gradient(135deg,var(--accent-btn),var(--accent-btn2));color:#fff;box-shadow:var(--shadow-accent);}
.btn-primary:hover{opacity:0.92;box-shadow:var(--shadow-md);}

.btn-secondary{background:linear-gradient(135deg,var(--accent2-btn),var(--accent2-btn2));color:#fff;box-shadow:0 3px 10px rgba(155,127,212,0.35);}
.btn-secondary:hover{opacity:0.92;}

.btn-ghost{background:none;border:1.5px solid var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--info-bg);}

.btn-danger{background:none;border:1.5px solid var(--err-border);color:var(--muted);}
.btn-danger:hover{border-color:var(--err);color:var(--err);background:var(--err-bg);}

.btn-success{background:linear-gradient(135deg,var(--success),#3d9268);color:#fff;}
.btn-success:hover{opacity:0.92;}

.btn-sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--font-xs);border-radius:var(--radius-sm);}
.btn-lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--font-md);}
.btn-block{width:100%;}
.btn-icon{width:var(--control-h-md);height:var(--control-h-md);padding:0;border-radius:var(--radius-full);}

/* ============================================================
   2. CARD — rozszerzenie istniejącej .card
   ============================================================ */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-4);
}
.card-hover{transition:transform var(--transition-normal),box-shadow var(--transition-normal);cursor:pointer;}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent);}
.card-title{font-family:var(--font-serif);font-weight:700;font-size:var(--font-lg);margin-bottom:var(--space-2);}
.card-subtitle{font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-3);}
.card-footer{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);}

/* ============================================================
   3. INPUT — pole tekstowe (spójne z istniejącym .ans-input)
   ============================================================ */
.input-field{
  width:100%;height:var(--control-h-md);padding:0 var(--space-3);
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--font-sans);font-size:var(--font-sm);
  transition:border-color var(--transition-fast);
}
.input-field::placeholder{color:var(--muted);}
.input-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(77,150,232,0.15);}
.input-field.is-error{border-color:var(--err);}
.input-field.is-success{border-color:var(--success);}
.input-label{display:block;font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-1);font-weight:600;}
.input-hint{font-size:var(--font-xs);color:var(--muted);margin-top:var(--space-1);}
.input-hint.is-error{color:var(--err);}
textarea.input-field{height:auto;min-height:80px;padding:var(--space-3);resize:vertical;font-family:inherit;}

/* ============================================================
   4. PROGRESS BAR — rozszerzenie istniejącej .progress-bar/.progress-fill
   (nie duplikujemy — tylko dopisujemy warianty)
   ============================================================ */
.progress-bar{height:8px;background:var(--surface);border-radius:var(--radius-full);overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:var(--radius-full);transition:width var(--transition-slow);}
.progress-fill.is-success{background:linear-gradient(90deg,var(--success),#3d9268);}
.progress-fill.is-warning{background:linear-gradient(90deg,var(--warning),#c9862f);}
.progress-bar-lg{height:14px;}
.progress-bar-sm{height:4px;}

/* ============================================================
   5. BADGE — rozszerzenie istniejącej .badge
   ============================================================ */
.badge{font-size:var(--font-xs);font-weight:700;border-radius:var(--radius-xs);padding:0.15rem 0.5rem;
  display:inline-flex;align-items:center;gap:0.25rem;}
.badge-accent{background:var(--info-bg);color:var(--accent);}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-error{background:var(--err-bg);color:var(--err);}
.badge-neutral{background:rgba(139,150,176,0.12);color:var(--muted);}

/* ============================================================
   6. ALERT — komunikaty (NOWY komponent, brakowało go wcześniej)
   ============================================================ */
.alert{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  border-left:4px solid; font-size:var(--font-sm);line-height:1.6;
}
.alert-icon{font-size:1.1rem;flex-shrink:0;line-height:1.4;}
.alert-info{background:var(--info-bg);border-left-color:var(--accent);color:var(--text);}
.alert-success{background:var(--success-bg);border-left-color:var(--success);color:var(--text);}
.alert-warning{background:var(--warning-bg);border-left-color:var(--warning);color:var(--text);}
.alert-error{background:var(--err-bg);border-left-color:var(--err);color:var(--text);}

/* ============================================================
   7. MODAL — okno modalne (NOWY komponent)
   ============================================================ */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:var(--z-modal);align-items:center;justify-content:center;padding:var(--space-4);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);max-width:480px;width:100%;max-height:85vh;overflow-y:auto;
  padding:var(--space-6);
}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);}
.modal-title{font-family:var(--font-serif);font-weight:700;font-size:var(--font-lg);}
.modal-close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:0.2rem;}
.modal-close:hover{color:var(--text);}
.modal-footer{margin-top:var(--space-5);display:flex;gap:var(--space-2);justify-content:flex-end;}

/* ============================================================
   8. SIDEBAR ITEM — już istnieje jako .nav-item, nic nie zmieniamy
   (patrz styles.css — .nav-item, .nav-item:hover, .nav-item.active)
   ============================================================ */

/* ============================================================
   9. TASK CARD — już istnieje jako .named-rxn w chemia-tN.html.
   Tu tylko lekkie ujednolicenie stanu "zrobione", żeby wyglądało
   identycznie niezależnie od działu.
   ============================================================ */
.task-done-label{
  display:inline-flex;align-items:center;gap:0.25rem;
  background:var(--success-bg);color:var(--success);
  font-size:var(--font-xs);font-weight:700;border-radius:var(--radius-xs);
  padding:0.1rem 0.5rem;margin-left:var(--space-2);
}

/* ============================================================
   10. LESSON HEADER — nagłówek działu (ujednolicenie wzorca
   .lesson-badge + .lesson-h1 + .lesson-sub widocznego w chemia-tN.html)
   ============================================================ */
.lesson-header{margin-bottom:var(--space-4);}
.lesson-badge{
  display:inline-block;background:var(--info-bg);color:var(--accent);
  font-size:var(--font-xs);font-weight:700;border-radius:var(--radius-full);
  padding:0.2rem 0.7rem;margin-bottom:var(--space-2);
}
.lesson-h1{font-family:var(--font-serif);font-size:var(--font-2xl);font-weight:900;
  margin-bottom:var(--space-1);color:var(--text);}
.lesson-sub{color:var(--muted);font-size:var(--font-sm);}

/* ============================================================
   11. EMPTY STATE — pusty widok (NOWY komponent)
   ============================================================ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-10) var(--space-4);color:var(--muted);
}
.empty-state-icon{font-size:2.5rem;margin-bottom:var(--space-3);opacity:0.6;}
.empty-state-title{font-size:var(--font-md);font-weight:700;color:var(--text);margin-bottom:var(--space-1);}
.empty-state-text{font-size:var(--font-sm);max-width:360px;line-height:1.6;}

/* ============================================================
   12. SKELETON — placeholder ładowania (NOWY komponent)
   ============================================================ */
.skeleton{
  background:linear-gradient(90deg,var(--surface) 25%,var(--card) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
.skeleton-text{height:0.9em;margin-bottom:var(--space-2);}
.skeleton-title{height:1.4em;width:60%;margin-bottom:var(--space-3);}
.skeleton-card{height:120px;border-radius:var(--radius-md);}
@keyframes skeleton-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ============================================================
   13. TOAST — powiadomienie (NOWY komponent)
   ============================================================ */
.toast-wrap{
  position:fixed;bottom:var(--space-4);left:50%;transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);
  align-items:center;pointer-events:none;
}
.toast{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-5);
  font-size:var(--font-sm);color:var(--text);
  display:flex;align-items:center;gap:var(--space-2);
  opacity:0;transform:translateY(10px);transition:all var(--transition-normal);
  pointer-events:auto;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast-success{border-left:4px solid var(--success);}
.toast-error{border-left:4px solid var(--err);}
.toast-warning{border-left:4px solid var(--warning);}

/* ============================================================
   14. TABS — już istnieje jako .ltabs/.ltab w chemia-tN.html
   (patrz styles.css) — tu tylko wariant do użycia poza działami
   (np. w narzędziach), żeby nie musieć kopiować stylów .ltabs.
   ============================================================ */
.tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--border);margin-bottom:var(--space-4);}
.tab{
  background:none;border:none;color:var(--muted);font-size:var(--font-sm);font-weight:600;
  padding:var(--space-2) var(--space-3);cursor:pointer;border-bottom:2px solid transparent;
  transition:all var(--transition-fast);
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ============================================================
   15. WIDGET CARD — ciemna karta z gradientem (dailyTask/todayPlan/
   weeklyGoals na dashboardzie) — wyodrębnione z 3x powtórzonego inline style
   ============================================================ */
.widget-card{
  background:linear-gradient(135deg,#0d1436,#0a0e27);
  border:1.5px solid #2a5fc4;border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem;margin-bottom:1.6rem;box-shadow:var(--shadow-md);
}

/* ============================================================
   16. DASH ICON — ikony na dashboardzie (2 rozmiary powtarzajace
   sie odpowiednio 24x i 10x jako inline style)
   ============================================================ */
.dash-icon{width:26px;height:26px;object-fit:contain;}
.dash-icon-lg{width:44px!important;height:44px!important;max-width:44px!important;
  max-height:44px!important;object-fit:contain!important;border-radius:10px;display:block;}

/* ============================================================
   17. TD-CELL / DATA-CARD — wzorce z lekcji (tabele, boxy danych)
   wyodrębnione z powtarzających się inline styli w działach
   ============================================================ */
.td-cell{padding:0.3rem 0.6rem;border:1px solid var(--border);color:#c8c8e0;}
.td-cell-accent2{padding:0.3rem 0.6rem;border:1px solid var(--border);color:var(--accent2);font-weight:600;}
.td-cell-purple{padding:0.3rem 0.6rem;border:1px solid var(--border);color:#c9b3ff;font-weight:600;}
.data-card{border:1px solid #2a5fc4;border-radius:10px;padding:1rem;}
.data-card-sm{border:1px solid #2a5fc4;border-radius:8px;padding:0.6rem;}
.data-card-title{color:#4d96e8;font-weight:800;font-size:0.95rem;margin-bottom:0.8rem;}
.text-accent2-bold{color:var(--accent2);font-weight:600;font-size:0.85rem;}

/* ============================================================
   18. TOOL HEADER — nagłówek narzędzia (ikona+tytuł+podtytuł),
   dokładnie ten sam wzorzec powtórzony w kalkulator/fiszki/
   plansze-zakladka/słownik jako osobny inline style w każdym pliku
   ============================================================ */
.tool-header-bar{
  display:flex;align-items:center;gap:0.7rem;
  background:linear-gradient(135deg,#0d1436,#0a0e27);
  border:1.5px solid #2a5fc4;border-radius:12px;
  padding:0.7rem 0.9rem;margin-bottom:1rem;box-shadow:var(--shadow-md);
}
.tool-header-icon{width:32px;height:32px;vertical-align:middle;border-radius:8px;margin-right:0.3rem;}
.tool-header-title{font-family:var(--font-serif);font-weight:800;font-size:1rem;flex:1;}
.tool-header-sub{font-size:0.85rem;color:var(--muted);}

/* ============================================================
   19. BOTTOM NAV — dolna nawigacja mobilna
   Widoczna tylko na ekranach <=760px, ukryta na desktopie.
   Bezpieczny odstęp od dolnej belki systemowej przez
   env(safe-area-inset-bottom) — wymaga viewport-fit=cover w <meta>.
   ============================================================ */
.bottom-nav{display:none;}
@media (max-width:760px){
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sidebar);
    background:var(--surface);border-top:1px solid var(--border);
    padding:0.35rem 0.2rem calc(0.35rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 12px rgba(0,0,0,0.25);
  }
  /* Odstęp na dole strony, żeby dolna nawigacja nie zasłaniała treści */
  body.has-bottom-nav{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));}
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.15rem;padding:0.3rem 0.1rem;background:none;border:none;
  color:var(--muted);text-decoration:none;font-size:0.65rem;font-weight:600;
  min-height:44px;-webkit-tap-highlight-color:transparent;
}
.bottom-nav-item .bn-icon{font-size:1.25rem;line-height:1;}
.bottom-nav-item.active{color:var(--accent);}
.bottom-nav-item:active{opacity:0.6;}
.bottom-nav-item.is-pending{opacity:0.5;}

/* ============================================================
   20. MOBILE TOUCH & INPUT FIXES
   - min. 44px wysokości dla najczęściej klikanych przycisków (standard dotykowy)
   - font-size >=16px na polach tekstowych, żeby iOS Safari nie robił
     automatycznego zoomu po kliknięciu w pole (częsty, irytujący błąd)
   ============================================================ */
@media (max-width:760px){
  .check-btn,.sol-btn,.reset-btn{min-height:44px;padding-top:0.75rem;padding-bottom:0.75rem;}
  .ans-input{font-size:16px;min-height:44px;}
  input,textarea,select{font-size:16px;}
  table{font-size:0.78rem;}
  .table-wrap{-webkit-overflow-scrolling:touch;}
  .nav-item{min-height:44px;}
}

/* ============================================================
   Stany focus/hover/disabled — spójne dla całego systemu
   ============================================================ */
/* ============================================================
   21. STANY INTERFEJSU — offline banner, spinner, sesja wygasła,
   action-banner (np. "4 zadania oczekują na ocenę")
   ============================================================ */

/* Pasek offline - przyklejony u gory, widoczny dopoki nie wroci polaczenie */
.offline-banner{
  display:none;position:fixed;top:0;left:0;right:0;z-index:var(--z-toast);
  background:var(--warning);color:#1a1400;text-align:center;
  font-size:var(--font-sm);font-weight:700;padding:0.5rem 1rem;
  padding-top:calc(0.5rem + env(safe-area-inset-top,0px));
}
.offline-banner.show{display:block;}

/* Spinner - do przyciskow "Zapisywanie..." / ladowania inline */
.spinner{
  display:inline-block;width:1em;height:1em;border:2px solid rgba(255,255,255,0.35);
  border-top-color:currentColor;border-radius:50%;animation:spin 0.7s linear infinite;
  vertical-align:-0.15em;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Ekran sesji wygaslej / braku dostepu - pelnoekranowy, blokujacy */
.session-lock{
  position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-6);
}
.session-lock-icon{font-size:3rem;margin-bottom:var(--space-4);}
.session-lock-title{font-family:var(--font-serif);font-size:var(--font-xl);font-weight:800;margin-bottom:var(--space-2);}
.session-lock-text{color:var(--muted);font-size:var(--font-sm);max-width:340px;margin-bottom:var(--space-5);}

/* Banner akcji - informacyjny pasek z liczba/CTA (np. "4 zadania oczekuja na ocene") */
.action-banner{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--info-bg);border:1px solid var(--accent);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);
}
.action-banner-icon{font-size:1.3rem;flex-shrink:0;}
.action-banner-text{flex:1;font-size:var(--font-sm);}
.action-banner-text b{color:var(--accent);}
.action-banner.is-warning{background:var(--warning-bg);border-color:var(--warning);}
.action-banner.is-inactive{background:rgba(139,150,176,0.1);border-color:var(--border);}

/* Kropka statusu zapisu - obok "Zapisano"/"Zapisywanie..."/"Blad zapisu" */
.save-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:0.4rem;}
.save-status-dot.ok{background:var(--success);}
.save-status-dot.error{background:var(--err);}
.save-status-dot.pending{background:var(--warning);animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

/* ============================================================
   22. DOSTĘPNOŚĆ — prefers-reduced-motion, szerszy focus-visible
   ============================================================ */

/* Wyłącz/skróć animacje dla osób wrażliwych na ruch */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Widoczny focus na WSZYSTKICH elementach interaktywnych, nie tylko wybranych klasach */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [role="checkbox"]:focus-visible, [role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ============================================================
   Stany focus/hover/disabled — spójne dla całego systemu
   ============================================================ */
.btn:focus-visible,.input-field:focus-visible,.nav-item:focus-visible,.tab:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}