/* =============================
   Globalne ustawienia strony - assets\style\style.css
============================= */
/* body:
   - font-family: 'Roboto', Arial, sans-serif; -> Ustawia główną czcionkę na Roboto (lub Arial, sans-serif).
   - margin: 0; -> Usuwa domyślne marginesy.
   - padding: 0; -> Usuwa domyślne odstępy.
   - background-color: #f5f5f5; -> Ustawia jasnoszare tło strony.
   - color: #333; -> Ustawia domyślny kolor tekstu (ciemnoszary).
   - height: 100vh; -> Ustawia wysokość na 100% wysokości widoku.
   - display: flex; -> Używa modelu flexbox.
   - flex-direction: column; -> Ustawia elementy w kolumnie.
*/
body {
    font-family: 'Poppins', 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =============================
   Kontener logowania
============================= */
/* .login-container:
   - background: #ffffff; -> Ustawia białe tło.
   - padding: 2.5rem; -> Dodaje wewnętrzne odstępy.
   - border-radius: 16px; -> Zaokrągla rogi kontenera.
   - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); -> Dodaje cień wokół kontenera.
   - max-width: 420px; -> Ogranicza maksymalną szerokość do 420px.
   - width: 90%; -> Ustawia szerokość na 90% dostępnej przestrzeni.
   - text-align: center; -> Centruje tekst w kontenerze.
   - border: 1px solid #e0e0e0; -> Dodaje cienką ramkę o jasnoszarym kolorze.
   - position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -> Centruje kontener na stronie.
*/
.login-container {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    max-width: 420px;
    width: 90%;
    text-align: center;
    border: 1px solid #e0e0e0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* =============================
   Nagłówek logowania
============================= */
/* h2:
   - font-size: 2rem; -> Ustawia rozmiar czcionki na 2rem.
   - color: #222; -> Ustawia kolor tekstu na ciemny odcień (#222).
   - font-weight: 700; -> Ustawia bardzo pogrubiony tekst.
   - margin-bottom: 1.5rem; -> Dodaje odstęp poniżej nagłówka.
*/
h2 {
    font-size: 2rem;
    color: #222;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* =============================
   Formularz logowania
============================= */
/* .login-form:
   - display: flex; -> Używa modelu flexbox.
   - flex-direction: column; -> Ustawia elementy w kolumnie.
   - gap: 1rem; -> Dodaje odstęp między elementami formularza.
*/
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Styl etykiet formularza logowania (.login-form label):
   - font-weight: 600; -> Pogrubia tekst etykiet.
   - font-size: 1rem; -> Ustawia rozmiar czcionki.
   - text-align: left; -> Wyrównuje tekst do lewej.
   - color: #444; -> Ustawia kolor tekstu na średnio szary.
*/
.login-form label {
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    color: #444;
}

/* Styl pól formularza logowania (.login-form input):
   - padding: 12px; -> Dodaje wewnętrzne odstępy.
   - border: 1px solid #ccc; -> Ustawia szare obramowanie.
   - border-radius: 10px; -> Zaokrągla rogi.
   - font-size: 1rem; -> Ustawia rozmiar czcionki.
   - background-color: #f9f9f9; -> Ustawia jasne tło pola.
   - transition: all 0.2s ease-in-out; -> Dodaje płynne przejście przy zmianach (np. focus).
*/
.login-form input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 1rem;
    background-color: #f9f9f9;
    transition: all 0.2s ease-in-out;
}

/* Efekt focus dla pól formularza (.login-form input:focus):
   - border-color: #007bff; -> Zmienia kolor obramowania na niebieski.
   - background: white; -> Ustawia białe tło przy focus.
   - box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); -> Dodaje niebieski cień.
   - outline: none; -> Usuwa domyślną obwódkę focus.
*/
.login-form input:focus {
    border-color: #007bff;
    background: white;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    outline: none;
}

/* =============================
   Przycisk logowania
============================= */
/* .login-form button:
   - background: #4A433F; -> Ustawia niebieskie tło.
   - color: white; -> Ustawia biały kolor tekstu.
   - padding: 14px; -> Dodaje wewnętrzne odstępy.
   - border: none; -> Usuwa obramowanie.
   - border-radius: 10px; -> Zaokrągla rogi przycisku.
   - font-size: 1.2rem; -> Ustawia rozmiar czcionki.
   - font-weight: bold; -> Pogrubia tekst.
   - text-transform: uppercase; -> Zamienia tekst na wielkie litery.
   - cursor: pointer; -> Ustawia kursor na wskaźnik.
   - transition: background 0.2s ease-in-out; -> Dodaje płynne przejście zmiany tła.
*/
.login-form button {
    background: #4A433F;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

/* .login-form button:hover:
   - background: #967663; -> Zmienia tło przy najechaniu na ciemniejszy niebieski.
*/
.login-form button:hover {
    background: #967663;
}

/* .login-form button:active:
   - background: #967663; -> Zmienia tło przy kliknięciu na jeszcze ciemniejszy niebieski.
*/
.login-form button:active {
    background: #967663;
}

/* =============================
   Komunikat o błędzie
============================= */
/* .error-message:
   - color: #d9534f; -> Ustawia czerwony kolor tekstu.
   - background: #fdecea; -> Ustawia jasnoczerwone tło.
   - padding: 10px; -> Dodaje wewnętrzne odstępy.
   - border-radius: 10px; -> Zaokrągla rogi.
   - border: 1px solid #d9534f; -> Dodaje czerwoną ramkę.
   - font-weight: bold; -> Pogrubia tekst.
   - margin-bottom: 1rem; -> Dodaje margines dolny.
*/
.error-message {
    color: #d9534f;
    background: #fdecea;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #d9534f;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* =============================
   Górna belka
============================= */
.top-bar {
    position: fixed; /* zamiast relative */
    top: 0;
    left: 0;
    right: 0;
    height: 60px;   /* jak było */
    z-index: 1000;      /* żeby .top-bar-center mógł się pozycjonować wewnątrz */
    display: flex;
    align-items: center;
    justify-content: space-between; /* lewa sekcja -> lewo, prawa sekcja -> prawo */
    height: 60px;
    /* background: #4a90e2; */
    /* background: linear-gradient(to bottom, #5a9bd4, #3e7eb8);  */
    background: #4A433F;
    color: #e3dbd5;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    z-index: 1000;
  }
  
  /* Lewa sekcja - hamburger + logo */
  .top-bar-left {
    display: flex;
    align-items: center;
  }
  
  /* Prawa sekcja - np. logout */
  .top-bar-right {
    display: flex;
    align-items: center;
  }
  
  /* Środkowa sekcja - nazwa użytkownika */
  .top-bar-center {
    position: absolute;       /* absolutne pozycjonowanie względem .top-bar */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    /* Jeżeli chcesz np. większą czcionkę: */
    /* font-size: 1.2rem; */
  }
  
  

/* Styl dla linku HGP PORTAL (.portal-link):
   - font-size: 1.8rem; -> Ustawia rozmiar czcionki.
   - font-weight: bold; -> Pogrubia tekst.
   - color: white; -> Ustawia biały kolor tekstu.
   - text-decoration: none; -> Usuwa podkreślenie.
   - transition: color 0.3s ease, transform 0.2s ease; -> Dodaje płynne przejścia.
   - margin-left: 10px; -> Dodaje lewy odstęp (np. od ikony hamburgera).
*/
.portal-link {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
    margin-left: 10px;
    white-space: nowrap;
}

/* .portal-link:hover:
   - color: #ffdd57; -> Zmienia kolor tekstu na żółty.
   - transform: scale(1.1); -> Powiększa element.
   - text-decoration: none; -> Utrzymuje brak podkreślenia.
*/
.portal-link:hover {
    color: #ffdd57;
    transform: scale(1.1);
    text-decoration: none;
}

/* =============================
   Informacje o użytkowniku
============================= */
/* .user-info:
   - font-size: 1.2rem; -> Ustawia rozmiar czcionki.
   - text-align: center; -> Centruje tekst.
   - flex-grow: 1; -> Pozwala elementowi rosnąć i zajmować dostępne miejsce.
*/
.user-info {
    font-size: 1.2rem;
    text-align: center;
    flex-grow: 1;
}

/* =============================
   Przycisk wylogowania
============================= */
/* .logout-btn:
   - background: #d9534f; -> Ustawia czerwone tło.
   - border: none; -> Usuwa obramowanie.
   - padding: 10px 20px; -> Dodaje wewnętrzne odstępy.
   - border-radius: 10px; -> Zaokrągla rogi.
   - color: white; -> Ustawia biały kolor tekstu.
   - cursor: pointer; -> Ustawia kursor wskazujący.
   - font-weight: bold; -> Pogrubia tekst.
   - transition: background 0.3s; -> Dodaje płynne przejście zmiany tła.
*/
.logout-btn {
    background: #d9534f;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

/* .logout-btn:hover:
   - background: #c9302c; -> Zmienia tło na ciemniejszy odcień czerwieni.
*/
.logout-btn:hover {
    background: #c9302c;
}

/* =============================
   Kontener główny (pasek boczny + treść)
============================= */
.dashboard-container {
    display: flex;
    /* height: 100vh; */
    overflow: hidden;
    padding-top: 5px;
    margin-top: 20px;
}

/* =============================
   Główna zawartość
============================= */

.dashboard-content {
    flex: 1;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
    overflow-x: auto;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    /* min-height: calc(100vh - 5px); */
}

/* =============================
   Pasek boczny (Sidebar)
============================= */
.sidebar {
    width: 300px;
    /* background: #343a40; */
    background: linear-gradient(to bottom, #4b3b30, #2f231c); /* ciepły głęboki brąz */
    color: white;
    padding: 1.5rem;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    position: fixed;
    top: 60px;
    left: -300px;
    bottom: 0;
    z-index: 1001;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-sizing: border-box;
}

.sidebar.active {
    left: 0;
}

.sidebar h3 {
    margin-top: 0;
    font-size: 1.5rem;
    border-bottom: 1px solid #555;
    padding-bottom: 1rem;
}

/* =============================
   Styl dla menu
============================= */
.menu-item {
    margin-top: 10px;
}

.menu-button {
    width: 100%;
    text-align: left;
    padding: 10px;
    border: none;
    background: #6c4e3d;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
    display: flex;
    justify-content: space-between; /* Lewy blok i prawy blok */
    align-items: center;
}

/* Lewa część – ikona i tekst obok siebie, wyrównane do lewej */
.menu-left {
    display: flex;
    align-items: center;
    gap: 8px; /* odstęp między ikoną a tekstem */
}

/* Prawa część – strzałka */
.menu-right {
    display: flex; 
    align-items: center;
}


.menu-button:hover {
    background: #523d2e;
}

.menu-button::after {
    content: '▼';
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.menu-button.active::after {
    transform: rotate(-180deg);
}

.submenu {
    display: none;
    padding-left: 15px;
    margin-top: 10px;
    flex-direction: column;
}

.submenu.active {
    display: flex;
}

.submenu a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: white;
    border-radius: 8px;
    transition: background 0.3s;
}

.submenu a:hover {
    background: #523d2e;
}

/* =============================
   Przycisk zamknięcia sidebaru
============================= */
.closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
}

/* =============================
   Overlay
============================= */
.overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    transition: opacity 0.3s ease;
    opacity: 0;
}

/* .overlay.active:
   - display: block; -> Wyświetla overlay.
   - opacity: 1; -> Ustawia pełną widoczność.
*/
.overlay.active {
    display: block;
    opacity: 1;
}

/* =============================
   Styl ikony hamburger menu
============================= */
.hamburger {
    font-size: 24px;
    cursor: pointer;
    margin-right: 15px;
    user-select: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

.hamburger:hover {
    color: #ffdd57;
    transform: scale(1.5);
    text-decoration: none;
}

/* =============================
   Sekcja Cash Shift
============================= */
.shift-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
    padding: 10px;
}

.shift-box {
    flex: 1;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #ffffff;
    border: 1px solid #ddd;
    text-align: left;
    max-width: 350px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    line-height: 1.2;
}

.shift-box h3 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 5px;
}

/* =============================
   Styl dla aktywnej zmiany
============================= */
.active-shift {
    /* background: #4a90e2; */
    /* background: linear-gradient(to bottom, #5a9bd4, #3e7eb8);  */
    background: #4A433F;
    color: white;
    border: none;
}

.active-shift p {
    margin: 2px 0;
}

.active-shift button {
    margin-top: 8px;
    padding: 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    width: 100%;
    transition: all 0.3s ease;
}

.active-shift .start-btn {
    background-color: #3d7d4d;
    color: white;
}

.active-shift .end-btn {
    background-color: #a8433f;
    color: white;
}

.active-shift button:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* =============================
   Styl dla poprzedniej zmiany
============================= */
.previous-shift {
    /* background: #4a90e2; */
    background: #4A433F;
    color: white;
    border: none;
}

.previous-shift p {
    margin: 2px 0;
}

/* =============================
   Styl dla stanu kasy
============================= */
.cash-status {
    /* background: #4a90e2; */
    background: #4A433F;
    color: white;
    border: none;
    font-weight: bold;
}

/* =============================
   Przyciski - Dopasowanie
============================= */
.payment-buttons-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.add-payment-btn, .withdraw-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.add-payment-btn {
    background: #28a745;
    color: white;
}

.withdraw-btn {
    background: #dc3545;
    color: white;
}

.add-payment-btn:hover, .withdraw-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .shift-container {
        flex-direction: column;   /* Każdy .shift-box w nowym wierszu */
        align-items: center;      /* Opcjonalnie wyśrodkowanie */
    }
    
    .shift-box {
        max-width: 350px;        /* Możesz ustawić limit szerokości, by nie rozciągało się na całą szerokość */
        width: 100%;             /* Ewentualnie na 100% ekranu */
    }
}


/* =============================
   Tabela płatności - Estetyczne wyświetlanie
============================= */
/* .table-container:
   - width: 100%; -> Ustawia szerokość na 100%.
   - overflow-x: auto; -> Umożliwia przewijanie poziome.
   - margin: 20px 0; -> Dodaje marginesy góra/dół.
*/
.table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
}

/* table:
   - width: 100%; -> Ustawia szerokość tabeli na 100%.
   - border-collapse: collapse; -> Łączy obramowania komórek.
   - margin-top: 20px; -> Dodaje margines górny.
   - border: 1px solid #ddd; -> Dodaje obramowanie.
   - word-wrap: break-word; -> Pozwala na dzielenie długich słów.
   - white-space: nowrap; -> Zapobiega łamaniu wierszy.
*/
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid #ddd;
    word-wrap: break-word;
    white-space: nowrap;
}



/* th, td:
   - padding: 12px; -> Dodaje wewnętrzne odstępy.
   - border: 1px solid #ddd; -> Dodaje obramowanie.
   - text-align: center; -> Centruje tekst.
   - font-size: 1rem; -> Ustawia rozmiar czcionki.
   - word-break: break-word; -> Pozwala na dzielenie długich słów.
*/
th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 1rem;
    word-break: break-word; 
}

/* th:
   - background-color: #4a90e2; -> Ustawia niebieskie tło.
   - color: white; -> Ustawia biały kolor tekstu.
   - font-weight: bold; -> Pogrubia tekst.
   - text-transform: uppercase; -> Zmienia tekst na wielkie litery.
*/
th {
    /* background-color: #4a90e2; */
    background: #4A433F;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

/* td:
   - background-color: #f9f9f9; -> Ustawia jasne tło komórek.
*/
td {
    background-color: #f9f9f9;
}

/* tr:nth-child(even):
   - background-color: #e9ecef; -> Ustawia inny kolor tła dla parzystych wierszy.
*/
tr:nth-child(even) {
    background-color: #e9ecef;
}

/* tr:hover:
   - background-color: #d4edda; -> Zmienia tło wiersza przy najechaniu.
   - transition: all 0.2s ease-in-out; -> Dodaje płynne przejście zmiany tła.
*/
tr:hover {
    background-color: #d4edda;
    transition: all 0.2s ease-in-out;
}

/* td[colspan]:
   - text-align: center; -> Centruje tekst.
   - font-style: italic; -> Ustawia tekst kursywą.
   - color: #888; -> Ustawia szary kolor tekstu.
*/
td[colspan] {
    text-align: center;
    font-style: italic;
    color: #888;
}

/* =============================
   Styl dla wierszy z usuniętymi rezerwacjami
============================= */
/* .deleted-row:
   - color: #9b5151; -> Ustawia ciemnoszary kolor tekstu.
   - text-decoration: line-through; -> Przekreśla tekst.
*/
.deleted-row {
    color: #9b5151;
    text-decoration: line-through;
}

/* =============================
    Sortowana tabela płatności
    dla konkretnego obiektu
============================= */
/* .payments-table:
   - width: 100%; -> Ustawia szerokość na 100%.
   - border-collapse: collapse; -> Łączy obramowania.
   - margin-top: 20px; -> Dodaje margines górny.
   - border: 1px solid #ddd; -> Dodaje obramowanie.
*/
.payments-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid #ddd;
    white-space: normal;
}

/* .payments-table th, .payments-table td:
   - padding: 12px; -> Dodaje wewnętrzne odstępy.
   - border: 1px solid #ddd; -> Dodaje obramowanie komórek.
   - text-align: center; -> Centruje tekst.
   - font-size: 1rem; -> Ustawia rozmiar czcionki.
*/
.payments-table th, .payments-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 1rem;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Dodajemy animację przejścia dla komórek tabeli płatności */
.payments-table tr td {
    transition: background-color 0.3s ease;
}

/* Po najechaniu zmieniamy tło komórek w wierszu */
.payments-table tr:hover td {
    background-color: #c8e3ff;
    /* transform: scale(1.05); */
}


/* W pliku .css zamień/uzupełnij dotychczasowy fragment na taki: */
tr.highlighted-row td {
   /* Jednorazowa animacja przez 3s, z liniowym tempem */
   animation: highlight-blink 3s linear 1;
 }
 
 /* Definicja animacji - 5 zmian (highlight->white->highlight->...) */
 @keyframes highlight-blink {
   /* W klatkach 0,20,40,60,80,100% – tło żółte */
   0%, 20%, 40%, 60%, 80%, 100% {
     background-color: #fff49a; 
   }
   /* W klatkach 10,30,50,70,90% – tło białe */
   10%, 30%, 50%, 70%, 90% {
     background-color: #fff;     
   }
 }
 

/* .payments-table th.sortable-header:
   - background-color: #4a90e2; -> Ustawia niebieskie tło.
   - color: white; -> Ustawia biały kolor tekstu.
   - font-weight: bold; -> Pogrubia tekst.
   - text-transform: uppercase; -> Zmienia tekst na wielkie litery.
   - position: relative; -> Ustawia pozycję względną.
   - cursor: pointer; -> Zmienia kursor na wskaźnik.
   - user-select: none; -> Uniemożliwia zaznaczanie tekstu.
*/
.payments-table th.sortable-header {
    background-color: #4A433F;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    user-select: none;
}

/* .payments-table th.sortable-header:hover:
   - background-color: #357ab8; -> Zmienia tło przy najechaniu.
*/
.payments-table th.sortable-header:hover {
    background-color: #967663;
}

/* .payments-table th.sortable-header.asc::after:
   - content: '▲'; -> Dodaje strzałkę wskazującą sortowanie rosnące.
   - position: absolute; -> Pozycjonuje strzałkę absolutnie.
   - right: 8px; -> Ustawia odstęp od prawej.
   - font-size: 0.8em; -> Ustawia rozmiar strzałki.
   - opacity: 0.6; -> Ustawia przezroczystość.
*/
.payments-table th.sortable-header.asc::after {
    content: '▲';
    position: absolute;
    right: 8px;
    font-size: 0.8em;
    opacity: 0.6;
}

/* .payments-table th.sortable-header.desc::after:
   - content: '▼'; -> Dodaje strzałkę wskazującą sortowanie malejące.
   - position: absolute; -> Pozycjonuje strzałkę absolutnie.
   - right: 8px; -> Ustawia odstęp od prawej.
   - font-size: 0.8em; -> Ustawia rozmiar strzałki.
   - opacity: 0.6; -> Ustawia przezroczystość.
*/
.payments-table th.sortable-header.desc::after {
    content: '▼';
    position: absolute;
    right: 8px;
    font-size: 0.8em;
    opacity: 0.6;
}

/* Dodatkowy styl dla usuniętych wierszy w tabeli (.deleted-row):
   - background-color: #ffe6e6; -> Ustawia jasnoczerwone tło.
   - color: #9b5151; -> Ustawia ciemnoszary kolor tekstu.
   - text-decoration: line-through; -> Przekreśla tekst.
*/
.deleted-row {
    background-color: #ffe6e6;
    color: #9b5151;
    text-decoration: line-through;
}



/* Style dla sekcji filtrów */
.filters-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 1rem;
   background: #f7f7f7;
   padding: 1rem;
   border-radius: 4px;
}

.filters-container input,
.filters-container select,
.filters-container button {
   padding: 0.5rem;
   font-size: 1rem;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.filters-container button {
   background-color: #007BFF;
   color: #fff;
   border: none;
   cursor: pointer;
}

.filters-container button:hover {
   background-color: #0056b3;
}


/* Responsywność tabeli (.payments-table) przy szerokości mniejszej niż 768px:
   - Wszystkie elementy tabeli (thead, tbody, th, td, tr) ustawione są jako bloki.
   - Nagłówki są wyrównane do lewej.
   - Każdy wiersz ma dolny margines.
   - Komórki mają dodatkowy lewy padding, a przed nimi wyświetlany jest atrybut data-label.
*/
@media (max-width: 768px) {
    .payments-table, .payments-table thead, .payments-table tbody, .payments-table th, .payments-table td, .payments-table tr { 
        display: block; 
    }
    .payments-table th {
        text-align: left;
        white-space: normal;
    }
    .payments-table tr {
        margin-bottom: 15px;
    }
    .payments-table td {
        padding-left: 50%;
        position: relative;
    }
    .payments-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 15px;
        font-weight: bold;
        white-space: normal;
    }
}

/* =============================
    Tabela wszystkich płatności
    dla admina
    z możliwością edycji
    i sentinel
============================= */
/* .loader:
   - border: 8px solid #f3f3f3; -> Ustawia grubość i kolor obwodu loadera.
   - border-top: 8px solid #007BFF; -> Ustawia kolor górnej części obwodu (tworzy efekt obracania).
   - border-radius: 50%; -> Ustawia kształt koła.
   - width: 60px; height: 60px; -> Ustawia rozmiar loadera.
   - animation: spin 1s linear infinite; -> Ustawia animację obrotu.
   - margin: 20px auto; -> Centruje loader i dodaje margines.
   - display: none; -> Ukrywa loader domyślnie.
*/
#loader-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,0.8); /* półprzezroczyste białe tło */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2000;
 }
 

/* @keyframes spin:
   - Od 0%: transform: rotate(0deg); -> Początkowy stan obrotu.
   - Do 100%: transform: rotate(360deg); -> Pełny obrót.
*/
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* #loader-container:
   - text-align: center; -> Centruje zawartość kontenera loadera.
*/
#loader-container {
    text-align: center;
}

/* #sentinel:
   - height: 1px; -> Ustawia wysokość na 1px, służy jako wskaźnik lazy loading.
*/
#sentinel {
    height: 1px;
}


.entry-date {
    position: relative;
    cursor: pointer;
}


body[data-page="all_payments"] .entry-date::after {
    content: 'Kliknij aby skorygować datę';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    pointer-events: none;
    font-size: 12px;
    z-index: 10;
}

body[data-page="all_payments"] .entry-date:hover::after {
    opacity: 1;
    visibility: visible;
}

#editDateModal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

#editDateModal .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    border-radius: 8px;
    position: relative;
}

/* #editDateModal .modal-content h2:
   - margin-top: 0; -> Usuwa margines górny.
*/
#editDateModal .modal-content h2 {
    margin-top: 0;
}

/* #editDateModal .close:
   - color: #aaa; -> Ustawia szary kolor tekstu.
   - position: absolute; -> Pozycjonuje przycisk absolutnie.
   - top: 10px; right: 15px; -> Ustawia odstępy od góry i prawej.
   - font-size: 28px; -> Ustawia rozmiar czcionki.
   - font-weight: bold; -> Pogrubia tekst.
   - cursor: pointer; -> Ustawia kursor wskazujący.
*/
#editDateModal .close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* #editDateModal .close:hover, #editDateModal .close:focus:
   - color: black; -> Zmienia kolor na czarny przy najechaniu/aktywacji.
*/
#editDateModal .close:hover,
#editDateModal .close:focus {
    color: black;
}

/* #editDateModal .modal-actions:
   - display: flex; -> Używa flexboxa.
   - justify-content: flex-end; -> Wyrównuje akcje do prawej.
   - margin-top: 20px; -> Dodaje odstęp od góry.
*/
#editDateModal .modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* #editDateModal .modal-actions .btn:
   - margin-left: 10px; -> Dodaje lewy margines między przyciskami.
*/
#editDateModal .modal-actions .btn {
    margin-left: 10px;
}

/* =============================
   Sortowanie tabeli rezerwacji
============================= */
/* .reservations-table th.sortable-header:
   - position: relative; -> Ustawia pozycję względną.
   - cursor: pointer; -> Ustawia kursor wskazujący.
*/
.reservations-table th.sortable-header {
    position: relative;
    cursor: pointer;
    
}


/* Rezerwacje – podobne podświetlenie co płatności */
.reservations-table tr td {
   transition: background-color 0.3s ease;
}

.reservations-table tr:hover td {
   background-color: #c8e3ff;
}


/* .reservations-table th.sortable-header.asc::after:
   - content: '▲'; -> Dodaje strzałkę w górę.
   - position: absolute; -> Pozycjonuje strzałkę absolutnie.
   - right: 8px; -> Ustawia odstęp od prawej.
   - font-size: 0.8em; -> Ustawia rozmiar strzałki.
   - opacity: 0.6; -> Ustawia przezroczystość.
*/
.reservations-table th.sortable-header.asc::after {
    content: '▲';
    position: absolute;
    right: 8px;
    font-size: 0.8em;
    opacity: 0.6;
}

/* .reservations-table th.sortable-header.desc::after:
   - content: '▼'; -> Dodaje strzałkę w dół.
   - position: absolute; -> Pozycjonuje strzałkę absolutnie.
   - right: 8px; -> Ustawia odstęp od prawej.
   - font-size: 0.8em; -> Ustawia rozmiar strzałki.
   - opacity: 0.6; -> Ustawia przezroczystość.
*/
.reservations-table th.sortable-header.desc::after {
    content: '▼';
    position: absolute;
    right: 8px;
    font-size: 0.8em;
    opacity: 0.6;
}

/* .reservations-table th.sortable-header:hover:
   - background-color: #357ab8; -> Zmienia tło przy najechaniu.
*/
.reservations-table th.sortable-header:hover {
    background-color: #357ab8;
}


/* Jeżeli "Uwagi" jest 14. kolumną w <thead>, to nth-child(14) 
   spowoduje nadpisanie stylu TYLKO dla 14. kolumny w <tbody> */
   .reservations-table td:nth-child(2),
   .reservations-table td:nth-child(14) {
    white-space: normal !important; /* Pozwala na zawijanie */
    word-wrap: break-word;          /* Łamanie długich słów */
    min-width: 200px;               /* Minimalna szerokość */
    max-width: 400px;               /* Maksymalna szerokość */
  }
  


/* ================================
   Styl przycisku Edytuj
================================= */
/* .edit-btn:
   - padding: 6px 6px; -> Dodaje wewnętrzne odstępy.
   - border: none; -> Usuwa obramowanie.
   - border-radius: 8px; -> Zaokrągla rogi.
   - background-color: #ffc107; -> Ustawia żółte tło.
   - color: #333; -> Ustawia ciemnoszary kolor tekstu.
   - font-weight: bold; -> Pogrubia tekst.
   - font-size: 0.7rem; -> Ustawia rozmiar czcionki.
   - cursor: pointer; -> Ustawia kursor wskazujący.
   - transition: all 0.3s ease; -> Dodaje płynne przejście właściwości.
   - box-shadow: 0 2px 5px rgba(0,0,0,0.1); -> Dodaje delikatny cień.
   - text-transform: uppercase; -> Zamienia tekst na wielkie litery.
*/
.edit-btn {
    padding: 6px 6px;
    border: none;
    border-radius: 8px;
    background-color: #ffc107;
    color: #333;
    /* font-weight: bold; */
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-transform: uppercase;
}

/* .edit-btn:hover:
   - background-color: #e0a800; -> Zmienia tło na ciemniejszy żółty.
   - transform: scale(1.1); -> Powiększa przycisk.
   - box-shadow: 0 4px 8px rgba(0,0,0,0.2); -> Zwiększa cień.
*/
.edit-btn:hover {
    background-color: #e0a800;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* .edit-btn:active:
   - background-color: #d39e00; -> Zmienia tło na jeszcze ciemniejszy żółty.
   - transform: scale(1.05); -> Delikatnie zmniejsza skalę.
*/
.edit-btn:active {
    background-color: #d39e00;
    transform: scale(1.05);
}

/* ================================
   Styl przycisku Usuń
================================= */
/* .delete-btn:
   - padding: 6px 6px; -> Dodaje wewnętrzne odstępy.
   - border: none; -> Usuwa obramowanie.
   - border-radius: 8px; -> Zaokrągla rogi.
   - background-color: #dc3545; -> Ustawia czerwone tło.
   - color: #333; -> Ustawia ciemnoszary kolor tekstu.
   - font-weight: bold; -> Pogrubia tekst.
   - font-size: 0.7rem; -> Ustawia rozmiar czcionki.
   - cursor: pointer; -> Ustawia kursor wskazujący.
   - transition: all 0.3s ease; -> Dodaje płynne przejście właściwości.
   - box-shadow: 0 2px 5px rgba(0,0,0,0.1); -> Dodaje cień.
*/
.delete-btn {
    padding: 6px 6px;
    border: none;
    border-radius: 8px;
    background-color: #dc3545;
    color: #333;
    /* font-weight: bold; */
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* .delete-btn:hover:
   - background-color: #c9302c; -> Zmienia tło na ciemniejszy czerwony.
   - transform: scale(1.1); -> Powiększa przycisk.
   - box-shadow: 0 4px 8px rgba(0,0,0,0.2); -> Zwiększa cień.
*/
.delete-btn:hover {
    background-color: #c9302c;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* .delete-btn:active:
   - background-color: #b52a1e; -> Zmienia tło na jeszcze ciemniejszy czerwony.
   - transform: scale(1.05); -> Delikatnie zmniejsza skalę.
*/
.delete-btn:active {
    background-color: #b52a1e;
    transform: scale(1.05);
}

/* =============================
   Akcje w tabeli pokoi
============================= */
/* .rooms-table .actions-container:
   - display: flex; -> Używa flexboxa.
   - gap: 10px; -> Dodaje odstęp między przyciskami.
   - justify-content: center; -> Centruje przyciski.
*/
.rooms-table .actions-container {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* .rooms-table .actions-container .edit-btn, .rooms-table .actions-container .modal-submit-btn:
   - flex: 1; -> Pozwala przyciskom elastycznie się rozciągać.
   - max-width: 80px; -> Ogranicza maksymalną szerokość przycisków.
*/
.rooms-table .actions-container .edit-btn,
.rooms-table .actions-container .modal-submit-btn {
    flex: 1;
    max-width: 80px;
}

/* =============================
   Kontener formularza dodawania obiektu
============================= */
/* .add-object-container:
   - max-width: 500px; -> Ustawia maksymalną szerokość kontenera.
   - margin: 80px auto; -> Centruje kontener i dodaje margines od góry.
   - padding: 20px; -> Dodaje wewnętrzne odstępy.
   - background-color: #ffffff; -> Ustawia białe tło.
   - border-radius: 12px; -> Zaokrągla rogi.
   - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); -> Dodaje cień.
*/
.add-object-container {
    max-width: 500px;
    margin: 80px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* .add-object-form:
   - display: flex; -> Używa flexboxa.
   - flex-direction: column; -> Ustawia kolumnowy układ elementów.
   - gap: 15px; -> Dodaje odstęp między elementami formularza.
*/
.add-object-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* .add-object-container h1:
   - text-align: center; -> Centruje tekst.
   - margin-bottom: 20px; -> Dodaje margines dolny.
   - color: #333; -> Ustawia kolor tekstu.
*/
.add-object-container h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* =============================
   Styl etykiet i pól formularza
============================= */
/* .form-group label:
   - display: block; -> Ustawia etykietę jako blok.
   - margin-bottom: 5px; -> Dodaje margines dolny.
   - font-weight: bold; -> Pogrubia tekst.
   - font-size: 0.95rem; -> Ustawia rozmiar czcionki.
   - color: #555; -> Ustawia kolor tekstu.
*/
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.95rem;
    color: #555;
}

/* .form-group input, .form-group select:
   - width: 100%; -> Ustawia pełną szerokość.
   - padding: 10px; -> Dodaje wewnętrzne odstępy.
   - border: 1px solid #ccc; -> Ustawia szare obramowanie.
   - border-radius: 8px; -> Zaokrągla rogi.
   - font-size: 1rem; -> Ustawia rozmiar czcionki.
   - box-sizing: border-box; -> Ustawia model pudełkowy.
   - transition: border-color 0.3s ease, box-shadow 0.3s ease; -> Dodaje płynne przejścia zmian.
*/
.form-group input, 
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* .form-group input:focus, .form-group select:focus:
   - border-color: #80bdff; -> Zmienia kolor obramowania na niebieski.
   - outline: none; -> Usuwa domyślną obwódkę.
   - box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); -> Dodaje niebieski cień.
*/
.form-group input:focus,
.form-group select:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

/* .form-group select dodatkowe ulepszenia:
   - appearance: none; -> Usuwa domyślny wygląd selecta.
   - background-image: url(...); -> Ustawia niestandardową strzałkę.
   - background-repeat: no-repeat; -> Zapobiega powtarzaniu się obrazka.
   - background-position: right 10px center; -> Ustawia pozycję obrazka.
   - background-size: 10px 6px; -> Ustawia rozmiar obrazka.
   - padding-right: 30px; -> Dodaje odstęp od prawej dla tekstu.
*/
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 5 5-5H0z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding-right: 30px;
}

/* =============================
   Styl dla komunikatów (błędy i sukces)
============================= */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #c3e6cb;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* =============================
   Animacja fadeIn
============================= */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* =============================
   Dodatkowe style dla submenu
============================= */
.submenu.active {
    display: flex;
    flex-direction: column;
}

/* =============================
   Formularz "Rozpocznij zmianę"
============================= */
#start-shift-form {
    display: flex;
    flex-wrap: wrap;   
    align-items: center;   
    gap: 10px;            
}

#start-shift-form label {
    font-weight: bold;     
    min-width: 120px;         
    text-align: right;  
}

#start-shift-form input[type="number"],
#start-shift-form select {
    min-width: 100px;        
    margin-right: 10px;
}

/* =============================
   Styl formularza "Zakończ zmianę"
============================= */
#end-shift-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#end-shift-form label {
    font-weight: bold;
    min-width: 120px;
    text-align: right;
}

#end-shift-form input[type="number"],
#end-shift-form select {
    min-width: 100px;
    margin-right: 10px;
}




/* === Dzwoneczek powiadomień zadań === */
.task-bell {
    position: relative;
    font-size: 1.4rem;
    color: white;
    cursor: pointer;
    text-decoration: none;   /* gdy to <a> */
}

.task-bell .badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #ff3b3b;
    color: #fff;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    display: none;           /* zero = ukryj */
}


.staff-badge{
    position:relative;
    font-size:1.4rem;
    color:#fff;
    margin-right:15px;      /* odstęp od dzwonka */
    text-decoration:none;  /* gdy <a> */
    cursor:pointer;
}
.staff-badge .badge{
    position:absolute;
    top:-6px;
    right:-8px;
    background:#28a745;    /* zielona plakietka */
    color:#fff;
    padding:2px 6px;
    border-radius:50%;
    font-size:0.75rem;
    font-weight:bold;
    line-height:1;
    display:none;          /* 0 = ukryj */
}



/* 
##################
ZMIANA ZAWIJANIA TEKSTU NA STRONIE ALL_SHIFTS WSZYSTKIE ZMIANY
##################
*/

/* ALL SHIFTS – bez łamania wyrazów w kolumnach UWAGI */
body[data-page="all_shifts"] .shifts-table {
  table-layout: auto;      /* naturalny układ kolumn */
  width: 100%;
  min-width: 1200px;       /* poniżej – poziomy scroll, nic się nie ściska */
}

/* pozostałe kolumny: jedno-liniowo + elipsa, żeby nie nachodziły */
body[data-page="all_shifts"] .shifts-table th,
body[data-page="all_shifts"] .shifts-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 5. = UWAGI ROZPOCZĘCIA, 8. = UWAGI ZAKOŃCZENIA – wielolinijkowo, bez cięcia słów */
body[data-page="all_shifts"] .shifts-table th:nth-child(5),
body[data-page="all_shifts"] .shifts-table td:nth-child(5),
body[data-page="all_shifts"] .shifts-table th:nth-child(8),
body[data-page="all_shifts"] .shifts-table td:nth-child(8) {
  white-space: normal !important;  /* zawijaj tylko po spacjach */
  overflow-wrap: normal;           /* NIE łam ciągów w środku słowa */
  word-break: keep-all;            /* trzymaj całe słowa */
  hyphens: none;                   /* bez automatycznych łączników */
  overflow: visible;
  text-overflow: clip;
  text-align: left;
  width: 32ch;                     /* docelowa szerokość */
  min-width: 24ch;                 /* nie pozwól zwęzić za bardzo (fix nagłówka) */
  max-width: 36ch;
}

/* minimalne szerokości dat/kwot – żeby nie ucinało */
body[data-page="all_shifts"] .shifts-table th:nth-child(3),
body[data-page="all_shifts"] .shifts-table td:nth-child(3),
body[data-page="all_shifts"] .shifts-table th:nth-child(6),
body[data-page="all_shifts"] .shifts-table td:nth-child(6) { /* daty */
  min-width: 19ch;
}
body[data-page="all_shifts"] .shifts-table th:nth-child(4),
body[data-page="all_shifts"] .shifts-table td:nth-child(4),
body[data-page="all_shifts"] .shifts-table th:nth-child(7),
body[data-page="all_shifts"] .shifts-table td:nth-child(7) { /* kwoty */
  min-width: 10ch;
}

/* 
##################
KONIEC ZMIANA ZAWIJANIA TEKSTU NA STRONIE ALL_SHIFTS WSZYSTKIE ZMIANY
##################
*/












/* =============================
   Responsywność
============================= */
@media screen and (max-width: 768px) {
    .top-bar {
        /* usuń position: relative */
        /* ewentualnie zmniejsz padding czy font-size, ale nie zmieniaj position */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        padding: 0 10px;
    }
    
    .hamburger {
        position: absolute;
        left: 10px;
    }
    
    .portal-link {
        position: absolute;
        left: 50%;
        transform: translateX(-80%);
    }
    .portal-link:hover {
        transform: translateX(-80%) scale(1.1);
      }
    
    .top-bar-right {
        position: absolute;
        right: 10px;
    }
    
    .top-bar-center {
        display: none;
        text-align: center; 
    }
}







/* ==== MOBILE LAYOUT TWEAKS =================================== */
@media (max-width: 768px){

  /* ► całe płótno pod top-barem – bez bocznych marginesów  */
  .dashboard-container{
    margin-top:60px;     /* tyle co wysokość .top-bar */
    padding:0;           /* wyzeruj wypełnienie */
  }

  /* ► sama karta z treścią – wypełnia 100 %, brak obramowań  */
  .dashboard-content{
    padding:0.75rem 0.5rem;  /* węższy oddech */
    border-radius:0;
    box-shadow:none;
  }

  /* ► sekcje na stronie Home (nagłówek + badge’e) */
  .summary-section h2{
    margin:0.5rem 0 0.25rem;     /* trochę ciaśniej */
    font-size:1.3rem;
  }

  /* ► pasek STATUS POKOI – mniejszy odstęp i gęstsza siatka  */
  .free-rooms-bar{
    gap:3px;
  }
  .room-badge{
    font-size:12px;
    padding:3px 5px;
  }
  .room-badge .cap{ font-size:10px; }

  /* ► w kalendarzu rezerwacji usuń max-width, żeby strona
       nie była sztucznie zwężana (dotyczy tylko <768 px)   */
  .scheduler-wrapper,       /* jeśli masz taką klasę w kalendarzu */
  table.calendar-table{     /* albo główną tabelę kalendarza      */
    max-width: none !important;
  }
}


/* domyślnie widoczny pełny napis, skrócony ukryty */
.logo-mobile   { display:none; }
.logo-desktop  { display:inline; }

/* ↘︎ na ekranach ≤ 768 px zamieniamy widoczność */
@media(max-width:768px){
  .logo-mobile  { display:inline;   }
  .logo-desktop { display:none;     }
  
  /* …i odrobinę zwężamy sam link,
     żeby nigdy nie nachodził na ikony  */
  .portal-link{
    font-size:1.5rem;     /* było 1.8rem */
    margin-left:6px;      /* było 10px    */
  }
}