/* ============================================================
   CORE.CSS — ГЛАВНЫЙ ФАЙЛ СТИЛЕЙ (С ЗАКРУГЛЕНИЯМИ)
   ============================================================ */

/* Порядок импорта важен! */
@import url('variables.css');
@import url('reset.css');
@import url('utilities.css');
@import url('header.css');
@import url('sidebar.css');
@import url('footer.css');
@import url('cards.css');
@import url('toast.css');
@import url('editor.css');
@import url('responsive.css');

/* ===== ОСНОВНАЯ СТРУКТУРА ПРИЛОЖЕНИЯ ===== */

/* ===== БАЗОВАЯ СТРУКТУРА ===== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #1d1d1d;
    padding-top: var(--header-height);
}

/* ===== ГЛАВНЫЙ КОНТЕЙНЕР ===== */
.app-container {
    display: flex;
    min-height: calc(100vh - var(--header-height));
    position: relative;
}

/* ===== ОСНОВНОЙ КОНТЕНТ (СКРОЛЛИТСЯ) ===== */
.main-content {
    flex: 1;
    background: #1d1d1d;
    display: flex;
    flex-direction: column;
}

/* ===== БЕЛЫЙ КОНТЕЙНЕР С ЗАКРУГЛЕНИЯМИ ===== */
.white-container {
    background: white;
    border-radius: 24px 0 0 24px;
    margin: 12px 0 12px 0;
    flex: 1;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

.content-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 32px;
}

/* ===== ФУТЕР ВНУТРИ MAIN CONTENT ===== */
.footer {
    margin-top: 0;
    background: #1d1d1d;
    border-top: none;
}

/* ===== ФИКСЫ ДЛЯ САЙДБАРА ===== */
.app-sidebar {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    flex-shrink: 0;
    background: #1d1d1d;
}

/* Для страниц инструментов (editor.html и др.) */
.tool-page .app-sidebar {
    display: none;
}

.tool-page .main-content {
    margin-left: 0;
    padding: 0;
}

.tool-page .white-container {
    border-radius: 0;
    margin: 0;
}

/* Для страниц без сайдбара */
.no-sidebar .app-sidebar {
    display: none;
}

.no-sidebar .main-content {
    margin-left: 0;
}

/* ===== СПИННЕР ДЛЯ КНОПОК ЗАГРУЗКИ ===== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.6s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== КАСТОМНЫЙ СКРОЛЛ ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--spectrum-gray-100);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--spectrum-gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--spectrum-gray-500);
}

/* ===== ВЫДЕЛЕНИЕ ТЕКСТА ===== */
::selection {
    background: var(--accent-primary-light);
    color: var(--spectrum-gray-800);
}

/* ===== ФОКУС ДЛЯ ДОСТУПНОСТИ ===== */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ===== СТРАНИЦЫ ИНСТРУМЕНТОВ — БЕЗ СКРОЛЛА ===== */
html.no-scroll,
body.no-scroll {
    overflow: hidden;
    height: 100%;
}

.tool-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tool-page .main-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
}

.tool-page #footer-placeholder {
    display: none;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 768px) {
    .main-content {
        padding: 0;
    }
    
    .white-container {
        border-radius: 0;
        margin: 0;
    }
}