/* ─────────────────────────────────────────────────────────────────────────────
   LITON Automatyka — wygląd wspólny dla całego modułu.

   Barwy, promienie i odstępy przepisane 1:1 z panelu sklepu
   (components/admin/login-form.tsx). To ma wyglądać jak jedno oprogramowanie,
   nie jak dwa różne programy jednej firmy.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --granat:       #0a1628;
  --granat-jasny: #1e3a6e;
  --tlo-ciemne:   #060f1e;
  --tlo-glebia:   #040a18;
  --tlo:          #fafbff;
  --karta:        #ffffff;
  --ramka:        #dde3f0;
  --ramka-lekka:  #e8ecf8;
  --tekst:            #0a1628;   /* --primary: nagłówki, przyciski */
  --tekst-podstawowy: #1e2235;   /* --foreground: tekst zwykły */
  --tekst-slaby:  #6b7399;
  --tekst-cichy:  #9ba3bf;
  --niebieski:    #3b5bdb;
  --fiolet:       #6366f1;
  --zielony:      #10b981;
  --zielony-tekst:#059669;
  --czerwony:     #e53e3e;
  --czerwony-tlo: #fff5f5;
  --czerwony-ram: #fed7d7;
  --bursztyn:     #d97706;
}

/* ── podstawa zgodna z panelem sprzedaży ──────────────────────────────────────
   Panel stoi na Tailwindzie, którego warstwa bazowa ustawia rzeczy, jakich
   przeglądarka sama nie robi. Bez ich powtórzenia te same reguły dawały tu
   INNE wymiary: pola były niższe o 5 px, przycisk o 5 px, a wszystko poniżej
   przesunięte. Zmierzone, nie oszacowane.                                    */

*, *::before, *::after {
  box-sizing: border-box;
  /* Tailwind nadaje domyślny kolor krawędzi; bez tego krawędź bierze kolor
     tekstu i wychodzi granatowa zamiast jasnoszarej. */
  border-color: var(--ramka);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--tlo);
  /* ⚡Kolor podstawowy to --foreground panelu (#1e2235), a NIE --primary
     (#0a1628). Ten drugi jest tylko dla nagłówków i przycisków. */
  color: var(--tekst-podstawowy);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* ⚡Wartość BEZ jednostki: każdy element przelicza ją od własnego stopnia
     pisma, dokładnie jak w panelu (pole 14 px daje 21 px interlinii). */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* ⚡Bez tego iPhone powiększa stronę przy dotknięciu pola tekstowego. */
  -webkit-text-size-adjust: 100%;
}

/* Pola i przyciski nie dziedziczą kroju ani interlinii same z siebie. */
input, button, select, textarea { font: inherit; line-height: inherit; }

@keyframes puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@keyframes obrot { to { transform: rotate(360deg); } }

.kreci { animation: obrot .9s linear infinite; }

/* ── znak firmowy ─────────────────────────────────────────────────────────── */

.znak {
  display: flex;
  align-items: center;
  gap: 10px;
}
.znak img { width: 100%; height: auto; }
/* ⚡36 px, promień 9, wypełnienie 5 — zmierzone w panelu sprzedaży. Miałem
   38/10/6 i cały blok treści był przez to wyższy o 2 px, co przesuwało
   wszystko poniżej. */
.znak .kafel {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 5px;
  flex-shrink: 0;
}
.znak .kafel.bialy { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.znak .kafel.ciemny { background: linear-gradient(135deg, var(--granat), var(--granat-jasny)); }
.znak .nazwa { font-size: 17px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.znak .podpis { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; margin-top: 1px; }

/* ── pola i przyciski ─────────────────────────────────────────────────────── */

label.etykieta {
  display: block;
  font-size: 12px; font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  letter-spacing: .01em;
}

input.pole, select.pole, textarea.pole {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #fff;
  border: 1.5px solid var(--ramka);
  color: var(--tekst);
  transition: border-color .2s, box-shadow .2s;
}
input.pole:focus, select.pole:focus, textarea.pole:focus {
  border-color: var(--niebieski);
  box-shadow: 0 0 0 3px rgba(59,91,219,.1);
}

button.glowny {
  padding: 12px 24px;
  border-radius: 9px;
  border: none;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--granat), var(--granat-jasny));
  box-shadow: 0 4px 16px rgba(10,22,40,.22);
  transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}
button.glowny:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(10,22,40,.3); transform: translateY(-1px); }
button.glowny:disabled { background: #93aad8; box-shadow: none; cursor: not-allowed; }

button.drugi {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--ramka);
  background: #fff;
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  color: var(--tekst);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
button.drugi:hover:not(:disabled) { border-color: var(--niebieski); background: #f6f8ff; }
button.drugi:disabled { color: var(--tekst-cichy); cursor: not-allowed; }

/* ── komunikaty ───────────────────────────────────────────────────────────── */

.blad {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--czerwony-tlo);
  border: 1px solid var(--czerwony-ram);
  color: var(--czerwony);
}
.uwaga {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

/* ── kropka obecności ─────────────────────────────────────────────────────── */

.kropka { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.kropka.zywa  { background: var(--zielony); box-shadow: 0 0 8px var(--zielony); animation: puls 2s ease-in-out infinite; }
.kropka.cicha { background: #cbd5e1; }

/* ── karta treści ─────────────────────────────────────────────────────────── */

.plyta {
  background: var(--karta);
  border: 1px solid var(--ramka-lekka);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(10,22,40,.04);
}

.odznaka {
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 20px;
  background: #f1f4fb;
  border: 1px solid var(--ramka);
  color: var(--tekst-cichy);
  white-space: nowrap;
}

/* ⚡Szerokie tabele i dzienniki przewijają się we własnym pudle — inaczej
   cała strona jeździłaby w bok na telefonie. */
.przewijane { overflow-x: auto; }