/**
 * Тема МГПУ для Bulma.
 * Палитра — UI Style Guide МГПУ (2026).
 * Подключать ПОСЛЕ bulma.min.css.
 */

/* === Токены бренда МГПУ === */
:root {
    --impact-primary: #F03A2A;
    --impact-primary-dark: #D92E20;
    --impact-primary-light: #FFF4F2;

    --impact-gray-900: #3E3E3E;
    --impact-gray-700: #666666;
    --impact-gray-500: #9A9A9A;
    --impact-gray-300: #D8D8D8;
    --impact-gray-100: #F5F5F5;

    --impact-success: #2E7D32;
    --impact-warning: #D89A00;
    --impact-info: #2F6FB3;
    --impact-method: #6F5AA8;
    --impact-analytics: #2E8B8B;
    --impact-danger: #C62828;

    /* Семантические алиасы */
    --impact-dark: var(--impact-gray-900);
    --impact-muted: var(--impact-gray-500);
    --impact-bg: #F6F7F9;
    --impact-border: #EEEEEE;
    --impact-surface: #FFFFFF;
    --impact-text: #333333;
}

/* === Шрифт === */
@font-face {
    font-family: 'Museo Sans';
    src: url('../fonts/MuseoSansCyrl.otf') format('opentype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* === Переопределение переменных Bulma === */
:root {
    --bulma-family-primary: 'Museo Sans', 'Segoe UI', Arial, sans-serif;
    --bulma-family-secondary: var(--bulma-family-primary);

    --bulma-radius: 0.5rem;
    --bulma-radius-small: 0.375rem;
    --bulma-radius-large: 0.875rem;

    /* primary #F03A2A */
    --bulma-primary-h: 5deg;
    --bulma-primary-s: 87%;
    --bulma-primary-l: 55%;

    /* link #2F6FB3 — вторичные действия, как btn-ghost в гайде */
    --bulma-link-h: 212deg;
    --bulma-link-s: 58%;
    --bulma-link-l: 44%;

    /* dark #3E3E3E — навигация, футер, заголовки */
    --bulma-dark-h: 0deg;
    --bulma-dark-s: 0%;
    --bulma-dark-l: 24%;

    /* success #2E7D32 */
    --bulma-success-h: 123deg;
    --bulma-success-s: 46%;
    --bulma-success-l: 34%;

    /* warning #D89A00 */
    --bulma-warning-h: 42deg;
    --bulma-warning-s: 100%;
    --bulma-warning-l: 42%;

    /* info #2F6FB3 */
    --bulma-info-h: 212deg;
    --bulma-info-s: 58%;
    --bulma-info-l: 44%;

    /* danger #C62828 */
    --bulma-danger-h: 0deg;
    --bulma-danger-s: 66%;
    --bulma-danger-l: 47%;

    /* Схема страницы #F6F7F9, текст #333 */
    --bulma-scheme-h: 220deg;
    --bulma-scheme-s: 20%;
    --bulma-scheme-main-l: 97%;

    --bulma-text-h: 0deg;
    --bulma-text-s: 0%;
    --bulma-text-l: 20%;

    --bulma-border-h: 0deg;
    --bulma-border-s: 0%;
    --bulma-border-l: 93%;
}

/* === Базовая типографика === */
body {
    -webkit-font-smoothing: antialiased;
    color: var(--impact-text);
}

a {
    color: var(--impact-info);
}

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

/* === Шапка === */
.navbar.is-white {
    background-color: var(--impact-surface);
    border-bottom: 1px solid var(--impact-gray-300);
}

.navbar.is-white .navbar-item:hover,
.navbar.is-white .navbar-item:focus {
    background-color: var(--impact-gray-100);
    color: var(--impact-gray-900);
}

/* === Кнопки === */
.button.is-primary:hover {
    background-color: var(--impact-primary-dark);
    border-color: var(--impact-primary-dark);
}

.button.is-light {
    background-color: var(--impact-surface);
    border-color: var(--impact-gray-300);
    color: var(--impact-gray-900);
}

.button.is-light:hover {
    background-color: #FAFAFA;
    border-color: var(--impact-gray-300);
}

.button.is-danger.is-outlined,
.button.is-danger.is-light {
    background-color: var(--impact-surface);
    border-color: var(--impact-danger);
    color: var(--impact-danger);
}

/* === Формы === */
.input,
.textarea,
.select select {
    border-radius: var(--bulma-radius);
    border-color: var(--impact-gray-300);
}

.input:focus,
.textarea:focus,
.select select:focus,
.input.is-focused,
.textarea.is-focused,
.select select.is-focused {
    border-color: var(--impact-primary);
    box-shadow: 0 0 0 0.125em rgba(240, 58, 42, 0.15);
}

.input.is-success,
.textarea.is-success,
.select select.is-success {
    border-color: var(--impact-success);
    box-shadow: none;
}

.input.is-danger,
.textarea.is-danger,
.select select.is-danger {
    border-color: var(--impact-danger);
    box-shadow: none;
}

.label {
    color: var(--impact-gray-900);
    font-weight: 700;
}

/* === Карточки и блоки === */
.box,
.card {
    border-radius: 0.875rem;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: var(--impact-surface);
}

.card-header {
    border-bottom: 1px solid var(--impact-border);
}

.card-header-title {
    color: var(--impact-gray-900);
    font-weight: 700;
}

/* === Таблицы === */
.table {
    background-color: var(--impact-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 0.875rem;
    overflow: hidden;
}

.table thead {
    background-color: #FAFAFA;
}

.table thead th {
    color: var(--impact-gray-900);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: none;
    padding: 0.875rem;
}

.table td,
.table th {
    padding: 0.875rem;
    border-color: var(--impact-border);
}

.table.is-striped tbody tr:nth-child(even) {
    background-color: #FCFCFC;
}

.table.is-hoverable tbody tr:hover {
    background-color: var(--impact-primary-light);
}

/* === Теги / статусы === */
.tag {
    border-radius: 999px;
    font-weight: 600;
}

.tag.is-light {
    background-color: var(--impact-gray-100);
    color: var(--impact-gray-500);
}

.tag.is-method {
    background-color: var(--impact-method);
    color: #fff;
}

.tag.is-analytics {
    background-color: var(--impact-analytics);
    color: #fff;
}

/* === Хлебные крошки === */
.breadcrumb a {
    color: var(--impact-info);
}

.breadcrumb a:hover {
    color: var(--impact-primary);
}

.breadcrumb li.is-active a {
    color: var(--impact-gray-900);
    font-weight: 500;
}

/* === Уведомления (solid, как в гайде) === */
.notification {
    border-radius: 0.625rem;
    color: #fff;
}

.notification.is-info {
    background-color: var(--impact-info);
    color: #fff;
}

.notification.is-success {
    background-color: var(--impact-success);
    color: #fff;
}

.notification.is-warning {
    background-color: var(--impact-warning);
    color: #fff;
}

.notification.is-danger {
    background-color: var(--impact-danger);
    color: #fff;
}

.notification.is-info.is-light,
.notification.is-success.is-light,
.notification.is-warning.is-light,
.notification.is-danger.is-light {
    color: #fff;
}

.notification.is-info.is-light {
    background-color: var(--impact-info);
}

.notification.is-success.is-light {
    background-color: var(--impact-success);
}

.notification.is-warning.is-light {
    background-color: var(--impact-warning);
}

.notification.is-danger.is-light {
    background-color: var(--impact-danger);
}

.notification .delete {
    background-color: rgba(255, 255, 255, 0.35);
}

.notification .delete:hover {
    background-color: rgba(255, 255, 255, 0.55);
}

/* === Футер === */
.footer {
    background-color: var(--impact-gray-900);
    color: rgba(255, 255, 255, 0.7);
    padding: 1.25rem 0;
}

.footer strong,
.footer a {
    color: rgba(255, 255, 255, 0.85);
}

/* === Hero === */
.hero.is-primary {
    background: linear-gradient(135deg, var(--impact-gray-900) 0%, #2A2A2A 100%);
}

.hero.is-primary .title,
.hero.is-primary .subtitle {
    color: #fff;
}

/* === Прогресс (Bulma progress) === */
progress.progress,
.progress {
    height: 0.75rem;
    border-radius: 999px;
    background-color: var(--impact-gray-300);
}

progress.progress::-webkit-progress-bar {
    background-color: var(--impact-gray-300);
    border-radius: 999px;
}

progress.progress::-webkit-progress-value {
    background-color: var(--impact-primary);
    border-radius: 999px;
}

progress.progress::-moz-progress-bar {
    background-color: var(--impact-primary);
    border-radius: 999px;
}

/* === Раскрывающиеся блоки === */
details {
    background: var(--impact-surface);
    border: 1px solid var(--impact-gray-300);
    border-radius: var(--bulma-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

details summary {
    padding: 0.875rem 1.125rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--impact-gray-900);
    background: var(--impact-gray-100);
    transition: background 0.2s;
}

details summary:hover {
    background: var(--impact-primary-light);
}

details[open] summary {
    border-bottom: 1px solid var(--impact-border);
}