/* === Layout & baza === */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a1a2e;
    color: white;
    margin: 20px;
}

.button-link {
    background-color: #555;
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.button-link:hover { background-color: #777; }

.nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* === Kalendarz === */
.calendar {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    background-color: #333;
}
.calendar div {
    background-color: #1a1a2e;
    padding: 5px;
    border: 0.5px solid #2c2c3c; /* delikatne, pojedyncze linie */
    overflow: hidden;
}

.time-label {
    background-color: #1a1a2e;
    font-weight: bold;
    text-align: right;
    padding-right: 5px;
    border: none;
    color: #aaa;
}
.day-header {
    background-color: #1a1a2e;
    text-align: center;
    font-weight: bold;
    border-bottom: 0.5px solid #2c2c3c;
}
.today { background-color: #29293d; }

/* === Kafelki wydarzeń === */
.event {
    border-radius: 6px;
    padding: 6px;
    margin-bottom: 3px;
    cursor: pointer;
    color: white;
    font-size: 0.9rem;
}
.event .organizer { font-size: .9em; opacity: .9; }

/* Kolory kategorii */
.event.koncert  { background-color: #d63384; }
.event.kino     { background-color: #6f42c1; }
.event.spotkanie{ background-color: #0d6efd; }
.event.wystawa  { background-color: #20c997; }
.event.impreza  { background-color: #fd7e14; }

/* (Jeśli legenda nieużywana, może pozostać – nie przeszkadza) */
.legend { display: flex; gap: 10px; margin: 15px 0; }
.legend .event { padding: 5px 10px; font-size: 0.85rem; border-radius: 4px; }

/* === Modal szczegółów === */
#eventModal {
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;  /* białe tło */
    color: #000;
    padding: 20px;
    border: 2px solid #444;
    border-radius: 8px;
    z-index: 1000;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#eventModal img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* === Filtry (checkboxy jako "kafelki" jak wydarzenia) === */

/* --- Filtry: przyciski zaraz za checkboxami --- */
.filters {
  display: flex;
  flex-wrap: wrap;         /* zawijanie do następnej linii przy braku miejsca */
  align-items: center;     /* wyrównanie w pionie */
  gap: 8px 10px;           /* (row-gap, column-gap) */
  margin: 12px 0 8px 0;
}

.filters-group {
  display: flex;
  flex-wrap: wrap;         /* checkboxy składają się w jedną „chmurkę” */
  gap: 8px;
  /* Nie rozpychaj się na maxa — dzięki temu przyciski pojawią się tuż po chipach */
  flex: 0 0 auto;
}

.filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Upewnij się, że nic nie „odpycha” przycisków na prawo */
  margin-left: 0 !important;
  order: 1;                /* po checkboxach (domyślnie i tak tak jest) */
}

/* Opcjonalnie: prawa krawędź na desktopie */


.button-secondary { background-color: #444; }
.button-secondary:hover { background-color: #666; }

/* Ukryj natywne pola, stylujemy label */
.chip-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Wygląd kafelków filtrów – używa kolorów .event.<kategoria> */
.event.chip {
    display: inline-block;
    margin: 4px 8px 4px 0;   /* ciaśniejsze odstępy niż w siatce */
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: none;
    user-select: none;
    transition: transform 0.05s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

/* Niezaznaczony – lekko przygaszony */
.chip-check + .event.chip {
    opacity: 0.20;
    filter: saturate(60%);
}

/* Zaznaczony – pełna intensywność i delikatne wyróżnienie */
.chip-check:checked + .event.chip {
    opacity: 1;
    outline: 2px solid rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset;
}

/* Hover/Focus dla dostępności */
.event.chip:hover { transform: translateY(-1px); }
.chip-check:focus + .event.chip {
    outline: 2px dashed rgba(255,255,255,0.5);
    outline-offset: 2px;
}

/* --- Ulepszenia interakcji dla kafelków filtrów --- */
.event.chip { 
    display: inline-flex;      /* zamiast inline-block */
    align-items: center; 
}

.event.chip:active { 
    transform: scale(0.98);    /* subtelny „klik” */
}

.chip-check:focus + .event.chip { 
    outline: 2px dashed rgba(255,255,255,.5); 
    outline-offset: 2px;       /* wyraźny focus z klawiatury */
}