/* ========= Zmienne i fundament ========= */
:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --text: #222;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;              /* kolor akcentu jak na tagmemaybe.org */
  --radius: 12px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);

  --toolbar-h: 80px;              /* wysokość paska górnego */
  --global-header-h: var(--toolbar-h); /* padding-top dla main */
}

html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

.tab-content { display: none; }
.tab-content.active { display: flex; gap: 1em; }

/* Ogólny layout treści obok siebie (jeśli używasz) */
.main-layout { display: flex; gap: 1em; align-items: flex-start; }

/* Nagłówki sekcji „pod” globalnym headerem */
.graph-header { position: sticky; top: var(--global-header-h); z-index: 999; }

/* ========= PASEK GÓRNY ========= */
:root{
  --toolbar-h: 64px;                  /* kompaktowa wysokość */
  --global-header-h: var(--toolbar-h);
}

#toolbar{
  position: fixed; inset: 0 0 auto 0; z-index: 2000;
  height: var(--toolbar-h);
  padding: 6px 12px;                  /* ciaśniejsze marginesy */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.04); /* delikatniejszy cień */
}

main {
  padding-top: 0; /* albo np. 8px */
}

/* Strefy lewa/prawa */
.nav-left, .nav-right { display:flex; align-items:center; gap:10px; }
.nav-left { justify-content:flex-start; }
.nav-right { justify-content:flex-end; }

/* Tabs: przewijane w poziomie */
nav.tab-bar .tabs{
  display:flex; gap:.35rem; padding:2px 4px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin;
}
nav.tab-bar .tabs::-webkit-scrollbar{ height:6px; }
nav.tab-bar .tabs::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }
nav.tab-bar .tabs::-webkit-scrollbar-track{ background:transparent; }




/* Pigułka z użytkownikiem i przycisk */
#annotatorName{
  height:32px;
  padding:0 .75rem 0 2rem;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid var(--border);
  color:var(--muted);
  font-weight:600;
}
#annotatorName::placeholder{ color:var(--muted); }

.toolbar-button{
  height:32px;
  padding:0 .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:#111;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.toolbar-button:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
  box-shadow:0 3px 8px rgba(0,0,0,.06);
}
.toolbar-button.btn-ghost{}

/* Logo – mniejsze, dopasowane do paska */

.logo {
  height: 120px;             /* faktyczny rozmiar logo */
  object-fit: contain;
  display: block;

  margin-top: -20px;         /* podciągnięcie do góry */
  margin-bottom: -20px;      /* kompensacja na dole */
}

/* ===== Nawigacja – pastylki w nagłówku ===== */

/* ── Pastylki w nagłówku: czysto, bez fioletu ───────────────────────────── */

#toolbar .tab-bar .tabs{ 
  display:flex; gap:12px; align-items:center;
}

/* stan bazowy */
#toolbar .tab-bar .tab-button{
  display:inline-flex; align-items:center; gap:8px;
  padding:.54rem 1rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  line-height:1;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .06s ease;
}

#toolbar .tab-bar .tab-button:hover{
  background:#f8fafc;
  border-color:#cfd8ea;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}

#toolbar .tab-bar .tab-button:active{ transform:translateY(1px); }

/* stan aktywny – delikatne, niebieskawe tło + jasna krawędź, bez fioletowej poświaty */
#toolbar .tab-bar .tab-button.active,
#toolbar .tab-bar .tab-button[aria-current="page"]{
  background:#eff6ff;            /* subtelny niebieski (bez fioletu) */
  border-color:#cfe0ff;
  color:#0b1220;
  box-shadow:0 2px 10px rgba(15,23,42,.06); /* neutralny cień, bez inset */
}

/* focus tylko klawiaturą – elegancki outline zamiast domyślnego */
#toolbar .tab-bar .tab-button:focus{ outline:none; }
#toolbar .tab-bar .tab-button:focus-visible{
  outline:2px solid rgba(37,99,235,.45);   /* var(--accent) w 45% */
  outline-offset:2px;
}
/* ========= KONIEC PASKA GÓRNEGO ========= */

/* aktywny przycisk języka – działa zarówno po aria-pressed, jak i po klasie .active */
.lang-switcher .lang-btn[aria-pressed="true"],
.lang-switcher .lang-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: color-mix(in oklab, var(--accent) 80%, white 20%);
  box-shadow: 0 3px 8px rgba(37,99,235,0.25);
}

/* bazowy wygląd pastylek języka – trochę większa specyficzność */
.lang-switcher .lang-btn {
  background: #fff;
  border: 1px solid var(--border);
  color: #111;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* === Naprawa: globalny styl aktywnego języka na wszystkich stronach === */
#toolbar .lang-switcher .lang-btn[aria-pressed="true"],
#toolbar .lang-switcher .lang-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: color-mix(in oklab, var(--accent) 80%, white 20%) !important;
  box-shadow: 0 3px 8px rgba(37,99,235,0.25) !important;
  transition: background .2s ease, color .2s ease;
}

/* Dodaj hover/active dla spójności */
#toolbar .lang-switcher .lang-btn:hover {
  background: #f1f5ff;
  border-color: var(--accent);
  color: var(--accent);
}






.file-indicator {
  margin-left: 12px;
  font-size: 0.85rem;
  color: #444;
  background: #f6f6f6;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 3px 8px;
}