body {
    font-family: sans-serif;
    padding-top: 56px; /* Wysokość paska nawigacji Bootstrapa */
}

.summary p {
    margin-bottom: 0.5rem;
}

.summary h3 {
    margin-top: 1rem;
    color: #007bff; /* Kolor Bootstrap primary */
}

/* --- Style dla Skali BMI --- */
.bmi-scale-wrapper {
    position: relative;   /* Kontekst pozycjonowania dla wskaźnika */
    padding-top: 25px;    /* Miejsce na wskaźnik nad skalą */
    margin-bottom: 20px;  /* Odstęp pod skalą */
    /* border: 1px dashed blue; */ /* Debug: pokaż granice wrappera */
}

.bmi-scale { /* Kontener dla bloków kategorii, generowany przez PHP */
    display: flex;
    width: 100%;          /* Upewnij się, że zajmuje pełną szerokość wrappera */
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;     /* Aby zaokrąglić rogi dla dzieci (bloków) */
    position: relative;   /* Upewnij się, że jest kontekstem pozycjonowania dla wskaźnika, jeśli wskaźnik jest wewnątrz */
    padding-top: 20px;    /* Miejsce na wskaźnik, jeśli jest on pierwszym dzieckiem .bmi-scale */
    /* border: 1px dashed red; */ /* Debug: pokaż granice samej skali */
}

.bmi-scale-item {
    flex-grow: 1;         /* Równy podział dostępnego miejsca */
    flex-basis: 0;        /* Kluczowe dla równego podziału, ignoruje początkową szerokość kontentu */
    min-width: 0;         /* Pozwala elementom kurczyć się bardziej elastycznie */
    
    padding: 0.5rem 0.25rem; /* Zmniejszony padding dla lepszej responsywności */
    text-align: center;
    font-size: 0.75em;    /* Zmniejszona czcionka, można dostosować media queries */
    line-height: 1.3;     /* Poprawiona czytelność przy mniejszej czcionce */
    
    border-left: 1px solid #eee; /* Separator między elementami */
    /* Kolory tła są ustawiane dynamicznie przez PHP przez klasy Bootstrapa (np. bg-danger) */
}

.bmi-scale-item:first-child {
    border-left: none;    /* Pierwszy element nie potrzebuje lewego separatora */
}

.active-bmi-category {
    /* border: 2px solid #000 !important; */ /* Można złagodzić lub usunąć, skoro jest wskaźnik */
    box-shadow: 0 0 6px rgba(0,0,0,0.4) inset; /* Subtelniejszy efekt podświetlenia */
    font-weight: bold;
    /* transform: scale(1.02); */ /* Transformacja może wpływać na precyzję pozycjonowania, rozważ usunięcie */
    z-index: 2; /* Aby tekst był nad innymi elementami, ale pod wskaźnikiem, jeśli ten ma wyższy z-index */
}

.bmi-indicator {
    position: absolute;
    top: 0;                /* Pozycjonowany na górnej krawędzi .bmi-scale (dzięki padding-top w .bmi-scale) */
    left: 0%;              /* Pozycja X ustawiana przez JavaScript */
    width: 3px;            /* Grubość wskaźnika */
    height: 18px;          /* Wysokość wskaźnika */
    background-color: #007bff; /* Kolor wskaźnika, np. niebieski Bootstrapa */
    border-radius: 2px;
    transform: translateX(-50%); /* Centrowanie wskaźnika względem jego punktu `left` */
    z-index: 5;            /* Aby był nad blokami skali */
    display: none;         /* Domyślnie ukryty, pokazywany przez JS */
    transition: left 0.3s ease-in-out; /* Płynne przejście przy zmianie pozycji */
    box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
}
/* --- Koniec stylów dla Skali BMI --- */


#chartContainer, 
#hydrationChartContainer, 
#calorieBalanceChartContainer, 
#finalCalorieBalanceChartContainer { /* Style dla kontenerów wykresów */
    min-height: 250px; /* Zapewnia minimalną wysokość, nawet gdy nie ma danych */
    max-width: 900px;  /* Maksymalna szerokość dla czytelności */
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Dla poprawnego działania tooltipów Chart.js */
}


/* === NOWE STYLE DLA PÓL DATY === */
#date_selector,
#hydration_date_selector {
    background-color: #E6F5E6; /* Jasnozielonkawe tło */
    border-color: #a3d8a3;     /* Opcjonalnie: nieco ciemniejsza zielona ramka */
}

/* Opcjonalnie: styl dla focusa, aby był spójny */
#date_selector:focus,
#hydration_date_selector:focus {
    border-color: #5cb85c; /* Ciemniejszy zielony dla focusa */
    box-shadow: 0 0 0 0.25rem rgba(92, 184, 92, 0.25); /* Bootstrapowy styl cienia dla focusa, ale zielony */
}

/* === STYLE DLA SUGESTII AUTO UZUPEŁNIANIA === */
.autocomplete-suggestions-container {
    position: relative; /* Lub usuń, jeśli rodzic już ma position-relative */
}

.autocomplete-suggestions-container ul.list-group {
    position: absolute; /* Pozycjonowanie pod polem input */
    width: 100%;      /* Szerokość taka sama jak pole input (JS może to dostosować) */
    z-index: 1050;    /* Aby było nad innymi elementami (Bootstrap używa z-indexów >1000 dla modali itp.) */
    border-top: none; /* Usuń górną ramkę, jeśli przylega do inputa */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    max-height: 200px; /* Maksymalna wysokość, jeśli sugestii jest dużo */
    overflow-y: auto;  /* Pasek przewijania dla nadmiarowych sugestii */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); /* Cień dla lepszej widoczności */
}

.autocomplete-suggestions-container .list-group-item-action {
    cursor: pointer;
    padding: 0.5rem 0.75rem; /* Dopasuj padding do swoich preferencji */
    font-size: 0.9em;     /* Mniejsza czcionka dla sugestii */
}

.autocomplete-suggestions-container .list-group-item-action:hover,
.autocomplete-suggestions-container .list-group-item-action:focus {
    background-color: #f0f0f0; /* Kolor tła przy najechaniu/fokusie */
    color: #333;
}
/* === KONIEC STYLÓW DLA SUGESTII === */

/* === STYLE DLA WSKAŹNIKA STRONY PRZY SWIPE === */
#swipe-page-indicator .swipe-indicator-item {
    padding: 0 5px; /* Niewielki padding wokół tekstu */
    opacity: 0.7;   /* Domyślnie lekko przezroczyste */
    transition: opacity 0.3s ease, font-weight 0.3s ease; /* Płynne przejścia */
}

#swipe-page-indicator .swipe-indicator-item.current-swipe-page {
    font-weight: bold; /* Pogrubienie dla aktywnej strony */
    opacity: 1.0;      /* Pełna widoczność */
}

/* NOWA REGUŁA: Ukryj wskaźnik na średnich i większych ekranach (np. od 768px) */
@media (min-width: 768px) {
    #swipe-page-indicator {
        display: none !important; /* !important zapewni, że ten styl nadpisze ewentualne zmiany z JS (np. fadeIn) */
    }
}
/* === KONIEC STYLÓW DLA WSKAŹNIKA === */

//* === NOWY STYL DLA PRZYCISKU CZYSZCZENIA W POLU INPUT === */
#mealNameModalInput {
    padding-right: 2.5rem; /* Zrób miejsce na przycisk "X" */
}

#mealNameClearBtn {
    /* Użycie przezroczystości, aby nie był zbyt nachalny */
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

#mealNameClearBtn:hover {
    opacity: 1;
}

/* === NOWE STYLE DLA PRZYCISKÓW SUGESTII NAZW POSIŁKÓW === */
.btn-suggestion {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-suggestion.active {
    background-color: #0d6efd; /* Kolor primary z Bootstrapa */
    color: white;
    border-color: #0d6efd;
}