/* LupikCMS – style bazowe panelu (niezależne od stron firm). */
/* Część robocza panelu jest wspólna dla wszystkich firm: jasny motyw (domyślny) i ciemny (przełącznik w menu, zapamiętany
   w przeglądarce). Barwy strony klienta dotyczą tylko lewego menu i akcentów (--firma-*). */
:root {
  --tlo: #ffffff;
  --tlo-2: #f3f3f0;
  --karta: #ffffff;
  --bialy: #ffffff;
  --atrament: #1f2328;
  --szary: #666a70;
  --linia: #e4e3de;
  --akcent: #27466e;
  --akcent-ciemne: #182f4d;
  --akcent-jasny: #e8edf5;
  --bursztyn: #b7862f;
  --zielony: #3f6b4f;
  --czerwony: #a3262f;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 400 15px/1.6 var(--sans); color: var(--atrament); background: var(--tlo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.02em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
svg { width: 1em; height: 1em; flex: none; }
.pomin { position: absolute; left: -9999px; }

.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 8px; background: var(--akcent); color: #fff; font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s; }
.przycisk:hover { background: var(--akcent-ciemne); }
.przycisk:disabled { opacity: .6; cursor: default; }
.przycisk--maly { padding: 9px 14px; font-size: 13px; }
.link-strzalka { font-weight: 600; color: var(--akcent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.znak__nazwa { font: 700 20px/1.15 var(--sans); letter-spacing: -.01em; }

.lata { display: flex; gap: 4px; background: var(--tlo-2); padding: 4px; border-radius: 8px; }
.lata button { border: 0; background: none; font: 600 14px var(--sans); padding: 8px 16px; border-radius: 8px; cursor: pointer; color: var(--szary); }
.lata button[aria-selected="true"] { background: var(--karta); color: var(--atrament); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.kalendarz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.miesiac { background: var(--karta); border-radius: 8px; padding: 14px 12px 10px; border: 1px solid var(--linia); }
.miesiac h3 { font-size: 15px; margin-bottom: 8px; }
.dni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.dni .dz { font-size: 11px; font-weight: 600; color: var(--szary); padding-bottom: 4px; }
.dzien { aspect-ratio: 1; display: grid; place-items: center; font-size: 12px; border-radius: 7px; border: 0; background: none; padding: 0; font-family: inherit; color: var(--atrament); }
.dzien--przeszly { color: #c5c3bb; }
.dzien--wolny { cursor: pointer; }
.dzien--wolny:hover { background: var(--tlo-2); }
.dzien--weekend.dzien--wolny { background: var(--zielony); color: #fff; font-weight: 600; }
.dzien--weekend.dzien--wolny:hover { background: #2f5640; }
.dzien--zajety { background: #ecebe6; color: #a9a79e; text-decoration: line-through; }
.dzien--uwaga { box-shadow: inset 0 0 0 2px var(--bursztyn); }
.dzien--wybrany { outline: 2px solid var(--akcent); outline-offset: 1px; }

.pole { display: flex; flex-direction: column; gap: 6px; }
.pole label { font-size: 13px; font-weight: 600; }
.pole input, .pole select, .pole textarea { font: 500 15px var(--sans); color: var(--atrament); background: var(--karta); border: 1px solid var(--linia); border-radius: 8px; padding: 11px 12px; width: 100%; }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: 2px solid var(--akcent); outline-offset: 0; border-color: transparent; }

/* Tryb ciemny części roboczej (html[data-motyw="ciemny"]); lewe menu zostaje w barwach strony */
html[data-motyw="ciemny"] {
  --tlo: #15171b;
  --tlo-2: #1f2228;
  --karta: #20242b;
  --bialy: #20242b;
  --atrament: #e9eaee;
  --szary: #9ba1ab;
  --linia: #343941;
  --akcent: #8fb3e3;
  --akcent-ciemne: #182f4d;
  --akcent-jasny: #25344a;
  --bursztyn: #d9a64a;
  --zielony: #6fbf8a;
  --czerwony: #e07a82;
  color-scheme: dark;
}
html[data-motyw="ciemny"] .pole input, html[data-motyw="ciemny"] .pole select, html[data-motyw="ciemny"] .pole textarea,
html[data-motyw="ciemny"] .godziny__zakres input { background: #14161a; color: var(--atrament); border-color: var(--linia); }
html[data-motyw="ciemny"] .przycisk--obrys { background: transparent; color: var(--atrament); border-color: var(--linia); }
html[data-motyw="ciemny"] .przycisk--obrys:hover { background: var(--tlo-2); }
html[data-motyw="ciemny"] .uwaga--pusto { background: linear-gradient(90deg, #17221b, var(--karta) 60%); }
html[data-motyw="ciemny"] .uwaga--pusto .karta__ikona { background: #1f3326; }
html[data-motyw="ciemny"] .uwaga:not(.uwaga--pusto) .karta__ikona { background: #3a2d14; }
html[data-motyw="ciemny"] .firma-pasek { background: var(--tlo-2); }
html[data-motyw="ciemny"] .karta__ikona { background: color-mix(in srgb, var(--firma-kolor, var(--akcent)) 22%, var(--karta)); }
html[data-motyw="ciemny"] .okres button[aria-selected="true"] { background: var(--karta); box-shadow: none; }
html[data-motyw="ciemny"] .wykres .siatka { stroke: #2c3038; }
html[data-motyw="ciemny"] .dane dt { background: var(--tlo-2); }
html[data-motyw="ciemny"] .pakiet-odznaka--wizytowka { background: #2b3038; color: #c9cfd8; }
html[data-motyw="ciemny"] .pakiet-odznaka--social { background: #1d3426; color: #9fd9b4; }
html[data-motyw="ciemny"] .social__wiersz:hover, html[data-motyw="ciemny"] .wiecej__kafel { background: var(--tlo-2); }