/* Podstawowy styl tabeli */
body {
    margin: 0;
    background-color: #F4F7FB; /* Jasny szary */
    font-family: 'Archivo', sans-serif;
    margin: 10px 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

th, td {
    border: 1px solid #ffffff00; /* Szary */
    height: 34px;
    text-align: center;
	border-radius: 5px;
}

/* Kolumna z godzinami (pierwsza kolumna) */
th:first-child, td:first-child {
    width: 10%; /* Węższa kolumna na godziny */
    text-align: center; 
}

/* Kolumny dni tygodnia (równa szerokość) */
th:not(:first-child), td:not(:first-child) {
    width: calc(90% / 7); 
}

p {
    height: 18px;
    margin: 0px;
    padding: 1px;
}

.spacer {
    margin-top: 20px; 
}

/* Styl dla zarezerwowanych godzin */
.reserved {
    background-color: #FF6B6B; /* Czerwony dla zajętych terminów */
}

/* Styl dla dostępnych godzin */
.available {
    background-color: #6BCB77; /* Zielony dla dostępnych terminów */
}

/* Co drugi wiersz zmienia tło na jaśniejsze zielone */
tr:nth-child(even) .available {
    background-color: #A2E89B; /* Jaśniejszy zielony */
}

/* Styl dla dnia dzisiejszego (dostępne godziny) */
.today .available {
    background-color: #F1D02F; /* Złocisty kolor */
}

/* Styl dla dnia dzisiejszego (zarezerwowane godziny) */
.today .reserved {
    background-color: #FF6B6B; 
}

/* Obramowanie dla aktualnego dnia */
td.today {
    border-left: 2px solid #F1D02F;  
    border-right: 2px solid #F1D02F;
}

th.today {
    background-color: #F1D02F; 
    color: #000; 
    font-weight: bold; 
    border: 2px solid #F1D02F;
    border-bottom: none;
}

/* Styl dla okna modalnego */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
}

.modal.modal-active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border: 1px solid #D1D8E0;
    border-radius: 15px;
    width: 30%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Styl dla komunikatu toast */
.toast {
    opacity: 0;
    transition: opacity 0.5s ease-in-out; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    background-color: #FF6B6B; 
    color: white; 
    padding: 20px 30px;
    border-radius: 15px;
    z-index: 1000;
    display: none;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.toast.visible {
    display: block; 
    opacity: 1;
}

.toast.hidden {
    opacity: 0;
}

.close-toast {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

button {
    background-color: #007BFF; /* Niebieski */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
    background-color: #0056b3; 
    transform: scale(1.05); 
}

.toast button {
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.reservation-content {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    margin-right: 3px;
}

.reservation-text {
    flex-grow: 1;
    font-size: 13px; 
}

.cancel-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 10px; 
}

.cancel-icon {
    width: 24px;
    height: 24px;
}

div {
    text-align: center;
    font-family: 'Archivo', sans-serif;
}

div a {
    color: #007BFF;
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
    transition: color 0.3s ease;
}

div a:hover {
    color: #0056b3;
}

div span {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0 10px;
}

span {
    color: grey;
    cursor: not-allowed;
    text-decoration: none;
}

.tyt_glowny {
    font-size: 22px;
    font-weight: bold;
    color: #FF6B6B;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    margin-top: -33px;
}

.toast.error {
    background-color: #E63946; 
}

.toast.success {
    background-color: #4CAF50; 
}

td.past {
    background-color: #f1f1f1;
    color: #b0b0b0; 
}

td.today {
    /*border-left: 2px solid #FF6B6B;
    border-right: 2px solid #FF6B6B;*/
}

td.available {
    background-color: #6BCB77; 
}

td.reserved {
    background-color: #FF6B6B;
}

.inactive {
    background-color: #D1D8E0; 
    pointer-events: none; 
    cursor: not-allowed;
}

.reservation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.reservation-table th,
.reservation-table td {
    padding: 0px 10px;;
    text-align: center;
    font-size: 16px;
    color: #333;
}

.reservation-table th {
    background-color: #007BFF;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
	border-radius: 0px;
}

.reservation-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.reservation-table tbody tr:nth-child(even) {
    background-color: #f1f1f1;
}

.reservation-table tbody tr:hover {
    background-color: #e0e0e0;
}

.reservation-table td {
    border-bottom: 1px solid #ddd;
}

.reservation-section h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #667ea3;
    font-weight: bold;
}

h1 {
    font-family: 'Asap', sans-serif;
    height: 14px;
    padding-bottom: 30px;
    color: #007BFF;
}

#clientList {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 10;
}

#clientList li {
    padding: 8px;
    cursor: pointer;
    background-color: #fff;
}

#clientList li:hover {
    background-color: #f0f0f0;
}

#newClientForm {
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
}

#newClientForm .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#newClientForm label {
    flex: 1;
    text-align: right;
    margin-right: 10px;
    color: #333;
    font-weight: bold;
}

#newClientForm input {
    flex: 2;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
}

#newClientForm input::placeholder {
    color: #aaa;
}

#addNewClientBtn {
    background-color: #ffffff;
    color: #7f7f7f;
    border: 1px solid #7f7f7f;
    padding: 5px 10px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: list-item;
    justify-self: center;
    margin-bottom: 10px;
}

#addNewClientBtn:hover {
    background-color: #D3D3D3;
}

#RezerveBtn {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 22px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: list-item;
    justify-self: center;
    margin-bottom: 10px;
}

#RezerveBtn:hover {
    background-color: #0056b3;
}

#PowrotAdminBtn {
    background-color: #e0f4ff;
    color: #1993db;
    border: #1993db 1px solid;
    padding: 5px 10px;
    font-size: 22px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#PowrotAdminBtn:hover {
    background-color: #0056b3;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.9rem;
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.9rem;
    border: #1993db solid 1px;
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
}

.date-time {
    font-weight: bold;
    color: #1B227C;
}

.header-right span {
    display: block;
}

.header-left h1 {
    font-size: 2rem;
    color: #1993db;
    margin-bottom: 0;
}

.data {
    font-size: 17px;
    color: #1993db;
}

table tr:first-child {
    background-color: #fff;
    color: #333;
}

.poprzedni {
    background: #1993db;
    color: #ffffff;
    padding: 2px 6px 2px 20px;
    border-bottom-left-radius: 14px;
    border-top-left-radius: 14px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.biezacy {
    background: #ffffff;
    color: #1993db;
    padding: 2px 19px 2px 20px;
    border-radius: 5px;
    border: 1px solid;
    font-size: 16px;
}

.nastepny {
    background: #1993db;
    color: #ffffff;
    padding: 2px 20px 2px 6px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}
.break {
    text-align: center;
    font-weight: bold;
    color: #6F6F6F;
    background-color: #f9f9f9;
}
.scheduled-class {
    background-color: pink;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    color: #000;
}

.has-classes {
    background-color: pink; /* Różowe tło */
}
td {
    position: relative;
    padding: 10px;
    vertical-align: middle;
}

.class-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.reservation-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.scheduled-class {
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
}

.reservation-content {
    background-color: #e0f7fa;
    padding: 5px;
    border-radius: 5px;
}

button {
    background-color: #326f9b33;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.cancel-btn {
    background-color: #f44336;
    border: none;
    /*padding: 5px 10px;*/
    cursor: pointer;
}

.cancel-btn:hover {
    background-color: #da190b;
}

.today {
    background-color: #ffff99; /* Dla wyróżnienia dnia dzisiejszego */
}
/* Zabezpieczenie przed nakładaniem się tekstu */
.class-info p {
    display: inline-table;
    overflow: hidden; /* Ukrywa tekst, który nie mieści się w elemencie */
    text-overflow: ellipsis; /* Dodaje "..." na końcu tekstu, jeśli jest za długi */
    width: 100%; /* Ustawia pełną szerokość elementu */
    margin: 0;
    padding: 0;
    font-size: 14px; /* Możesz dostosować rozmiar czcionki, jeśli jest zbyt duży */
}

/* Dostosowanie przestrzeni wewnętrznej dla elementów w tabeli */
td {
    vertical-align: middle;
    padding: 10px; /* Zwiększa odstępy w tabeli, by tekst miał więcej przestrzeni */
}

/* Zwiększenie szerokości kolumny z danymi o zajęciach */
td.class-info {
    max-width: 150px; /* Maksymalna szerokość komórki z informacjami o zajęciach */
}

/* Stylizacja nagłówków dni */
th {
    word-wrap: break-word; /* Umożliwia zawijanie długich nazw dni */
    white-space: normal; /* Wymusza zawijanie tekstu w nagłówkach */
    padding: 10px;
}
.btn-red {
    background-color: #ff8383;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

.btn-red:hover {
    background-color: darkred;
}
.search-instructor-container {
    margin-bottom: 20px;
}

#searchClientLabel {
    display: block; /* Etykieta będzie w nowej linii */
    font-weight: bold;
    margin-bottom: 5px;
}

#searchClient {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

#clientList {
    list-style-type: none;
    padding: 0;
    margin-top: 5px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#clientList li {
    padding: 8px;
    cursor: pointer;
}

#clientList li:hover {
    background-color: #f0f0f0;
}

.highlight-search {
    color: red; /* Czerwony kolor tekstu */
    font-weight: bold; /* Pogrubienie tekstu */
}