/* ============================================================================
 * responsive.css — мобільний шар nnipo (сторінка /user, слухач-лікар).
 *
 * Призначення: адаптив сторінки `/user` (userType=regular) до 360px, НЕ чіпаючи
 * десктоп-корпоративний вигляд. Десктоп-стилі лишаються в theme.css / custom.css /
 * inline page-<style>; тут — лише мобільні @media-override.
 *
 * Порядок завантаження: цей файл підключено в layout/index.php ПІСЛЯ
 * renderSection('pageStyles') і після theme.css, тож правила тієї ж специфічності
 * перебивають і inline page-стилі, і theme.css за порядком джерела. Для дуже
 * специфічних theme.css-селекторів (з #id) використовуємо !important точково.
 *
 * Брейкпоінти (узгоджені з наявними в проєкті):
 *   ≤840px — шар layout: профіль-aside стає повношириним блоком зверху.
 *   ≤640px — шар «телефон»: модал запису → картки, косметика контенту.
 * ============================================================================ */


/* ---------------------------------------------------------------------------
 * 1. Layout aside — повношириним блоком зверху на планшеті/телефоні.
 *
 * Шар layout (`.app-page-body`) на ≤840px уже перемикається на flex-direction:
 * column (layout/index.php), але голий UIkit-клас `fwk-width-1-4` лишає aside на
 * width:25% → вузька колонка ~94px. Селектор `.app-page-body > aside` (специфічність
 * вища за `.fwk-width-1-4`) повертає повну ширину. Aside — перший у DOM, тож при
 * column-flow стає зверху над контентом. Sticky-пін вимкнено окремо через
 * `fwk-sticky="...; media: @m"` у profile_listener_aside.php.
 * --------------------------------------------------------------------------- */
@media (max-width: 840px) {
    .app-page-body > aside {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5rem;
    }
    /* Вирівнювання: головна зона має той самий бічний відступ, що й aside
       (обидва сидять на паддінгу knmu-content-body). Знімаємо ВЕСЬ додатковий
       горизонтальний паддінг контентної колонки / секції / контейнера, щоб краї
       головної зони й сайдбару збігалися. */
    .app-page-body > .fwk-width-expand,
    .app-page-body .fwk-section,
    .app-page-body .fwk-container {
        padding-left: 0;
        padding-right: 0;
    }
    /* Головне джерело зайвого відступу: вкладений <main class="listener-cabinet-main--cycles">
       ловить `@media(max-width:1199px){ main{ padding:20px } }` (custom.css:71) —
       а сайдбар такого <main> не має. Знімаємо, щоб краї збігалися з aside. */
    .app-page-body .listener-cabinet-main--cycles {
        padding: 0;
    }
}


/* ---------------------------------------------------------------------------
 * 2. Модал «Записатися на цикл» — таблиця циклів → картки.
 *
 * На десктопі таблиця `lcm-cycles-table` (theme.css:5582-5750) — `table-layout:fixed`
 * з colgroup-ширинами, `min-width:148px` на колонці «Дія», `white-space:nowrap` у
 * комірках; тіло модалу `overflow-x:hidden`. На 360px це обрізає таблицю й ховає
 * кнопку «Подати заявку». На ≤640px перетворюємо таблицю на стек карток: кожен
 * рядок = картка з назвою-заголовком, мета-полями «підпис: значення» (підписи з
 * `data-label` у row-builder cycles_modal.php) і кнопкою дії на всю ширину.
 * Селектори дзеркалять theme.css (з #methodicalCyclesTable) + !important, щоб
 * перебити фіксовану табличну розкладку. Шапку й per-column фільтр-рядок ховаємо —
 * фільтр спеціальності над таблицею лишається. JS/клікабельність рядків не чіпаємо.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* таблиця → блок; ховаємо шапку + per-column фільтр-рядок */
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table {
        display: block !important;
        table-layout: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table thead {
        display: none !important;
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table tbody {
        display: block;
    }

    /* рядок = картка */
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table tbody tr {
        display: block;
        margin: 0 12px 12px;
        padding: 12px 14px;
        border: 1px solid var(--knmu-gray-border, #e5e5e5);
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table tbody tr:nth-child(even) {
        background: #fff; /* знімаємо striped-фон у картках */
    }
    /* верхній відступ для першої картки (щоб не липла до фільтр-бару) */
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table tbody tr:first-child {
        margin-top: 12px;
    }
    /* лічильник «Знайдено: N» зайвий на телефоні */
    .nnipo-cycles-picker-modal .lcm-found-count {
        display: none !important;
    }
    /* лейбл «Спеціальність:» зайвий — у комбобоксі вже є плейсхолдер */
    .nnipo-cycles-picker-modal .lcm-spec-label {
        display: none !important;
    }

    /* комірка = рядок «підпис: значення» */
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 4px 0 !important;
        border: none !important;
        text-align: left !important;
        white-space: normal !important;
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        color: var(--knmu-gray-text, #888);
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td[data-label] > * {
        text-align: right;
    }

    /* назва циклу = заголовок картки (без підпису, на всю ширину, з переносом) */
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td.voucher-td-cycle {
        display: block !important;
        padding: 0 0 8px !important;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--knmu-gray-border, #eee) !important;
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table .voucher-td-cycle .mc-cycle-num-title-row,
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table .voucher-td-cycle .mc-cycle-num-title-line,
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table .voucher-cabinet-dept-line {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
    }

    /* колонка «Дія»: зняти min-width:148px, кнопка на всю ширину */
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td:last-child,
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td.mc-cycle-row__noopen-target {
        display: block !important;
        min-width: 0 !important;
        padding: 10px 0 0 !important;
        margin-top: 6px;
        border-top: 1px solid var(--knmu-gray-border, #eee) !important;
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td:last-child::before {
        content: none !important;
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td.mc-cycle-row__noopen-target .fwk-button,
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td.mc-cycle-row__noopen-target a,
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td.mc-cycle-row__noopen-target button {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* empty-state рядок (colspan) — просто текстовий блок */
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td[colspan] {
        display: block !important;
        text-align: center !important;
    }
    .nnipo-cycles-picker-modal #methodicalCyclesTable .lcm-cycles-table td[colspan]::before {
        content: none !important;
    }
}


/* ---------------------------------------------------------------------------
 * 3. Шапка в один рядок на телефоні + акаунт-блок в offcanvas.
 *
 * Десктоп-меню `fwk-visible@m` (сховане <960), burger `fwk-hidden@m` (видимий
 * <960). Inline-стиль layout на ≤640px стекає шапку вертикально
 * (`.app-header-background .fwk-flex-between{flex-direction:column;gap:15px}`) →
 * зависока. Повертаємо рядок: лого зліва, юзер-шеврон + burger справа (за
 * `fwk-flex-between`/space-between). Селектори тієї ж або вищої специфічності, що
 * й layout-правила, і йдуть пізніше (responsive.css після pageStyles) → перебивають.
 * Offcanvas наповнено акаунт-діями (layout/index.php) — тут лише відбивка від нав.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .app-header-background .knmu-content-header {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
    }
    .app-header-background .knmu-content-header .logo-block {
        width: auto;
        justify-content: flex-start;
    }
    .app-header-background .knmu-content-header .logo-block h2 {
        font-size: 16px !important;
    }
    /* правий кластер (burger / auth-links) — inline, не повноширинна колонка */
    .app-header-background .knmu-content-header > div:last-child {
        width: auto;
        flex-direction: row;
        gap: 0;
    }
    .app-header-background .knmu-content-header > div:last-child a {
        width: auto;
        text-align: center;
    }
    /* offcanvas: акаунт-блок відокремлено від нав-пунктів */
    .knmu-offcanvas-account {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    /* Ім'я+email слухача видимі й на телефоні (а не лише ≥1200, як fwk-visible@l),
       з обрізанням, щоб не переповнювати вузьку шапку. */
    .knmu-user-info .app-userinfo-text {
        display: block;
        max-width: 48vw;
        margin-right: 8px;
    }
    .knmu-user-info .app-userinfo-text p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
}


/* ---------------------------------------------------------------------------
 * 4. Косметика контенту слухача (заголовок, кнопки, картки заявок).
 *    (наповнюється за результатом браузерної перевірки)
 * --------------------------------------------------------------------------- */