/* ═══════════════════════════════════════════════════════════════════════
   compat-tokens.css — v1.31.54 (patch 64)

   АЛИАСЫ ДИЗАЙН-ТОКЕНОВ.
   Множество модулей (особенно патчи 56–63) ссылаются на CSS-переменные по
   сокращённым/альтернативным именам, которых не было в :root:
       --bg-elev   (реальная: --bg-elevated)
       --bg        (реальная: --bg-base)
       --bad / --danger / --info / --success / --warn  (семантические)
       --bg-primary / --bg-tertiary / --msg-text / --color-text-* и др.
   Из-за этого фоны/цвета рендерились как «пусто» (прозрачные), что выглядело
   как «нет CSS-оформления». Этот файл сопоставляет алиасы с реальными
   токенами — фикс распространяется на ВСЕ модули сразу, без правки 119 файлов.

   Подключать ПОСЛЕ main.css (чтобы :root уже существовал) и до прочих.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"],
[data-theme="light"] {
    /* — фоновые алиасы — */
    --bg-elev: var(--bg-elevated);
    --bg-elevated-2: var(--bg-raised, var(--bg-elevated));
    --bg: var(--bg-base);
    --bg-primary: var(--bg-base);
    --bg-secondary-alias: var(--bg-secondary);
    --bg-tertiary: var(--bg-secondary, var(--bg-elevated));
    --bg-panel: var(--bg-elevated);
    --panel: var(--bg-elevated);
    --panel2: var(--bg-secondary, var(--bg-elevated));

    /* — текстовые алиасы — */
    --text: var(--text-primary);
    --text-dim: var(--text-muted);
    --msg-text: var(--text-primary);
    --color-text-danger: var(--red, #ff5f5f);
    --color-text-warning: var(--gold, #d8a657);

    /* — границы — */
    --border-color: var(--border);
    --border-soft: var(--border);

    /* — семантические цвета (раньше существовали только с fallback) — */
    --bad: var(--red, #ff5f5f);
    --danger: var(--red, #ff5f5f);
    --red-dim: rgba(255, 95, 95, 0.15);
    --success: var(--green, #3dd68c);
    --good: var(--green, #3dd68c);
    --warn: var(--gold, #d8a657);
    --yellow: var(--gold, #d8a657);
    --orange: #e8924a;
    --info: var(--accent2, #5b8cff);
    --accent2: var(--accent2, #5b8cff);
    --accent-dim: var(--accent-soft, rgba(79, 138, 255, 0.15));
    --gold: var(--gold, #d8a657);
}

/* На случай, если --accent2 не объявлен базовой темой — даём явное значение. */
:root { --accent2: #5b8cff; }
[data-theme="light"] { --accent2: #3a6fd8; }

/* ═══════════════════════════════════════════════════════════════════════
   ГЛОБАЛЬНАЯ ЗАЩИТА ОТ ПЕРЕПОЛНЕНИЯ МОДАЛОК
   Многие модули создают .modal-overlay > .modal с inline-стилями, не задавая
   max-height/overflow → на низких экранах контент уходит за край и кнопки
   снизу становятся недоступны. Этот safety-net гарантирует прокрутку.
   Inline-стили модулей переопределяют конкретику (ширину и т.п.), но базовые
   ограничения высоты применяются, если модуль их не задал.
   ═══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-overlay > .modal {
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* скругление; скроллит .modal-body */
}
.modal-overlay > .modal > .modal-body,
.modal-overlay > .modal > .modal-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
}
/* Заголовок и футер модалки не сжимаются при прокрутке тела. */
.modal-overlay > .modal > .modal-header,
.modal-overlay > .modal > .modal-footer { flex-shrink: 0; }

@media (max-width: 600px) {
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-overlay > .modal { max-height: 92vh; width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.31.60 — фикс ещё 7 неопределённых CSS-переменных (аудит баг-фикс)
   Найдены при сквозной проверке: использовались без fallback и без
   определения → прозрачные/сломанные фоны. Сопоставляем с реальными.
   ═══════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"],
[data-theme="light"] {
    --bg-card: var(--bg-elevated);                 /* карточки (35 использований без fallback) */
    --bg-input: var(--bg-secondary, var(--bg-base));
    --bg-surface: var(--bg-elevated);
    --border-default: var(--border);
    --color-background-info: rgba(91, 140, 255, 0.12);
    --color-border-danger: var(--red, #ff5f5f);
    --color-text-info: var(--accent2, #5b8cff);
}