/* ============================================================
   Panel Energynat: warstwa wspolna
   ============================================================
   Ten arkusz jest wspolny dla portalu i dla narzedzi z repo drobiazgi.
   Zawiera tokeny (kolory, font, promienie), rame strony (paski, stopka)
   oraz podstawowe elementy: przyciski, pola, tabele, plakietki.

   Rzeczy specyficzne dla portalu (kafelki, wyszukiwarka, menu boczne)
   siedza w portal.css i narzedzia ich nie potrzebuja.

   Kolory, font i haslo pochodza z Brandbook Energynat 2026R.pdf.
   Jezyk wizualny z makiet XD sklepu B2B. Jeden wariant jasny.

   NARZEDZIA PODPINAJA TEN PLIK TAK:
     <link rel="stylesheet" href="../wspolne/podstawa.css">
   Ta sama sciezka dziala lokalnie (drobiazgi/wspolne/) i po wdrozeniu
   (/narzedzia/wspolne/), dlatego nie uzywamy sciezek bezwzglednych.
   ============================================================ */

/* ------------------------------------------------------------
   Font hostowany u nas, bez odpytywania obcych serwerow.
   Source Sans 3 to font zmienny: jeden plik zawiera wszystkie grubosci,
   dlatego wystarczaja dwa pliki (podzbiory latin i latin-ext) zamiast osmiu,
   a font-weight podaje zakres 300-700. Podzbior latin-ext jest obowiazkowy,
   bo zawiera polskie znaki diakrytyczne.
   ------------------------------------------------------------ */

/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonty/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonty/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   Tokeny. Narzedzie nie definiuje wlasnych kolorow ani kroju,
   tylko siega po te zmienne.
   ------------------------------------------------------------ */

:root {
  /* paleta z brandbooka */
  --zolty:          #F1B70F;
  --pomaranczowy:   #F4A10A;
  --ceglany:        #F1862D;
  --limonka:        #94C22C;
  --zielony:        #73A02C;
  --zielony-ciemny: #65852B;
  --lazur:          #56D0FF;
  --blekitny:       #03ACDF;
  --niebieski:      #0080BF;
  --grafit:         #172E37;

  /* kolory spolek, zgodnie ze schematami organizacyjnymi */
  --spolka-trade:     var(--ceglany);
  --spolka-solutions: var(--zielony);
  --spolka-obrot:     var(--blekitny);

  /* role kolorow */
  --tlo:          #FFFFFF;
  --tlo-jasne:    #F4F6F7;   /* wypelnienie pol i wierszy naglowka tabel */
  --obramowanie:  #E1E6E8;
  --linia:        #EDF0F1;
  --tekst:        var(--grafit);
  --tekst-cichy:  #61777F;
  --tekst-jasny:  #8A9BA2;
  --akcent:       var(--ceglany);
  --akcent-ciemny:#D9701A;

  /* stany, przydatne w narzedziach liczacych i walidujacych */
  --blad:         #C0392B;
  --ostrzezenie:  var(--pomaranczowy);
  --sukces:       var(--zielony);

  --promien:      10px;
  --promien-maly: 6px;
  --szerokosc:    1180px;

  --font: 'Source Sans 3', 'Source Sans Pro', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-liczby: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;

  color-scheme: light;
}

/* ------------------------------------------------------------
   Podstawa dokumentu
   ------------------------------------------------------------ */

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.tresc {
  width: 100%;
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 { letter-spacing: -.015em; }

/* Liczby w tabelach i wynikach czyta sie lepiej w kroju o stalej szerokosci.
   Narzedzia licza, wiec to nalezy do warstwy wspolnej, a nie do kazdego z osobna. */
.liczba {
  font-family: var(--font-liczby);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Rama strony: pasek pomocniczy
   ------------------------------------------------------------ */

.pasek-pomocniczy {
  border-bottom: 1px solid var(--linia);
  font-size: .82rem;
}

.pasek-pomocniczy .tresc {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 46px;
  flex-wrap: wrap;
}

.pasek-pomocniczy nav {
  display: flex;
  gap: 1.4rem;
  font-weight: 600;
}

.pasek-pomocniczy a {
  text-decoration: none;
  color: var(--tekst-cichy);
}

.pasek-pomocniczy a:hover { color: var(--akcent); }

.pasek-pomocniczy .wyrozniony { color: var(--akcent); }

.pasek-pomocniczy .uzytkownik {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  color: var(--tekst-cichy);
}

.awatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grafit);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------
   Rama strony: granatowy pasek nawigacji ze znakiem
   ------------------------------------------------------------ */

.pasek-glowny {
  background: var(--grafit);
  color: #fff;
}

.pasek-glowny .tresc {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 64px;
  flex-wrap: wrap;
}

/* Logotyp w wariancie jasnym pochodzi ze strony grupy energynat.pl.
   Odstep obok niego pelni role pola ochronnego, wiec nie zmniejszac go
   bez sprawdzenia zasad w brandbooku. */
.znak {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
  white-space: nowrap;
}

.znak-logo {
  display: block;
  height: 27px;
  width: auto;
}

.znak-kreska {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, .28);
}

.znak-podpis {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #D7E0E3;
}

@media (max-width: 520px) {
  .znak { gap: .8rem; }
  .znak-logo { height: 23px; }
  .znak-podpis { font-size: .92rem; }
}

.pasek-glowny nav {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
  font-size: .92rem;
  font-weight: 600;
}

.pasek-glowny nav a {
  text-decoration: none;
  color: #E8EDEF;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}

.pasek-glowny nav a:hover {
  color: #fff;
  border-bottom-color: var(--akcent);
}

/* ------------------------------------------------------------
   Przyciski
   ------------------------------------------------------------ */

.przycisk {
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  padding: .7rem 1.6rem;
  color: #fff;
  background: var(--akcent);
  border: 1px solid var(--akcent);
  border-radius: var(--promien-maly);
  cursor: pointer;
}

.przycisk:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }

.przycisk:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.przycisk.obwodka {
  color: var(--akcent);
  background: transparent;
}

.przycisk.obwodka:hover { color: #fff; background: var(--akcent); }

/* ------------------------------------------------------------
   Pola formularza. Narzedzia zbieraja dane, wiec to warstwa wspolna.
   ------------------------------------------------------------ */

input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
  font: inherit;
  font-size: .96rem;
  padding: .55rem .8rem;
  color: var(--tekst);
  background: var(--tlo);
  border: 1px solid var(--obramowanie);
  border-radius: var(--promien-maly);
}

input::placeholder, textarea::placeholder { color: var(--tekst-jasny); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 3px rgba(241, 134, 45, .16);
}

label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--tekst-cichy);
}

/* ------------------------------------------------------------
   Sekcje, naglowki tresci, drobne teksty
   ------------------------------------------------------------ */

.sekcja { padding: 2rem 0 .5rem; }

.sekcja > h2 {
  margin: 0 0 1.1rem;
  font-size: 1.32rem;
  font-weight: 700;
}

.naglowek-tresci {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.adnotacja {
  margin: 1rem 0 0;
  font-size: .86rem;
  color: var(--tekst-jasny);
}

.pusto {
  margin: 1.5rem 0;
  padding: 2rem;
  text-align: center;
  color: var(--tekst-cichy);
  border: 1px dashed var(--obramowanie);
  border-radius: var(--promien);
}

.powrot {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tekst-cichy);
  text-decoration: none;
}

.powrot:hover { color: var(--akcent); }

/* Tekst widoczny tylko dla czytnikow ekranu. */
.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Pasek liczb: mala etykieta nad pogrubiona wartoscia
   ------------------------------------------------------------ */

.pasek-liczb {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.75rem 0 .5rem;
  border: 1px solid var(--obramowanie);
  border-radius: var(--promien);
  overflow: hidden;
}

.pasek-liczb div {
  flex: 1 1 160px;
  padding: .9rem 1.15rem;
  border-right: 1px solid var(--linia);
}

.pasek-liczb div:last-child { border-right: none; }

.pasek-liczb dt,
.pasek-liczb .etykieta {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-jasny);
}

.pasek-liczb .wartosc {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ------------------------------------------------------------
   Plakietki: przynaleznosc, stan, ostrzezenie
   ------------------------------------------------------------ */

.plakietki {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

.plakietki .plakietka { margin-top: 0; }

.plakietka {
  align-self: flex-start;
  margin-top: .6rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid currentColor;
  color: var(--tekst-jasny);
}

.plakietka.trade     { color: var(--spolka-trade); }
.plakietka.solutions { color: var(--spolka-solutions); }
.plakietka.obrot     { color: var(--spolka-obrot); }
.plakietka.grupa     { color: var(--tekst-cichy); }

/* Beta: narzedzie dziala, ale nie zostalo jeszcze sprawdzone. Wypelniona,
   a nie obrysowana, zeby byla mocniejsza niz plakietka przynaleznosci. */
.plakietka.beta {
  color: var(--grafit);
  background: var(--zolty);
  border-color: var(--zolty);
}

/* ------------------------------------------------------------
   Tabela danych
   ------------------------------------------------------------ */

.karta-tabeli {
  border: 1px solid var(--obramowanie);
  border-radius: var(--promien);
  overflow-x: auto;
}

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  min-width: 640px;
}

table.tabela th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-jasny);
  padding: .8rem 1.1rem;
  background: var(--tlo-jasne);
  border-bottom: 1px solid var(--obramowanie);
  white-space: nowrap;
}

table.tabela td {
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--linia);
  vertical-align: middle;
}

table.tabela tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover { background: var(--tlo-jasne); }
table.tabela tr.ukryty { display: none; }

table.tabela a { color: var(--niebieski); text-decoration: none; }
table.tabela a:hover { text-decoration: underline; }

/* Kolumny liczbowe wyrownane do prawej i w kroju o stalej szerokosci. */
table.tabela .liczba { text-align: right; }

/* ------------------------------------------------------------
   Komunikaty
   ------------------------------------------------------------ */

.komunikat {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-radius: var(--promien-maly);
  border-left: 3px solid var(--tekst-jasny);
  background: var(--tlo-jasne);
  font-size: .92rem;
}

.komunikat.blad        { border-left-color: var(--blad); }
.komunikat.ostrzezenie { border-left-color: var(--ostrzezenie); }
.komunikat.sukces      { border-left-color: var(--sukces); }

/* ------------------------------------------------------------
   Stopka
   ------------------------------------------------------------ */

.stopka {
  margin-top: 3rem;
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid var(--linia);
  font-size: .85rem;
  color: var(--tekst-jasny);
}

.stopka .haslo {
  margin: 0 0 .45rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--tekst);
}

.stopka p { margin: 0 0 .2rem; }