/* Палитра, типографика и базовые элементы. Подключается на всех страницах первым.
   Стиль — строгий Material: индиго как основной цвет, розовый — только акцент логотипа. */

:root {
    --home-primary: #3f51b5;
    --home-primary-rgb: 63, 81, 181;
    --home-primary-hover: #34449c;
    --home-primary-active: #2c3a85;
    --home-primary-container: #e8eaf6;
    --home-primary-pressed: #d9ddf2;
    --home-accent: #e91e63;

    --home-bg: #f4f5f8;
    --home-surface: #ffffff;
    --home-surface-variant: #f7f8fa;
    --home-border: #e2e5eb;
    --home-control-border: #cfd4dc;
    --home-control-border-hover: #b9c0cb;
    --home-pressed: #eceef2;
    --home-text: #1c2230;
    --home-muted: #667085;

    --home-success: #2e7d32;
    --home-warning: #ed8b00;
    --home-danger: #d32f2f;
    --home-danger-rgb: 211, 47, 47;
    --home-danger-container: #fdecec;
    --home-danger-pressed: #fadada;
    --home-info: #0288d1;
    --home-neutral: #8a94a6;

    --home-radius: 10px;
    --home-radius-sm: 6px;
    --home-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    --home-shadow-menu: 0 2px 6px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .12);
    --home-console-bg: #161b26;
    --home-console-text: #d0d5dd;
    --home-changed-bg: #fff8e1;

    /* Bootstrap берёт цвета отсюда: бейджи, фон полей и таблиц, ссылки, рамки, фокус.
       --bs-body-bg — цвет поверхностей (поля, таблицы, модалки), фон страницы задаёт body. */
    --bs-body-font-family: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: var(--home-surface);
    --bs-body-color: var(--home-text);
    --bs-border-color: var(--home-border);
    --bs-border-radius: var(--home-radius-sm);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--home-radius);
    --bs-primary: var(--home-primary);
    --bs-primary-rgb: var(--home-primary-rgb);
    --bs-success-rgb: 46, 125, 50;
    --bs-warning-rgb: 237, 139, 0;
    --bs-danger-rgb: var(--home-danger-rgb);
    --bs-info-rgb: 2, 136, 209;
    --bs-secondary-rgb: 138, 148, 166;
    --bs-link-color: var(--home-primary);
    --bs-link-color-rgb: var(--home-primary-rgb);
    --bs-link-hover-color: var(--home-primary-hover);
    --bs-focus-ring-color: rgba(var(--home-primary-rgb), .2);
}

/* Тёмная тема: data-bs-theme="dark" на <html> ставит theme.js. Меняются только переменные —
   компоненты и страницы берут цвета из них. Специфичность выше, чем у [data-bs-theme=dark] Bootstrap. */
:root[data-bs-theme="dark"] {
    --home-primary: #7c8ce0;
    --home-primary-rgb: 124, 140, 224;
    --home-primary-hover: #94a1e8;
    --home-primary-active: #aab4ee;
    --home-primary-container: #262c48;
    --home-primary-pressed: #303863;

    --home-bg: #11141b;
    --home-surface: #1a1e28;
    --home-surface-variant: #212633;
    --home-border: #2c3241;
    --home-control-border: #3a4153;
    --home-control-border-hover: #4b5468;
    --home-pressed: #2a3040;
    --home-text: #e3e6ee;
    --home-muted: #98a1b3;

    --home-danger: #ef6461;
    --home-danger-rgb: 239, 100, 97;
    --home-danger-container: #3a2124;
    --home-danger-pressed: #4a272b;
    --home-neutral: #6b7385;

    --home-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --home-shadow-menu: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .5);
    --home-console-bg: #0c0f14;
    --home-changed-bg: #3a3320;

    --bs-secondary-rgb: 107, 115, 133;
}

/* Контейнеры центрируем по всему окну, а не по ширине без полосы прокрутки: она есть только у длинных
   страниц, и без поправки панель и содержимое прыгали бы на полширины полосы при переходе между страницами.
   Место под полосу не резервируем — на коротких страницах и разделах на весь экран оно пустовало бы.
   100vw включает полосу, 100% (ширина родителя) — нет; на телефонах полоса поверх и разница 0.
   С 576px: там у .container есть поля шире половины полосы, сдвиг не даст горизонтальной прокрутки */
@media (min-width: 576px) {
    .app-bar > .container,
    main > .container {
        position: relative;
        left: calc((100vw - 100%) / 2);
    }
}

/* Модальное окно Bootstrap прячет прокрутку и ставит body отступ на ширину полосы. Нам он не нужен:
   без полосы поправка выше обнуляется, и центр остаётся тем же. Его отступ inline, поэтому !important */
body.modal-open {
    padding-right: 0 !important;
}

body {
    background-color: var(--home-bg);
    color: var(--home-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--home-primary);
    text-decoration: none;
}

a:hover {
    color: var(--home-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

hr {
    border-color: var(--home-border);
    opacity: 1;
}

.text-muted {
    color: var(--home-muted) !important;
}

/* --- Кнопки: плоские, ровные, одного размера шрифта --- */

.btn {
    --bs-btn-font-weight: 500;
    letter-spacing: .01em;
}

.btn-primary {
    --bs-btn-bg: var(--home-primary);
    --bs-btn-border-color: var(--home-primary);
    --bs-btn-hover-bg: var(--home-primary-hover);
    --bs-btn-hover-border-color: var(--home-primary-hover);
    --bs-btn-active-bg: var(--home-primary-active);
    --bs-btn-active-border-color: var(--home-primary-active);
    --bs-btn-disabled-bg: var(--home-primary);
    --bs-btn-disabled-border-color: var(--home-primary);
    --bs-btn-focus-shadow-rgb: var(--home-primary-rgb);
    box-shadow: 0 1px 2px rgba(var(--home-primary-rgb), .3);
}

.btn-outline-primary {
    --bs-btn-color: var(--home-primary);
    --bs-btn-border-color: rgba(var(--home-primary-rgb), .45);
    --bs-btn-hover-color: var(--home-primary);
    --bs-btn-hover-bg: var(--home-primary-container);
    --bs-btn-hover-border-color: var(--home-primary);
    --bs-btn-active-color: var(--home-primary);
    --bs-btn-active-bg: var(--home-primary-pressed);
    --bs-btn-active-border-color: var(--home-primary);
    --bs-btn-disabled-color: var(--home-primary);
    --bs-btn-disabled-border-color: rgba(var(--home-primary-rgb), .45);
    --bs-btn-focus-shadow-rgb: var(--home-primary-rgb);
}

.btn-outline-secondary,
.btn-secondary {
    --bs-btn-color: var(--home-text);
    --bs-btn-bg: var(--home-surface);
    --bs-btn-border-color: var(--home-control-border);
    --bs-btn-hover-color: var(--home-text);
    --bs-btn-hover-bg: var(--home-surface-variant);
    --bs-btn-hover-border-color: var(--home-control-border-hover);
    --bs-btn-active-color: var(--home-text);
    --bs-btn-active-bg: var(--home-pressed);
    --bs-btn-active-border-color: var(--home-control-border-hover);
    --bs-btn-disabled-color: var(--home-muted);
    --bs-btn-disabled-bg: var(--home-surface);
    --bs-btn-disabled-border-color: var(--home-border);
    --bs-btn-focus-shadow-rgb: var(--home-primary-rgb);
}

/* Выбранная кнопка в группе-переключателе */
.btn-check:checked + .btn-outline-secondary {
    color: var(--home-primary);
    background: var(--home-primary-container);
    border-color: rgba(var(--home-primary-rgb), .45);
}

.btn-outline-danger {
    --bs-btn-color: var(--home-danger);
    --bs-btn-border-color: rgba(var(--home-danger-rgb), .45);
    --bs-btn-hover-color: var(--home-danger);
    --bs-btn-hover-bg: var(--home-danger-container);
    --bs-btn-hover-border-color: var(--home-danger);
    --bs-btn-active-color: var(--home-danger);
    --bs-btn-active-bg: var(--home-danger-pressed);
    --bs-btn-active-border-color: var(--home-danger);
    --bs-btn-disabled-color: var(--home-danger);
    --bs-btn-disabled-border-color: rgba(var(--home-danger-rgb), .45);
    --bs-btn-focus-shadow-rgb: var(--home-danger-rgb);
}

/* --- Поля ввода --- */

.form-control,
.form-select {
    border-color: var(--home-control-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--home-primary);
    box-shadow: 0 0 0 3px rgba(var(--home-primary-rgb), .15);
}

.form-check-input:checked {
    background-color: var(--home-primary);
    border-color: var(--home-primary);
}

.form-check-input:focus {
    border-color: var(--home-primary);
    box-shadow: 0 0 0 3px rgba(var(--home-primary-rgb), .15);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%233f51b5'/%3e%3c/svg%3e");
}

.form-label {
    font-size: .875rem;
    font-weight: 500;
}

.input-group-text {
    background: var(--home-surface-variant);
    border-color: var(--home-control-border);
    color: var(--home-muted);
}

/* --- Бейджи, пагинация, модальные окна, уведомления --- */

.badge {
    font-weight: 500;
    letter-spacing: .02em;
    border-radius: 4px;
}

.pagination {
    --bs-pagination-color: var(--home-text);
    --bs-pagination-hover-color: var(--home-primary);
    --bs-pagination-focus-color: var(--home-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--home-primary-rgb), .15);
    --bs-pagination-active-bg: var(--home-primary);
    --bs-pagination-active-border-color: var(--home-primary);
}

.modal-content {
    border: 0;
    border-radius: var(--home-radius);
    box-shadow: var(--home-shadow-menu);
}

.modal-header,
.modal-footer {
    border-color: var(--home-border);
}

.modal-title {
    font-weight: 500;
}

.alert {
    border-radius: var(--home-radius-sm);
}

/* --- Утилиты --- */

/* Длинные строки не должны ломать вёрстку карточек */
.text-break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.min-w-0 {
    min-width: 0;
}