/* ============ Тёмная тема (П.4) ============ */
/* Инвертируются только цвета приложения; user-content (аватарки, вложения, фото) — нет. */

:root {
    --app-bg: #f8f9fa;
    --app-surface: #ffffff;
    /* Текст на карточках: основной и приглушённый (описания, статусы, подписи).
       Задаются явно для каждой темы — иначе приглушённый текст сливается с фоном. */
    --app-card-text: #212529;
    --app-card-muted: #4a5058;
    /* Фон строк списка игр по статусу. В светлой теме — светлые оттенки,
       в тёмной — тёмные (у завершённых чёрный), иначе bootstrap-овские
       table-*-классы в тёмной теме слишком яркие. */
    --app-game-recruiting: #d1e7dd;
    --app-game-active: #cff4fc;
    --app-game-closed: #f8f9fa;
    --app-logo: url("../assets/logo.png");
    --app-mask-tile: url("../assets/mask-tile.png");
    --app-tile-opacity: .06;
}

html[data-bs-theme="dark"] {
    --app-bg: #1e242c;
    --app-surface: #262d37;
    --app-card-text: #e9edf2;
    --app-card-muted: #c3ccd6;
    --app-game-recruiting: #16341f;
    --app-game-active: #14314a;
    /* Завершённые игры — как карточки форума в тёмной теме */
    --app-game-closed: #262d37;
    /* Заглавный пост/продолжение — заметно светлее и синее фона карточки
       (#262d37). Прежние значения (#232a34 / #33404f) были темнее фона
       и на 3–5 единиц отличались от него — визуально неразличимо. */
    --app-post-op-bg: #2c3849;
    --app-post-op-border: #4c6180;
    --app-post-op-accent: #5b9bd5;
    --app-header-bg: #2a313c;
    --app-muted: #9aa5b1;
    --app-logo: url("../assets/dark-asset.png");
    --app-mask-tile: url("../assets/mask-tile-dark.png");
    --app-tile-opacity: .10;
}

/* Тело страницы: переопределяем .bg-light (фиксированный светло-серый с !important), body — под тему */
html[data-bs-theme] body {
    background-color: var(--app-bg) !important;
    color: var(--bs-body-color);
}

/* Фоновая маска-плитка: подставляем тёмный ассет для тёмной темы */
html[data-bs-theme] body::before {
    background-image: var(--app-mask-tile);
    opacity: var(--app-tile-opacity);
}

/* Логотип: в тёмной теме — dark-asset вместо стандартного */
html[data-bs-theme] .logo-light { display: inline-block; }
html[data-bs-theme] .logo-dark { display: none; }
html[data-bs-theme="dark"] .logo-light { display: none; }
html[data-bs-theme="dark"] .logo-dark { display: inline-block; }

/* Заглавный пост / карточки — тёмные поверхности.
   Ниже идёт общее `html[data-bs-theme="dark"] .card` с тем же значением
   специфичности (0,2,1), но объявленное ПОЗЖЕ, — оно перебивало фон
   заглавного поста, и тот сливался с комментариями. Нужен .card.post-op (0,3,1). */
html[data-bs-theme="dark"] .card.post-op {
    background-color: var(--app-post-op-bg);
    border-color: var(--app-post-op-border);
    border-left-color: var(--app-post-op-accent);
}

/* Карточка в тёмной теме — приглушённая поверхность, а не светлый блок */
html[data-bs-theme="dark"] .card {
    background-color: var(--app-surface);
}

/* Текст карточек и таблиц: основной и приглушённый. Bootstrap в тёмной теме
   оставляет часть подписей (описания, статусы) слишком бледной, а в светлой
   теме некоторые приглушённые оттенки сливаются с фоном карточки. */
html[data-bs-theme] .card,
html[data-bs-theme] .card-body,
html[data-bs-theme] .card-header,
html[data-bs-theme] .card-footer,
html[data-bs-theme] .card-text,
html[data-bs-theme] .list-group-item,
html[data-bs-theme] .table,
html[data-bs-theme] .table td,
html[data-bs-theme] .table th {
    color: var(--app-card-text);
}

html[data-bs-theme] .card .text-muted,
html[data-bs-theme] .list-group-item .text-muted,
html[data-bs-theme] .table .text-muted {
    color: var(--app-card-muted) !important;
}

/* Описание элемента списка и шеврон карточки — цветами темы, не хардкодом */
.list-item-description {
    color: var(--app-card-muted, #495057);
}

.list-item-chevron::before {
    color: var(--app-card-muted, #6c757d);
}

html[data-bs-theme="dark"] .card-header {
    background-color: var(--app-header-bg);
    border-bottom-color: var(--bs-border-color-translucent);
}

html[data-bs-theme="dark"] .card-footer {
    background-color: transparent;
}

/* Закрытые треды в списке — тёмные ряды */
html[data-bs-theme="dark"] .closed-topic-row.closed-for-admin .stretched-link,
html[data-bs-theme="dark"] .closed-topic-row.closed-for-admin h5 a { color: var(--app-muted); }

html[data-bs-theme="dark"] .list-group-item.closed-topic-row:not(.can-interact) {
    background-color: #262d37;
}
html[data-bs-theme="dark"] .list-group-item.closed-topic-row:not(.can-interact) .text-muted { color: var(--app-muted) !important; }

/* Секционные лейблы — светлее в тёмной теме */
html[data-bs-theme="dark"] .section-label { color: var(--app-muted); }

/* Прикладные поверхности/текст с захардкоженными светлыми цветами —
   инвертируются только цвета приложения, не user-content (аватарки, вложения, фото) */
html[data-bs-theme="dark"] .bg-white {
    background-color: var(--app-surface) !important;
}
html[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}
/* .text-bg-light задаёт СВЕТЛЫЙ фон (--bs-light-rgb в тёмной теме не
   инвертируется). Правило .text-dark выше перебивало его цвет текста в
   светлый --bs-body-color, и неактивные чипы фильтров становились
   нечитаемыми (светлый текст на светлом фоне, контраст ≈1:1).
   На светлом фоне текст должен быть тёмным в любой теме. */
html[data-bs-theme="dark"] .text-bg-light {
    color: #1a1d21 !important;
}
html[data-bs-theme="dark"] .border-light {
    border-color: var(--bs-border-color) !important;
}

/* Тумблер темы (слева внизу) */
.theme-toggle {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
    border: 1px solid var(--bs-border-color);
    background-color: var(--app-surface);
    color: var(--bs-body-color);
    opacity: .85;
}

.theme-toggle:hover { opacity: 1; }

/* Кнопка прокрутки вниз (правый нижний угол, в тредах) */
.scroll-bottom-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
    border: 1px solid var(--bs-border-color);
    background-color: var(--app-surface);
    color: var(--bs-body-color);
    opacity: .85;
}

.scroll-bottom-btn:hover { opacity: 1; }

/* ============ Тёмная тема: конец ============ */

[x-cloak] {
    display: none !important;
}

/* Заглавный пост и посты-продолжения — единое отличие от обычных комментариев.
   Селектор .card.post-op, а не .post-op: ниже объявлено общее `.card { border: 0 }`
   с той же специфичностью (0,1,0), из-за чего рамка заглавного поста исчезала. */
.card.post-op {
    background-color: #e8f1fe;
    border: 1px solid #d4e4fb;
    /* Акцентная полоса слева — однозначный признак «пост треда».
       Одного оттенка фона (контраст с карточкой ~1.14:1) недостаточно,
       чтобы различать их при беглом просмотре. Приём уже применяется
       в rpg (.post-master). */
    border-left: 3px solid #1f6fb2;
}

.closed-topic-row.closed-for-admin .stretched-link,
.closed-topic-row.closed-for-admin h5 a { color: #6c757d; }

.list-group-item.closed-topic-row:not(.can-interact) {
    background-color: #e9ecef;
}
.list-group-item.closed-topic-row:not(.can-interact) .text-muted { color: #8a9299 !important; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("../assets/mask-tile.png");
    background-repeat: repeat;
    background-size: 220px 220px;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
}

.navbar,
main,
footer {
    position: relative;
}

/* Только navbar создаёт stacking context (z-index:1): контент main/footer
   никогда не перекрывает фиксированный тумблер темы (z-index:1050 внутри nav),
   а сам main/footer не запирают z-index своих потомков (modal, скролл-кнопка). */
.navbar {
    z-index: 1;
}

main {
    flex: 1;
}

.card {
    border: 0;
}

.card-header {
    background-color: #fff;
    color: inherit;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.section-label {
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6c757d;
}

.module-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
}

/* ============ Список игр: фон строки по статусу ============ */
/* Цвета заданы переменными темы (--app-game-*): в тёмной теме «набор игроков»
   и «идёт игра» — тёмные зелёный и синий, «завершена» — чёрный.
   Фон задаётся именно --bs-table-bg: Bootstrap красит фон ячеек таблицы этой
   переменной, и обычный background-color строки ячейками закрашивается. */

.game-row--recruiting {
    --bs-table-bg: var(--app-game-recruiting);
    --bs-table-color: var(--app-card-text);
}

.game-row--active {
    --bs-table-bg: var(--app-game-active);
    --bs-table-color: var(--app-card-text);
}

.game-row--closed {
    --bs-table-bg: var(--app-game-closed);
    --bs-table-color: var(--app-card-text);
}

.game-row--recruiting .text-muted,
.game-row--active .text-muted,
.game-row--closed .text-muted {
    color: var(--app-card-muted) !important;
}

/* ============ Лист D&D: раздел «Инвентарь» (деньги и предметы) ============ */
/* Разряды монет идут строками, обмен — между ними. */

.money-line {
    display: flex;
    flex-direction: column;
}

.money-kind {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block: .1rem;
}

.money-name {
    min-width: 6.5rem;
}

/* Кнопки ± одной ширины у всех разрядов — иначе числа в строках разъезжаются */
.money-step {
    width: 2.4rem;
    flex: 0 0 2.4rem;
}

.money-step .btn {
    width: 100%;
    padding: 0 .35rem;
    line-height: 1.15;
}

.money-value,
.money-input {
    min-width: 3.5rem;
}

.money-input {
    max-width: 6rem;
}

/* Обмен между разрядами: отступом выровнен по колонке монет */
.money-convert {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .1rem 0 .35rem .5rem;
}

/* ============ Лист персонажа (view) ============ */
/* Не единая таблица с общим столбцом «Значение»: числовые параметры —
   сеткой «название | модификатор | значение» с выровненными колонками,
   текст и списки тянутся на всю оставшуюся ширину строки. */

.rpg-attrs {
    display: grid;
    grid-template-columns: 13rem auto;
    align-items: baseline;
    column-gap: .9rem;
    padding-block: .25rem;
}

/* Строка параметра: имя в левой колонке, значение — вплотную справа */
.rpg-attrs > .rpg-name,
.rpg-attrs > .rpg-value {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-block: .26rem;
}

.rpg-name {
    font-size: .95rem;
}

.rpg-value {
    font-size: .95rem;
    text-align: right;
}

/* Значение, растянутое на обе колонки (когда имя дублирует заголовок раздела) */
.rpg-value.wide {
    grid-column: 1 / -1;
    text-align: left;
}

/* Модификатор и значение — одной строкой: "10 (+1)", цифры ровной ширины */
.rpg-value .rpg-text {
    white-space: pre-wrap;
    text-align: right;
}

.rpg-value .rpg-list ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Заголовок раздела — заметная лента на всю ширину (view и форма) */
.rpg-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-top: .55rem;
    padding: .42rem 1rem;
    background: rgba(var(--bs-primary-rgb), .07);
    border-color: var(--bs-border-color-translucent);
    border-style: solid;
    border-width: 1px 0;
    border-left: 3px solid var(--bs-primary);
}

.rpg-attrs > .rpg-section:first-child {
    margin-top: .1rem;
}

.rpg-section::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    position: relative;
    top: -.35em;
}

.rpg-section-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-body-color);
}

/* Подзаголовок (например, способность в блоке навыков) —
   заметный, но приглушённее основного текста параметров */
.rpg-subcaption {
    grid-column: 1 / -1;
    margin-top: .35rem;
    padding: .1rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
}

.rpg-attrs > .rpg-subcaption + .rpg-subcaption {
    margin-top: 0;
}