:root {
  --bg: #f5f6f8;
  --panel-bg: #ffffff;
  --border: #d7dbe0;
  --text: #1f2430;
  --muted: #6b7280;
  --accent: #2563eb;
  --error: #dc2626;
  --warning: #b45309;

  --tok-linetype: #7c3aed;
  --tok-comment: #6b7280;
  --tok-func: #b45309;
  --tok-mask: #0f766e;
  --tok-bracket: #475569;
  --tok-register: #2563eb;
  --tok-register-system: #4f46e5;
  --tok-func-decl: #059669;
  --tok-func-special: #be123c;
  --tok-continuation: #94a3b8;
  --tok-param: #c026d3;
  --tok-array-bracket: #0891b2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

header h1 {
  font-size: 16px;
  margin: 0;
  white-space: nowrap;
}

.app-title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.app-version {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.toolbar-spacer { flex: 1; }

.toolbar button, .file-btn, .status-bar button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.status-bar button { padding: 3px 10px; font-size: 12px; }

.toggle-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.toolbar button:disabled { opacity: .5; cursor: not-allowed; }
.file-btn input[type=file] { display: none; }

#file-name-input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  width: calc(50ch + 14px);
  background: var(--bg);
  color: var(--muted);
  cursor: default;
}

/* Panel sesji online i formularz metadanych w jednym wierszu obok siebie
   (align-items: stretch - oba panele maja wspolna wysokosc i dolna linie) */
.top-row {
  display: flex;
  align-items: stretch;
}

.meta-form {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}

.meta-form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.meta-form label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  gap: 3px;
}

.meta-form input[type=text], .meta-form input:not([type]) {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}

/* Szerokosc pol dopasowana do ich rzeczywistej dlugosci (maxlength) - System i
   Typ dokumentu maja po 2 znaki, Symbol wzorca 8, Opis 30 */
#meta-system, #meta-typ { width: calc(3ch + 14px); }
/* System ma podpowiedzi (list="system-list") - Chromium/Edge rysuja wtedy
   w polu strzalke listy, ktora zabiera ~20px i przy 3ch zostawala widoczna
   tylko jedna litera symbolu (np. "N" zamiast "NA"). */
#meta-system { width: calc(3ch + 36px); }
#meta-symbol { width: calc(10ch + 14px); }
#meta-opis { width: calc(31ch + 14px); }

.meta-form label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  padding-bottom: 6px;
}

#meta-memo-details {
  margin-top: 8px;
  font-size: 12px;
}
#meta-memo-details summary {
  cursor: pointer;
  color: var(--muted);
  user-select: none;
}
#meta-memo textarea, #meta-memo {
  width: 100%;
}
#meta-memo-details textarea#meta-memo {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  resize: none; /* wysokosc zmienia uchwyt .meta-memo-resize pod polem */
  box-sizing: border-box;
  display: block;
}
.meta-memo-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}
/* uchwyt pod opisem - przeciaganie zmienia wysokosc pola (app.js) */
.meta-memo-resize {
  height: 7px;
  cursor: ns-resize;
  touch-action: none;
  border-bottom: 3px double var(--border);
}
.meta-memo-resize:hover,
.meta-memo-resize.dragging {
  border-bottom-color: var(--muted);
}

.meta-info {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

#zawarte-wzorce-details {
  margin-top: 8px;
  font-size: 12px;
}
#zawarte-wzorce-details summary {
  cursor: pointer;
  color: var(--muted);
  user-select: none;
}
.zawarte-wzorce-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-width: 480px;
}
.zawarte-wzorce-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 4px;
  background: var(--panel-bg);
}
.zawarte-wzorce-name {
  flex: 1;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zawarte-wzorce-remove {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
}
.zawarte-wzorce-remove:hover { color: #fff; background: var(--error); }
.zawarte-wzorce-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
#zawarte-wzorce-input {
  flex: 1;
  max-width: 300px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.zawarte-wzorce-add button, .file-btn.small {
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.file-btn.small input[type=file] { display: none; }

/* "display" tylko razem z :not([hidden]) - inaczej reguła z #id wygrywa
   z wbudowanym "[hidden] { display: none }" i pusty edytor był widoczny
   przed wczytaniem pliku (patrz komentarz przy .modal-overlay) */
#main-area:not([hidden]) {
  display: flex;
}
#main-area {
  flex: 1;
  min-height: 0;
}

#editor-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#editor-container .CodeMirror {
  height: 100%;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
}

/* Szersze paski przewijania edytora - min. 5 mm (20px CSS ~ 5,3 mm).
   Szerokość musi być taka sama na .CodeMirror-scroll (z niego CodeMirror
   mierzy nativeBarWidth) i na widocznych paskach .CodeMirror-v/hscrollbar,
   inaczej paski rozjadą się z treścią. Działa w Chrome/Edge (::-webkit-
   scrollbar); Firefox nie pozwala ustawić szerokości w pikselach i zostaje
   przy pasku systemowym. */
#editor-container .CodeMirror-scroll::-webkit-scrollbar,
#editor-container .CodeMirror-vscrollbar::-webkit-scrollbar,
#editor-container .CodeMirror-hscrollbar::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}
#editor-container .CodeMirror-vscrollbar::-webkit-scrollbar-track,
#editor-container .CodeMirror-hscrollbar::-webkit-scrollbar-track {
  background: #eef0f3;
}
#editor-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
#editor-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
  background-color: #b3bac4;
  border: 4px solid #eef0f3;
  border-radius: 10px;
  min-height: 40px;
}
#editor-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
#editor-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #8a929e;
}
#editor-container .CodeMirror-scrollbar-filler {
  background: #eef0f3;
}

#side-panel {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--panel-bg);
  overflow-y: auto;
  padding: 10px;
}

.panel { margin-bottom: 18px; }
.side-btn {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.side-btn:disabled { opacity: .5; cursor: not-allowed; }
.side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.side-btn-icon { flex-shrink: 0; color: var(--accent); }
.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 8px;
}

#problems-list, .help-list { list-style: none; margin: 0; padding: 0; }

#problems-list li {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 4px;
  cursor: pointer;
  border-left: 3px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
#problems-list li:hover { background: #f1f3f5; }
#problems-list li.error { border-left-color: var(--error); color: var(--error); }
#problems-list li.warning { border-left-color: var(--warning); color: var(--warning); }
/* problemy linii, w ktorej stoi kursor (ten sam odcien co .tr-active-line) */
#problems-list li.biezaca-linia { background: rgba(37, 99, 235, .12); outline: 1px solid rgba(37, 99, 235, .35); }
#problems-list .problem-line { font-weight: 600; margin-right: 4px; }
#problems-list .problem-text { flex: 1; }
#problems-list .empty { color: var(--muted); font-style: italic; cursor: default; }
#problems-list .empty:hover { background: none; }

#problems-list .copy-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
#problems-list .copy-btn:hover { background: rgba(0,0,0,.08); color: var(--text); }
#problems-list .copy-btn.copied { color: #16a34a; }

.help-list li { font-size: 12px; padding: 4px 0; color: var(--muted); }
.help-list kbd {
  background: #eef0f3;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
}

/* Kolorowanie skladni wzorca */
.cm-tr-linetype { color: var(--tok-linetype); font-weight: 700; }
.cm-tr-comment { color: var(--tok-comment); font-style: italic; }
.cm-tr-func { color: var(--tok-func); font-weight: 600; }
.cm-tr-mask { color: var(--tok-mask); background: rgba(15,118,110,.08); }
.cm-tr-mask-end { color: var(--tok-mask); }
/* Maska ş...ş nieznana w katalogu pol biezacego systemu (literowka) albo
   nieprawidlowa dla tej linii/rodzaju dokumentu - patrz Lint.findMaskProblems()
   i updateInvalidMaskHighlight() w app.js. markText dodaje te klase OBOK
   tokenow trybu (.cm-tr-mask/.cm-tr-mask-end) - !important, zeby zawsze
   wygralo z teleistym tlem zwyklej maski niezaleznie od kolejnosci klas na
   wygenerowanym <span>. */
.cm-tr-mask-invalid {
  background: var(--error) !important;
  color: #fff !important;
}
.cm-tr-bracket { color: var(--tok-bracket); font-weight: 700; }
.cm-tr-semi { color: var(--tok-bracket); }
.cm-tr-op { color: var(--tok-bracket); font-weight: 700; }
/* deklaracja rejestru: ţNazwa={...} - odrozniona od zwyklych funkcji */
.cm-tr-register-decl { color: var(--tok-register); font-weight: 700; text-decoration: underline dotted; }
/* uzycie (odczyt) juz zadeklarowanego rejestru - dokladane dynamicznie przez markText w app.js */
.cm-tr-register-use { color: var(--tok-register); font-style: italic; }
/* rejestr systemowy (ţWersja, ţFirma... - TrExtPrint::DefRegister(), patrz
   funkcje.json "typ":"rejestr_systemowy") - podobny odcien do rejestru
   wlasnego autora (niebieski), ale wyrazniej ciemniejszy/fioletowy, zeby
   odroznic "gotowy, wbudowany" rejestr od rejestru zadeklarowanego w pliku.
   Nie kursywa (w odroznieniu od cm-tr-register-use) - nie wymaga deklaracji,
   wiec nie ma tu "odczytu czegos zapisanego wczesniej w tym pliku" */
.cm-tr-register-system { color: var(--tok-register-system); font-weight: 600; }
/* deklaracja wlasnej funkcji: ţNazwa~{...} */
.cm-tr-func-decl { color: var(--tok-func-decl); font-weight: 700; text-decoration: underline dotted; }
/* uzycie (wywolanie) juz zadeklarowanej wlasnej funkcji - dokladane dynamicznie przez markText w app.js */
.cm-tr-func-use { color: var(--tok-func-decl); font-style: italic; }
/* ţTR_MEM - zarezerwowana specjalna tabela, wyrozniona kolorystycznie */
.cm-tr-func-special { color: var(--tok-func-special); font-weight: 700; }
/* ţ~ na poczatku linii - znacznik kontynuacji poprzedniej, niedokonczonej linii */
.cm-tr-continuation { color: var(--tok-continuation); font-weight: 700; }
/* %1, %2, ... - parametry przekazywane do wlasnej funkcji */
.cm-tr-param { color: var(--tok-param); font-weight: 700; }
/* [ ] - dostep do tabeli/tablicy, np. ţNazwa[klucz] */
.cm-tr-array-bracket { color: var(--tok-array-bracket); font-weight: 700; }
/* nazwa tabeli/tablicy przed [ ] - ta sama rodzina kolorow co nawiasy */
.cm-tr-array-name { color: var(--tok-array-bracket); font-weight: 600; }

/* Znaki biale (spacja/tabulator/koniec linii) - domyslnie niewidoczne,
   pokazywane po wlaczeniu przelacznika "Pokaz znaki biale" (klasa na
   .CodeMirror, patrz toggleWhitespace() w app.js). Spacje sa prawdziwym
   tokenem trybu wzorzec-trawers (patrz wzorzec-mode.js) - dzieki temu ich
   fragmentacje na osobne <span> robi sam CodeMirror w swoim bezpiecznym
   mechanizmie budowania linii (tak jak od zawsze robi to dla tabulatorow,
   klasa cm-tab), zamiast recznej ingerencji w DOM po wyrenderowaniu, ktora
   psula pozycjonowanie kursora/zaznaczenia. Znacznik konca linii "¶" to
   czysty CSS ::after, tez bez dokladania wlasnych wezlow do DOM.
   UWAGA: CodeMirror sam scala sasiadujace tokeny o IDENTYCZNYM stylu w JEDEN
   <span> (np. trzy kolejne tokeny "tr-ws-space" moga wyladowac jako jeden
   <span class="cm-tr-ws-space"> z tekstem "   ") - dlatego kropka NIE moze
   byc pojedynczym wycentrowanym ::before (dawaloby to jedna kropke na caly,
   polaczony ciag spacji, a nie jedna na kazda spacje). Zamiast tego uzywamy
   powtarzalnego tla (radial-gradient kafelkowany co 1ch) - dziala poprawnie
   niezaleznie od tego, ile spacji CodeMirror polaczyl w jeden span. */
.CodeMirror .cm-tab { position: relative; }
.cm-tr-ws-space {
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 1ch 100%;
}
.CodeMirror .cm-tab::before, .CodeMirror-line::after {
  visibility: hidden;
  color: var(--muted);
  opacity: .55;
  pointer-events: none;
}
.CodeMirror .cm-tab::before {
  content: "→";
  position: absolute;
  left: 1px;
  font-size: 85%;
}
.CodeMirror-line::after {
  content: "¶";
  margin-left: 1px;
  font-size: 85%;
}
.CodeMirror.tr-show-whitespace .cm-tr-ws-space {
  background-image: radial-gradient(circle, rgba(107, 114, 128, .55) .8px, transparent 1.3px);
}
.CodeMirror.tr-show-whitespace .cm-tab::before,
.CodeMirror.tr-show-whitespace .CodeMirror-line::after {
  visibility: visible;
}

/* Podswietlenie linii, w ktorej stoi kursor */
.CodeMirror .tr-active-line { background: rgba(37, 99, 235, .06); }

/* Tryb nadpisywania (OVR/NAD) uzywa wbudowanej klasy CodeMirror "cm-fat-cursor"
   (patrz overwriteToggle w app.js) zeby kursor mial pelna szerokosc znaku, ale
   ta klasa domyslnie tez wylacza rysowanie zaznaczenia (::selection) - u nas
   zaznaczenie ma dzialac normalnie, wiec przywracamy jego kolor */
.CodeMirror.cm-fat-cursor .CodeMirror-line::selection,
.CodeMirror.cm-fat-cursor .CodeMirror-line > span::selection,
.CodeMirror.cm-fat-cursor .CodeMirror-line > span > span::selection,
.CodeMirror.cm-fat-cursor .CodeMirror-line::-moz-selection,
.CodeMirror.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.CodeMirror.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
  background: #d7d4f0;
}

/* Pasek statusu na dole (wiersz/kolumna, tryb Insert/Overwrite, przelacznik znakow bialych) */
.status-bar:not([hidden]) {
  display: flex;
}
.status-bar {
  align-items: center;
  gap: 16px;
  padding: 5px 16px;
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.status-spacer { flex: 1; }
/* Pasek statusu jest zawsze widoczny i przyklejony do dołu okna (margin-top:
   auto w kolumnie flex body); elementy dotyczące wzorca pokazuje app.js
   (openModel) - display tylko z :not([hidden]), patrz .modal-overlay */
.status-bar { margin-top: auto; }
.status-editor:not([hidden]) { display: inline-flex; align-items: center; gap: 16px; }
.status-links { display: inline-flex; gap: 14px; }
.status-links a { color: var(--muted); }
.status-links a:hover { color: var(--accent); }
.status-notice { color: #15803d; font-weight: 600; }
.font-size-ctl { display: inline-flex; align-items: center; gap: 6px; }
#font-size-value { min-width: 3.5em; text-align: center; }
.status-mode {
  min-width: 2.5em;
  text-align: center;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: .03em;
}
.status-mode.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Info "czy wzorzec zostal zmieniony" w pasku statusu (patrz isDirty() w app.js) */
.status-dirty { font-weight: 600; }
.status-dirty.dirty { color: var(--warning); }

/* Gutter z sygnalizacja bledow/ostrzezen przy numerze linii */
.tr-lint-gutter { width: 10px; }
.tr-lint-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  margin-left: 2px;
}
.tr-lint-marker.error { background: var(--error); }
.tr-lint-marker.warning { background: var(--warning); }

/* Podpowiedzi (show-hint) - wszystko w jednej linii, z przycieciem (...) gdy za dlugie */
.CodeMirror-hints {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  min-width: 320px;
  max-width: 640px;
}
.CodeMirror-hint {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 6px;
}
.tr-hint-name { font-weight: 600; font-size: 13px; color: var(--text); }
.tr-hint-desc { font-size: 12px; color: #4b5563; }
.tr-hint-id { font-size: 11px; color: var(--muted); }
.tr-hint-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--tok-register);
  border: 1px solid var(--tok-register);
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 2px;
}
.tr-hint-tag-func { color: var(--tok-func-decl); border-color: var(--tok-func-decl); }
.tr-hint-tag-register-system { color: var(--tok-register-system); border-color: var(--tok-register-system); }
/* na podswietlonej (aktywnej) pozycji tlo jest niebieskie (#08f, patrz show-hint.css)
   - szary/przygaszony tekst trzeba tam podmienic, bo jest nieczytelny */
li.CodeMirror-hint-active .tr-hint-name,
li.CodeMirror-hint-active .tr-hint-desc,
li.CodeMirror-hint-active .tr-hint-id { color: #fff; }
li.CodeMirror-hint-active .tr-hint-tag { color: #fff; border-color: #fff; }
li.tr-hint-info { color: var(--muted); font-style: italic; }

/* Dymek z opisem funkcji po najechaniu kursorem w edytorze */
.tr-hover-tooltip {
  position: fixed;
  z-index: 50;
  background: #1f2430;
  color: #f5f6f8;
  border-radius: 5px;
  padding: 6px 9px;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 12px;
  max-width: 420px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  pointer-events: none;
}
.tr-hover-tooltip .tr-hover-name { font-weight: 600; font-family: Consolas, "Courier New", monospace; margin-bottom: 2px; }
.tr-hover-tooltip .tr-hover-tag { color: #a5b4fc; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.tr-hover-tooltip .tr-hover-desc { color: #d1d5db; }
.tr-hover-tooltip .tr-hover-example { color: #9ca3af; font-family: Consolas, "Courier New", monospace; margin-top: 3px; }

/* Modal podgladu surowego XML */
/* UWAGA: "display" MUSI byc w regule polaczonej z ":not([hidden])" - sama
   klasa .modal-overlay ma taka sama specyficznosc jak wbudowana reguła
   przegladarki "[hidden] { display: none }" i przy rownej specyficznosci
   wygrywalaby reguła autora, przez co modal byłby klikalny/widoczny mimo
   atrybutu hidden (niewidoczny wizualnie przez tlo, ale przechwytywal kliki) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,20,30,.45);
  z-index: 100;
}
.modal-overlay:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--panel-bg);
  border-radius: 6px;
  width: min(900px, 92vw);
  height: min(720px, 88vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 14px; margin: 0; }
.modal-header-actions { display: flex; gap: 8px; }
.modal-header-actions button {
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
/* Zamkniecie okna jako sam krzyzyk (bez ramki i napisu "Zamknij") */
.modal-header-actions button.modal-close-x {
  padding: 2px 6px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.modal-header-actions button.modal-close-x:hover { color: var(--text); background: var(--bg); }
#raw-xml-content {
  flex: 1;
  margin: 12px 16px 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  resize: none;
  white-space: pre;
}

/* Okno "Pokaz zmiany" (side-by-side diff wzgledem stanu z wczytania pliku,
   CodeMirror.MergeView - patrz openDiffModal w app.js) - szersze niz
   domyslne modal-box; przesuwane za naglowek i rozciagane za dowolna
   krawedz/rog (makeModalMovableResizable w app.js) */
.diff-box {
  position: relative;
  width: min(1100px, 94vw);
  overflow: hidden;
}
.diff-box .modal-header { cursor: move; user-select: none; }
.diff-container {
  flex: 1;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow: auto;
}
.diff-container .CodeMirror-merge { height: 100%; }
.diff-container .CodeMirror-merge .CodeMirror {
  height: 100%;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
}

/* Okno "Wczytaj przyklad" (lista wzorcow z ftp.tres.pl/wzorce/tr5i6, z
   data/przyklady.json) - ta sama konwencja co okno listy funkcji: mozna
   recznie zmieniac rozmiarem, filtr uzywa juz istniejacego stylu
   .funclist-filter-wrap/.funclist-filter-clear */
.przyklady-box {
  position: relative;
  width: min(760px, 92vw);
  overflow: hidden;
}
.przyklady-box .modal-header { cursor: move; user-select: none; }

/* Okno przesuwane za naglowek i rozciagane za dowolna krawedz/rog - paski
   uchwytow dokladane przez makeModalMovableResizable() w app.js */
.modal-resize-handle { position: absolute; z-index: 2; }
.modal-resize-n, .modal-resize-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.modal-resize-e, .modal-resize-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.modal-resize-n { top: 0; }
.modal-resize-s { bottom: 0; }
.modal-resize-e { right: 0; }
.modal-resize-w { left: 0; }
.modal-resize-ne, .modal-resize-nw, .modal-resize-se, .modal-resize-sw { width: 12px; height: 12px; }
.modal-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.modal-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.modal-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.modal-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
/* Filtry pod wierszem Szukaj: System (RadioButton, 1 z N) i Rodzaj dokumentu
   (checkboxy, M z N) - oba wyliczone z parsowania nazw plikow "SS_RR_...",
   patrz renderPrzykladySystemy()/renderPrzykladyRodzaje() w app.js.
   Panel pokazuje/ukrywa przycisk [System/Rodzaj] obok pola Szukaj
   (atrybut hidden, patrz toggle w init() w app.js). */
.przyklady-facets { border-bottom: 1px solid var(--border); }
/* Przelacznik panelu filtrow: wcisniety = panel widoczny; wyrozniony
   kolorem (.active), gdy wybrano jakis System albo Rodzaj dokumentu */
.przyklady-facets-btn {
  margin-left: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.przyklady-facets-btn[aria-pressed="true"] { background: var(--bg); color: var(--text); }
.przyklady-facets-btn:hover { border-color: #aab2bd; }
.przyklady-facets-btn.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
  font-weight: 600;
}
.przyklady-facet-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 16px;
}
/* delikatnie inne tlo dla kazdego z dwoch paneli, zeby je odroznic od siebie
   i od reszty okna */
.przyklady-facet-group-system { background: rgba(37, 99, 235, .05); }
.przyklady-facet-group-rodzaj { background: rgba(15, 118, 110, .06); }
.przyklady-facet-label {
  flex-shrink: 0;
  width: 110px;
  padding-top: 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.przyklady-facet-options { flex: 1; }
.przyklady-facet-option {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
/* Oba panele: zawsze wszystkie opcje naraz (bez ukrywania w scrollu), w
   wyrownanych kolumnach (CSS grid, nie flex-wrap - dzieki temu opcje
   naprawde ustawiaja sie w siatce, a nie tylko "spadaja" do nastepnego
   wiersza w losowym miejscu) */
#przyklady-systemy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 2px 10px;
}
#przyklady-rodzaje {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0 8px;
}
#przyklady-rodzaje .przyklady-facet-option {
  font-size: 11px;
}
/* Pole "Szukaj" pod panelem filtrow, wysrodkowane */
.przyklady-search {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
  background: rgba(124, 58, 237, .05);
  border-bottom: 1px solid var(--border);
}
.przyklady-search .funclist-filter-wrap { display: flex; width: min(420px, 100%); }
#przyklady-filter {
  flex: 1;
  padding: 7px 26px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 15px;
}
.przyklady-content {
  flex: 1;
  min-height: 0;
  overflow-y: scroll; /* suwak stale widoczny, takze gdy lista sie miesci */
  padding: 8px 16px 8px;
}
/* Szerszy suwak listy (ok. 1 cm) - latwiej go chwycic mysza */
.przyklady-content::-webkit-scrollbar { width: 38px; }
.przyklady-content::-webkit-scrollbar-track { background: var(--bg); }
.przyklady-content::-webkit-scrollbar-thumb {
  background: #c3c9d2;
  border: 6px solid var(--bg);
  border-radius: 19px;
  min-height: 60px;
}
.przyklady-content::-webkit-scrollbar-thumb:hover { background: #9aa3b0; }
/* Pasek statusu na dole okna - liczba wzorcow; oddziela liste od krawedzi */
.przyklady-statusbar {
  flex-shrink: 0;
  min-height: 26px;
  padding: 5px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  border-radius: 0 0 6px 6px;
}
.przyklady-status { color: var(--muted); font-style: italic; font-size: 13px; }
.przyklady-error { color: var(--error); font-style: normal; }
.przyklady-list { list-style: none; margin: 0; padding: 0; }
.przyklady-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.przyklady-list li:hover { background: var(--bg); }
.przyklady-item-main { flex: 1; min-width: 0; }
.przyklady-item-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.przyklady-item-name {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.przyklady-item-symbol {
  flex-shrink: 0;
  color: #b45309;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.przyklady-item-opis {
  margin-top: 1px;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.przyklady-item-meta {
  flex-shrink: 0;
  max-width: 30%;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.przyklady-item-load {
  flex-shrink: 0;
  padding: 2px 9px;
  border: 1px solid #c7d8f5;
  background: #eaf1fd;
  color: #1e4fb8;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.przyklady-item-load:hover { background: #d4e3fb; border-color: #9fbdee; }

/* Male okienko "Zapisz jako..." - w odroznieniu od pozostalych modali,
   wysokosc dopasowana do tresci, a nie do min(720px, 88vh) */
.save-as-box { width: min(480px, 92vw); height: auto; }
.save-as-body { padding: 16px; }
.save-as-body label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
#save-as-filename {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}
.save-as-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.save-as-actions button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.save-as-actions button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Okno listy funkcji - mozna je recznie zmieniac rozmiarem (uchwyt w rogu),
   dlatego modal-overlay musi dac mu align-items/justify-content: center, a
   samo pudelko ma resize:both + min-width/min-height, zeby nie dalo sie go
   zmniejszyc ponizej uzytecznego rozmiaru */
.funclist-box {
  resize: both;
  overflow: hidden;
  min-width: 560px;
  min-height: 360px;
}
.funclist-filter-wrap { position: relative; display: inline-flex; }
#funclist-filter {
  width: 220px;
  padding: 6px 22px 6px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}
.funclist-filter-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  padding: 4px;
  border-radius: 3px;
}
.funclist-filter-clear:hover { color: var(--text); background: var(--bg); }
.funclist-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* Drzewo kategorii po lewej - zawsze widoczne, "Wszystkie" na gorze, reszta
   w kolejnosci z data/funkcje_grupy.json (latwo edytowalny plik) */
.funclist-categories {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 8px 0;
}
.funclist-cat-item {
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.funclist-cat-item:hover { background: var(--bg); }
.funclist-cat-item.active { background: var(--accent); color: #fff; }
.funclist-cat-item.empty { color: var(--muted); }
.funclist-cat-item.empty:not(.active) { opacity: .5; }

.funclist-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 8px 16px 16px;
}
.funclist-empty { color: var(--muted); font-style: italic; font-size: 13px; }

/* Pojedyncza funkcja - <details>, zeby "Wstaw" bylo osobna akcja od
   rozwiniecia pelnego opisu (klikniecie wiersza/trojkata rozwija, przycisk
   "Wstaw" wstawia funkcje do wzorca i zamyka cale okno) */
.funclist-item { font-size: 13px; }
.funclist-item > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  list-style-position: outside;
  min-width: 0; /* pozwala dzieciom ponizej naprawde sie skurczyc (ellipsis) */
}
.funclist-item > summary:hover { background: var(--bg); }
.funclist-item.not-insertable > summary { font-style: italic; color: var(--muted); }
/* Nazwa/skladnia moze byc dluga (np. ţWstawWydruk{idProces;[p1];[p2];[p3];[...]})
   - musi sie dac skurczyc i uciac wielokropkiem, inaczej wypycha przycisk
   "Wstaw" poza widoczny obszar okna. Pelna, nieucieta tresc jest i tak widoczna
   po rozwinieciu (funclist-item-detail). max-width trzyma nazwe w ryzach, zeby
   przy krotkich nazwach opis (funclist-item-desc) mial gdzie sie pokazac */
.funclist-item-name {
  color: var(--tok-func);
  font-family: Consolas, "Courier New", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
.funclist-item-name-register-system { color: var(--tok-register-system); }
.funclist-item-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--tok-register-system);
  border: 1px solid var(--tok-register-system);
  border-radius: 3px;
  padding: 1px 5px;
}
.funclist-item-desc {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.funclist-item-insert {
  flex-shrink: 0;
  padding: 2px 9px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.funclist-item-insert:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.funclist-item-detail {
  margin: 2px 6px 10px 22px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 4px;
  font-size: 12px;
}
.funclist-detail-opis { margin: 0 0 6px; }
.funclist-detail-params { margin: 0 0 6px; padding-left: 18px; }
.funclist-detail-example {
  font-family: Consolas, "Courier New", monospace;
  color: var(--muted);
}

.funclist-detail-uwagi { margin: 6px 0 0; color: var(--warning); }