/*
 * Клубная тема поверх Tailwind - для админки и директорской.
 *
 * Панели свёрстаны утилитами Tailwind из CDN: bg-white, text-gray-700 и так
 * далее, светлыми по умолчанию. Переписывать разметку семнадцати страниц ради
 * цвета - это переписывать работающие панели, а они ведут живые турниры.
 * Поэтому файл не трогает разметку вовсе: он перекрашивает те самые утилиты,
 * которыми они уже свёрстаны.
 *
 * Селекторы начинаются с body, и это не украшение. Tailwind из CDN
 * добавляет свои правила в <style> уже во время работы страницы, то есть
 * после нашего <link>: при равной силе побеждал бы он. Лишний body поднимает
 * силу на единицу, и порядок перестаёт что-либо решать.
 *
 * Красим только поверхности и текст. Отступы, сетку и поведение не трогаем -
 * там, где Tailwind считает размеры, ошибиться легко, а заметить трудно.
 */

body.club-panel {
    background: var(--club-bg) !important;
    background-attachment: fixed;
    color: var(--club-ink);
}

/* ---------- поверхности ---------- */

body.club-panel .bg-white,
body.club-panel .bg-gray-50,
body.club-panel .bg-gray-100,
body.club-panel .bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--club-line);
}
body.club-panel .shadow,
body.club-panel .shadow-lg,
body.club-panel .shadow-md { box-shadow: none !important; }

/* Строки таблиц и списков: чуть светлее фона, но не белые - иначе получается
   светлая заплата посреди тёмной страницы. */
body.club-panel tbody tr:nth-child(odd) { background-color: rgba(255, 255, 255, 0.02); }
body.club-panel thead { background-color: rgba(255, 215, 0, 0.06); }
body.club-panel th { color: var(--club-gold-soft) !important; }
body.club-panel td, body.club-panel tr { border-color: var(--club-line) !important; }

/*
 * Бледные цветные подложки - зелёные подсказки, жёлтые предупреждения, красные
 * ошибки. Смысл несёт цвет, поэтому их не гасим, а затемняем: тот же оттенок,
 * только под тёмный фон. Оставить как есть нельзя - текст на них наш общий
 * ниже белеет, и получается белым по светло-зелёному, то есть никак.
 */
body.club-panel .bg-green-50, body.club-panel .bg-green-100,
body.club-panel .bg-emerald-50, body.club-panel .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.14) !important;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
body.club-panel .bg-red-50, body.club-panel .bg-red-100,
body.club-panel .bg-rose-50, body.club-panel .bg-rose-100 {
    background-color: rgba(225, 29, 46, 0.14) !important;
    border: 1px solid rgba(225, 29, 46, 0.35);
}
body.club-panel .bg-yellow-50, body.club-panel .bg-yellow-100,
body.club-panel .bg-amber-50, body.club-panel .bg-amber-100,
body.club-panel .bg-orange-50, body.club-panel .bg-orange-100 {
    background-color: rgba(255, 215, 0, 0.12) !important;
    border: 1px solid var(--club-line);
}
body.club-panel .bg-blue-50, body.club-panel .bg-blue-100,
body.club-panel .bg-sky-50, body.club-panel .bg-sky-100,
body.club-panel .bg-indigo-50, body.club-panel .bg-indigo-100,
body.club-panel .bg-purple-50, body.club-panel .bg-purple-100,
body.club-panel .bg-violet-50, body.club-panel .bg-violet-100 {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid var(--club-line);
}

/* ---------- текст ---------- */

body.club-panel .text-gray-900,
body.club-panel .text-gray-800,
body.club-panel .text-gray-700 { color: var(--club-ink) !important; }
body.club-panel .text-gray-600,
body.club-panel .text-gray-500,
body.club-panel .text-gray-400 { color: var(--club-muted) !important; }
body.club-panel h1, body.club-panel h2 { color: var(--club-gold); }

/*
 * Цветной текст на цветных плашках.
 *
 * Это и было «белым по белому», о котором сказал клуб, только наоборот:
 * тёмным по тёмному. Бледные подложки я затемнил - а текст на них остался
 * тёмным, каким Tailwind его и задумал для светлой темы. Получилось
 * text-purple-800 поверх почти чёрного фона: значок есть, прочесть нельзя.
 * Только на расписании таких оказалось двести пять.
 *
 * Осветляем, сохраняя оттенок: цвет здесь несёт смысл - синее это «запланировано»,
 * красное «отменено», зелёное «оплачено». Перекрасить всё в белое значило бы
 * убрать признак, по которому строку узнают не читая.
 */
body.club-panel .text-red-600, body.club-panel .text-red-700,
body.club-panel .text-red-800, body.club-panel .text-red-900,
body.club-panel .text-rose-600, body.club-panel .text-rose-700,
body.club-panel .text-rose-800 { color: #ff8a95 !important; }

body.club-panel .text-green-600, body.club-panel .text-green-700,
body.club-panel .text-green-800, body.club-panel .text-green-900,
body.club-panel .text-emerald-600, body.club-panel .text-emerald-700,
body.club-panel .text-emerald-800, body.club-panel .text-teal-700 { color: #5ee0a8 !important; }

body.club-panel .text-blue-600, body.club-panel .text-blue-700,
body.club-panel .text-blue-800, body.club-panel .text-blue-900,
body.club-panel .text-sky-600, body.club-panel .text-sky-700,
body.club-panel .text-sky-800 { color: #7cc4ff !important; }

body.club-panel .text-indigo-600, body.club-panel .text-indigo-700,
body.club-panel .text-indigo-800, body.club-panel .text-indigo-900,
body.club-panel .text-purple-600, body.club-panel .text-purple-700,
body.club-panel .text-purple-800, body.club-panel .text-violet-700,
body.club-panel .text-violet-800, body.club-panel .text-pink-700,
body.club-panel .text-pink-800 { color: #c9a7ff !important; }

body.club-panel .text-yellow-600, body.club-panel .text-yellow-700,
body.club-panel .text-yellow-800, body.club-panel .text-yellow-900,
body.club-panel .text-amber-600, body.club-panel .text-amber-700,
body.club-panel .text-amber-800, body.club-panel .text-orange-600,
body.club-panel .text-orange-700, body.club-panel .text-orange-800,
body.club-panel .text-amber-900, body.club-panel .text-orange-900 { color: var(--club-gold-soft) !important; }

/* ---------- поля ввода ---------- */

body.club-panel input, body.club-panel select, body.club-panel textarea {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--club-ink) !important;
    border-color: var(--club-line) !important;
}
body.club-panel input::placeholder, body.club-panel textarea::placeholder { color: var(--club-muted); }
body.club-panel option { background: #12060a; color: var(--club-ink); }

/* ---------- кнопки ---------- */

/*
 * Цветные кнопки оставляем цветными: зелёная «сохранить» и красная «удалить»
 * различаются в панели не текстом, а цветом, и перекрасить их в золото значило
 * бы отнять у флора единственный быстрый признак. Меняем только серые - те,
 * что на тёмном фоне сливаются с ним.
 */
body.club-panel .bg-gray-200,
body.club-panel .bg-gray-300 {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--club-ink) !important;
    border: 1px solid var(--club-line);
}
body.club-panel .hover\:bg-gray-50:hover,
body.club-panel .hover\:bg-gray-100:hover,
body.club-panel .hover\:bg-gray-300:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Карточки-ссылки на главной директорской: у них свой набор пастельных фонов,
   и каждый следующий раздел приносит новый оттенок. Гасим их разом. */
body.club-panel .nav-card {
    background-color: var(--club-glass) !important;
    border-color: var(--club-line) !important;
}
body.club-panel .nav-card:hover { border-color: var(--club-gold) !important; }
body.club-panel .nav-card span { color: var(--club-gold) !important; }

/*
 * Свои классы страниц с зашитым светлым фоном.
 *
 * Это и есть то самое «белым по белому», о котором сказал клуб. Модальное окно
 * покрашено правилом `.modal-content { background-color: white }` в теге
 * <style> самой страницы, а текст в нём - утилитами Tailwind, которые общая
 * тема уже перекрасила в белый. Окно осталось белым, буквы стали белыми, и
 * форма «Добавить игрока» превратилась в пустой лист.
 *
 * Заметить это раньше было нельзя обычным взглядом: окна лежат в разметке
 * скрытыми и всплывают только по нажатию. Нашлись они, когда я стал раскрывать
 * скрытое перед проверкой.
 *
 * Селектор с body бьёт правило страницы по силе, поэтому порядок подключения
 * роли не играет.
 */
body.club-panel .modal-content,
body.club-panel .notification-card,
body.club-panel .access-card,
body.club-panel .content-card,
body.club-panel .stat-card,
body.club-panel .mobile-player-card,
body.club-panel .mobile-game-card,
body.club-panel .player-mobile-card,
body.club-panel .period-btn {
    background-color: #14090f !important;
    border: 1px solid var(--club-line);
    color: var(--club-ink);
}
/*
 * Тело модального окна непрозрачно, даже когда оно свёрстано утилитой.
 *
 * Стеклянные поверхности задуманы для карточек: полупрозрачный белый лежит на
 * фоне страницы и читается слоем. Модальное окно свёрстано той же утилитой
 * `bg-white`, но лежит поверх страницы - и пять процентов белого превращают его
 * в стекло: сквозь форму «Добавить игрока» просвечивает таблица игроков, буквы
 * ложатся на буквы. Клуб описал это как «замыливается».
 *
 * Прошлый раз закрыты были только свои классы страниц (.modal-content и
 * соседи), а половина окон покрашена утилитой - в админке и на четырёх
 * страницах директорской. Признак окна здесь не класс, а место: прямой ребёнок
 * полноэкранного слоя (`fixed inset-0` у Tailwind, `.modal` у страниц со своим
 * стилем). Вложенные внутрь карточки остаются стеклянными - они уже лежат на
 * непрозрачном.
 */
body.club-panel .modal > .bg-white,
body.club-panel .modal > .bg-gray-50,
body.club-panel .modal > .bg-gray-100,
body.club-panel .fixed.inset-0 > .bg-white,
body.club-panel .fixed.inset-0 > .bg-gray-50,
body.club-panel .fixed.inset-0 > .bg-gray-100 {
    background-color: #14090f !important;
    border: 1px solid var(--club-line);
}

body.club-panel .period-btn:hover,
body.club-panel .credential-row:hover,
body.club-panel .level-row:hover,
body.club-panel .image-upload-area:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
body.club-panel .stat-value { color: var(--club-gold) !important; }

/* Кнопки со своим цветом фона: текст на них задаём явно.
   У .btn-secondary он вычислялся янтарным поверх серого - откуда именно,
   выяснять дороже, чем указать нужный цвет в одном месте. */
body.club-panel .btn-secondary,
body.club-panel .btn-primary,
body.club-panel .btn-success,
body.club-panel .btn-danger { color: #fff !important; }

/* Янтарная кнопка - исключение: белым по жёлтому не читается вовсе (полтора
   к одному по контрасту), а «Изменить» на расписании игр нажимают чаще прочих.
   Текст тёмный, фон остаётся янтарным - цвет здесь и есть признак действия. */
body.club-panel .btn-warning { color: #1a1005 !important; }

/* Серая кнопка: свой светлый фон на тёмной странице читается заплатой, а текст
   на ней наш общий белый. Гасим фон так же, как утилиты .bg-gray-200. */
body.club-panel .btn-secondary {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--club-line);
}
body.club-panel .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.12) !important; }

/* Плашка «Записавшиеся» в админке: свой светлый индиго с тёмным текстом. */
body.club-panel .registered-badge {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--club-ink) !important;
    border: 1px solid var(--club-line);
}
body.club-panel .registered-badge:hover { background-color: rgba(255, 255, 255, 0.12) !important; }
body.club-panel .password-display {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--club-ink) !important;
}

/* Значки со своими цветами: фон бледный, текст тёмный - на тёмной теме нужно
   наоборот. Оттенок сохраняем, он и есть смысл значка. */
body.club-panel .badge-admin, body.club-panel .badge-in-progress,
body.club-panel .level-row.is-break {
    background-color: rgba(255, 215, 0, 0.16) !important;
    color: var(--club-gold-soft) !important;
}
body.club-panel .badge-banned, body.club-panel .badge-cancelled,
body.club-panel .badge-expired {
    background-color: rgba(225, 29, 46, 0.18) !important;
    color: #ff8a95 !important;
}
body.club-panel .badge-inactive {
    background-color: rgba(255, 255, 255, 0.09) !important;
    color: var(--club-muted) !important;
}
/* Зелёные и синие значки того же рода: «активен», «завершена», «запланирована»,
   «директор». Читались они и так - тёмным по бледному, - но светлыми заплатами
   посреди тёмной страницы, и глаз цеплялся за них вместо содержания. */
body.club-panel .badge-active, body.club-panel .badge-completed {
    background-color: rgba(16, 185, 129, 0.16) !important;
    color: #5ee0a8 !important;
}
body.club-panel .badge-scheduled, body.club-panel .badge-director {
    background-color: rgba(59, 130, 246, 0.16) !important;
    color: #7cc4ff !important;
}

/*
 * Вылетевший игрок в админке.
 *
 * Страница помечает его классом .eliminated с фоном #fee - светло-розовым,
 * задуманным для белой страницы. Текст в карточке наш общий белый, и на
 * телефоне вылетевший игрок пропадал с экрана целиком. Приходит это к концу
 * вечера, когда вылетают все и считают итог, - то есть ровно тогда, когда
 * карточки и нужны. Оттенок сохраняем: красноватый и означает «выбыл».
 */
body.club-panel .eliminated {
    background-color: rgba(225, 29, 46, 0.12) !important;
    border-color: rgba(225, 29, 46, 0.3) !important;
}

/*
 * Таблица очков в директорской.
 *
 * Своя сетка со своими светлыми ячейками: серые заголовки и первый столбец с
 * номерами мест, зелёная подсветка заполненного, голубая у поля под курсором.
 * Текст в них общий белый, номера мест не видно вовсе - а таблица очков это
 * то, по чему считают вечер. Держим тот же смысл цветом, но под тёмный фон.
 */
body.club-panel .points-grid th,
body.club-panel .points-grid td.place-cell {
    background: #1b0f15 !important;
    color: var(--club-gold-soft) !important;
}
body.club-panel .points-grid td.has-value { background: rgba(16, 185, 129, 0.16) !important; }
body.club-panel .points-grid .cell-locked { background: rgba(255, 255, 255, 0.03) !important; }
body.club-panel .points-grid input:focus { background: rgba(59, 130, 246, 0.22) !important; }
body.club-panel .points-grid th, body.club-panel .points-grid td { border-color: var(--club-line) !important; }

/* Шаблон структуры блайндов: выбранный подсвечивался светло-голубым, и его
   название - белым по нему - исчезало ровно у того шаблона, с которым работают. */
body.club-panel .template-item:hover { background-color: rgba(255, 255, 255, 0.08) !important; }
body.club-panel .template-item.selected {
    background-color: rgba(255, 215, 0, 0.14) !important;
    border-left-color: var(--club-gold) !important;
}

/*
 * Карточка игры на телефоне: подложку тема уже погасила, а текст в ней
 * покрашен своими цветами страницы - тёмно-серым по светлому. На тёмной
 * карточке от него остаётся тень: название игры и число игроков не читаются
 * вовсе. Разделители внутри карточки светлые по той же причине.
 */
body.club-panel .mobile-game-info-value { color: var(--club-ink) !important; }
body.club-panel .mobile-game-info-label { color: var(--club-muted) !important; }
body.club-panel .mobile-game-header,
body.club-panel .mobile-game-actions { border-color: var(--club-line) !important; }

/* Вкладки разделов статистики и лояльности: активная помечена синим #2563eb,
   который задумывался для белого фона. Осветляем, как и синий текст утилит. */
body.club-panel .tab-button.active,
body.club-panel .tab-btn.active,
body.club-panel .tab-btn:hover { color: #7cc4ff !important; border-color: #7cc4ff !important; }
body.club-panel .tab-button { color: var(--club-muted); }

/* Рост и падение в сводке клуба: тот же приём, что с цветным текстом утилит -
   оттенок несёт смысл, поэтому осветляем, а не перекрашиваем в общий цвет. */
body.club-panel .change-positive { color: #5ee0a8 !important; }
body.club-panel .change-negative { color: #ff8a95 !important; }

/* Тонкие светлые рамки предпросмотров и спиннера. */
body.club-panel .image-preview,
body.club-panel .color-preview,
body.club-panel .spinner { border-color: var(--club-line) !important; }

/* ---------- телефон ---------- */

/*
 * Панели открывают с телефона между раздачами, и мини-апп покажет их же.
 * Двух вещей на маленьком экране не хватало: таблицы уезжали за край молча, а
 * кнопки были меньше пальца.
 */
@media (max-width: 640px) {
    body.club-panel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.club-panel button, body.club-panel .btn { min-height: 44px; }
    body.club-panel input, body.club-panel select { min-height: 44px; font-size: 16px; }
}