/* Общий "цвет интерфейса" (тонировка шапки/меню/карточек/попапов) задаётся как
   RGB-триплет через переменную на :root (MainLayout.razor рисует туда inline
   <style> при theme_mode='custom', см. комментарий там же про портал-рендеринг
   диалогов/попапов, которые не видят background-image родителя, но ВИДЯТ
   CSS-переменные с :root). Дефолт — прежний хардкод 20,20,32 для всех, у кого
   тема не custom / не задан interface_color. */
:root {
    --agr-chrome-rgb: 20, 20, 32;
    /* На тёмной/custom-с-тёмной-базой теме текст светлый и его надо оттенять от
       переменной яркости фоновой картинки под ним; на светлой теме текст и так
       тёмный на светлой карточке — тень там только размывает буквы, поэтому
       MainLayout.razor переключает эту переменную в "none" при _isDarkMode=false. */
    --agr-text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

/* MudTabs-планка красится через --mud-palette-surface (см. MudBlazor.min.css:
   .mud-tabs-tabbar{background-color:var(--mud-palette-surface)}) — этот токен
   намеренно остаётся непрозрачным глобально (карточки/диалоги/меню на нём
   держатся), поэтому здесь точечный override только для планки вкладок,
   которая уже сидит внутри полупрозрачной MudPaper-карточки. */
.mud-tabs-tabbar {
    background-color: transparent !important;
}

/* Карточка редактирования профиля (.translucent-panel — см. ProfileDialog.razor)
   и выпадающее меню профиля в шапке — тоже полупрозрачные и со скруглением,
   чтобы не выбиваться из общего стиля карточек контента. .mud-dialog и
   .mud-paper внутри .mud-popover тоже красятся через --mud-palette-surface
   (см. MudBlazor.min.css), поэтому точечный override, а не глобальная смена
   Surface — иначе сломались бы обычные админские диалоги, которым нужна
   непрозрачность для читаемости поверх таблиц.*/
/* Диалог/попап — отдельный плавающий слой (свой bounding box), поэтому
   картинка фона в нём выходит другого масштаба/кропа, чем на странице —
   не пытаемся её туда тащить, просто тёмная полупрозрачная заливка с блюром. */
.translucent-panel {
    background-color: rgba(var(--agr-chrome-rgb), .65) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px !important;
}

.mud-popover .mud-paper,
.mud-popover .mud-list {
    background-color: rgba(var(--agr-chrome-rgb), .65) !important;
    backdrop-filter: blur(10px);
    border-radius: 12px !important;
}

/* Подстраховка на случай, если inline Style на <MudDrawer>/<MudAppBar> (см.
   MainLayout.razor) не долетает до того же узла, что несёт класс — здесь
   точно тот самый класс из MudBlazor.min.css (.mud-drawer{background-color:
   var(--mud-palette-drawer-background)}), с более высоким приоритетом за счёт
   !important и порядка подключения (после MudBlazor.min.css). */
.mud-drawer {
    background-color: rgba(var(--agr-chrome-rgb), .86) !important;
    backdrop-filter: blur(6px);
}

.mud-appbar {
    /* Ниже .86 текст/иконки шапки становятся нечитаемыми на светлых участках
       картинки-фона (она скроллится, яркость под шапкой не постоянна) —
       та же непрозрачность, что у .mud-drawer, надёжнее лишней прозрачности. */
    background-color: rgba(var(--agr-chrome-rgb), .86) !important;
    backdrop-filter: blur(6px);
}

/* Серый вторичный текст (MudBlazor TextSecondary #92929f и подобные) читаем на
   ровном тёмном фоне, но проваливается в контрасте на ярких/светлых участках
   фоновой картинки, просвечивающих через полупрозрачные карточки/шапку/меню.
   text-shadow (в отличие от filter:drop-shadow) не создаёт новый stacking
   context и не ломает backdrop-filter соседних элементов — тот баг с шапкой,
   которая переставала видеть фон сквозь себя, был именно от filter. Поэтому
   везде только text-shadow, аккуратный и не зависящий от яркости пикселя под ним. */
.mud-paper,
.mud-appbar,
.mud-drawer,
.mud-popover .mud-paper,
.mud-popover .mud-list,
.translucent-panel {
    text-shadow: var(--agr-text-shadow);
}

/* Карточка профиля (ProfileDialog): .mud-dialog-title у нас всегда пустой (без
   Title/TitleContent) — несёт только крестик закрытия, который абсолютно
   спозиционирован внутри title и не зависит от его padding — поэтому title
   можно ужать без риска наехать на крестик, чтобы вкладки Профиль/Тема не
   висели с большим пустым отступом от верхнего края карточки. */
.translucent-panel .mud-dialog-title {
    padding: 6px 24px;
}

.translucent-panel .mud-dialog-content {
    padding-top: 4px;
    padding-bottom: 24px;
}

/* Кликабельная аватарка (ProfileDialog) — сама является кнопкой загрузки:
   затемнение + иконка камеры по наведению вместо отдельной кнопки "Установить". */
.agr-avatar-upload {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

.agr-avatar-upload .agr-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.agr-avatar-upload:hover .agr-avatar-overlay {
    opacity: 1;
}

/* Карусель встроенных обоев (ProfileDialog, вкладка Тема). */
.agr-wallpaper-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    /* Внутренний отступ снизу — место под нативный горизонтальный скроллбар,
       чтобы он не наезжал на кнопки под каруселью (mb-4 в разметке добавляет
       ещё отступ уже СНАРУЖИ, после самого скроллбара). */
    padding-bottom: 14px;
}

.agr-wallpaper-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
}

.agr-wallpaper-thumb.selected {
    border-color: #7e6fff;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Пункт "цвет фона" гасим, когда выбрана картинка обоев — цвет и картинка
   фона взаимоисключающие, но сам выбор оставляем видимым (не прячем),
   чтобы было понятно, что он временно недоступен, а не пропал. */
.agr-swatch-disabled {
    opacity: .35;
    pointer-events: none;
}