:root {
  --min-width: 30px; /* smartphone */
  --min-height: 30px; /* smartphone */
  --min-height-keyb: 30px; /* smartphone */
  --noclick-height: 20px; /* smartphone */
}
/*
@media (min-width: 768px) {
  :root {
    --min-width: 40px;
    --min-height: 40px;
  }
}
*/
/*
@media (min-width: 1200px) {
  :root {
    --min-width: 50px;
    --min-height: 50px;
  }
}
*/
.tab1 {
    height:100%;
    overflow-y:auto;
}

.tab1 .row {
    display:grid;
    grid-template-columns:33% 34% 33%;
}

.tab1 .headerrow {
    display:grid;
    grid-template-columns:33% 34% 33%;
    position:sticky;
    top:0;
    background:var(--c-panel-2);
    z-index:1;
}

.tab1 .cell {
    border-top:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
    border-right:1px solid var(--c-line);
    min-height: var(--min-height);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    padding:2px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.tab1 .cell2 {
    border-top:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
    border-right:1px solid var(--c-line);
    min-height: var(--min-height);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    padding:2px;
    max-width: 100%;
}

.tab1 .cell3 {
    border-top:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
    border-right:1px solid var(--c-line);
    min-height: var(--min-height);
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    vertical-align: middle;
    padding:2px;
    max-width: 100%;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
}

.border {
    border: 1px solid var(--c-line);
}

.borderrb {
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}

.minheight {
    min-height: var(--min-height);
    height: var(--min-height);
}

.noclickheight {
    min-height: var(--noclick-height);
    height: var(--noclick-height);
}

/* ============================================ */
/* WIDOKI RAPORTU MODELI (Modrep, ModrepCat, ModrepKI) */
/* ============================================ */
/* Czcionka widokow: domyslne wielkosci pochodza z u.MODREP_SET_FONT_DEF (modrep.js) - Brand i Cat 15px,
   Selected i Search 14px, liczniki (cnt / stare cnt) 12px - i sa zmieniane w ustawieniach widoku
   (zmienne CSS --ms-font-<obszar> na korzeniu widoku). Bez skalowania od minimalnej wysokosci
   wiersza - na duzych ekranach (--min-height 40-50px) robila sie dwa razy wieksza od reszty UI. */

/* Komorka Brand/Cat: nazwa wysrodkowana w komorce, licznik w prawym gornym rogu.
   Licznik jest pozycjonowany absolutnie, wiec nie zajmuje osobnej linii ani nie rozpycha
   wiersza - nazwa zostaje na srodku (w pionie i w poziomie). */
.mcellstack {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    min-height: var(--min-height);
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Licznik bieżącego raportu przy samej gornej i prawej krawedzi swojej komorki: w Brand siedzi w polu
   "+" (patrz .msbrand .brandadd nizej), w Cat w komorce z nazwa. Wielkosc czcionki ustawia sie osobno
   w ustawieniach widoku ("Wielkość czcionki Cnt", zmienna --ms-font-cnt - patrz nizej). */
.brandadd > .brandcnt,
.mcellstack > .catcnt {
    position: absolute;
    top: 0;
    right: 1px;
    line-height: 1;
}

/* Licznik bieżącego raportu: żółty i pogrubiony, gdy są pozycje (klasa .pos z JS). */
.brandadd > .brandcnt.pos,
.mcellstack > .catcnt.pos {
    color: var(--c-warn-text);
    font-weight: bold;
}

/* Liczba z OSTATNIEGO raportu sklepu: zwykłą czcionką, jasnoniebieska, w LEWYM dolnym rogu.
   Czcionkę ustawia się osobno w ustawieniach widoku ("Wielkość czcionki Stare cnt", zmienna
   --ms-font-last - patrz niżej), żeby liczba nie myliła się z licznikiem bieżącego raportu.
   Puste, gdy sklep nie ma jeszcze raportu. */
.mcellstack > .brandlast,
.mcellstack > .catlast {
    position: absolute;
    bottom: 0;
    left: 1px;
    line-height: 1;
    color: var(--c-info-text);
    font-weight: normal;
}

/* ============================================ */
/* USTAWIENIA WIDOKÓW MODREP (edytor nad panelem) */
/* ============================================ */
/* Czcionki obszarów ustawiane z modrep.js - zmienne CSS na korzeniu widoku (Modrep, ModrepKI,
   ModrepCat). Klasy kontenerów: .mssel (Selected), .mssrch (Search), .msbrand (Brand), .mscat (Cat).
   Wartość zapasowa = czcionka aplikacji (12px z app.css). */
/* Selected: czcionka dotyczy WYŁĄCZNIE dodanych pozycji (wiersze modeli mają data-idx).
   Nagłówek kolumn (Model/PROMO/POS/SP) i pierwszy wiersz z wybranym sklepem i liczbą modeli
   zostają w czcionce aplikacji. */
.mssel [data-idx],
.mssel [data-idx] * {
    font-size: var(--ms-font-selected, 12px);
}

/* Search: czcionka jak dotąd, a wiersz ROŚNIE z zawiniętym modelem - dokładnie tak, jak
   kolumna Model w liście Selected. Kontener (.mssrch) jest zwykłym BLOKIEM, nie siatką:
   display:grid o skończonej wysokości ściskało wiersze do wysokości kolumny (np. 8 wierszy
   w kolumnie 300px -> po 37px) i zawinięty model wychodził poza swój wiersz. Sama komórka
   używa klasy .center i tych samych stylów inline co komórka Model w Selected
   (patrz u.FuncModrepSearchShow w modrep.js). */
.mssrch,
.mssrch * {
    font-size: var(--ms-font-search, 12px);
}

.mssrch > [data-idmodel] {
    height: auto;
    min-height: var(--min-height);
    align-items: center;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Brand/Cat: nazwa ma własną czcionkę z ustawień widoku, a "+" po prawej jest stały i większy. */
.msbrand .mcellstack > .brand {
    font-size: var(--ms-font-brand, 15px);
}

/* Pole "+" w kolumnie Brand: "+" ma 18px, a licznik bieżącego raportu siedzi TUTAJ (prawy górny róg
   pola), nie w nazwie marki. Position:relative jest potrzebny, bo licznik pozycjonuje się absolutnie
   względem tego pola. */
.msbrand .brandadd {
    position: relative;
    font-size: 18px;
}

/* Widok Modele: opcja "Marki w widoku Modele" (panel "⚙", domyślnie włączona). Gdy kolumna Brand
   nie mieści się w dostępnej wysokości (np. po pokazaniu klawiatury HTML), u.FuncModrepBrandFit
   (modrep.js) dokłada klasę .modrep-brand-min - wiersze marek schodzą wtedy do 20 px, ignorując
   --min-height z "Wysokości ogólnej". Mniejszych już nie robimy: gdy i 20 px nie wystarczy, lista
   przewija się (.tab1 ma overflow-y:auto). */
#modrepbrand.modrep-brand-min > div,
#modrepbrand.modrep-brand-min > div > .mcellstack,
#modrepbrand.modrep-brand-min > div > .brandadd {
    min-height: 20px;
}

#modrepbrand.modrep-brand-min > div > .mcellstack {
    padding: 0 2px;
    line-height: 1.1;
}

#modrepbrand.modrep-brand-min > div > .brandadd {
    padding: 0;
    line-height: 1;
}

.mscat .mcellstack > .cat {
    font-size: var(--ms-font-cat, 15px);
}

/* Liczniki mają WŁASNE czcionki z ustawień widoku (edytor "⚙": "Wielkość czcionki Cnt" i
   "Wielkość czcionki Stare cnt"), niezależne od wielkości nazwy marki/kategorii. */
.brandadd > .brandcnt,
.mcellstack > .catcnt {
    font-size: var(--ms-font-cnt, 12px);
}

.mcellstack > .brandlast,
.mcellstack > .catlast {
    font-size: var(--ms-font-last, 12px);
}

/* Przełączniki "Czy pokazywać cnt / stare cnt" - klasy zakładane na korzeń widoku z modrep.js. */
.modrep-nocnt .brandadd > .brandcnt,
.modrep-nocnt .mcellstack > .catcnt,
.modrep-nolast .mcellstack > .brandlast,
.modrep-nolast .mcellstack > .catlast {
    display: none;
}

/* Rozdział grup na liście Selected (tryby rozszerzone z menu: "+ Brand" / "+ Brand, Cat").
   Zamiast napisów "Cat: <kategoria>" i "Brand: <marka>" rysujemy linię w kolorze zaznaczenia
   (--c-sel z app.css): 6px = granica kategorii (Cat), 3px = granica marki (Brand).
   box-sizing: content-box, żeby kolor miał dokładnie podaną grubość (przy border-box 1px dolnej
   krawędzi zjadałoby kolor). Ramki 1px (ciemny szary) są w HTML - takie same jak w wierszach,
   żeby siatka widoku była ciągła. */
.repview .msline {
    height: 6px;
    box-sizing: content-box;
    background: var(--c-sel);
}

.repview .msline-brand {
    height: 3px;
}

/* Pierwszy wiersz paneli Modrep* (Modrep, ModrepCat, ModrepKI) - na samej górze, nad nagłówkiem
   kolumn i nad wierszem Cat: pole z nazwą wybranego sklepu (ikonka dystrybutora + nazwa) i osobne
   pole z napisem "Suma" i liczbą WSZYSTKICH modeli raportu. Siatkę kolumn (modrep.sum) i ramkę 1px
   daje kontener #<widok>sum w panelu widoku, więc oba pola dostają tę samą linię co reszta widoku.
   Nazwa sklepu zawija się w polu OBOK ikonki (ikonka zostaje z boku - tekst nie przechodzi pod nią),
   dlatego tekst ma flex:1 1 auto i łamanie wyrazów, a ikonka flex:none. Pole sklepu nie zmienia
   sklepu (sklep zmienia się tylko na liście Shop albo w oknie Saverep), więc kursor zostaje
   domyślny - "rękę" ma tylko pole Suma (kasowanie modeli). Wyjątkiem jest widok ModrepCat, gdzie
   klik w nazwę sklepu dobiera automatycznie czcionki widoku (patrz niżej). */
.repview .mssum-shop {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: calc(var(--min-height) * 1.5);
    padding: 2px 4px;
    white-space: normal;
    cursor: default;
}

/* ModrepCat: klik w nazwę sklepu dobiera czcionki Brand/Search (u.FuncModrepCatAutoFont), więc
   tylko w tym widoku pole sklepu wygląda na klikalne. */
#modrepCatview .mssum-shop {
    cursor: pointer;
}

.repview .mssum-shop > .shopbar-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: bold;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.repview .mssum-shop > .shopbar-icon {
    flex: none;
}

.repview .mssum-total {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--min-height) * 1.5);
    padding: 2px;
    line-height: 1.1;
    cursor: pointer;
}

.repview .mssum-cnt {
    font-weight: bold;
}

.repview .mssum-cnt.pos {
    color: var(--c-warn-text);
}

/* 🧩 w polu sumy widoku Modrep = tryb uzupełniania zadań widokiem Modele (tylko sklep MM).
   Szary/przygaszony gdy tryb wyłączony, pełny kolor gdy włączony; klik przełącza tryb. */
.repview .mssum-tasks {
    flex: none;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    opacity: .35;
    filter: grayscale(1);
}

.repview .mssum-tasks.on {
    opacity: 1;
    filter: none;
}

/* Edytor ustawień widoku (Modrep / ModrepCat / ModrepKI): włączany przełącznikiem w oknie "⚙"
   (osobno dla każdego widoku), pokazywany NA STAŁE na samej górze panelu, nad wierszem sklepu/sumy.
   Wiersze są PEŁNEJ szerokości (nie w siatce kolumn Selected): nazwa ustawienia z wartością,
   + / − (albo V / X) i 🗑. Kontener #<widok>editor jest pusty, gdy edytor jest wyłączony,
   więc nie zajmuje miejsca. -1px na dole skleja ostatnią linię edytora z ramką widoku. */
.msedit {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
    background: var(--c-panel);
}

.msedit:not(:empty) {
    margin-bottom: -1px;
}

.msedit .mseditrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 48px 44px;
    border: 1px solid var(--c-line);
    border-top: none;
    background: var(--c-panel);
}

.msedit .mseditrow:first-child {
    border-top: 1px solid var(--c-line);
}

.msedit .mseditrow > div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--min-height);
    padding: 2px 4px;
}

.msedit .mseditrow > div + div {
    border-left: 1px solid var(--c-line);
}

.msedit .mseditname {
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    cursor: pointer;
}

.msedit .mseditname > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.msedit .mseditval {
    flex: none;
    color: var(--c-warn-text);
    font-weight: bold;
    white-space: nowrap;
}

.msedit .mssetbtn {
    font-weight: bold;
    cursor: pointer;
}

/* ============================================ */
/* SIATKA 1px NA WSZYSTKICH KRAWEDZIACH (Checkrep / Trnrep) */
/* ============================================ */
/* Tak jak w widokach Modrep*: linie maja dokladnie 1px, bez podwojen. Wiersz (i naglowek)
   rysuje prawa i dolna krawedz, tabela z grid1px-first takze lewa, a naglowek dodatkowo gorna.
   W Checkrep i Trnrep kazda tabela ma grid1px-first (tabele dzieli 2px odstep, wiec nie moga
   wspoldzielic linii) - kazda tabela ma wlasna ramke 1px.
   Komorki (.cell2) nie maja wlasnych poziomych linii - zostaje tylko separator kolumn, ktory
   w ostatniej komorce wiersza odpuszczamy (prawa krawedz wiersza juz ja rysuje). */
.tab1.grid1px .row,
.tab1.grid1px .headerrow {
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}

.tab1.grid1px-first .row,
.tab1.grid1px-first .headerrow {
    border-left: 1px solid var(--c-line);
}

.tab1.grid1px .headerrow {
    border-top: 1px solid var(--c-line);
}

.tab1.grid1px .cell2 {
    border-top: 0;
    border-bottom: 0;
}

.tab1.grid1px .cell2:last-child {
    border-right: 0;
}

/* ============================================ */
/* NAGLOWKI TABEL TRNREP */
/* ============================================ */
/* Nazwy tabel (training_brand / training_type / training_cat / training_time / persons) maja zolte
   tlo zalezne od motywu: ciemnozolte w motywie ciemnym, jasnozolte w jasnym (zmienna --c-head-bg
   w app.css). Dzieki temu naglowki odcinaja sie od tla panelu i od wierszy tabeli.
   Napis jest wyrownany do lewej (jak nazwy w wierszach) i wysrodkowany w pionie. */
.trnrep-head {
    background: var(--c-head-bg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 6px;
    text-align: left;
}


.tab1 .navbtn {
    min-height: var(--min-height);
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}

/*
.tab1 .navbtn {
    min-width: 44px;
    min-height: var(--min-height);
    border: 1px solid var(--c-line);
    border-radius: 6px;
    background: #22c55e;
    color: #0f172a;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 8px;
}

.tab1 .navbtn:active {
    filter: brightness(1.15);
}
*/