/* C:\Myproject\home\django\focuspilot\static\css\custom.css */
/* Полностью переписанный файл */

/* Стили для блока приветствия на главной */
.welcome-container {
    min-height: 70vh; /* Высота блока */
    background-color: #212529; /* Темный фон (Bootstrap dark) */
    color: #fff; /* Белый текст по умолчанию */
    overflow: hidden; /* Скрыть выход канваса за пределы */
    /* Убираем внешние отступы, чтобы растянуть на всю ширину */
    margin-left: calc(-1 * (100vw - 100%) / 2);
    margin-right: calc(-1 * (100vw - 100%) / 2);
    width: 100vw; /* Ширина по вьюпорту */
    position: relative; /* Для позиционирования canvas */
}

/* Убираем отступы у body, если они мешают */
body {
     overflow-x: hidden; /* Предотвратить горизонтальный скролл из-за vw */
}

#gridCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Канвас под контентом */
    pointer-events: none; /* Мышь проходит сквозь канвас */
}

.welcome-content {
    position: relative; /* Контент над канвасом */
    z-index: 1;
    /* Небольшой фон для читаемости текста поверх анимации */
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* backdrop-filter: blur(1px); */ /* Легкое размытие фона */
    padding: 2rem; /* Отступы внутри контента */
}

.welcome-content h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Адаптивный размер шрифта */
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Тень для контраста */
}

.welcome-content p.lead {
     font-size: clamp(1.1rem, 3vw, 1.75rem); /* Адаптивный размер шрифта */
     color: #e9ecef; /* Светло-серый */
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
     max-width: 600px; /* Ограничиваем ширину параграфа */
     margin-left: auto;
     margin-right: auto;
}

/* Стили для страницы входа */
.login-container {
    padding: 2rem;
    margin-top: 3rem;
    background-color: #f8f9fa; /* Светлый фон */
}

.login-container .form-control {
    margin-bottom: 1rem;
}

.login-container .btn {
    padding: 0.75rem 1.25rem;
}

/* Общие стили для форм */
.form-label {
    font-weight: 500;
}

/* Аватарки */
.navbar .dropdown-toggle img,
.list-group-item img {
    object-fit: cover; /* Масштабировать и обрезать аватар */
    border: 1px solid rgba(0,0,0,0.1); /* Тонкая рамка */
}

/* Адаптивность */
@media (max-width: 768px) {
    .welcome-container {
        min-height: 60vh;
    }
}

@media (max-width: 576px) {
     .welcome-container {
        min-height: 50vh;
    }
     .welcome-content {
        padding: 1.5rem;
    }
     .login-container {
         padding: 1.5rem;
     }
}

/* Стили для Markdown редактора EasyMDE (если нужно переопределить) */
.EasyMDEContainer .CodeMirror {
    border-color: #ced4da; /* Цвет рамки Bootstrap */
    min-height: 300px;
}
.EasyMDEContainer .editor-toolbar {
    border-top-left-radius: 0.25rem; /* Скругление как у Bootstrap */
    border-top-right-radius: 0.25rem;
    opacity: 0.95; /* Чуть прозрачности для красоты */
}
.EasyMDEContainer .editor-toolbar button {
    color: #495057; /* Цвет иконок */
}
.EasyMDEContainer .editor-toolbar button.active,
.EasyMDEContainer .editor-toolbar button:hover {
    background: #e9ecef; /* Фон при наведении/активности */
    border-color: #adb5bd;
}
/* Стили для отображаемого Markdown (.markdown-body используется GitHub CSS) */
.markdown-body {
    font-size: 1rem; /* Базовый размер шрифта */
    line-height: 1.6; /* Межстрочный интервал */
    padding: 1rem; /* Внутренние отступы для контейнера */
    background-color: #f8f9fa; /* Светлый фон для блока с Markdown */
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    border-bottom: 1px solid #dee2e6; /* Подчеркивание заголовков */
    padding-bottom: 0.3em;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.markdown-body code {
    background-color: #e9ecef; /* Фон для инлайн-кода */
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 85%;
}
.markdown-body pre {
    background-color: #e9ecef; /* Фон для блоков кода */
    padding: 1rem;
    border-radius: 5px;
    overflow-x: auto; /* Горизонтальная прокрутка для длинных строк кода */
}
.markdown-body pre code {
    background-color: transparent; /* Убираем фон у кода внутри pre */
    padding: 0;
}
.markdown-body blockquote {
    border-left: 0.25em solid #adb5bd; /* Стиль для цитат */
    padding-left: 1em;
    color: #6c757d; /* Серый цвет текста цитаты */
    margin-left: 0;
}
.markdown-body table {
    width: 100%; /* Таблицы на всю ширину */
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.markdown-body th,
.markdown-body td {
    border: 1px solid #dee2e6; /* Рамки в таблицах */
    padding: 0.5rem 0.75rem;
}
.markdown-body th {
    font-weight: bold;
    background-color: #f1f3f5;
}