/*
 * Тема адмінки лендінгу MIM Europe Lab — /admin.
 *
 * ФАЙЛ СКОПІЙОВАНО З ПОРТАЛУ (mim-europe-portal, resources/css/filament/
 * mim-panel.css) І АДАПТОВАНО: щоб адмінка лендінгу виглядала так само, як
 * адмінка LMS. Змінено лише шляхи до шрифтів (/assets/fonts/ замість
 * /fonts/inter/) і цю шапку. Правки, що стосуються вигляду, варто носити
 * між двома репо синхронно — інакше два продукти розійдуться візуально.
 * ============================================================================
 *
 * ЧОМУ ЦЕ ЗВИЧАЙНИЙ CSS, А НЕ `php artisan make:filament-theme`.
 *
 * Штатна тема Filament 4 починається з `@import 'tailwindcss' source(none)`
 * (vendor/filament/filament/resources/css/theme.css) — це синтаксис Tailwind 4.
 * У застосунку Tailwind 3.4.1 з `@tailwind base/components/utilities` і JS-конфігом,
 * а перехід на Tailwind 4 свідомо винесений із цього етапу: він переписує всі
 * ~40 руко-верстаних Vue-поверхонь за півтора місяця до пілота 05.09.
 * Двох версій пакета `tailwindcss` в одному node_modules теж не буває.
 *
 * Плюс `->viteTheme()` тему не ДОДАЄ, а ЗАМІНЮЄ: HasTheme::getTheme() при
 * заповненому viteTheme більше не викликає getDefaultTheme(). Тобто підсунути
 * туди файл без базового CSS Filament означало б лишити панель зовсім без стилів.
 *
 * Тому шар АДИТИВНИЙ: FilamentAsset::register() підключає цей файл ПОВЕРХ
 * штатної теми (App\Providers\FilamentThemeProvider). Наслідки, які треба знати:
 *
 *   1. Файл КОПІЮЄТЬСЯ як є (`php artisan filament:assets`), його не обробляє
 *      ні Tailwind, ні PostCSS. Тому тут заборонені `@apply`, `@tailwind`,
 *      `@screen`, вкладеність і будь-який синтаксис, що вимагає збірки —
 *      вони поїхали б у браузер дослівно. За цим стежить MimPanelThemeTest.
 *   2. Кольори беремо ЛИШЕ через `var(--primary-*)`, які Filament друкує в
 *      рантаймі з палітри панелі (AdminPanelProvider / TeachPanelProvider).
 *      Хардкод бренд-hex тут означав би друге джерело істини, і контраст,
 *      який міряє FilamentPaletteTest, перестав би щось гарантувати.
 *   3. Специфічність: наш файл підключається після штатного, тому для
 *      переозначень достатньо однакової ваги селектора. `!important` —
 *      тільки там, де інакше не виходить, і з поясненням.
 *
 * Коли з'явиться привід перейти на Tailwind 4 (після пілота), цей файл
 * переїде в справжню тему майже без змін: він написаний на публічних
 * `fi-*`-класах і на змінних Filament, а не на утилітарних класах.
 */

/* ───────────────────────────────────────────────────────────────────────────
 * 1. Шрифт
 *
 * Inter уже самохоститься для учасницької частини (resources/css/app.css), але
 * панель не вантажить app.css, тому @font-face треба оголосити й тут. Файли ТІ
 * САМІ — отже браузер бере їх із кешу, а не тягне вдруге.
 *
 * `--font-family` — документований хук Filament: index.css підставляє його в
 * `--font-sans`. До цього панель їхала системним стеком, тобто український
 * текст в адмінці й у плеєрі виглядав різними шрифтами.
 *
 * ПЕРЕТИН З FILAMENT 5, і він СВІДОМИЙ. З v5 Filament везе власний Inter під
 * іменем `Inter Variable`, і кирилицю той набір теж покриває (перевірено в
 * браузері: 11 оголошених гарнітур — 4 наші `Inter` і 7 `Inter Variable`).
 * Тобто ці @font-face уже не «полагодження відсутнього шрифту». Лишаємо їх
 * тому, що панель і плеєр мусять брати БАЙТ-ІДЕНТИЧНІ файли: інакше та сама
 * українська літера має два різні джерела, а `MimPanelThemeTest` перевіряє
 * саме збіг із app.css. Ціна нульова — це ті самі чотири файли з кешу.
 * ─────────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-cyrillic-wght.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-cyrillic-ext-wght.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-wght.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-wght.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304-0308, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --font-family: 'Inter';
}

/* ───────────────────────────────────────────────────────────────────────────
 * 2. Цифри
 *
 * Учасників, хвилин, балів і дедлайнів у таблицях багато, і при пропорційних
 * цифрах колонки «пливуть» — око не може порівняти два числа вертикально.
 * Inter має `tnum`, тому вирівнюємо табличною шириною, а не моношрифтом:
 * моно вибило б цифри з брендового шрифту (та сама причина, що в §9 контракту).
 * ─────────────────────────────────────────────────────────────────────────── */

.fi-ta-cell,
.fi-ta-text,
.fi-badge,
.fi-in-text {
    font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 3. Ідентичність панелі
 *
 * /admin — синій МІМ, /teach — бурштин. Це НЕ декор: фасилітатор 05–06.09
 * тримає відкритими обидві панелі, і ціна помилки «я думав, це пульт» —
 * дія, виконана в бойовій адмінці посеред заняття. Колір-єдиний-канал ненадійний
 * (проєктор, CVD ~8% чоловіків), тому маркуємо ще й формою — суцільною смугою
 * зверху, яку видно навіть у чорно-білому.
 *
 * body несе клас fi-panel-admin / fi-panel-teach — перевірено на відданій
 * сторінці, це і є штатний хук для панель-специфічних правил.
 * ─────────────────────────────────────────────────────────────────────────── */

.fi-body::before {
    content: '';
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    height: 3px;
    background-color: var(--primary-600);
    pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 4. Екран входу
 *
 * Перше, що бачить запрошений учасник. Композиція взята з реального порталу
 * МІМ (study.mim.kyiv.ua): брендовий блок + біла карта форми. Тут це зроблено
 * стримано — карта з реальною висотою, брендова смуга над нею і заголовок
 * брендовим кольором, без спроби зімітувати чужий лockup.
 * ─────────────────────────────────────────────────────────────────────────── */

.fi-simple-layout {
    background-image: radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--primary-600) 10%, transparent), transparent 60%);
}

.fi-simple-main {
    border-radius: 0.75rem;
    border-block-start: 3px solid var(--primary-600);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.04),
        0 12px 32px -8px rgb(0 0 0 / 0.12);
}

.fi-simple-header-heading {
    color: var(--primary-700);
    letter-spacing: -0.01em;
}

/*
 * Темна тема панелі зараз не активна (перевірено в браузері: на html висить
 * лише клас `fi`, перемикача немає). Але правило нижче стоїть НЕ про всяк
 * випадок, а тому що ціна його відсутності асиметрична: --primary-700 це
 * #003e79, і на темній карті він став би практично невидимим заголовком —
 * причому виявилось би це не в тесті, а в очах людини, яка вмикає темний режим.
 * --primary-400 (#4c85c2) на типовій темній карті Filament дає ~4.6:1.
 */
.dark .fi-simple-header-heading {
    color: var(--primary-400);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 5. Фокус
 *
 * §9 контракту: «ніколи ring без ring-offset». Без відступу обідок злипається
 * з елементом і на світлому фоні читається як просто товщий бордер — тобто
 * навігація з клавіатури перестає бути видимою. Стосується всіх, хто заповнює
 * довгі форми авторингу, і це єдиний спосіб працювати без мишки.
 * ─────────────────────────────────────────────────────────────────────────── */

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-input:focus-visible,
.fi-select-input:focus-visible,
.fi-checkbox-input:focus-visible,
.fi-link:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 6. Щільність і ритм
 *
 * Форма когорти — це 11 полів, а форма симуляції довша. Штатні відступи
 * Filament розраховані на CRUD із 3–4 полями, тому довгі форми зливаються в
 * одну масу. Трохи повітря між секціями робить структуру видимою без жодної
 * зміни розмітки.
 * ─────────────────────────────────────────────────────────────────────────── */

.fi-section-header-heading {
    letter-spacing: -0.005em;
}

.fi-fo-field-label-content {
    font-weight: 500;
}

/* Хелпер під полем — саме там живуть пояснення «звідки це число» і «що
   побачить учасник». Робимо його читабельним, а не сірим шумом. */
.fi-fo-field-helper-text {
    line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 7. Порожні стани
 *
 * §9: у порожньому стані обов'язковий другий рядок «що робити далі». Тут —
 * лише типографіка, щоб цей другий рядок не виглядав як службова примітка.
 * ─────────────────────────────────────────────────────────────────────────── */

.fi-empty-state-description {
    max-width: 42ch;
    margin-inline: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 8. Зменшений рух
 *
 * Учасницька частина вже поважає prefers-reduced-motion глобально; панель має
 * власний CSS, тому правило потрібне й тут. Це не косметика: серед власників
 * бізнесу 35–50 вестибулярна чутливість зустрічається частіше, ніж прийнято
 * думати, а адмінка — це довга робота, не десять секунд.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Індикатор завантаження — виняток: якщо його спинити, зникає єдиний
       сигнал «система працює», і людина тисне кнопку вдруге. Лишаємо
       обертання, але помітно повільніше. */
    .fi-loading-indicator {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 9. Друк
 *
 * Присутність і черга робіт іноді потрібні на паперi в залі, де Wi-Fi KPT
 * непередбачуваний. Прибираємо оболонку, лишаємо зміст.
 * ─────────────────────────────────────────────────────────────────────────── */

@media print {
    .fi-topbar,
    .fi-sidebar,
    .fi-ta-actions,
    .fi-ac,
    .fi-body::before {
        display: none !important;
    }

    .fi-main {
        padding: 0 !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 10. Матриця доступів (Access → RoleMatrix)
 *
 * Власні класи, а не утиліти Tailwind: цей файл КОПІЮЄТЬСЯ в public як є,
 * збірки фронту в хабі немає взагалі (у Dockerfile немає Node), тож
 * довільних значень на кшталт `w-[22rem]` просто не існувало б у стилях —
 * клас у розмітці був би, а правила до нього ні.
 *
 * Таблиця широка за побудовою: колонок стільки, скільки в школі ролей, а
 * рядків — скільки в системі дозволів. Тому перша колонка липка (інакше на
 * десятому рядку не видно, що саме вмикаєш), а прокрутка живе всередині
 * таблиці, а не в сторінці.
 *
 * D1-05: цей другий пункт довго був лише наміром, не поведінкою. `overflow-x:
 * auto` саме по собі змушує браузер порахувати `overflow-y` як `auto` теж
 * (стандартна пара CSS, не наша примха), але без обмеження висоти контейнер
 * просто росте під контент — усередині нічого не переповнюється, і скролить
 * сторінка, а не таблиця. `position: sticky` у sticky-шапки в такому контейнері
 * тоді чіпляється до контейнера, який сам ніколи не скролиться, тобто не
 * «липне» ВЗАГАЛІ (перевірено окремим репродюсером у браузері до правки).
 * `max-height` — те обмеження, якого бракувало.
 * ─────────────────────────────────────────────────────────────────────────── */

.hub-matrix-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border-radius: 0.75rem;
    background: var(--fi-color-white, #fff);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.hub-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.hub-matrix th,
.hub-matrix td {
    padding: 0.5rem 0.75rem;
    text-align: center;
    vertical-align: middle;
}

.hub-matrix thead th {
    position: sticky;
    top: 0;
    /* z-index: 2 — вище за звичайні (нелипкі) клітинки тіла, які фізично не
       позиціоновані і завжди пишуться під позиціонованими; вище потрібно лише
       для перетину з липкою першою колонкою (див. thead th:first-child нижче). */
    z-index: 2;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-weight: 500;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
    min-width: 9rem;
    /* Непрозорий фон — інакше рядки тіла, що скролять під липку шапку,
       просвічують крізь неї (D1-05, підтверджено наживо). */
    background: var(--fi-color-white, #fff);
}

/* Перша колонка: фіксована ширина і липка, щоб назва дозволу не тікала. */
.hub-matrix th:first-child,
.hub-matrix td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 24rem;
    min-width: 24rem;
    text-align: left;
    background: inherit;
}

/* Назва дозволу тепер <th scope="row"> для скрінрідера (D6-01), а не <td>.
   Візуально мала лишитись звичайною клітинкою — гасимо жирність, яку браузер
   інакше додав би сам. thead-у це не стосується: там жирність навмисна. */
.hub-matrix tbody th {
    font-weight: 400;
}

/* Кутова клітинка — перетин липкого рядка й липкої колонки. У обох клітинок
   з .hub-matrix th:first-child однаковий z-index: 1, тому без власного,
   вищого z-index кутова програє тай-брейк «останній у DOM виграє» рядку тіла,
   що проскролює під шапку (тіло йде в розмітці після thead) — і "Дозвіл"
   частково просвічує чужим текстом. Так само власний background обов'язковий:
   .hub-matrix th:first-child задає background: inherit з ВИЩОЮ специфічністю,
   ніж .hub-matrix thead th вище, тобто без цього рядка колір з того правила
   до кутової клітинки не доходить. Обидва ефекти відтворені й перевірені
   окремим репродюсером у браузері до правки. */
.hub-matrix thead th:first-child {
    z-index: 3;
    background: var(--fi-color-white, #fff);
}

.hub-matrix tbody tr {
    background: var(--fi-color-white, #fff);
    border-bottom: 1px solid rgb(0 0 0 / 0.05);
}

/* Заголовок модуля — перепочинок для ока між блоками дозволів. */
.hub-matrix tr.hub-matrix-module,
.hub-matrix tr.hub-matrix-module td {
    background: rgb(0 0 0 / 0.035);
}

.hub-matrix tr.hub-matrix-module td {
    border-top: 2px solid rgb(0 0 0 / 0.08);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.55);
}

.hub-matrix tr.hub-matrix-group td {
    padding-top: 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(0 0 0 / 0.45);
}

.hub-matrix-permission {
    display: block;
    color: rgb(0 0 0 / 0.85);
}

.hub-matrix-key {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: rgb(0 0 0 / 0.4);
}

.hub-matrix-sensitive {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.hub-matrix-unrestricted {
    color: rgb(0 0 0 / 0.35);
    font-size: 0.8125rem;
}

.hub-matrix-role-key {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgb(0 0 0 / 0.4);
}

/* Друга (нижня) точка виклику тієї самої дії «Зберегти» — щоб не гортати
   довгу таблицю нагору заради кнопки (D1-05, role-matrix.blade.php). */
.hub-matrix-footer-actions {
    margin-top: 1rem;
}

.dark .hub-matrix-scroll,
.dark .hub-matrix tbody tr {
    background: var(--fi-color-gray-900, #111827);
}

/* Липка шапка отримала непрозорий фон у світлій темі (розділ вище) — темній
   темі потрібен той самий фон, інакше рядки тіла просвічують крізь неї так
   само, як просвічували в світлій до фікса. Ця пара селекторів специфічна й
   для звичайних thead-клітинок (0,2,2), і для кутової (0,3,2) — у обох
   випадках специфічніша за background: inherit з .hub-matrix th:first-child
   (0,2,1), тому окремого дубля для кутової тут, на відміну від світлої теми,
   не знадобилося; лишаємо явним для симетрії з нею. */
.dark .hub-matrix thead th,
.dark .hub-matrix thead th:first-child {
    background: var(--fi-color-gray-900, #111827);
}

.dark .hub-matrix tr.hub-matrix-module,
.dark .hub-matrix tr.hub-matrix-module td {
    background: rgb(255 255 255 / 0.05);
}

.dark .hub-matrix tr.hub-matrix-module td,
.dark .hub-matrix tr.hub-matrix-group td,
.dark .hub-matrix-key,
.dark .hub-matrix-role-key,
.dark .hub-matrix-unrestricted {
    color: rgb(255 255 255 / 0.45);
}

.dark .hub-matrix-permission {
    color: rgb(255 255 255 / 0.9);
}

.dark .hub-matrix thead th,
.dark .hub-matrix tbody tr {
    border-color: rgb(255 255 255 / 0.08);
}

.dark .hub-matrix-sensitive {
    background: rgb(251 191 36 / 0.12);
    color: #fbbf24;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 10a. Матриця доступів — вузькі екрани (D6-02)
 *
 * 24rem (384px) сам по собі ширший за viewport телефону (375–414px): липка
 * колонка займала б увесь екран і не лишала б місця навіть на натяк на першу
 * роль, тобто "липкість" переставала щось давати — колонку однаково довелось
 * би гортати вбік, щоб побачити хоч одну галочку. На планшетній межі 768px
 * звужуємо до ширини, що вистачає на 2–3 слова назви дозволу; перенос рядків
 * — типова поведінка table-клітинки, тут лише прибираємо сумнів явно.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hub-matrix th:first-child,
    .hub-matrix td:first-child {
        width: 12rem;
        min-width: 12rem;
        white-space: normal;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 10b. Картка інтеграції (Integrations → список конекторів)
 *
 * Раніше бордер жив інлайн-стилем у blade (`border:1px solid var(--gray-200)`)
 * — без варіанта для темної теми картка на темній сторінці лишалась зовсім
 * без контуру (D6-04). Темний колір беремо не довільно, а за контрактом,
 * яким сам Filament оформлює межі власних компонентів (наприклад fi-section:
 * `border-gray-200 dark:border-white/10`, vendor/filament/support/resources/
 * css/components/section.css) — той самий підхід, лише без Tailwind-класів,
 * яких у цьому файлі не буває (шапка файлу вище).
 * ─────────────────────────────────────────────────────────────────────────── */
.hub-integration-card {
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
}

.dark .hub-integration-card {
    border-color: rgb(255 255 255 / 0.1);
}

/* ──────────────────────────────────────────────────────────────────────────
   11. Згорнутий сайдбар не ловить клавіатурний фокус

   Filament ховає закритий сайдбар зсувом за край екрана, лишаючи його
   видимим для браузера. Послідовний Tab після цього йде по невидимих пунктах
   меню: фокус є, а показати його ніде (знахідка живого проходу 10 від
   11.09.2026). `visibility: hidden` прибирає піддерево з порядку табуляції,
   а затримка повертає його рівно тоді, коли панель поїхала назад, — інакше
   зникла б анімація закриття.

   Клас `fi-sidebar-open` Filament ставить і на десктопі (там панель відкрита
   завжди), тому правило не може випадково сховати навігацію.
   ────────────────────────────────────────────────────────────────────────── */
.fi-main-sidebar {
    transition-property: transform, visibility;
}

.fi-main-sidebar:not(.fi-sidebar-open) {
    visibility: hidden;
    transition-delay: 0s, 200ms;
}

.fi-main-sidebar.fi-sidebar-open {
    visibility: visible;
    transition-delay: 0s, 0s;
}

/* ──────────────────────────────────────────────────────────────────────────
   12. Крапка непрочитаної новини на дзвіночку

   Тут не можна писати утилітами Tailwind (`absolute right-1 h-2 w-2
   bg-danger-500`): у хабі тема копіюється в public без збірки, тому таких
   класів у зібраному CSS просто немає — вони мовчки нічого не роблять, і
   крапка виходить нульового розміру й прозора. Перевірено живим проходом
   12.09.2026: іконка малювалась, індикатор — ні.

   Колір беремо зі змінної теми, а не літералом: якщо школа колись змінить
   рампу небезпеки, крапка поїде разом з усім іншим.
   ────────────────────────────────────────────────────────────────────────── */
.mim-release-bell {
    position: relative;
}

.mim-release-bell-dot {
    position: absolute;
    inset-block-start: 0.3rem;
    inset-inline-end: 0.3rem;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 9999px;
    background-color: var(--danger-500);
}

/* ──────────────────────────────────────────────────────────────────────────
   13. Тижнева сітка розкладу

   Власна CSS-сітка, а не бібліотека-календар: сторонні скрипти в цю збірку не
   заїжджають (немає збірки взагалі), а утиліти Tailwind у blade мовчки не
   діють — та сама пастка, що з крапкою новин (§12). Тож класи тут, а розмітка
   в blade користується лише ними й компонентами Filament.

   Колонка дня фіксованої мінімальної ширини, а не частки: при семи днях на
   вузькому екрані частки перетворюють картку заняття на стовпчик із двох
   літер. Замість цього сітка прокручується вбік — як паперовий розклад на
   стіні, який теж не стискають до розміру аркуша.
   ────────────────────────────────────────────────────────────────────────── */
.mim-week {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 1fr);
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.mim-week-day {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.mim-week-day-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    background-color: var(--gray-100);
    color: var(--gray-700);
}

.mim-week-day-head.mim-week-today {
    background-color: var(--primary-600);
    color: #fff;
}

.mim-week-card {
    display: block;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-inline-start: 3px solid var(--primary-600);
    border-radius: 0.5rem;
    background-color: var(--gray-50);
    text-decoration: none;
    color: inherit;
}

.mim-week-card:hover {
    border-color: var(--primary-600);
}

.mim-week-card.mim-week-cancelled {
    border-inline-start-color: var(--danger-500);
    opacity: 0.7;
}

.mim-week-card-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Підпис «чий це пояс» (P5, ViewerTime::label()) — з'являється лише коли
   пояс глядача відрізняється від шкільного, тому завжди поруч із часом, а не
   окремим рядком: другий рядок для факту, що трапляється рідко, забирав би
   висоту картки в усіх, кому підпис не потрібен. */
.mim-week-card-zone {
    margin-inline-start: 0.3rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-500);
}

.mim-week-card-meta {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.mim-week-empty {
    padding: 0.5rem 0.6rem;
    border: 1px dashed var(--gray-200);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.dark .mim-week-day-head {
    background-color: var(--gray-800);
    color: var(--gray-200);
}

.dark .mim-week-card {
    border-color: var(--gray-700);
    background-color: var(--gray-900);
}

.dark .mim-week-empty {
    border-color: var(--gray-700);
    color: var(--gray-400);
}

/* ──────────────────────────────────────────────────────────────────────────
   §14. Панель Помічника

   Вікно розмови росте вгору від кнопки в куті. Без стелі висоти воно росте
   разом із розмовою, і після кількох питань кнопка-перемикач виїжджає за
   верх екрана: закрити панель стає нічим (знахідка живого проходу 12.09).
   Тому висота обмежена висотою вікна, а прокручується всередині список
   повідомлень, а не сама панель.

   Утиліти Tailwind у цій темі не діють (§12, §13) — тому власні класи.
   ────────────────────────────────────────────────────────────────────────── */
.mim-assistant {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 40;
    width: min(24rem, calc(100vw - 3rem));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    /* Панель ніколи не вища за екран: верх лишається під шапкою, а не за нею. */
    max-height: calc(100vh - 7rem);
}

.mim-assistant-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Кнопка не стискається, коли розмова довга: вона — єдиний вихід. */
    flex: 0 0 auto;
    order: 2;
}

.mim-assistant-window {
    order: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mim-assistant-disclaimer {
    font-size: 0.75rem;
    opacity: 0.75;
}

.mim-assistant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mim-assistant-log {
    min-height: 0;
    max-height: 22rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mim-assistant-role {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.75;
}

.mim-assistant-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.mim-assistant-error {
    color: var(--danger-600, #b91c1c);
    margin-top: 0.75rem;
}

.dark .mim-assistant-error {
    color: var(--danger-400, #f87171);
}

/* Картка підтвердження дії (пакет C3) — той самий мотив картки, що й §13
   (.mim-week-card): рамка + акцент зліва + скруглення, аби нові елементи
   читались як частина теми, а не як окремий стиль. */
.mim-assistant-proposal {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-inline-start: 3px solid var(--primary-600);
    border-radius: 0.5rem;
    background-color: var(--gray-50);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mim-assistant-proposal-diff {
    white-space: pre-line;
}

.mim-assistant-proposal-obstacles {
    margin: 0;
    padding-inline-start: 1.1rem;
    color: var(--danger-600, #b91c1c);
}

.mim-assistant-proposal-actions {
    display: flex;
    gap: 0.5rem;
}

.mim-assistant-proposal-note {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.mim-assistant-proposal-status {
    font-weight: 600;
}

.mim-assistant-proposal-status-failed {
    color: var(--danger-600, #b91c1c);
}

.mim-assistant-proposal-status-rejected,
.mim-assistant-proposal-status-expired {
    color: var(--gray-600);
}

.mim-assistant-proposal-link {
    color: var(--primary-600);
}

.dark .mim-assistant-proposal {
    border-color: var(--gray-700);
    background-color: var(--gray-900);
}

.dark .mim-assistant-proposal-obstacles {
    color: var(--danger-400, #f87171);
}

.dark .mim-assistant-proposal-note,
.dark .mim-assistant-proposal-status-rejected,
.dark .mim-assistant-proposal-status-expired {
    color: var(--gray-400);
}

.dark .mim-assistant-proposal-status-failed {
    color: var(--danger-400, #f87171);
}

.dark .mim-assistant-proposal-link {
    color: var(--primary-400);
}

/* ──────────────────────────────────────────────────────────────────────────
   §15. Мапа програми (Assurance of Learning)

   Справжня таблиця, не CSS-сітка (на відміну від §13): тут потрібен рядок,
   зафіксований зліва (ціль навчання — текст довший за одну колонку), і
   рядок заголовків, зафіксований згори (курс), одночасно з прокруткою вбік,
   коли курсів багато. Обидва — звичайний `position: sticky` на `<th>`
   усередині скрольованої обгортки; утиліти Tailwind тут так само не діють
   (§12, §13), тож знову власні класи.

   Колір клітинки росте від нейтрального (знайомить) до теплого (закріплює)
   і зеленого (вимірює) навмисно: лічильник покриття (A3 §3.3) читають оком
   по кольору, не лише по літерах у клітинці.
   ────────────────────────────────────────────────────────────────────────── */
.mim-map-scroll {
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.mim-map-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.mim-map-corner,
.mim-map-course-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    padding: 0.5rem 0.6rem;
    background-color: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: start;
    border-block-end: 1px solid var(--gray-200);
    white-space: nowrap;
}

.mim-map-corner {
    inset-inline-start: 0;
    z-index: 3;
    min-inline-size: 16rem;
}

.mim-map-course-head {
    min-inline-size: 9rem;
}

.mim-map-goal-head {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-inline-size: 16rem;
    max-inline-size: 22rem;
    padding: 0.6rem;
    background-color: var(--gray-50);
    border-block-end: 1px solid var(--gray-200);
    vertical-align: top;
    text-align: start;
    font-weight: 400;
}

.mim-map-goal-code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mim-map-goal-name {
    margin-block-start: 0.15rem;
}

.mim-map-objectives {
    margin: 0.35rem 0 0;
    padding-inline-start: 1.1rem;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.mim-map-cell {
    padding: 0.4rem;
    text-align: center;
    border-block-end: 1px solid var(--gray-200);
    vertical-align: middle;
}

.mim-map-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.78rem;
    border: 1px dashed var(--gray-300);
    color: var(--gray-500);
    background: none;
    cursor: default;
}

button.mim-map-role {
    cursor: pointer;
}

button.mim-map-role:hover {
    border-color: var(--primary-600);
}

.mim-map-role-introduces {
    border-style: solid;
    border-color: var(--gray-300);
    background-color: var(--gray-100);
    color: var(--gray-700);
}

.mim-map-role-reinforces {
    border-style: solid;
    border-color: var(--warning-400, #fbbf24);
    background-color: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
}

.mim-map-role-assesses {
    border-style: solid;
    border-color: var(--success-400, #4ade80);
    background-color: var(--success-50, #f0fdf4);
    color: var(--success-700, #15803d);
}

.mim-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-block-start: 0.5rem;
}

.mim-map-gaps {
    color: var(--danger-600, #b91c1c);
}

.dark .mim-map-corner,
.dark .mim-map-course-head {
    background-color: var(--gray-800);
    color: var(--gray-200);
    border-color: var(--gray-700);
}

.dark .mim-map-goal-head {
    background-color: var(--gray-900);
    border-color: var(--gray-700);
}

.dark .mim-map-objectives,
.dark .mim-map-legend {
    color: var(--gray-400);
}

.dark .mim-map-cell {
    border-color: var(--gray-700);
}

.dark .mim-map-role {
    border-color: var(--gray-600);
    color: var(--gray-400);
}

.dark .mim-map-role-introduces {
    background-color: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

.dark .mim-map-gaps {
    color: var(--danger-400, #f87171);
}

/* ──────────────────────────────────────────────────────────────────────────
   §16. Звіт акредитації (Assurance of Learning, L5)

   Звичайна таблиця (як §15, не CSS-сітка §13): рядків стільки, скільки пар
   критерій+вимірювання, і жодна колонка не потребує липкого заголовка —
   звіт читають зверху вниз ціль за ціллю, а не зіставляють колонки, як у
   мапі програми. Утиліти Tailwind тут так само не діють (§12/§13/§15).
   ────────────────────────────────────────────────────────────────────────── */
.mim-report-goal-code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-inline-end: 0.35rem;
}

.mim-report-line {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.mim-report-gap {
    color: var(--danger-600, #b91c1c);
}

.mim-report-empty-cycle {
    margin: 0;
    font-weight: 500;
}

.mim-report-trend {
    font-weight: 600;
}

.mim-report-trend-up {
    color: var(--success-600, #16a34a);
}

.mim-report-trend-down {
    color: var(--danger-600, #b91c1c);
}

.mim-report-scroll {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-block-start: 0.75rem;
}

.mim-report-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.85rem;
}

.mim-report-table th {
    text-align: start;
    padding: 0.5rem 0.6rem;
    background-color: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    border-block-end: 1px solid var(--gray-200);
}

.mim-report-table td {
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    border-block-end: 1px solid var(--gray-200);
}

.mim-report-objective-code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mim-report-closures {
    margin: 0;
    padding-inline-start: 1.1rem;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.mim-report-add-closure {
    display: inline-block;
    margin-block-start: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-600);
    text-decoration: none;
}

.mim-report-add-closure:hover {
    text-decoration: underline;
}

.dark .mim-report-table th {
    background-color: var(--gray-800);
    color: var(--gray-200);
    border-color: var(--gray-700);
}

.dark .mim-report-table td {
    border-color: var(--gray-700);
}

.dark .mim-report-closures {
    color: var(--gray-400);
}

.dark .mim-report-gap {
    color: var(--danger-400, #f87171);
}

.dark .mim-report-trend-up {
    color: var(--success-400, #4ade80);
}

.dark .mim-report-trend-down {
    color: var(--danger-400, #f87171);
}

.dark .mim-report-add-closure {
    color: var(--primary-400);
}