/* LAMOUR Zwroty — wspólny arkusz stylów
 *
 * KIERUNEK: gęsty back-office. Dużo informacji na ekranie, małe odstępy,
 * liczby i identyfikatory czcionką monospace — mają się skanować w pionie.
 *
 * KOLORY SKLEPU (podane przez Konrada):
 *   grafit  #2B2B2B  tekst
 *   czerń   #161615  nagłówki, przyciski
 *   beż     #E9D0BA  akcent marki
 *   krem    #FAF5F0  tło
 *   szary   #999999  tekst pomocniczy
 *   czerwień #B94A48  błędy
 *
 * JEDNO ODSTĘPSTWO, ŚWIADOME: --pomocniczy to #707070, nie #999999.
 * Szary sklepowy daje na kremowym tle kontrast 2,6:1, a próg czytelności dla
 * drobnego tekstu (WCAG AA) to 4,5:1. Na tym kolorze stoją podpowiedzi pod
 * polami i opisy terminów, więc muszą być czytelne przy sztucznym świetle
 * w magazynie. #999999 zostaje jako --szary-ozdobny do kresek i ramek, gdzie
 * nikt niczego nie czyta.
 *
 * BEŻ #E9D0BA NIGDY POD BIAŁY TEKST — kontrast 1,48:1. Przycisk główny to
 * czerń i biel.
 */

:root {
  --czern:            #161615;
  --grafit:           #2B2B2B;
  --bez:              #E9D0BA;
  --bez-blady:        #F7EFE8;
  --krem:             #FAF5F0;
  --biel:             #FFFFFF;
  --pomocniczy:       #707070;
  --szary-ozdobny:    #999999;
  --linia:            #E6E6E6;
  --czerwien:         #B94A48;
  --ostrzezenie:      #9E6309;
  --zielony:          #2E6B52;

  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --tekst: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Arial, sans-serif;

  --bok: 220px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--tekst);
  font-size: 13px;
  line-height: 1.45;
  color: var(--grafit);
  background: var(--krem);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--czern); font-weight: 600; margin: 0 0 8px; }
h1 { font-size: 18px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }

a { color: var(--czern); }

/* Liczby, numery zgłoszeń, kwoty, terminy — zawsze monospace. */
.mono, .numer, .kwota, .ean, td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------- układ: stała nawigacja boczna ---------------- */

.uklad { display: flex; min-height: 100vh; }

.bok {
  width: var(--bok);
  flex: 0 0 var(--bok);
  background: var(--czern);
  color: var(--biel);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.bok .marka {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.bok .marka b { display: block; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.bok .marka span { display: block; font-size: 11px; color: var(--bez); margin-top: 2px; }

.bok nav { padding: 6px 0; flex: 1; overflow-y: auto; }

.bok a.zakladka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 16px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 13px;
  border-left: 3px solid transparent;
}
.bok a.zakladka:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.bok a.zakladka.wybrana { background: rgba(233, 208, 186, .14); border-left-color: var(--bez); color: #fff; }

.bok .licznik {
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255, 255, 255, .14);
  border-radius: 9px;
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
}
.bok .licznik.pilne { background: var(--czerwien); color: #fff; }

.bok .stopka {
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
}
.bok .stopka b { color: var(--bez); font-weight: 600; }
.bok .stopka button {
  margin-top: 6px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .85);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
}
.bok .stopka button:hover { background: rgba(255, 255, 255, .1); }

.tresc { flex: 1; min-width: 0; padding: 16px 20px 46px; }

.naglowek-strony {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linia);
}
.naglowek-strony .podtytul { color: var(--pomocniczy); font-size: 12px; }

/* ---------------- karty i tabele ---------------- */

.karta {
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

table.gesta { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.gesta th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pomocniczy);
  padding: 6px 8px;
  border-bottom: 1px solid var(--linia);
  background: var(--bez-blady);
  position: sticky;
  top: 0;
}
table.gesta td { padding: 5px 8px; border-bottom: 1px solid var(--linia); }
table.gesta tbody tr:hover { background: var(--bez-blady); }
table.gesta tbody tr.wybrany { background: var(--bez-blady); box-shadow: inset 3px 0 0 var(--czern); }
table.gesta tbody tr.po-terminie { background: #FBF0F0; }
table.gesta tbody tr.po-terminie td.termin { color: var(--czerwien); font-weight: 600; }
table.gesta td.liczba, table.gesta th.liczba { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.pusto { padding: 28px 10px; text-align: center; color: var(--pomocniczy); }

/* ---------------- drobiazgi ---------------- */

.znacznik {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--linia);
  background: var(--bez-blady);
  color: var(--grafit);
}
.znacznik.blad  { background: #FBF0F0; border-color: #E8CFCF; color: var(--czerwien); }
.znacznik.ok    { background: #EFF5F2; border-color: #CFE0D7; color: var(--zielony); }
.znacznik.uwaga { background: #FBF4E8; border-color: #EADCC2; color: var(--ostrzezenie); }

button.glowny {
  background: var(--czern);
  color: var(--biel);
  border: 1px solid var(--czern);
  border-radius: 3px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
button.glowny:hover { background: #000; }
button.glowny:disabled { opacity: .5; cursor: not-allowed; }

button.zwykly {
  background: var(--biel);
  color: var(--grafit);
  border: 1px solid var(--linia);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
button.zwykly:hover { background: var(--bez-blady); }

input[type=text], input[type=password], input[type=date], input[type=email],
input[type=number], input[type=search], select, textarea {
  font-family: var(--tekst);
  font-size: 13px;
  color: var(--grafit);
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: 3px;
  padding: 6px 8px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bez); outline-offset: -1px; }

label.pole { display: block; margin-bottom: 10px; }
label.pole span { display: block; font-size: 11px; color: var(--pomocniczy); margin-bottom: 3px; }

.blad-pola { color: var(--czerwien); font-size: 12px; margin-top: 6px; min-height: 16px; }

/* ---------------- pasek skrótów klawiszowych ---------------- */

.skroty {
  position: fixed;
  left: var(--bok);
  right: 0;
  bottom: 0;
  background: var(--biel);
  border-top: 1px solid var(--linia);
  padding: 5px 20px;
  font-size: 11px;
  color: var(--pomocniczy);
  display: flex;
  gap: 16px;
  z-index: 20;
}
.skroty kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--krem);
  border: 1px solid var(--linia);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 4px;
  color: var(--grafit);
}

/* ---------------- ekran logowania ---------------- */

body.logowanie {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--krem);
}
.pudelko-logowania {
  width: 340px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: 6px;
  overflow: hidden;
}
.pudelko-logowania .pasek {
  background: var(--czern);
  color: var(--biel);
  padding: 16px 20px;
}
.pudelko-logowania .pasek b { display: block; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.pudelko-logowania .pasek span { font-size: 11px; color: var(--bez); }
.pudelko-logowania .srodek { padding: 18px 20px 20px; }

/* ---------------- miniaturki produktów ---------------- */
/* Zdjęcia ładuje PRZEGLĄDARKA wprost z lamour.com.pl — nasz serwer ich nie
   dotyka (AtomStore blokuje jego IP captchą). Brak zdjęcia nie jest błędem:
   onerror zdejmuje obrazek i odsłania zaślepkę. */

.mini {
  width: 40px; height: 54px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--linia);
  background: var(--bez-blady);
  display: block;
  flex: 0 0 auto;
}
.mini.zaslepka { background: var(--bez-blady); }
.mini-duza { width: 56px; height: 76px; }

/* ---------------- panel szczegółów (wysuwany z prawej) ---------------- */

.szuflada {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 92vw;
  background: var(--biel);
  border-left: 1px solid var(--linia);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  overflow-y: auto;
  z-index: 30;
  padding: 14px 18px 60px;
}
.szuflada.schowana { display: none; }
.szuflada h2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.szuflada .zamknij { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--pomocniczy); line-height: 1; }

.para { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--linia); font-size: 12.5px; }
.para b { flex: 0 0 150px; font-weight: 400; color: var(--pomocniczy); }
.para span { flex: 1; }

.pozycja {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--linia);
}
.pozycja .opis { flex: 1; min-width: 0; }
.pozycja .opis b { display: block; font-weight: 500; }
.pozycja .opis small { color: var(--pomocniczy); }
.pozycja.wylaczona { opacity: .45; }

/* ---------------- formularz nowego zwrotu ---------------- */

.wiersz-pozycji {
  display: flex; gap: 12px; align-items: center;
  padding: 9px 10px; border: 1px solid var(--linia); border-radius: 4px;
  margin-bottom: 6px; background: var(--biel);
}
.wiersz-pozycji.wybrana { border-color: var(--czern); background: var(--bez-blady); }
.wiersz-pozycji.zablokowana { opacity: .5; background: var(--krem); }
.wiersz-pozycji .opis { flex: 1; min-width: 0; }
.wiersz-pozycji .opis b { display: block; font-weight: 500; }
.wiersz-pozycji .opis small { color: var(--pomocniczy); display: block; }
.wiersz-pozycji input[type=number] { width: 62px; text-align: center; }
.wiersz-pozycji select { width: 180px; }

.podsumowanie-kwoty { font-family: var(--mono); font-size: 13px; }
.podsumowanie-kwoty div { display: flex; justify-content: space-between; padding: 3px 0; }
.podsumowanie-kwoty .suma { border-top: 1px solid var(--czern); margin-top: 4px; padding-top: 6px; font-weight: 600; font-size: 15px; }

.ostrzezenie {
  background: #FBF4E8; border: 1px solid #EADCC2; color: var(--ostrzezenie);
  border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; font-size: 12.5px;
}
.komunikat-bledu {
  background: #FBF0F0; border: 1px solid #E8CFCF; color: var(--czerwien);
  border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; font-size: 12.5px;
}