/* ============================================
   MOTYW (ciemny / jasny)
   ============================================ */
/*
 * Kolory interfejsu trzymamy w zmiennych, a nie w literalach w regułach — dzięki temu
 * przełączenie motywu to podmiana wartości na <html data-theme="light"> (atrybut ustawia
 * u.FuncThemeApply w helper.js; wybór "Ciemny / Jasny / Z systemu" jest w oknie "⚙").
 * Wartości ciemne są takie, jakie były wcześniej, więc motyw ciemny wygląda bez zmian.
 */
:root {
    color-scheme: dark;
    --c-bg: #0f172a;          /* tło strony i paneli widoków */
    --c-bg-2: #0b0f19;        /* tło głębsze: listy, pola edycji, okna modalne */
    --c-panel: #1e293b;       /* panele, paski, nagłówki tabel */
    --c-panel-2: #334155;     /* wiersze, przyciski drugorzędne, klawisze */
    --c-panel-3: #475569;     /* ciemniejszy wariant przycisku */
    --c-panel-4: #64748b;     /* kafle menu i przyciski pomocnicze */
    --c-line: #334155;        /* linie siatki tabel */
    --c-line-2: #475569;      /* ramki paneli i przycisków */
    --c-selected: #334155;    /* tło wybranej opcji / przycisku filtra */
    --c-sel: #006400;         /* zaznaczenie Brand/Cat (tło wybranej grupy + linie rozdziału grup) */
    --c-text: #f8fafc;        /* czcionka podstawowa */
    --c-text-dim: #cbd5e1;    /* czcionka drugorzędna */
    --c-text-mute: #94a3b8;   /* czcionka przygaszona */
    --c-accent-text: #93c5fd; /* niebieskie akcenty tekstowe */
    --c-info-text: #7dd3fc;   /* jasnoniebieskie liczniki */
    --c-warn-text: #facc15;   /* żółte oznaczenia (MS/Ap, liczniki) */
    --c-ok-text: #4ade80;     /* zielone dopiski */
    --c-danger-text: #fca5a5; /* czerwone komunikaty i ramki */
    --c-ok-bg: #14532d;       /* tło "zrobione" (KPI, dni tygodnia) */
    --c-danger-bg: #7f1d1d;   /* tło "brak / uwaga" */
    --c-danger-bg-2: #450a0a; /* tło ostrzeżenia odcinka trasy */
    /* Sklep bez żadnego raportu: kolumna z nazwą na liście Shop. Motyw ciemny = jasne
       (czerwone) tło z ciemnym napisem, motyw jasny = ciemne tło z jasnym napisem. */
    --c-norep-bg: #fca5a5;
    --c-norep-text: #450a0a;
    --c-info-bg: #1e3a8a;     /* tło "raport w miesiącu" */
    --c-purple-bg: #4c1d95;
    --c-brown-bg: #78350f;
    --c-teal-bg: #155e75;
    --c-warn-bg: #b45309;
    /* Tło przycisku OTWARTEGO widoku w pasku narzędzi (klasa .active w app.css):
       motyw ciemny = ciemnożółte, motyw jasny = jasnożółte (patrz html[data-theme="light"]). */
    --c-toolbar-active-bg: #a16207;
    --c-head-bg: #a16207;     /* tło nagłówków tabel Trnrep (ciemnożółte = motyw ciemny) */
    --c-overlay: rgba(15, 23, 42, 0.88); /* tło pod oknem logowania */
    --c-overlay-soft: rgba(15, 23, 42, 0.78); /* tło podpisu na mapie */
}

/* Motyw jasny: ciemne tła stają się jasne, jasna czcionka ciemna. Kolory nasycone
   (zielone/czerwone/niebieskie przyciski i kafle) zostają - biała czcionka jest na nich czytelna. */
html[data-theme="light"] {
    color-scheme: light;
    --c-bg: #eef2f7;
    --c-bg-2: #ffffff;
    --c-panel: #ffffff;
    --c-panel-2: #e2e8f0;
    --c-panel-3: #cbd5e1;
    --c-panel-4: #cbd5e1;
    --c-line: #cbd5e1;
    --c-line-2: #94a3b8;
    --c-selected: #94a3b8;
    --c-sel: #90ee90;         /* motyw jasny: jasny zielony (ciemny zielony = motyw ciemny) */
    --c-text: #0f172a;
    --c-text-dim: #334155;
    --c-text-mute: #475569;
    --c-accent-text: #1d4ed8;
    --c-info-text: #0369a1;
    --c-warn-text: #a16207;
    --c-ok-text: #15803d;
    --c-danger-text: #b91c1c;
    --c-ok-bg: #dcfce7;
    --c-danger-bg: #fee2e2;
    --c-danger-bg-2: #fee2e2;
    --c-norep-bg: #7f1d1d;    /* motyw jasny: ciemne czerwone tło, jasny napis */
    --c-norep-text: #f8fafc;
    --c-info-bg: #dbeafe;
    --c-purple-bg: #ede9fe;
    --c-brown-bg: #ffedd5;
    --c-teal-bg: #cffafe;
    --c-warn-bg: #fef3c7;
    --c-toolbar-active-bg: #fde047;
    --c-head-bg: #fde047;     /* motyw jasny: jasnożółty (ciemnożółty = motyw ciemny) */
    --c-overlay: rgba(226, 232, 240, 0.88);
    --c-overlay-soft: rgba(255, 255, 255, 0.82);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    font-size: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--c-text);
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--c-bg);
}

#app-root {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* iPadOS 17: 100dvh śledzi pasek przeglądarki i pasek statusu (100% zostaje jako fallback). */
    height: 100dvh;
    /* Górny safe-area: pasek narzędzi/menu nie wchodzi na pasek statusu z datą (iPad). */
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-left: env(safe-area-inset-left, 0px);
}

#loginView {
    position: fixed;
    inset: 40px 0 0 0;
    /* Jak wyżej: 40px paska narzędzi (jedna linia) + górny safe-area. */
    inset: calc(40px + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--c-overlay);
}

/* Logowanie modalne (brak tokenu, u.FuncLoginLockSet w helper.js): formularz obejmuje całe okno
   (pasek narzędzi jest wtedy schowany), a "Anuluj" znika - wyjściem jest tylko zalogowanie. */
#loginView.login-locked {
    inset: 0;
    z-index: 60;
}

#loginView.login-locked .login-cancel-button {
    display: none;
}

#loginForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 24px));
    padding: 18px;
    border: 1px solid var(--c-line-2);
    border-radius: 10px;
    background: var(--c-bg-2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

#loginForm input {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--c-line-2);
    border-radius: 6px;
    background: var(--c-bg);
    color: var(--c-text);
}

#loginForm button {
    min-height: 38px;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    background: #3b82f6;
    color: white;
    cursor: pointer;
}

.login-cancel-button {
    background: #334155 !important;
    border-color: var(--c-line-2) !important;
}

.toolbar {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0 5px;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--c-panel);
    border-bottom: 1px solid var(--c-line);
}

/* Pasek narzędzi ma jedną linię: przyciski, skróty widoków i filtr. Wybrany sklep pokazują panele
   widoków (pasek .shopbar z u.FuncShopBarHtml w helper.js) oraz wiersz sklepu i sumy w Modrepach. */
.toolbar-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    overflow: hidden;
}

.toolbar-row-main {
    min-height: 47px;
    /* Pięć skrótów widoków + menu + filtr: na wąskim ekranie wiersz przewija się w poziomie,
       zamiast ucinać ostatnie przyciski. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.toolbar-row-main::-webkit-scrollbar {
    display: none;
}

/* Pasek z wybranym sklepem na samej górze panelu widoku (Checkrep, Trnrep, ModelCompare): pełna
   szerokość, jedna linia - markup z u.FuncShopBarHtml (helper.js). Wcześniej te same dane
   pokazywała druga linia paska narzędzi (usunięta), dlatego zostają klasy shopbar-*:
   ikonka dystrybutora, tekst oraz oznaczenia Ap/MS. */
.shopbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 2px;
    min-height: 22px;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background-color: var(--c-panel);
    border-bottom: 1px solid var(--c-line);
}

.shopbar::-webkit-scrollbar {
    display: none;
}

.shopbar-icon {
    flex: none;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.shopbar-text {
    flex: none;
    font-weight: bold;
}

.shopbar-flag {
    flex: none;
    font-weight: bold;
    color: var(--c-warn-text);
}

.shopbar-category {
    flex: none;
}

.shopbar-empty {
    flex: none;
    font-style: italic;
    color: var(--c-text-mute);
}

/* Przyciski paska narzędzi: większe ikony (44px), wspólne tło --c-panel-2 (jaśniejsze od paska
   w motywie ciemnym, ciemniejsze w jasnym - wcześniej tło zostawiała przeglądarka, więc pasek
   wyglądał inaczej w każdej przeglądarce). Bez paddingu, żeby ikona mogła zająć 90% przycisku
   (patrz reguła .toolbar-button > svg niżej). Stan skrótu (zielona ramka 1px = coś jest w raporcie,
   żółte tło = widok otwarty) nanosi u.FuncToolbarSync w app.js. */
.toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 2px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: var(--c-panel-2);
    color: var(--c-text);
    font-size: 38px;
    white-space: nowrap;
    cursor: pointer;
}

/* Ikona zajmuje 90% boku przycisku: SVG skalowane jest do przycisku (width/height w atrybutach
   <svg> nie ma znaczenia), a emoji przez font-size przycisku (patrz .toolbar-button wyżej). */
.toolbar-button > svg,
.menu-button > svg {
    display: block;
    width: 90%;
    height: 90%;
}

.menu-button {
    width: 44px;
    height: 44px;
    margin: 2px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: var(--c-panel-2);
    color: var(--c-text);
    font-size: 38px;
    cursor: pointer;
}

.menu-panel {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--c-bg);
}

/*
 * Wewnętrzne opakowanie menu: SIATKA 3 kolumn na telefonie (4 przy szerokim pasku - tablet/iPad
 * i telefon w poziomie, patrz .toolbar-wide niżej). Kafle zaczynają się od góry i idą po kolei
 * (align-content: start) - wcześniej
 * były wyśrodkowane w pionie i poziomie. min-height: 100% + przewijanie panelu (menu-panel) sprawia,
 * że przy ciasnym ekranie (duża klawiatura) całe menu da się przewinąć.
 */
.menu-panel-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    gap: 8px;
    min-height: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/*
 * Pełne menu pod skróconym zestawem kafli (przycisk "Więcej"). Panel zajmuje całą szerokość
 * siatki menu (grid-column 1 / -1) i jest ukryty (display: none z u.FuncCreateElement) do
 * pierwszego kliknięcia - wtedy u.FuncMenuMoreSetOpen ustawia display: grid.
 */
.menu-more-panel {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
}

/* Kafel "Więcej" - rozwija pełne menu (ciemniejszy od widoków, żeby nie wyglądał jak widok). */
.menu-button-item.menu-more-button {
    background-color: var(--c-panel-2);
}

/* Kafel menu: szerokość bierze z kolumny siatki (jedna trzecia / czwarta panelu), a wysokość
   jest TAKA SAMA jak szerokość (aspect-ratio) - kwadrat niezależnie od wielkości ekranu.
   Treść (ikona + podpis) jest wyśrodkowana w kwadracie. Ramka jest zawsze (1px, domyślnie
   przezroczysta), żeby stany (zielona ramka klawiatury, żółty tryb auto) nie zmieniały rozmiaru
   kafla. Czcionka podpisu jest GLOBALNA (--view-font, to samo ustawienie co w widokach -
   u.FuncViewFontApply). */
.menu-button-item {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: var(--c-panel-4);
    color: var(--c-text);
    font-size: var(--view-font, 14px);
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    cursor: pointer;
}

/* Ikona kafla: ten sam SVG co w pasku narzędzi i ten sam rozmiar (44px przycisk paska -> 90%
   = ~40px; w trybie tabletu 48px -> 43px). Kolor bierze z kafla (currentColor). */
.menu-button-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 0;
    font-size: 34px;
    line-height: 1;
}

.menu-button-icon > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.menu-button-label {
    width: 100%;
    margin-top: 0;
    font-size: var(--view-font, 14px);
    line-height: 1.1;
}

.menu-button-item.refresh-button {
    background-color: #22c55e;
}

.menu-button-item.menu-dark-yellow {
    background-color: var(--c-warn-bg);
}

.menu-button-item.menu-dark-green {
    background-color: var(--c-ok-bg);
}

.menu-button-item.menu-dark-blue {
    background-color: var(--c-info-bg);
}

.menu-button-item.menu-brown {
    background-color: var(--c-brown-bg);
}

/* Klawiatura HTML włączona (tak) / tryb HTML - jak sklep w pasku narzędzi: RAMKA 1px
   i TŁO w tym samym kolorze, jasno/ciemno zależnie od motywu (--c-ok-text + --c-ok-bg:
   jasnozielona ramka i ciemnozielone tło na ciemnym motywie, ciemnozielona ramka i jasnozielone
   tło na jasnym). */
.menu-button-item.keyboard-html,
.menu-button-item.keyboard-visible {
    border: 1px solid var(--c-ok-text);
    background-color: var(--c-ok-bg);
    color: var(--c-text);
}

/* Tryb automatyczny klawiatury HTML (bez fokusu ukryta, w widokach raportowych zawsze):
   ta sama para ramka + tło, tylko żółta (--c-warn-text + --c-warn-bg). */
.menu-button-item.keyboard-auto {
    border: 1px solid var(--c-warn-text);
    background-color: var(--c-warn-bg);
    color: var(--c-text);
}

.menu-button-item:hover,
.menu-button:hover {
    filter: brightness(1.15);
}

/*
 * Widoki zależne od wybranego sklepu (Checkrep, Modrep, ModrepCat, ModrepKI, Trnrep, Saverep,
 * ModelCompare): bez sklepu ich kafle w menu i skróty w pasku narzędzi wyglądają jak wyłączone
 * (szare, przygaszone), ale nadal reagują na klik - mignięciem czerwonej ramki (klasa .shop-flash
 * zdejmowana po u.SHOP_FLASH_MS) i powrotem do listy sklepów (u.FuncShopGuard w helper.js), bez okna
 * komunikatu.
 */
.menu-button-item.shop-dependent,
.toolbar-button.shop-dependent {
    transition: background-color 0.2s linear, filter 0.2s linear, opacity 0.2s linear;
}

.menu-button-item.shop-disabled,
.toolbar-button.shop-disabled {
    filter: grayscale(1) brightness(0.8);
    opacity: 0.45;
}

/* Mignięcie bez wybranego sklepu: ramka pulsuje między 1px jasnej i 2px ciemnej czerwieni
   (dwie fazy, skokowo - steps), a tło kafla zostaje bez zmian. box-sizing pilnuje, żeby 2px
   ramka w pasku narzędzi (44x44) nie powiększyła przycisku. */
.menu-button-item.shop-flash,
.toolbar-button.shop-flash {
    filter: none;
    opacity: 1;
    box-sizing: border-box;
    animation: shop-border-blink 400ms steps(1, end) infinite;
}

@keyframes shop-border-blink {
    0%, 49.9% { border: 1px solid #f87171; }
    50%, 100% { border: 2px solid #991b1b; }
}

/* Pasek informacyjny nad listą sklepów po kliknięciu widoku bez wybranego sklepu
   (u.FuncShopRequiredHintHtml w helper.js). Siedzi w wierszu filtrów listy, na całą szerokość. */
.shop-required-hint {
    grid-column: 1 / -1;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #b91c1c;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

/*
 * Dymek z podpowiedzią przy przycisku (u.FuncTip w helper.js): stan ustawienia albo komunikat
 * "Nie wybrano sklepu" (.ui-tip-error). Pozycję liczy kod (position:fixed), więc dymek widać
 * także nad menu i nad listą sklepów; znika sam po u.TIP_MS i nie przechwytuje dotknięć.
 */
.ui-tip {
    max-width: min(60vw, 220px);
    padding: 4px 8px;
    background-color: var(--c-panel);
    color: var(--c-text);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.ui-tip-error {
    background-color: #b91c1c;
    border-color: var(--c-danger-text);
    color: #fff;
}

/* ============================================
   OKNA KOMUNIKATÓW (u.FuncModal / u.FuncYesNo)
   ============================================
   Czcionka okien komunikatów jest GLOBALNA: rodzina z reguły "*" (system-ui), a wielkość
   z ustawienia "Wielkość czcionki" w oknie "⚙" (--view-font, domyślnie 14 px) - tak jak
   w widokach. Reguła ".msg-window *" wygrywa z globalnym "* { font-size:12px }", więc także
   HTML wewnątrz komunikatu (np. licznik odliczania z font-size:2em) skaluje się razem
   z ustawieniem. Klasy nadaje helper.js. */
.msg-window,
.msg-window * {
    font-size: var(--view-font, 14px);
}

.toolbar-button.refresh-button {
    background-color: #22c55e;
}

/* ============================================
   WIDOK USTAWIEŃ (PANEL JAK INNE WIDOKI)
   ============================================
   Treść buduje settings.js (u.FuncShowSettings). Panel jest zwykłym widokiem
   (contentContainers.settings), więc zajmuje całą szerokość i wysokość content-container.
   Czcionka jest GLOBALNA (panel ma klasę .view-font, czyli --view-font), a nagłówki sekcji są
   od niej odpowiednio większe (em). Selektory mają prefiks .settings-view, żeby wygrały
   z regułą ".view-font *" ustawiającą czcionkę wszystkim elementom panelu.
   Stopka z jednym przyciskiem "Potwierdź zmiany" (na całą szerokość) jest zawsze widoczna
   na dole; przycisk ma 150% wysokości wiersza (--min-height ustawiane w tym samym panelu). */
.settings-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--c-bg);
}

.settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

.settings-view .settings-title {
    font-size: 1.6em;
    font-weight: 700;
}

.settings-view .settings-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-view .settings-section-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--c-accent-text);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.settings-view .settings-subtitle {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--c-text-dim);
    margin-top: 2px;
}

.settings-view .settings-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.settings-view .settings-label {
    flex: 0 0 auto;
    min-width: 6.5em;
    color: var(--c-text-dim);
}

.settings-view .settings-input {
    flex: 0 0 5.5em;
    min-height: calc(var(--view-font, 14px) * 2);
    padding: 2px 6px;
    background: var(--c-bg-2);
    border: 1px solid var(--c-line-2);
    border-radius: 5px;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    user-select: text;
}

.settings-view .settings-input-wide {
    flex: 1 1 10em;
    text-align: left;
}

.settings-view .settings-input-mono {
    font-family: monospace;
}

.settings-view .settings-input-date {
    flex: 0 0 9em;
}

.settings-view .settings-choice {
    flex: 1 1 0;
    min-height: calc(var(--view-font, 14px) * 2);
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--c-line-2);
    background: var(--c-panel-2);
    color: var(--c-text);
    cursor: pointer;
    font-weight: 600;
}

.settings-view .settings-choice.settings-more {
    flex: 0 1 auto;
    min-width: 12em;
    padding: 2px 14px;
}

.settings-view .settings-choice.settings-toggle {
    flex: 0 0 3.5em;
}

/* Reset ustawień - przycisk przed "Więcej opcji" (kolory ostrzegawcze, bo kasuje zapis ustawień). */
.settings-view .settings-choice.settings-reset {
    flex: 0 1 auto;
    min-width: 12em;
    padding: 2px 14px;
    border-color: var(--c-danger-text);
    background: var(--c-danger-bg);
}

.settings-view .settings-hint {
    font-size: .85em;
    color: var(--c-text-mute);
}

.settings-view .settings-advanced {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.settings-view .settings-advanced.open {
    display: flex;
}

/* Stopka ustawień: przycisk (przyciski) rozciągnięty na całą szerokość. */
.settings-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 10px;
    border-top: 1px solid var(--c-line);
    background: var(--c-panel);
}

.settings-view .settings-action {
    flex: 1 1 auto;
    width: 100%;
    min-height: calc(var(--min-height) * 1.5);
    padding: 0 20px;
    border-radius: 6px;
    border: 1px solid var(--c-line-2);
    background: var(--c-panel-2);
    color: var(--c-text);
    cursor: pointer;
}

.settings-view .settings-action.primary {
    background: #4f8cff;
    border-color: #4f8cff;
    color: #fff;
    font-weight: 600;
}

/* Zielona ramka 1px skrótu widoku = w raporcie coś już jest (sklep, checklisty, modele, komplet
   treningu). Kolor zależny od motywu: jasnozielony na ciemnym, ciemnozielony na jasnym
   (--c-ok-text). Żółty (.active niżej) wygrywa - to widok otwarty. */
.toolbar-button.view-filled {
    border: 1px solid var(--c-ok-text);
}

/* Przyciski przełączające (w trybie tabletu/iPada: Info, Ostatnie wizyty, KPI, Ustawienia,
   Galeria/Aparat, Klawiatura) domyślnie mają neutralne tło paska. Ta reguła MUSI być PRZED .active:
   obie mają tę samą specyficzność, więc kolejność decyduje - wcześniej neutralne tło wygrywało
   i otwarty widok (np. Info) nigdy nie był żółty. */
.toolbar-button.toggle-button {
    background-color: var(--c-panel-2);
    color: var(--c-text);
}

/* Żółty = widok OTWARTY: samo żółte tło przycisku (ciemnożółte na ciemnym motywie, jasnożółte
   na jasnym - --c-toolbar-active-bg). Bez ramki, bo ikona zajmuje 90% kafla i ramka kleiłaby się
   do ikony. Kolory nanosi u.FuncToolbarSync. */
.toolbar-button.active {
    background-color: var(--c-toolbar-active-bg);
    color: var(--c-text);
    font-weight: bold;
}

/* Skrót klawiatury w pasku narzędzi (tryb tabletu/iPada): zielona ramka + zielone tło =
   klawiatura pokazywana na stałe, żółta para = tryk automatyczny - kolory jak kafla klawiatury
   w menu i jak sklepu (jasno/ciemno zależnie od motywu, u.FuncUpdateKeyboardButtons w app.js). */
.toolbar-button.keyboard-visible {
    border: 1px solid var(--c-ok-text);
    background-color: var(--c-ok-bg);
    color: var(--c-text);
}

.toolbar-button.keyboard-auto {
    border: 1px solid var(--c-warn-text);
    background-color: var(--c-warn-bg);
    color: var(--c-text);
}

/* ============================================ */
/* TRYB TABLETU / iPADA (viewport > 600x600) */
/* ============================================ */
/* Klasę .toolbar-wide zakłada na <html> u.FuncIpadModeApply (app.js) dla tabletu/iPada ORAZ
   telefonu w poziomie: ikonki paska narzędzi mają 48px (pasek rośnie razem z nimi), a kafelki z menu
   - Info, Ostatnie wizyty, KPI, Galeria/Aparat, Ustawienia i Klawiatura - są wtedy w pasku narzędzi
   i znikają z menu (nie dublują się). Klasa .ipad-mode (tylko tablet) steruje wysokościami wierszy
   w JS (u.FuncMinHeightApply). */
.toolbar-wide .toolbar {
    /* 48px ikonka + 2x2px marginesu = 52px zawartości, plus 1px dolnej krawędzi paska
       (box-sizing: border-box) - dlatego 54px, żeby przyciski nie były przycięte. */
    height: 54px;
    min-height: 54px;
    max-height: 54px;
}

.toolbar-wide .toolbar-row-main {
    min-height: 53px;
}

.toolbar-wide .toolbar-button {
    width: 48px;
    height: 48px;
    font-size: 42px;
}

.toolbar-button.ipad-toolbar-button {
    display: none;
}

.toolbar-wide .toolbar-button.ipad-toolbar-button {
    display: inline-flex;
}

.toolbar-wide .menu-button-item.ipad-mirrored {
    display: none;
}

/* Szeroki pasek (tablet/iPad, telefon w poziomie): siatka menu ma 4 kolumny (na telefonie w pionie
   3) i ikony tej samej wielkości co w pasku narzędzi (48px przycisk -> 90% = ~43px). */
.toolbar-wide .menu-panel-inner,
.toolbar-wide .menu-more-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.toolbar-wide .menu-button-icon {
    width: 43px;
    height: 43px;
}

.content-container {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background-color: var(--c-bg);
}

.content-container-panel {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    background-color: var(--c-bg);
}

.map-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 12px minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
}

.map-splitter {
    position: relative;
    z-index: 2;
    min-height: 12px;
    cursor: row-resize;
    touch-action: none;
}

.map-splitter::after {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--c-panel-4);
    content: "";
    transform: translateX(-50%);
}

.map-splitter:hover::after,
.map-splitter:focus-visible::after {
    background: var(--c-text);
}

.map-splitter:focus-visible {
    outline: 2px solid var(--c-warn-text);
    outline-offset: -2px;
}

.map-panel.is-landscape {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.map-panel.is-landscape .map-splitter {
    min-width: 12px;
    min-height: 0;
    cursor: col-resize;
}

.map-panel.is-landscape .map-splitter::after {
    top: 50%;
    left: 5px;
    width: 3px;
    height: 44px;
    transform: translateY(-50%);
}

.map-shop-section,
.map-display-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.map-shop-heading {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: var(--min-height);
    padding: 2px 6px;
    border: 1px solid var(--c-line);
}

.map-shop-title {
    flex: 0 0 auto;
    font-weight: bold;
}

.map-shop-distances {
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.map-shop-distances:empty {
    display: none;
}

.map-shop-distances span {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Odcinek, w którym km z lat/lon i km z adresu różnią się istotnie - do weryfikacji. */
.map-shop-distances span.map-distance-warning {
    color: var(--c-danger-text);
    font-weight: bold;
}

.map-shop-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.map-shop-columns {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-shop-columns > .map-shop-list {
    flex: 1 1 50%;
    min-width: 0;
}

.map-selected-column {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--c-line-2);
}

.map-selected-title {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-weight: bold;
    border-bottom: 1px solid var(--c-line-2);
}

.map-selected-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.map-selected-row {
    display: grid;
    grid-template-columns: var(--min-height) 1fr;
    gap: 4px;
    min-height: var(--min-height);
    padding: 3px 4px 3px 8px;
    border: 1px solid var(--c-line-2);
    background: #15803d;
    color: #fff;
    cursor: grab;
    align-items: start;
}

.map-selected-row.is-dragging {
    opacity: 0.4;
}

.map-selected-leg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 1px 4px 1px 8px;
    border-left: 1px solid var(--c-line-2);
    border-right: 1px solid var(--c-line-2);
    background: var(--c-bg);
    color: var(--c-accent-text);
    font-size: 12px;
    line-height: 1.4;
}

.map-selected-leg-arrow {
    color: var(--c-text-mute);
}

/* Dwie wartości km (lat/lon i adres) + linia do weryfikacji - wiersz rośnie i zawija tekst. */
.map-selected-leg-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.map-selected-leg-check {
    font-size: 11px;
    color: var(--c-danger-text);
}

/* Istotna różnica km(lat/lon) vs km(adres): cały odcinek na czerwono. */
.map-selected-leg.is-warning {
    background: var(--c-danger-bg-2);
    border-left-color: #b91c1c;
    border-right-color: #b91c1c;
    color: var(--c-danger-text);
}

.map-selected-leg.is-warning .map-selected-leg-arrow {
    color: var(--c-danger-text);
}

/* Podsumowanie kilometrów na dole listy Wybrane - przyklejone do dolnej krawędzi listy,
   żeby suma była widoczna także przy przewijaniu długiej listy sklepów. */
.map-selected-total {
    position: sticky;
    bottom: 0;
    padding: 3px 8px;
    border: 1px solid var(--c-line-2);
    border-top: 1px solid var(--c-line-2);
    background: var(--c-panel);
    color: var(--c-text);
    font-size: 12px;
    font-weight: bold;
}

.map-selected-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-selected-icon img {
    width: var(--min-height);
    height: var(--min-height);
    object-fit: contain;
}

.map-selected-content {
    display: grid;
    grid-template-rows: auto auto;
    gap: 2px;
    min-width: 0;
    min-height: 0;
}

.map-selected-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.map-selected-label {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.map-selected-button {
    min-width: 28px;
    min-height: 28px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    background: var(--c-panel-2);
    cursor: pointer;
    width: 100%;
}

.map-selected-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.map-bulk-toolbar {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    border-bottom: 1px solid var(--c-line-2);
    -webkit-overflow-scrolling: touch;
}

.map-select-button {
    flex: 0 0 auto;
    min-height: var(--min-height);
    padding: 2px 10px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    background: var(--c-panel-2);
    cursor: pointer;
}

.map-select-button[aria-pressed="true"] {
    background: #15803d;
    color: #fff;
}

.map-select-button.is-partial {
    background: #a16207;
    color: #fff;
}

.map-select-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.map-route-button:not(:disabled) {
    background: #2563eb;
    color: #fff;
}

.map-shop-row {
    display: flex;
    align-items: center;
    min-height: var(--min-height);
    padding: 3px 8px;
    border: 1px solid var(--c-line-2);
    background: var(--c-panel);
    cursor: pointer;
}

.map-shop-row[aria-pressed="true"] {
    background: #15803d;
    color: #fff;
}

.map-shop-icon {
    flex: 0 0 auto;
    width: var(--min-height);
    height: var(--min-height);
    margin-right: 6px;
    object-fit: contain;
}

.map-shop-row:focus-visible,
.map-select-button:focus-visible,
.map-zoom-button:focus-visible,
.map-marker:focus-visible {
    outline: 2px solid var(--c-warn-text);
    outline-offset: -2px;
}

.map-display-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 2px 6px;
    border-top: 1px solid var(--c-line-2);
    background: var(--c-panel);
}

/* Tekst z kilometrami i trasą (oraz informacją o brakach współrzędnych) bywa dłuższy niż pasek,
   dlatego tak jak pasek kilometrów w liście sklepów (.map-shop-distances) przewija się w poziomie,
   a nie jest ucinany wielokropkiem - całą treść da się doskrolować. */
.map-display-status {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.map-zoom-button {
    width: 30px;
    height: 28px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    background: var(--c-panel-2);
    cursor: pointer;
}

.map-viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #dbeafe;
    touch-action: none;
    cursor: grab;
}

.map-viewport.map-dragging {
    cursor: grabbing;
}

.map-tile-layer,
.map-marker-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.map-tile {
    position: absolute;
    width: 256px;
    height: 256px;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

.map-marker-layer {
    pointer-events: none;
}

.map-marker {
    position: absolute;
    width: 30px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 32px;
    text-shadow: 0 1px 2px white, 1px 0 2px white, 0 -1px 2px white, -1px 0 2px white;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    cursor: pointer;
}

.map-marker-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px #fff);
}

.map-marker-number {
    position: absolute;
    top: 0;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: #1d4ed8;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    text-shadow: none;
}

.map-attribution {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
    font-size: 10px;
}

.map-attribution a {
    color: #1d4ed8;
}

.map-route-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.65);
}

.map-route-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(520px, 100%);
    max-height: 85vh;
    padding: 18px;
    overflow-y: auto;
    border: 1px solid var(--c-line-2);
    border-radius: 8px;
    background: var(--c-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.map-route-dialog h2 {
    font-size: 16px;
}

.map-route-description {
    color: var(--c-text-dim);
}

.map-route-stops {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 24px;
    overflow-y: auto;
}

.map-route-stops li {
    padding: 4px 2px;
    user-select: text;
}

.map-route-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.map-route-actions button {
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid var(--c-line-2);
    border-radius: 5px;
    cursor: pointer;
}

.map-route-cancel {
    background: var(--c-panel-2);
}

.map-route-confirm {
    background: #15803d;
    color: #fff;
}

/* ============================================
   RECENT ROUTES - PODSUMOWANIE DNI
   ============================================ */
/* Tabela dni: wiersz jest klikalny (otwiera modal trasy dnia). */
.recent-routes-row {
    cursor: pointer;
}

.recent-routes-row:hover,
.recent-routes-row:focus-visible {
    background: var(--c-panel);
    outline: none;
}

/* Modal: maksymalna szerokość (nigdy szerszy niż okno), treść przewijana w pionie. */
.recent-routes-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.65);
}

.recent-routes-dialog {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.recent-routes-head {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-line);
}

.recent-routes-title {
    font-size: 15px;
    font-weight: bold;
}

.recent-routes-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: var(--c-text-dim);
}

.recent-routes-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px;
}

.recent-routes-visit {
    display: grid;
    grid-template-columns: var(--min-height) 1fr;
    gap: 6px;
    align-items: center;
    padding: 3px 6px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    background: #15803d;
    color: #fff;
}

.recent-routes-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.recent-routes-icon img {
    width: var(--min-height);
    height: var(--min-height);
    object-fit: contain;
}

.recent-routes-visit-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.recent-routes-visit-label {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Czas wizyty: wiersz ma nasycone zielone tło i białą czcionkę w obu motywach,
   więc odcień nie może iść za kolorem akcentu (w motywie jasnym byłby ciemnoniebieski). */
.recent-routes-visit-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}

.recent-routes-leg {
    padding: 1px 6px;
    border-left: 1px solid var(--c-line-2);
    border-right: 1px solid var(--c-line-2);
    background: var(--c-bg);
    color: var(--c-accent-text);
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.recent-routes-leg-check {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--c-danger-text);
}

/* Istotna różnica km(lat/lon) vs km(adres): odcinek na czerwono, z linią do weryfikacji. */
.recent-routes-leg.is-warning {
    background: var(--c-danger-bg-2);
    border-left-color: #b91c1c;
    border-right-color: #b91c1c;
    color: var(--c-danger-text);
}

.recent-routes-total {
    position: sticky;
    bottom: 0;
    padding: 4px 8px;
    border: 1px solid var(--c-line-2);
    background: var(--c-panel);
    color: var(--c-text);
    font-weight: bold;
}

.recent-routes-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: 8px 10px;
    border-top: 1px solid var(--c-line);
}

.recent-routes-close {
    min-height: 36px;
    padding: 4px 14px;
    border: 1px solid var(--c-line-2);
    border-radius: 5px;
    background: var(--c-panel-2);
    color: var(--c-text);
    cursor: pointer;
}

/* ============================================
   SHEDULER - PLAN WIZYT
   ============================================ */
/* Widok dni: wiersz otwiera modal planu dnia (jak RecentRoutes). */
.sheduler-day-row {
    cursor: pointer;
}

.sheduler-day-row:hover,
.sheduler-day-row:focus-visible {
    background: var(--c-panel);
    outline: none;
}

.sheduler-loading {
    padding: 12px;
    color: var(--c-text-dim);
}

/* Modal: maksymalna szerokość i przewijana treść (wzorzec RecentRoutes). */
.sheduler-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.65);
}

.sheduler-picker-layer {
    z-index: 10001;
}

.sheduler-dialog {
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.sheduler-dialog-picker {
    width: min(520px, calc(100vw - 24px));
}

.sheduler-dialog-shops {
    width: min(560px, calc(100vw - 24px));
}

.sheduler-head {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-line);
}

.sheduler-title {
    font-size: 15px;
    font-weight: bold;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sheduler-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: var(--c-text-dim);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sheduler-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px;
}

.sheduler-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--c-line);
}

.sheduler-add,
.sheduler-ok {
    min-height: 36px;
    padding: 4px 14px;
    border: 1px solid var(--c-line-2);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.sheduler-add {
    background: #1d4ed8;
}

.sheduler-ok {
    background: #15803d;
    margin-left: auto;
}

/* Lista dni (wybór z menu kontekstowego i modal dnia). */
.sheduler-day-list {
    gap: 3px;
}

.sheduler-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    color: var(--c-text);
    text-align: left;
    cursor: pointer;
}

.sheduler-day.is-selected {
    border-color: #22c55e;
}

.sheduler-day-date {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sheduler-day-count {
    font-size: 11px;
    color: var(--c-text-dim);
    white-space: nowrap;
}

.sheduler-day-check {
    font-weight: bold;
    text-align: center;
}

/* Filtr listy sklepów (tylko modal wyboru sklepów do dnia). */
.sheduler-filter-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 4px;
}

.sheduler-filter-label {
    font-size: 11px;
    color: var(--c-text-mute);
}

.sheduler-filter {
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--c-line-2);
    border-radius: 6px;
    background: var(--c-bg);
    outline: none;
    white-space: nowrap;
    overflow-x: auto;
    color: var(--c-text);
}

.sheduler-filter:focus {
    border-color: #3b82f6;
}

.sheduler-shop-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 10px 8px;
}

.sheduler-shop-row {
    display: grid;
    grid-template-columns: var(--min-height) minmax(0, 1fr) 22px;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: var(--min-height);
    padding: 3px 6px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    background: var(--c-panel);
    color: var(--c-text);
    text-align: left;
    cursor: pointer;
}

.sheduler-shop-row.is-selected {
    background: #15803d;
    border-color: #22c55e;
    color: #fff;
}

.sheduler-shop-row img {
    width: var(--min-height);
    height: var(--min-height);
    object-fit: contain;
}

.sheduler-shop-label {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sheduler-shop-check {
    font-weight: bold;
    text-align: center;
}

/* Modal dnia: pozycja = sklep + odcinek kilometrów do następnego sklepu. */
.sheduler-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sheduler-row {
    display: grid;
    grid-template-columns: 30px var(--min-height) minmax(0, 1fr) 32px;
    align-items: center;
    gap: 6px;
    min-height: var(--min-height);
    padding: 3px 6px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    background: #15803d;
    color: #fff;
    cursor: grab;
}

.sheduler-row.is-dragging {
    position: relative;
    z-index: 5;
    opacity: 0.9;
    cursor: grabbing;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.sheduler-item.is-drag-target > .sheduler-row {
    outline: 2px dashed #38bdf8;
    outline-offset: -2px;
}

.sheduler-drag {
    width: 28px;
    min-height: 28px;
    border: 1px solid var(--c-line-2);
    border-radius: 4px;
    background: var(--c-panel-2);
    color: var(--c-text);
    font-size: 16px;
    cursor: grab;
    touch-action: none;
}

.sheduler-drag:active {
    cursor: grabbing;
}

.sheduler-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheduler-icon img {
    width: var(--min-height);
    height: var(--min-height);
    object-fit: contain;
}

.sheduler-label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sheduler-remove {
    width: 28px;
    min-height: 28px;
    border: 1px solid #b91c1c;
    border-radius: 4px;
    background: var(--c-danger-bg);
    color: var(--c-text);
    cursor: pointer;
}

.sheduler-leg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 1px 6px 1px 38px;
    border-left: 1px solid var(--c-line-2);
    border-right: 1px solid var(--c-line-2);
    background: var(--c-bg);
    color: var(--c-accent-text);
    font-size: 12px;
    line-height: 1.4;
}

.sheduler-leg-arrow {
    color: var(--c-text-mute);
}

.sheduler-leg-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sheduler-leg-check {
    font-size: 11px;
    color: var(--c-danger-text);
}

/* Istotna różnica km(lat/lon) vs km(adres): odcinek na czerwono (jak w Map2). */
.sheduler-leg.is-warning {
    background: var(--c-danger-bg-2);
    border-left-color: #b91c1c;
    border-right-color: #b91c1c;
    color: var(--c-danger-text);
}

.sheduler-leg.is-warning .sheduler-leg-arrow {
    color: var(--c-danger-text);
}

.sheduler-total {
    position: sticky;
    bottom: 0;
    padding: 4px 8px;
    border: 1px solid var(--c-line-2);
    background: var(--c-panel);
    color: var(--c-text);
    font-weight: bold;
}

.sheduler-empty {
    padding: 12px;
    color: var(--c-text-dim);
    text-align: center;
}

/* Menu kontekstowe sklepu (prawy przycisk / długie przytrzymanie). */
.sheduler-context-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: transparent;
}

.sheduler-context-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    border: 1px solid var(--c-line-2);
    border-radius: 8px;
    background: var(--c-bg-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.sheduler-context-title {
    padding: 8px 10px;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-dim);
    font-size: 11px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sheduler-context-item {
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: transparent;
    color: var(--c-text);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    cursor: pointer;
}

.sheduler-context-item:last-child {
    border-bottom: 0;
}

.sheduler-context-item:hover,
.sheduler-context-item:focus-visible {
    background: var(--c-panel);
    outline: none;
}

/* ============================================
   MAP2 - MAPA WEKTOROWA (MAPLIBRE + SERWER MAP1)
   ============================================ */

/* Widok Map2 używa klas .map-* wspólnych z widokiem Map (listy, splitter, przyciski).
   Tutaj tylko to, co dotyczy samej mapy wektorowej. */

.map2-viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--c-bg);
}

.map2-map {
    position: absolute;
    inset: 0;
}

/* Serwer mapy / komunikaty ("Wyznaczanie trasy…", błąd kafli) - bez zasłaniania mapy. */
.map2-overlay {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 3;
    max-width: calc(100% - 12px);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--c-overlay-soft);
    color: var(--c-text-dim);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.map2-overlay:empty {
    display: none;
}

/* Marker sklepu: mapą rządzi MapLibre (pozycję ustawia sam), więc bez position/transform
   z .map-marker. Ikona i numer to klasy wspólne z widokiem Map. */
.map2-marker {
    display: block;
    width: 30px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.map2-marker:focus-visible {
    outline: 2px solid var(--c-warn-text);
    outline-offset: -2px;
}

/* Atrybucja i kontrolki MapLibre w ciemnym motywie aplikacji. */
.map2-map .maplibregl-ctrl-attrib {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
    font-size: 10px;
}

.map2-map .maplibregl-ctrl-attrib a {
    color: #1d4ed8;
}

.map2-map .maplibregl-canvas:focus-visible {
    outline: 2px solid var(--c-warn-text);
    outline-offset: -2px;
}

.view-panel {
    position: absolute;
    inset: 0;
    display: none;
    overflow-y: auto;
    padding: 12px;
}

.view-panel.active {
    display: block;
}

.flex-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: 8px;
}

.table-row {
    display: flex;
    border-bottom: 1px solid var(--c-line);
}

.table-row:last-child {
    border-bottom: none;
}

.table-row.header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--c-panel);
    font-weight: bold;
}

.table-cell {
    flex: 1;
    padding: 12px 8px;
    border-right: 1px solid var(--c-line);
    user-select: text;
    cursor: pointer;
    caret-color: var(--c-ok-text);
    font-size: 13px;
    word-break: break-word;
    white-space: pre-wrap;
}

.table-cell:last-child {
    border-right: none;
}

.table-cell.focused {
    outline: 2px solid #22c55e !important;
    background-color: var(--c-panel);
}

.footer {
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    min-height: 0;
    margin: 0 5px;
    gap: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 2px solid var(--c-line);
    background-color: var(--c-bg);
}

.footer.hidden {
    display: none !important;
}

.keyboard-side {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

.keyboard-center {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    width: min(680px, 100%);
    gap: 4px;
    min-width: 0;
    min-height: 0;
}

.kb-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    gap: 4px;
}

.kb-key {
    display: flex;
    flex: 1 1 0;
    min-width: 20px;
    min-height: var(--min-height-keyb);
    height: var(--min-height-keyb);
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    max-width: 64px;
    overflow: hidden;
    border: none;
    border-radius: 4px;
    background-color: var(--c-panel-2);
    color: var(--c-text);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

/* Klawisze z pojedynczym znakiem (litery, cyfry, symbole) - czcionka o 2px większa
   od bazowej, bo skróty dwuliterowe (EN, SH, SI, DL, SP, CP, PA, CL) mieszczą się w 12px. */
.kb-key.single {
    font-size: 16px;
}

.kb-key:active,
.kb-key.pressed {
    background-color: #3b82f6 !important;
    color: #fff;
}

.kb-key.action {
    background-color: #ef4444;
    color: #fff;
}

.kb-key.func {
    background-color: #0284c7;
    color: #fff;
}

.kb-key.shift-active {
    background-color: #f59e0b !important;
    color: #000;
}

.kb-key.sign-active {
    background-color: #a855f7 !important;
    color: #fff;
}

.kb-key.copied {
    background-color: #22c55e !important;
    color: #000 !important;
}

.kb-key.flash {
    background-color: #3b82f6 !important;
    color: #fff;
}

/* ============================================
   WIELKOŚĆ CZCIONKI WIDOKÓW
   ============================================
   Ustawienie "Wielkość czcionki" z okna "⚙" (settings.viewFont, domyślnie 14 px) -
   dotyczy widoków Shop, Checkrep, Trnrep i Saverep (panele z klasą .view-font;
   Modrep ma własne czcionki). Reguła ".view-font *" wygrywa z globalnym "* { font-size:12px }",
   ale przegrywa z bardziej specificznymi (np. ".tab1 .navbtn" 20px) i z stylem inline,
   więc ikony i nagłówki z własnym rozmiarem zostają. Zmiana wartości po "OK" działa
   od razu - to zmienna CSS (u.FuncViewFontApply w helper.js). */
.view-font,
.view-font * {
    font-size: var(--view-font, 14px);
}