:root {
  --glowny: rgb(0, 121, 107); /* Ciemna turkusowa zieleń (#00796b) */
  --tlo: rgb(224, 242, 241); /* Bardzo jasny turkus (#e0f2f1) */
  --tlo-sobota: rgb(208, 232, 255); /* Jasny pastelowy błękit */
  --tlo-niedziela: rgb(255, 218, 218); /* Jasny pastelowy róż */
  --ramka: rgb(178, 223, 219); /* Pastelowy turkus (#b2dfdb) */
  --tekst: rgb(0 ,77 ,64); /* Ciemny zielony (#004d40) */
}

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  background: var(--tlo);
}

#naglowek {
  position: sticky;
  top: 10px;
  max-width: 90%;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;  /* Działa na osi poprzecznej (pionowej). Centruje elementy od góry do dołu. */
  gap: 15px;
  background: white;
  padding: 15px 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  border-top: 5px solid var(--glowny);
  z-index: 1000;
}

.naglowek-ikona {
  text-decoration: none;
  font-size: 1.3rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.naglowek-ikona:hover {
  opacity: 1;
}

#miesiac-kontener { 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-grow: 1;
}

.miesiac-przycisk {
  padding: 8px 15px;
  background: white;
  border: 1px solid var(--ramka);
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  color: var(--glowny);
}

#miesiac-nazwa {
  min-width: 250px;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--tekst);
  text-align: center;
  text-transform: uppercase;
}

#przycisk-dzisiaj {
  padding: 8px 15px;
  background: var(--glowny);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  color: white;
}

#kopiowanie {
  position: fixed;
  top: 150px;
  left: 50px;
  color: red;
  font-weight: bold;
}

#trzon {
  max-width: 1100px;
  margin: 0 auto 50pX auto;
  /* background: white; */
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  overflow: visible; /* Aby obwódka dnia dzisiejszego mogła wyjść na zewnątrz. */
}

#trzon > div:first-child { /* Aby wiersz pierwszego dnia miesiąca nie nadkrył zaokrąglenia kontenera #trzon. */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#trzon > div:last-child { /* Aby wiersz ostatniego dnia miesiąca nie nadkrył zaokrąglenia kontenera #trzon. */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.wiersz {
  display: flex;
  border-bottom: 1px solid rgb(240, 240, 240); /* Bardzo jasny szary */
  min-height: 70px;
  height: auto;
  background: white;
}

.wiersz.dzisiaj {
  /* border-radius: 12px; */
  box-shadow: 0px 0px 12px 8px var(--glowny);
  margin: 12px 0; /* Aby ramka box-shadow nie wlazła na zawartości poprzedniego i nastepnego dnia. */
}

.wiersz.sobota {
  background: var(--tlo-sobota);
}

.wiersz.niedziela {
  background: var(--tlo-niedziela);
}

.kolumna-lewa {
  position: relative;
  width: 140px;
  display: flex;
  flex-shrink: 0; /* Zapobiega zwężaniu kolumny. */
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgb(240, 240, 240); /* Bardzo jasny szary */
  padding: 10px 5px 10px 5px;
  box-sizing: border-box; /* Padding zostaje "wciśnięty" do środka pudełka div. */
}

.slonce {
  position: absolute;
  top: 2px;
  color: silver;
  font-size: 0.6rem;
}

.dzien-numer {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--glowny);
  /* background: yellow; */
}

.dzien-nazwa {
  font-size: 0.8rem;
  color: #5f6368;
  text-transform: uppercase;
  font-weight: 700;
  /* background: orange; */
}

.swieto-wolne-nazwa, .swieto-robocze-nazwa, .obchody-nazwa {
  font-size: 1.2rem;
  color: rgb(217, 48, 37); /* Ciepła czerwień */
  font-weight: bold;
  margin: 5px 10px 5px 10px;
  text-align: center;
  line-height: 1.1;
  word-wrap: break-word; /* W razie bardzo długiej nazwy */
  /* background: blue; */
}

.swieto-wolne-nazwa {
  color: rgb(217, 48, 37); /* Ciepła czerwień */
}

.swieto-robocze-nazwa {
  color: rgb(142, 36, 170); /* Fioletowy klasyczny kalendarzowy */
}

.obchody-nazwa {
  color: rgb(230, 124, 115); /* Ciepły pomarańcz */
}


.kolumna-prawa {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.osoby-kontener {
  display: flex;
  /* flex-wrap: wrap; */
  /* gap: 0px; */
  width: 100%;
  align-items: center;
  /* background: red; */
}

.osoba {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.osoba-urodziny {
  background-color: rgb(232, 245, 233); /* Jasna pastelowa miętowa zieleń */
  color: rgb(46, 125, 50); /* Głęboka, leśna zieleń */
}

.osoba-urodziny-old {
  background-color: rgb(227, 242, 253); /* Jasny pastelowy błękit */
  color: rgb(21, 101, 192); /* Głęboki nasycony niebieski */
}

.osoba-imieniny {
  background-color: rgb(243, 229, 245); /* Jasny pastelowy fiolet */
  color:  rgb(123, 31, 162); /* Żywy ciemny fiolet */
}

.osoba-rocznica {
  background-color: rgb(255, 243, 224); /* Jasny ciepły beżowo-pomarańczowy */
  color: rgb(230, 81, 0); /* Intensywny głęboki pomarańczowy */
}

.notatki {
  /* width: 100%; Wyłączyłem, bo długie notatki wychodziły poza kolumna-prawa i trzon. */
  height: 100%;
  resize: none;
  overflow: hidden;
  outline: none;
  border: none;
  padding: 10px 15px 0px 15px;
  background: transparent;
  /* background: red; */
  font-size: 1.05rem;
  font-family: inherit;
  white-space: pre-wrap;
  line-height: 1.4;
}

#status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  border-radius: 30px;
  background: rgb(50, 50, 50); /* Bardzo ciemny szary */
  color: white;
  display: none;
  z-index: 2000;
  transition: opacity 0.5s ease;
}

#licznik, #autor {
  position: fixed;
  bottom: 5px;
  font-size: 0.65rem;
  color: rgb(153, 153, 153); /* Średnioszary */
  z-index: 1000;
  font-family: monospace;
}

#licznik {
  left: 10px;
}

#autor {
  right: 10px;
}