/*
 * mod_back 2.2.0 — фиксированные размеры панели и интеграция с темами сайта.
 * Этот файл намеренно подключается после style.css: сохраняет логику формы,
 * переопределяя лишь геометрию и палитру. Не зависит от JavaScript темы.
 */

/* Ширина inline — вся доступная ширина позиции Joomla, без прежних 960px. */
.mod-back-root.mod-back-inline-mode {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--mod-back-panel-height, 650px);
    min-height: 0;
}
.mod-back-root.mod-back-inline-mode > .mod-back-inner {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.mod-back-root.mod-back-inline-mode > .mod-back-inner > .mod-back-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Общая высота модального окна всегда равна параметру panel_height.
 * На маленьком дисплее не укорачиваем панель, а даём скролл оверлею. */
.mod-back-overlay {
    overflow-x: hidden;
    overflow-y: auto;
    align-items: flex-start;
    justify-content: center;
    overscroll-behavior: contain;
}
.mod-back-overlay .mod-back-modal {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: min(880px, 100%);
    min-width: 0;
    height: var(--mod-back-panel-height, 650px);
    min-height: var(--mod-back-panel-height, 650px);
    max-height: none;
    margin: auto;
    overflow: hidden;
}
.mod-back-overlay .mod-back-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.mod-back-overlay .mod-back-modal-body > .mod-back-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* В каждом состоянии приложения экран занимает высоту панели;
 * длинный контент прокручивается внутри и не увеличивает её высоту. */
.mod-back-inline-mode .mod-back-container > .mod-back-initial,
.mod-back-overlay .mod-back-container > .mod-back-initial,
.mod-back-inline-mode .mod-back-container > .mod-back-account-panel,
.mod-back-overlay .mod-back-container > .mod-back-account-panel,
.mod-back-inline-mode .mod-back-container > .mod-back-public-answers,
.mod-back-overlay .mod-back-container > .mod-back-public-answers,
.mod-back-inline-mode .mod-back-container > .mod-back-stats-view,
.mod-back-overlay .mod-back-container > .mod-back-stats-view {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mod-back-inline-mode .mod-back-container > .mod-back-form,
.mod-back-overlay .mod-back-container > .mod-back-form {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.mod-back-container .mod-back-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Основные цвета при отсутствии переключателя темы. */
.mod-back-root,
.mod-back-overlay {
    --mod-back-primary: var(--mod-back-custom-primary, #2563eb);
    --mod-back-button-bg: var(--mod-back-custom-button, #2563eb);
    --mod-back-on-primary: #ffffff;
}
.mod-back-root .mod-back-container,
.mod-back-overlay .mod-back-container {
    --mod-back-primary: var(--mod-back-custom-primary, #2563eb);
    --mod-back-on-primary: #ffffff;
}
.mod-back-root .mod-back-open-btn {
    background: var(--mod-back-button-bg, #2563eb);
    color: var(--mod-back-on-primary, #fff);
}
.mod-back-container .mod-back-write-btn,
.mod-back-container .mod-back-btn-primary,
.mod-back-container .mod-back-btn-success,
.mod-back-container .mod-back-search-btn {
    color: var(--mod-back-on-primary, #fff);
}

/*
 * На сайте атрибуты цвета и темноты задаются HTML-элементу.
 * CSS-переменные меняются самим шаблоном при выборе палитры:
 * blue, green, purple, red, brown, orange и любая из них + dark.
 * Поскольку диалог переносится в body, правила работают для него отдельно.
 */
html[data-bkx-theme] .mod-back-root,
html[data-bkx-theme] .mod-back-overlay,
html[data-bkx-theme] .mod-back-root .mod-back-container,
html[data-bkx-theme] .mod-back-overlay .mod-back-container {
    --mod-back-primary: var(--bkx-theme-main-2, #31594d);
    --mod-back-primary-dark: var(--bkx-theme-main, #173f34);
    --mod-back-button-bg: var(--bkx-theme-main-2, #31594d);
    --mod-back-on-primary: var(--bkx-theme-paper, #ffffff);
    --mod-back-text: var(--bkx-theme-main, #173f34);
    --mod-back-muted: var(--bkx-theme-muted, #64756e);
    --mod-back-border: var(--bkx-theme-line, #b9c4bd);
    --mod-back-surface: var(--bkx-theme-card, #ffffff);
    --mod-back-subtle: var(--bkx-theme-paper-2, #f8f6ef);
    --mod-back-soft-primary: var(--bkx-theme-soft, #e3e9dc);
    --mod-back-input-surface: var(--bkx-theme-paper-2, #f8f6ef);
    --mod-back-hover-surface: var(--bkx-theme-soft-2, #edf0e7);
    --mod-back-accent-surface: var(--bkx-theme-card-2, #e7ece9);
    color: var(--mod-back-text);
    color-scheme: normal;
}
/* color-scheme:dark — нативные поля, полосы прокрутки, календарь. */
html[data-bkx-mode="dark"] .mod-back-root,
html[data-bkx-mode="dark"] .mod-back-overlay,
html[data-bkx-mode="dark"] .mod-back-container,
html[data-bkx-theme="dark"] .mod-back-root,
html[data-bkx-theme="dark"] .mod-back-overlay,
html[data-bkx-theme="dark"] .mod-back-container { color-scheme: dark; }

html[data-bkx-theme] .mod-back-root .mod-back-open-btn {
    background: var(--mod-back-button-bg);
    color: var(--mod-back-on-primary);
    border-color: transparent;
    box-shadow: 0 9px 25px color-mix(in srgb, var(--mod-back-primary), transparent 80%);
}
html[data-bkx-theme] .mod-back-root .mod-back-open-btn:hover {
    background: var(--mod-back-primary-dark);
    color: var(--mod-back-on-primary);
}
html[data-bkx-theme] .mod-back-inline-mode > .mod-back-inner,
html[data-bkx-theme] .mod-back-root .mod-back-container,
html[data-bkx-theme] .mod-back-overlay .mod-back-modal,
html[data-bkx-theme] .mod-back-overlay .mod-back-modal-body,
html[data-bkx-theme] .mod-back-overlay .mod-back-container {
    background: var(--mod-back-surface);
    color: var(--mod-back-text);
    border-color: var(--mod-back-border);
}
/* Панели мастера не должны оставаться белыми в тёмной теме. */
html[data-bkx-theme] .mod-back-container .mod-back-form,
html[data-bkx-theme] .mod-back-container .mod-back-tab-content,
html[data-bkx-theme] .mod-back-container .mod-back-tab-panel,
html[data-bkx-theme] .mod-back-container .mod-back-initial,
html[data-bkx-theme] .mod-back-container .mod-back-login-form,
html[data-bkx-theme] .mod-back-container .mod-back-account-panel,
html[data-bkx-theme] .mod-back-container .mod-back-public-answers,
html[data-bkx-theme] .mod-back-container .mod-back-stats-view {
    background: var(--mod-back-surface);
    color: var(--mod-back-text);
}
html[data-bkx-theme] .mod-back-container .mod-back-tab.active:disabled {
    opacity: 1;
    cursor: default;
}
html[data-bkx-theme] .mod-back-container .mod-back-avatar {
    color: var(--mod-back-on-primary);
}
html[data-bkx-theme] .mod-back-container .mod-back-math-label,
html[data-bkx-theme] .mod-back-container .mod-back-file-item .file-size {
    color: var(--mod-back-muted);
}
html[data-bkx-theme] .mod-back-container .mod-back-btn:not(.mod-back-btn-primary):not(.mod-back-btn-secondary):not(.mod-back-btn-success):hover {
    color: var(--mod-back-on-primary);
}
html[data-bkx-theme] .mod-back-inline-mode > .mod-back-inner {
    box-shadow: 0 12px 38px color-mix(in srgb, var(--mod-back-text), transparent 92%);
}
html[data-bkx-theme] .mod-back-overlay .mod-back-modal-header,
html[data-bkx-theme] .mod-back-container .mod-back-tabs-wrapper,
html[data-bkx-theme] .mod-back-container .mod-back-tab-footer {
    background: var(--mod-back-subtle);
    border-color: var(--mod-back-border);
}
html[data-bkx-theme] .mod-back-overlay .mod-back-modal-header span,
html[data-bkx-theme] .mod-back-container :is(h2, h3, h4, h5, h6),
html[data-bkx-theme] .mod-back-container .mod-back-account-header,
html[data-bkx-theme] .mod-back-container .mod-back-card-header,
html[data-bkx-theme] .mod-back-container .mod-back-field label {
    color: var(--mod-back-text);
}
html[data-bkx-theme] .mod-back-overlay .mod-back-modal-close,
html[data-bkx-theme] .mod-back-container .mod-back-btn-secondary,
html[data-bkx-theme] .mod-back-container .mod-back-tab-arrow,
html[data-bkx-theme] .mod-back-container .mod-back-files-scroll-btn {
    background: var(--mod-back-surface);
    color: var(--mod-back-text);
    border-color: var(--mod-back-border);
}
html[data-bkx-theme] .mod-back-overlay .mod-back-modal-close:hover,
html[data-bkx-theme] .mod-back-container .mod-back-btn-secondary:hover,
html[data-bkx-theme] .mod-back-container .mod-back-tab-arrow:hover {
    background: var(--mod-back-hover-surface);
    color: var(--mod-back-text);
    border-color: var(--mod-back-primary);
}
html[data-bkx-theme] .mod-back-container .mod-back-write-btn,
html[data-bkx-theme] .mod-back-container .mod-back-btn-primary,
html[data-bkx-theme] .mod-back-container .mod-back-btn-success,
html[data-bkx-theme] .mod-back-container .mod-back-search-btn {
    background: var(--mod-back-primary);
    border-color: var(--mod-back-primary);
    color: var(--mod-back-on-primary);
}
html[data-bkx-theme] .mod-back-container .mod-back-write-btn:hover,
html[data-bkx-theme] .mod-back-container .mod-back-btn-primary:hover,
html[data-bkx-theme] .mod-back-container .mod-back-btn-success:hover,
html[data-bkx-theme] .mod-back-container .mod-back-search-btn:hover {
    background: var(--mod-back-primary-dark);
    border-color: var(--mod-back-primary-dark);
    color: var(--mod-back-on-primary);
}
html[data-bkx-theme] .mod-back-container .mod-back-tab {
    color: var(--mod-back-muted);
}
html[data-bkx-theme] .mod-back-container .mod-back-tab.active {
    color: var(--mod-back-primary);
    background: var(--mod-back-soft-primary);
}
html[data-bkx-theme] .mod-back-container .mod-back-tab:not(.active):hover {
    background: var(--mod-back-hover-surface);
    color: var(--mod-back-text);
}
html[data-bkx-theme] .mod-back-container .mod-back-tab-indicator {
    background: var(--mod-back-primary);
}
html[data-bkx-theme] .mod-back-container .mod-back-card,
html[data-bkx-theme] .mod-back-container .mod-back-message-card,
html[data-bkx-theme] .mod-back-container .mod-back-public-item,
html[data-bkx-theme] .mod-back-container .mod-back-stat,
html[data-bkx-theme] .mod-back-container .mod-back-file-item,
html[data-bkx-theme] .mod-back-container .mod-back-coauthor-card {
    background: var(--mod-back-surface);
    color: var(--mod-back-text);
    border-color: var(--mod-back-border);
}
html[data-bkx-theme] .mod-back-container .mod-back-stat,
html[data-bkx-theme] .mod-back-container .mod-back-math-captcha-row {
    background: var(--mod-back-subtle);
}
html[data-bkx-theme] .mod-back-container :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),
html[data-bkx-theme] .mod-back-container .custom-select .selected,
html[data-bkx-theme] .mod-back-container .custom-select .options,
html[data-bkx-theme] .mod-back-container .mod-back-official-list-container,
html[data-bkx-theme] .mod-back-container .mod-back-patronymic-wrapper .mod-back-toggle-patr {
    background: var(--mod-back-input-surface);
    color: var(--mod-back-text);
    border-color: var(--mod-back-border);
}
html[data-bkx-theme] .mod-back-container :is(input,textarea)::placeholder {
    color: var(--mod-back-muted);
    opacity: .9;
}
html[data-bkx-theme] .mod-back-container .custom-select li:hover,
html[data-bkx-theme] .mod-back-container .mod-back-official-item:hover {
    background: var(--mod-back-hover-surface);
    color: var(--mod-back-text);
}
html[data-bkx-theme] .mod-back-container .custom-select li.selected-item,
html[data-bkx-theme] .mod-back-container .mod-back-official-item.selected {
    background: var(--mod-back-soft-primary);
    color: var(--mod-back-text);
}
html[data-bkx-theme] .mod-back-container .mod-back-account-info,
html[data-bkx-theme] .mod-back-container .mod-back-account-messages,
html[data-bkx-theme] .mod-back-container .mod-back-official-placeholder,
html[data-bkx-theme] .mod-back-container .mod-back-field-help,
html[data-bkx-theme] .mod-back-container .mod-back-search-result small,
html[data-bkx-theme] .mod-back-container .mod-back-stat span {
    color: var(--mod-back-muted);
}
html[data-bkx-theme] .mod-back-container .mod-back-search-result,
html[data-bkx-theme] .mod-back-container .admin-reply,
html[data-bkx-theme] .mod-back-container .mod-back-account-feedback,
html[data-bkx-theme] .mod-back-container .mod-back-file-link {
    background: var(--mod-back-accent-surface);
    color: var(--mod-back-text);
    border-color: var(--mod-back-border);
}
html[data-bkx-theme] .mod-back-container .mod-back-file-link:hover {
    background: var(--mod-back-hover-surface);
}
html[data-bkx-theme] .mod-back-container .mod-back-success-message .mod-back-card,
html[data-bkx-theme] .mod-back-container .mod-back-auth-status .mod-back-card {
    background: var(--mod-back-soft-primary);
    color: var(--mod-back-text);
    border-color: var(--mod-back-border);
}
html[data-bkx-theme] .mod-back-container .mod-back-success-message h4 {
    color: var(--mod-back-text);
}
html[data-bkx-theme] .mod-back-container .mod-back-math-input input,
html[data-bkx-theme] .mod-back-container .mod-back-search-box input {
    background: var(--mod-back-input-surface);
    border-color: var(--mod-back-border);
    color: var(--mod-back-text);
}
html[data-bkx-theme] .mod-back-container :is(button,a):focus-visible,
html[data-bkx-theme] .mod-back-container :is(input,textarea,select):focus-visible {
    outline-color: var(--mod-back-primary);
}

/* Надёжный последний слой — при малом viewport высота не превращается в 100dvh.
 * Внешний скролл модалки обеспечивает доступ и к заголовку, и к нижним кнопкам. */
@media (max-width: 700px) {
    .mod-back-overlay { padding: 12px; align-items: flex-start; }
    .mod-back-overlay .mod-back-modal {
        width: 100%;
        max-width: 100%;
        height: var(--mod-back-panel-height, 650px);
        min-height: var(--mod-back-panel-height, 650px);
        max-height: none;
        border: 1px solid var(--mod-back-border, #dce5ef);
        border-radius: 15px;
    }
}

/* Совместимость с глобальными сбросами #bukreevsky-demo-root из шаблона сайта:
 * там на все button/input и h3 наложены правила с ID-специфичностью. */
#bukreevsky-demo-root .mod-back-container :is(.mod-back-write-btn,.mod-back-btn-primary,.mod-back-btn-success,.mod-back-search-btn),
#bukreevsky-demo-root .mod-back-container :is(.mod-back-write-btn,.mod-back-btn-primary,.mod-back-btn-success,.mod-back-search-btn):hover {
    color: var(--mod-back-on-primary, #fff);
}
#bukreevsky-demo-root .mod-back-container :is(.mod-back-btn-secondary,.mod-back-tab,.mod-back-field input,.mod-back-field textarea,.mod-back-search-input) {
    color: var(--mod-back-text, #16243a);
}
#bukreevsky-demo-root .mod-back-container .mod-back-btn { font-size: 14px; font-weight: 650; }
#bukreevsky-demo-root .mod-back-container .mod-back-write-btn { font-size: 15px; font-weight: 700; }
#bukreevsky-demo-root .mod-back-container .mod-back-tab { font-size: 13px; font-weight: 650; }
#bukreevsky-demo-root .mod-back-container .mod-back-btn-primary { border: 1px solid var(--mod-back-primary, #2563eb); }
#bukreevsky-demo-root .mod-back-container .mod-back-btn-secondary { border: 1px solid var(--mod-back-border, #dce5ef); }
#bukreevsky-demo-root .mod-back-container h3 {
    font-family: inherit;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.015em;
}
html[data-bkx-theme] #bukreevsky-demo-root .mod-back-container .mod-back-tab.active {
    color: var(--mod-back-primary);
}

/* 2.2.1: абзацы из текстовых настроек textarea.
 * Для HTML-полей оставляем прежнюю разметку, для обычного текста формируем <p>/<br>. */
.mod-back-container .mod-back-settings-text--plain {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.mod-back-container .mod-back-settings-text--plain > p {
    margin: 0;
    line-height: 1.65;
    overflow-wrap: anywhere;
}