/* ==============================================================================
   app/static/css/custom.css

   ОСТАТОЧНЫЙ файл — после введения app/static/css/design-system.css
   (единый источник токенов/компонентов для кабинета: типографика, кнопки,
   поля форм, таблицы, сайдбар/шапка/подвал) здесь остались только вещи,
   которые НЕ являются токеном/компонентом в этом смысле: специфичная для
   Cropper.js разметка кругового кропа и скрытие нативного вида
   input[type=file]. Всё остальное, что раньше жило здесь (три предыдущих
   UI-патча), перенесено в design-system.css и отсюда удалено — не должно
   быть двух файлов, спорящих за одно и то же свойство.

   Подключается на всех трёх layout'ах (кабинет, гостевой, публичный сайт) —
   именно поэтому то немногое, что здесь осталось, должно быть безопасно
   везде, включая публичный сайт (design-system.css туда сознательно НЕ
   подключается — его :root-токены/!important-кнопки задуманы только для
   кабинета и сломали бы, например, крупные герой-кнопки на главной).
   ============================================================================== */

/* ------------------------------------------------------------------------
   Батч UI-фиксов, п.4 — единый шрифт по всему сайту. Кабинет уже
   использует Roboto Slab (design-system.css, --wod-font-family) —
   публичный сайт его не подключает (design-system.css туда сознательно
   не грузится, см. шапку файла) и оставался на дефолтном шрифтовом стеке
   Bootstrap (проверено вживую: getComputedStyle — system-ui/-apple-system/
   Segoe UI/...). @font-face продублирован сюда (тот же файл, тот же путь —
   custom.css лежит в той же папке app/static/css/, ../fonts/... резолвится
   одинаково) — дублирующееся описание @font-face для браузера безвредно
   (тот же URL, кэшируется один раз), но later зато custom.css (общий на
   все три layout'а) может применить шрифт и на публичных страницах, куда
   design-system.css не долетает. body.wod-public — тот же маркер-класс,
   что уже используется для алертов публичного сайта выше по каскаду (см.
   public/base.html). ------------------------------------------------------------------------ */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/RobotoSlab/roboto-slab-v36-cyrillic-ext-300.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/RobotoSlab/roboto-slab-v36-cyrillic-300.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/RobotoSlab/roboto-slab-v36-latin-ext-300.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/RobotoSlab/roboto-slab-v36-latin-300.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body.wod-public, body.wod-public * {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif !important;
}

/* ------------------------------------------------------------------------
   Круглая область кадрирования аватара. Cropper.js с aspectRatio:1 задаёт
   КВАДРАТНУЮ рабочую область — сам по себе этот параметр НЕ делает
   выделение визуально круглым. Стандартный приём Cropper.js для круглого
   кропа — скруглить сами элементы UI кропа (view-box/face) через
   border-radius:50%, тогда ограничение видно пользователю визуально, а не
   только "квадрат, внутри которого потом вырежут круг где-то в другом месте".
   ------------------------------------------------------------------------ */
.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}
.cropper-view-box {
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
}

/* Батч UI-фиксов, п.6 — иконка-подсказка невалидного поля (см.
   app/static/js/validation_ux.js) — справа внутри поля, поверх текста/
   стрелки select (z-index). Цвет литералом (#dc3545 — тот же красный, что
   design-system.css:--wod-color-danger), не токеном: custom.css грузится и
   на публичном сайте, где design-system.css не подключён — токен был бы
   недоступен там. */
.wod-invalid-icon {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    z-index: 5;
}

/* Живое расследование (кнопка "Войти"/иконка-глаз) — .password-toggle-group
   (password_toggle.js) раньше визуально сливалось в один инпут-group
   (Bootstrap сам обнуляет внутренние углы соседних .form-control/.btn) —
   консолидация кнопок (shared.css) теперь безусловно ставит РАВНЫЙ радиус
   на ВСЕ четыре угла каждой .btn через !important, включая ту, что внутри
   .input-group — это и разбивало один визуальный блок на два отдельных
   скруглённых прямоугольника. Явно возвращаем скругление только НАРУЖНЫМ
   углам (лево — у поля, право — у кнопки) + одна общая граница вместо двух
   соседних (border-right у поля убран, border-left у кнопки не ставится
   вообще — не переопределяем border целиком, только radius/color, тем же
   safety-приёмом, что и у .wod-invalid-icon выше: буквальные hex, не
   var(--wod-*) — эта группа технически может (хоть и маловероятно) оказаться
   на публичной странице, где design-system.css не подключён). */
.password-toggle-group .form-control,
.password-toggle-group .btn {
    border-radius: 0 !important;
}
.password-toggle-group .form-control {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-right: none !important;
}
.password-toggle-group .btn {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}
.password-toggle-group .btn:hover {
    background-color: #dee2e6 !important;
    color: #212529 !important;
}

/* ------------------------------------------------------------------------
   Кнопка выбора файла аватара — нативный вид <input type="file"> (кнопка
   "Выберите файл" + имя файла) скрыт, вместо него единая кнопка "Выбрать"
   (стиль — design-system.css) без отображения имени файла (превью аватара
   и так показывает, что выбрано — имя файла было избыточным дублированием).
   ------------------------------------------------------------------------ */
.avatar-file-input {
    display: none;
}

/* ------------------------------------------------------------------------
   Карта площадки (/places, Leaflet + Yandex Tiles API) — position:relative
   нужен, чтобы .wod-yandex-logo (см. ниже) позиционировался ОТНОСИТЕЛЬНО
   контейнера карты, а не всей страницы.
   ------------------------------------------------------------------------ */
.wod-place-map {
    position: relative;
}

/* Карта площадки, п.1 — интерактивная карта формы редактирования площадки
   (#placeMapEditable, admin/place_form.html): курсор Leaflet по умолчанию —
   "grab" (рука, как для перетаскивания) везде, включая фон карты, где
   основное действие — КЛИК для установки точки, а не перетаскивание.
   Прицел явно сигнализирует "клик ставит метку именно тут". Не трогает
   read-only карты /places (там нет клика для выбора точки — там либо
   grab, либо pointer над самим маркером, оба уместны как есть). */
#placeMapEditable.leaflet-container,
#placeMapEditable .leaflet-grab,
#placeMapEditable .leaflet-dragging .leaflet-grab {
    cursor: crosshair;
}

/* Обязательный логотип Яндекса поверх карты (условия использования Tiles
   API — см. app/static/img/yandex/LICENSE.md) — нижний правый угол:
   Leaflet сам кладёт свои элементы управления (zoom +/-) в ВЕРХНИЙ левый
   угол по умолчанию (см. leaflet_places.js: zoomControl: true, без
   переопределения position), так что коллизии с ними нет. z-index выше,
   чем у слоя тайлов/контролов Leaflet (тот использует значения до ~1000),
   чтобы логотип гарантированно был поверх, а не под тайлами. */
.wod-yandex-logo {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1000;
    line-height: 0;
}
.wod-yandex-logo img {
    display: block;
    height: 24px;
    width: auto;
}

/* Батч UI-фиксов, п.6 — квадратная иконка-кнопка "назад в кабинет"
   (mdi-chevron-double-left), слева от заголовка страницы, вместо прежней
   полнотекстовой ссылки внизу страницы. btn-sm сам по себе даёт
   прямоугольную (не квадратную) кнопку из-за горизонтального padding —
   фиксируем равные ширину/высоту и центрируем иконку. */
.wod-icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* CSS-аудит §05/§06 — раньше здесь была ОТДЕЛЬНАЯ, вручную посчитанная копия
   правила размера/отступов баннера для публичного сайта (min-height:60px/
   margin:30px, от 48px кнопки публичного сайта) — design-system.css грузился
   только в кабинете/гостевом layout'е, а custom.css (этот файл) был
   единственным, общим на все три, поэтому дублирование. Теперь оба layout'а
   читают ОДНО правило из shared.css (подключён везде), каждый — со своим
   --wod-btn-height (кабинетный — design-system.css, публичный —
   public/base.html) — body.wod-public-скоуп больше не нужен. */

/* Батч UI-фиксов, п.3 — ссылки в подвале (везде, все три layout'а — тот же
   общий _footer.html) показывали подчёркивание браузера по умолчанию,
   никакого text-decoration на них раньше вообще не задавалось нигде в
   проекте (проверено грепом по всем *.css) — предыдущая консолидация
   футера унифицировала только цвет/контент, но не эту часть. */
footer a {
    text-decoration: none;
}

/* Мобильная адаптивность, п.2 — логотип-птица на главной странице
   (public/index.html) — меньший максимум высоты на мобильном, полная
   320px-версия только с ширины lg (992px), где по вертикали достаточно
   места и колонка с логотипом узкая (col-lg-5), а не во всю ширину. */
.wod-hero-logo {
    max-height: 200px;
}
@media (min-width: 992px) {
    .wod-hero-logo {
        max-height: 320px;
    }
}

/* Мобильная адаптивность, п.3 — гамбургер публичного сайта (public/base.html).
   Была рамка+фон родного .navbar-toggler (тема Bootstrap рисует их по
   умолчанию — 1px border + focus box-shadow) — убираем, оставляем только
   три полосы. В кабинете (base.html, .navbar .navbar-toggler в
   design-system.css) тот же приём (border:0; background:transparent) уже
   применён — здесь то же самое, но для отдельной, публичной кнопки.

   Анимация в крестик — три реальных <span>-полосы вместо родной
   .navbar-toggler-icon (та — одна статичная фоновая SVG, анимировать
   нечего). Триггер — атрибут aria-expanded, которым Bootstrap's collapse JS
   САМ управляет на кнопке при каждом клике (открыт/закрыт) — подтверждено
   официальной документацией Bootstrap 5.3, отдельный JS-обработчик не нужен. */
.wod-navbar-toggler {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.wod-navbar-toggler:focus {
    box-shadow: none !important;
}
.wod-navbar-toggler-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #212529;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Верхняя и нижняя полосы сходятся в крестик (translateY выводит их на
   общую линию, где раньше была средняя полоса — 6px gap + 2px высота
   средней полосы = 8px сдвиг), средняя полоса прячется через opacity, а не
   display:none — display:none мгновенный, а не анимируемый. */
.wod-navbar-toggler[aria-expanded="true"] .wod-navbar-toggler-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.wod-navbar-toggler[aria-expanded="true"] .wod-navbar-toggler-bar:nth-child(2) {
    opacity: 0;
}
.wod-navbar-toggler[aria-expanded="true"] .wod-navbar-toggler-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Иконка-вход в кабинет слева от гамбургера (мобильный, d-lg-none в разметке,
   public/base.html) — тот же тач-таргет 32x32 и безрамочный стиль, что и у
   .wod-navbar-toggler рядом, тот же цвет, что у полос гамбургера (#212529) —
   единая пара иконок, а не два разных визуальных языка. */
.wod-mobile-account-link {
    border: 0;
    background: transparent;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #212529;
    font-size: 24px;
    text-decoration: none;
}