/* =============================================================================
   Кабинет app.work-app.ru — адаптивность (02.10.2026).

   Подключается ПОСЛЕДНИМ после style.bundle.css (index.php), поэтому правила
   короткие и без !important там, где хватает порядка. Дизайн Metronic не
   перерисовывается, только доводится для телефонов и планшетов:
   • шрифт: Metronic на ширине до 1024px УМЕНЬШАЕТ корневой размер до 12px —
     основной текст на телефоне выходил 12px. Здесь наоборот: 15px на телефоне,
     14px на планшете (rem-размеры компонентов растут вместе с ним);
   • касание: кнопки, поля, пункты меню и строки календаря не меньше 44px
     (`pointer: coarse` — устройство с пальцем, а не мышью);
   • поля ввода на касание — 16px: иначе iOS увеличивает страницу при фокусе;
   • таблица админки на телефоне — карточками (data-label у ячеек).
   ========================================================================== */

/* --- Корневой шрифт ------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    html, body { font-size: 14px; }
}
@media (max-width: 768px) {
    html, body { font-size: 15px; }
}

/* --- Касание: размеры целей и поля ввода -------------------------------- */
@media (pointer: coarse) {
    .form-control,
    .popover .form-control,
    .modal .form-control,
    select.form-control {
        font-size: 16px;
        min-height: 44px;
    }
    textarea.form-control { min-height: 88px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 44px; padding-top: .55rem; padding-bottom: .55rem; }
    .input-group > .input-group-prepend > .btn,
    .input-group > .input-group-append > .btn { min-width: 44px; }

    /* Кнопки «Визуализация» / «Скачать»: на телефоне только иконки */
    #visualization_btn, #download_html_btn { min-width: 44px; }

    /* Подвал: «О программе», «Скачать», «Linkodium» */
    #kt_footer .kt-link { display: inline-block; padding: 12px 6px; }
    /* Логотип на странице входа — ссылка на промо-сайт */
    .kt-login__logo a { display: inline-block; padding: 12px 0; }
}

/* --- Шапка и меню на телефоне и планшете ------------------------------- */
@media (max-width: 1024px) {
    /* Бургер: зона касания 44px, полоски прежние 26px по центру (span
       позиционирован абсолютно от краёв кнопки). */
    .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toolbar-toggler {
        width: 44px;
        height: 44px;
        margin-right: -9px;
    }
    .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toolbar-toggler span {
        top: 21px;
        left: 9px;
        right: 9px;
        width: auto;
    }
    /* Крестик закрытия меню: был квадратом 25px без значка (иконочный шрифт
       Line Awesome в кабинет не подключён), значок — из Font Awesome. */
    .kt-header-menu-wrapper-close {
        width: 44px !important;
        height: 44px !important;
        left: -44px;
        font-size: 18px;
        line-height: 44px;
        color: #74788d;
    }
    /* Открытое меню шириной 275px: крестик у его правого края, внутри */
    .kt-header-menu-wrapper--on .kt-header-menu-wrapper-close { left: 231px; }
    /* Кнопка «Выход» в верхней панели десктопной шапки на телефоне не нужна
       (выход — в меню) и с увеличенным шрифтом выглядывала из-под шапки. */
    #kt_header .kt-header__topbar .kt-header__topbar-item--search { display: none; }
    .kt-header-menu-mobile .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text,
    .kt-header-menu-mobile .kt-menu__nav > .kt-menu__item > form > .kt-menu__link .kt-menu__link-text {
        font-size: 15px;
    }
    /* «Выход» и «Вернуться в админку» — кнопки в форме: выравниваем их со
       ссылками меню (полная ширина, тот же отступ и высота). */
    .kt-header-menu-mobile .kt-menu__nav > .kt-menu__item > form > .kt-menu__link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 9px 30px;
        text-align: left;
    }
}

/* --- Календарь ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Строка часа — цель для касания: по ней открывается правка записи */
    html body .day .event {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        margin-bottom: 4px !important;
        padding: .4rem .6rem !important;
        font-size: 14px;
        line-height: 1.35;
    }
    html body .day .clock { min-width: 26px; font-size: 14px; }
    html body .day .task { font-size: 14px; }
    html body .day small, html body .day .col.d-sm-none { font-size: 13px; }

    /* Окно правки записи */
    .popover { max-width: calc(100vw - 16px); font-size: 14px; }
    .popover-header { font-size: 15px; }
    .popover .btn { min-height: 44px; }

    /* Статистика «Визуализации» */
    #time_statistics p, #visualization_block p { font-size: 14px; }
    #visualization_block small { font-size: 13px; }

}

/* --- Админка: таблица аккаунтов карточками на телефоне ------------------ */
@media (max-width: 767px) {
    .wa-admin-table thead { display: none; }
    .wa-admin-table,
    .wa-admin-table tbody,
    .wa-admin-table tr,
    .wa-admin-table td { display: block; width: 100%; }
    .wa-admin-table tr {
        margin-bottom: 12px;
        padding: 6px 0;
        border: 1px solid #ebedf2;
        border-radius: 6px;
    }
    .wa-admin-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px;
        border: 0;
        text-align: right;
    }
    .wa-admin-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #74788d;
        text-align: left;
    }
    /* overflow-wrap: длинный email без дефисов вылезал из карточки за край
       экрана (горизонтальная прокрутка всей страницы) */
    .wa-admin-table td.wa-admin-user { display: block; text-align: left; overflow-wrap: anywhere; }
    .wa-admin-table td.wa-admin-user::before { content: none; }
    .wa-admin-table td.text-right { justify-content: flex-end; }
    .wa-admin-table td.text-right::before { content: none; }
    .wa-admin-table .wa-admin-empty { display: block; text-align: center; }
    .wa-admin-table .wa-admin-empty::before { content: none; }
    .wa-admin-wrap.table-responsive { overflow-x: visible; }
}

/* Десктоп: Metronic считает эти размеры от корневых 13px, выходило 10.4–11.4px
   (пояснение под «Выйти на всех устройствах», счётчик аккаунтов в админке). */
@media (min-width: 1025px) {
    .kt-badge.kt-badge--inline, .btn-sm { font-size: 12px; }
    html body .kt-font-sm { font-size: 12px !important; }
}

@media (max-width: 1024px) {
    .kt-badge.kt-badge--inline { font-size: 13px; white-space: nowrap; }
    /* Пояснения мелким шрифтом (например, под «Выйти на всех устройствах»);
       в бандле у .kt-font-sm стоит !important */
    html body .kt-font-sm { font-size: 13px !important; }
    html body .day.current-day .today-label { font-size: 13px; }
    .btn-sm { font-size: 13px; }
}

/* Планшет с касанием: в календаре сетка по дням недели остаётся, но строка
   часа — полноценная цель для пальца (была 23px). */
@media (min-width: 768px) and (pointer: coarse) {
    html body .day .event {
        min-height: 44px;
        display: flex !important;
        align-items: center;
        font-size: 13px;
    }
    html body .day .clock, html body .day .task { font-size: 13px; }
    #visualization_block small { font-size: 13px; }
}

/* --- Модальные окна ------------------------------------------------------- */
/* Крестик в шапке модалки (например, «Редактирование пользователя») был
   невидим на всех ширинах: значок у Metronic — из шрифта Line Awesome, а он в
   кабинет не подключён (как и у крестика меню выше). Значок — из Font Awesome. */
.modal .modal-content .modal-header .close:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d";
}

/* --- Длинные слова ------------------------------------------------------- */
/* Имя/должность сотрудника одним длинным словом («…-Длиннофамильный»)
   вылезали из узкой боковой колонки календаря на сетку. */
.kt-notification-v2 .kt-notification-v2__item-title,
.kt-notification-v2 .kt-notification-v2__item-desc { overflow-wrap: anywhere; }