/* ============================================================
   base.css — глобальные стили
   ============================================================ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f5f7fa;
    color: #222;
    min-height: 100vh;
}

/* ============================================================
   ОСНОВНАЯ ОБЁРТКА
   ============================================================ */
.page-wrapper {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ============================================================
   🐞 ОТЛАДОЧНАЯ РАМКА ДЛЯ PAGE-WRAPPER (временная)
   ============================================================ */
/* ⚠️ УДАЛИТЬ ПОСЛЕ ОТЛАДКИ! */
.page-wrapper {
    outline: 3px solid red !important;
    outline-offset: -3px !important;
}

:root {
    /* ============================================================
       Z-INDEX ШКАЛА
       ============================================================ */
    --z-below: -1;                /* фон под контентом */
    --z-base: 1;                  /* базовый контент */
    --z-raised: 5;                /* приподнятый контент */
    --z-dropdown: 20;             /* выпадающие элементы */
    --z-header: 100;              /* шапка сайта */
    --z-sticky: 500;              /* sticky-элементы (панели внизу) */
    --z-overlay: 900;             /* оверлеи модалок */
    --z-modal: 1000;              /* модалки */
    --z-modal-content: 1001;      /* контент модалок */
    --z-modal-controls: 1002;     /* кнопки внутри модалок */
    --z-sidebar-overlay: 1500;    /* затемнение под мобильным сайдбаром */
    --z-sidebar: 2000;            /* выезжающий сайдбар (мобильный) */
    --z-sidebar-toggle: 2100;     /* кнопка-гамбургер (поверх сайдбара) */
    --z-photo-modal: 3000;        /* фото-модалка */
    --z-toast: 5000;              /* toast-уведомления */
    --z-loader: 9999;             /* глобальный лоадер */

    /* ============================================================
       ЦВЕТА (светлая тема)
       ============================================================ */
    --color-primary: #6c5ce7;
    --color-primary-hover: #5a4bd1;
    --color-primary-rgb: 108, 92, 231;

    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-warning: #ff9f43;
    --color-tags: #6c5ce7;

    /* Фоны — светлые, стеклянные */
    --color-bg-white: rgba(255, 255, 255, 0.8);
    --color-bg-card: rgba(255, 255, 255, 0.15);
    --color-bg-card-hover: rgba(255, 255, 255, 0.25);
    --color-bg-dark: rgba(0, 0, 0, 0.4);

    /* ============================================================
       ТЕКСТ
       ============================================================ */
    --color-text-primary: #1a1a2e;
    --color-text-secondary: rgba(0, 0, 0, 0.6);
    --color-text-light: #333333;
    --color-text-muted: rgba(0, 0, 0, 0.3);
    --color-text-dark: #1a1a2e;
    --color-text-white: #ffffff;

    /* ============================================================
       ОТСТУПЫ
       ============================================================ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 30px;

    /* ============================================================
       САЙДБАР (общий каркас для всех приложений)
       ============================================================ */
    --sidebar-width: 280px;
    --sidebar-padding-left-main: 8px;
    --sidebar-padding-left-nested: 24px;
    --sidebar-padding-right: 8px;

    /* ============================================================
       СКРУГЛЕНИЯ
       ============================================================ */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* ============================================================
       ТЕНИ
       ============================================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* ============================================================
       БЛЮР
       ============================================================ */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 20px;

    /* ============================================================
       ШРИФТЫ (размеры)
       ============================================================ */
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 48px;

    /* ============================================================
       ПЕРЕХОДЫ
       ============================================================ */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

        /* ============================================================
       ПЛИТКИ (tiles) — система уровней
       ============================================================ */

    /* Уровень 1: панели контента (.glass) */
    --tile-panel-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%);
    --tile-panel-bg-hover: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
    --tile-panel-border: rgba(255, 255, 255, 0.8);
    --tile-panel-blur: 8px;

    /* Уровень 2: фото-модалка (прозрачная) */
    --tile-photo-bg: rgba(255, 255, 255, 0.05);
    --tile-photo-border: rgba(255, 255, 255, 0.1);
    --tile-photo-blur: 12px;

    /* Уровень 3: инфо-панель (чуть белее фото-модалки) */
    --tile-info-bg: rgba(255, 255, 255, 0.15);
    --tile-info-border: rgba(255, 255, 255, 0.15);
    --tile-info-blur: 12px;

    /* Уровень 4: модалки и шапка (плотные, белые) */
    --tile-modal-bg: rgba(232, 237, 242, 0.65);
    --tile-modal-border: rgba(255, 255, 255, 0.15);
    --tile-modal-blur: 12px;
    --tile-modal-shadow: 0 4px 30px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.03);

    /* Общие для всех плиток */
    --tile-radius: 8px;
}

/* ============================================================
   КАСТОМНЫЙ СКРОЛЛБАР (глобально)
   ============================================================ */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ============================================================
   УТИЛИТАРНЫЙ КЛАСС: скрыть видимое-по-умолчанию
   Используется, когда элемент в CSS изначально виден,
   а нужно его программно скрыть.
   ============================================================ */
.is-hidden {
    display: none !important;
}