/* =====================================================================
   Akademia Studio Figura – tablet i telefon
   Ładowany jako ostatni: tu są wszystkie reguły < 992 px.
   ===================================================================== */

/* ---------------------------------------------------------- Tabele → karty
   <table class="sf-table sf-table--stack">  → karty poniżej 768 px
   <table class="sf-table--stack sf-table--stack-lg"> → karty poniżej 992 px (szerokie tabele)
   Komórki: data-main (nagłówek karty), data-label="…" (wiersz z etykietą), data-actions (przyciski). */

@media (max-width: 991.98px) {
    .sf-table--stack-lg { min-width: 0 !important; }
    .sf-table--stack-lg thead { display: none; }
    .sf-table--stack-lg, .sf-table--stack-lg tbody, .sf-table--stack-lg tr { display: block; width: 100%; }
    .sf-table--stack-lg tr { padding: .9rem 1.25rem; border-bottom: 1px solid var(--sf-line); }
    .sf-table--stack-lg tbody tr:last-child { border-bottom: 0; }
    /* etykieta pływa z lewej, cała treść komórki trzyma się razem po prawej */
    .sf-table--stack-lg td { display: block; overflow: hidden; border: 0 !important; padding: .3rem 0 !important;
        text-align: right; white-space: normal !important; }
    .sf-table--stack-lg td[data-label]::before {
        content: attr(data-label); float: left; margin: .15rem 1rem 0 0; text-align: left;
        font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted);
    }
    .sf-table--stack-lg td[data-main] { display: block; text-align: left; padding-bottom: .5rem !important; font-weight: 500; }
    .sf-table--stack-lg td[data-actions] { display: flex; justify-content: flex-end; gap: .35rem; padding-top: .6rem !important; }
    .sf-table--stack-lg td .form-switch, .sf-table--stack-lg td > .d-flex { justify-content: flex-end; }
    .sf-table--stack-lg td[data-actions]:empty, .sf-table--stack-lg td[data-label]:empty { display: none; }
    .sf-table--stack-lg .progress { min-width: 120px; }
}

@media (max-width: 767.98px) {
    .sf-table--stack { min-width: 0 !important; }
    .sf-table--stack thead { display: none; }
    .sf-table--stack, .sf-table--stack tbody, .sf-table--stack tr { display: block; width: 100%; }
    .sf-table--stack tr { padding: .9rem 1.1rem; border-bottom: 1px solid var(--sf-line); }
    .sf-table--stack tbody tr:last-child { border-bottom: 0; }
    /* etykieta pływa z lewej, cała treść komórki trzyma się razem po prawej */
    .sf-table--stack td { display: block; overflow: hidden; border: 0 !important; padding: .3rem 0 !important;
        text-align: right; white-space: normal !important; }
    .sf-table--stack td[data-label]::before {
        content: attr(data-label); float: left; margin: .15rem 1rem 0 0; text-align: left;
        font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted);
    }
    .sf-table--stack td[data-main] { display: block; text-align: left; padding-bottom: .5rem !important; font-weight: 500; }
    .sf-table--stack td.text-center { text-align: right !important; }
    .sf-table--stack td[data-actions] { display: flex; justify-content: flex-end; gap: .35rem; padding-top: .6rem !important; }
    .sf-table--stack td .form-switch, .sf-table--stack td > .d-flex { justify-content: flex-end; }
    .sf-table--stack td[data-actions]:empty, .sf-table--stack td[data-label]:empty { display: none; }
    .sf-table--stack td .form-control { display: inline-block; width: 60% !important; min-width: 0 !important; }


    /* Wiersze-śródtytuły (Właściciele / Pracownicy) i wyróżnienie właściciela w kartach */
    .sf-table--stack tr.sf-subhead { padding: 0; }
    .sf-table--stack tr.sf-subhead td { display: block; padding: .55rem 1.1rem !important; text-align: left; }
    .sf-table--stack tr.sf-subhead td > .d-flex { justify-content: flex-start; }
    .sf-table--stack tr.sf-row-owner { background: #FFFCF6; box-shadow: inset 3px 0 0 var(--sf-copper); }
    .sf-table--stack tr.sf-row-owner td { background: transparent; box-shadow: none; }
    .sf-table--stack tr.sf-row-inactive td { opacity: 1; }
    .sf-table--stack tr.sf-row-inactive { opacity: .6; }
    .sf-studio-group .sf-table td:first-child { padding-left: 0 !important; }
}

/* ---------------------------------------------------------- Paski narzędzi i filtry */
@media (max-width: 767.98px) {
    .sf-toolbar { gap: .5rem; }
    .sf-toolbar > *, .sf-toolbar .sf-search, .sf-toolbar .form-select { flex: 1 1 100%; width: 100% !important; min-width: 0; margin-left: 0 !important; }
    .sf-toolbar > div.ms-auto { display: flex; flex-direction: column; gap: .5rem; }
    .sf-toolbar > div.ms-auto > .btn, .sf-toolbar > .btn { width: 100%; }
    .sf-toolbar .btn { white-space: normal; }
    form.card .card-body.d-flex > * { flex: 1 1 100%; }      /* filtry dziennika aktywności */
}

/* ---------------------------------------------------------- Nagłówek, treść, karty */
@media (max-width: 991.98px) {
    .sf-content { padding: 1.5rem; }
    .sf-hero { padding: 1.5rem; }
}
@media (max-width: 575.98px) {
    .sf-topbar__title { font-size: .95rem; }
    .sf-hero { padding: 1.25rem; gap: 1rem; }
    .sf-hero .btn { flex: 1 1 100%; }
    .sf-hero > .d-flex { width: 100%; }
    .sf-ring { --size: 96px; }
    .card-body { padding: 1.1rem; }
    .card-header { padding: .9rem 1.1rem; }
    .sf-card-footer { padding: .9rem 1.1rem; }
    .sf-card-footer .btn { width: 100%; }
    .sf-empty { padding: 2rem 1rem; }
    .sf-stat .card-body { padding: 1rem; }
    .sf-stat__value { font-size: 1.35rem; }
    .btn-lg { padding: .75rem 1.4rem; }
}

/* ---------------------------------------------------------- Zakładki (Program / Ustawienia / …) – jedna przewijana linia */
@media (max-width: 767.98px) {
    .sf-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .sf-tabs::-webkit-scrollbar { display: none; }
    .sf-tabs .nav-link { white-space: nowrap; }
    .sf-tabs.ms-lg-auto { width: 100%; }
}

/* ---------------------------------------------------------- Program webinaru (moduły i odcinki) */
@media (max-width: 575.98px) {
    .sf-module__head { padding: .9rem 1rem; }
    .sf-module__head > form.flex-grow-1 { flex: 1 1 calc(100% - 40px); min-width: 0 !important; }
    .sf-module__head > small { flex: 1 1 auto; }
    .sf-lesson-row { flex-wrap: wrap; padding: .8rem 1rem; gap: .5rem .75rem !important; }
    .sf-lesson-row > .flex-grow-1 { flex: 1 1 calc(100% - 50px); }
    .sf-lesson-row__actions { width: 100%; display: flex; justify-content: flex-end; gap: .25rem; }
    .sf-add-module .card-body { flex-direction: column; align-items: stretch !important; }
    .sf-add-module .form-control { max-width: none !important; }
}

/* ---------------------------------------------------------- Formularze */
@media (max-width: 575.98px) {
    .sf-segmented { display: flex; width: 100%; }
    .sf-segmented .btn { flex: 1 1 0; white-space: nowrap; font-size: .78rem; padding-left: .5rem; padding-right: .5rem; }
    .sf-radio-cards .form-check { flex-wrap: wrap; }
    .sf-sticky-actions .btn { width: 100%; }
    .input-group > .input-group-text { font-size: .75rem; }
    #codes form.d-flex > * { flex: 1 1 100%; }
    #codes form.d-flex .btn { width: 100%; margin-left: 0 !important; }
    #codes form.d-flex input[name=count] { width: 100% !important; }
}

/* ---------------------------------------------------------- Użytkownicy – grupy studiów */
@media (max-width: 575.98px) {
    .sf-studio-group__head { padding: .9rem 1rem; gap: .75rem; }
    .sf-studio-group__icon { width: 36px; height: 36px; }
    .sf-subhead--owner .sf-btn-owner { padding: .2rem .6rem; }
}

/* ---------------------------------------------------------- Odtwarzacz */
@media (max-width: 575.98px) {
    .sf-lesson-bar { gap: .75rem; padding-top: 1rem; }
    .sf-lesson-bar > .d-flex { width: 100%; }
    .sf-lesson-bar #nextBtn { margin-left: auto; }
    #noteForm .d-flex { flex-wrap: wrap; }
    #noteForm .d-flex .btn { width: 100%; margin-left: 0 !important; }
    .sf-note { flex-wrap: wrap; }
    .sf-player-top__title strong { max-width: 45vw; }
}

/* ---------------------------------------------------------- Modal podglądu odcinka */
@media (max-width: 575.98px) {
    .sf-preview-modal .modal-footer { flex-direction: column; }
    .sf-preview-modal .modal-footer .btn { width: 100%; }
}

/* ---------------------------------------------------------- Podświetlenia: dotyk i karty z tabel */
/* Na ekranach dotykowych :hover "przykleja się" po dotknięciu – wyłączamy efekty najechania */
@media (hover: none) {
    .sf-table tbody tr:hover td { background: transparent; }
    .sf-course:hover { transform: none; box-shadow: var(--sf-shadow); }
    .btn-primary:hover { transform: none; }
    button.sf-lesson-row__icon:hover { transform: none; background: var(--sf-gold-soft); color: var(--sf-copper-dark); }
    button.sf-studio-group__head:hover { background: #fff; }
    .sf-note__actions { opacity: 1; }
}
html { -webkit-tap-highlight-color: rgba(255, 145, 0, .08); }

/* Karty z tabel: tło na całej karcie (łącznie z marginesem), nie na pojedynczych komórkach */
@media (max-width: 991.98px) {
    .sf-table--stack-lg tbody tr { transition: background .15s; }
    .sf-table--stack-lg tbody tr:hover td,
    .sf-table--stack-lg tr.sf-row-new td { background: transparent !important; }
    .sf-table--stack-lg tr.sf-row-new { background: #FFF8EC; }
}
@media (max-width: 991.98px) and (hover: hover) {
    .sf-table--stack-lg tbody tr:hover { background: #FFFBF4; }
}
@media (max-width: 767.98px) {
    .sf-table--stack tbody tr { transition: background .15s; }
    .sf-table--stack tbody tr:hover td,
    .sf-table--stack tr.sf-row-new td { background: transparent !important; }
    .sf-table--stack tr.sf-row-new { background: #FFF8EC; }
}
@media (max-width: 767.98px) and (hover: hover) {
    .sf-table--stack tbody tr:hover { background: #FFFBF4; }
    .sf-table--stack tbody tr.sf-subhead:hover { background: transparent; }
}

/* ---------------------------------------------------------- Nagłówki kart: tytuł + link w jednej linii */
@media (max-width: 575.98px) {
    .card-header.d-flex { flex-wrap: wrap; gap: .4rem .75rem; }
    .card-header.d-flex > h2, .card-header.d-flex > h3 { flex: 1 1 auto; min-width: 0; }
    .card-header.d-flex > .ms-auto { white-space: nowrap; }
    .card-header.d-flex > small.ms-2 { margin-left: 0 !important; flex-basis: 100%; }

    /* Zakładki webinaru: siatka 2×2 zamiast uciętego paska */
    .sf-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; width: 100%; border-radius: 20px; overflow: visible; }
    .sf-tabs .nav-link { text-align: center; padding: .5rem .5rem; }
}

/* ---------------------------------------------------------- Karty z tabel: wyrównanie etykieta ↔ wartość
   Siatka 2-kolumnowa: etykieta (lewa, wyśrodkowana pionowo), wartość (prawa). Nadpisuje wcześniejszy układ z float. */
@media (max-width: 991.98px) {
    .sf-table--stack-lg tr { display: flex; flex-direction: column; }
    .sf-table--stack-lg td[data-main] { order: -1; }
    .sf-table--stack-lg td[data-actions] { order: 99; }
    .sf-table--stack-lg td[data-label] {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem;
        align-items: center; overflow: visible; min-height: 30px;
    }
    .sf-table--stack-lg td[data-label]::before { float: none; margin: 0; grid-column: 1; grid-row: 1 / span 4; align-self: center; }
    .sf-table--stack-lg td[data-label] > * { grid-column: 2; justify-self: end; }
}
@media (max-width: 767.98px) {
    .sf-table--stack tr { display: flex; flex-direction: column; }
    .sf-table--stack tr.sf-subhead { display: block; }
    .sf-table--stack td[data-main] { order: -1; }
    .sf-table--stack td[data-actions] { order: 99; }
    .sf-table--stack td[data-label] {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem;
        align-items: center; overflow: visible; min-height: 30px;
    }
    .sf-table--stack td[data-label]::before { float: none; margin: 0; grid-column: 1; grid-row: 1 / span 4; align-self: center; }
    .sf-table--stack td[data-label] > * { grid-column: 2; justify-self: end; }
    .sf-table--stack td[data-label] > .form-control { width: 100% !important; }
    .sf-table--stack td[data-main] + td[data-label], .sf-table--stack td[data-label]:first-of-type { margin-top: .15rem; }
}
@media (max-width: 991.98px) {
    .sf-table--stack-lg td[data-main] > .d-flex { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
    .sf-table--stack td[data-main] > .d-flex { justify-content: flex-start; }
}