/* Moduł rezerwacji korepetycji — styl spójny z kalendarzem Parlo (turkus #0397b2). */

.apw-res {
    --apw-res-primary: #0397b2;
    --apw-res-primary-dark: #02718a;
    --apw-res-darkest: #025e73;
    --apw-res-ink: #12212b;
    --apw-res-muted: #5b6570;
    --apw-res-line: #e6ecf0;
    --apw-res-bg: #f4f7f9;
    --apw-res-ok: #1a7f52;
    --apw-res-warn: #b45309;
    --apw-res-err: #b42318;

    font-family: inherit;
    color: var(--apw-res-ink);
    max-width: 1080px;
    margin: 0 auto;
}

.apw-res *,
.apw-res *::before,
.apw-res *::after { box-sizing: border-box; }

.apw-res__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--apw-res-line);
    border-radius: 14px;
    margin-bottom: 20px;
}

.apw-res__field { display: flex; flex-direction: column; gap: 6px; min-width: 190px; flex: 1 1 190px; }

/* Pola dat są wąskie z natury — bez tego rozpychały pasek filtrów
   i wypychały pozostałe pola do drugiego wiersza. */
.apw-res__filters .apw-res__field:has(input[type="date"]) {
    min-width: 150px;
    flex: 0 1 165px;
}

/* Przycisk „Wyczyść" trzyma się prawej krawędzi paska. */
.apw-res__filters .apw-res__field--submit {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
}
.apw-res__field label { font-size: 13px; font-weight: 600; color: var(--apw-res-muted); }

.apw-res__overlay select,
.apw-res__overlay input[type="text"],
.apw-res__overlay input[type="tel"],
.apw-res__overlay input[type="email"],
.apw-res__overlay textarea {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    background: #fff !important;
    color: var(--apw-res-ink) !important;
    border: 1px solid var(--apw-res-line) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.apw-res__overlay textarea { min-height: 84px !important; }

.apw-res select,
.apw-res__overlay select,
.apw-res__overlay input[type="text"],
.apw-res__overlay input[type="tel"],
.apw-res__overlay input[type="email"],
.apw-res__overlay input[type="date"],
.apw-res__overlay input[type="time"],
.apw-res__overlay textarea,
.apw-res input[type="text"],
.apw-res input[type="tel"],
.apw-res input[type="email"],
.apw-res input[type="date"],
.apw-res input[type="time"],
.apw-res textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--apw-res-line);
    border-radius: 9px;
    font-size: 15px;
    font-family: inherit;
    color: var(--apw-res-ink);
    background: #fff;
}

.apw-res select:focus,
.apw-res input:focus,
.apw-res textarea:focus,
.apw-res__overlay select:focus,
.apw-res__overlay input:focus,
.apw-res__overlay textarea:focus {
    outline: 2px solid rgba(3, 151, 178, .35);
    outline-offset: 1px;
    border-color: var(--apw-res-primary) !important;
    box-shadow: none !important;
}

.apw-res textarea { min-height: 84px; resize: vertical; }

/* Motyw BuddyBoss ma gołe reguły `button{background:transparent;color:#222;width:120px}`
   o tej samej specyficzności co pojedyncza klasa — wygrywa kolejność w kaskadzie
   i przycisk robi się biały na białym. Stąd podwójna klasa + !important na kolorach
   i jawne wyzerowanie width/min-width, które motyw narzuca. */
.apw-res .apw-res__btn,
.apw-res__overlay .apw-res__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    margin: 0;
    padding: 11px 20px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--apw-res-primary) !important;
    background-color: var(--apw-res-primary) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit;
    line-height: 1.3 !important;
    letter-spacing: normal;
    cursor: pointer;
    text-decoration: none !important;
    text-transform: none;
    box-shadow: none !important;
    transition: background .15s ease;
}

/* Stany przycisków (hover/focus/active/disabled) obsługuje wyłącznie blok
   `apw-reservation-late` wypisywany na końcu <head>. Trzymanie ich TAKŻE tutaj
   z `:not(:disabled)` dawało im wyższą specyficzność niż nadpisaniom inline
   i to ten plik wygrywał — przycisk rozjaśniał się pod kursorem. */

.apw-res .apw-res__btn--ghost,
.apw-res__overlay .apw-res__btn--ghost {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--apw-res-primary) !important;
    border: 1px solid var(--apw-res-primary) !important;
}


.apw-res .apw-res__btn--danger,
.apw-res__overlay .apw-res__btn--danger {
    background: var(--apw-res-err) !important;
    background-color: var(--apw-res-err) !important;
}


.apw-res .apw-res__btn--ok,
.apw-res__overlay .apw-res__btn--ok {
    background: var(--apw-res-ok) !important;
    background-color: var(--apw-res-ok) !important;
}


.apw-res .apw-res__btn--sm,
.apw-res__overlay .apw-res__btn--sm {
    padding: 7px 14px !important;
    font-size: 13px !important;
}

/* --- Lista dni i slotów --- */

.apw-res__day { margin-bottom: 22px; }

.apw-res__day-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--apw-res-darkest);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--apw-res-line);
    text-transform: capitalize;
}

.apw-res__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px;
}

.apw-res__slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--apw-res-line);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.apw-res__slot:hover,
.apw-res__slot:focus-visible {
    border-color: var(--apw-res-primary);
    box-shadow: 0 4px 14px rgba(3, 151, 178, .14);
    transform: translateY(-1px);
}

.apw-res__slot-time { font-size: 18px; font-weight: 700; color: var(--apw-res-ink); }
.apw-res__slot-teacher { font-size: 14px; color: var(--apw-res-muted); }

/* Kolor prowadzącego pozwala rozpoznać go szybciej niż czytanie nazwiska —
   przy kilku osobach w jednym dniu to realna różnica. */
.apw-res__teacher-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    max-width: 100%;
    padding: 4px 11px 4px 9px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apw-res__teacher-badge::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--apw-dot, currentColor);
}

.apw-res__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Plakietka musi być inline-blockiem: przy `inline` zawijany tekst rozrywa tło
   na dwa kawałki, a padding zostaje tylko na skrajnych fragmentach. */
.apw-res__tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(3, 151, 178, .1);
    color: var(--apw-res-darkest);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.apw-res__tag--free { background: rgba(26, 127, 82, .12); color: var(--apw-res-ok); }
.apw-res__tag--pending { background: rgba(180, 83, 9, .12); color: var(--apw-res-warn); }
.apw-res__tag--confirmed { background: rgba(3, 151, 178, .14); color: var(--apw-res-darkest); }
.apw-res__tag--cancelled { background: rgba(180, 35, 24, .1); color: var(--apw-res-err); }

/* --- Komunikaty --- */

.apw-res__msg {
    padding: 13px 16px;
    border-radius: 11px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.55;
}

.apw-res__msg--info { background: rgba(3, 151, 178, .09); color: var(--apw-res-darkest); }
.apw-res__msg--ok { background: rgba(26, 127, 82, .1); color: var(--apw-res-ok); }
.apw-res__msg--err { background: rgba(180, 35, 24, .09); color: var(--apw-res-err); }

.apw-res__empty {
    padding: 42px 20px;
    text-align: center;
    color: var(--apw-res-muted);
    background: #fff;
    border: 1px dashed var(--apw-res-line);
    border-radius: 14px;
}

.apw-res__loading { padding: 32px; text-align: center; color: var(--apw-res-muted); }

/* --- Modal formularza --- */

.apw-res__overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 33, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 99999;
    overflow-y: auto;
}

.apw-res__modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    padding: 26px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.apw-res__modal h3 {
    margin: 0 0 6px !important;
    padding: 0;
    font-size: 20px !important;
    line-height: 1.3;
    color: var(--apw-res-ink) !important;
}

.apw-res__modal p { color: var(--apw-res-ink); }
.apw-res__modal label { color: var(--apw-res-muted); }
.apw-res__modal-sub { margin: 0 0 20px; color: var(--apw-res-muted); font-size: 14px; }

.apw-res__form-row { margin-bottom: 20px !important; }

/* Motyw ustawia label{font-size:17px; margin-bottom:.25rem} — etykieta kleiła się
   do pola i była większa od treści, którą opisuje. */
.apw-res__form-row label,
.apw-res__overlay .apw-res__form-row label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--apw-res-muted) !important;
    text-transform: none;
    letter-spacing: normal;
}

.apw-res__req { color: var(--apw-res-err); }

.apw-res__radio-group { display: flex; gap: 10px; flex-wrap: wrap; }

.apw-res__radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border: 1px solid var(--apw-res-line);
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    flex: 1 1 130px;
}

/* Motyw zeruje gap i marginesy na input[type=radio] — odstęp trzeba dać
   też na samej kontrolce, inaczej etykieta klei się do kółka. */
.apw-res__radio input {
    margin: 0 10px 0 0;
    flex: 0 0 auto;
    width: auto;
}

.apw-res__radio:has(input:checked) {
    border-color: var(--apw-res-primary);
    background: rgba(3, 151, 178, .07);
    font-weight: 600;
}



.apw-res__checkbox,
.apw-res__overlay .apw-res__checkbox {
    display: flex !important;
    gap: 11px !important;
    align-items: flex-start;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: var(--apw-res-muted) !important;
    cursor: pointer;
}

.apw-res__checkbox input,
.apw-res__overlay .apw-res__checkbox input {
    margin: 3px 0 0 !important;
    flex-shrink: 0;
    width: auto !important;
}

/* Modal renderuje się poza .apw-res, więc akapity i teksty pomocnicze
   dziedziczyłyby typografię motywu. */
.apw-res__overlay p { margin: 0 0 13px !important; line-height: 1.6 !important; }
.apw-res__overlay .apw-res__modal-sub { margin: 0 0 22px !important; }
.apw-res__overlay .apw-res__cell-sub { font-size: 13px !important; line-height: 1.5 !important; margin: 0 0 6px !important; }

.apw-res__actions,
.apw-res__overlay .apw-res__actions {
    display: flex !important;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin: 26px 0 0 !important;
    padding-top: 20px;
    border-top: 1px solid var(--apw-res-line);
    flex-wrap: wrap;
}

/* --- Tabela (panele lektora i sekretariatu) --- */

.apw-res__table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--apw-res-line); border-radius: 14px; }

.apw-res__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }

.apw-res__table th {
    text-align: left;
    padding: 13px 15px;
    background: var(--apw-res-bg);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--apw-res-muted);
    border-bottom: 1px solid var(--apw-res-line);
    white-space: nowrap;
}

.apw-res__table td { padding: 13px 15px; border-bottom: 1px solid var(--apw-res-line); vertical-align: top; }
.apw-res__table tr:last-child td { border-bottom: 0; }
.apw-res__table tbody tr:hover { background: rgba(3, 151, 178, .03); }

.apw-res__cell-main { font-weight: 600; color: var(--apw-res-ink); }
.apw-res__cell-sub { font-size: 12.5px; color: var(--apw-res-muted); margin-top: 3px; }

.apw-res__row-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* Nazwy statusów bywają długie („Oczekuje na kontakt"), a kolumna akcji
   nie może się przez to zwijać. */
.apw-res__table td:has(> .apw-res__tag),
.apw-res__table td:has(> .apw-res__billing) { white-space: nowrap; }

.apw-res__table td:last-child { white-space: nowrap; width: 1%; }

/* Podpis pod statusem („✓ grupa: Imię Nazwisko — korepetycje (Prowadzący)")
   dziedziczył `nowrap` z komórki i rozpychał tabelę tak, że kolumna z akcjami
   wypadała poza ekran — przycisk „Usuń" był dostępny dopiero po przewinięciu
   w bok. Tu zawijanie jest pożądane: to tekst opisowy, nie etykieta. */
.apw-res__table td .apw-res__cell-sub {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Kolumna STATUS niesie najdłuższą treść w wierszu — bez ograniczenia
   zabiera całą nadmiarową szerokość. */
.apw-res__table td:has(> .apw-res__tag) { max-width: 280px; }

/* Kolumna akcji zawsze widoczna: przyklejona do prawej krawędzi, więc
   „Usuń" zostaje w kadrze nawet gdy reszta tabeli wymaga przewijania. */
.apw-res__table th:last-child,
.apw-res__table td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -6px 0 6px -6px rgba(18, 33, 43, .18);
}

.apw-res__table th:last-child { background: var(--apw-res-bg); }

/* Hover wiersza musi objąć też przyklejoną komórkę — inaczej odcinałaby się
   białym prostokątem od podświetlonego wiersza. */
.apw-res__table tbody tr:hover td:last-child { background: #fbfdfe; }

.apw-res__section { margin-bottom: 30px; }

.apw-res__section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--apw-res-ink);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.apw-res__count {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    min-width: 22px;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--apw-res-primary);
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.apw-res__card {
    background: #fff;
    border: 1px solid var(--apw-res-line);
    border-radius: 14px;
    padding: 18px;
}

/* Formularz dostępności: jawna siatka zamiast auto-fit — przy 7 polach
   auto-fit łamał rząd tak, że przycisk lądował obok pola „Miejsce", nie pod nim. */
.apw-res__grid-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    align-items: end;
}

.apw-res__grid-form .apw-res__field { min-width: 0; grid-column: span 2; }

/* Prowadzący (tylko dla sekretariatu) i Miejsce potrzebują więcej miejsca. */
.apw-res__grid-form .apw-res__field--wide { grid-column: span 4; }
.apw-res__grid-form .apw-res__field--submit { grid-column: span 2; }

.apw-res__grid-form .apw-res__field--submit label { display: none; }
.apw-res__grid-form .apw-res__field--submit .apw-res__btn { width: 100%; }

@media (max-width: 1100px) {
    .apw-res__grid-form { grid-template-columns: repeat(6, 1fr); }
    .apw-res__grid-form .apw-res__field { grid-column: span 2; }
    .apw-res__grid-form .apw-res__field--wide { grid-column: span 3; }
    .apw-res__grid-form .apw-res__field--submit { grid-column: span 6; }
}

@media (max-width: 640px) {
    .apw-res__grid-form { grid-template-columns: 1fr; }
    .apw-res__grid-form .apw-res__field,
    .apw-res__grid-form .apw-res__field--wide,
    .apw-res__grid-form .apw-res__field--submit { grid-column: span 1; }
}

@media (max-width: 640px) {
    .apw-res__slots { grid-template-columns: 1fr; }
    .apw-res__filters { padding: 14px; }
    .apw-res__modal { padding: 20px; }
    .apw-res__actions .apw-res__btn { flex: 1 1 100%; }
}


/* --- Etap III: zamykanie zajęć i zestawienia --- */

.apw-res__tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--apw-res-line);
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.apw-res__tab {
    padding: 11px 18px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--apw-res-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.apw-res__tab:hover { color: var(--apw-res-primary-dark); }

.apw-res__tab[aria-selected="true"] {
    color: var(--apw-res-primary);
    border-bottom-color: var(--apw-res-primary);
}

/* Kafelki podsumowania zestawienia */
.apw-res__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.apw-res__stat {
    background: #fff;
    border: 1px solid var(--apw-res-line);
    border-radius: 12px;
    padding: 15px 17px;
}

.apw-res__stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--apw-res-ink);
    line-height: 1.15;
    display: block;
}

.apw-res__stat-label {
    font-size: 12.5px;
    color: var(--apw-res-muted);
    margin-top: 5px;
    display: block;
}

.apw-res__stat--accent .apw-res__stat-value { color: var(--apw-res-primary); }
.apw-res__stat--warn .apw-res__stat-value { color: var(--apw-res-warn); }
.apw-res__stat--ok .apw-res__stat-value { color: var(--apw-res-ok); }

/* Rozliczenie — czytelne oznaczenie skutku statusu */
.apw-res__billing {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    vertical-align: middle;
}

.apw-res__billing--full { background: rgba(26, 127, 82, .12); color: var(--apw-res-ok); }
.apw-res__billing--partial { background: rgba(180, 83, 9, .12); color: var(--apw-res-warn); }
.apw-res__billing--compensation { background: rgba(3, 151, 178, .12); color: var(--apw-res-darkest); }
.apw-res__billing--review { background: rgba(180, 35, 24, .1); color: var(--apw-res-err); }
.apw-res__billing--none { background: var(--apw-res-bg); color: var(--apw-res-muted); }

/* Ostrzeżenie o skutkach odwołania */
.apw-res__consequence {
    padding: 14px 16px;
    border-radius: 11px;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.55;
    border-left: 4px solid;
}

.apw-res__consequence--ok {
    background: rgba(26, 127, 82, .08);
    border-left-color: var(--apw-res-ok);
    color: #14653f;
}

.apw-res__consequence--warn {
    background: rgba(180, 83, 9, .09);
    border-left-color: var(--apw-res-warn);
    color: #8a4308;
}

.apw-res__hint {
    font-size: 12.5px;
    color: var(--apw-res-muted);
    margin: 6px 0 0;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .apw-res__stats { grid-template-columns: repeat(2, 1fr); }
    .apw-res__tab { flex: 1 1 auto; text-align: center; padding: 10px 12px; font-size: 14px; }
}