/* === TELEFON =================================================================================
Warstwa WYLACZNIE wizualna, dokladana na koncu (ostatni w index.html), zeby wygrywac
remisy specyficznosci z blokami @media juz obecnymi w components.css i sidebar.css.
ZASADY tej warstwy:
- nie zmienia zachowania aplikacji: zadnego display:none na tresci, zadnego chowania kolumn,
zadnego przestawiania kolejnosci -- na telefonie widac dokladnie te same dane co na monitorze,
tylko inaczej rozlozone;
- jeden prog: 760px, ten sam ktorego uzywa reszta arkuszy (drugi prog zrobilby martwa strefe,
w ktorej polowa regul juz dziala, a polowa jeszcze nie);
- nie cofa swiadomych decyzji podjetych wczesniej (np. wylaczenia sticky w tabeli kosztow,
components.css: "Przypiete kolumny ... razem zajmuja 448px").
Szuflada bocznego menu (hamburger + nakladka) jest w sidebar.css i dziala -- tutaj jej nie
ruszamy. Ten plik zajmuje sie tym, co jest ZA menu: tabelami, siatkami, polami i celami dotyku.
============================================================================================= */
@media (max-width:760px){
/* --- 1. Dlugie slowa nie rozpychaja ekranu -------------------------------------------------
Nazwiska pacjentow, nazwy uslug i nazwy kontrahentow z inFaktu potrafia byc dluzsze niz
szerokosc telefonu. `#cem-view` ma `overflow-x:hidden`, wiec takie slowo nie przewijaloby
strony -- ono by sie po prostu URWALO. Lamiemy je zamiast tracic. */
body{overflow-wrap:break-word}
/* Liczby i daty maja swoje `white-space:nowrap` w components.css i to zostaje -- kwota nigdy
nie ma sie zlamac w polowie. */
.cem-income-table td,.cem-income-table th{overflow-wrap:normal}
/* Wiersz reguly wynagrodzenia (Personel) rozklada sie na telefonie na jedna kolumne, ale jego
spany zostawaly `white-space:nowrap` z ukladu poziomego -- opis w rodzaju "400,00 zl / mies.
(dzielone Piotr/Robert wg podzialu...)" jechal 78px poza ekran i konczyl sie urwany.
W jednej kolumnie wiersz ma juz pelna szerokosc panelu, wiec same kwoty i tak sie nie zawijaja
-- lamie sie tylko to, co naprawde nie miesci sie w linii. */
.cem-rule-row>span{white-space:normal}
/* --- 2. Tabele bez wlasnego przewijania ----------------------------------------------------
Prawie kazda tabela w aplikacji siedzi juz w `.cem-table-scroll` albo w `
` i przewija sie w poziomie poprawnie. Zostaly trzy, ktore takiego
opakowania nie maja -- a poniewaz `#cem-view` tnie nadmiar (`overflow-x:hidden`), ich prawa
krawedz na telefonie po prostu znika razem z danymi.
`display:block` robi z tabeli zwykly blok, ktory moze miec pasek przewijania; wewnetrzne
pudelko tabeli zostaje tak szerokie, jak potrzebuje. Celowo wyliczone z nazwy, a nie regula
ogolna na `.cem-income-table` -- ogolna zabralaby `width:100%` tym tabelom, ktore JUZ maja
opakowanie, i zamiast wypelniac panel kurczylyby sie do tresci. */
section.cem-panel>.cem-income-table, /* Przychody -> rozliczenie fizycznej gotowki */
.cem-referral-source>.cem-income-table, /* Przychody -> zrodla polecen (w ) */
.cem-inf-kat-tabela{ /* inFakt -> zarzadzanie kategoriami */
display:block;max-width:100%;overflow-x:auto;
}
/* Bezwladnosc przewijania na iOS + pasek, ktory widac, ze jest. Bez tego nie wiadomo, ze
tabele w ogole mozna pociagnac w bok. */
.cem-table-scroll,.cem-hours-table-wrap,
section.cem-panel>.cem-income-table,.cem-referral-source>.cem-income-table,.cem-inf-kat-tabela{
-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
/* Kolumna akcji w tabeli kosztow jest przyklejona do PRAWEJ krawedzi (components.css:503).
Na telefonie mierzy 226px przy 342px widocznej szerokosci -- zostaje 116px na przewijanie
pozostalych 20 kolumn tabeli szerokiej na 2141px, czyli praktycznie nic sie nie da odczytac.
To ten sam problem i to samo rozwiazanie, ktore components.css zastosowal juz do czterech
przyklejonych kolumn po lewej ("...przy sticky przewijanie w poziomie nie odslania reszty
danych"): na waskim ekranie odklejamy, zeby przewijanie faktycznie cos pokazywalo.
Przyciski zostaja w wierszu i dzialaja tak samo -- zmienia sie tylko to, czy plyna z trescia. */
.cem-costs-table th:last-child,.cem-costs-table td:last-child{position:static;box-shadow:none}
/* --- 3. Marginesy: oddac tresci szerokosc ekranu -------------------------------------------
Na monitorze 20-24px z kazdej strony to oddech. Na 360px ekranie to 13% szerokosci zjedzone
przez puste miejsce, przez ktore kolumny robia sie nieczytelne. */
.cem-staff-grid{padding:10px;gap:12px}
.cem-barter-grid{padding:2px 10px 14px;gap:12px}
.cem-barter-toolbar{padding:12px 12px 10px;gap:10px}
.cem-cc-section-label{margin:18px 12px 2px}
.cem-toolbar{padding:10px 12px 0}
/* --- 4. Siatki, ktore nie umialy sie zwezic ------------------------------------------------
`minmax(320px,1fr)` na ekranie 360px szerokosci: po odjeciu marginesu panelu (2x10px) i jego
wypelnienia (2x12px) zostaje 316px -- mniej niz 320px minimum, wiec kolumna wystaje poza
panel. `min(...,100%)` to idiom uzyty juz w `.cem-staff-grid` w components.css: na szerokim
ekranie dziala jak dotad, na waskim pozwala kolumnie zejsc do szerokosci rodzica. */
.cem-int-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.rem-osoby{grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),1fr))}
.cem-checkbox-grid{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.cem-income-grid{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
/* Kafelek barteru mial sztywne `min-width:220px` przy `flex-wrap`, wiec na waskim ekranie
wystawal zamiast sie zawijac. */
.cem-barter-chip{min-width:0;padding:14px 14px 16px}
/* Trzy kwoty w rzedzie z `flex-wrap:nowrap` i cyfra 28px nie miesciy sie obok siebie --
pozwalamy im zejsc do drugiej linii zamiast przewijac kafelek w bok. */
.cem-barter-chip .cem-barter-amounts{flex-wrap:wrap;gap:10px 0}
.cem-barter-chip .cem-barter-amount{padding:0 12px}
.cem-barter-chip .cem-barter-amount.after b{font-size:24px}
.cem-barter-stats-inline{gap:12px;flex:1 1 100%}
/* --- 5. Szuflada formularzy na pelny ekran -------------------------------------------------
`width:560px` z `max-width:100vw` juz sie miescilo, ale zostawialo kilkupikselowy pasek tla
z boku i wygladalo jak okno, ktore sie nie doklikalo. Na telefonie ma byc pelnoekranowy
arkusz. `right` musi isc w parze z `width`, inaczej zamknieta szuflada nie schowa sie
calkiem za krawedz. */
.cem-drawer,.cem-drawer--wide{width:100%;right:-100%}
.cem-drawer.open{right:0}
/* --- 6. Pola formularzy: koniec z samoczynnym zoomem ---------------------------------------
Safari na iOS przybliza cala strone, gdy klikniesz pole o czcionce mniejszej niz 16px --
i po wyjsciu z pola juz jej nie oddala. components.css ustawia 16px, ale tylko dla recznie
wyliczonej listy pol; kazde nowe pole w nowym widoku wracalo do skakania. Tutaj regula
obejmuje wszystkie pola naraz. */
input,select,textarea{font-size:16px}
/* Dwa pola stoja w komorkach tabeli i mialy szerokosc dobrana do mniejszej czcionki --
przy 16px kwota by sie w nich nie zmiescila. */
.cem-cost-kwota-mies{width:118px;font-size:16px}
.rem-tabela tr.rem-form-row input,.rem-tabela tr.rem-form-row select{font-size:16px;min-width:96px}
/* Pole PIN ma juz wlasne 16px w sidebar.css -- zostawiamy jego odstepy liter. */
/* --- 7. Cele dotyku ------------------------------------------------------------------------
Palec trafia pewnie w ~44px, znosnie w 40px. Ponizej 32px zaczyna sie klikanie na chybil
trafil. Powiekszamy POLE DOTYKU, nie sam rysunek: ikony i czcionki zostaja jak byly, rosnie
wypelnienie wokol nich, wiec uklad wyglada tak samo, a klika sie inaczej. */
.cem-btn{min-height:40px}
.rem-tabela .rem-akcje .cem-btn{padding:7px 12px;font-size:12.5px}
.cem-barter-icon-btn{width:38px;height:38px;font-size:15px}
.cem-month-picker button{min-width:44px;padding:0 12px}
.cem-drawer-close{min-width:44px;min-height:44px;padding:0 8px;font-size:30px}
.cem-nav-section-lock-btn{padding:9px;font-size:13px}
.cem-nav-lock-btn{padding:10px}
.cem-nav-item{min-height:40px}
.cem-nav-group-title{min-height:38px}
.cem-hamburger-btn{width:42px;height:42px;font-size:19px}
.rb-link{padding:6px 4px;display:inline-block}
/* Przelacznik okresu i link kategorii w Dokumentach z inFakt -- wlasne klasy, wiec `.cem-btn`
ich nie obejmuje. `.cem-inf-okres-btn` ma sztywna `height:28px`, ktora trzeba nadpisac. */
.cem-inf-okres-btn{height:40px;padding:0 14px}
.cem-inf-kat-link{padding:9px 2px}
/* Pole wyboru rysowane przez system ma ~13px -- za malo, zeby w nie trafic. Powiekszamy samo
pole; `min-*` zamiast `width/height`, bo `.cem-checkbox-item input` ma `width:auto!important`
i nadpisalby zwykla szerokosc. */
input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px}
.cem-checkbox-item{min-height:40px}
.cem-inf-modal-actions .cem-btn,.cem-drawer .cem-btn,.cem-dialog-actions .cem-btn{min-height:44px}
/* Kolko ikonowe bylo juz 48px -- zostaje, tylko niech sie nie kurczy w ciasnym pasku. */
.cem-btn-icon-only{flex:none}
/* Szare mignięcie na dotknięcie -- domyslne Androidowe jest wieksze niz sam przycisk
i wychodzi poza zaokraglenia. */
button,a,summary,label{-webkit-tap-highlight-color:rgba(37,99,235,.14)}
/* --- 8. Wiersze akcji ----------------------------------------------------------------------
Przyciski w rzedzie potrafily zostawac po jednym na linii z resztka miejsca obok. Rowny
odstep + zawijanie czyta sie lepiej niz schodki. */
.cem-actions-row{gap:8px}
.cem-dialog-actions,.cem-inf-modal-actions,.rb-dialog-actions{flex-wrap:wrap}
/* --- 9. Pasek gorny ------------------------------------------------------------------------
Tytul + hamburger + wybor miesiaca w jednej linii nie miescily sie; `flex-wrap` juz jest
w components.css, tu tylko zeby wybor miesiaca nie byl przyklejony do krawedzi. */
.cem-topbar-inner{row-gap:8px}
.cem-month-picker{flex:1 1 auto;justify-content:center}
/* --- 10. Bezpieczna strefa iPhone'a --------------------------------------------------------
Pasek gestu na dole zaslania ostatni wiersz tabeli i przyciski na koncu formularza. */
#cem-view{padding-bottom:env(safe-area-inset-bottom,0px)}
.cem-drawer{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
#cem-sidebar{padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* --- 11. Bardzo waskie telefony (<=380px) -----------------------------------------------------
iPhone SE i podobne. Nie osobny prog dla calej warstwy -- tylko dociagniecie kilku miejsc,
ktore przy 360px sa juz na styk. */
@media (max-width:380px){
.cem-panel{margin:8px 6px;padding:10px}
.cem-staff-grid,.cem-barter-grid{padding-left:6px;padding-right:6px}
.cem-barter-card-footer{grid-template-columns:1fr}
.cem-inf-kwota--wiodaca .cem-inf-kwota-brutto{font-size:22px;line-height:28px}
.cem-barter-chip .cem-barter-amount.after b{font-size:21px}
}