/* ============================================================================
 * app-mobile-polish.css
 * Глобальные правки под мобильное приложение: safe-area, размеры тач-таргетов,
 * адаптивные таблицы, модалки, контейнеры. Подключается на всех страницах.
 * ============================================================================ */

/* Подстраховка на переполнение по горизонтали */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Тач-скролл в прокручиваемых контейнерах */
.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.overflow-x-auto,
.records-table-wrapper {
    -webkit-overflow-scrolling: touch;
}

/* iOS: убираем автозум на фокусе инпутов (font-size < 16px вызывает zoom) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select:not(.global-answer-select):not(.specialist-select),
    .form-control:not(select.global-answer-select):not(select.specialist-select),
    .form-select {
        font-size: 16px !important;
    }
}

/* ----- Базовая адаптация ≤1024px ----- */
@media (max-width: 1024px) {
    /* Контейнеры */
    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Safe-area: не даём контенту подлезать под вырез и нижнюю полоску */
    body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Тач-таргеты (≥ 44px — правила iOS HIG / Material Design) */
    .btn:not(.btn-close):not(.btn-link) {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .btn-sm {
        min-height: 36px;
    }
    .btn-lg {
        min-height: 52px;
    }

    /* Формы */
    .form-control,
    .form-select {
        min-height: 44px;
    }
    /* Исключения: селекты с собственной высотой (кастомизируются отдельно) */
    select.global-answer-select,
    select.specialist-select,
    select.status-select {
        min-height: unset !important;
        height: auto !important;
    }
    textarea.form-control {
        min-height: 96px;
    }

    /* Таблицы: скролл по горизонтали, а не ломка вёрстки */
    table.table {
        font-size: 13px;
    }
    .table-responsive,
    .table-responsive-sm,
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Badges / chips */
    .badge {
        padding: 6px 10px;
        border-radius: 10px;
    }

    /* Модалки Bootstrap */
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-content {
        border-radius: 16px;
    }
    .modal-header,
    .modal-footer {
        padding: 12px 16px;
    }
    .modal-body {
        padding: 14px 16px;
    }

    /* Dropdown: увеличим область клика */
    .dropdown-item {
        padding: 10px 14px;
        min-height: 40px;
    }

    /* Nav-tabs: прокрутка по горизонтали */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
    }

    /* Card-группы: в одну колонку */
    .row.g-3 > [class*="col-md-"],
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] {
        margin-bottom: 0.5rem;
    }

    /* Заголовки страниц */
    .page-header .btn,
    .page-header-actions .btn {
        min-height: 40px;
    }
}

/* ----- Узкий мобильный ≤576px ----- */
@media (max-width: 576px) {
    h1 { font-size: calc(var(--font-size-2xl, 20px) + 2px); }
    h2 { font-size: var(--font-size-xl, 18px); }
    h3 { font-size: var(--font-size-lg, 16px); }
    h4 { font-size: var(--font-size-md, 14px); }
    h5 { font-size: var(--font-size-md, 14px); }

    /* Полноэкранные модалки на телефонах */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: 100%;
        margin: 0;
    }
    .modal-dialog.modal-lg .modal-content,
    .modal-dialog.modal-xl .modal-content {
        border-radius: 14px;
    }

    /* Модальный футер — кнопки в колонку на очень узких экранах */
    .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }

    /* Списки таблиц-мини */
    .records-table thead th,
    .records-table tbody td {
        padding: 8px 6px;
    }

    /* Dropdown menu: полный ширину, мобильный сценарий */
    .dropdown-menu.show {
        max-width: calc(100vw - 16px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
    }
}

/* ----- Убираем «залипание» hover на тач-устройствах ----- */
@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .card:hover,
    .nav-link:hover,
    .dropdown-item:hover {
        transform: none !important;
    }
}

/* ----- Улучшенный скроллбар (WebKit) ----- */
@media (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 3px;
    }
}

/* ----- Safe-area для нижних фиксированных панелей ----- */
.fixed-bottom,
.navbar-fixed-bottom,
.bottom-nav,
.mobile-bottom-bar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-extra, 0px));
}

/* ----- Боковое меню (#customTopMenu): в вертикальной ориентации на iPhone
   кнопка «Выход» уезжала за нижний край экрана. Причина: height: 100vh
   включает область под адресной строкой Safari, поэтому нижняя часть
   сайдбара визуально оказывается ниже видимой зоны. Плюс home-bar iPhone
   «съедает» ещё ~20px. ----- */
#customTopMenu.custom-top-menu {
    /* dvh = «сколько места реально видно сейчас». Падает в 100vh
       на очень старых браузерах — приемлемый fallback. */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    -webkit-overflow-scrolling: touch;
}
/* Нижний блок с «Выйти / Войти» — отступ снизу с учётом home-bar. */
#customTopMenu.custom-top-menu > div:last-child {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ----- Контент карточек не должен вылезать за границы ----- */
.card,
.v2-card,
.dashboard-card {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================================
   MOBILE FRAMEWORK — универсальные правила для всего приложения.
   Подключается ПОСЛЕ design-system-unified.css, поэтому перекрывает
   конфликтующие ранние правила без войны !important внутри основного файла.
   ========================================================================== */

/* --- 1. Модалки .modern-modal: полноэкранный флекс, скролл только в body ---
   ВАЖНО: Bootstrap по умолчанию скроллит .modal (внешний контейнер).
   Это ломает sticky-футер: он прилипает не к диалогу, а к скроллу .modal,
   и кнопки «всплывают» поверх содержимого. Поэтому:
     1) глушим внешний скролл у .modal для интересующих модалок;
     2) делаем модалку колонкой на всю высоту viewport (100dvh);
     3) body растягивается и скроллится сам;
     4) footer — просто последний flex-ребёнок, живёт в дне формы без
        position:sticky (он не нужен, когда скролл только в body).
*/
@media (max-width: 1024px) {
    /* 1) .modal (внешний контейнер) — не скроллим, т.к. скролл будет в body. */
    .modal:has(.modern-modal),
    #noteModal,
    #viewNoteModal,
    #createTaskModal,
    #editTaskModal,
    #viewTaskModal,
    #editChildModal,
    #addChildModal,
    #deleteChildModal,
    #zakupkaModal,
    #addZakupkaModal,
    #editZakupkaModal {
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* 2) .modal-dialog — во весь экран, flex-column, без своих скроллов. */
    .modal-dialog:has(.modern-modal),
    #noteModal .modal-dialog,
    #viewNoteModal .modal-dialog,
    #createTaskModal .modal-dialog,
    #editTaskModal .modal-dialog,
    #viewTaskModal .modal-dialog,
    #editChildModal .modal-dialog,
    #addChildModal .modal-dialog,
    #deleteChildModal .modal-dialog,
    #zakupkaModal .modal-dialog,
    #addZakupkaModal .modal-dialog,
    #editZakupkaModal .modal-dialog {
        display: flex !important;
        align-items: stretch !important;
        max-height: none !important;
        overflow: hidden !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* 3) .modal-content — flex-column, занимает всю высоту диалога. */
    .modern-modal,
    .modal-content.modern-modal {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* 4) <form> между modal-content и modal-body/footer — тоже колонка. */
    .modern-modal > form {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    /* 5) header/footer — фикс-высота по контенту. */
    .modern-modal .modal-header,
    .modern-modal .modern-modal-header,
    .modern-modal .modal-footer,
    .modern-modal .modern-modal-footer {
        flex: 0 0 auto !important;
    }

    /* 6) body — всё оставшееся место, собственный скролл. */
    .modern-modal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 7) Футер — всегда в дне формы (flex), без position:sticky. */
    .modern-modal .modal-footer,
    .modern-modal .modern-modal-footer {
        position: static !important;
        background: var(--color-soft, #f8fafc) !important;
        border-top: 1px solid var(--color-border, #e5e7eb) !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08) !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        align-items: stretch !important;
        z-index: 2;
    }
    .modern-modal .modal-footer .btn,
    .modern-modal .modern-modal-footer .btn {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    .modern-modal .modal-footer:has(.btn:nth-child(3)),
    .modern-modal .modern-modal-footer:has(.btn:nth-child(3)) {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 576px) {
    .modern-modal .modal-body .tox-tinymce {
        max-height: 55dvh !important;
    }
    .modern-modal .modal-body .modal-textarea {
        min-height: 180px !important;
    }
    .modern-modal-header .modal-subtitle {
        display: none !important;
    }
}

/* --- 2. Таблицы: горизонтальный скролл с подсказывающими тенями --- */
.table-mobile-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--color-surface, #fff) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-surface, #fff) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-text) 8%, transparent), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-text) 8%, transparent), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* --- 2b. Таблицы: на мобильном превращение в карточки.
   Добавляйте класс .table-mobile-cards на <table> и data-label="..." на <td>. */
@media (max-width: 768px) {
    .table-mobile-cards {
        border: 0 !important;
    }
    .table-mobile-cards thead {
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        width: 1px !important;
        overflow: hidden !important;
        position: absolute !important;
        white-space: nowrap !important;
    }
    .table-mobile-cards tbody tr {
        display: block !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        border: 1px solid var(--color-border, #e5e7eb) !important;
        border-radius: 12px !important;
        background: var(--color-surface, #fff) !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    }
    .table-mobile-cards tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 6px 0 !important;
        border: 0 !important;
        text-align: right !important;
        font-size: 0.9rem !important;
        min-height: auto !important;
    }
    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-muted, #6b7280);
        text-align: left;
        flex: 0 0 40%;
        max-width: 50%;
    }
    .table-mobile-cards tbody td.actions-cell,
    .table-mobile-cards tbody td[data-label="Действия"] {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        padding-top: 10px !important;
        margin-top: 6px !important;
        border-top: 1px dashed var(--color-border, #e5e7eb) !important;
    }
    .table-mobile-cards tbody td.actions-cell::before,
    .table-mobile-cards tbody td[data-label="Действия"]::before {
        display: none !important;
    }
}

/* --- 3. Кнопки-действия в карточках/строках: ряд, поровну по ширине --- */
@media (max-width: 576px) {
    .row-actions,
    .card-actions,
    .note-actions,
    .task-actions,
    .zakupka-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .row-actions .btn,
    .card-actions .btn,
    .note-actions .btn,
    .task-actions .btn,
    .zakupka-actions .btn {
        flex: 1 1 auto !important;
        min-width: 44px !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }
}

/* --- 4. Safe-area helpers --- */
.mobile-safe-bottom {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
.mobile-safe-top {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}

/* ==========================================================================
   TASKS /tasks (list, create, edit) — мобильные улучшения.
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Фильтры списка задач: каждый блок — своя колонка во всю ширину. */
    .unified-filters-body form.d-flex {
        gap: 12px !important;
    }
    .unified-filters-body form > .flex-shrink-0 {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .unified-filters-body .form-select,
    .unified-filters-body .multiselect-container,
    .unified-filters-body .multiselect-input {
        width: 100% !important;
    }
    .unified-filters-body .multiselect-dropdown {
        max-width: calc(100vw - 32px) !important;
        left: 0 !important;
    }

    /* 2. Карточка задачи: добавляем визуальную "карточку" на мобильном. */
    .task-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 12px !important;
        background: var(--color-surface, #fff);
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: var(--radius-md, 12px);
        box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text, #1f2937) 4%, transparent);
    }
    .task-row.border-danger {
        border-color: var(--color-danger, #ef4444) !important;
        box-shadow: 0 0 0 1px var(--color-danger, #ef4444) inset,
            0 1px 2px color-mix(in srgb, var(--color-danger, #ef4444) 15%, transparent);
    }
    .task-row + hr.my-2 {
        display: none !important;
    }
    .task-row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .task-row .col-md-4.text-right {
        text-align: left !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px dashed var(--color-border, #e5e7eb) !important;
    }
    .task-row .task-title {
        font-size: 15px !important;
        line-height: 1.35 !important;
        word-break: break-word;
        margin-bottom: 6px !important;
    }
    .task-row .task-description {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    .task-row .task-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }
    .task-row .task-meta small {
        margin-left: 0 !important;
    }
    .task-row .task-complete-btn {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        justify-content: center !important;
    }
    .task-row .task-completed-badge {
        display: inline-flex !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .task-row .task-child-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 2px 0;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .task-row {
        padding: 10px !important;
    }
    .task-row .badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    /* Шапка секций "Активные / Выполненные" — компактнее. */
    .dashboard-card > .clickable-header {
        padding: 10px 12px !important;
    }
    .dashboard-card > .clickable-header h5 {
        font-size: 15px !important;
    }
    .dashboard-card > .clickable-header h5 i {
        margin-right: 6px !important;
    }
}

/* ==========================================================================
   NOTES /notes — доводка списка, вкладок папок, фильтра, карточек.
   ========================================================================== */

@media (max-width: 1024px) {
    /* Вкладки папок — горизонтальный скролл без wrap, компактнее. */
    .notes-tabs-bar {
        flex-wrap: nowrap !important;
        padding: 4px !important;
        margin-bottom: 12px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .notes-tabs-bar::-webkit-scrollbar {
        display: none;
    }
    .notes-tab {
        flex: 0 0 auto !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
    .notes-tab .tab-count {
        font-size: 11px !important;
        padding: 1px 6px !important;
        min-width: 18px !important;
    }
    .notes-tab-add {
        flex: 0 0 auto !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    /* Фильтр "Ребенок": во всю ширину (одно поле) */
    .notes-container .unified-filters-body form > .flex-shrink-0 {
        flex: 1 1 100% !important;
    }
    .notes-container .multiselect-container,
    .notes-container .multiselect-input {
        width: 100% !important;
    }
    .notes-container .multiselect-dropdown {
        max-width: calc(100vw - 32px) !important;
        left: 0 !important;
    }

    /* Dashboard-search: input-group растягиваем. */
    .notes-container .dashboard-search .input-group {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    /* Карточки заметок: 1 колонка, компактный padding, экшены в строку. */
    .notes-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .note-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }
    .note-actions {
        flex-direction: row !important;
        gap: 8px !important;
    }
    .note-actions .btn,
    .note-actions .btn-view,
    .note-actions .btn-delete {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 9px 10px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }
    .note-children-tags {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .note-child-tag {
        font-size: 11px !important;
        padding: 3px 7px !important;
    }
    .note-meta {
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-start !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .note-content {
        max-height: 80px !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Сдвигаем вкладки папок влево, чтобы первая была видна целиком. */
    .notes-tabs-bar {
        scroll-snap-type: x proximity;
    }
    .notes-tab {
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   CHILDREN LIST /children — таблица → карточки на мобильном (без правок HTML).
   ========================================================================== */

@media (max-width: 768px) {
    /* Скрываем шапку и рамку, превращая <tr> в карточки. */
    .children-list-container .children-table-card .table-responsive {
        overflow: visible !important;
    }
    .children-list-container .children-table-card table {
        border: 0 !important;
        background: transparent !important;
    }
    .children-list-container .children-table-card table thead {
        display: none !important;
    }
    .children-list-container .children-table-card table tbody {
        display: block !important;
    }
    .children-list-container .children-table-card tr.child-row {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "lname lname age"
            "fname patronymic status";
        gap: 6px 10px;
        padding: 12px 14px !important;
        margin-bottom: 10px;
        background: var(--color-surface, #fff);
        border: 1px solid var(--color-border, #e5e7eb) !important;
        border-radius: var(--radius-md, 14px);
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
        cursor: pointer;
    }
    .children-list-container .children-table-card tr.child-row > td {
        display: flex !important;
        align-items: center;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 14px !important;
    }
    .children-list-container .children-table-card td.child-surname {
        grid-area: lname;
        font-size: 16px !important;
        font-weight: 700;
        color: var(--color-text, #1f2937);
    }
    .children-list-container .children-table-card td.child-name {
        grid-area: fname;
        color: var(--color-text, #1f2937);
    }
    .children-list-container .children-table-card td.child-patronymic {
        grid-area: patronymic;
        color: var(--color-muted, #6b7280);
        font-weight: 500;
    }
    .children-list-container .children-table-card td.child-patronymic:empty {
        display: none !important;
    }
    .children-list-container .children-table-card td.child-age {
        grid-area: age;
        justify-content: flex-end;
    }
    .children-list-container .children-table-card td.child-status {
        grid-area: status;
        justify-content: flex-end;
    }
    .children-list-container .children-table-card td.child-age .badge,
    .children-list-container .children-table-card td.child-status .badge {
        font-size: 11px !important;
        padding: 3px 7px !important;
    }
    .children-list-container .children-table-card td.child-age .badge i,
    .children-list-container .children-table-card td.child-status .badge i {
        margin-right: 4px;
    }
    /* Активное нажатие карточки. */
    .children-list-container .children-table-card tr.child-row:active {
        transform: scale(0.995);
        box-shadow: 0 1px 6px rgba(79, 70, 229, 0.18);
    }
    /* Пагинация: компактная на мобильном. */
    .children-list-container .pagination .page-link {
        min-width: 36px;
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }
    /* Поиск: кнопка архива рядом с поиском. */
    .children-list-container .search-card .card-title {
        font-size: 16px !important;
    }
    .children-list-container .btn-icon-only {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
    }
}

@media (max-width: 420px) {
    /* На очень узких — упрощаем сетку, статус под именем. */
    .children-list-container .children-table-card tr.child-row {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "lname age"
            "fname patronymic"
            "status status";
    }
    .children-list-container .children-table-card td.child-status {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   ZAKUPKI /zakupki — поверх общего .table-mobile-cards добавляем специфику.
   ========================================================================== */

@media (max-width: 768px) {
    /* Подсвечиваем карточку по статусу — тонкая цветная полоса слева. */
    .zakupki-table tbody tr[data-id] {
        position: relative;
        overflow: hidden;
    }
    .zakupki-table tbody tr[data-id]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: var(--color-border, #e5e7eb);
    }
    /* Наименование — крупнее, на всю ширину, без подписи-двоеточия. */
    .zakupki-table tbody td[data-label="Наименование"] {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--color-text, #1f2937) !important;
        order: -1;
        text-align: left !important;
        padding-top: 2px !important;
    }
    .zakupki-table tbody td[data-label="Наименование"]::before {
        display: none !important;
    }
    /* Пустые ячейки (ссылка, действия без лейбла) — скрываем если тело пустое. */
    .zakupki-table tbody td[data-label=""] {
        order: 99;
        border-top: 1px dashed var(--color-border, #e5e7eb) !important;
        padding-top: 8px !important;
        margin-top: 6px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    .zakupki-table tbody td[data-label=""]::before {
        display: none !important;
    }
    .zakupki-table tbody td[data-label=""] .d-flex {
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .zakupki-table tbody td[data-label=""] .btn {
        flex: 0 0 auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        border-radius: 8px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Статус-селект во всю ширину, с цветной рамкой. */
    .zakupki-table tbody td[data-label="Статус"] .status-form,
    .zakupki-table tbody td[data-label="Статус"] .form-control,
    .zakupki-table tbody td[data-label="Статус"] .status-select {
        display: block !important;
        width: 100% !important;
    }
    .zakupki-table tbody td[data-label="Статус"] .status-select {
        min-height: 38px !important;
        border-radius: 8px !important;
    }
    /* Согласование: чекбокс крупнее, подпись справа. */
    .zakupki-table tbody td[data-label="Согласовано"] {
        align-items: center !important;
    }
    .zakupki-table tbody td[data-label="Согласовано"] .approval-checkbox {
        width: 22px;
        height: 22px;
    }
    /* Ссылка: иконка-кнопка, видна отчётливо. */
    .zakupki-table tbody td[data-label="Ссылка"] a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--color-primary, #667eea) 10%, var(--color-surface, #fff));
        color: var(--color-primary, #667eea);
    }
    .zakupki-table tbody td[data-label="Ссылка"]:has(> a)::before {
        content: "Открыть";
    }
    /* Цветовая полоска по статусу (добавляется JS, fallback — по значению select). */
    .zakupki-table tbody tr:has(option[value="срочно"][selected])::before { background: var(--color-danger); }
    .zakupki-table tbody tr:has(option[value="не заказано"][selected])::before { background: var(--color-warning); }
    .zakupki-table tbody tr:has(option[value="заказано"][selected])::before { background: var(--storage-primary, var(--color-info)); }
    .zakupki-table tbody tr:has(option[value="доставлено"][selected])::before { background: var(--color-success); }

    /* Фильтры/кнопки сверху страницы в одну колонку. */
    .zakupki-page .d-flex.flex-wrap,
    .zakupki-toolbar {
        gap: 8px !important;
    }
    .zakupki-toolbar .btn {
        flex: 1 1 calc(50% - 8px) !important;
    }
}

@media (max-width: 576px) {
    .zakupki-table tbody tr[data-id] {
        padding-left: 14px !important;
    }
}

/* ----- Закупки: режимы «Добавить» (tr.new-row) и «Редактировать» (tr.editing)
   Внутри ячеек — полноценные поля формы (input/select/date). Раскладка
   «ярлык слева 40% / значение справа» для них не подходит:
   селекты обрезаются, Select2-дропдауны накладываются друг на друга.
   Поэтому переводим такие строки в вертикальный стек: ярлык сверху,
   поле во всю ширину снизу. Префикс #zakupkiTable — выигрываем specificity
   у общей раскладки .table-mobile-cards tbody td. ----- */
@media (max-width: 768px) {
    #zakupkiTable tbody tr.new-row,
    #zakupkiTable tbody tr.editing {
        display: block !important;
        padding: 14px 14px 12px !important;
        margin: 0 0 14px !important;
        border: 1px solid var(--color-border, #e5e7eb) !important;
        border-left: 4px solid var(--color-primary, #667eea) !important;
        border-radius: 14px !important;
        background: var(--color-surface, #fff) !important;
        box-shadow: 0 6px 18px rgba(79, 70, 229, 0.12) !important;
        position: relative !important;
        overflow: visible !important;
    }
    #zakupkiTable tbody tr.new-row::before,
    #zakupkiTable tbody tr.editing::before {
        display: none !important; /* цветной статус-бар — не нужен на форме */
    }

    /* Каждая ячейка — отдельный блок: ярлык сверху, поле во всю ширину. */
    #zakupkiTable tbody tr.new-row > td,
    #zakupkiTable tbody tr.editing > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
        text-align: left !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    #zakupkiTable tbody tr.new-row > td:first-child,
    #zakupkiTable tbody tr.editing > td:first-child {
        border-top: 0 !important;
        padding-top: 4px !important;
    }
    #zakupkiTable tbody tr.new-row > td::before,
    #zakupkiTable tbody tr.editing > td::before {
        content: attr(data-label);
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--color-muted, #6b7280) !important;
        letter-spacing: 0.04em !important;
        text-align: left !important;
        flex: none !important;
        max-width: none !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
    }

    /* «Наименование» — без ярлыка, просто крупный жирный инпут сверху. */
    #zakupkiTable tbody tr.new-row > td[data-label="Наименование"],
    #zakupkiTable tbody tr.editing > td[data-label="Наименование"] {
        padding-top: 0 !important;
        padding-bottom: 12px !important;
    }
    #zakupkiTable tbody tr.new-row > td[data-label="Наименование"]::before,
    #zakupkiTable tbody tr.editing > td[data-label="Наименование"]::before {
        display: none !important;
    }
    #zakupkiTable tbody tr.new-row > td[data-label="Наименование"] input,
    #zakupkiTable tbody tr.editing > td[data-label="Наименование"] input {
        font-size: 16px !important;
        font-weight: 600 !important;
        min-height: 46px !important;
    }

    /* В форме скрываем сервисные ячейки («Согласовано», «Создано»). */
    #zakupkiTable tbody tr.new-row > td[data-label="Согласовано"],
    #zakupkiTable tbody tr.new-row > td[data-label="Создано"],
    #zakupkiTable tbody tr.editing > td[data-label="Согласовано"],
    #zakupkiTable tbody tr.editing > td[data-label="Создано"] {
        display: none !important;
    }

    /* Все поля — 100% ширины, высокий тач-таргет, видимая граница. */
    #zakupkiTable tbody tr.new-row .form-control,
    #zakupkiTable tbody tr.new-row .form-select,
    #zakupkiTable tbody tr.new-row select,
    #zakupkiTable tbody tr.new-row input,
    #zakupkiTable tbody tr.editing .form-control,
    #zakupkiTable tbody tr.editing .form-select,
    #zakupkiTable tbody tr.editing select,
    #zakupkiTable tbody tr.editing input {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        border: 1px solid var(--color-border, #e5e7eb) !important;
        border-radius: 10px !important;
        background: var(--color-surface, #fff) !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }
    #zakupkiTable tbody tr.new-row input[type="date"],
    #zakupkiTable tbody tr.editing input[type="date"] {
        font-variant-numeric: tabular-nums;
    }

    /* Select2-контейнер, если вдруг инициализируется. */
    #zakupkiTable tbody tr.new-row .select2-container,
    #zakupkiTable tbody tr.editing .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    #zakupkiTable tbody tr.new-row .select2-selection,
    #zakupkiTable tbody tr.editing .select2-selection {
        min-height: 44px !important;
        border: 1px solid var(--color-border, #e5e7eb) !important;
        border-radius: 10px !important;
    }

    /* Кнопки save/cancel — в ряд, поровну по ширине, крупно. */
    #zakupkiTable tbody tr.new-row > td[data-label=""],
    #zakupkiTable tbody tr.editing > td[data-label=""] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 14px 0 2px !important;
        margin-top: 4px !important;
        border-top: 1px dashed rgba(15, 23, 42, 0.1) !important;
    }
    #zakupkiTable tbody tr.new-row > td[data-label=""]::before,
    #zakupkiTable tbody tr.editing > td[data-label=""]::before {
        display: none !important;
    }
    #zakupkiTable tbody tr.new-row > td[data-label=""] .btn,
    #zakupkiTable tbody tr.editing > td[data-label=""] .btn {
        flex: 1 1 0 !important;
        min-height: 46px !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
}

/* ----- Закупки: тулбар (табы + «Все филиалы» + «+») на мобильном ----- */
@media (max-width: 768px) {
    .zakupki-toolbar {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .zakupki-toolbar .nav-tabs {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }
    .zakupki-toolbar #branchSelect {
        flex: 1 1 auto !important;
        width: auto !important;
        margin-left: 0 !important;
        min-height: 44px !important;
    }
    .zakupki-toolbar #addRowBtn {
        flex: 0 0 auto !important;
        margin-left: 8px !important;
        min-width: 44px !important;
        width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }
}

/* ----- Закупки: в обычных карточках разделяем ячейки тонкой линией, чтобы
   «Статус»/«Согласовано»/«Создано» не сливались в одну кашу. ----- */
@media (max-width: 768px) {
    #zakupkiTable tbody tr[data-id] > td {
        border-bottom: 1px dashed rgba(15, 23, 42, 0.06) !important;
        padding: 8px 0 !important;
    }
    #zakupkiTable tbody tr[data-id] > td:last-child {
        border-bottom: 0 !important;
    }
    /* Согласование: явный вертикальный стек «ярлык сверху, контент снизу»,
       чтобы имя-одобрившего не прилипало к селекту статуса справа. */
    #zakupkiTable tbody tr[data-id] td[data-label="Согласовано"] {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    #zakupkiTable tbody tr[data-id] td[data-label="Согласовано"] small {
        display: inline-block !important;
        margin-left: 6px !important;
    }
    #zakupkiTable tbody tr[data-id] td[data-label="Согласовано"] br {
        display: none !important;
    }
}

@media (max-width: 576px) {
    #zakupkiTable tbody tr[data-id] td[data-label="Статус"] {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    #zakupkiTable tbody tr[data-id] td[data-label="Статус"]::before {
        flex: none !important;
        max-width: none !important;
        margin-bottom: 6px !important;
    }
    #zakupkiTable tbody tr[data-id] td[data-label="Статус"] .status-form {
        width: 100% !important;
    }
    #zakupkiTable tbody tr[data-id] td[data-label="Статус"] .status-select {
        width: 100% !important;
        min-height: 40px !important;
        max-height: 44px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* ==========================================================================
   DASHBOARD / — главная: компактная сетка быстрых действий, задачи-карточки.
   ========================================================================== */

@media (max-width: 768px) {
    /* Быстрые действия: жёсткая 2-колоночная сетка, одинаковая высота. */
    .quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .quick-actions .quick-action-btn {
        width: 100% !important;
        min-height: 52px !important;
        padding: 10px 12px !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
    }
    .quick-actions .quick-action-btn i,
    .quick-actions .quick-action-btn img {
        font-size: 1rem !important;
        width: 20px !important;
        height: 20px !important;
    }
    .quick-actions .quick-action-btn span {
        font-size: 13px !important;
    }
    /* Секции задач на главной: колонки сливаются в вертикальный список. */
    .tasks-section .inner-card-header {
        padding: 8px 12px !important;
    }
    .tasks-section .inner-card-header h6 {
        font-size: 14px !important;
    }
    .tasks-section .inner-card .card-body {
        padding: 10px !important;
    }
    /* Внутренние карточки задач (строки задач) — визуально как на /tasks. */
    .tasks-section .task-preview,
    .tasks-section .dashboard-task-item {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    /* Поиск: заголовок + ввод компактнее. */
    .dashboard-card.search-card .card-body {
        padding: 14px !important;
    }
    .dashboard-card.search-card .card-title {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
    .dashboard-card.search-card .input-group .form-control {
        min-height: 46px !important;
    }
    .dashboard-card.search-card .input-group .btn {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Контейнер быстрых действий — уменьшаем паддинг, карточка компактнее. */
    .row.mb-3 > .col-12 > .card.dashboard-card .card-body.py-2 {
        padding: 10px !important;
    }
}

@media (max-width: 420px) {
    /* На очень узких можно оставить 2 колонки — но уменьшить кнопки. */
    .quick-actions .quick-action-btn {
        min-height: 48px !important;
        padding: 8px 8px !important;
        font-size: 12px !important;
    }
    .quick-actions .quick-action-btn span {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   DASHBOARD /: .task-item внутри секций "Просроченные/Сегодня/Завтра/Активные"
   — более удобные карточки для пальца. Основные правила лежат inline
   в dashboard.html; тут только мобильная переверстка.
   ========================================================================== */

@media (max-width: 768px) {
    /* Колонки "Просроченные/Сегодня/Завтра/Активные" — во всю ширину. */
    .tasks-section .row > [class*="col-md-"] {
        margin-bottom: 12px !important;
    }

    /* Карточка задачи: разрешаем переносить заголовок, чуть уменьшаем паддинги. */
    .tasks-section .task-item {
        padding: 10px 12px !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    .tasks-section .task-item:hover {
        /* Убираем «ёрзание» на тачах — остаётся только фон/тень. */
        transform: none !important;
    }
    .tasks-section .task-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
    .tasks-section .task-details {
        gap: 6px !important;
        font-size: 12px !important;
    }
    .tasks-section .task-priority,
    .tasks-section .task-due-date,
    .tasks-section .task-assignee-badge {
        font-size: 11px !important;
        padding: 3px 7px !important;
    }

    /* Кнопки действий: 40×40, удобно попадать пальцем. */
    .tasks-section .task-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .tasks-section .task-actions .btn {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 420px) {
    /* На узких — экшены снова в ряд, чтобы заголовок получил больше места. */
    .tasks-section .task-actions {
        flex-direction: row !important;
    }
    .tasks-section .task-item {
        flex-wrap: wrap !important;
    }
    .tasks-section .task-info {
        flex: 1 1 100% !important;
    }
    .tasks-section .task-actions {
        flex: 0 0 auto !important;
        align-self: flex-end !important;
    }
}

/* ==========================================================================
   TASKS list — подстраховка на уровне обычных Bootstrap-модалок
   (createTaskModal / editTaskModal / viewTaskModal). Они уже имеют
   класс .modern-modal на .modal-content, поэтому ловятся общим правилом
   выше. Здесь — точечные улучшения для внутреннего контента.
   ========================================================================== */

@media (max-width: 768px) {
    /* Мультиселект исполнителей/детей в модалке задачи: dropdown во всю ширину. */
    #createTaskModal .multiselect-dropdown,
    #editTaskModal .multiselect-dropdown,
    #viewTaskModal .multiselect-dropdown {
        max-width: calc(100vw - 32px) !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* В модалке просмотра: блок исполнителей/детей — перенос строк. */
    #viewTaskModal .assignees-list,
    #viewTaskModal .children-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ==========================================================================
   CHILD DETAIL v3 — доп. полировка поверх child_detail_v3.mobile.css.
   Здесь только то, что НЕ покрывается дочерним файлом и должно быть
   для всех мобильных сценариев.
   ========================================================================== */

@media (max-width: 768px) {
    /* FAB (Заметка/Задача) — над нижним safe-area. */
    .v3-fab {
        right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .v3-fab-main {
        width: 56px !important;
        height: 56px !important;
        font-size: 20px !important;
    }
    .v3-fab-item {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* Шапка карточки ребёнка: page-header-actions — перенос, кнопки поровну. */
    .page-header .page-header-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .page-header .page-header-actions > .dropdown {
        flex: 1 1 calc(50% - 6px) !important;
    }
    .page-header .page-header-actions .dropdown-toggle {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   FAB / Floating buttons — выравниваем лупу глобального поиска с остальными
   кнопками. В design-system-unified.css:4712 у #globalSearchBtn жёстко прибито
   50x50 через #id.class (specificity выше чем у медиа-override в base.html),
   из-за чего на мобильном лупа получалась больше стрелок вверх/вниз/ИИ.
   Поднимаем specificity с помощью тройного классового селектора + id.
   ========================================================================== */
@media (max-width: 768px) {
    #globalSearchBtn.floating-btn.search-btn,
    #aiChatBtn.floating-btn,
    .floating-buttons .floating-btn {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        font-size: 16px !important;
    }
    #globalSearchBtn.floating-btn.search-btn i,
    #aiChatBtn.floating-btn i,
    .floating-buttons .floating-btn i {
        font-size: 16px !important;
    }
}