/*
 * admin-layout.css
 * Стили основного layout для административной панели
 * Конвертировано из React проекта (index.css + App.css + theme)
 */


/* ============================================================
   CSS-переменные — светлая тема (по умолчанию)
   ============================================================ */
:root {
    /* Background */
    --admin-bg: hsl(240, 6%, 97%);
    --admin-bg-paper: hsl(0, 0%, 100%);
    /* Text */
    --admin-text-primary: hsl(240, 6%, 25%);
    --admin-text-secondary: hsl(240, 5%, 41%);
    --admin-text-disabled: hsl(240, 5%, 64%);
    --admin-text: hsl(240, 5%, 41%);
    /* Grey scale */
    --admin-grey-25: hsl(240, 6%, 97%);
    --admin-grey-50: hsl(240, 5%, 96%);
    --admin-grey-100: hsl(240, 5%, 91%);
    --admin-grey-200: hsl(240, 6%, 83%);
    --admin-grey-300: hsl(240, 5%, 72%);
    --admin-grey-400: hsl(240, 5%, 57%);
    --admin-grey-500: hsl(240, 4%, 46%);
    --admin-grey-600: hsl(240, 5%, 36%);
    --admin-grey-700: hsl(240, 6%, 25%);
    --admin-grey-800: hsl(240, 6%, 16%);
    --admin-grey-900: hsl(240, 6%, 10%);
    /* Border */
    --admin-border: hsl(240, 6%, 87%);
    /* Feedback */
    --admin-error: hsl(0, 84%, 60%);
    --admin-success: hsl(142, 76%, 36%);
    --admin-warning: hsl(38, 92%, 50%);
    --admin-info: hsl(199, 89%, 48%);
    /* Primary color — green (единственная цветовая схема) */
    --admin-primary-h: 142;
    --admin-primary-s: 76%;
    --admin-primary-l: 36%;
    --admin-primary: hsl(var(--admin-primary-h), var(--admin-primary-s), var(--admin-primary-l));
    --admin-primary-light: hsl(var(--admin-primary-h), var(--admin-primary-s), calc(var(--admin-primary-l) + 10%));
    --admin-primary-dark: hsl(var(--admin-primary-h), var(--admin-primary-s), calc(var(--admin-primary-l) - 10%));
    --admin-accent: hsl(var(--admin-primary-h), var(--admin-primary-s), var(--admin-primary-l));
    --admin-accent-bg: hsla(var(--admin-primary-h), var(--admin-primary-s), var(--admin-primary-l), 0.1);
    --admin-accent-border: hsla(var(--admin-primary-h), var(--admin-primary-s), var(--admin-primary-l), 0.5);
    /* Misc */
    --admin-code-bg: hsl(43, 36%, 94%);
    --admin-social-bg: rgba(244, 243, 236, 0.5);
    --admin-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --admin-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    --admin-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.07);
    --admin-sans: 'Mulish', system-ui, 'Segoe UI', Roboto, sans-serif;
    --admin-heading: 'Urbanist', system-ui, 'Segoe UI', Roboto, sans-serif;
    --admin-mono: ui-monospace, Consolas, monospace;
    /* Размеры layout */
    --admin-header-height: 80px;
    --admin-left-menu-primary-width: 96px;
    --admin-left-menu-secondary-width: 240px;
    --admin-main-padding: 24px;
    --admin-layout-duration: 300ms;
    /* Скругления */
    --admin-radius-sm: 8px;
    --admin-radius-md: 12px;
    --admin-radius-lg: 16px;
    --admin-radius-xl: 24px;
    --admin-radius-2xl: 32px;
}

/* ============================================================
   Тёмная тема (класс dark-theme)
   ============================================================ */
.dark-theme {
    --admin-bg: hsl(240, 6%, 10%);
    --admin-bg-paper: hsl(240, 6%, 14%);

    --admin-text-primary: hsl(240, 5%, 84%);
    --admin-text-secondary: hsl(240, 5%, 65%);
    --admin-text-disabled: hsl(240, 5%, 48%);
    --admin-text: hsl(240, 5%, 65%);

    --admin-grey-25: hsl(240, 6%, 19%);
    --admin-grey-50: hsl(240, 5%, 22%);
    --admin-grey-100: hsl(240, 5%, 28%);
    --admin-grey-200: hsl(240, 6%, 35%);
    --admin-grey-300: hsl(240, 5%, 44%);
    --admin-grey-400: hsl(240, 5%, 55%);
    --admin-grey-500: hsl(240, 4%, 64%);
    --admin-grey-600: hsl(240, 5%, 73%);
    --admin-grey-700: hsl(240, 6%, 81%);
    --admin-grey-800: hsl(240, 6%, 89%);
    --admin-grey-900: hsl(240, 6%, 95%);

    --admin-border: hsl(240, 6%, 24%);
    --admin-code-bg: hsl(240, 6%, 16%);
    --admin-social-bg: rgba(47, 48, 58, 0.5);
    --admin-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20);
    --admin-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
    --admin-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
}

/* ============================================================
   Глобальный сброс и базовые стили для admin-layout
   ============================================================ */
.admin-layout *,
.admin-layout *::before,
.admin-layout *::after {
    box-sizing: border-box;
}

/* Основной контейнер admin-layout */
.admin-layout {
    font-family: var(--admin-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--admin-text);
    background-color: var(--admin-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Плавный переход для смены темы */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================================
   Фоновая обёртка (background-wrapper.tsx)
   ============================================================ */
.admin-background {
    position: fixed;
    inset: 0;
    z-index: -10;
    background-color: var(--admin-bg);
    width: 100%;
    height: 100%;
    /* Плавный переход для фона */
    transition: background-color 0.3s ease;
}

/* ============================================================
   Структура страницы
   ============================================================ */
.admin-page-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
}

/* ============================================================
   Главное содержимое (main.tsx)
   ============================================================ */
.admin-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    padding-top: var(--admin-header-height);
    padding-inline-start: var(--admin-left-menu-primary-width);
    transition: padding-inline-start var(--admin-layout-duration) ease;
    width: 100%;
}

/* Когда левое меню скрыто (мобильный) */
.admin-main.menu-hidden {
    padding-inline-start: 0;
}

/* Когда левое вторичное меню показано */
.admin-main.secondary-menu-visible {
    padding-inline-start: calc(var(--admin-left-menu-primary-width) + var(--admin-left-menu-secondary-width));
}

/* ============================================================
   Обёртка контента (content-wrapper.tsx)
   ============================================================ */
.admin-content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 20px 16px;
    background-color: transparent;
    border-radius: var(--admin-radius-xl);
}

.admin-content-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.admin-content-inner.boxed {
    max-width: 1024px;
}

/* ============================================================
   Адаптивный дизайн
   ============================================================ */
@media (max-width: 1024px) {
    .admin-layout {
        font-size: 13px;
    }

    .admin-main {
        padding-inline-start: 0;
    }

    .admin-main.secondary-menu-visible {
        padding-inline-start: 0;
    }

    .admin-content-wrapper {
        padding: 16px 12px;
        border-radius: var(--admin-radius-lg);
    }
}

@media (min-width: 768px) {
    .admin-content-wrapper {
        padding: 24px 32px;
    }
}

@media (min-width: 1024px) {
    .admin-main {
        padding-inline-start: var(--admin-left-menu-primary-width);
    }
}

/* ============================================================
   ТИПОГРАФИКА - Шрифты Mulish и Urbanist
   ============================================================ */

/* Заголовки используют Urbanist */
.admin-layout h1,
.admin-layout h2,
.admin-layout h3,
.admin-layout h4,
.admin-layout h5,
.admin-layout h6 {
    font-family: var(--admin-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--admin-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.admin-layout h1 {
    font-size: 2.5rem; /* 40px */
    font-weight: 800;
}

.admin-layout h2 {
    font-size: 2rem; /* 32px */
    font-weight: 800;
}

.admin-layout h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
}

.admin-layout h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}

.admin-layout h5 {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
}

.admin-layout h6 {
    font-size: 1rem; /* 16px */
    font-weight: 700;
}

/* Основной текст использует Mulish */
.admin-layout p,
.admin-layout span,
.admin-layout div,
.admin-layout a,
.admin-layout button,
.admin-layout input,
.admin-layout textarea,
.admin-layout select {
    font-family: var(--admin-sans);
}

/* Стили для различных размеров текста */
.admin-text-xs {
    font-size: 0.6875rem; /* 11px */
}

.admin-text-sm {
    font-size: 0.75rem; /* 12px */
}

.admin-text-base {
    font-size: 0.875rem; /* 14px */
}

.admin-text-lg {
    font-size: 1rem; /* 16px */
}

.admin-text-xl {
    font-size: 1.125rem; /* 18px */
}

/* Весовые категории */
.admin-font-light {
    font-weight: 300;
}

.admin-font-normal {
    font-weight: 400;
}

.admin-font-medium {
    font-weight: 500;
}

.admin-font-semibold {
    font-weight: 600;
}

.admin-font-bold {
    font-weight: 700;
}

.admin-font-extrabold {
    font-weight: 800;
}

/* Цвета текста */
.admin-text-primary {
    color: var(--admin-text-primary);
}

.admin-text-secondary {
    color: var(--admin-text-secondary);
}

.admin-text-disabled {
    color: var(--admin-text-disabled);
}

.admin-text-accent {
    color: var(--admin-accent);
}

.admin-text-error {
    color: var(--admin-error);
}

.admin-text-success {
    color: var(--admin-success);
}

.admin-text-warning {
    color: var(--admin-warning);
}

.admin-text-info {
    color: var(--admin-info);
}