:root {
  --ink: #16161b;
  --muted: #6d6d78;
  --line: #dcdce2;
  --paper: #f6f6f8;
  --white: #fff;
  --green: #e4003b;
  --lime: #ff2458;
  --coral: #ff6a4d;
  --blue: #365edc;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Montserrat', sans-serif; }
/* 100dvh: pasek adresu Safari na iOS wchodzi w 100vh i ucina dol ekranu logowania. */
/* Ekran logowania trzyma sie tej samej palety co panel: czarne tlo jak gorny pasek,
   czerwony akcent marki i biala karta z taka sama ramka jak kafelki na pulpicie. */
.auth-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 82% 8%, #e4003b30 0, #e4003b00 46%), radial-gradient(circle at 10% 92%, #ff24581f 0, #ff245800 42%), #09090b; }
.auth-panel { position: relative; width: min(470px, 100%); padding: 42px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 30px 90px #00000073; }
.auth-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); }
/* Nazwa marki jest biala, bo zwykle lezy na czarnym pasku - na jasnej karcie logowania
   musi wrocic do koloru tekstu, inaczej znika. */
.auth-brand { margin-bottom: 72px; color: var(--ink); }
.auth-panel .brand strong { color: var(--ink); }
.auth-panel h1 { margin-bottom: 28px; font-size: clamp(34px, 6vw, 52px); }
.login-form { display: grid; gap: 14px; }
.login-form label, .user-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.login-form input, .user-form input, .user-form select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); background: #fbfcfa; color: var(--ink); font: inherit; font-size: 13px; }
.login-button { height: 48px; margin-top: 8px; border: 0; color: var(--white); background: var(--green); cursor: pointer; font: inherit; font-weight: 700; text-align: left; padding: 0 16px; }
.login-button span { float: right; font-size: 20px; }
.auth-note { display: block; margin-top: 22px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.auth-note a { color: var(--green); font-weight: 700; text-decoration: none; }
.form-error { min-height: 16px; margin: 0; color: #a8523f; font-size: 11px; }
.side-nav { position: fixed; top: 92px; left: 18px; z-index: 10; display: grid; gap: 6px; width: 88px; padding: 7px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 10px 25px #19312612; }
.side-nav-button { display: grid; place-items: center; gap: 4px; height: 62px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 20px; }
.side-nav-button span { font-size: 10px; font-weight: 700; }
.side-nav-button.active { color: var(--green); background: #e8f0e3; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; background: #09090b; color: #fff; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 19px; letter-spacing: -.4px; }
.brand strong { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--green); border-radius: 4px; font-size: 16px; }
.topbar-account { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 12px; }
.account-button { padding: 7px 10px; min-height: 32px; border: 1px solid #5e5e68; color: #fff; background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.network-status { color: #b9f4cc; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.network-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4dd985; }
.network-status.offline { color: #ffd29c; }
.network-status.offline::before { background: #f59e0b; }
.theme-switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; cursor: pointer; }
.theme-switch input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-switch + .account-button { margin-left: 10px; }
.theme-switch-track { display: flex; align-items: center; width: 38px; height: 22px; padding: 3px; border: 1px solid #5e5e68; border-radius: 16px; }
.theme-switch-track i { width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s ease, background .2s ease; }
.theme-switch input:checked + .theme-switch-track i { transform: translateX(16px); background: var(--green); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--lime); }
/* 100vw liczy tez pasek przewijania - stad margines zamiast sztywnej szerokosci, inaczej strona jedzie w bok. */
.app-shell { width: auto; margin: 0 24px 0 120px; }
.app-shell > section, .app-shell > .dashboard-grid { width: 100%; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 52px 0 30px; }
.eyebrow { margin: 0 0 12px; color: var(--green); text-transform: uppercase; letter-spacing: 1.7px; font-size: 10px; font-weight: 700; }
h1, h2 { font-family: 'Montserrat', sans-serif; margin: 0; letter-spacing: -.6px; }
h1 { font-size: clamp(34px, 4vw, 58px); line-height: .98; }
h1 span { color: var(--ink); }
h1 em { color: var(--green); font-style: normal; }
.intro-copy { max-width: 230px; margin: 0 0 3px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.toolbar { display: flex; gap: 10px; margin-top: 30px; margin-bottom: 22px; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px #19312608; }
.search-field, .select-field { display: flex; align-items: center; height: 48px; border: 1px solid var(--line); background: #fbfcfa; }
.search-field { flex: 1; min-width: 220px; padding: 0 13px; gap: 10px; }
.search-field > span { color: var(--green); font-size: 25px; line-height: 0; transform: translateY(-2px); }
input, select { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
input { width: 100%; }
select { width: 245px; padding: 0 16px 0 8px; cursor: pointer; }
.filter-icon { padding-left: 13px; color: var(--green); }
.clear-button { border: 0; color: var(--muted); background: transparent; font-size: 21px; cursor: pointer; }
.icon-button, .refresh-button { height: 48px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.icon-button { width: 48px; color: var(--green); background: #e8f0e3; font-size: 25px; }
.refresh-button { padding: 0 20px; color: var(--ink); background: var(--lime); }
.notes-overview-button { height: 48px; padding: 0 14px; border: 1px solid var(--line); color: var(--green); background: var(--white); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; }
.route-intro { display: flex; align-items: center; gap: 10px; flex: 1; }
.route-intro strong, .route-intro small { display: block; }
.route-intro strong { font-family: 'Montserrat', sans-serif; font-size: 13px; }
.route-intro small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.route-icon { display: grid; place-items: center; width: 31px; height: 31px; color: var(--ink); background: var(--lime); border-radius: 50%; font-size: 22px; }
.radius-field { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.radius-field select { width: 105px; padding: 8px; border: 1px solid var(--line); background: var(--white); font-size: 11px; }
.route-action { height: 38px; padding: 0 12px; border: 1px solid #b9cbb3; color: var(--green); background: var(--white); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; }
.route-primary { border-color: var(--green); color: var(--white); background: var(--green); }
.route-action:disabled { cursor: not-allowed; opacity: .45; }
.route-primary span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; border-radius: 50%; color: var(--green); background: var(--lime); }
.refresh-button span { font-size: 19px; margin-right: 5px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 18px; align-items: stretch; }
.dashboard-grid.schedule-mode { grid-template-columns: minmax(0, 1fr); }
.dashboard-grid.schedule-mode .schedule-window { width: 100%; }
.dashboard-tile { min-height: 245px; }
.stats { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: 25px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 8px 22px #1931260b; }
.stats .legend { display: grid; gap: 12px; margin-left: 0; }
.offer-box { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 0; padding: 22px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 8px 22px #1931260b; }
.offer-box .eyebrow { margin-bottom: 5px; }
.offer-box h2 { font-size: 22px; }
.offer-box p:not(.eyebrow) { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* Kafelek pogody wyglada jak pozostale na pulpicie - niebieskie tlo odcinalo sie jak podswietlenie. */
.weather-box { display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 8px 22px #1931260b; }
.weather-reading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.weather-reading strong { font-family: 'Montserrat', sans-serif; font-size: 45px; line-height: 1; }
.weather-reading span { font-size: 35px; }
.weather-box > p:not(.eyebrow) { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.weather-box small { color: var(--muted); font-size: 10px; }
.coming-soon { padding: 6px 9px; color: var(--green); background: #e8f0e3; font-size: 10px; font-weight: 700; white-space: nowrap; }
.stat { display: flex; align-items: baseline; gap: 8px; }
.stat span { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 700; }
.stat small { color: var(--muted); font-size: 11px; }
.legend { display: flex; gap: 17px; margin-left: auto; color: var(--muted); font-size: 11px; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
/* Te trzy kolory musza byc identyczne z kolorami znacznikow rysowanych w app.js (MARKER_COLORS).
   Nie sa brane z motywu, bo kafelki mapy zawsze sa jasne - znaczniki wygladaja tak samo w obu motywach. */
.marker-detailing { background: #ee8068; } .marker-touchless { background: #4d8bb8; } .marker-touch { background: #216b4b; }
.schedule-window { min-width: 0; margin-bottom: 0; padding: 20px 22px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 8px 22px #1931260b; }
.schedule-heading, .schedule-summary, .schedule-form { display: flex; align-items: center; gap: 14px; }
.schedule-heading { justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.schedule-heading .eyebrow { margin-bottom: 5px; } .schedule-heading h2 { font-size: 22px; }
.schedule-view { padding-top: 16px; }
.schedule-summary strong { color: var(--green); font-family: 'Montserrat', sans-serif; font-size: 25px; }
.schedule-summary span { color: var(--muted); font-size: 12px; }
.schedule-summary .route-action { margin-left: auto; }
.schedule-list { display: grid; gap: 7px; margin-top: 14px; }
.schedule-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-left: 3px solid var(--lime); background: #f5f8f2; }
.schedule-entry strong, .schedule-entry span { display: block; }
.schedule-entry strong { font-size: 12px; } .schedule-entry span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.schedule-entry-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.event-route-button { height: 30px; padding: 0 10px; }
.remove-button { width: 26px; height: 26px; color: var(--muted); background: transparent; font-size: 20px; }
.schedule-empty { margin: 15px 0 0; color: var(--muted); font-size: 12px; }
.schedule-form { align-items: end; }
.schedule-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.schedule-form input, .schedule-form select { height: 38px; width: 220px; padding: 0 9px; border: 1px solid var(--line); background: #fbfcfa; font-size: 12px; }
.schedule-form #schedule-place-search { width: 100%; }
.schedule-form label:nth-child(3) { flex: 1; } .schedule-form label:nth-child(3) input { width: 100%; }
.schedule-form .route-action { height: 38px; }
.calendar-view { padding-top: 16px; }
.calendar-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.calendar-toolbar h2 { min-width: 190px; text-transform: capitalize; font-size: 22px; text-align: center; }
.calendar-nav { width: 34px; height: 34px; border: 1px solid var(--line); color: var(--green); background: var(--white); cursor: pointer; font-size: 24px; line-height: 1; }
.calendar-toolbar .route-action { margin-left: auto; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; }
.calendar-weekdays span { padding: 8px 4px; }
.calendar-grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.calendar-day { min-height: 78px; padding: 8px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: var(--white); cursor: pointer; text-align: left; }
.calendar-day:hover, .calendar-day.selected { background: #eef4e9; }
.calendar-day.empty { cursor: default; background: #f8faf7; }
.calendar-day strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; }
.calendar-day.today strong { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--white); background: var(--green); }
.calendar-day span { display: block; width: fit-content; max-width: 100%; margin-top: 11px; padding: 3px 5px; overflow: hidden; color: var(--green); background: #e8f0e3; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr); min-height: 600px; margin-bottom: 30px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 8px 22px #1931260b; }
.map-frame { min-width: 0; min-height: 600px; background: #e8eee8; }
.map { display: block; width: 100%; min-height: 600px; border: 0; }
.places-panel { min-width: 0; border-left: 1px solid var(--line); background: #fbfcfa; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; padding: 25px 24px 18px; border-bottom: 1px solid var(--line); }
.panel-heading .eyebrow { margin-bottom: 5px; } h2 { font-size: 22px; }
.count-pill { padding: 5px 9px; color: var(--green); background: #e8f0e3; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status { padding: 15px 24px 5px; color: var(--muted); font-size: 12px; }
.places-list { max-height: 510px; overflow: auto; padding: 0 10px 20px; }
.place-card { display: block; width: 100%; padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); }
.place-card:hover, .place-card.active { background: #eef4e9; }
.place-main { display: block; width: 100%; padding: 5px 0; border: 0; text-align: left; color: inherit; background: transparent; cursor: pointer; }
.route-check { display: block; float: left; margin: 7px 10px 0 0; cursor: pointer; }
.route-check input { display: block; width: 17px; height: 17px; margin: 0; border: 2px solid #abc1ad; border-radius: 0; appearance: none; background: var(--white); cursor: pointer; }
.route-check input:checked { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--white); }
.route-check input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.route-check span { display: none; }
.place-name { display: block; margin-bottom: 6px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; }
.place-meta { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.place-category { display: inline-block; margin-top: 8px; color: var(--green); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.visit-toggle, .notes-button, .remove-button { border: 0; cursor: pointer; font: inherit; }
.visit-toggle { padding: 5px 0; color: var(--green); background: transparent; font-size: 10px; font-weight: 700; }
.place-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.place-route-button { height: 28px; padding: 0 9px; }
.status-do_odwiedzenia { color: #9b6a13; background: #fff4d9; }
.status-odwiedzony { color: var(--green); background: #e8f0e3; }
.status-zainteresowany { color: #a8523f; background: #ffe9e3; }
.status-klient { color: #286a91; background: #e5f2fa; }
.status-nieaktualny { color: var(--muted); background: #eef2ec; }
.notes-button { padding: 5px 8px; border: 0; color: var(--green); background: #e8f0e3; font-size: 10px; font-weight: 700; cursor: pointer; }
.leaflet-popup-content-wrapper { border-radius: 5px; } .popup-name { font-family: 'Montserrat', sans-serif; font-weight: 700; }
.popup-link { display: inline-block; margin-top: 7px; color: var(--green); font-size: 12px; font-weight: 700; }
footer { padding: 22px 4vw 28px; color: var(--muted); text-align: center; font-size: 11px; }
.sales-dialog { width: min(640px, 92vw); padding: 0; border: 0; background: var(--white); color: var(--ink); box-shadow: 0 22px 70px #16251f35; }
.sales-dialog::backdrop { background: #16251f80; }
.sales-dialog form { padding: 25px; }
.notes-overview-dialog { width: min(720px, 92vw); max-height: 82vh; overflow: auto; padding: 25px; border: 0; background: var(--white); color: var(--ink); box-shadow: 0 22px 70px #16251f35; }
.notes-overview-dialog::backdrop { background: #16251f80; }
.admin-dialog { width: min(680px, 92vw); max-height: 85vh; overflow: auto; padding: 25px; border: 0; background: var(--white); color: var(--ink); box-shadow: 0 22px 70px #16251f35; }
.admin-dialog::backdrop { background: #16251f80; }
/* Naglowki i stopki okien dialogowych - bez tego przyciski byly natywne i za male na dotyk. */
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dialog-heading .eyebrow { margin-bottom: 5px; }
.dialog-close { width: 40px; height: 40px; margin: -8px -8px 0 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 26px; line-height: 1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.cancel-button, .save-button { height: 44px; padding: 0 18px; border: 1px solid var(--line); color: var(--ink); background: var(--white); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.save-button { border-color: var(--green); color: var(--white); background: var(--green); }
.user-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.user-form .save-button { align-self: end; height: 40px; }
.users-list { display: grid; gap: 7px; margin-top: 18px; }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-left: 3px solid var(--lime); background: #f5f8f2; }
.user-row.inactive { border-left-color: var(--line); opacity: .65; }
.user-row strong, .user-row span { display: block; }
.user-row strong { font-size: 13px; }
.user-row span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.user-actions { display: flex; align-items: center; gap: 8px; }
.user-form-region small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.4; }
.user-region-field { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.user-region-field select { width: 175px; height: 34px; padding: 0 8px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 12px; }
.products-view { margin-top: 30px; }
.products-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.products-heading h2 { font-size: 30px; }
.products-toolbar { display: flex; gap: 12px; margin-bottom: 20px; }
.products-toolbar .search-field { flex: 1; }
.products-toolbar > select { width: 260px; padding: 0 12px; border: 1px solid var(--line); background: var(--white); }
.products-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: 0 8px 22px #1931260b; }
.product-card img, .product-placeholder { display: block; width: 100%; height: 190px; object-fit: contain; background: #f4f7f2; }
.product-placeholder { display: grid; place-items: center; color: var(--green); font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; }
.product-body { padding: 16px; }
.product-category { color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.product-card h3 { margin: 8px 0; font-family: 'Montserrat', sans-serif; font-size: 17px; }
.product-card p { min-height: 54px; margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.product-card a { color: var(--green); font-size: 11px; font-weight: 700; text-decoration: none; }
.manual-place-view { margin-top: 30px; padding: 30px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 8px 22px #1931260b; }
.manual-heading { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.manual-heading .eyebrow { margin-bottom: 6px; }
.manual-heading h2 { font-size: 28px; }
.manual-heading p:last-child { max-width: 600px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.manual-place-form { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; width: 100%; margin-top: 24px; }
.manual-place-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.manual-place-form input, .manual-place-form select { width: 100%; height: 44px; padding: 0 11px; border: 1px solid var(--line); background: #fbfcfa; color: var(--ink); font: inherit; font-size: 13px; }
.manual-full-field { grid-column: 1 / -1; }
.coordinates-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-column: 1 / -1; }
.manual-hint { grid-column: 1 / -1; margin: -3px 0 0; color: var(--muted); font-size: 11px; }
.manual-submit { grid-column: 1 / -1; width: 180px; }
.app-download-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; margin-top: 24px; }
.app-download-card { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 22px; border: 1px solid var(--line); background: #fbfcfa; }
.app-download-card .eyebrow { margin-bottom: 4px; }
.app-download-card strong { font-family: 'Montserrat', sans-serif; font-size: 21px; }
.app-download-card span { color: var(--muted); font-size: 11px; }
.app-download-button { display: inline-flex; align-items: center; height: 44px; margin-top: 16px; text-decoration: none; }
.app-download-steps { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.app-download-steps li { position: relative; padding-left: 35px; color: var(--muted); font-size: 13px; line-height: 1.5; counter-increment: step; }
.app-download-steps li strong { color: var(--ink); font-weight: 700; }
.app-download-steps li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--white); background: var(--green); font-size: 11px; font-weight: 700; }
.app-download-note { margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.app-download-note code { padding: 3px 7px; color: var(--green); background: #e8f0e3; font-family: inherit; font-size: 11px; font-weight: 700; }
.offline-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #09090b; }.offline-panel { width: min(430px, 100%); padding: 38px; color: #fff; background: #17171c; }.offline-panel .brand-mark { margin-bottom: 48px; }.offline-panel .eyebrow { color: #ff6b88; }.offline-panel p:last-of-type { color: #b9b9c2; line-height: 1.5; }
.offline-retry { height: 48px; width: 100%; margin-top: 26px; padding: 0 18px; border: 1px solid #4c4c56; color: #fff; background: #17171c; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.offline-retry:hover { border-color: var(--green); }
html[data-theme='dark'] { --ink: #f5f5f7; --muted: #aaaab5; --line: #303038; --paper: #111116; --white: #1a1a20; --green: #ff315f; --lime: #ff5579; --coral: #ff7a5d; --blue: #7191ff; }
html[data-theme='dark'] .topbar { background: #050506; }
html[data-theme='dark'] .side-nav, html[data-theme='dark'] .toolbar, html[data-theme='dark'] .workspace, html[data-theme='dark'] .schedule-window, html[data-theme='dark'] .stats, html[data-theme='dark'] .offer-box, html[data-theme='dark'] .manual-place-view, html[data-theme='dark'] .product-card, html[data-theme='dark'] .sales-dialog, html[data-theme='dark'] .notes-overview-dialog, html[data-theme='dark'] .admin-dialog { background: var(--white); }
html[data-theme='dark'] .places-panel, html[data-theme='dark'] .search-field, html[data-theme='dark'] .select-field, html[data-theme='dark'] .product-card img, html[data-theme='dark'] .product-placeholder, html[data-theme='dark'] .calendar-day, html[data-theme='dark'] .schedule-entry, html[data-theme='dark'] .overview-note { background: #222229; }
/* Ciemny motyw podswietla wylacznie czerwona ramka (var(--green) to #ff315f), bez wypelnienia.
   inset box-shadow zamiast border, zeby ramka nie przesuwala ukladu. */
html[data-theme='dark'] .side-nav-button.active, html[data-theme='dark'] .place-card:hover, html[data-theme='dark'] .place-card.active { background: transparent; box-shadow: inset 0 0 0 1px var(--green); }
html[data-theme='dark'] .calendar-day:hover, html[data-theme='dark'] .calendar-day.selected { background: #222229; box-shadow: inset 0 0 0 1px var(--green); }
html[data-theme='dark'] .calendar-day span, html[data-theme='dark'] .count-pill { color: var(--green); background: #3c1621; }
html[data-theme='dark'] .route-action:not(.route-primary), html[data-theme='dark'] .notes-overview-button { background: #24242b; color: #f5f5f7; border-color: #4c4c56; }
html[data-theme='dark'] input, html[data-theme='dark'] select, html[data-theme='dark'] textarea { color: var(--ink); }
/* color-scheme przestawia natywne kontrolki (kalendarz w input[type=date], lista select, paski przewijania). */
html[data-theme='dark'] { color-scheme: dark; }
/* Pola formularzy maja w jasnym motywie tlo #fbfcfa - w ciemnym musza byc ciemne, inaczej swieca na bialo. */
html[data-theme='dark'] .login-form input, html[data-theme='dark'] .user-form input, html[data-theme='dark'] .user-form select, html[data-theme='dark'] .schedule-form input, html[data-theme='dark'] .schedule-form select, html[data-theme='dark'] .manual-place-form input, html[data-theme='dark'] .manual-place-form select, html[data-theme='dark'] .sales-grid input, html[data-theme='dark'] .sales-grid textarea, html[data-theme='dark'] .radius-field select, html[data-theme='dark'] .products-toolbar > select, html[data-theme='dark'] .user-region-field select, html[data-theme='dark'] .calendar-nav { background: #222229; border-color: var(--line); color: var(--ink); }
html[data-theme='dark'] input::placeholder, html[data-theme='dark'] textarea::placeholder { color: #7c7c88; }
html[data-theme='dark'] .calendar-day.empty { background: #16161c; }
html[data-theme='dark'] .app-download-card { background: #222229; }
html[data-theme='dark'] .app-download-note code { background: #3c1621; }
html[data-theme='dark'] .user-row { background: #222229; }
html[data-theme='dark'] .map-frame { background: #222229; }
html[data-theme='dark'] .icon-button, html[data-theme='dark'] .notes-button, html[data-theme='dark'] .coming-soon { color: var(--green); background: #3c1621; }
html[data-theme='dark'] .route-check input { background: #222229; border-color: #4c4c56; }
html[data-theme='dark'] .route-check input:checked { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px #1a1a20; }
/* Przyciski dialogow (notatki, konta) nie maja wlasnych stylow - bez tego renderuja sie jako jasne natywne guziki. */
html[data-theme='dark'] .cancel-button { border: 1px solid #4c4c56; color: var(--ink); background: #24242b; }
html[data-theme='dark'] .dialog-close { border: 0; color: var(--ink); background: transparent; }
html[data-theme='dark'] .save-button { border: 1px solid var(--green); color: var(--white); background: var(--green); }
/* Dymki i przyciski Leaflet renderuja sie w tej samej warstwie co panel, wiec tez wymagaja ciemnego tla. */
html[data-theme='dark'] .leaflet-popup-content-wrapper, html[data-theme='dark'] .leaflet-popup-tip { color: var(--ink); background: #222229; }
html[data-theme='dark'] .leaflet-bar a, html[data-theme='dark'] .leaflet-control-attribution { color: var(--ink); background: #222229; }
html[data-theme='dark'] .leaflet-bar a:hover { background: #2c2c34; }
html[data-theme='dark'] .leaflet-bar a { border-bottom-color: #4c4c56; }
.notes-overview-list { display: grid; gap: 10px; margin-top: 22px; }
.overview-note { padding: 15px; border: 1px solid var(--line); background: #fbfcfa; }
.overview-note-heading { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.overview-note-heading strong { font-family: 'Montserrat', sans-serif; font-size: 14px; }
.overview-note-heading span { color: var(--muted); font-size: 11px; text-align: right; }
.overview-note-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; padding: 12px 0; }
.overview-note-details div { display: grid; gap: 2px; }
.overview-note-details b { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.overview-note-details span { font-size: 12px; line-height: 1.35; }
.overview-edit { padding: 7px 10px; }
.sales-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.sales-grid label { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.sales-grid input, .sales-grid textarea { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid var(--line); outline-color: var(--green); color: var(--ink); background: #fbfcfa; font: inherit; font-size: 12px; }
.sales-grid textarea { resize: vertical; }
.full-field { grid-column: 1 / -1; }
@media (max-width: 1150px) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .schedule-window { grid-column: 1 / -1; } }
@media (max-width: 800px) { .dashboard-grid { grid-template-columns: 1fr; } .dashboard-tile, .schedule-window { min-height: 0; } .offer-box { display: block; } .offer-box p:not(.eyebrow) { margin-top: 14px; } .coming-soon { display: inline-block; margin-top: 14px; } }
@media (max-width: 1000px) { .products-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .auth-screen { padding: 18px; } .auth-panel { padding: 30px 24px; } .auth-brand { margin-bottom: 55px; } .side-nav { position: static; display: flex; width: auto; margin: 12px 3vw 0; overflow-x: auto; } .side-nav-button { flex: 1 0 88px; } .app-shell { width: 94vw; margin: 0 auto; } .topbar { padding: 0 3vw; } .topbar-account { gap: 9px; } .account-button { min-height: 40px; } .theme-switch + .account-button { margin-left: 12px; } .topbar-account span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .intro { display: block; padding-top: 35px; } .toolbar { flex-wrap: wrap; padding: 12px; } .search-field { flex-basis: 100%; } select { width: calc(100vw - 155px); max-width: none; } .refresh-button, .notes-overview-button { flex: 1; } .stats { gap: 18px; flex-wrap: wrap; } .legend { flex-basis: 100%; margin-left: 0; } .schedule-heading, .schedule-summary, .schedule-form { align-items: stretch; flex-wrap: wrap; } .schedule-form label, .schedule-form input, .schedule-form select, .schedule-form .route-action { width: 100%; } .calendar-toolbar h2 { min-width: 0; flex: 1; font-size: 18px; } .calendar-toolbar .route-action { margin-left: 0; } .calendar-day { min-height: 58px; padding: 5px; } .calendar-day span { margin-top: 5px; font-size: 8px; } .workspace { display: block; } .map-frame, .map { min-height: 420px; } .places-panel { border-top: 1px solid var(--line); border-left: 0; } .places-list { max-height: 360px; } .overview-note-details { grid-template-columns: 1fr; } .overview-note-heading { display: block; } .overview-note-heading span { display: block; margin-top: 5px; text-align: left; } .user-form, .manual-place-form, .products-toolbar { grid-template-columns: 1fr; } .products-toolbar { display: grid; } .products-toolbar > select { width: 100%; height: 44px; } .products-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .user-row { align-items: flex-start; flex-direction: column; } .manual-place-view { padding: 22px; } .manual-full-field, .coordinates-fields, .manual-hint, .manual-submit { grid-column: auto; } .coordinates-fields { display: grid; grid-template-columns: 1fr; } .manual-submit { width: 100%; } }
@media (max-width: 520px) { .products-list { grid-template-columns: 1fr; } .products-heading { align-items: flex-start; flex-direction: column; } }
/* --- Telefony: cele dotykowe, brak przewijania w poziomie, blokada zoomu iOS przy fokusie pola --- */
@media (max-width: 800px) {
  html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  /* Safari na iOS przybliza cala strone, gdy pole ma czcionke mniejsza niz 16px. */
  input, select, textarea, .schedule-form input, .schedule-form select, .sales-grid input, .sales-grid textarea, .products-toolbar > select, .radius-field select, .login-form input, .user-form input, .user-form select, .manual-place-form input, .manual-place-form select, .user-region-field select { font-size: 16px; }
  /* Pole wyboru kategorii mialo 21 px wysokosci - dotyk trafial w etykiete, nie w kontrolke. */
  .select-field select { height: 100%; }
  /* Przelacznik motywu i przyciski powiekszania mapy byly ponizej progu wygodnego dotyku. */
  .theme-switch { min-height: 40px; padding: 9px 0; }
  .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
  .sales-grid { grid-template-columns: 1fr; }
  .sales-dialog, .notes-overview-dialog, .admin-dialog { width: min(560px, 94vw); }
  .sales-dialog form, .notes-overview-dialog, .admin-dialog { padding: 20px; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .save-button, .dialog-actions .cancel-button { width: 100%; }
  .visit-toggle, .notes-button, .route-action, .calendar-nav, .clear-button, .event-route-button, .place-route-button { min-height: 40px; }
  .notes-button, .visit-toggle { padding: 10px 12px; }
  .remove-button { width: 40px; height: 40px; }
  .place-controls { flex-wrap: wrap; gap: 6px; }
  .schedule-entry { flex-wrap: wrap; }
  .schedule-entry > div { min-width: 0; overflow-wrap: anywhere; }
  .schedule-entry-actions { margin-left: auto; }
  .user-row { gap: 8px; }
  .user-actions { flex-wrap: wrap; }
  .user-region-field { flex: 1 0 100%; }
  .user-region-field select { flex: 1; width: auto; min-width: 0; height: 40px; }
  .app-download-grid { grid-template-columns: 1fr; gap: 22px; }
  .app-download-button { width: 100%; justify-content: center; }
  /* Pasek nawigacji byl przewijany w bok, wiec piata zakladka ("Aplikacja") chowala sie
     poza ekranem i nikt jej nie znajdowal. Na telefonie wszystkie musza byc widoczne naraz. */
  .side-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .side-nav-button { flex: none; height: 60px; padding: 0 2px; font-size: 17px; }
  .side-nav-button span { font-size: 9px; line-height: 1.15; }
}
@media (max-width: 430px) {
  .topbar { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 3vw; }
  .brand { font-size: 17px; }
  .topbar-account { flex: 1 0 100%; justify-content: space-between; gap: 8px; }
  .theme-switch + .account-button { margin-left: 0; }
  .app-shell { width: 92vw; }
  .select-field { flex: 1 0 100%; }
  .select-field select { flex: 1; width: auto; min-width: 0; }
  .calendar-day { min-height: 52px; padding: 4px; }
  .calendar-day strong { font-size: 12px; }
  .calendar-day.today strong { width: 22px; height: 22px; }
  .products-list { grid-template-columns: 1fr; }
  .auth-panel { padding: 26px 20px; }
}