/* Sala Bankietowa Maksymilianowo – motyw czerń · złoto · biel */
:root {
  --czern: #121110;
  --czern-2: #1c1a17;
  --czern-3: #2a2723;
  --zloto: #c9a24b;
  --zloto-jasne: #e3c77e;
  --zloto-ciemne: #9c7a2c;
  --zloto-tlo: #f6efdc;
  --bialy: #ffffff;
  --kremowy: #faf8f3;
  --linia: #e8e2d4;
  --tekst: #1f1d1a;
  --tekst-2: #6b655b;
  --czerwony: #b3412e;
  --czerwony-tlo: #fbebe7;
  --zielony: #3f7a4a;
  --zielony-tlo: #e8f3ea;
  --niebieski: #3b5f86;
  --niebieski-tlo: #e8eff7;
  --cien: 0 1px 2px rgba(18, 17, 16, .05), 0 4px 16px rgba(18, 17, 16, .06);
  --promien: 14px;
  --szeryf: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --bezszeryf: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --szer-boczny: 268px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--bezszeryf);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tekst);
  background: var(--kremowy);
}
body.tlo-ciemne {
  background: radial-gradient(ellipse at top, #2a2418 0%, var(--czern) 60%);
  min-height: 100vh;
}
h1, h2 { margin: 0; font-weight: 600; }
a { color: var(--zloto-ciemne); }
.ukryte { display: none !important; }

.ikona {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.pasek-srodowiska {
  background: repeating-linear-gradient(135deg, var(--zloto) 0 12px, var(--zloto-jasne) 12px 24px);
  color: var(--czern);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: .02em;
}

/* ---------- znak firmowy ---------- */
.znak { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bialy); }
.znak-monogram {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--zloto);
  color: var(--zloto);
  font-family: var(--szeryf);
  font-size: 22px; font-weight: 600;
  background: linear-gradient(160deg, #2b2519, var(--czern));
}
.znak-monogram.duzy { width: 76px; height: 76px; font-size: 42px; border-width: 2px; }
.znak-tekst { display: flex; flex-direction: column; line-height: 1.1; }
.znak-tekst strong { font-family: var(--szeryf); font-size: 21px; letter-spacing: .01em; color: var(--bialy); }
.znak-tekst small { color: var(--zloto); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; margin-top: 3px; }
.znak-maly strong { font-family: var(--szeryf); font-size: 19px; }
.znak-maly .znak-monogram { width: 32px; height: 32px; font-size: 18px; }

/* ---------- układ ---------- */
.uklad { display: flex; min-height: 100vh; }
.boczny {
  width: var(--szer-boczny);
  flex: none;
  background: var(--czern);
  color: #d9d4ca;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid #2c2822;
}
.boczny-gora { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 18px; border-bottom: 1px solid #2c2822; }
.menu { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.menu-poz {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: #d9d4ca; text-decoration: none; font-size: 14.5px;
  border: 1px solid transparent;
}
.menu-poz:hover { background: var(--czern-2); color: var(--bialy); }
.menu-poz.aktywny {
  background: linear-gradient(90deg, rgba(201, 162, 75, .22), rgba(201, 162, 75, .06));
  border-color: rgba(201, 162, 75, .35);
  color: var(--zloto-jasne);
}
.menu-poz.aktywny .ikona { color: var(--zloto); }
.menu-poz.wylaczony { color: #7d776c; cursor: default; }
.menu-poz.wylaczony:hover { background: none; color: #7d776c; }
.menu-poz span { flex: 1; min-width: 0; }
.etap {
  margin-left: auto; white-space: nowrap; flex: none; font-style: normal; font-size: 10.5px;
  border: 1px solid #3d3830; border-radius: 99px; padding: 1px 7px; color: #9a9387;
}
.boczny-dol { padding: 16px 20px 22px; border-top: 1px solid #2c2822; display: flex; flex-direction: column; gap: 10px; }
.kto { display: flex; align-items: center; gap: 10px; }
.kto span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.kto strong { color: var(--bialy); font-size: 14px; font-weight: 600; }
.kto small { color: var(--zloto); font-size: 12px; }
.awatar {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--zloto); color: var(--czern);
  font-weight: 700; font-size: 14px;
}
.awatar.duzy { width: 44px; height: 44px; font-size: 18px; }
.link-drobny { color: #b8b1a4; font-size: 13px; text-decoration: none; }
.link-drobny:hover { color: var(--zloto-jasne); }
.przycisk-wyloguj {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: transparent; color: var(--zloto-jasne);
  border: 1px solid #3d3830; border-radius: 10px; padding: 9px; font: inherit; font-size: 14px; cursor: pointer;
}
.przycisk-wyloguj:hover { border-color: var(--zloto); }

.glowna { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tresc { padding: 32px 40px 48px; max-width: 1280px; width: 100%; }

.gorny {
  position: sticky; top: 0; z-index: 5;
  background: var(--czern); color: var(--bialy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--zloto-ciemne);
}
.przycisk-ikona {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; color: var(--zloto-jasne); cursor: pointer;
}
.przycisk-ikona .ikona { width: 24px; height: 24px; }
.zaslona { display: none; }
.tylko-mobilne { display: none; }

/* ---------- nagłówek strony ---------- */
.naglowek-strony { margin-bottom: 20px; }
.naglowek-strony h1 { font-family: var(--szeryf); font-size: 36px; line-height: 1.1; letter-spacing: -.005em; }
.data-dzis { margin: 0 0 6px; color: var(--zloto-ciemne); font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.podtytul { margin: 6px 0 0; color: var(--tekst-2); }

.ostrzezenie-przyklad {
  border: 1px dashed var(--zloto);
  background: var(--zloto-tlo);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 18px;
  font-size: 13.5px; color: #5c4a1f;
}

/* ---------- wyszukiwanie i filtry ---------- */
.narzedzia { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.szukaj {
  display: flex; align-items: center; gap: 8px;
  background: var(--bialy); border: 1px solid var(--linia); border-radius: 12px;
  padding: 0 12px; min-width: 280px; flex: 0 1 360px; color: var(--tekst-2);
}
.szukaj:focus-within { border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201, 162, 75, .18); }
.szukaj input { border: 0; outline: 0; background: transparent; font: inherit; padding: 11px 0; width: 100%; color: var(--tekst); }
.filtry { display: flex; gap: 6px; flex-wrap: wrap; }
.filtr {
  font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--bialy); color: var(--tekst);
  border: 1px solid var(--linia); border-radius: 99px; padding: 7px 14px;
}
.filtr:hover { border-color: var(--zloto); }
.filtr.aktywny { background: var(--czern); color: var(--zloto-jasne); border-color: var(--czern); }

/* ---------- kafelki ---------- */
.siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.kafel {
  background: var(--bialy);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  padding: 18px 18px 14px;
  position: relative; overflow: hidden;
}
.kafel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--zloto-ciemne), var(--zloto-jasne), var(--zloto-ciemne));
}
.kafel-gora { display: flex; align-items: center; gap: 10px; }
.kafel-gora h2 { font-size: 15px; font-weight: 600; flex: 1; }
.kafel-ikona {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--czern); color: var(--zloto);
}
.kafel-ikona .ikona { width: 18px; height: 18px; }
.znacznik-przyklad {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  color: var(--zloto-ciemne); border: 1px dashed var(--zloto); border-radius: 99px; padding: 2px 8px;
}
.kafel-liczba { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 10px; }
.kafel-liczba strong { font-family: var(--szeryf); font-size: 44px; line-height: 1; font-weight: 600; color: var(--czern); }
.kafel-liczba span { color: var(--tekst-2); font-size: 13.5px; }
.pasek { width: 100%; height: 8px; margin: 0 0 10px; display: block; }
.pasek::-webkit-meter-bar { background: var(--zloto-tlo); border: 0; border-radius: 99px; height: 8px; }
.pasek::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--zloto-ciemne), var(--zloto)); border-radius: 99px; }
.pasek::-moz-meter-bar { background: linear-gradient(90deg, var(--zloto-ciemne), var(--zloto)); border-radius: 99px; }
.kafel-lista { list-style: none; margin: 0; padding: 0; }
.kafel-lista li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid #f1ece1; font-size: 14px;
}
.poz-glowny { font-weight: 500; }
.poz-pomocniczy { color: var(--tekst-2); font-size: 13px; grid-column: 1; }
.kafel-lista .status { grid-column: 2; grid-row: 1 / span 2; }
.kafel-zadania .kafel-lista li { grid-template-columns: 18px 1fr; }
.kafel-zadania .kafel-lista li::before {
  content: ""; width: 14px; height: 14px; border: 1.5px solid var(--zloto); border-radius: 4px;
}

.status {
  display: inline-block; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: 99px; background: #f1ece1; color: #5c554a;
}
.status-potwierdzona, .status-gotowe { background: var(--zielony-tlo); color: var(--zielony); }
.status-rezerwacja-wstępna, .status-oczekuje, .status-przyjęte { background: var(--niebieski-tlo); color: var(--niebieski); }
.status-oferta, .status-w-przygotowaniu, .status-do-zapłaty { background: var(--zloto-tlo); color: #7a5d1c; }
.status-niski-stan, .status-zaległe, .status-anulowana { background: var(--czerwony-tlo); color: var(--czerwony); }
.status-rancho { background: #ece6d8; color: #5a4a2a; }

.brak-wynikow { color: var(--tekst-2); text-align: center; padding: 30px; }

/* ---------- karty, formularze, przyciski ---------- */
.karta { background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: var(--cien); padding: 20px; }
.formularz { display: flex; flex-direction: column; gap: 14px; }
.formularz label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--tekst); }
input:not([type=checkbox]):not([type=search]), select {
  font: inherit; font-weight: 400; font-size: 16px;
  padding: 11px 12px; border-radius: 10px; border: 1px solid #d9d2c2; background: var(--bialy); color: var(--tekst);
}
input:focus, select:focus { outline: none; border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); }
.waski { max-width: 440px; }
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  border-radius: 10px; padding: 11px 18px; border: 1px solid var(--czern); background: var(--czern); color: var(--zloto-jasne);
}
.przycisk-zloty { background: linear-gradient(180deg, var(--zloto-jasne), var(--zloto)); border-color: var(--zloto-ciemne); color: var(--czern); }
.przycisk-zloty:hover { background: var(--zloto); }
.przycisk-maly { padding: 7px 12px; font-size: 13px; background: var(--bialy); color: var(--tekst); border-color: #d9d2c2; }
.przycisk-maly:hover { border-color: var(--zloto); }
.przycisk-ostrzezenie { color: var(--czerwony); }
.drobny { margin: 0; color: var(--tekst-2); font-size: 12.5px; font-weight: 400; }
.komunikat { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; }
.komunikat-ok { background: var(--zielony-tlo); color: #2d5a35; border: 1px solid #c4dfc8; }
.komunikat-blad { background: var(--czerwony-tlo); color: #8a2f20; border: 1px solid #efc7bd; }

/* ---------- logowanie ---------- */
.logowanie { min-height: calc(100vh - 22px); display: grid; place-items: center; padding: 24px 16px; }
.logowanie-karta {
  width: 100%; max-width: 400px;
  background: var(--bialy); border-radius: 18px; padding: 34px 28px 28px;
  border-top: 4px solid var(--zloto);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.logowanie-znak { text-align: center; margin-bottom: 26px; }
.logowanie-znak h1 { font-family: var(--szeryf); font-size: 34px; margin-top: 14px; color: var(--czern); }
.logowanie-znak p { margin: 4px 0 0; color: var(--zloto-ciemne); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; }
.logowanie .przycisk { width: 100%; padding: 13px; margin-top: 4px; }
.logowanie .drobny { text-align: center; }

.blad-karta { max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 34px 26px; }
.blad-kod { font-family: var(--szeryf); font-size: 64px; color: var(--zloto); line-height: 1; }
.blad-karta h1 { font-family: var(--szeryf); font-size: 28px; }
.blad-karta p { color: var(--tekst-2); margin: 0 0 8px; }

/* ---------- użytkownicy ---------- */
.rozwijana { margin-bottom: 18px; padding: 0; }
.rozwijana summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--zloto-ciemne); list-style: none; }
.rozwijana summary::-webkit-details-marker { display: none; }
.rozwijana[open] summary { border-bottom: 1px solid var(--linia); }
.siatka-formularza { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 18px 20px 20px; align-items: end; }
.lista-kart { display: grid; gap: 14px; }
.uzytkownik.nieaktywny { opacity: .6; }
.uzytkownik-gora { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.uzytkownik-gora > div:nth-child(2) { flex: 1; min-width: 180px; }
.uzytkownik h2 { font-size: 16px; }
.znaczniki { display: flex; gap: 6px; flex-wrap: wrap; }
.uprawnienia-lista { margin: 12px 0; }
.akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid #f1ece1; padding-top: 12px; }
.akcja-rola { display: flex; gap: 6px; }
.akcja-rola select { padding: 6px 10px; font-size: 13.5px; }

/* ---------- tabela ---------- */
.tabela-przewijana { overflow-x: auto; padding: 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); background: #fbf9f4; }
.tabela th, .tabela td { padding: 11px 16px; border-bottom: 1px solid #f1ece1; white-space: nowrap; }

/* ---------- telefon ---------- */
@media (max-width: 900px) {
  .tylko-mobilne { display: flex; }
  .gorny.tylko-mobilne { display: flex; }
  .boczny {
    position: fixed; z-index: 20; left: 0; top: 0; height: 100%;
    transform: translateX(-100%); transition: transform .22s ease;
    width: min(84vw, var(--szer-boczny));
  }
  #menu-przelacznik:checked ~ .boczny { transform: none; box-shadow: 10px 0 40px rgba(0, 0, 0, .35); }
  #menu-przelacznik:checked ~ .zaslona { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(18, 17, 16, .5); }
  .tresc { padding: 20px 16px 40px; }
  .naglowek-strony h1 { font-size: 29px; }
  .narzedzia { display: grid; grid-template-columns: minmax(0, 1fr); }
  .szukaj { min-width: 0; flex: 1 1 auto; }
  .filtry { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .filtry::-webkit-scrollbar { display: none; }
  .filtr { flex: none; }
  .siatka { grid-template-columns: 1fr; gap: 14px; }
  .kafel-liczba strong { font-size: 40px; }
}

/* ===================== Etap 2: rezerwacje, kalendarz, klienci ===================== */
.naglowek-z-akcja { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.przyciski { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.powrot { display: inline-flex; align-items: center; gap: 4px; color: var(--tekst-2); text-decoration: none; font-size: 14px; margin-bottom: 10px; }
.powrot:hover { color: var(--zloto-ciemne); }
.odstep { margin-top: 18px; }
.odstep-dol { margin-bottom: 18px; }
.karta + .karta, .kolumny + .karta, .karta + .kolumny { margin-top: 18px; }
.karta-tytul { font-size: 15px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.karta-tytul a { color: inherit; text-decoration: none; }
.podsekcja { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--zloto-ciemne); margin: 20px 0 10px; }
.pusto { color: var(--tekst-2); padding: 14px 4px; margin: 0; }
.pusto-kafel { color: var(--tekst-2); display: block !important; }
.kafel-gora h2 a, .poz-glowny a { color: inherit; text-decoration: none; }
.kafel-gora h2 a:hover, .poz-glowny a:hover { color: var(--zloto-ciemne); }

.siatka-pol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.siatka-pol label, .klient-istniejacy label, .filtry-formularz label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.pelna { grid-column: 1 / -1; }
.dwa-pola { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 11px 12px; border-radius: 10px; border: 1px solid #d9d2c2; resize: vertical; color: var(--tekst); }
textarea:focus { outline: none; border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); }
input[type=date], input[type=time] { min-height: 46px; }

.lista-wierszy { display: flex; flex-direction: column; }
.lista-wierszy.karta { padding: 6px 16px; }
.wiersz { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid #f1ece1; text-decoration: none; color: inherit; }
.lista-wierszy > .wiersz:first-child, .lista-wierszy > :first-child .wiersz { border-top: 0; }
a.wiersz:hover { background: #fcfaf5; }
.wiersz-glowny { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wiersz-glowny strong { font-weight: 600; }
.wiersz-glowny small { color: var(--tekst-2); font-size: 13px; }
.wiersz-strzalka { color: #c4bcab; }
.data-kafel { flex: none; width: 52px; text-align: center; border-radius: 10px; background: var(--czern); color: var(--zloto-jasne); padding: 6px 0; line-height: 1.1; }
.data-kafel strong { display: block; font-family: var(--szeryf); font-size: 22px; }
.data-kafel small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #cfc6b3; }

.filtry-formularz { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.filtry-formularz select { min-height: 44px; }
.filtry a.filtr { text-decoration: none; display: inline-block; }
.link-pomocniczy { color: var(--zloto-ciemne); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }

.kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.dane { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; }
.dane dt { color: var(--tekst-2); font-size: 13px; }
.dane dd { margin: 0; }
.wielowierszowe { white-space: pre-line; }

.status-duzy { font-size: 13px; padding: 6px 12px; }
.status-zapytanie { background: #efece6; color: #5c554a; }
.status-wstepna { background: var(--niebieski-tlo); color: var(--niebieski); }
.status-zrealizowana { background: #ece6d8; color: #5a4a2a; }
.statusy-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; margin-bottom: 18px; }
.zgoda { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 600; }
.zgoda input { width: 20px; height: 20px; accent-color: var(--zloto-ciemne); }
.alarm { border-color: #efc7bd; background: var(--czerwony-tlo); margin-bottom: 18px; }
.alarm .karta-tytul { color: var(--czerwony); }
.alarm ul { margin: 0 0 12px; padding-left: 18px; }

.rozliczenie { width: 100%; border-collapse: collapse; font-size: 14px; }
.rozliczenie td { padding: 7px 0; border-bottom: 1px solid #f1ece1; }
.rozliczenie td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.rozliczenie .suma td { font-weight: 700; }
.rozliczenie .suma-glowna td { font-size: 17px; color: var(--zloto-ciemne); border-bottom: 2px solid var(--zloto); }

.wiersz-platnosc { flex-wrap: wrap; }
.akcje-platnosci { display: flex; gap: 6px; flex-wrap: wrap; }
.akcje-platnosci select { padding: 6px 8px; font-size: 13.5px; }
.dodaj-platnosc { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1ece1; align-items: end; }

.historia { list-style: none; padding: 0; margin: 0; }
.historia li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid #f1ece1; font-size: 14px; }
.historia li:first-child { border-top: 0; }

/* formularz rezerwacji */
.formularz-rezerwacji .karta { margin-bottom: 18px; }
.przelacznik-segment { display: inline-flex; background: #f3efe6; border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.przelacznik-segment label { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 14px; cursor: pointer; }
.przelacznik-segment input { accent-color: var(--zloto-ciemne); }
.przelacznik-segment label:has(input:checked) { background: var(--bialy); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.klient-nowy { display: none; }
.klient-wybor:has(#tryb-nowy:checked) .klient-nowy { display: grid; }
.klient-wybor:has(#tryb-nowy:checked) .klient-istniejacy { display: none; }
.klient-istniejacy select { width: 100%; }
.uslugi { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.usluga-wiersz { display: grid; grid-template-columns: 1fr 80px 120px 40px; gap: 8px; align-items: center; }
.usluga-wiersz .przycisk-ikona { color: var(--tekst-2); }
.podsumowanie-na-zywo { margin-top: 16px; background: var(--czern); color: #e9e3d6; border-radius: 12px; padding: 14px 16px; display: none; }
.podsumowanie-na-zywo.widoczne { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 14px; }
.podsumowanie-na-zywo strong { color: var(--zloto-jasne); text-align: right; }
.podsumowanie-na-zywo .duza { font-size: 18px; }
.pasek-zapisu { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--kremowy) 30%); display: flex; justify-content: flex-end; }
.pasek-zapisu .przycisk { min-width: 220px; }
#podpowiedz-kolizji.kolizja { color: var(--czerwony); font-weight: 600; }
#podpowiedz-kolizji.wolne { color: var(--zielony); font-weight: 600; }

/* kalendarz */
.kal-narzedzia { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.kal-nawigacja { display: flex; gap: 6px; }
.kal-nawigacja .przycisk { min-height: 38px; }
.kal-miesiac { padding: 0; overflow: hidden; }
.kal-dni-tyg, .kal-tydzien { display: grid; grid-template-columns: repeat(7, 1fr); }
.kal-dni-tyg span { padding: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); background: #fbf9f4; border-bottom: 1px solid var(--linia); }
.kal-dzien { min-height: 118px; border-right: 1px solid #f1ece1; border-bottom: 1px solid #f1ece1; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kal-dzien:nth-child(7n) { border-right: 0; }
.kal-dzien.inny-miesiac { background: #fcfbf8; }
.kal-dzien.inny-miesiac .kal-numer { color: #b9b2a5; }
.kal-numer { font-size: 13px; font-weight: 600; color: var(--tekst); text-decoration: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.kal-dzien.dzisiaj .kal-numer { background: var(--czern); color: var(--zloto-jasne); }
.kal-wiecej { font-size: 12px; color: var(--zloto-ciemne); text-decoration: none; padding-left: 4px; }
.wydarzenie { display: flex; flex-direction: column; text-decoration: none; color: var(--tekst); background: var(--zloto-tlo); border-left: 3px solid var(--zloto); border-radius: 6px; padding: 4px 7px; font-size: 12px; line-height: 1.3; min-width: 0; }
.wydarzenie:hover { filter: brightness(.97); }
.w-godz { font-weight: 700; }
.w-nazwa, .w-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-info { color: var(--tekst-2); }
.status-ramka-potwierdzona { background: var(--zielony-tlo); border-color: var(--zielony); }
.status-ramka-wstepna { background: var(--niebieski-tlo); border-color: var(--niebieski); }
.status-ramka-zapytanie { background: #f1eee8; border-color: #a49c8d; }
.status-ramka-anulowana { background: #f5f2ee; border-color: #c9c1b2; text-decoration: line-through; color: var(--tekst-2); }
.status-ramka-zrealizowana { background: #f1ece1; border-color: #8a7a55; }
.kal-tydzien-lista { display: grid; gap: 12px; }
.kal-dzien-karta { margin: 0 !important; }
.kal-dzien-karta.dzisiaj { border-color: var(--zloto); }
.kal-dzien-karta .wydarzenie, .karta > .wydarzenie { font-size: 14px; padding: 10px 12px; margin-bottom: 8px; }
.kal-lista-mobilna { display: none; margin-top: 18px; }

/* cennik */
.wiersz-rozwijany summary { list-style: none; cursor: pointer; }
.wiersz-rozwijany summary::-webkit-details-marker { display: none; }
.formularz-wewn { padding: 6px 0 16px; align-items: end; }
.rozwijana-wewn { margin-top: 12px; border-top: 1px solid #f1ece1; padding-top: 12px; }
.rozwijana-wewn summary { cursor: pointer; font-weight: 600; color: var(--zloto-ciemne); list-style: none; padding: 4px 0 10px; }
.rozwijana-wewn summary::-webkit-details-marker { display: none; }

/* płatności */
.liczniki { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.licznik { display: flex; flex-direction: column; gap: 4px; }
.licznik span { color: var(--tekst-2); font-size: 13px; }
.licznik strong { font-family: var(--szeryf); font-size: 30px; }
.licznik-alarm strong { color: var(--czerwony); }

@media (max-width: 900px) {
  .kal-miesiac { display: none; }
  .kal-lista-mobilna { display: block; }
  .naglowek-z-akcja .przycisk-zloty { width: 100%; }
  .usluga-wiersz { grid-template-columns: 1fr 64px 96px 36px; gap: 6px; }
  .pasek-zapisu .przycisk { width: 100%; }
  .dane { grid-template-columns: 1fr; gap: 2px; }
  .dane dd { margin-bottom: 8px; }
  .filtry-formularz > * { flex: 1 1 140px; }
  .filtry-formularz .szukaj { flex-basis: 100%; }
}
.lista-kart > .karta + .karta, .kal-tydzien-lista > .karta + .karta { margin-top: 0; }
.siatka-pol input, .siatka-pol select, .siatka-pol textarea { width: 100%; min-width: 0; }
.dwa-pola > label { min-width: 0; }
.kolumny > .karta { margin-top: 0; }
.kal-tydzien-lista { grid-template-columns: minmax(0, 1fr); }

/* ===================== Etap 2A: konta, 2FA ===================== */
.licznik-kont { display: grid; gap: 10px; margin-bottom: 18px; }
.licznik-kont > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.licznik-kont strong { font-family: var(--szeryf); font-size: 38px; line-height: 1; }
.licznik-kont.prawie strong { color: var(--zloto-ciemne); }
.licznik-kont.pelny strong { color: var(--czerwony); }
.filtr .liczba { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: #f1ece1; color: var(--tekst-2); font-size: 12px; }
.filtr.aktywny .liczba { background: rgba(227, 199, 126, .2); color: var(--zloto-jasne); }
.awatar-klient { background: var(--czern); color: var(--zloto-jasne); border: 1px solid var(--zloto); }
.stan-aktywne { background: var(--zielony-tlo); color: var(--zielony); }
.stan-zaplanowane { background: var(--niebieski-tlo); color: var(--niebieski); }
.stan-wygasle { background: #efece6; color: #6b655b; }
.stan-dezaktywowane { background: #ece9e3; color: #8a8378; }
.stan-zablokowane { background: var(--czerwony-tlo); color: var(--czerwony); }
.przycisk-niebezpieczny { background: var(--czerwony); border-color: var(--czerwony); color: #fff; }
.przycisk-tekst { background: none; border: 0; padding: 6px 0; font: inherit; cursor: pointer; }
.przycisk.wylaczony { opacity: .5; pointer-events: none; }
.akcje-konta .akcje { border-top: 0; padding-top: 0; }
.zakres { border: 1px solid var(--linia); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.zakres legend { font-weight: 600; font-size: 13.5px; padding: 0 6px; }
.logowanie-karta.szeroka { max-width: 460px; }
.kroki { padding-left: 20px; margin: 0 0 16px; display: grid; gap: 12px; font-size: 14.5px; }
.kroki .przycisk { margin: 6px 0; }
.klucz { display: block; margin: 8px 0 4px; padding: 10px 12px; background: var(--kremowy); border: 1px dashed var(--zloto); border-radius: 10px;
  font-size: 15px; letter-spacing: .06em; word-break: break-all; user-select: all; }
.pole-kodu { font-size: 24px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.anuluj { text-align: center; margin-top: 10px; }
.kody { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kody code { display: block; padding: 10px; text-align: center; background: var(--kremowy); border: 1px solid var(--linia); border-radius: 8px; font-size: 15px; }
@media print { .boczny, .gorny, .pasek-srodowiska, .przyciski { display: none !important; } }
.filtry-formularz label.szukaj { flex-direction: row; align-items: center; font-weight: 400; }
.przycisk:disabled, button:disabled { opacity: .45; cursor: not-allowed; }
.metoda { border: 1px solid var(--linia); border-radius: 14px; padding: 16px; margin-bottom: 14px; position: relative; }
.metoda h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.metoda summary { list-style: none; cursor: pointer; }
.metoda summary::-webkit-details-marker { display: none; }
.metoda summary h2 { margin: 0; color: var(--zloto-ciemne); }
.metoda[open] summary { margin-bottom: 12px; }
.metoda-zalecana { border-color: var(--zloto); background: linear-gradient(180deg, var(--zloto-tlo), #fff 70%); }
.metoda-zalecana p { margin: 0 0 12px; }
.znacznik-zalecane { position: absolute; top: -10px; right: 14px; background: var(--czern); color: var(--zloto-jasne);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
.pelna-szer { width: 100%; padding: 14px; }
.wysrodkowane { text-align: center; margin: 8px 0 14px; }

/* ===================== Etap 2B: plan sali ===================== */
.plan-rysunek svg { width: 100%; height: auto; display: block; }
.s-sala { fill: #fbf8f1; stroke: var(--linia); stroke-width: 6; }
.s-parkiet { fill: #f3ead6; stroke: var(--zloto); stroke-width: 4; stroke-dasharray: 18 14; }
.s-opis { fill: var(--tekst-2); font: 36px var(--bezszeryf); text-anchor: middle; }
.s-duzy { fill: var(--zloto-ciemne); font-size: 64px; letter-spacing: 8px; }
.s-stol { fill: #fff; stroke: var(--zloto-ciemne); stroke-width: 5; }
.s-para { fill: #fff6df; stroke-width: 7; }
.s-krzeslo { fill: #fff; stroke: var(--zloto-ciemne); stroke-width: 4; }
.s-krzeslo.zajete { fill: var(--zloto); }
.s-numer-tlo { fill: var(--czern); }
.s-numer { fill: var(--zloto-jasne); font: 700 38px var(--bezszeryf); text-anchor: middle; }
.s-nazwa { fill: var(--czern); font: 700 40px var(--bezszeryf); text-anchor: middle; }
.plan-rysunek a:hover .s-stol { fill: var(--zloto-tlo); }
.pdf-panel { border-color: var(--zloto); }
.pdf-panel .siatka-pol { align-items: end; }
.wybor-ukladu { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.karta-wyboru { display: flex !important; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 1px solid var(--linia);
  border-radius: 12px; padding: 12px; cursor: pointer; font-weight: 600; }
.karta-wyboru:has(input:checked) { border-color: var(--zloto); background: var(--zloto-tlo); }
.karta-wyboru input { accent-color: var(--zloto-ciemne); }
.schemat { width: 70px; height: 48px; border-radius: 6px; background: #fbf8f1; border: 1px solid var(--linia); position: relative; }
.schemat::before, .schemat::after { content: ""; position: absolute; background: var(--zloto); border-radius: 2px; }
.schemat-U::before { left: 16px; right: 16px; top: 5px; height: 5px; box-shadow: none; }
.schemat-U::after { left: 8px; top: 14px; width: 5px; height: 28px; box-shadow: 49px 0 0 var(--zloto); }
.schemat-L::before { left: 16px; right: 16px; top: 5px; height: 5px; }
.schemat-L::after { left: 8px; top: 14px; width: 5px; height: 28px; }
.schemat-okragle::before { left: 26px; top: 4px; width: 18px; height: 5px; }
.schemat-okragle::after { left: 6px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 18px 0 var(--zloto), 46px 0 0 var(--zloto), 46px 18px 0 var(--zloto), 23px 18px 0 var(--zloto); }
.uklad-form:has(input[value=okragle]:checked) .pole-prostokatne { display: none; }
.uklad-form:has(input[value=U]:checked) .pole-okragle, .uklad-form:has(input[value=L]:checked) .pole-okragle { display: none; }
.plan-kolumny { margin-top: 18px; }
.stol-lista { border-top: 1px solid #f1ece1; padding: 10px 0; scroll-margin-top: 80px; }
.stol-lista:first-of-type { border-top: 0; }
.stol-lista h3 { font-size: 14.5px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.stol-lista h3 small { color: var(--tekst-2); font-weight: 400; margin-left: auto; }
.stol-lista:target { background: var(--zloto-tlo); border-radius: 10px; padding: 10px; }
.nr-stolu { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; background: var(--czern); color: var(--zloto-jasne); font-size: 12px; }
.lista-gosci { list-style: none; margin: 0; padding: 0; }
.gosc { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed #efe8da; flex-wrap: wrap; }
.gosc:first-child { border-top: 0; }
.gosc-dane { flex: 1; min-width: 160px; font-size: 14px; }
.gosc-dane strong { font-weight: 500; }
.nr-miejsca { display: inline-block; width: 22px; color: var(--tekst-2); font-size: 12px; }
.gosc-stol select { padding: 6px 8px; font-size: 13.5px; max-width: 170px; }
.gosc-edycja summary { list-style: none; cursor: pointer; padding: 2px 10px; border-radius: 8px; border: 1px solid var(--linia); color: var(--tekst-2); }
.gosc-edycja summary::-webkit-details-marker { display: none; }
.gosc-edycja[open] { flex-basis: 100%; }
.gosc-edycja form { padding: 10px 0; }
.dol-pola { display: flex; align-items: end; }

/* Logo „M w wieńcu” */
.logo-male { width: 48px; height: 48px; flex: none; }
.znak-maly .logo-male { width: 38px; height: 38px; }
.logo-duze { width: 128px; height: 128px; display: block; margin: 0 auto; }

/* ---------- etap 3: catering i kuchnia ---------- */
.zakladki { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: thin; }
.zakladki .filtr { white-space: nowrap; flex: none; }
.wybor-daty { display: flex; gap: 6px; }
.wybor-daty input { font: inherit; border: 1px solid var(--linia); border-radius: 10px; padding: 7px 10px; background: var(--bialy); min-height: 38px; }
.wiersz-wygaszony { opacity: .55; }
.wiersz-lunch { gap: 10px; }
.pole-porcji input { width: 84px; font-size: 18px; font-weight: 700; text-align: center; padding: 8px; border: 1px solid var(--linia); border-radius: 10px; }
.pole-porcji input:focus { outline: 0; border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201, 162, 75, .18); }
.liczba-porcji { font-size: 20px; min-width: 48px; text-align: right; }
.zmiana-dnia { color: #7a5d1c; font-weight: 600; }
.menu-miesiac { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.menu-dzien { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-decoration: none; color: inherit; min-width: 0; }
.menu-dzien:hover { border-color: var(--zloto); }
.menu-data { color: var(--zloto-ciemne); font-size: 13px; }
.menu-data strong { font-size: 16px; color: var(--tekst); }
.menu-zupa { color: var(--tekst-2); font-size: 13px; }
.menu-danie { font-weight: 600; font-size: 14px; }
.menu-dzis { border-color: var(--zloto); box-shadow: 0 0 0 2px rgba(201, 162, 75, .35); }
.menu-brak { background: #f6f3ec; }
.menu-edycja { display: grid; gap: 10px; margin-top: 12px; }
.menu-dzien-edycja { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.4fr) 110px; gap: 10px; align-items: end; padding: 12px; }
.menu-dzien-edycja label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tekst-2); }
.menu-dzien-edycja.poczatek-tygodnia { margin-top: 10px; }
.pozycje-lista { display: grid; gap: 10px; }
.pozycja-wiersz { display: grid; grid-template-columns: minmax(0, 2.4fr) 80px 120px 110px 110px; gap: 8px; align-items: end; padding-top: 10px; border-top: 1px solid #f1ece1; }
.pozycja-wiersz.bez-cen { grid-template-columns: minmax(0, 2.4fr) 80px 120px; }
.pozycja-wiersz label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tekst-2); min-width: 0; }
.pozycja-wiersz .poz-uwagi { grid-column: 1 / -1; }
.pozycja-wartosc { font-weight: 600; text-align: right; padding-bottom: 12px; white-space: nowrap; }
.podsumowanie-zam { display: flex; flex-direction: column; justify-content: center; }
.podsumowanie-zam span { font-size: 13px; color: var(--tekst-2); }
.podsumowanie-zam strong { font-family: var(--szeryf); font-size: 28px; color: var(--zloto-ciemne); }
.dni-tygodnia { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dni-tygodnia legend { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.lista-dan { list-style: none; margin: 0; padding: 0; }
.lista-dan li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f1ece1; }
.lista-dan li:first-child { border-top: 0; }
.danie-nazwa { display: flex; flex-direction: column; min-width: 0; }
.danie-nazwa small { color: var(--tekst-2); font-size: 12.5px; }
.danie-cena { white-space: nowrap; font-weight: 600; color: var(--zloto-ciemne); }
.katalog { align-items: start; }
.tabela td.zawijaj { white-space: normal; }
.tabela-pozycji td { white-space: normal; }
.tabela-pozycji td:nth-child(n+2), .tabela-pozycji th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.tabela-pozycji tfoot td { text-align: right; }
.tabela-produkcji td { white-space: normal; font-size: 16px; }
.ilosc-duza { text-align: right; font-weight: 700; font-size: 18px !important; white-space: nowrap !important; }
.produkcja-blok + .produkcja-blok { margin-top: 18px; }
.zam-kuchnia { border-top: 1px solid #f1ece1; padding: 10px 0; }
.zam-kuchnia p { margin: 0 0 4px; }
.zam-kuchnia ul { margin: 0; padding-left: 20px; }
.menu-dnia .dane { grid-template-columns: 120px 1fr; }
@media (max-width: 900px) {
  .menu-miesiac { grid-template-columns: 1fr 1fr; }
  .menu-dzien-edycja { grid-template-columns: 1fr; gap: 6px; }
  .pozycja-wiersz, .pozycja-wiersz.bez-cen { grid-template-columns: 1fr 1fr; }
  .pozycja-wiersz .poz-nazwa { grid-column: 1 / -1; }
  .pozycja-wartosc { padding-bottom: 0; text-align: left; align-self: center; }
}
@media print {
  .zakladki, .wybor-daty, .powrot, .bez-js, .statusy-pasek { display: none !important; }
  body { background: #fff; }
  .karta { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .tresc { padding: 0; }
  .naglowek-strony h1 { font-size: 26px; }
}
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .liczniki { grid-template-columns: 1fr 1fr; gap: 10px; }
  .liczniki .licznik { padding: 12px 14px; }
  .licznik strong { font-size: 24px; }
}
@media (max-width: 640px) {
  .tabela th, .tabela td { padding: 9px 8px; }
  .karta .tabela-przewijana { margin: 0 -8px; }
  .tabela-pozycji th:nth-child(3), .tabela-pozycji td:nth-child(3) { display: none; }
  .tabela-pozycji tfoot td[colspan] { text-align: right; }
}
.menu-miesiac .karta + .karta, .menu-edycja .karta + .karta { margin-top: 0; }
@media (min-width: 901px) {
  .menu-miesiac .kol-2 { grid-column-start: 2; } .menu-miesiac .kol-3 { grid-column-start: 3; }
  .menu-miesiac .kol-4 { grid-column-start: 4; } .menu-miesiac .kol-5 { grid-column-start: 5; }
}

/* ---------- etap 4A: hotel ---------- */
.grafik-hotelu { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; table-layout: fixed; min-width: 900px; }
.grafik-hotelu th, .grafik-hotelu td { border-bottom: 1px solid #f1ece1; border-right: 1px solid #f6f2e9; padding: 0; height: 44px; text-align: center; }
.grafik-hotelu thead th { font-weight: 600; font-size: 12px; padding: 6px 2px; color: var(--tekst-2); height: auto; }
.grafik-hotelu thead small { font-weight: 400; }
.grafik-hotelu .g-pokoj { width: 110px; text-align: left; padding: 6px 8px; position: sticky; left: 0; background: var(--bialy); z-index: 1; font-size: 13px; }
.grafik-hotelu .g-pokoj small { color: var(--tekst-2); font-weight: 400; }
.grafik-hotelu .g-dzis { background: var(--zloto-tlo); color: var(--zloto-ciemne); }
.grafik-hotelu .g-weekend { background: #fbf9f4; }
.g-wolne a { display: block; width: 100%; height: 100%; }
.g-wolne a:hover { background: var(--zloto-tlo); }
.g-zajete { padding: 3px !important; }
.g-zajete a { display: flex; align-items: center; height: 100%; padding: 0 8px; border-radius: 8px; text-decoration: none; color: inherit;
  font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; }
.g-wstepna a, .g-kropka.g-wstepna { background: var(--niebieski-tlo); color: var(--niebieski); }
.g-potwierdzona a, .g-kropka.g-potwierdzona { background: var(--zielony-tlo); color: var(--zielony); }
.g-oferta a, .g-kropka.g-oferta { background: var(--zloto-tlo); color: #7a5d1c; border: 1px solid var(--zloto); }
.g-zrealizowana a, .g-kropka.g-zrealizowana { background: #ece6d8; color: #5a4a2a; }
.g-kropka { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; margin-left: 10px; }
.legenda { margin-top: 10px; }
.pokoje-wybor { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pokoj-opcja { display: flex; gap: 10px; align-items: center; border: 1px solid var(--linia); border-radius: 12px; padding: 12px; cursor: pointer; }
.pokoj-opcja:has(input:checked) { border-color: var(--zloto); background: var(--zloto-tlo); }
.pokoj-opcja span { display: flex; flex-direction: column; }
.pokoj-opcja small { color: var(--tekst-2); font-size: 12.5px; }
.pokoj-zajety { opacity: .6; border-style: dashed; }
.pokoj-zajety small { color: var(--czerwony); }
.ceny-rok { display: grid; grid-template-columns: 60px repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding: 12px 0; border-top: 1px solid #f1ece1; }
.ceny-rok label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tekst-2); }
.ceny-rok-nazwa { font-family: var(--szeryf); font-size: 22px; padding-bottom: 8px; }
.wiersz-edycji { border-top: 1px solid #f1ece1; padding: 12px 0; }
@media (max-width: 900px) {
  .ceny-rok { grid-template-columns: 1fr 1fr; }
  .ceny-rok-nazwa { grid-column: 1 / -1; padding: 0; }
}
.liczniki .karta + .karta, .kolumny > .karta + .karta { margin-top: 0; }

/* ---------- etap 4B: pracownicy ---------- */
.tabela-wpisow td { white-space: normal; vertical-align: top; }
.akcje-wpisu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.akcje-wpisu input { font: inherit; border: 1px solid var(--linia); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.grafik-pracownikow { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; table-layout: fixed; font-size: 13px; }
.grafik-pracownikow th, .grafik-pracownikow td { border-bottom: 1px solid #f1ece1; border-right: 1px solid #f6f2e9; padding: 6px; vertical-align: top; text-align: left; }
.grafik-pracownikow thead th { font-size: 12.5px; font-weight: 600; }
.grafik-pracownikow .g-pokoj { width: 150px; position: sticky; left: 0; background: var(--bialy); z-index: 1; }
.g-impreza { display: block; margin-top: 4px; font-weight: 500; font-size: 11.5px; background: var(--zloto-tlo); color: #7a5d1c; border-radius: 6px; padding: 2px 6px; }
.g-zmiana { position: relative; background: var(--zielony-tlo); color: var(--zielony); border-radius: 8px; padding: 6px 22px 6px 8px; margin-bottom: 4px; font-size: 12.5px; }
.g-usun { position: absolute; top: 2px; right: 2px; }
.g-usun button { color: var(--zielony); padding: 2px; }
.g-usun .ikona { width: 14px; height: 14px; }
.grafik-pracownikow .g-dzis { background: var(--zloto-tlo); }
@media print { .g-usun { display: none; } .grafik-pracownikow { min-width: 0; } }
@media (max-width: 640px) {
  .tabela-wpisow { min-width: 0; }
  .tabela-wpisow thead { display: none; }
  .tabela-wpisow, .tabela-wpisow tbody { display: block; }
  .tabela-wpisow tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 2px; border-bottom: 1px solid #f1ece1; }
  .tabela-wpisow td { border: 0; padding: 1px 0; white-space: normal; }
  .tabela-wpisow td:nth-child(1) { grid-area: 1 / 1; font-weight: 600; }
  .tabela-wpisow td:nth-child(5) { grid-area: 1 / 2; text-align: right; }
  .tabela-wpisow td:nth-child(2) { grid-area: 2 / 1; }
  .tabela-wpisow td:nth-child(4) { grid-area: 2 / 2; text-align: right; font-weight: 600; }
  .tabela-wpisow td:nth-child(3) { grid-area: 3 / 1; }
  .tabela-wpisow td:nth-child(6) { grid-area: 3 / 2; }
  .tabela-wpisow td:nth-child(3) br { display: none; }
  .tabela-wpisow td:nth-child(3) strong { margin-left: 6px; }
  .tabela-wpisow td.pusto { grid-column: 1 / -1; }
}

/* ---------- etap 4C: magazyn ---------- */
.stan-magazynu { font-size: 18px; font-weight: 700; white-space: nowrap; }
.stan-magazynu small { font-size: 12.5px; font-weight: 500; color: var(--tekst-2); }
.stan-niski { color: var(--czerwony); }
a.licznik { text-decoration: none; color: inherit; }
.licznik-alarm strong { color: var(--czerwony); }
.ilosc-plus { color: var(--zielony); }
.ilosc-minus { color: var(--czerwony); }
.pozycja-magazyn { grid-template-columns: minmax(0, 3fr) 110px 140px; }
.pozycja-magazyn.bez-cen { grid-template-columns: minmax(0, 3fr) 110px; }
.pozycja-wiersz select { min-width: 0; width: 100%; }
.tabela-spisu input { width: 110px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--linia); border-radius: 10px; text-align: right; }
.data-spisu { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.lista-zakupow .podsekcja { margin: 14px 0 4px; }
.odhacz { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--zloto); background: var(--bialy); color: var(--zielony); font-weight: 700; font-size: 16px; cursor: pointer; flex: none; }
.kupione .odhacz { background: var(--zielony-tlo); border-color: var(--zielony); }
.kupione strong { text-decoration: line-through; }
@media (max-width: 900px) {
  .pozycja-magazyn, .pozycja-magazyn.bez-cen { grid-template-columns: 1fr 1fr; }
}
@media print { .odhacz { border-color: #999; } .lista-zakupow form:last-child { display: none; } }

/* ---------- etap 4E: finanse ---------- */
.slupki { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.slupki li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.slupek { height: 12px; background: #f3efe5; border-radius: 99px; overflow: hidden; }
.slupek-wypelnienie { display: block; height: 100%; border-radius: 99px; background: var(--zloto); }
.s-sala { background: #9c7a2c; } .s-hotel { background: #3b5f86; } .s-lunche { background: #3f7a4a; } .s-catering { background: #b3412e; }
.wykres-roku { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; padding-top: 10px; }
.wykres-miesiac { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; text-decoration: none; color: var(--tekst-2); }
.wykres-slupki { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.wykres-slupki span { width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 2px; }
.w-przychod { background: var(--zloto); } .w-koszt { background: #c9bfae; }
@media (max-width: 640px) { .slupki li { grid-template-columns: 1fr auto; } .slupek { grid-column: 1 / -1; grid-row: 2; } }
.szer-0 { width: 0%; } .wys-0 { height: 0%; }
.szer-1 { width: 5%; } .wys-1 { height: 5%; }
.szer-2 { width: 10%; } .wys-2 { height: 10%; }
.szer-3 { width: 15%; } .wys-3 { height: 15%; }
.szer-4 { width: 20%; } .wys-4 { height: 20%; }
.szer-5 { width: 25%; } .wys-5 { height: 25%; }
.szer-6 { width: 30%; } .wys-6 { height: 30%; }
.szer-7 { width: 35%; } .wys-7 { height: 35%; }
.szer-8 { width: 40%; } .wys-8 { height: 40%; }
.szer-9 { width: 45%; } .wys-9 { height: 45%; }
.szer-10 { width: 50%; } .wys-10 { height: 50%; }
.szer-11 { width: 55%; } .wys-11 { height: 55%; }
.szer-12 { width: 60%; } .wys-12 { height: 60%; }
.szer-13 { width: 65%; } .wys-13 { height: 65%; }
.szer-14 { width: 70%; } .wys-14 { height: 70%; }
.szer-15 { width: 75%; } .wys-15 { height: 75%; }
.szer-16 { width: 80%; } .wys-16 { height: 80%; }
.szer-17 { width: 85%; } .wys-17 { height: 85%; }
.szer-18 { width: 90%; } .wys-18 { height: 90%; }
.szer-19 { width: 95%; } .wys-19 { height: 95%; }
.szer-20 { width: 100%; } .wys-20 { height: 100%; }

/* ---------- etap 5A: Rancho Spanelia ---------- */
.motyw-rancho { --rancho: #123f22; --rancho-tlo: #eef3e6; }
.rancho-baner { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.rancho-logo { width: 190px; height: auto; border-radius: 12px; box-shadow: var(--cien); border: 2px solid #d9c27a; display: block; }
.rancho-baner h1 { font-family: var(--szeryf); font-size: 34px; margin: 0; color: var(--rancho); line-height: 1.1; }
.rancho-prywatne { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: #8a7429; }
.motyw-rancho .filtr.aktywny { background: var(--rancho); border-color: var(--rancho); color: #f1dd8f; }
.motyw-rancho .karta-tytul { color: var(--rancho); }
.rancho-pasek { height: 10px; background: #e7e2d3; border-radius: 99px; overflow: hidden; margin: 6px 0 4px; max-width: 520px; }
.pasek-poniesione { display: block; height: 100%; background: #2f7a3e; border-radius: 99px; }
.rancho-pasek.przekroczony .pasek-poniesione { background: var(--czerwony); }
.wiersz-plan strong { font-style: italic; color: var(--tekst-2); }
.notatka { border-top: 1px solid #f1ece1; padding: 10px 0; }
.notatka p { margin: 6px 0 0; }
@media (max-width: 640px) { .rancho-logo { width: 200px; } .rancho-baner h1 { font-size: 28px; } }

/* ---------- etap 4D: remanent ---------- */
.tabela-remanentu td { vertical-align: top; }
.pole-spisu { width: 96px; font: inherit; font-size: 15px; padding: 7px 9px; border: 1px solid var(--linia); border-radius: 9px; text-align: right; }
.pole-powodu { display: block; width: 180px; margin-top: 4px; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px dashed var(--linia); border-radius: 8px; }
.wiersz-roznica { background: #fffaf0; }
.pole-szerokie { flex: 1; min-width: 220px; font: inherit; padding: 9px 11px; border: 1px solid var(--linia); border-radius: 10px; }
@media (max-width: 640px) {
  .tabela-remanentu { min-width: 0; }
  .tabela-remanentu thead { display: none; }
  .tabela-remanentu, .tabela-remanentu tbody, .tabela-remanentu tfoot { display: block; }
  .tabela-remanentu tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 10px; border-bottom: 1px solid #f1ece1; }
  .tabela-remanentu td { border: 0; padding: 0; white-space: normal; }
  .tabela-remanentu td[data-etykieta]::before { content: attr(data-etykieta); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-2); margin-bottom: 2px; }
  .r-lp, .r-jm { display: none; }
  .r-nazwa { grid-area: 1 / 1 / 2 / 3; }
  .r-wart { grid-area: 1 / 3; text-align: right; }
  .r-mag { grid-area: 2 / 1; } .r-pol { grid-area: 2 / 2; }
  .r-cz { grid-area: 3 / 1; } .r-cena { grid-area: 3 / 2 / 4 / 4; }
  .r-usun { grid-area: 2 / 3; text-align: right; }
  .tabela-remanentu .pole-spisu { width: 100%; }
  .tabela-remanentu .pole-powodu { width: 100%; }
  .tabela-remanentu tfoot tr { grid-template-columns: 1fr auto; }
  .tabela-remanentu tfoot td:empty { display: none; }
}

/* RODO: dokumenty tekstowe */
.tekst-dokumentu { white-space: pre-wrap; line-height: 1.55; }
.strona-publiczna { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
body.tlo-ciemne .strona-publiczna { color: inherit; }