/* style.css */

/* Samo body - czyste, trzyma w ryzach szerokość i pozwala gładko przewijać w dół */
body {
    max-width: 100vw;
    overflow-x: clip; /* Bezpieczne ucięcie boków bez blokowania scrolla! */
    transition: background-color 0.3s, color 0.3s;
}

/* Nasza "magiczna szyba" z tłem, która stoi w miejscu i nie obciąża procesora telefonu */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* dla starszych przeglądarek */
    height: 100dvh; /* dla nowoczesnych przeglądarek mobilnych */
    z-index: -100; /* chowamy tło na sam koniec, pod aplikację */
    background-image: linear-gradient(to bottom right, rgba(34, 211, 238, 0.85), rgba(59, 130, 246, 0.85), rgba(79, 70, 229, 0.9)), 
                      url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

.avoid-break { page-break-inside: avoid; break-inside: avoid; }
.tab-active { background-color: #3b82f6; color: white; border-color: #3b82f6; }
.tab-inactive { background-color: white; color: #4b5563; border-color: #e5e7eb; }
.tab-inactive:hover { background-color: #f3f4f6; }
.modal-bg { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
.hide-scroll: webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

@media print {
    body * { visibility: hidden; }
    #shopping-list-modal, #shopping-list-modal * { visibility: visible; }
    #shopping-list-modal { position: absolute; left: 0; top: 0; width: 100%; height: auto; background: white; }
    .modal-bg { background-color: transparent; backdrop-filter: none; }
    .print-hidden { display: none !important; }
}

/* --- POPRAWIONY DARK MODE STYLE --- */
body.dark-theme {
    background-color: #0f172a !important; 
    color: #f8fafc !important;
}

/* W trybie ciemnym wyłączamy naszą "szybę" z obrazkiem */
body.dark-theme::before {
    display: none !important;
}

body.dark-theme .bg-white, 
body.dark-theme .bg-gray-50, 
body.dark-theme .bg-white\/95, 
body.dark-theme .bg-blue-50, 
body.dark-theme .bg-green-50, 
body.dark-theme .bg-yellow-50, 
body.dark-theme .bg-cyan-100, 
body.dark-theme .bg-indigo-50, 
body.dark-theme .bg-red-50, 
body.dark-theme .bg-gray-100,
body.dark-theme [class*="bg-gradient-to"] {
    background-color: #1e293b !important; 
    background-image: none !important; 
    border-color: #334155 !important; 
    color: #f8fafc !important;
}
body.dark-theme .text-gray-800, body.dark-theme .text-gray-700, body.dark-theme .text-gray-600, body.dark-theme .text-gray-500, body.dark-theme .text-gray-400 {
    color: #cbd5e1 !important; 
}
body.dark-theme .text-blue-800, body.dark-theme .text-blue-600, body.dark-theme .text-blue-700 { color: #60a5fa !important; }
body.dark-theme .text-green-800, body.dark-theme .text-green-600, body.dark-theme .text-green-700 { color: #4ade80 !important; }
body.dark-theme .text-yellow-600, body.dark-theme .text-yellow-700, body.dark-theme .text-yellow-500 { color: #fde047 !important; }
body.dark-theme .text-cyan-800 { color: #67e8f9 !important; }

body.dark-theme input, body.dark-theme select, body.dark-theme textarea {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
body.dark-theme .modal-bg > div {
    background-color: #1e293b !important;
}
body.dark-theme table th, body.dark-theme table td, body.dark-theme .border-b, body.dark-theme .border-dashed {
    border-color: #334155 !important;
}
body.dark-theme .tab-inactive { background-color: #1e293b; color: #cbd5e1; border-color: #334155; }
body.dark-theme .tab-inactive:hover { background-color: #334155; }

/* Poprawka dla szarych przycisków (np. Wyczyść) w trybie ciemnym */
body.dark-theme .bg-gray-200,
body.dark-theme .bg-gray-300 {
    background-color: #334155 !important;
    color: #f8fafc !important;
}
body.dark-theme .bg-gray-200:hover,
body.dark-theme .bg-gray-300:hover {
    background-color: #475569 !important;
}

/* Wygląd pól tekstowych w trybie tylko do odczytu */
.plan-zakonczony input:disabled, 
.plan-zakonczony textarea:disabled {
  background-color: transparent;
  border: none;
  color: #333; /* Żeby tekst był nadal dobrze czytelny */
  appearance: none; /* Usuwa domyślny wygląd zablokowanego pola na telefonach */
}

#mobile-bottom-nav {
    /* Wymusza renderowanie paska przez kartę graficzną telefonu - koniec z drżeniem! */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
}
/* ==========================================
   GLOBALNE DOPASOWANIE DO EKRANÓW MOBILNYCH
   ========================================== */
@media (max-width: 768px) {
    /* 1. Żaden element klikalny ani formularz nie wyjdzie poza ekran */
    button, input, select, textarea {
        max-width: 100% !important;
    }
    
    /* 2. Zbyt długie teksty w przyciskach będą przechodzić do nowej linijki, zamiast je rozpychać */
    button {
        white-space: normal !important;
        word-wrap: break-word !important;
        height: auto !important;
        min-height: 40px; /* Minimalna wysokość wygodna dla palca */
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* 3. Globalne zmniejszenie czcionek na bardzo małych ekranach, żeby wszystko lepiej się mieściło */
    html {
        font-size: 14px; 
    }

    /* 4. Tytuły i nagłówki nie będą nachodzić na siebie */
    h1, h2, h3, h4 {
        line-height: 1.2 !important;
        word-break: break-word;
    }
}