/* ============================================
   ORGANIC & EARTHY THEME - "Slow Life" Vibe
   Kiedy Smieci - Main Application Styles
   ============================================ */

/* CSS Variables - Light Mode (scentralizowane) */
:root {
    /* Background colors */
    --bg-primary: #F9F7F2;
    --bg-secondary: #F5F0E8;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FDFCFA;

    /* Primary colors */
    --color-primary: #2E7D32;
    --color-primary-light: #4CAF50;
    --color-primary-dark: #1B5E20;
    --color-secondary: #8D6E63;
    --color-secondary-light: #A1887F;
    --color-accent: #5D4037;

    /* Text colors (WCAG AA >=4.5:1 na tlach cream) */
    --text-primary: #37474F;
    --text-secondary: #455A64;
    --text-muted: #546E7A;

    /* Borders and shadows */
    --border-color: #EBE4D8;
    --shadow-color: rgba(46, 125, 50, 0.08);

    /* Organic theme aliases (dla kompatybilności) */
    --organic-green: #2E7D32;
    --organic-green-light: #4CAF50;
    --organic-brown: #8D6E63;
    --organic-brown-light: #A1887F;
    --organic-cream: #F9F7F2;
    --organic-graphite: #37474F;

    /* Status colors */
    --organic-success: #66BB6A;
    --organic-warning: #FFB74D;
    --organic-error: #E57373;
    --organic-info: #4FC3F7;

    /* Waste type colors (scentralizowane dla spójności) */
    --waste-mixed-bg: #455A64;
    --waste-mixed-text: white;
    --waste-plastic-bg: #FBC02D;
    --waste-plastic-text: #1A1A1A;
    --waste-paper-bg: #1976D2; /* WCAG AA 4.6:1 (bylo #42A5F5 = 2.6:1) */
    --waste-paper-text: white;
    --waste-glass-bg: #2E7D32; /* WCAG AA 5.1:1 (bylo #66BB6A = 2.4:1) */
    --waste-glass-text: white;
    --waste-bio-bg: #8D6E63;
    --waste-bio-text: white;
    --waste-large-bg: #9333ea;
    --waste-large-text: white;
    --waste-textile-bg: #C2410C; /* WCAG AA 5.2:1 (bylo #f97316 = 2.8:1) */
    --waste-textile-text: white;

    /* Spacing scale (dla konsystencji) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border radius scale */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
}

/* CSS Variables - Dark Mode (WCAG AA contrast ratios) */
.dark {
    --bg-primary: #1A2E1A;
    --bg-secondary: #243324;
    --bg-card: #2D3F2D;
    --bg-card-hover: #354535;

    --color-primary: #66BB6A;
    --color-primary-light: #81C784;
    --color-primary-dark: #4CAF50;
    --color-secondary: #A1887F;
    --color-secondary-light: #BCAAA4;
    --color-accent: #D7CCC8;

    /* Text colors - improved contrast (WCAG AA 4.5:1 ratio) */
    --text-primary: #F5F5F0;
    --text-secondary: #E8F5E9; /* Was #C8E6C9 - now lighter for better contrast */
    --text-muted: #A5D6A7;      /* Was #81C784 - now lighter for readability */

    --border-color: #3D5A3D;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Auto Dark Mode - respects system preference (WCAG 2.1 AAA) */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg-primary: #1A2E1A;
        --bg-secondary: #243324;
        --bg-card: #2D3F2D;
        --bg-card-hover: #354535;
        --color-primary: #66BB6A;
        --color-primary-light: #81C784;
        --color-primary-dark: #4CAF50;
        --color-secondary: #A1887F;
        --color-secondary-light: #BCAAA4;
        --color-accent: #D7CCC8;
        --text-primary: #F5F5F0;
        --text-secondary: #E8F5E9;
        --text-muted: #A5D6A7;
        --border-color: #3D5A3D;
        --shadow-color: rgba(0, 0, 0, 0.3);
    }
}

/* Base Typography - Nunito for organic feel */
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Kolory odpadów - używają CSS variables dla spójności */
.waste-mixed { background: var(--waste-mixed-bg); color: var(--waste-mixed-text); }
.waste-plastic { background: var(--waste-plastic-bg); color: var(--waste-plastic-text); } /* WCAG AA: contrast 10.5:1 */
.waste-paper { background: var(--waste-paper-bg); color: var(--waste-paper-text); }
.waste-glass { background: var(--waste-glass-bg); color: var(--waste-glass-text); }
.waste-bio { background: var(--waste-bio-bg); color: var(--waste-bio-text); }
.waste-large { background: var(--waste-large-bg); color: var(--waste-large-text); }
.waste-textile { background: var(--waste-textile-bg); color: var(--waste-textile-text); }

/* Kolory odpadów - Dark mode: jaśniejsze tła + CIEMNY tekst (WCAG AA;
   biały tekst na tych jasnych tłach dawał 2.0-3.9:1) */
.dark .waste-mixed { --waste-mixed-bg: #546E7A; }
.dark .waste-plastic { --waste-plastic-bg: #FFCA28; }
.dark .waste-paper { --waste-paper-bg: #64B5F6; --waste-paper-text: #1A1A1A; }
.dark .waste-glass { --waste-glass-bg: #81C784; --waste-glass-text: #1A1A1A; }
.dark .waste-bio { --waste-bio-bg: #A1887F; --waste-bio-text: #1A1A1A; }
.dark .waste-large { --waste-large-bg: #BA68C8; --waste-large-text: #1A1A1A; } /* było #AB47BC: 3,61:1 z #1A1A1A; #BA68C8 = 4,9:1 (2.2.1) */
.dark .waste-textile { --waste-textile-bg: #FF8A65; --waste-textile-text: #1A1A1A; }

/* Earth Colors - Dark Mode Support (WCAG AA 4.5:1 contrast) */
/* These override Tailwind earth-* colors in dark mode for better readability */
.dark .text-earth-100 { color: #E8F5E9 !important; } /* Very light green for dark bg */
.dark .text-earth-200 { color: #C8E6C9 !important; }
.dark .text-earth-300 { color: #A5D6A7 !important; } /* Light muted green */
.dark .text-earth-400 { color: #A5D6A7 !important; } /* było #81C784: 3,91:1 na kartach forest-900 (#1B5E20); #A5D6A7 = 4,79:1 */
.dark .text-earth-500 { color: #66BB6A !important; } /* Accent green */
/* Po przyciemnieniu palety (WCAG AA na jasnym tle) te same utility w dark mode
   muszą wrócić do jasnych odcieni — także warianty dark: (Tailwind generuje
   .dark .dark\:text-..., ktorego NIE lapie .dark .text-...) */
.dark .dark\:text-earth-300 { color: #A5D6A7 !important; }
.dark .dark\:text-earth-400 { color: #A5D6A7 !important; }
.dark .text-graphite-500, .dark .dark\:text-graphite-500 { color: #B0BEC5 !important; }
.dark .text-forest-600, .dark .text-forest-700 { color: #A5D6A7 !important; } /* jw.: 3,91 → 4,79:1 na #1B5E20 */

/* Animacje */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes drive { 0% { left: -100px; } 100% { left: 120%; } }
@keyframes run { 0% { left: -200px; } 100% { left: 110%; } }

.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.animate-drive { animation: drive 6s linear infinite; }
.animate-run { animation: run 6s linear infinite; }

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .animate-blob, .animate-drive, .animate-run { animation: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Apple 2026 HIG - Safe Areas */
.pt-safe-top { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pl-safe-left { padding-left: env(safe-area-inset-left, 0px); }
.pr-safe-right { padding-right: env(safe-area-inset-right, 0px); }
.m-safe { margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* Apple 2026 HIG - Touch Targets (min 44x44 points) */
button, a, [role="button"], .touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Apple 2026 HIG - Tap highlight */
button, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Apple 2026 HIG - Active states with scale */
button:active, a:active, [role="button"]:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Organic Card Style - Soft, floating, paper-like */
.ios-card, .organic-card {
    border-radius: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px -2px var(--shadow-color);
    transition: all 0.3s ease;
}
.ios-card:hover, .organic-card:hover {
    box-shadow: 0 8px 30px -4px var(--shadow-color);
    transform: translateY(-2px);
}
.dark .ios-card, .dark .organic-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Apple 2026 HIG - Vibrancy effects */
.ios-blur {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* NOTE: Organic System Colors zostały przeniesione do głównego :root na początku pliku */

/* Scrollbar - minimal iOS style */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

/* Print - rozszerzone style druku */
@media print {
    /* Podstawowe kontrolki */
    .print-color-exact { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .no-print { display: none !important; }

    /* Ukryj elementy UI */
    header, nav, footer,
    .sidebar, .mobile-nav,
    .nav-blur, .skip-link,
    .install-prompt, .pwa-badge,
    button:not(.print-show),
    .animate-blob { display: none !important; }

    /* Reset kolorów na druk */
    body {
        background: white !important;
        color: black !important;
    }

    /* Linki - pokaż URL */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Strona */
    @page {
        margin: 1.5cm;
        size: A4;
    }

    /* Zapobiegnij łamaniu wewnątrz elementów */
    .calendar-day, .card, .section {
        break-inside: avoid;
    }
}

/* Calendar day - Apple 2026 touch targets */
.calendar-day { min-height: 64px; } /* A2.3: pigułka dnia 28 px + dwie linie skrótów 12 px */
@media (min-width: 640px) { .calendar-day { min-height: 70px; } }

/* Kontener kalendarza ma od razu wysokość sześciu tygodni: JS wypełnia go po pierwszym
   malowaniu, a bez rezerwy całość pod nim zjeżdżała w dół (CLS 0,35–0,42 w pomiarze A2). */
#mobileCalendarContainer { min-height: 30rem; }
#calendarContainer { min-height: 36rem; }
/* Rezerwa wysokości chroni przed przeskokiem, gdy kalendarz dojeżdża. Przy samym komunikacie
   (błąd pobrania, brak harmonogramu) zostawiała pod nim pół ekranu pustej karty. */
html[data-schedule="error"] #calendarContainer, html[data-schedule="missing"] #calendarContainer,
html[data-schedule="error"] #mobileCalendarContainer, html[data-schedule="missing"] #mobileCalendarContainer { min-height: 0; }

/* Apple 2026 HIG - Prevent text selection on interactive elements */
button, .no-select {
    -webkit-user-select: none;
    user-select: none;
}

/* Apple 2026 HIG - Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Apple 2026 HIG - Pull-to-refresh prevention in PWA */
body {
    overscroll-behavior-y: contain;
}

/* Apple 2026 HIG - Dynamic Island awareness (iPhone 14 Pro+) */
@supports (padding-top: env(safe-area-inset-top)) {
    .dynamic-island-aware {
        padding-top: max(env(safe-area-inset-top), 59px);
    }
}

/* Apple 2026 HIG - Large title animation */
.large-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.1;
}
@media (max-width: 768px) {
    .large-title { font-size: 28px; letter-spacing: -0.3px; }
}
@media (max-width: 640px) {
    .large-title { font-size: 24px; letter-spacing: -0.2px; }
}

/* Organic Navigation bar */
.nav-blur {
    background: rgba(249, 247, 242, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-color);
}
.dark .nav-blur {
    /* Fallback for older browsers */
    background: rgba(26, 46, 26, 0.95);
    /* Modern browsers: uses CSS variable with transparency */
    background: color-mix(in srgb, var(--bg-primary) 95%, transparent);
    border-bottom-color: var(--border-color);
}

/* Language Selector - Organic Style */
.language-selector {
    display: flex;
    gap: 6px;
}
.lang-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 1rem;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.dark .lang-btn {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.lang-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--color-primary);
}
.dark .lang-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.lang-btn.active {
    /* WCAG 1.4.3 (addendum Codexa 2026-07-15): STAŁY #2E7D32 zamiast
       var(--color-primary), bo w ciemnym schemacie zmienna flipuje na
       #66BB6A (przez @media prefers-color-scheme, BEZ klasy .dark na html —
       reguły `.dark ...` tu nie łapią) i biały tekst spadał do 2.36:1.
       Biały na #2E7D32 = 5.13:1 w OBU motywach; w light to ta sama wartość
       co dotychczasowe var(--color-primary) — zero zmiany wizualnej. */
    background: #2E7D32;
    color: white;
    border-color: #2E7D32;
}
.dark .lang-btn.active {
    background: #2E7D32;
    color: white;
}

/* Skip link - Accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 12px 24px;
    border-radius: 0 0 1rem 1rem;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* Focus-visible dla wszystkich interaktywnych elementów - WCAG AA */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Lokalizacja mieszkańca (plan 2.2, A1.5)
   <html data-loc="saved|preview|none"> ustawia skrypt w <head>, zanim
   cokolwiek zostanie namalowane. Bloki zależne od ulicy znikają przy
   pierwszym uruchomieniu, a karta wyboru ulicy — gdy ulica już jest.
   Brak atrybutu (skrypt w <head> nie zadziałał) = pierwsze uruchomienie:
   widać wybór ulicy, nie puste bloki terminów.
   ============================================ */
html:not([data-loc="saved"]):not([data-loc="preview"]) [data-needs-location] { display: none; }
html[data-loc="saved"] [data-first-run],
html[data-loc="preview"] [data-first-run] { display: none; }

/* Podgląd rejonu (wejście z ?region=): karta wygląda inaczej niż „Twoja ulica". */
html[data-loc="preview"] #mobileLocationCard { border: 2px dashed #8D6E63; flex-wrap: wrap; }
/* Długie „Wybierz swoją ulicę" dostaje własny wiersz, żeby nie ściskać nazwy rejonu. */
html[data-loc="preview"] #mobileHeroChange { flex-basis: 100%; text-align: right; }

/* Błąd pobrania albo brak harmonogramu: zostaje jeden komunikat w miejscu kalendarza. */
html[data-schedule="error"] [data-schedule-ok],
html[data-schedule="missing"] [data-schedule-ok] { display: none; }

/* Karta pierwszego uruchomienia. Kolory stałe (nie zmienne motywu): ta sama
   zieleń co blok najbliższego odbioru i białe pole z ciemnym tekstem dają
   ten sam kontrast w jasnym, ciemnym i mieszanym stanie motywu. */
.first-run {
    position: relative;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: #2E7D32;
    color: #fff;
}
.first-run__inner { max-width: 36rem; }
.first-run__title {
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.first-run__hint {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
}
.first-run__field {
    position: relative;
    margin-top: 1.25rem;
}
.first-run__icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    color: #455A64;
    transform: translateY(-50%);
    pointer-events: none;
}
.first-run__input {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.875rem 1rem 0.875rem 3rem;
    border: 0;
    border-radius: var(--radius-md);
    background: #fff;
    color: #1B1B1B;
    font: inherit;
    font-size: 1.125rem; /* >= 16 px: iOS nie powiększa strony przy fokusie */
    font-weight: 600;
}
.first-run__input::placeholder { color: #546E7A; font-weight: 500; }
.first-run__input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.first-run__list {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    z-index: 50;
    max-height: 18rem;
    overflow-y: auto;
    border-radius: var(--radius-md);
    background: #fff;
    color: #1B1B1B;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.first-run__map {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin-top: 1rem;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.first-run__map:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 1024px) {
    .first-run { padding: 2.5rem; border-radius: 2.5rem; }
    .first-run__title { font-size: 2.5rem; }
    .first-run__hint { font-size: 1.125rem; }
}

/* Karta-odnośnik do pełnych statystyk (A2.4) — zastępuje „ciekawostki" wpisane na sztywno.
   Kolory stałe (nie utility dark:), bo .dark .text-* w tym pliku nadpisuje je z !important. */
.stats-link-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 2rem;
    background: #1B5E20;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(27, 94, 32, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stats-link-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(27, 94, 32, 0.32); }
.stats-link-card:focus-visible { outline: 3px solid #FBC02D; outline-offset: 3px; }
.stats-link-card--compact { padding: 1rem; border-radius: 1rem; }
.stats-link-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.18);
}
.stats-link-card--compact .stats-link-card__icon { width: 2.5rem; height: 2.5rem; }
.stats-link-card__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.stats-link-card__title { font-weight: 800; font-size: 1.0625rem; }
.stats-link-card--compact .stats-link-card__title { font-size: 0.9375rem; }
.stats-link-card__sub { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); }
.stats-link-card__arrow { margin-left: auto; flex-shrink: 0; }

/* Podpisy na kartach, które są ciemne w OBU trybach („w liczbach", Dev Stats). Przygaszony brąz
   z jasnego motywu (text-earth-300/400, #795548) dawał na granacie i zieleni 1,2–2,7:1 (G6 2.2.1). */
.on-dark-muted { color: rgba(255, 255, 255, 0.82); }
/* Kafelki szybkich akcji na telefonie: pełny kolor, biały tekst ≥ 5:1 w obu motywach. */
.quick-tile { color: #fff; }
.quick-tile--calendar { background: #1B5E20; } /* 7,9:1 */
.quick-tile--bulky { background: #7E22CE; }    /* 7,1:1 */
.quick-tile--textile { background: #C2410C; }  /* 5,2:1 — ten sam rdzawy co TX w legendzie */
/* Wartości statystyk rejonu: stały kolor z wariantem ciemnym (utility purple-600/emerald-600 nie miały
   go wcale albo za słaby: 1,46–3,67:1 — pomiar G6 2.2.1). */
.stat-value--month { color: #7E22CE; }
.stat-value--day { color: #047857; }
.dark .stat-value--month { color: #E9D5FF; }
.dark .stat-value--day { color: #A7F3D0; }
.eco-hero { background: linear-gradient(90deg, #FACC15, #FDBA74); color: #422006; }
a.on-dark-muted:hover { color: #fff; }

/* Podpowiedzi ulic — jeden wygląd we wszystkich czterech polach. Kolor
   dziedziczony z kontenera listy, żeby działał na każdym jego tle. */
.street-option {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    color: inherit;
    text-align: left;
}
.street-option:last-child { border-bottom: 0; }
.street-option:hover { background: rgba(128, 128, 128, 0.16); }
/* Pozycja wskazana klawiaturą: pasek w kolorze tekstu (kontrast z tłem jak sam tekst),
   nie tylko jaśniejsze tło — to było ok. 1,2:1 i nikt nie widział, co zaznaczył Enter. */
.street-option[aria-selected="true"] {
    background: rgba(128, 128, 128, 0.16);
    box-shadow: inset 5px 0 0 currentColor;
}
.street-dropdown__hint {
    padding: 0.75rem 1rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}
.street-dropdown__footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    font-size: 0.9375rem;
}
.street-dropdown__footer a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.street-option__name { font-size: 1rem; font-weight: 700; }
.street-option__region { font-size: 0.875rem; }
.street-empty {
    padding: 1rem;
    font-size: 0.9375rem;
    line-height: 1.45;
}
.street-empty a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.street-empty p + p { margin-top: 0.75rem; } /* G6 2.2.1: przycisk i telefon były sklejone (4 px) */
.legend-code { font-weight: 800; letter-spacing: 0.02em; } /* bez opacity — obniżała kontrast w pigułce */

/* Link „Zmień" przy nazwie ulicy w bloku najbliższego odbioru (pulpit) */
.hero-change {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hero-change:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* „Zapisano: ulica (rejon)" pod polem ulicy w ustawieniach. Własne kolory zamiast
   utility: nadpisania palety dla trybu ciemnego w tym pliku dawały tu 3,9:1. */
.saved-note { color: #2E7D32; }
.dark .saved-note { color: #C8E6C9; }

/* Komunikat (toast). Kotwiczony do lewej i prawej krawędzi, nie do środka: przy
   `left: 50%` przeglądarka dawała mu pół ekranu szerokości i „Zapisano: ulica (rejon)"
   łamało się na trzy linie na nagłówku. Na telefonie siedzi nad paskiem nawigacji. */
#toast {
    right: 1rem;
    left: 1rem;
    display: flex;
    justify-content: center;
    transform: none;
    translate: none;
    pointer-events: none;
}
#toast.hidden { display: none; }
#toast > div {
    max-width: 32rem;
    border-radius: 1rem;
    pointer-events: auto;
}
/* Na dole także na pulpicie: u góry zasłaniał nagłówek z powitaniem i przełącznikiem języka. */
#toast { top: auto; bottom: 2rem; }
@media (max-width: 1023px) {
    #toast { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

/* Słowo „Zmień" w karcie ulicy na telefonie (zamiast samej strzałki) */
.location-change {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #2E7D32;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dark .location-change { color: #C8E6C9; }

/* „Spróbuj ponownie" w komunikacie o nieudanym pobraniu harmonogramu */
.retry-button {
    min-height: 2.75rem;
    margin-top: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    background: #2E7D32;
    color: #fff;
    font-weight: 700;
}

/* Termin albo zdanie o gabarytach w trybie ciemnym: fiolet-300 z utility dawał 4,45:1
   na karcie #1B5E20 (pogrubione 18 px to jeszcze nie „duży tekst") — jaśniejszy odcień ma zapas. */
.dark #bulkyDate,
.dark #mobileBulkyDate { color: #E9D5FF; }

/* Zdanie zamiast samotnego myślnika, gdy w roku nie ma już terminu */
.empty-note {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* Organic Button Styles */
.btn-organic {
    background: var(--color-primary);
    color: white;
    border-radius: 1rem;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
}
.btn-organic:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
}
.btn-organic-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-organic-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
}

/* PWA Safe Area - inline style fallback */
.pt-safe-top-fixed {
    padding-top: calc(env(safe-area-inset-top) + 52px) !important;
}

/* CRITICAL: iOS zoom prevention - font-size 16px for mobile inputs */
/* iOS Safari zooms in on inputs with font-size < 16px */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}