/* MudBlazor handles base styles — targeted global overrides for the admin shell.
   Design goals: consistent rhythm, theme-token colors (correct in dark mode, the default),
   and nothing that overflows/breaks across window widths. */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
}

/* ─── Custom scrollbar (accent из палитры темы, а не хардкод) ─────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
}

/* Широкие таблицы MudBlazor уже скроллятся внутри .mud-table-container
   (overflow-x:auto в самом MudBlazor) — добавляем лишь плавный тач-скролл. */
.mud-table-container { -webkit-overflow-scrolling: touch; }

/* ─── Focus-visible: видимое кольцо фокуса для клавиатуры/доступности ──────── */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
/* MudBlazor сам рисует ripple/hover, поэтому убираем двойной outline у мыши */
:focus:not(:focus-visible) { outline: none; }

/* Blazor reconnect / error overlays */
#blazor-error-ui {
    display: none;
    background: #fee;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    border-top: 1px solid #f5c6cb;
    position: fixed;
    z-index: 9999;
}
#blazor-error-ui .reload { color: inherit; font-weight: bold; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ─── Stat card — нейтральная карточка, акцент только в тинт-иконке ────────── */
.stat-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}
.stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ─── Hover-lift ТОЛЬКО для кликабельных карточек (не для статичных) ───────── */
.mud-card { transition: box-shadow 0.2s ease, transform 0.15s ease; }
.clickable-card { cursor: pointer; }
.clickable-card:hover { transform: translateY(-2px); box-shadow: var(--mud-elevation-6); }

/* Nav link active state */
.mud-nav-link.active { border-right: 3px solid var(--mud-palette-primary); }

/* Config tabs */
.config-tab-panel { padding: 16px 0; }

/* ─── Home nav tiles ──────────────────────────────────────────────────────── */
.nav-tile {
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
}
.nav-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-6);
    border-color: var(--mud-palette-primary);
}
.nav-tile .nav-tile-chevron { opacity: 0.4; transition: transform 0.15s ease, opacity 0.2s ease; }
.nav-tile:hover .nav-tile-chevron { opacity: 1; transform: translateX(3px); }
/* Цвет/фон иконки задаёт inline-стиль NavTile (мягкий тинт по Color плитки) */
.nav-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── Утилиты ──────────────────────────────────────────────────────────────── */
/* Однострочный текст с многоточием (для имён/email/значений в плотных списках) */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Двухстрочный клэмп (описания плиток, длинные подписи) */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Адаптивные отступы контейнера: меньше воздуха на узких экранах ───────── */
@media (max-width: 600px) {
    .mud-main-content .mud-container { padding-left: 12px; padding-right: 12px; }
}