/* =====================================================================
   BIZNES-TRADER 2.0 — PANEL
   ---------------------------------------------------------------------
   To jest powierzchnia do PRACY, nie do czytania. Rządzi nią inna zasada
   niż stroną publiczną:

   - skala jest stała (rem), nie płynna. Panel ogląda się na jednym
     ekranie codziennie; tekst, który zmienia rozmiar razem z oknem,
     przeszkadza, gdy szuka się wzrokiem tej samej liczby w tym samym
     miejscu co wczoraj;
   - liczby są jednoszerokościowe (font-variant-numeric: tabular-nums),
     żeby kolumny się zgadzały pionowo i dało się je porównać rzutem oka;
   - gęsto. Wiersz tabeli ma 2.25rem, nie 4rem. Więcej danych na ekran
     to mniej przewijania, a przewijanie to gubienie kontekstu;
   - kolor niesie znaczenie, nie ozdobę: zielony = wzrost, czerwony =
     spadek, złoty = pieniądze partnera. Nic więcej nie jest kolorowe.

   Kroje pisma: systemowe. Panel nie ładuje niczego z zewnątrz — ani
   fontów, ani skryptów. Jeden zewnętrzny adres w panelu to jeden adres,
   który widzi, kiedy pracujesz i nad czym.
   ===================================================================== */

:root {
  --tlo:        #070A0F;
  --panel:      #0D131C;
  --panel2:     #131C28;
  --panel3:     #18222F;
  --linia:      #1C2836;
  --linia-moc:  #2B3B4E;

  --tekst:      #E6EDF5;   /* 16.8:1 na --tlo */
  --tekst2:     #A8BACE;   /* 10.0:1 */
  --przygasly:  #7E93A9;   /*  6.3:1 */

  --akcent:     #4FA8FF;   /* 7.9:1 */
  --akcent-tlo: #10233A;
  --wzrost:     #3FB984;
  --spadek:     #E5534B;
  --zloto:      #C9A227;
  --na-akcencie:#06131F;

  --f-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-dane:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --o1:.25rem; --o2:.5rem; --o3:.75rem; --o4:1rem; --o5:1.5rem; --o6:2rem;
  --promien: 3px;
  --pasek: 15rem;          /* szerokość nawigacji bocznej */

  color-scheme: dark;
  accent-color: var(--akcent);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--f-tekst);
  font-size: 0.875rem;      /* 14 px — gęstość powierzchni roboczej */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Ognisko klawiatury jest częścią projektu, nie awarią. Panel obsługuje się
   tabulatorem szybciej niż myszą — to musi być widać. */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--akcent); color: var(--na-akcencie); }

.pomin {
  position: absolute; left: -9999px;
  background: var(--akcent); color: var(--na-akcencie);
  padding: var(--o2) var(--o4); z-index: 100;
}
.pomin:focus { left: var(--o4); top: var(--o4); }

/* =====================================================================
   UKŁAD
   ===================================================================== */

.szkielet { display: grid; grid-template-columns: var(--pasek) 1fr; min-height: 100vh; }

.bok {
  background: var(--panel);
  border-right: 1px solid var(--linia);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.bok__marka {
  padding: var(--o4);
  border-bottom: 1px solid var(--linia);
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  color: var(--tekst);
}
.bok__marka span { color: var(--akcent); }
.bok__marka small {
  display: block; font-family: var(--f-dane); font-size: 0.65rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--przygasly); font-weight: 400; margin-top: 2px;
}

.bok__menu { padding: var(--o3) 0; flex: 1; }
.bok__grupa {
  font-family: var(--f-dane); font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--przygasly);
  padding: var(--o4) var(--o4) var(--o2);
}
.bok__menu a {
  display: block; padding: var(--o2) var(--o4);
  color: var(--tekst2); border-left: 2px solid transparent;
}
.bok__menu a:hover { background: var(--panel2); color: var(--tekst); text-decoration: none; }
.bok__menu a[aria-current="page"] {
  background: var(--akcent-tlo); color: var(--tekst);
  border-left-color: var(--akcent); font-weight: 500;
}

.bok__stopka { padding: var(--o4); border-top: 1px solid var(--linia); font-size: 0.78rem; }
.bok__kto { color: var(--tekst2); margin: 0 0 var(--o2); }
.bok__kto b { color: var(--tekst); display: block; font-weight: 600; }

.tresc { min-width: 0; padding: var(--o5) var(--o5) var(--o6); }

/* =====================================================================
   GŁOWA STRONY
   ===================================================================== */

.glowa {
  display: flex; flex-wrap: wrap; gap: var(--o4);
  align-items: flex-end; justify-content: space-between;
  padding-bottom: var(--o4); margin-bottom: var(--o5);
  border-bottom: 1px solid var(--linia);
}
.glowa h1 { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.glowa p { margin: var(--o1) 0 0; color: var(--tekst2); font-size: 0.82rem; max-width: 62ch; }

/* Przełącznik zakresu — segmentowany, jak w terminalu */
.zakres { display: flex; border: 1px solid var(--linia-moc); border-radius: var(--promien); overflow: hidden; }
.zakres a {
  padding: var(--o2) var(--o3); font-family: var(--f-dane); font-size: 0.72rem;
  color: var(--tekst2); background: var(--panel); border-right: 1px solid var(--linia-moc);
}
.zakres a:last-child { border-right: 0; }
.zakres a:hover { background: var(--panel2); color: var(--tekst); text-decoration: none; }
.zakres a[aria-current="true"] { background: var(--akcent); color: var(--na-akcencie); font-weight: 600; }

/* =====================================================================
   KOMUNIKATY
   ===================================================================== */

.komunikat {
  padding: var(--o3) var(--o4); border-radius: var(--promien);
  border-left: 3px solid var(--linia-moc); background: var(--panel);
  margin-bottom: var(--o5); font-size: 0.85rem;
}
.komunikat--ok    { border-left-color: var(--wzrost); }
.komunikat--uwaga { border-left-color: var(--zloto); }
.komunikat--blad  { border-left-color: var(--spadek); }
.komunikat ul { margin: var(--o2) 0 0; padding-left: 1.1rem; }

/* =====================================================================
   KAFELKI Z LICZBAMI
   ===================================================================== */

.kafelki {
  display: grid; gap: 1px; background: var(--linia);
  border: 1px solid var(--linia); border-radius: var(--promien);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: var(--o5); overflow: hidden;
}
.kafel { background: var(--panel); padding: var(--o4); }
.kafel__nazwa {
  font-family: var(--f-dane); font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--przygasly); margin: 0 0 var(--o2);
}
.kafel__liczba {
  font-family: var(--f-dane); font-size: 1.55rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin: 0;
  letter-spacing: -0.02em;
}
.kafel__nota { margin: var(--o2) 0 0; font-size: 0.75rem; color: var(--tekst2); }

.delta { font-family: var(--f-dane); font-size: 0.75rem; font-weight: 600; }
.delta--w { color: var(--wzrost); }
.delta--s { color: var(--spadek); }
.delta--n { color: var(--przygasly); }

/* =====================================================================
   PANELE I TABELE
   ===================================================================== */

.karta {
  background: var(--panel); border: 1px solid var(--linia);
  border-radius: var(--promien); margin-bottom: var(--o5);
}
.karta__glowa {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--o4);
  padding: var(--o3) var(--o4); border-bottom: 1px solid var(--linia); background: var(--panel2);
}
.karta__glowa h2 { margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.karta__glowa small { color: var(--przygasly); font-family: var(--f-dane); font-size: 0.7rem; }
.karta__srodek { padding: var(--o4); }

.siatka2 { display: grid; gap: var(--o5); grid-template-columns: repeat(auto-fit, minmax(min(24rem,100%), 1fr)); }

/* Siatka pól formularza. Węższa niż siatka2, bo NIP, kod pocztowy i kwota
   nie potrzebują pola na pół ekranu — a rozciągnięte na całą szerokość
   wyglądają jak pomyłka. Pole na całą szerokość dostaje grid-column:1/-1. */
.pola { display: grid; gap: 0 var(--o5); grid-template-columns: repeat(auto-fit, minmax(min(17rem,100%), 1fr)); }
.pola > div[style*="1/-1"] { grid-column: 1 / -1; }

/* Tabela szersza niż ekran przewija się w poziomie. Żeby na telefonie było
   widać, że jest co przewijać, prawa krawędź gaśnie w tło — bez tego wygląda
   po prostu na uciętą. */
.przewin {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(13,19,28,0)) left / 2rem 100% no-repeat,
    linear-gradient(to left,  var(--panel) 30%, rgba(13,19,28,0)) right / 2rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.4), transparent) left / .6rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.4), transparent) right / .6rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table.dane { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.dane th, table.dane td {
  padding: var(--o2) var(--o3); text-align: left;
  border-bottom: 1px solid var(--linia); white-space: nowrap;
}
table.dane thead th {
  position: sticky; top: 0; background: var(--panel2); z-index: 1;
  font-family: var(--f-dane); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--przygasly); font-weight: 500;
}
table.dane tbody tr:hover { background: var(--panel2); }
table.dane tbody tr:last-child td { border-bottom: 0; }
table.dane .l { text-align: right; font-family: var(--f-dane); font-variant-numeric: tabular-nums; }
table.dane .rosnie { width: 100%; white-space: normal; min-width: 18rem; }
table.dane .nr { color: var(--przygasly); font-family: var(--f-dane); width: 2.5rem; }

/* Słupek w tle komórki — porównanie wielkości bez osobnego wykresu. */
.slupek { position: relative; display: block; }
.slupek::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w, 0%); background: var(--akcent-tlo); border-radius: 2px;
}
.slupek > span { position: relative; }

.pusto { padding: var(--o6) var(--o4); text-align: center; color: var(--przygasly); }
.pusto strong { display: block; color: var(--tekst2); margin-bottom: var(--o2); font-weight: 600; }

/* =====================================================================
   WYKRESY
   ===================================================================== */

.wykres { height: 20rem; width: 100%; }
.wykres--niski { height: 11rem; }
.legenda { display: flex; gap: var(--o4); flex-wrap: wrap; font-size: 0.75rem; color: var(--tekst2); }
.legenda i { display: inline-block; width: .75rem; height: .2rem; vertical-align: middle; margin-right: .35rem; }

/* Rozkład godzinowy — 24 słupki, czysty CSS. Wykres na to szkoda. */
.godziny { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 6rem; }
.godziny div { background: var(--akcent-tlo); border-top: 2px solid var(--akcent); min-height: 2px; }
.godziny-opis {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px;
  font-family: var(--f-dane); font-size: 0.6rem; color: var(--przygasly);
  text-align: center; margin-top: var(--o1);
}

/* =====================================================================
   LISTA OGŁOSZEŃ
   ===================================================================== */

.szukajka { display: flex; gap: var(--o2); flex-wrap: wrap; align-items: center; }
.szukajka input[type=search] { flex: 1 1 18rem; min-width: 0; }
.szukajka select { flex: 0 1 14rem; }
.szukajka input, .szukajka select { width: auto; }

/* Miniatura w wierszu. Stały rozmiar i object-fit — bez tego wiersze
   miałyby różną wysokość i tabela przestałaby się skanować wzrokiem. */
.mini {
  width: 4rem; height: 3rem; object-fit: cover;
  border-radius: 2px; border: 1px solid var(--linia);
  background: var(--panel2);
}
.mini--brak {
  display: grid; place-items: center;
  color: var(--linia-moc); font-family: var(--f-dane); font-size: .8rem;
}

.stronicowanie { display: flex; gap: var(--o1); flex-wrap: wrap; align-items: center; }
.stronicowanie a, .stronicowanie span {
  display: inline-block; padding: var(--o1) var(--o3);
  font-family: var(--f-dane); font-size: .78rem;
  border: 1px solid var(--linia-moc); border-radius: var(--promien);
  color: var(--tekst2);
}
.stronicowanie a:hover { background: var(--panel2); color: var(--tekst); text-decoration: none; }
.stronicowanie a[aria-current="page"] {
  background: var(--akcent); color: var(--na-akcencie);
  border-color: var(--akcent); font-weight: 600;
}
.stronicowanie span { border-color: transparent; }

/* Licznik ofert czekających — przy pozycji w menu. */
.licznik {
  display: inline-block; min-width: 1.25rem; text-align: center;
  margin-left: var(--o2); padding: 0 .3rem;
  font-family: var(--f-dane); font-size: .68rem; font-weight: 600;
  background: var(--zloto); color: #1A1503; border-radius: 999px;
}

/* =====================================================================
   GALERIA W PANELU
   ===================================================================== */

.galeria-panel {
  display: grid; gap: var(--o3); padding: var(--o4);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.zdj { position: relative; }
.zdj img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--linia); border-radius: var(--promien);
  background: var(--panel2);
}
.zdj input[type=text] { margin-top: var(--o2); font-size: .76rem; padding: var(--o1) var(--o2); }
/* Krzyżyk usuwania — na zdjęciu, nie obok listy przycisków.
   Widoczny zawsze, nie tylko po najechaniu: na ekranie dotykowym
   nie ma czegoś takiego jak najechanie. */
.zdj__usun {
  position: absolute; top: var(--o2); right: var(--o2);
  width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
  font: inherit; font-size: 1.1rem; cursor: pointer;
  background: rgba(7,10,15,.82); color: var(--spadek);
  border: 1px solid var(--spadek); border-radius: var(--promien);
}
.zdj__usun:hover { background: var(--spadek); color: #1A0A0A; }

.zdj__pierwsze {
  position: absolute; top: var(--o2); left: var(--o2);
  background: var(--akcent); color: var(--na-akcencie);
  font-family: var(--f-dane); font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 1px var(--o2); border-radius: 2px;
}

/* Usuwanie schowane pod rozwinięciem — nie chcemy, żeby dało się
   je kliknąć przypadkiem obok „Zapisz". */
.usuwanie { border: 1px solid var(--spadek); border-radius: var(--promien); padding: var(--o3); }
.usuwanie summary { cursor: pointer; color: var(--spadek); font-weight: 600; font-size: .85rem; }
.usuwanie[open] summary { margin-bottom: var(--o3); }

/* =====================================================================
   ODZNAKI I PRZYCISKI
   ===================================================================== */

.odznaka {
  display: inline-block; font-family: var(--f-dane); font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px var(--o2); border-radius: 2px; border: 1px solid var(--linia-moc);
  color: var(--tekst2);
}
.odznaka--tak { color: var(--wzrost); border-color: var(--wzrost); }
.odznaka--nie { color: var(--przygasly); }
.odznaka--zloto { color: var(--zloto); border-color: var(--zloto); }
.odznaka--czeka { color: var(--zloto); border-color: var(--zloto); background: #241E08; }

.przycisk {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  padding: var(--o2) var(--o4); border-radius: var(--promien);
  background: var(--akcent); color: var(--na-akcencie); border: 1px solid var(--akcent);
}
.przycisk:hover { background: #6FB8FF; text-decoration: none; }
.przycisk--cichy { background: transparent; color: var(--tekst); border-color: var(--linia-moc); }
.przycisk--cichy:hover { background: var(--panel2); }
.przycisk--groźny { background: transparent; color: var(--spadek); border-color: var(--spadek); }
.przycisk--groźny:hover { background: #2A1414; }
.przycisk--maly { padding: var(--o1) var(--o2); font-size: 0.72rem; font-weight: 500; }

.rzad-akcji { display: flex; gap: var(--o2); flex-wrap: wrap; align-items: center; }

/* =====================================================================
   FORMULARZE
   ===================================================================== */

.pole { margin-bottom: var(--o4); }
.pole > label {
  display: block; font-family: var(--f-dane); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst2);
  margin-bottom: var(--o2);
}
.pole small { display: block; color: var(--przygasly); font-size: 0.75rem; margin-top: var(--o1); }

/* Lista typów musi być pełna. Pole wyszukiwarki (type=search) wypadło
   z niej przy pierwszym pisaniu i renderowało się w domyślnym stylu
   przeglądarki — jasne tło pośrodku ciemnego panelu. */
input[type=text], input[type=search], input[type=url], input[type=email],
input[type=tel], input[type=number], input[type=date], input[type=password],
input[type=file], select, textarea {
  width: 100%; font: inherit; color: var(--tekst);
  background: var(--tlo); border: 1px solid var(--linia-moc);
  border-radius: var(--promien); padding: var(--o2) var(--o3);
}
input[type=file] { padding: var(--o2); font-size: 0.8rem; }
textarea { min-height: 4.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--akcent); }
/* Chrome maluje pola z autouzupełnieniem na własny jasny kolor. Cień
   o promieniu zero to jedyny sposób, żeby to nadpisać. */
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--tlo) inset;
  -webkit-text-fill-color: var(--tekst);
}
input[type=search]::-webkit-search-cancel-button { filter: invert(.7); }
input::placeholder { color: var(--przygasly); }

.pole--przelacznik { display: flex; align-items: flex-start; gap: var(--o3); }
.pole--przelacznik input { width: 1.1rem; height: 1.1rem; margin-top: 2px; flex: none; }
.pole--przelacznik label { text-transform: none; letter-spacing: 0; font-family: var(--f-tekst); font-size: 0.85rem; }

.para { display: grid; gap: var(--o4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.podglad {
  border: 1px dashed var(--linia-moc); border-radius: var(--promien);
  padding: var(--o3); background: var(--tlo); text-align: center;
}
.podglad img { margin: 0 auto; }

/* =====================================================================
   LOGOWANIE
   ===================================================================== */

.brama { min-height: 100vh; display: grid; place-items: center; padding: var(--o5); }
.brama__karta {
  width: 100%; max-width: 22rem; background: var(--panel);
  border: 1px solid var(--linia); border-radius: var(--promien); padding: var(--o5);
}
.brama__marka { text-align: center; margin-bottom: var(--o5); }
.brama__marka b { font-size: 1.05rem; letter-spacing: -0.01em; }
.brama__marka b span { color: var(--akcent); }
.brama__marka small {
  display: block; font-family: var(--f-dane); font-size: 0.65rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--przygasly); margin-top: 2px;
}
.brama .przycisk { width: 100%; text-align: center; }
.brama__nota { margin: var(--o4) 0 0; font-size: 0.72rem; color: var(--przygasly); text-align: center; }

/* =====================================================================
   MAŁE EKRANY
   ---------------------------------------------------------------------
   Panel jest do pracy przy biurku, ale sprawdzenie liczb z telefonu musi
   działać. Nawigacja przenosi się na górę i przewija poziomo.
   ===================================================================== */

@media (max-width: 60rem) {
  .szkielet { grid-template-columns: 1fr; }
  .bok { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linia); }
  .bok__menu { display: flex; overflow-x: auto; padding: 0; }
  .bok__grupa { display: none; }
  .bok__menu a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .bok__menu a[aria-current="page"] { border-left: 0; border-bottom-color: var(--akcent); }
  .bok__stopka { display: flex; justify-content: space-between; align-items: center; gap: var(--o4); }
  .bok__kto { margin: 0; }
  .tresc { padding: var(--o4) var(--o4) var(--o6); }
  .kafel__liczba { font-size: 1.3rem; }
  .wykres { height: 15rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .bok, .zakres, .rzad-akcji { display: none; }
  body { background: #fff; color: #000; }
  .karta { border-color: #999; }
}

/* =====================================================================
   PASEK POSTĘPU IMPORTU
   ===================================================================== */
.postep {
  height: .5rem; background: var(--tlo); border: 1px solid var(--linia);
  border-radius: 999px; overflow: hidden;
}
.postep__pasek {
  height: 100%; background: var(--akcent);
  transition: width .3s ease-out;
}
@media (prefers-reduced-motion: reduce) { .postep__pasek { transition: none; } }

/* ---------------------------------------------------------------
   Gwiazdka wyróżnienia na liście ogłoszeń.
   Przycisk, nie ikonka — wyróżnienie to czynność, nie ozdoba,
   więc ma być klikalne, mieć widoczne skupienie klawiaturą
   i czytelny stan włączony/wyłączony bez patrzenia na kolor.
   --------------------------------------------------------------- */
.gwiazdka{
  background:none; border:0; padding:.15rem .3rem; cursor:pointer;
  font-size:1.15rem; line-height:1; color:var(--przygasly);
  border-radius:4px;
}
.gwiazdka:hover{ color:var(--zloto); }
.gwiazdka--wl{ color:var(--zloto); }
.gwiazdka:focus-visible{ outline:2px solid var(--akcent); outline-offset:1px; }