/*
 * app.css — власні правила e-uzd поверх шаблону Preclinic.
 *
 * Порядок підключення: bootstrap → style.css (шаблон) → legacy.css (сумісність) → app.css
 * Тут лише те, що стосується саме нашого застосунку. Вендорні файли не редагуємо.
 */

/* ------------------------------------------------------------------
   1. Легасі-картки під тему шаблону

   legacy.css переносить .card-box зі старого шаблону з жорстким
   background-color:#fff — у темній темі це давало білі плями.
   Прив'язуємо до тих самих змінних, що використовує .card нового шаблону.
   ------------------------------------------------------------------ */
.card-box {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    color: inherit;
}

/* Заголовки секцій усередині легасі-карток */
.card-box .card-title {
    color: inherit;
}

/* ------------------------------------------------------------------
   0. Типографіка

   Як на e-uzd.com: заголовки — Nunito, решта інтерфейсу — Inter.
   Таблиці, форми й тіло тексту свідомо лишаються на Inter — він
   вужчий і краще тримає щільні списки пацієнтів та форми протоколів.
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.card-title,
.page-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* --- Єдина шкала заголовків карток ---------------------------------
   Успадкована розмітка позначає заголовки одного рівня різними тегами:
   на дашборді «Візити на сьогодні» це h5 (18px), «Останні обстеження»
   h4 (20px), а привітання h2 (28px). Візуально це читалось як різнобій.

   Шаблон має власну конвенцію — <h5 class="fw-bold"> у .card-header.
   Приводимо до неї все, що має .card-title, не чіпаючи розмітку. */
.card-title,
.card-header > h2,
.card-header > h3,
.card-header > h4,
.card-header > h5,
.card-header > h6 {
    font-size: 1.125rem;   /* 18px — як h5 у шаблоні */
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0;
}

/* Посилання «Показати всі» поруч із заголовком картки */
.patient-views,
.card-header .float-end a,
a.patient-views {
    font-size: 0.8125rem;  /* 13px */
    font-weight: 600;
}

/* Шапки таблиць — один вигляд на всіх списках */
.table > thead > tr > th {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gray-600, #6B7280);
}

/* Тіло таблиць */
.table > tbody > tr > td {
    font-size: 0.875rem;   /* 14px */
}

/* У комірках таблиць старий шаблон використовував <h2> як звичайний
   текст (див. legacy.css) — там Nunito недоречний. */
.table td h2,
.table th h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: normal;
}

/* ------------------------------------------------------------------
   0a. Alpine: x-cloak

   Правила [x-cloak] у проєкті не було, хоча 7 елементів на нього
   покладаються. Alpine вантажиться з CDN через defer, тому до його
   ініціалізації всі вони показувались — на перегляді обстеження було
   видно одночасно бічну панель дій і ряд кнопок для режиму порівняння.
   ------------------------------------------------------------------ */
[x-cloak] {
    display: none !important;
}

/* ------------------------------------------------------------------
   1a. Лінії в таблицях

   Bootstrap задає коміркам лише `border-bottom-width`, а колір лишає
   на `border-color` таблиці. Наші таблиці мають клас `border-0`, який
   скидає `border` на <table> — і колір комірок падає до `currentColor`,
   тобто до кольору тексту. Через це роздільники рядків малювались
   майже чорними (#333448).

   Старий шаблон гасив межі комірок явно; новий розраховує на власну
   змінну — задаємо її, щоб лінії були світлі й слухались теми.
   ------------------------------------------------------------------ */
.table > :not(caption) > * > * {
    border-color: var(--border-color);
}

/* ------------------------------------------------------------------
   1b. Модальні вікна — один вигляд на весь застосунок

   Модалки накопичились у 43 шаблонах із різною розміткою: половина
   без `modal-dialog-centered`, у шапок різні відступи й межі.
   Замість правки всіх файлів вирівнюємо стилями — центрування робить
   те саме, що клас `modal-dialog-centered`.
   ------------------------------------------------------------------ */
.modal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .modal .modal-dialog {
        min-height: calc(100% - 3.5rem);
    }
}

.modal .modal-content {
    width: 100%;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.16);
}

.modal .modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.modal .modal-header .modal-title,
.modal .modal-header h4,
.modal .modal-header h5 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0;
}

.modal .modal-body {
    padding: 20px;
}

.modal .modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    gap: 8px;
}

.modal .modal-footer > * {
    margin: 0;
}

/* Шапки без межі (напр. модалка AI-асистента) лишаємо як є */
.modal .modal-header.border-0 {
    border-bottom: 0;
}

/* ------------------------------------------------------------------
   1c. Картки швидких дій на дашборді
   ------------------------------------------------------------------ */
.quick-action {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.quick-action:hover {
    color: inherit;
    border-color: var(--primary, #2E37A4);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
    transform: translateY(-1px);
}

.quick-action .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Кольорові SVG-іконки замість монохромних Tabler: на цих трьох
   картках потрібен контраст, бо це головні дії застосунку. */
.quick-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.quick-action-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .quick-action { transition: none; }
    .quick-action:hover { transform: none; }
}

/* ------------------------------------------------------------------
   2. Результат протоколу — завжди на світлому тлі

   Права колонка протоколу друкується в PDF, тому текст лишається
   чорним на білому незалежно від теми інтерфейсу.
   ------------------------------------------------------------------ */
#id_result {
    background-color: #ffffff;
    color: #000000;
}

/* ------------------------------------------------------------------
   3. Двоколонковий протокол на вузьких ноутбуках

   За аналітикою 1366×768 — найпоширеніший екран (30% переглядів),
   а ≤1536px разом дають ~54%. Права колонка з результатом стає
   надто вузькою, тому підтискаємо внутрішні відступи.
   ------------------------------------------------------------------ */
@media (max-width: 1536px) {
    .content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card-box {
        padding: 15px;
        margin-bottom: 20px;
    }

    /* Ліва колонка форми: підписи та поля щільніше */
    .input-block {
        margin-bottom: 14px;
    }
}

/* Sticky-колонка результату не має тягнутись на всю висоту рядка */
.col-md-6.sticky-top {
    align-self: flex-start;
}

/* ------------------------------------------------------------------
   2a. Панель дій на перегляді обстеження

   Найважчий екран застосунку (27,6% часу). Кнопки були внизу довгого
   документа — щоб надрукувати, доводилось прокрутити його весь.
   Панель тримається на екрані; жолоби, які раніше пустували, тепер
   зайняті.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .exam-actions {
        position: sticky;
        top: 1rem;
    }
}

.exam-actions .btn {
    text-align: center;
}

/* ------------------------------------------------------------------
   2b. Шапка картки пацієнта

   Факти в рядок замість окремої картки збоку: ті самі дані займали
   цілу колонку й дублювали заголовок сторінки.
   ------------------------------------------------------------------ */
/* Блок фактів росте по вмісту, тому з flex-basis:auto він виштовхував
   кнопки дій на наступний рядок. Базу задаємо явно — факти переносяться
   всередині блоку, а дії лишаються праворуч. */
/* Декоративна фігура з шаблону. У ньому вона заповнює порожнє місце
   поруч із двома фактами; у нас фактів більше, тому показуємо її лише
   на дуже широких екранах і приглушено — інакше вона лізе на текст. */
.patient-header-decor {
    border-radius: inherit;
    pointer-events: none;
}

.patient-header-shape {
    opacity: 0.45;
    max-height: 100%;
    pointer-events: none;
}

.patient-header-info {
    flex: 1 1 280px;
    min-width: 0;
}

/* ------------------------------------------------------------------
   2f. Заголовки секцій статистики

   Було: порожня картка з центрованим заголовком, поверх якої лежала
   стрічка .ribbon — вона наїжджала на край і читалась як обрізаний
   ярлик, а сама картка не містила нічого, крім тексту.
   ------------------------------------------------------------------ */
.analytics-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.analytics-section-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 50rem;
    background-color: var(--primary, #2E37A4);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Кругла іконка в підсумкових картках статистики */
.analytics-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.35rem;
}

/* Заглушка замість графіка, коли даних ще немає */
.analytics-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--text-muted, #6B7280);
    font-size: 0.9rem;
}

/* ------------------------------------------------------------------
   2d-bis. Вибір тарифу та періоду на сторінці підписки
   Картка-перемикач: рамка показує стан, а не інлайн-стилі в шаблоні
   ------------------------------------------------------------------ */
.plan-option {
    cursor: pointer;
    border: 1px solid var(--border-color, #E5E7EB);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plan-option:hover {
    border-color: var(--primary, #2E37A4);
    box-shadow: 0 4px 14px rgba(46, 55, 164, 0.1);
}

.plan-option.is-selected {
    border-color: var(--primary, #2E37A4);
    box-shadow: inset 0 0 0 1px var(--primary, #2E37A4);
}

/* ------------------------------------------------------------------
   2d-ter. Вибір файлу
   Нативний контрол підписаний мовою браузера («Choose File»), тому
   ховаємо його й показуємо власну кнопку. Поведінка — file-picker.js
   ------------------------------------------------------------------ */
.file-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.file-picker-name {
    color: var(--text-muted, #6B7280);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 0;
}

.file-picker.has-file .file-picker-name {
    color: var(--text-color, #0B0D0E);
}

/* ------------------------------------------------------------------
   2d-quater. Липка панель збереження на довгих формах
   На телефоні форма профілю має ~2150px висоти, і кнопка «Зберегти»
   опинялася аж унизу: правка в першому полі коштувала два з половиною
   екрани прокрутки. На великих екранах кнопка лишається на місці.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .form-actions-sticky {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background-color: var(--bg-color, #fff);
        border-top: 1px solid var(--border-color, #E5E7EB);
        box-shadow: 0 -4px 14px rgba(11, 13, 14, 0.06);
    }

    .form-actions-sticky .btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   2d-decies. Стрічка активності
   На телефоні колонка дати (timeline-date, min-width 86px) з'їдала
   третину екрана й для більшості рядків лишалась порожньою — текст
   тиснувся у вузький стовпчик. Складаємо дату над записом.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .activity-feed > .d-flex {
        display: block !important;
    }

    .activity-feed .timeline-date {
        min-width: 0;
        margin-right: 0 !important;
        padding-top: 0 !important;
    }

    .activity-feed .border-start {
        margin-left: 0.25rem;
    }
}

/* Пояснювальний блок у консолі */
.console-hint {
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    border-left: 3px solid var(--primary, #2E37A4);
    background-color: var(--primary-transparent, #ECEDF7);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.console-hint li + li {
    margin-top: 0.4rem;
}

/* ------------------------------------------------------------------
   Службова консоль: список фільтрів у дропдауні
   ------------------------------------------------------------------ */
.console-search {
    flex: 1 1 320px;
    max-width: 520px;
}

.console-filter-list {
    display: flex;
    flex-direction: column;
}

.console-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.console-filter-item:hover {
    background-color: var(--gray-100, #F5F6F8);
    color: inherit;
}

.console-filter-item.is-active {
    background-color: var(--primary-transparent, #ECEDF7);
    color: var(--primary, #2E37A4);
    font-weight: 600;
}

/* Логотип клініки в налаштуваннях: превʼю поруч із вибором файлу */
.clinic-logo-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.clinic-logo-preview {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 10px;
    background-color: #fff;
}

.clinic-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.clinic-logo-row .file-picker {
    flex: 1 1 260px;
}

/* Таби активності на телефоні.
   nav-tabs-solid і nav-pills nav-justified при чотирьох пунктах
   розсипались у три ряди з іконками над текстом і бейджами під ним —
   разом близько 200px до першого запису. Робимо один ряд із
   горизонтальною прокруткою. */
@media (max-width: 767.98px) {
    #activityTabs,
    #historySubTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #activityTabs::-webkit-scrollbar,
    #historySubTabs::-webkit-scrollbar {
        display: none;
    }

    #activityTabs .nav-item,
    #historySubTabs .nav-item {
        flex: 0 0 auto;
    }

    #activityTabs .nav-link,
    #historySubTabs .nav-link {
        white-space: nowrap;
        font-size: 0.8125rem;
        padding: 0.45rem 0.7rem;
    }
}

/* ------------------------------------------------------------------
   2d-nonies. Панель інструментів списків (обстеження, пацієнти)
   Розмітка й вигляд — класами шаблону (.filter-dropdown/.filter-header/
   .filter-body/.filter-footer). Тут лише ширина поля пошуку.
   ------------------------------------------------------------------ */
.list-search {
    flex: 1 1 260px;
    max-width: 340px;
}

@media (max-width: 575.98px) {
    .list-search {
        max-width: none;
    }

    /* .dropdown-lg у шаблоні має min-width: 400px !important —
       на екрані 390px панель вилазила за край і сторінка їхала вбік */
    .filter-dropdown.dropdown-lg {
        min-width: 0 !important;
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
    }
}

/* ------------------------------------------------------------------
   2d-octies. Перегляд майбутнього протоколу в майстрі налаштування
   Раніше все це були інлайн-стилі всередині unicorn-шаблону
   ------------------------------------------------------------------ */
.setup-preview {
    background-color: #fff;
    color: #212529;
    border-radius: 6px;
    padding: 1.75rem;
}

.setup-preview-head {
    text-align: center;
    border-bottom: 2px solid var(--primary, #2E37A4);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}

.setup-preview-head h3 {
    color: var(--primary, #2E37A4);
    font-weight: 700;
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

.setup-preview-head p {
    color: #6B7280;
    font-size: 0.875rem;
}

.setup-preview-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #2E37A4) 0%, #1b2270 100%);
    color: #fff;
    font-size: 1.75rem;
}

.setup-preview-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    color: #333;
    margin-bottom: 1.25rem;
}

.setup-preview-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    background-color: #F5F6F8;
    border-radius: 8px;
}

.setup-preview-lines {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.setup-preview-lines span {
    display: block;
    height: 12px;
    border-radius: 4px;
    background-color: #E9ECEF;
}

.setup-preview-sign {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed #DEE2E6;
}

.setup-preview-sign-line {
    width: 150px;
    margin-top: 1.75rem;
    border-bottom: 1px solid #333;
}

/* ------------------------------------------------------------------
   2d-septies. Кнопка переходу до документа протоколу (лише телефон)
   Поведінка — assets/js/document-jump.js
   ------------------------------------------------------------------ */
.document-jump {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: 50rem;
    background-color: var(--primary, #2E37A4);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(11, 13, 14, 0.25);
}

.document-jump[hidden] {
    display: none;
}

.document-jump:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   2d-sexies. Підказка «зручніше з компʼютера» (лише телефон)
   ------------------------------------------------------------------ */
.desktop-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-left: 3px solid var(--primary, #2E37A4);
    border-radius: 8px;
    background-color: var(--primary-transparent, #ECEDF7);
}

.desktop-hint strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.9375rem;
}

.desktop-hint p {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted, #6B7280);
}

.desktop-hint-icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--primary, #2E37A4);
}

/* ------------------------------------------------------------------
   2d-quinquies. Вибір першого протоколу після налаштування профілю
   Плитка — це кнопка submit, тому скидаємо типові стилі <button>
   ------------------------------------------------------------------ */
.start-protocol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    min-height: 128px;
    padding: 1.25rem 0.75rem;
    text-align: center;
    background-color: transparent;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.start-protocol:hover,
.start-protocol:focus-visible {
    border-color: var(--primary, #2E37A4);
    box-shadow: 0 6px 18px rgba(46, 55, 164, 0.12);
    transform: translateY(-2px);
}

.start-protocol-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--primary-transparent, #ECEDF7);
    color: var(--primary, #2E37A4);
    font-size: 1.1rem;
}

.start-protocol-name {
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .start-protocol {
        min-height: 108px;
        padding: 1rem 0.5rem;
        gap: 0.5rem;
        font-size: 0.875rem;
    }
    .start-protocol-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .start-protocol {
        transition: none;
    }
    .start-protocol:hover,
    .start-protocol:focus-visible {
        transform: none;
    }
}

/* Аватар у профілі: кружечок з накладкою поруч із вибором файлу */
.profile-photo-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-photo-row .file-picker {
    flex: 1 1 260px;
}

.profile-photo-row .overlay-btn label {
    cursor: pointer;
    line-height: 1;
    font-size: 0.7rem;
}

/* ------------------------------------------------------------------
   2e. Перелік калькуляторів

   Було 15 кнопок btn-outline-secondary — а --secondary у шаблоні
   бірюзовий, тому весь перелік світився кольором, якого більше ніде
   в застосунку немає. Плюс кнопки читались як 15 рівнозначних дій,
   хоча це навігація.
   ------------------------------------------------------------------ */
.calc-nav-group {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500, #9CA3AF);
    margin-bottom: 0.35rem;
}

.calc-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--gray-800, #1F2937);
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.calc-nav-item i {
    width: 18px;
    text-align: center;
    opacity: 0.6;
    flex-shrink: 0;
}

.calc-nav-item:hover {
    background-color: var(--gray-100, #F3F4F6);
    color: var(--gray-900, #111827);
}

.calc-nav-item.active {
    background-color: var(--primary, #2E37A4);
    color: #fff;
    font-weight: 600;
}

.calc-nav-item.active i {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .calc-nav-item { transition: none; }
}

/* ------------------------------------------------------------------
   2d. Список сутностей (візити)

   Таблиця з 4 колонок не влазила в 390px і вилазила за межі картки.
   Для такого вмісту список підходить краще за таблицю: рядки
   переносяться природно, а статус лишається праворуч.
   ------------------------------------------------------------------ */
/* overflow:hidden тут не можна: він обрізав випадне меню статусу.
   Заокруглення робимо на крайніх рядках. */
.entity-list {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.entity-list > .entity-row:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.entity-list > .entity-row:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.entity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: var(--white);
}

.entity-row + .entity-row {
    border-top: 1px solid var(--border-color);
}

.entity-row-main {
    min-width: 0;
    flex: 1 1 200px;
}

.entity-row-title {
    font-size: 0.875rem;
}

.entity-row-sub {
    font-size: 0.8125rem;
    color: var(--gray-600, #6B7280);
}

.appointment-status-btn {
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    border: 0;
    font-size: 0.8125rem;
}

.appointment-status-btn[data-status="pending"]   { background-color: #F59E0B; }
.appointment-status-btn[data-status="confirmed"] { background-color: #3B82F6; }
.appointment-status-btn[data-status="completed"] { background-color: #10B981; }
.appointment-status-btn[data-status="canceled"]  { background-color: #EF4444; text-decoration: line-through; }

/* ------------------------------------------------------------------
   2c. Нотатки в картці пацієнта

   Було: смугастий список, де перший рядок мав сірий фон (читалось як
   вимкнений), дії висіли біля правого краю окремо від тексту, а сам
   текст був дрібним і сірим — тобто виглядав як службова інформація,
   хоча він тут головний.

   Стало: картка на нотатку, як на сторінці нотаток у шаблоні. Дії
   зібрані в меню-трикрапку поруч із автором.
   ------------------------------------------------------------------ */
.note-card .card-body {
    padding: 1rem;
}

.note-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary, #2E37A4);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
}

.note-text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--gray-800, #1F2937);
    white-space: pre-line;
    word-break: break-word;
}

/* Кнопки лишаються в одному рядку з фактами лише там, де вистачає
   місця обом. На 1366px — найпоширенішому екрані за статистикою —
   кнопки з'їдали ~500px, фактам лишалось ~490px, і вони ставали
   по одному в рядок: шапка розтягувалась на пʼять рядків.
   Нижче 1500px кнопки йдуть окремим рядком, а факти отримують
   повну ширину картки. */
@media (min-width: 1500px) {
    .patient-header-actions {
        flex-shrink: 0;
    }
}

@media (max-width: 1499.98px) {
    .patient-header-actions {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .patient-header-actions .btn {
        flex: 1 1 auto;
    }
}

.patient-facts {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    column-gap: 1.25rem;
    font-size: 0.875rem;
    color: var(--gray-800, #1F2937);
}

.patient-facts > span {
    display: inline-flex;
    align-items: center;
}

/* Іконкам потрібен явний відступ: у шрифтових іконок немає бічного
   бокового простору, тому вони злипались зі значенням. */
.patient-facts > span > i {
    font-size: 1rem;
    opacity: 0.55;
    margin-right: 0.4rem;
}

.patient-fact-label {
    color: var(--gray-600, #6B7280);
    margin-right: 0.3rem;
}

.patient-facts b {
    font-weight: 600;
}

/* inline-flex прибирає пробіли між дітьми — вік злипався з датою */
.patient-facts b + .text-muted {
    margin-left: 0.3rem;
}

/* Аватар пацієнта — трохи більший за типовий avatar-xl */
.patient-avatar {
    width: 72px;
    height: 72px;
}

.patient-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   3a. Підписи полів у формі протоколу

   Протокол — це дві колонки, тому колонка форми лишається вузькою
   навіть на широкому екрані: при 1366px це ~610px. Брейкпойнти
   Bootstrap (col-md-*) дивляться на ширину вікна, а не колонки, тому
   не спрацьовують — і довгі підписи на кшталт «Заключення:» у col-md-2
   ламались по складах.

   Container query дає колонці реагувати на власну ширину.
   Браузери без підтримки просто лишаються на поточній поведінці.
   ------------------------------------------------------------------ */
body[data-server-collapse] .content .row > .col-md-6:not(.sticky-top) {
    container-type: inline-size;
}

/* Вузькі колонки підписів отримують більше місця */
@container (max-width: 760px) {
    .input-block.row > label.col-md-2,
    .input-block.row > label.col-md-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .input-block.row > .col-md-9,
    .input-block.row > .col-md-10 {
        flex: 0 0 66.667%;
        max-width: 66.667%;
    }
}

/* Зовсім вузько — підпис над полем, поле на всю ширину */
@container (max-width: 520px) {
    .input-block.row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .input-block.row > label.col-form-label {
        padding-bottom: 0.15rem;
        text-align: left;
    }
}

/* ------------------------------------------------------------------
   4. Логотип

   Той самий знак, що на e-uzd.com: іконка + слово «e-uzd» шрифтом
   Nunito, де «-uzd» бірюзове. Кольори взяті з фронту (--ink, --teal-d),
   щоб застосунок і сайт читались як одне ціле.
   ------------------------------------------------------------------ */
/* .brand — внутрішній span усередині <a class="logo">. Так зроблено
   навмисно: показом самого <a> керує шаблон (ховає лого в шапці, поки
   сайдбар розгорнутий), і ми не маємо це перебивати своїм display. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}

/* Шаблон задає `.sidebar-logo .logo-normal img { width: 114px }` під свій
   широкий SVG-вордмарк. Наша іконка квадратна — без перебивання вона
   розтягувалась на 114px і лишала ~80px порожнечі перед словом. */

.sidebar-logo .logo-normal img.brand-icon,
.sidebar-logo .logo-small img.brand-icon,
.navbar-header .brand img.brand-icon,
.brand img.brand-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

.brand .brand-word {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 23px;
    letter-spacing: -0.5px;
    line-height: 1;
    color: #0E2730;
    white-space: nowrap;
}

.brand .brand-word span {
    color: #2A9DA0;
}

/* Домен на сторінках входу: дрібніший і приглушений, щоб брендом лишалось
   «e-uzd», а «.com» читалось як адреса, куди повертатись. */
.brand .brand-word .brand-tld {
    color: #8A9BA3;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0;
}

[data-bs-theme="dark"] .brand .brand-word .brand-tld {
    color: #9BAAB2;
}

/* У темній темі слово має лишатись читабельним */
[data-bs-theme="dark"] .brand .brand-word {
    color: #E6EDEF;
}

/* ------------------------------------------------------------------
   4a. Пошук пацієнта в шапці

   Старий шаблон робив це поле безрамковим (`.top-nav-search
   .form-control { border: 0 }`). Новий має власний патерн
   input-icon-start — рамка, заокруглення, іконка всередині.
   ------------------------------------------------------------------ */
.header-patient-search {
    min-width: 260px;
}

.header-patient-search .form-control {
    padding-left: 36px;
    padding-right: 32px;
}

.header-patient-search .search-results {
    inset-inline-start: 0;
}

@media (max-width: 991.98px) {
    .header-patient-search {
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
   5. Сайдбар: відступ між іконкою та підписом

   У шаблоні пункт меню — це flex без `gap`, а сам <i> не має відступу
   (в демо-розмітці там були SVG з власним margin). З іконками Tabler
   текст прилипає впритул. Фіксована ширина іконки ще й вирівнює
   підписи в одну колонку.
   ------------------------------------------------------------------ */
.sidebar .sidebar-menu > ul > li > a {
    gap: 10px;
}

.sidebar .sidebar-menu > ul > li > a > i {
    font-size: 18px;
    line-height: 1;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* У згорнутому сайдбарі підпис ховається — іконка має лишитись по центру */
.mini-sidebar .sidebar .sidebar-menu > ul > li > a {
    gap: 0;
    justify-content: center;
}

/* ------------------------------------------------------------------
   6. Сайдбар: назва клініки не має ламати верстку
   ------------------------------------------------------------------ */
.sidebar-top .avatar {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* У згорнутому сайдбарі блок клініки ховаємо */
.mini-sidebar .sidebar-top {
    display: none;
}

/* ------------------------------------------------------------------
   7. Блок підтримки внизу сайдбара

   Сюди зведено чат, баг-репорт і контакти — раніше все це плавало
   поверх контенту й перекривало правий край сторінки.

   Шаблон ховає .trial-item у згорнутому сайдбарі, але саме там
   (на сторінках протоколів) баг-репорт потрібен найбільше. Тому
   лишаємо блок видимим і згортаємо до самих іконок.
   ------------------------------------------------------------------ */
.mini-sidebar #support-card .trial-item {
    display: block;
    padding: 10px 0;
}

/* Заголовок і контакти в міні-режимі не показуємо: декоративна іконка
   поруч із робочими кнопками читалась як ще одна кнопка.
   !important — бо це утиліти Bootstrap (.d-flex), а вони самі з !important. */
.mini-sidebar #support-card .trial-item > .d-flex,
.mini-sidebar #support-card p,
.mini-sidebar #support-card .support-actions span {
    display: none !important;
}

.mini-sidebar #support-card .support-actions {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 0 !important;
}

.mini-sidebar #support-card .support-actions .btn {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 0;
    text-align: center !important;
}

/* Згорнутий сайдбар розгортається при наведенні (клас expand-menu).
   Тоді блок підтримки має повернутись до повного вигляду з підписами —
   інакше в широкому сайдбарі висять самі іконки без пояснень. */
.mini-sidebar.expand-menu #support-card .trial-item {
    padding: 1rem;
}

.mini-sidebar.expand-menu #support-card .trial-item > .d-flex {
    display: flex !important;
}

.mini-sidebar.expand-menu #support-card p {
    display: block !important;
}

.mini-sidebar.expand-menu #support-card .support-actions {
    display: grid !important;
    align-items: stretch;
}

.mini-sidebar.expand-menu #support-card .support-actions span {
    display: inline !important;
}

.mini-sidebar.expand-menu #support-card .support-actions .btn {
    width: auto;
    height: auto;
    padding: 0.25rem 0.5rem !important;
    gap: 0.5rem;
    text-align: left !important;
    justify-content: flex-start !important;
}

/* У розгорнутому вигляді підписи не мають ламатись */
#support-card .support-actions .btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   Модалки пацієнта (patient-picker.js)

   Випадні списки — результати пошуку і підказки імен — мають лягати
   поверх сусідніх полів, а не розсувати модалку.
   ------------------------------------------------------------------ */
.picker-dropdown {
    z-index: 1060;
    max-height: 16rem;
    overflow-y: auto;
    left: 0;
}

.picker-dropdown .list-group-item {
    cursor: pointer;
}

/* Без min-width flex-дитина не дає обрізати довге ім'я трьома крапками */
.picker-text {
    min-width: 0;
}

/* Результати пошуку пацієнта: свій скрол, коли їх багато */
.picker-results {
    max-height: 14rem;
    overflow-y: auto;
}

.picker-results .list-group-item {
    cursor: pointer;
}

/* Список протоколів у модалці «Нове обстеження» */
.protocol-list {
    max-height: 18rem;
    overflow-y: auto;
}

.protocol-list .list-group-item {
    cursor: pointer;
}

.protocol-list .list-group-item .ti {
    opacity: 0;
    transition: opacity .15s;
}

.protocol-list .list-group-item:hover .ti {
    opacity: 1;
}

/* ------------------------------------------------------------------
   Нейтральний btn-outline-secondary

   У Preclinic «secondary» — бірюза #00d3c7: кнопки на кшталт
   «Використати автовисновок» світились акцентом і сперечались із
   синім primary. Робимо їх спокійними сірими, як службові дії.
   ------------------------------------------------------------------ */
.btn-outline-secondary {
    --bs-btn-color: #6C7688;
    --bs-btn-border-color: #E2E5EB;
    --bs-btn-hover-color: #131A1F;
    --bs-btn-hover-bg: #F5F6F8;
    --bs-btn-hover-border-color: #D5D9E0;
    --bs-btn-active-color: #131A1F;
    --bs-btn-active-bg: #EDEFF3;
    --bs-btn-active-border-color: #D5D9E0;
    color: #6C7688;
    border-color: #E2E5EB;
}

.btn-outline-secondary:hover {
    color: #131A1F;
    background-color: #F5F6F8;
    border-color: #D5D9E0;
}