/* static/css/components/tile.css */
/* ============================================================
   БАЗОВЫЙ КЛАСС ПЛИТКИ (tile)
   Общие стили для всех плиток проекта.
   Каждая плитка добавляет себе .tile + модификатор уровня:
   - .tile--panel — панели контента (topbar, sidebar, content)
   - .tile--photo — фото-модалка (прозрачная)
   - .tile--info  — инфо-панель
   - .tile--modal — модалки, тултип, шапка (плотные, белые)
   ============================================================ */

.tile {
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   УРОВЕНЬ 1: ПАНЕЛИ КОНТЕНТА
   ============================================================ */
.tile--panel {
    background: var(--tile-panel-bg);
    backdrop-filter: blur(var(--tile-panel-blur));
    -webkit-backdrop-filter: blur(var(--tile-panel-blur));
    border: 1px solid var(--tile-panel-border);
    border-radius: var(--tile-radius);
}

/* ============================================================
   УРОВЕНЬ 2: ФОТО-МОДАЛКА (прозрачная)
   ============================================================ */
.tile--photo {
    background: var(--tile-photo-bg);
    border: 1px solid var(--tile-photo-border);
    border-radius: var(--tile-radius);
}

/* ============================================================
   УРОВЕНЬ 3: ИНФО-ПАНЕЛЬ
   ============================================================ */
.tile--info {
    background: var(--tile-info-bg);
    backdrop-filter: blur(var(--tile-info-blur));
    -webkit-backdrop-filter: blur(var(--tile-info-blur));
    border: 1px solid var(--tile-info-border);
    border-radius: var(--tile-radius);
}

/* ============================================================
   УРОВЕНЬ 4: МОДАЛКИ, ТУЛТИП, ШАПКА
   ============================================================ */
.tile--modal {
    background: var(--tile-modal-bg);
    backdrop-filter: blur(var(--tile-modal-blur));
    -webkit-backdrop-filter: blur(var(--tile-modal-blur));
    border: 1px solid var(--tile-modal-border);
    border-radius: var(--tile-radius);
}