/* =============================================================================
styl-panel.css · panel cukierni: szkielet, Dziś, kafle, listy zamówień, tabele, kalendarz produkcji, zakupy, formularz
produktu, wydruk listy dnia, skrzynka, komunikaty, klient i mapy, logowanie, karta zamówienia, zmiana szczegółów.
Ładowany PO styl.css (tokeny, tryb nocny, komponenty wspólne). Źródło: makiety v2 (§8-10) i v3-panel (ekrany 11-16).
Powierzchnie zawsze ciemne (pasek mobilny, menu boczne, panel marki w logowaniu) używają stałych --tusz, --krem-staly,
żeby wyglądały tak samo w dzień i w nocy.
============================================================================= */
/* ---------- 8. Panel: szkielet (ekrany 03 i 04) ---------- */
.panel { background: var(--panel-tlo); font-size: var(--fs-15); line-height: 1.5; }
.panel h1 { font-family: var(--czcionka-ui); font-size: var(--fs-28); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--sliwka-900); }
.panel h2, .panel h3, .panel h4 { font-family: var(--czcionka-ui); font-weight: 700; letter-spacing: 0; }
.panel .karta { border-color: var(--panel-ramka); box-shadow: var(--cien-maly); }
.aplikacja { min-height: 100vh; }
.pasek-mobilny { position: relative; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--tusz); color: var(--krem-staly); }
.pasek-mobilny .logo { height: 44px; }
.pasek-mobilny__tytul { margin-right: auto; font-size: var(--fs-17); font-weight: 600; }
.pasek-mobilny .menu-przycisk { width: auto; padding: 0 16px; border-color: var(--menu-linia); background: transparent; color: var(--krem-staly); }
.pasek-mobilny .menu-mobilne__lista { padding-inline: 16px; background: var(--tusz); border-bottom: 1px solid var(--menu-linia); }
.pasek-mobilny .menu-mobilne__lista a { border-bottom-color: var(--menu-linia); color: var(--menu-tekst); }
.pasek-mobilny .menu-mobilne__lista a[aria-current="page"] { color: var(--bialy-staly); box-shadow: inset 3px 0 0 var(--zloto-500); padding-left: 12px; }
.pasek-mobilny .menu-mobilne__konto { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--menu-linia); font-size: var(--fs-15); color: var(--menu-tekst); }
.pasek-mobilny .menu-mobilne__konto strong { margin-left: 6px; font-weight: 600; color: var(--krem-staly); }
.pasek-mobilny .menu-mobilne__lista .wyloguj { color: var(--zloto-500); }
@media (min-width: 768px) { .pasek-mobilny .menu-mobilne__lista { padding-inline: var(--gutter); } }
.menu-boczne { display: none; }
.menu-boczne__logo { display: block; padding: 0 8px 24px; }
.menu-boczne__lista { display: grid; gap: 4px; }
.menu-boczne__lista a {
display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--promien-m);
font-size: var(--fs-15); font-weight: 600; color: var(--menu-tekst); text-decoration: none;
}
.menu-boczne__lista a:hover { background: color-mix(in srgb, var(--sliwka-700-staly) 55%, var(--tusz)); color: var(--bialy-staly); }
.menu-boczne__lista a[aria-current="page"] { background: var(--sliwka-700-staly); color: var(--bialy-staly); box-shadow: inset 3px 0 0 var(--zloto-500); }
.menu-boczne__stopka { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--menu-linia); font-size: var(--fs-14); line-height: 1.5; color: var(--menu-tekst); }
.menu-boczne__stopka strong { color: var(--krem-staly); font-weight: 600; }
.menu-boczne__stopka a { display: inline-flex; align-items: center; min-height: var(--cel); color: var(--zloto-500); font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 1024px) {
.aplikacja { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.pasek-mobilny { display: none; }
.menu-boczne {
position: sticky; top: 0; align-self: start; height: 100vh;
display: flex; flex-direction: column; padding: 22px 14px 18px;
background: var(--tusz); color: var(--menu-tekst);
}
}
.tresc { min-width: 0; padding: 16px 16px 40px; }
.tresc__siatka { display: grid; gap: 24px; }
.kolumna-glowna { display: grid; gap: 28px; align-content: start; min-width: 0; }
.kolumna-boczna { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (min-width: 768px) {
.tresc { padding: 28px 32px 64px; }
.kolumna-boczna { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: start; }
}
@media (min-width: 1024px) { .tresc { padding: 32px 32px 72px; } }
@media (min-width: 1360px) {
.tresc__siatka { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.kolumna-boczna { grid-template-columns: 1fr; column-gap: 0; }
}
.panel .okruszki { margin-bottom: 0; }
.naglowek-strony { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
.naglowek-strony__akcje { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.naglowek-strony > .naglowek-strony__akcje:not(.naglowek-strony__akcje--form) { display: none; }
@media (min-width: 768px) { .naglowek-strony > .naglowek-strony__akcje:not(.naglowek-strony__akcje--form) { display: flex; } }
.druk-ostrzezenie { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--uwaga-tekst); }
@media (min-width: 768px) { .naglowek-strony__akcje { align-items: flex-end; } }
.pomoc { font-size: var(--fs-14); line-height: 1.5; color: var(--tekst-600); }
/* kafle liczbowe (kotwice do sekcji) */
.kpi { display: grid; gap: 8px; }
.kpi li { display: flex; }
.kpi a {
--akcent: var(--sliwka-700);
flex: 1 1 auto;
position: relative; display: flex; align-items: center; gap: 16px; min-height: 52px; overflow: hidden;
padding: 6px 18px 6px 24px; background: var(--biel); border: 1px solid var(--panel-ramka); border-radius: var(--promien);
color: inherit; text-decoration: none;
}
.kpi a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--akcent); }
.kpi a:hover { border-color: var(--obrys); }
.kpi a.kpi__kafel--uwaga { --akcent: var(--uwaga); }
.kpi a.kpi__kafel--ok { --akcent: var(--ok); }
.kpi__liczba { min-width: 28px; font-family: var(--czcionka-naglowki); font-size: var(--fs-32); font-weight: 600; line-height: 1; color: var(--akcent); font-variant-numeric: lining-nums; }
.kpi__opis { font-size: var(--fs-15); font-weight: 600; line-height: 1.35; color: var(--tekst-900); }
@media (min-width: 640px) {
.kpi { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px 16px 26px; }
.kpi__liczba { font-size: var(--fs-44); }
}
/* tablet / Duo rozłożony: kafle 2 + 1, każdy w swojej połówce */
@media (min-width: 768px) and (max-width: 1023px) { .kpi { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }
/* bloki i listy zamówień */
.naglowek-blok { display: grid; gap: 18px; }
.blok { scroll-margin-top: 16px; }
.blok__naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.blok__naglowek h2 { font-size: var(--fs-18); line-height: 1.3; color: var(--sliwka-900); }
.blok .pomoc { margin-top: 4px; }
.blok__tresc { margin-top: 14px; }
@media (min-width: 768px) and (max-width: 1023px) {
.blok__naglowek { flex-direction: column; align-items: flex-start; max-width: calc((100% - var(--rynna)) / 2); }
.blok > .pomoc { max-width: calc((100% - var(--rynna)) / 2); }
}
.zam { display: grid; gap: 14px; padding: 18px 16px; border-bottom: 1px solid var(--panel-ramka); }
.zam:last-child { border-bottom: 0; }
.zam--proba { box-shadow: inset 4px 0 0 var(--uwaga); }
.zam__gora { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.numer { padding: 2px 8px; border-radius: var(--promien-xs); background: var(--sliwka-100); font-size: var(--fs-13); font-weight: 700; line-height: 1.5; color: var(--sliwka-700); font-variant-numeric: tabular-nums; }
.zam__klient { font-size: var(--fs-17); font-weight: 700; color: var(--tekst-900); }
.zam__produkt { margin-top: 8px; text-wrap: pretty; }
.zam__produkt strong { font-weight: 700; }
.zam__opcje { margin-top: 4px; font-size: var(--fs-15); line-height: 1.45; }
.zam__opcje span { color: var(--tekst-600); }
.zam__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: var(--fs-14); color: var(--tekst-600); }
.zam__meta strong { color: var(--tekst-900); font-weight: 600; }
.zam__nota { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-900); }
.zam__nota .ikona { margin-top: 1px; color: var(--uwaga-tekst); }
.zam__akcje { display: grid; gap: 10px; align-content: start; }
.zam__linki { display: flex; flex-wrap: wrap; gap: 0 18px; }
.zam__linki .przycisk-tekst { padding-inline: 0; }
.zam__status { display: flex; align-items: center; min-height: 48px; }
@media (min-width: 768px) {
.zam { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rynna); align-items: start; padding: 20px 24px; }
}
@media (min-width: 1024px) { .zam { grid-template-columns: minmax(0, 1fr) 330px; column-gap: 24px; } }
/* tabela produkcji */
.karta--tabela { overflow: hidden; }
.tabela { width: 100%; font-size: var(--fs-14); }
.tabela th {
padding: 12px 12px; border-bottom: 1px solid var(--panel-ramka); background: color-mix(in srgb, var(--panel-tlo) 60%, var(--biel));
font-size: var(--fs-13); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; color: var(--tekst-600);
}
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--panel-ramka); vertical-align: middle; }
.tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 16px; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela__nazwa { display: block; font-size: var(--fs-15); font-weight: 600; line-height: 1.35; color: var(--tekst-900); }
.tabela__opcje { display: block; margin-top: 2px; font-size: var(--fs-14); line-height: 1.4; color: var(--tekst-900); }
.tabela__num { font-variant-numeric: tabular-nums; color: var(--tekst-600); white-space: nowrap; }
.tabela__status .status-wiersz { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tabela__druk { display: none; }
.pole-odhaczenia { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--tekst-900); border-radius: var(--promien-xxs); }
@media screen and (max-width: 1023px) {
.tabela--produkcja thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabela--produkcja, .tabela--produkcja tbody { display: block; }
.tabela--produkcja tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 14px 16px; border-bottom: 1px solid var(--panel-ramka); }
.tabela--produkcja tr:last-child { border-bottom: 0; }
.tabela--produkcja td { display: block; padding: 0; border: 0; }
.tabela--produkcja td:first-child, .tabela--produkcja td:last-child { padding: 0; }
.tabela--produkcja td:first-child { flex: 1 1 100%; margin-bottom: 2px; }
.tabela--produkcja .tabela__opcje { font-size: var(--fs-15); }
.tabela--produkcja td:nth-child(n+2):nth-child(-n+4) { font-size: var(--fs-14); }
.tabela--produkcja td:nth-child(3)::before { content: "odbiór "; }
.tabela--produkcja td.tabela__status { flex: 1 1 100%; margin-top: 2px; }
.tabela--produkcja .status-wiersz { justify-content: space-between; }
.tabela__druk { display: none !important; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.karta--tabela { overflow: visible; background: none; border: 0; box-shadow: none; }
.tabela--produkcja tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--rynna); row-gap: 16px; }
.tabela--produkcja tr { background: var(--biel); border: 1px solid var(--panel-ramka); border-radius: var(--promien); box-shadow: var(--cien-maly); }
.tabela--produkcja tr:last-child { border-bottom: 1px solid var(--panel-ramka); }
}
/* kolumna boczna: kalendarz i zakupy */
.karta--bok { padding: 16px; }
.karta--bok h2 { font-size: var(--fs-17); line-height: 1.3; color: var(--sliwka-900); }
.kal--produkcja th { padding-bottom: 2px; }
.kal--produkcja td { padding: 1px 0 4px; }
.kal__btn {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
border: 0; border-radius: 50%; background: none;
font-size: var(--fs-15); font-weight: 600; color: var(--tekst-900); font-variant-numeric: tabular-nums;
}
.kal__btn:hover:not(:disabled) { background: var(--sliwka-100); }
.kal__btn--przeszly { color: var(--tekst-600); font-weight: 500; }
.kal__btn--dzis { box-shadow: inset 0 0 0 2px var(--zloto-tekst); }
.kal__btn--jutro { background: var(--sliwka-100); }
.kal__btn:disabled { color: var(--wyszarzone); font-weight: 500; cursor: default; }
.kal__licznik { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-13); font-weight: 700; line-height: 1; color: var(--sliwka-700); font-variant-numeric: tabular-nums; }
.kal__licznik::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sliwka-700); }
.kal__legenda--panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-ramka); }
.kal__legenda .l-jutro { background: var(--sliwka-100); color: var(--tekst-900); font-weight: 600; }
.kal__legenda .l-licznik::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sliwka-700); }
.zakupy__uwaga { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-900); }
.zakupy__uwaga .ikona { margin-top: 1px; color: var(--uwaga-tekst); }
.zakupy__lista { margin-top: 12px; border-top: 1px solid var(--panel-ramka); }
.zakupy__pozycja { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--panel-ramka); cursor: pointer; }
.zakupy__tekst { display: contents; }
.zakupy__pozycja input { grid-row: 1 / span 2; }
.zakupy__nazwa { grid-column: 2; grid-row: 1; align-self: end; }
.zakupy__stan { grid-column: 2 / -1; grid-row: 2; align-self: start; }
.zakupy__dokup { grid-column: 3; grid-row: 1; align-self: end; }
.zakupy__pozycja input { width: 24px; height: 24px; margin: 0; accent-color: var(--wybrane); }
.zakupy__nazwa { display: block; font-weight: 700; line-height: 1.3; color: var(--tekst-900); }
.zakupy__stan { display: block; font-size: var(--fs-14); line-height: 1.4; color: var(--tekst-600); font-variant-numeric: tabular-nums; }
.zakupy__dokup { padding: 4px 10px; border-radius: var(--promien-xs); background: var(--sliwka-100); font-size: var(--fs-14); font-weight: 700; line-height: 1.3; color: var(--sliwka-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zakupy__pozycja input:checked ~ .zakupy__tekst .zakupy__nazwa { text-decoration: line-through; }
.zakupy .przycisk { margin-top: 16px; }
/* ---------- 9. Panel: nowy produkt (ekran 04) ---------- */
.formularz-siatka { display: grid; gap: 20px; margin-top: 20px; }
.formularz { display: grid; gap: 20px; min-width: 0; }
.formularz__bok { display: grid; gap: 20px; align-content: start; min-width: 0; }
/* 768-1023 (w tym Duo rozłożone): dwie połówki z rynną na środku, podgląd z prawej i przyklejony */
@media (min-width: 768px) and (max-width: 1023px) {
.formularz-siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: start; margin-top: 24px; }
.formularz__bok { position: sticky; top: 24px; }
}
/* 1024-1279: formularz na pełną szerokość, podgląd pod nim (dwie karty obok siebie) */
@media (min-width: 1024px) and (max-width: 1279px) {
.formularz-siatka { margin-top: 24px; }
.formularz__bok { grid-template-columns: 1fr 1fr; align-items: start; }
}
/* od 1280: formularz 8/12 i przyklejony podgląd 4/12 */
@media (min-width: 1280px) {
.formularz-siatka { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 24px; align-items: start; margin-top: 24px; }
.formularz__bok { position: sticky; top: 24px; }
}
.sekcja-f { padding: 20px; container: karta / inline-size; }
.sekcja-f__naglowek { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.sekcja-f__numer { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sliwka-100); font-size: var(--fs-14); font-weight: 700; color: var(--sliwka-900); }
.sekcja-f h2 { font-size: var(--fs-18); line-height: 1.3; color: var(--sliwka-900); }
.sekcja-f__naglowek .pomoc { margin-top: 2px; }
.sekcja-f__pola { display: grid; gap: 22px; }
.pole-p > .etykieta { margin-bottom: 8px; }
.panel .wejscie { min-height: 48px; padding: 0 14px; border-radius: var(--promien-s); font-size: var(--fs-15); }
.panel textarea.wejscie { min-height: 92px; padding: 12px 14px; }
.panel .wybor span { padding: 0 16px; font-size: var(--fs-14); }
.panel .wybory--male .wybor span { padding: 0 14px; font-size: var(--fs-14); }
@media (min-width: 768px) { .sekcja-f { padding: 26px 28px; } }
@media (min-width: 1024px) { .sekcja-f__pola--2kol { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 24px; } }
.tabela-f { width: 100%; table-layout: fixed; font-size: var(--fs-14); }
.tabela-f th { padding: 0 6px 8px; font-size: var(--fs-13); font-weight: 600; text-align: left; line-height: 1.3; color: var(--tekst-600); }
.tabela-f td { padding: 4px 6px; vertical-align: middle; }
.tabela-f th:first-child, .tabela-f td:first-child { padding-left: 0; }
.tabela-f th:last-child, .tabela-f td:last-child { padding-right: 0; }
.tabela-f .wejscie { min-height: var(--cel); padding: 0 10px; }
.tabela-f select.wejscie { padding-right: 28px; background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; }
.tabela-f__nazwa { padding-right: 4px; font-weight: 600; line-height: 1.3; color: var(--tekst-900); overflow-wrap: anywhere; }
.tabela-f__liczba { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-f__usun { text-align: right; }
.z-jednostka { display: flex; align-items: center; gap: 6px; }
.z-jednostka .wejscie { flex: 1 1 auto; min-width: 0; text-align: right; }
.z-jednostka span { flex: none; font-weight: 600; color: var(--tekst-600); }
.kol-wielkosc { width: 27%; } .kol-porcje { width: 19%; } .kol-cena { width: 29%; } .kol-mnoznik { width: 25%; }
.kol-sklad { width: auto; } .kol-ilosc { width: 112px; } .kol-jedn { width: 112px; } .kol-usun { width: 56px; }
/* tabela wielkości: w wąskiej karcie (połówka ekranu na 768 px, telefon 320 px) każdy wiersz to nazwa wielkości
i trzy pola w jednym rzędzie, z widocznymi podpisami z atrybutu data-etykieta */
@container karta (max-width: 299px) {
.tabela-f--wielkosci, .tabela-f--wielkosci tbody { display: block; }
.tabela-f--wielkosci thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabela-f--wielkosci tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--panel-ramka); }
.tabela-f--wielkosci tr:last-child { border-bottom: 0; }
.tabela-f--wielkosci td { display: block; padding: 0; }
.tabela-f--wielkosci td::before { content: attr(data-etykieta); display: block; margin-bottom: 2px; font-size: var(--fs-13); font-weight: 600; line-height: 1.3; color: var(--tekst-600); }
.tabela-f--wielkosci td:first-child { grid-column: 1 / -1; }
}
/* receptura: kolumna nazwy składnika ma co najmniej 160 px. Gdy kontener (karta albo wariant) jest węższy niż 460 px
(telefon, połówka ekranu Duo), ilość, jednostka i kosz schodzą w drugi rząd pod nazwę. */
.grupa, .wariant { container: receptura / inline-size; }
@container receptura (max-width: 459px) {
.tabela-f--receptura, .tabela-f--receptura tbody { display: block; }
.tabela-f--receptura thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabela-f--receptura tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--cel); gap: 6px 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--panel-ramka); }
.tabela-f--receptura tr:last-child { border-bottom: 0; }
.tabela-f--receptura td { display: block; padding: 0; }
.tabela-f--receptura .tabela-f__nazwa { grid-column: 1 / -1; padding: 0; }
.tabela-f--receptura .tabela-f__usun { justify-self: end; }
}
.przycisk-ikona { display: inline-flex; align-items: center; justify-content: center; width: var(--cel); height: var(--cel); padding: 0; border: 0; border-radius: var(--promien-s); background: none; color: var(--tekst-600); }
.przycisk-ikona:hover { background: var(--blad-tlo); color: var(--blad-tekst); }
.link-dodaj {
display: inline-flex; align-items: center; gap: 6px; min-height: var(--cel); padding: 0 4px; border: 0; background: none;
font-size: var(--fs-14); font-weight: 700; color: var(--sliwka-700);
text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sliwka-700) 40%, transparent);
}
.grupa + .grupa { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--panel-ramka); }
.grupa h3 { margin-bottom: 8px; font-size: var(--fs-16); line-height: 1.35; color: var(--sliwka-900); }
.grupa > .pomoc { margin: -6px 0 8px; }
.grupa__baza { display: grid; gap: 8px; margin-top: 12px; }
.wariant { margin-top: 14px; padding: 12px 10px 4px; border: 1px solid var(--panel-ramka); border-radius: var(--promien-m); background: var(--panel-tlo); }
.wariant h4 { margin-bottom: 4px; font-size: var(--fs-15); line-height: 1.35; color: var(--tekst-900); }
.wariant h4 span { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--tekst-600); }
.wariant .wejscie { background-color: var(--biel); }
.wariant .tabela-f th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dodaj-wiersz { display: grid; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--obrys); }
.szukaj { position: relative; }
.szukaj .ikona { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tekst-600); pointer-events: none; }
.panel .szukaj .wejscie { padding-left: 42px; }
.ostatnie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--tekst-600); }
.chip-dodaj { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cel); padding: 0 14px 0 10px; border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel); font-size: var(--fs-14); font-weight: 600; color: var(--sliwka-700); }
.chip-dodaj:hover { border-color: var(--sliwka-500); }
.alergeny { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--zloto-linia); border-radius: var(--promien); background: color-mix(in srgb, var(--zloto-500) 8%, var(--biel)); }
.alergeny p { font-size: var(--fs-14); line-height: 1.55; color: var(--tekst-900); }
.alergeny .wybory { margin-top: 10px; gap: 6px 8px; }
.alergeny details { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--zloto-linia); }
.alergeny summary { display: flex; align-items: center; gap: 8px; min-height: var(--cel); font-size: var(--fs-14); font-weight: 700; color: var(--sliwka-900); }
.segment { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--obrys); border-radius: var(--promien-m); background: var(--biel); }
.segment label { position: relative; display: block; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pole-segment { grid-column: 1 / -1; }
.pole-segment .segment { max-width: 460px; }
.segment span { white-space: nowrap; display: flex; align-items: center; justify-content: center; min-height: var(--cel); padding: 0 4px; border-left: 1px solid var(--panel-ramka); font-size: var(--fs-14); font-weight: 600; text-align: center; color: var(--tekst-900); }
.segment label:first-child span { border-left: 0; }
.segment input:checked + span { background: var(--wybrane); color: var(--biel); }
.segment input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--sliwka-500); }
.segment input:checked:focus-visible + span { box-shadow: inset 0 0 0 3px var(--biel); }
.opcje { display: grid; gap: 0; }
.pole-waskie .wejscie { max-width: 120px; }
.zalozenie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-600); }
.podglad__kafel { overflow: hidden; border: 1px solid var(--panel-ramka); border-radius: var(--promien); background: var(--biel); }
.podglad__kafel .foto { border-radius: 0; }
.podglad__tresc { padding: 14px 16px 16px; }
.podglad__tresc h3 { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.15; color: var(--sliwka-900); }
.podglad__cena { margin-top: 6px; font-size: var(--fs-15); font-weight: 700; color: var(--sliwka-700); }
.podglad__czas { margin-top: 2px; font-size: var(--fs-14); color: var(--tekst-600); }
.lista-ok { display: grid; gap: 12px; margin-top: 12px; }
.lista-ok li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-14); line-height: 1.5; }
.lista-ok .ikona { margin-top: 1px; color: var(--ok); }
.numer-kroku-5 { display: grid; }
@media (min-width: 768px) and (max-width: 1023px) { .numer-kroku-5 { display: none; } }
@media (min-width: 1280px) { .numer-kroku-5 { display: none; } }
/* dolny pasek zapisu: tylko telefon (od 768 przyciski są w nagłówku) */
.naglowek-strony__akcje--form { display: none; }
@media (min-width: 768px) { .naglowek-strony__akcje--form { display: flex; flex-direction: row; } }
.pasek-zapisu { position: sticky; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 12px; min-height: var(--pasek-zapisu-wys); margin: 20px -16px -40px; padding: 12px 16px; background: var(--biel); border-top: 1px solid var(--panel-ramka); box-shadow: 0 -6px 20px color-mix(in srgb, var(--sliwka-900) 8%, transparent); }
.pasek-zapisu .przycisk { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: nowrap; }
/* fokus i przewijanie do pola nie lądują pod paskiem: margines = wysokość paska + 16 px */
@media (max-width: 767px) { html.z-paskiem-zapisu { scroll-padding-bottom: calc(var(--pasek-zapisu-wys) + 16px); } }
@media (max-width: 359px) { .pasek-zapisu { gap: 8px; padding-inline: 12px; } .pasek-zapisu .przycisk { padding: 0 8px; font-size: var(--fs-14); } }
.pasek-zapisu .przycisk:last-child { flex: 1.5 1 0; }
@media (min-width: 768px) { .pasek-zapisu { display: none; } }
/* ---------- 10. Wydruk listy produkcji (przycisk "Drukuj listę na dziś" na ekranie 03) ---------- */
/* Na papierze zostaje tylko tabela produkcji: czerń na bieli, kolumny Produkt (z napisem i opcjami),
Ilość, Odbiór, Zamówienie i pole do odhaczenia. Nawigacja, kafle i kolumna boczna znikają. */
@media print {
@page { size: A4; margin: 14mm; }
html, body, body.panel { background: var(--druk-tlo); color: var(--druk-tekst); }
body.panel { font-size: 11pt; line-height: 1.35; }
.pomin, .pasek-mobilny, .menu-boczne, .kolumna-boczna, .naglowek-blok, .blok--potw, .blok--odbiory,
.blok--produkcja .blok__naglowek .znacznik, .blok--produkcja > .pomoc, .menu-mobilne,
.przycisk, .przycisk-tekst, .tabela__status { display: none !important; }
.aplikacja, .tresc__siatka, .kolumna-glowna { display: block; }
.tresc { padding: 0; }
.tylko-druk { display: block; }
.druk-naglowek { margin-bottom: 10pt; padding-bottom: 8pt; border-bottom: 2pt solid var(--druk-tekst); }
.druk-naglowek h2, .druk-naglowek p { color: var(--druk-tekst); }
.druk-naglowek h2 { font-size: 16pt; line-height: 1.2; }
.druk-naglowek p { margin-top: 3pt; font-size: 10.5pt; }
.druk-uwaga { margin-top: 6pt; font-weight: 700; }
.blok--produkcja .blok__naglowek { display: none; }
.blok__tresc { margin-top: 0; }
.karta, .karta--tabela, .panel .karta, .panel .karta--tabela { border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.tabela--produkcja { width: 100%; }
.tabela--produkcja th, .tabela--produkcja td {
padding: 6pt 8pt; border: 1pt solid var(--druk-tekst); background: none; color: var(--druk-tekst);
font-size: 11pt; letter-spacing: 0; text-transform: none;
}
.tabela--produkcja th { font-size: 10pt; font-weight: 700; }
.tabela--produkcja .tabela__nazwa { font-size: 12pt; color: var(--druk-tekst); }
.tabela--produkcja .tabela__opcje { font-size: 10pt; color: var(--druk-tekst); }
.tabela--produkcja .tabela__num { color: var(--druk-tekst); }
.tabela--produkcja tr { break-inside: avoid; }
.tabela--produkcja tr:last-child td { border-bottom: 1pt solid var(--druk-tekst); }
.tabela__druk { display: table-cell !important; width: 56pt; text-align: center; }
.pole-odhaczenia { width: 18pt; height: 18pt; border: 1.5pt solid var(--druk-tekst); border-radius: 0; }
/* "wymaga uwagi" przy pozycji z nieobsłużoną wiadomością klienta: czarny obrys i czarny tekst, bez koloru */
.znacznik--wymaga-uwagi { display: inline-flex; align-items: center; gap: 4pt; margin-top: 3pt; padding: 1pt 5pt; border: 1pt solid var(--druk-tekst); border-radius: 0; background: none; color: var(--druk-tekst); font-size: 10pt; font-weight: 700; line-height: 1.3; white-space: normal; }
.znacznik--wymaga-uwagi .ikona { width: 10pt; height: 10pt; margin-top: 0; stroke: var(--druk-tekst); }
}
.karta--bok .sekcja-f__naglowek { align-items: center; margin-bottom: 12px; }
.karta--bok .sekcja-f__naglowek h2 { font-size: var(--fs-17); }
.karta--bok > .pomoc { margin-top: 10px; }
.zam__tel { display: inline-flex; align-items: center; min-height: var(--cel); color: var(--sliwka-700); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 3px; }
.pole-baza { margin-bottom: 22px; }
.pole-baza .wejscie { max-width: 280px; }
/* ---------- 1. Menu: licznik przy pozycji (Wiadomości) ---------- */
.nawig__licznik {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; margin-left: auto; padding: 0 7px;
border-radius: var(--promien-pelny); background: var(--zloto-500); color: var(--tusz);
font-size: var(--fs-13); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
/* pasek mobilny: tytuły dłuższe niż "Dziś" ("Wiadomości", "Komunikaty", "Zamówienia") nie mieszczą się obok logo i przycisku Menu
przy 320 px; tytuł powtarza h1 strony, więc na najwęższych ekranach znika */
@media (max-width: 359px) { .pasek-mobilny__tytul { display: none; } .pasek-mobilny .menu-przycisk { margin-left: auto; } }
/* 9 pozycji + konto nie mieszczą się w jednej kolumnie przy 890 x 626 (Duo rozłożone): menu mobilne od 768 do 1023 px
w dwóch połówkach (6 pozycji po lewej, reszta po prawej), rynna na środku */
@media (min-width: 768px) and (max-width: 1023px) {
.pasek-mobilny .menu-mobilne__lista ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); column-gap: var(--rynna); }
}
/* ---------- 2. Dodatki wspólne ---------- */
.znacznik--szary { background: var(--znacznik-szary-tlo); color: var(--tekst-600); }
.znacznik--zrodlo { background: var(--biel); color: var(--tekst-900); box-shadow: inset 0 0 0 1px var(--panel-ramka); }
.znacznik--kropka::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ikona--48 { width: 48px; height: 48px; }
.foto--3x2 { aspect-ratio: 3 / 2; }
.segment--2 { grid-template-columns: repeat(2, 1fr); }
.awatar {
flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
background: var(--sliwka-100); color: var(--sliwka-700);
font-size: var(--fs-15); font-weight: 700; line-height: 1; letter-spacing: 0.02em;
}
.awatar--duzy { width: 72px; height: 72px; font-size: var(--fs-24); }
/* strona = pionowy stos bloków; na 768-1023 px wszystko, co ma tekst, stoi w połówkach */
.strona { display: grid; gap: 20px; min-width: 0; }
/* nagłówek strony: tytuł z lewej, akcje z prawej (od 768 px dwie połówki, od 1024 tytuł + akcje) */
.naglowek-v3 { display: grid; gap: 14px; align-items: start; }
.naglowek-v3__tytul { min-width: 0; }
.naglowek-v3__tytul > .pomoc { margin-top: 6px; }
.naglowek-v3 h1 { width: fit-content; max-width: 100%; text-wrap: balance; }
.naglowek-v3__wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.akcje-naglowka { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.akcje-naglowka__linki { display: flex; flex-wrap: wrap; gap: 0 8px; }
@media (min-width: 768px) { .naglowek-v3 { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }
/* tytuł zawsze ma co najmniej 14rem: kolumna akcji „auto” liczy szerokość wszystkich linków w jednym wierszu (np. zamówienie „nowe” z firmą), więc bez minimum ściskała tytuł do zera */
@media (min-width: 1024px) { .naglowek-v3 { grid-template-columns: minmax(14rem, 1fr) minmax(0, auto); column-gap: 24px; } }
@media (min-width: 1280px) {
.akcje-naglowka { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px 12px; }
.akcje-naglowka__linki { flex: 1 1 100%; justify-content: flex-end; }
}
/* układ 7/5 (ekrany 13 i 15): od 768 dwie połówki z rynną, od 1280 siedem do pięciu */
.uklad-dwa { display: grid; gap: 20px; align-items: start; }
.uklad-dwa__kol { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (min-width: 768px) { .uklad-dwa { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }
@media (min-width: 1280px) { .uklad-dwa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 24px; } }
/* karta z sekcją: nagłówek + treść */
.karta-sekcja { container: karta-sekcja / inline-size; display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px; }
.karta-sekcja h2 { font-size: var(--fs-17); line-height: 1.3; color: var(--sliwka-900); }
.karta-sekcja > .pomoc, .karta-sekcja .pomoc { margin: 0; }
/* RECENZJA-EKRANY-UI Ś-9: odnośnik w siatce karty rozciągał się na całą szerokość (przy 890×626 przez pas zgięcia 421-469); teraz tylko na tekst */
.karta-sekcja > a.przycisk-tekst { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
@media (min-width: 768px) { .karta-sekcja { padding: 20px 22px; } }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.chipy .znacznik { padding: 5px 13px; font-size: var(--fs-14); }
/* kafle liczbowe, które nie są linkami (13): ten sam wygląd co .kpi a z v2 */
.kpi div.kpi__kafel {
--akcent: var(--sliwka-700);
flex: 1 1 auto; position: relative; display: flex; align-items: center; gap: 16px; min-height: 52px; overflow: hidden;
padding: 6px 18px 6px 24px; background: var(--biel); border: 1px solid var(--panel-ramka); border-radius: var(--promien);
}
.kpi div.kpi__kafel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--akcent); }
.kpi div.kpi__kafel--uwaga { --akcent: var(--uwaga); }
.kpi div.kpi__kafel--ok { --akcent: var(--ok); }
@media (min-width: 640px) {
.kpi div.kpi__kafel { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px 16px 26px; }
}
/* ---------- 3. Skrzynka (ekran 11) ---------- */
.skrzynka { display: grid; gap: 20px; align-items: start; }
.skrzynka > * { min-width: 0; }
@media (min-width: 768px) { .skrzynka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }
@media (min-width: 1024px) { .skrzynka { grid-template-columns: 340px minmax(0, 1fr); column-gap: 24px; } }
@media (min-width: 1280px) { .skrzynka { grid-template-columns: 380px minmax(0, 1fr); } }
.skrzynka__lista { overflow: hidden; }
.skrzynka__filtry { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 12px 10px; border-bottom: 1px solid var(--panel-ramka); }
.skrzynka__filtry .wybory { gap: 8px; }
.skrzynka__filtry .wybor span { padding: 0 10px; }
.skrzynka__watki > li + li { border-top: 1px solid var(--panel-ramka); }
.skrzynka__stopka { display: flex; justify-content: center; padding: 4px 8px; border-top: 1px solid var(--panel-ramka); }
.watek {
display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start;
padding: 14px 16px; color: inherit; text-decoration: none;
}
.watek:hover { background: var(--tlo-zaznaczone); }
.watek:focus-visible { outline-offset: -3px; }
.watek[aria-current="true"] { background: var(--sliwka-50); box-shadow: inset 4px 0 0 var(--sliwka-700); }
.watek__tresc { display: grid; gap: 3px; min-width: 0; }
.watek__gora { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.watek__nadawca { font-size: var(--fs-15); font-weight: 700; line-height: 1.35; color: var(--tekst-900); }
.watek__czas { flex: none; font-size: var(--fs-14); font-weight: 600; line-height: 1.35; color: var(--tekst-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.watek__temat { font-size: var(--fs-15); font-weight: 600; line-height: 1.4; color: var(--sliwka-900); }
.watek__fragment { font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-600); text-wrap: pretty; }
.watek__znaczniki { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.watek-widok { overflow: hidden; }
.watek-widok__gora { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; border-bottom: 1px solid var(--panel-ramka); }
.watek-widok__kto { display: flex; align-items: flex-start; gap: 14px; flex: 1 1 220px; min-width: 0; }
.watek-widok h2 { font-size: var(--fs-18); line-height: 1.3; color: var(--sliwka-900); }
.watek-widok__dane { display: grid; margin-top: 2px; font-size: var(--fs-14); line-height: 1.5; color: var(--tekst-600); }
.maska { letter-spacing: -0.12em; margin-inline: 0.1em; }
.watek-widok__telefon { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.watek-widok__telefon .przycisk-tekst { padding-inline: 8px; }
.watek-widok__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rozmowa { display: grid; gap: 14px; padding: 20px; }
.dymek { max-width: min(92%, 560px); padding: 12px 16px; border: 1px solid var(--panel-ramka); border-radius: var(--promien); }
.dymek p { font-size: var(--fs-15); line-height: 1.55; color: var(--tekst-900); }
.dymek--klient { justify-self: start; background: var(--panel-tlo); border-top-left-radius: var(--promien-xxs); }
.dymek--piekarnia { justify-self: end; background: var(--sliwka-100); border-color: color-mix(in srgb, var(--sliwka-500) 22%, var(--sliwka-100)); border-top-right-radius: var(--promien-xxs); }
.dymek p.dymek__meta { margin-top: 8px; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--tekst-600); }
.dymek--piekarnia p.dymek__meta { color: var(--sliwka-700); }
.zalacznik { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.zalacznik .foto { flex: none; width: 96px; }
.zalacznik figcaption { font-size: var(--fs-14); line-height: 1.4; color: var(--tekst-600); }
.odpowiedz { display: grid; gap: 12px; padding: 18px 20px 20px; border-top: 1px solid var(--panel-ramka); background: color-mix(in srgb, var(--panel-tlo) 55%, var(--biel)); }
.szablony { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-szablon {
display: inline-flex; align-items: center; min-height: var(--cel); padding: 0 14px; text-align: left;
border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel);
font-size: var(--fs-14); font-weight: 600; line-height: 1.25; color: var(--sliwka-700);
}
.chip-szablon:hover { border-color: var(--sliwka-500); }
.odpowiedz__akcje { display: flex; flex-wrap: wrap; gap: 10px; }
/* ---------- 4. Komunikaty (ekran 12) ---------- */
.komunikaty-uklad { display: grid; gap: 24px; align-items: start; }
.komunikaty-uklad > * { min-width: 0; }
@media (min-width: 768px) { .komunikaty-uklad { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }
@media (min-width: 1024px) { .komunikaty-uklad { column-gap: 24px; } }
@media (min-width: 1360px) { .komunikaty-uklad { grid-template-columns: minmax(0, 1fr) 440px; } }
.lista-naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.lista-naglowek h2 { font-size: var(--fs-18); line-height: 1.3; color: var(--sliwka-900); }
.komunikaty__lista { display: grid; gap: 14px; margin-top: 14px; }
.kom { container: kom / inline-size; display: grid; gap: 14px; padding: 16px 18px; }
.kom__gora { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.kom__nazwa { flex: 1 1 200px; min-width: 0; font-size: var(--fs-17); line-height: 1.3; color: var(--sliwka-900); }
.kom__dane { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.kom__dane dt { font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--tekst-600); }
.kom__dane dd { margin: 2px 0 0; font-size: var(--fs-15); font-weight: 500; line-height: 1.4; color: var(--tekst-900); font-variant-numeric: tabular-nums; }
@container kom (min-width: 540px) { .kom__dane { grid-template-columns: 0.7fr 1.5fr 1fr 1fr; } }
.kom__stopka { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding-top: 6px; border-top: 1px solid var(--panel-ramka); }
.kom__powtarza { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--sliwka-700); }
.kom__akcje { display: flex; flex-wrap: wrap; margin-left: auto; }
.nowy-kom { position: relative; align-self: start; }
@media (min-width: 1360px) and (min-height: 760px) { .nowy-kom { position: sticky; top: 24px; } }
.nowy-kom .sekcja-f__pola { gap: 20px; }
.panel select.wejscie { padding-right: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowy-kom legend { padding: 0; }
.grupa-czasu legend { margin-bottom: 8px; }
.para-data { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; }
@container karta (max-width: 319px) { .para-data { grid-template-columns: minmax(0, 1fr); } }
.podsumowanie-czasu { padding: 10px 14px; border-radius: var(--promien-s); background: var(--sliwka-50); color: var(--tekst-900); }
.para-data label { display: block; margin-bottom: 4px; }
.wejscie:disabled { background: var(--panel-tlo); border-color: var(--panel-ramka); color: var(--tekst-600); cursor: not-allowed; }
.dropzone--nieaktywna { border-color: var(--panel-ramka); background: var(--panel-tlo); }
.dropzone--nieaktywna .ikona { color: var(--tekst-600); }
.dropzone--nieaktywna strong { color: var(--tekst-900); }
.nowy-kom__akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.podglad-kom { display: grid; gap: 10px; }
.podglad-kom__pasek { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; background: var(--komunikat-tlo); color: var(--komunikat-tekst); border-bottom: 2px solid var(--zloto-500); text-align: left; }
.podglad-kom__ikona { flex: none; width: 20px; height: 20px; color: var(--zloto-500); }
.podglad-kom__pasek p { flex: 1 1 auto; margin: 0; padding-block: 3px; font-size: var(--fs-15); font-weight: 600; line-height: 1.25; color: var(--komunikat-tekst); text-wrap: balance; }
.podglad-kom__link { flex: none; display: inline-flex; align-items: center; padding: 0 8px; font-size: var(--fs-15); font-weight: 700; line-height: 1.2; color: var(--komunikat-tekst); text-decoration: underline; text-underline-offset: 3px; }
.podglad-kom__kafel p::first-letter { text-transform: uppercase; }
.podglad-kom__przycisk { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--promien-pelny); background: var(--sliwka-900); color: var(--biel); font-size: var(--fs-13); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.podglad-kom__kafel { display: grid; gap: 8px; justify-items: start; padding: 16px; border: 1px solid var(--zloto-linia); border-radius: var(--promien); background: var(--krem-100); }
.podglad-kom__kafel h4 { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.15; color: var(--sliwka-900); }
.podglad-kom__kafel p { font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600); }
.podglad-kom__podpis { margin-top: -4px; }
/* ---------- 5. Klient i mapy (ekran 13) ---------- */
.profil { display: grid; gap: 16px 24px; padding: 20px; grid-template-areas: "kto" "akcje" "dane"; }
.profil__kto { grid-area: kto; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 16px; align-items: center; min-width: 0; }
.profil__kto .znacznik { grid-column: 1 / -1; justify-self: start; }
.profil__akcje { grid-area: akcje; display: flex; flex-direction: column; align-items: stretch; gap: 8px; align-self: start; min-width: 0; }
.profil__dane { grid-area: dane; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; min-width: 0; }
.profil__dane a, .profil__dane p { display: flex; align-items: center; gap: 12px; min-height: var(--cel); font-size: var(--fs-16); font-weight: 600; line-height: 1.3; color: var(--sliwka-700); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.profil__dane p { color: var(--tekst-900); }
.profil__dane .ikona { color: var(--tekst-600); }
@media (min-width: 768px) {
.profil { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); grid-template-areas: "kto akcje" "dane akcje"; padding: 24px; }
.profil__kto { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (min-width: 1024px) { .profil { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; } }
@media (min-width: 1280px) { .profil__akcje { flex-direction: row; align-self: center; } }
.karta--tabela-historia { container: tabela / inline-size; }
.tabela--historia .tabela__nazwa { font-size: var(--fs-15); }
.tabela-naglowek { padding: 18px 18px 12px; }
.tabela-naglowek h2 { font-size: var(--fs-17); line-height: 1.3; color: var(--sliwka-900); }
@media (min-width: 768px) { .tabela-naglowek { padding: 20px 22px 14px; } }
@container tabela (max-width: 599px) {
.tabela--historia, .tabela--historia tbody { display: block; }
.tabela--historia thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabela--historia tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--panel-ramka); }
.tabela--historia tr:last-child { border-bottom: 0; }
.tabela--historia td, .tabela--historia td:first-child, .tabela--historia td:last-child { display: block; padding: 0; border: 0; }
.tabela--historia td:nth-child(1) { order: 1; }
.tabela--historia td:nth-child(2) { order: 2; margin-right: auto; }
.tabela--historia td:nth-child(5) { order: 3; }
.tabela--historia td:nth-child(3) { order: 4; flex: 1 1 calc(100% - 100px); min-width: 0; }
.tabela--historia td:nth-child(4) { order: 5; font-weight: 600; color: var(--tekst-900); }
}
.notatka { display: grid; gap: 10px; }
.notatka .przycisk { justify-self: start; }
/* mapy: schemat poglądowy (SVG inline), kolory tylko z tokenów */
.mapa { width: 100%; max-width: 520px; height: auto; border: 1px solid var(--panel-ramka); border-radius: var(--promien-m); background: var(--biel); }
.mapa__ziemia { fill: var(--sliwka-50); stroke: var(--sliwka-100); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.mapa__rzeka { fill: none; stroke: var(--rzeka); stroke-width: 1.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mapa__kolko { fill: var(--kolko); stroke: var(--sliwka-700); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mapa__kolko--dom { fill: var(--kolko-dom); stroke: var(--zloto-700); }
.mapa__punkt { fill: var(--sliwka-500); }
.mapa text { fill: currentColor; font-family: var(--czcionka-ui); font-size: 14px; font-weight: 600; }
.mapa__nazwa { color: var(--tekst-900); paint-order: stroke; stroke: var(--sliwka-50); stroke-width: 4px; stroke-linejoin: round; }
.mapa__nazwa--lewo { text-anchor: end; }
.mapa__nazwa--tlo { color: var(--tekst-600); font-weight: 500; }
.mapa__liczba { color: var(--sliwka-900); font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.mapa__liczba--maly { font-size: 13px; }
.mapa__opis { color: var(--tekst-600); font-style: italic; font-weight: 500; paint-order: stroke; stroke: var(--sliwka-50); stroke-width: 4px; stroke-linejoin: round; }
.mapa__pin { fill: var(--sliwka-700); stroke: var(--biel); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mapa__pin-oczko { fill: var(--zloto-500); }
.mapa__piekarnia { fill: var(--sliwka-900); stroke: var(--zloto-500); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.skad { display: grid; gap: 10px; }
.skad__podpis { display: flex; align-items: center; gap: 10px; font-size: var(--fs-16); font-weight: 600; line-height: 1.35; color: var(--tekst-900); }
.skad__podpis .ikona { color: var(--sliwka-700); }
.mapa-legenda { display: grid; gap: 4px; font-size: var(--fs-14); line-height: 1.4; color: var(--tekst-600); }
.mapa-legenda li { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.mapa-legenda i { flex: none; display: block; }
.mapa-legenda__kolko { width: 16px; height: 16px; border: 1.5px solid var(--sliwka-700); border-radius: 50%; background: var(--kolko); }
.mapa-legenda__dom { width: 16px; height: 16px; border: 1.5px solid var(--zloto-700); border-radius: 50%; background: var(--kolko-dom); }
.mapa-legenda__rzeka { width: 16px; height: 0; border-top: 2px solid var(--rzeka); }
.mapa-legenda__klientka { display: grid; place-items: center; width: 16px; height: 16px; }
.mapa-legenda__pin { width: 16px; height: 16px; fill: var(--sliwka-700); stroke: none; }
.mapa-legenda__piekarnia { width: 10px; height: 10px; margin: 3px; border: 1.5px solid var(--zloto-500); background: var(--sliwka-900); transform: rotate(45deg); }
.mapa-wnioski { margin-top: 2px; }
.mapa-link, .klientka__profil { justify-self: start; padding-inline: 0; }
/* ---------- 6. Logowanie (ekrany 14 i 14b) ---------- */
body.logowanie-strona { --wybrane: var(--sliwka-900); background: var(--krem-50); }
.logowanie { min-height: 100vh; display: grid; place-items: center; padding: 24px var(--gutter); }
.logowanie__lewa { width: 100%; display: grid; justify-items: center; }
.logowanie__karta { width: 100%; max-width: 440px; padding: 32px 24px 28px; border-radius: var(--promien-l); text-align: center; }
.logowanie__karta .logo { height: 72px; margin-inline: auto; }
.logowanie__karta h1 { margin-top: 20px; font-size: var(--fs-32); line-height: 1.1; text-wrap: balance; }
.logowanie__karta > p:not(.pomoc) { margin-top: 12px; font-size: var(--fs-16); line-height: 1.55; color: var(--tekst-600); text-wrap: balance; }
.logowanie__karta form { display: grid; gap: 16px; margin-top: 24px; text-align: left; }
.logowanie__karta .pomoc { text-align: center; text-wrap: balance; }
.logowanie__pod { display: grid; justify-items: center; gap: 0; margin-top: 8px; }
.logowanie__koperta { display: grid; place-items: center; width: 80px; height: 80px; margin: 24px auto 0; border-radius: 50%; background: var(--sliwka-100); color: var(--sliwka-700); }
.logowanie__koperta + h1 { margin-top: 20px; }
.logowanie__akcje { display: grid; margin-top: 24px; }
.logowanie__uwaga { margin-top: 16px; }
.logowanie__mozaika { display: none; }
@media (min-width: 480px) { .logowanie__karta { padding: 40px 36px 32px; } }
/* Od 768 px: lewa połówka = karta (mieści się poza pasem zgięcia x 421-469 przy 890 px), prawa = mozaika zdjęć. Na telefonie mozaiki nie ma. */
@media (min-width: 768px) {
.logowanie { grid-template-columns: 1fr 1fr; place-items: stretch; padding: 0; }
.logowanie__lewa { align-content: center; padding: 24px; }
.logowanie__karta { max-width: 360px; padding: 32px 24px 24px; }
.logowanie__mozaika { display: block; padding: 16px 16px 16px 40px; background: var(--krem-100, var(--panel-tlo)); }
}
@media (min-width: 1024px) { .logowanie__karta { max-width: 400px; } .logowanie__lewa { padding: 32px; } }
/* Mozaika 2 x 3: kolumny o różnych wysokościach (siatka 6 wierszy: lewa 3+2+1, prawa 2+3+1), promień 14 px, odstęp 8 px, ciemniejsza dolna krawędź.
Zdjęcie z public/mozaika/NN.webp leży NAD gradientem: gdy pliku nie ma, widać gradient z podpisem kursywą (podmiana plików bez kodu). */
.mozaika { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 8px; height: calc(100vh - 32px); min-height: 480px; margin: 0; padding: 0; list-style: none; }
.mozaika__kafel { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 14px; background-size: cover; background-position: center; }
/* SPEC-ZDJECIA (18.10.2026): zdjęcie kafla jako ![]()
(adres z bazy nie może trafić do arkusza ani do style=""); gradient i url() z CSS zostają pod spodem jako zapas */
.mozaika__obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mozaika__kafel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(21 10 43 / 0.55), transparent 55%); }
.mozaika__podpis { position: relative; z-index: 1; padding: 14px 16px; font-family: var(--font-naglowkowy, 'Cormorant Garamond', Georgia, serif); font-style: italic; font-size: var(--fs-17); line-height: 1.25; color: var(--krem-staly, #fbf8f2); text-wrap: balance; }
.mozaika__kafel--1 { grid-column: 1; grid-row: 1 / span 3; background-image: url('/mozaika/01.webp'), linear-gradient(160deg, #5b2a8c, #300070 70%); }
.mozaika__kafel--2 { grid-column: 2; grid-row: 1 / span 2; background-image: url('/mozaika/02.webp'), linear-gradient(200deg, #9c7a2e, #6b4c12 80%); }
.mozaika__kafel--3 { grid-column: 1; grid-row: 4 / span 2; background-image: url('/mozaika/03.webp'), linear-gradient(150deg, #8a4fb8, #3d1a66 85%); }
.mozaika__kafel--4 { grid-column: 2; grid-row: 3 / span 3; background-image: url('/mozaika/04.webp'), linear-gradient(190deg, #a8843a, #6e5018 85%); }
.mozaika__kafel--5 { grid-column: 1; grid-row: 6; background-image: url('/mozaika/05.webp'), linear-gradient(140deg, #6e3a9d, #2a0a52 90%); }
.mozaika__kafel--6 { grid-column: 2; grid-row: 6; background-image: url('/mozaika/06.webp'), linear-gradient(170deg, #946f26, #5e410f 90%); }
/* ---------- 7. Karta zamówienia (ekran 15) ---------- */
.pozycje { display: grid; }
.pozycja { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--panel-ramka); }
.pozycja:first-child { padding-top: 0; }
.pozycja__nazwa { font-size: var(--fs-16); line-height: 1.4; color: var(--tekst-900); }
.pozycja__nazwa strong { font-weight: 700; }
.pozycja__opcje { display: block; margin-top: 2px; font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-900); }
.pozycja__opcje span { color: var(--tekst-600); }
.pozycja__ile { margin-top: 0; font-weight: 600; }
.pozycja__cena { font-size: var(--fs-16); font-weight: 700; line-height: 1.4; color: var(--tekst-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.suma-zam { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.suma-zam span { font-size: var(--fs-15); font-weight: 600; color: var(--tekst-600); }
.suma-zam strong { font-family: var(--czcionka-naglowki); font-size: var(--fs-32); font-weight: 600; line-height: 1.1; color: var(--sliwka-900); font-variant-numeric: lining-nums; white-space: nowrap; }
.dane-lista { display: grid; margin: 0; }
.dane-lista > div { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: var(--cel); padding: 6px 0; border-bottom: 1px solid var(--panel-ramka); }
.dane-lista > div:last-child { border-bottom: 0; }
.dane-lista dt { font-size: var(--fs-14); line-height: 1.4; color: var(--tekst-600); }
.dane-lista dd { margin: 0; font-size: var(--fs-15); font-weight: 600; line-height: 1.4; color: var(--tekst-900); }
.zdjecie-tortu { display: grid; gap: 14px; }
.zdjecie-tortu .przycisk { justify-self: start; }
.zdjecie-tortu .foto { max-width: 520px; }
.os-czasu { display: grid; margin: 0; padding: 0; list-style: none; }
.os-czasu li { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 14px; padding: 0 0 18px 30px; }
.os-czasu li:last-child { padding-bottom: 0; }
.os-czasu li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sliwka-700); box-shadow: 0 0 0 4px var(--biel); }
.os-czasu li::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: -2px; width: 2px; background: var(--panel-ramka); }
.os-czasu li:last-child::after { display: none; }
.os-czasu li.os-czasu__zaplanowane::before { background: var(--biel); border: 2px solid var(--sliwka-700); }
.os-czasu li.os-czasu__czeka::before { background: var(--biel); border: 2px dashed var(--obrys); }
.os-czasu__czas { font-size: var(--fs-14); font-weight: 700; line-height: 1.5; color: var(--tekst-900); font-variant-numeric: tabular-nums; }
.os-czasu__opis { display: block; font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-900); }
.os-czasu__opis .ikona { display: inline-block; margin-left: 6px; vertical-align: -3px; color: var(--ok); }
.os-czasu__czeka .os-czasu__czas, .os-czasu__czeka .os-czasu__opis { font-weight: 500; color: var(--tekst-600); }
@container karta-sekcja (max-width: 399px) {
.os-czasu li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.klientka { display: grid; gap: 2px; justify-items: start; }
.klientka__nazwa { font-size: var(--fs-17); font-weight: 700; line-height: 1.4; color: var(--tekst-900); }
.klientka a, .klientka p.klientka__wiersz { display: flex; align-items: center; gap: 10px; min-height: var(--cel); font-size: var(--fs-15); font-weight: 600; line-height: 1.3; color: var(--sliwka-700); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.klientka p.klientka__wiersz { color: var(--tekst-900); }
.klientka .ikona { color: var(--tekst-600); }
.klientka__podsumowanie { font-size: var(--fs-14); line-height: 1.5; color: var(--tekst-900); }
/* ---------- 8. Uzupełnienia po recenzji (W2, W3, S6, S7, N1-N3) ---------- */
/* pasek uwagi na karcie zamówienia: klientka napisała w sprawie zamówienia. Akcent boczny jako cień wewnętrzny, żeby
treść była symetryczna względem środka ekranu (od 768 px dwie połówki z rynną, nic w pasie zgięcia) */
.pasek-uwagi {
display: grid; gap: 12px 16px; align-items: center; padding: 16px 18px;
border: 1px solid color-mix(in srgb, var(--uwaga) 35%, var(--biel)); border-radius: var(--promien);
background: var(--uwaga-tlo); box-shadow: inset 4px 0 0 var(--uwaga);
}
.pasek-uwagi__opis { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding-left: 4px; }
.pasek-uwagi__ikona { flex: none; margin-top: 1px; color: var(--uwaga-tekst); }
.pasek-uwagi__tekst { font-size: var(--fs-16); line-height: 1.5; color: var(--tekst-900); }
.pasek-uwagi__tekst strong { font-weight: 700; color: var(--uwaga-tekst); }
.pasek-uwagi__akcje { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pasek-uwagi__akcje .przycisk { flex: 1 1 200px; }
@media (min-width: 768px) {
.pasek-uwagi { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); }
.pasek-uwagi__akcje { flex-direction: column; flex-wrap: nowrap; }
.pasek-uwagi__akcje .przycisk { flex: none; }
}
@media (min-width: 1024px) {
.pasek-uwagi { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
.pasek-uwagi__akcje { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
}
.akcja-z-podpowiedzia { display: grid; gap: 6px; }
.akcja-z-podpowiedzia .pomoc { max-width: 28em; }
/* alergeny do uniknięcia (pole wyboru klienta przy zamówieniu) jako chipy, nie wolny tekst */
.alergeny-zam { display: grid; gap: 8px; padding-top: 4px; }
.alergeny-zam__etykieta { font-size: var(--fs-15); font-weight: 700; line-height: 1.4; color: var(--tekst-900); }
.alergeny-zam__zrodlo { font-size: var(--fs-14); line-height: 1.4; color: var(--tekst-600); }
.os-czasu li.os-czasu__uwaga::before { background: var(--uwaga); }
/* link do zamówienia pod wątkiem (poza głównym , żeby nie zagnieżdżać elementów interaktywnych) */
.watek__zamowienie {
display: flex; align-items: center; width: fit-content; min-width: var(--cel); min-height: var(--cel);
margin: -6px 16px 6px 74px; font-size: var(--fs-14); font-weight: 600; color: var(--sliwka-700);
text-decoration: underline; text-underline-offset: 3px;
}
.karta--lista { overflow: hidden; }
.karta--lista .skrzynka__watki { border-top: 1px solid var(--panel-ramka); }
.skrzynka__stopka { flex-direction: column; align-items: center; padding: 10px 8px 4px; }
/* telefon: wątek stoi pod listą, więc na jego górze jest powrót do listy */
.watek-widok__wroc { display: none; }
@media (max-width: 767px) {
.watek-widok__wroc {
display: flex; align-items: center; gap: 8px; min-height: var(--cel); padding: 0 20px;
border-bottom: 1px solid var(--panel-ramka); background: var(--panel-tlo);
font-size: var(--fs-14); font-weight: 600; color: var(--sliwka-700); text-underline-offset: 3px;
}
}
/* profil: bieżące zamówienie w tabeli i chip "w toku" przy kaflu */
.tabela__link { display: inline-flex; align-items: center; min-height: var(--cel); min-width: var(--cel); font-weight: 600; color: var(--sliwka-700); text-decoration: underline; text-underline-offset: 3px; }
.tabela__dodatek { color: var(--tekst-600); }
.kpi__opis .znacznik.kpi__chip { margin-left: 8px; vertical-align: middle; }
/* ---------- 9. Zmień szczegóły zamówienia (ekran 16) ---------- */
.poz-edycja { display: grid; gap: 16px; min-width: 0; }
.poz-edycja + .poz-edycja { padding-top: 18px; border-top: 1px solid var(--panel-ramka); }
.poz-edycja__nazwa { font-size: var(--fs-16); line-height: 1.35; color: var(--tekst-900); }
.poz-edycja__ilosc { display: flex; align-items: flex-end; gap: 12px; }
.poz-edycja__ilosc .z-jednostka { max-width: 148px; }
.akcje-formularza { display: flex; flex-wrap: wrap; gap: 10px; }
.akcje-formularza .przycisk { flex: 1 1 200px; }
/* telefon: podsumowanie "Co się zmieni" i "Po zapisaniu" stoją przed dolnymi przyciskami, więc zapis wysyłający e-mail jest po przeczytaniu różnic
(formularz chwilowo "znika" z układu, jego karty i przyciski trafiają do siatki strony; od 768 px znów dwie połówki) */
@media (max-width: 767px) {
form.uklad-dwa__kol { display: contents; }
.uklad-dwa > .uklad-dwa__kol:not(form) { order: 1; }
.uklad-dwa > form.uklad-dwa__kol > .akcje-formularza { order: 2; }
}
@media (min-width: 768px) { .akcje-formularza .przycisk { flex: 0 0 auto; } }
.para-data--okno { grid-template-columns: minmax(0, 1fr) 150px; }
@container karta-sekcja (max-width: 319px) { .para-data--okno { grid-template-columns: minmax(0, 1fr); } }
.roznice { display: grid; gap: 14px; margin: 0; }
.roznica { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--panel-ramka); }
.roznica:last-child { padding-bottom: 0; border-bottom: 0; }
.roznica dt { font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--tekst-600); }
.roznica dd { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; margin: 0; font-size: var(--fs-15); line-height: 1.45; color: var(--tekst-900); }
.roznica__etykieta { font-size: var(--fs-14); font-weight: 600; color: var(--tekst-600); }
.roznica__bylo .roznica__wartosc { color: var(--tekst-600); text-decoration: line-through; }
.roznica__bedzie .roznica__wartosc { font-weight: 700; }
.alergeny-zam__zmien { justify-self: start; padding-inline: 0; }
/* ---------- Dodatki fundamentu: wylogowanie jako formularz POST i przełącznik motywu na ciemnych powierzchniach panelu ---------- */
.wyloguj-formularz { margin: 0; }
.menu-boczne__stopka .wyloguj-przycisk, .menu-mobilne__lista .wyloguj-przycisk {
display: inline-flex; align-items: center; min-height: var(--cel); padding: 0; border: 0; background: none;
color: var(--zloto-500); font-size: var(--fs-14); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.menu-mobilne__lista .wyloguj-przycisk { min-height: 52px; font-size: var(--fs-17); }
.pasek-mobilny .przelacznik-motywu, .menu-boczne .przelacznik-motywu {
border-color: var(--menu-linia); background: transparent; color: var(--menu-tekst);
}
.pasek-mobilny .przelacznik-motywu:hover, .menu-boczne .przelacznik-motywu:hover { border-color: var(--menu-tekst); color: var(--bialy-staly); }
.pasek-mobilny .przelacznik-motywu { width: var(--cel); height: var(--cel); }
.menu-boczne__motyw { margin-bottom: 12px; }
/* =============================================================================
Dopisane przez wykonawcę C (08.10.2026): ekrany 17-21 z makiet v3-panel (styl-v3.css, linie 437-724):
wydruki A4 (lista na dziś, zamówienie do hurtowni), okno potwierdzenia (dialog), wyszukiwarka zamówień,
pojemność dnia, notatki. Bez zmian treści reguł (tokeny dzień/noc z styl.css).
============================================================================= */
/* ---------- 10. Dokumenty do druku (17, 18) i podgląd dokumentu w panelu (18b) ---------- */
/* Arkusz to kartka A4. Na ekranie jest białą kartą na szarym tle (od 1024 px szerokości A4, poniżej dopasowuje się do ekranu,
przy Duo rozłożonym stoi w lewej połówce), w druku zajmuje całą stronę. Wnętrze reaguje na szerokość samej kartki
(zapytanie kontenerowe), nie ekranu: od 600 px wiersze i tabela jak na papierze, poniżej karty jedna pod drugą. */
body.druk-strona { background: var(--panel-tlo); color: var(--druk-tekst); }
.arkusz {
container: arkusz / inline-size;
padding: 20px 16px 24px; background: var(--druk-tlo); color: var(--druk-tekst);
border: 1px solid var(--panel-ramka); border-radius: var(--promien-xs);
font-family: var(--czcionka-ui); font-size: 13pt; line-height: 1.35;
}
body.druk-strona > .arkusz { width: calc(100% - 2 * var(--gutter)); max-width: 210mm; margin: 24px auto; box-shadow: var(--cien); }
@media (min-width: 1024px) { .arkusz { padding: 14mm; } }
@media (min-width: 768px) and (max-width: 1023px) {
body.druk-strona > .arkusz { width: calc((100% - var(--rynna)) / 2 - var(--gutter)); margin-left: var(--gutter); margin-right: 0; }
}
.arkusz h1, .arkusz h2, .arkusz h3 { margin: 0; font-family: var(--czcionka-ui); font-weight: 700; letter-spacing: 0; color: var(--druk-tekst); }
.arkusz p, .arkusz ul, .arkusz dl, .arkusz dd { margin: 0; }
@media print {
@page { size: A4; margin: 14mm; }
html, body.druk-strona { background: var(--druk-tlo); }
.arkusz, body.druk-strona > .arkusz { width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
}
/* 17: lista na dziś (czarno-biała, 13-14 pt) */
.druk-naglowek { padding-bottom: 8pt; border-bottom: 2.5pt solid var(--druk-tekst); }
.arkusz .druk-naglowek h1 { font-size: 26pt; line-height: 1.1; }
.druk-naglowek__info { margin-top: 4pt; font-size: 14pt; font-weight: 600; line-height: 1.3; }
.druk-grupa { margin-top: 12pt; }
.druk-grupa__gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2pt 12pt; padding-bottom: 3pt; border-bottom: 1.5pt solid var(--druk-tekst); break-after: avoid; }
.arkusz .druk-grupa__gora h2 { font-size: 15pt; line-height: 1.2; }
.druk-grupa__razem { font-size: 13pt; font-weight: 600; }
.druk-wiersze { display: grid; padding: 0; list-style: none; }
.druk-wiersz { display: grid; grid-template-columns: 9mm minmax(0, 1.1fr) 22mm minmax(0, 1.4fr) 24mm; column-gap: 3mm; align-items: start; padding: 6pt 0; border-bottom: 0.75pt solid var(--druk-tekst); break-inside: avoid; }
.druk-wiersz:last-child { border-bottom: 0; }
.druk-kratka { display: block; width: 7mm; height: 7mm; margin-top: 1pt; border: 1.5pt solid var(--druk-tekst); }
.druk-kto { font-size: 14pt; font-weight: 700; line-height: 1.25; }
.druk-nr { display: block; font-size: 13pt; font-weight: 600; font-variant-numeric: tabular-nums; }
.druk-ilosc { font-weight: 700; }
.druk-szczegoly { display: grid; gap: 2pt; justify-items: start; }
.druk-napis { font-size: 14pt; font-weight: 700; }
.druk-odbior { display: grid; font-weight: 600; font-variant-numeric: tabular-nums; }
@container arkusz (max-width: 599px) {
.druk-wiersz { grid-template-columns: 9mm minmax(0, 1fr); grid-template-areas: "k kto" "k ilosc" "k szcz" "k odb"; row-gap: 2pt; }
.druk-kratka { grid-area: k; }
.druk-kto { grid-area: kto; }
.druk-ilosc { grid-area: ilosc; }
.druk-szczegoly { grid-area: szcz; }
.druk-szczegoly:empty { display: none; }
.druk-odbior { grid-area: odb; display: block; }
}
.druk-sekcja { margin-top: 14pt; break-inside: avoid; }
.arkusz .druk-sekcja h2 { padding-bottom: 3pt; border-bottom: 1.5pt solid var(--druk-tekst); font-size: 15pt; line-height: 1.2; }
.druk-partie { display: grid; gap: 8pt; margin-top: 8pt; padding: 0; list-style: none; }
.druk-partia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2pt 8pt; font-size: 14pt; }
.druk-partia strong { min-width: 22mm; }
.druk-pole { display: inline-block; flex: 0 0 34mm; height: 1.2em; border-bottom: 1.5pt solid var(--druk-tekst); }
.druk-odbiory { display: grid; margin: 6pt 0 0; padding: 0; list-style: none; }
.druk-odbiory li { display: grid; grid-template-columns: 9mm 33mm minmax(0, 1fr); column-gap: 3mm; align-items: start; padding: 5pt 0; border-bottom: 0.75pt solid var(--druk-tekst); }
.druk-odbiory li:last-child { border-bottom: 0; }
.druk-odbiory__godz { font-weight: 700; font-variant-numeric: tabular-nums; }
.druk-odbiory__opis { display: grid; }
@container arkusz (max-width: 599px) {
.druk-odbiory li { grid-template-columns: 9mm minmax(0, 1fr); }
.druk-odbiory__godz { grid-column: 2; }
.druk-odbiory__opis { grid-column: 2; }
}
.druk-stopka { margin-top: 14pt; padding-top: 5pt; border-top: 0.75pt solid var(--druk-tekst); font-size: 10.5pt; }
/* 18: zamówienie do hurtowni (A4; fiolet i złoto tylko w nagłówku) */
.arkusz--hurt { font-size: 11pt; }
.hurt-naglowek { padding-bottom: 10pt; border-bottom: 2.5pt solid var(--zloto-500); }
.hurt-naglowek__gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8pt 18pt; }
.hurt-naglowek .logo { height: 18mm; width: auto; }
.hurt-naglowek__dane { font-size: 10.5pt; line-height: 1.4; }
.arkusz .hurt-tytul { margin-top: 10pt; font-family: var(--czcionka-naglowki); font-size: 26pt; font-weight: 600; line-height: 1.1; color: var(--sliwka-900); }
.hurt-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6pt 14pt; margin-top: 12pt; }
.hurt-meta dt { font-size: 10.5pt; font-weight: 400; }
.hurt-meta dd { margin: 0; font-weight: 700; }
@container arkusz (max-width: 599px) { .hurt-meta { grid-template-columns: minmax(0, 1fr); } }
.hurt-tabela { width: 100%; margin-top: 10pt; border-collapse: collapse; table-layout: fixed; font-size: 10.5pt; }
.hurt-tabela th { padding: 4pt 5pt; border-top: 1.5pt solid var(--druk-tekst); border-bottom: 1.5pt solid var(--druk-tekst); font-weight: 700; text-align: left; vertical-align: bottom; }
.hurt-tabela td { padding: 4.5pt 5pt; border-bottom: 0.5pt solid var(--druk-tekst); vertical-align: top; overflow-wrap: anywhere; }
.hurt-tabela .hurt-liczba { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.hurt-tabela .hk-lp { width: 9mm; } .hurt-tabela .hk-kod { width: 23mm; } .hurt-tabela .hk-ilosc { width: 13mm; } .hurt-tabela .hk-jedn { width: 38mm; } .hurt-tabela .hk-uwagi { width: 32mm; }
.hurt-prod { display: flex; align-items: flex-start; gap: 6pt; }
.hurt-prod__tekst { display: grid; gap: 1pt; min-width: 0; }
.hurt-mini { flex: none; width: 11mm; height: 11mm; border-radius: 1.5mm; object-fit: cover; }
.hurt-mini--ikona { padding: 1.5mm; border: 0.5pt solid var(--druk-tekst); fill: none; stroke: var(--druk-tekst); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hurt-ostatnio { display: block; font-size: 8.5pt; font-weight: 400; line-height: 1.3; }
.hurt-razem { margin-top: 8pt; text-align: right; font-weight: 700; }
.hurt-uwagi { margin-top: 12pt; break-inside: avoid; }
.arkusz .hurt-uwagi h3, .arkusz .hurt-uwagi h2 { font-size: 11pt; }
.hurt-uwagi__pole { height: 26mm; margin-top: 4pt; border: 0.75pt solid var(--druk-tekst); }
.hurt-stopka { margin-top: 14pt; padding-top: 5pt; border-top: 0.75pt solid var(--druk-tekst); font-size: 10.5pt; }
@container arkusz (max-width: 599px) {
.hurt-tabela, .hurt-tabela tbody { display: block; }
.hurt-tabela colgroup { display: none; }
.hurt-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hurt-tabela tr { display: grid; grid-template-columns: 8mm minmax(0, 1fr); column-gap: 6pt; row-gap: 1pt; padding: 7pt 0; border-bottom: 0.5pt solid var(--druk-tekst); }
.hurt-tabela td { display: block; padding: 0; border: 0; text-align: left; }
.hurt-tabela td:empty { display: none; }
.hurt-tabela td:nth-child(1) { grid-row: 1 / span 5; font-weight: 700; }
.hurt-tabela td:nth-child(n+2) { grid-column: 2; }
.hurt-tabela td:nth-child(2) { font-weight: 700; }
.hurt-tabela td:nth-child(n+3)::before { content: attr(data-etykieta) ": "; font-weight: 400; }
.hurt-tabela .hurt-liczba { text-align: left; }
}
/* 18b: podgląd dokumentu w panelu, pasek akcji, e-mail do przedstawiciela */
.hurt-uklad { display: grid; gap: 20px; align-items: start; grid-template-areas: "akcje" "podglad" "mail"; }
.hurt-akcje { grid-area: akcje; min-width: 0; }
.hurt-podglad { grid-area: podglad; display: grid; gap: 12px; justify-items: start; min-width: 0; }
.hurt-podglad .arkusz { width: 100%; max-width: 210mm; }
.hurt-mail { grid-area: mail; }
@media (min-width: 768px) {
.hurt-uklad { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: var(--rynna); grid-template-areas: "podglad akcje" "podglad mail"; }
}
@media (min-width: 1024px) and (max-width: 1359px) {
.hurt-uklad { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "akcje" "podglad" "mail"; }
}
@media (min-width: 1360px) {
.hurt-uklad { grid-template-columns: minmax(0, 794px) 360px; grid-template-rows: auto 1fr; column-gap: 24px; grid-template-areas: "podglad akcje" "podglad mail"; }
}
.hurt-akcje__gora { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hurt-akcje__przyciski { display: grid; gap: 10px; }
@media (min-width: 1024px) and (max-width: 1359px) {
.hurt-akcje__przyciski { grid-auto-flow: column; justify-content: start; align-items: center; }
}
.hurt-akcje .przycisk .ikona { margin-right: 2px; }
.znacznik--podglad { white-space: normal; text-align: left; }
/* okno dialogowe (natywny