/* ============================================================
   KIPIA Portal — мобильная адаптация
   Подключать ПОСЛЕДНИМ после style.css/editor.css/tickets.css
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* Длинный текст не должен раздвигать экран */
.content,
.question-card,
.answer-section,
.exam-ticket-sheet,
.ticket-question-text,
.rich-editor {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Таблицы в учебных материалах и ответах */
.content table,
.answer-section table,
.rich-editor table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   ПЛАНШЕТ / УЗКИЙ ЭКРАН
   ============================================================ */

@media (max-width: 900px) {

    /* --------------------------------------------------------
       ШАПКА
       -------------------------------------------------------- */

    .header {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .header-brand {
        width: 100% !important;
        min-width: 0 !important;
    }

    .header-title {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    .header-subtitle {
        margin-top: 3px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    /* Верхнее меню на телефоне прокручивается пальцем */
    .portal-nav {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: 2px 0 5px !important;
    }

    .portal-nav a {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        padding: 9px 12px !important;
    }

    /* Поиск */
    .header-search {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        position: relative !important;
    }

    .header-search input {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
    }

    .header-search button {
        min-height: 44px !important;
        white-space: nowrap !important;
    }

    .search-suggestions {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --------------------------------------------------------
       ГЛАВНАЯ УЧЕБНАЯ ПРОГРАММА
       -------------------------------------------------------- */

    .layout {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    /* Дерево разделов становится верхней прокручиваемой панелью */
    .sidebar {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: 42vh !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        border-right: 0 !important;
    }

    .sidebar-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    .tree,
    .tree-children {
        max-width: 100% !important;
    }

    .tree-row {
        min-width: 0 !important;
    }

    .tree-link {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .tree-toggle,
    .tree-toggle-placeholder {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-height: 36px !important;
    }

    .content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 18px 14px 40px !important;
        overflow: visible !important;
    }

    .breadcrumb,
    .ticket-breadcrumb {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        line-height: 1.45 !important;
        min-width: 0 !important;
    }

    .content-title-row,
    .question-title-row,
    .answer-heading-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .content-title-row h1,
    .question-title-row h1 {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .edit-button,
    .question-title-edit-button {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* --------------------------------------------------------
       БИЛЕТЫ / ВОПРОСЫ
       -------------------------------------------------------- */

    .ticket-page,
    .question-page,
    .tickets-page,
    .search-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 18px 12px 40px !important;
    }

    .ticket-context,
    .exam-ticket-sheet,
    .question-card,
    .answer-section {
        max-width: 100% !important;
    }

    .exam-ticket-sheet,
    .question-card,
    .answer-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ticket-question-list {
        padding-left: 24px !important;
    }

    .ticket-question-list li {
        padding-left: 2px !important;
    }

    .ticket-question-link {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .ticket-question-text {
        width: 100% !important;
        min-width: 0 !important;
    }

    .answer-status {
        align-self: flex-start !important;
        white-space: normal !important;
    }

    .ticket-navigation {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ticket-navigation > div,
    .ticket-navigation > a {
        width: 100% !important;
    }

    .ticket-nav-button,
    .save-button,
    .cancel-button {
        width: 100% !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .ticket-edit-actions,
    .question-edit-actions,
    .editor-actions,
    .form-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .question-title-editor,
    .ticket-add-question-form textarea {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* --------------------------------------------------------
       РЕДАКТОР
       -------------------------------------------------------- */

    .editor-shell,
    .question-answer-editor {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .editor-menubar,
    .editor-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .editor-menubar > *,
    .editor-toolbar > * {
        flex: 0 0 auto !important;
    }

    .editor-toolbar button,
    .editor-toolbar select,
    .program-menu-button {
        min-height: 42px !important;
    }

    .program-menu-dropdown {
        max-width: calc(100vw - 28px) !important;
        max-height: 60vh !important;
        overflow: auto !important;
    }

    .rich-editor {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 360px !important;
        padding: 14px !important;
        overflow-x: auto !important;
    }

    .rich-editor img,
    .answer-section img,
    .content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --------------------------------------------------------
       ОБРАТНАЯ СВЯЗЬ / ДОНАТ
       -------------------------------------------------------- */

    .feedback-page,
    .donate-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        padding: 0 12px 40px !important;
    }

    .feedback-card,
    .donate-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 18px !important;
    }

    .amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ============================================================
   ТЕЛЕФОН
   ============================================================ */

@media (max-width: 560px) {

    .header {
        padding: 10px !important;
        gap: 8px !important;
    }

    .header-title {
        font-size: 20px !important;
    }

    .header-subtitle {
        font-size: 12px !important;
    }

    .portal-nav {
        margin-left: -2px !important;
        margin-right: -2px !important;
    }

    .portal-nav a {
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    .header-search {
        grid-template-columns: 1fr !important;
    }

    .header-search button {
        width: 100% !important;
    }

    /* 16px предотвращает автоматический zoom формы на iPhone */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .sidebar {
        max-height: 36vh !important;
    }

    .content {
        padding: 14px 10px 32px !important;
    }

    .content h1,
    .question-card h1,
    .donate-card h1,
    .feedback-card h1 {
        font-size: clamp(23px, 7vw, 29px) !important;
        line-height: 1.2 !important;
    }

    .content h2,
    .answer-section h2 {
        font-size: clamp(20px, 6vw, 25px) !important;
    }

    .ticket-page,
    .question-page,
    .tickets-page,
    .search-page {
        padding: 14px 8px 32px !important;
    }

    .exam-ticket-sheet,
    .question-card,
    .answer-section,
    .ticket-context {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ticket-question-list {
        padding-left: 22px !important;
    }

    .editor-menubar,
    .editor-toolbar {
        gap: 4px !important;
    }

    .editor-toolbar button,
    .editor-toolbar select,
    .program-menu-button {
        min-height: 40px !important;
        font-size: 14px !important;
    }

    .rich-editor {
        min-height: 300px !important;
        padding: 12px !important;
    }

    .feedback-card,
    .donate-card {
        border-radius: 10px !important;
        padding: 20px 14px !important;
    }

    .amount-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
}


/* ============================================================
   ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ============================================================ */

@media (max-width: 380px) {

    .header-title {
        font-size: 19px !important;
    }

    .portal-nav a {
        font-size: 13px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .amount-grid {
        grid-template-columns: 1fr !important;
    }
}