/* EGEOK: кнопки и бейджи (токены — egeok-tokens.css, компоненты — egeok-components.css) */

/* Локальные модификаторы (банк заданий и т.п.) */
.btn.qb-btn-primary,
.qb-btn.btn-primary {
    background-color: var(--egeok-btn) !important;
    border-color: var(--egeok-btn) !important;
    color: #fff !important;
}

.btn.qb-btn-primary:hover,
.qb-btn.btn-primary:hover {
    background-color: var(--egeok-btn-hover) !important;
    border-color: var(--egeok-btn-hover) !important;
    color: #fff !important;
}

/* Базовые кнопки: flex — текст и иконки по центру при min-height (иначе baseline даёт смещение вверх) */
.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    font-weight: 500;
    line-height: 1.25;
    border-radius: var(--egeok-btn-radius);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.btn.rounded-pill {
    border-radius: var(--egeok-btn-radius) !important;
}

.btn:not(.btn-sm):not(.btn-lg) {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.btn-sm {
    min-height: 38px;
    border-radius: var(--egeok-btn-radius);
}

@media (pointer: coarse) {
    .btn-sm {
        min-height: 44px;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

/* Primary — тёмная заливка */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--egeok-btn);
    --bs-btn-border-color: var(--egeok-btn);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--egeok-btn-hover);
    --bs-btn-hover-border-color: var(--egeok-btn-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--egeok-btn-active);
    --bs-btn-active-border-color: var(--egeok-btn-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--egeok-btn-disabled);
    --bs-btn-disabled-border-color: var(--egeok-btn-disabled);
    --bs-btn-focus-shadow-rgb: 5, 150, 105;
    --bs-btn-border-radius: var(--egeok-btn-radius);
    color: #fff !important;
    background-color: var(--egeok-btn);
    border-color: var(--egeok-btn);
    border-radius: var(--egeok-btn-radius);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
    background-color: var(--egeok-btn-hover);
    border-color: var(--egeok-btn-hover);
    box-shadow: var(--egeok-shadow-btn-hover);
}

.btn-primary:active,
.btn-primary.active {
    color: #fff !important;
    background-color: var(--egeok-btn-active);
    border-color: var(--egeok-btn-active);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff !important;
    background-color: var(--egeok-btn-disabled);
    border-color: var(--egeok-btn-disabled);
    box-shadow: none;
    opacity: 1;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--egeok-btn-focus-ring);
}

/* Outline primary — зелёный акцент */
.btn-outline-primary {
    --bs-btn-color: var(--egeok-accent);
    --bs-btn-border-color: var(--egeok-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--egeok-accent);
    --bs-btn-hover-border-color: var(--egeok-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--egeok-accent-hover);
    --bs-btn-active-border-color: var(--egeok-accent-hover);
    --bs-btn-disabled-color: var(--egeok-btn-disabled);
    --bs-btn-disabled-border-color: var(--egeok-btn-disabled);
    --bs-btn-focus-shadow-rgb: 5, 150, 105;
    --bs-btn-border-radius: var(--egeok-btn-radius);
    color: var(--egeok-accent) !important;
    border-color: var(--egeok-accent);
    border-radius: var(--egeok-btn-radius);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--egeok-accent);
    border-color: var(--egeok-accent);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--egeok-btn-disabled) !important;
    border-color: var(--egeok-btn-disabled);
    background-color: transparent;
}

.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--egeok-btn-focus-ring);
}

/* Secondary filled */
.btn-secondary {
    border-radius: var(--egeok-btn-radius);
}

/* Мягкая primary (кабинеты) */
.btn-primary-soft {
    background-color: var(--egeok-btn);
    border-color: var(--egeok-btn);
    color: #fff !important;
    border-radius: var(--egeok-btn-radius);
}

.btn-primary-soft:hover {
    background-color: var(--egeok-btn-hover);
    border-color: var(--egeok-btn-hover);
    color: #fff !important;
}

/* CTA «Проверить» (очередь проверки) */
.btn.egeok-btn-check-review,
.btn.btn-egeok-check-review {
    background-color: var(--egeok-badge-pending-review-bg);
    border-color: var(--egeok-badge-pending-review-bg);
    color: var(--egeok-badge-pending-review-fg) !important;
    border-radius: var(--egeok-btn-radius);
}

.btn.egeok-btn-check-review:hover,
.btn.egeok-btn-check-review:focus,
.btn.btn-egeok-check-review:hover,
.btn.btn-egeok-check-review:focus {
    background-color: #9a0003;
    border-color: #9a0003;
    color: var(--egeok-badge-pending-review-fg) !important;
}

/* Колесо фортуны и др. локальные CTA на токенах */
.btn-qb-wheel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--egeok-btn-radius) !important;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border: none;
    background: var(--egeok-btn) !important;
    color: #fff !important;
    box-shadow: var(--egeok-shadow-btn-hover);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.btn-qb-wheel:hover {
    background: var(--egeok-btn-hover) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

/* Маркетинговая кнопка главной (legacy class) */
.boxed-btn4 {
    display: inline-block;
    padding: 15px 35px;
    background: #fff;
    color: rgb(33, 33, 33) !important;
    text-decoration: none;
    border-radius: var(--egeok-btn-radius);
    font-weight: 600;
    font-size: 1.1rem;
    min-height: 44px;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px var(--egeok-accent-soft);
}

.boxed-btn4:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    background: var(--egeok-accent);
    color: #fff !important;
}

/* --- Бейджи: тип теста (единый стиль с кабинетом преподавателя) --- */
.badge.egeok-test-type--hw {
    background-color: var(--egeok-test-type-hw-bg) !important;
    color: var(--egeok-test-type-hw-fg) !important;
    border: 1px solid var(--egeok-test-type-hw-border);
}

.badge.egeok-test-type--pe {
    background-color: var(--egeok-test-type-pe-bg) !important;
    color: var(--egeok-test-type-pe-fg) !important;
    border: 1px solid var(--egeok-test-type-pe-border);
}

.badge.egeok-test-type--tt {
    background-color: var(--egeok-test-type-tt-bg) !important;
    color: var(--egeok-test-type-tt-fg) !important;
    border: 1px solid var(--egeok-test-type-tt-border);
}

/* --- Бейджи: статусы проверки и школьные оценки (кабинет преподавателя и везде, где grade_badge) --- */
.badge.egeok-badge-status-checked {
    background-color: var(--egeok-badge-checked-bg) !important;
    color: var(--egeok-badge-checked-fg) !important;
    border: 2px solid rgba(20, 83, 45, 0.35);
    box-shadow: 0 1px 3px rgba(1, 107, 22, 0.12);
}

a.badge.egeok-badge-status-in-progress,
.badge.egeok-badge-status-in-progress {
    background-color: var(--egeok-badge-in-progress-bg) !important;
    color: var(--egeok-badge-in-progress-fg) !important;
    border: 1px solid rgba(26, 26, 26, 0.12);
}

.badge.egeok-grade-badge--2 {
    background-color: var(--egeok-grade-2-bg) !important;
    color: var(--egeok-grade-2-fg) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.badge.egeok-grade-badge--3 {
    background-color: var(--egeok-grade-3-bg) !important;
    color: var(--egeok-grade-3-fg) !important;
    border: 1px solid rgba(26, 26, 26, 0.12);
}

.badge.egeok-grade-badge--4 {
    background-color: var(--egeok-grade-4-bg) !important;
    color: var(--egeok-grade-4-fg) !important;
    border: 2px solid rgba(1, 107, 22, 0.45);
    box-shadow: 0 1px 4px rgba(1, 107, 22, 0.18);
}

.badge.egeok-grade-badge--5 {
    background-color: var(--egeok-grade-5-bg) !important;
    color: var(--egeok-grade-5-fg) !important;
    border: 2px solid rgba(1, 107, 22, 0.45);
    box-shadow: 0 1px 4px rgba(1, 107, 22, 0.18);
}

.badge.egeok-grade-badge--empty {
    background-color: var(--egeok-grade-empty-bg) !important;
    color: var(--egeok-grade-empty-fg) !important;
}

.badge.egeok-metric-badge {
    background-color: var(--egeok-metric-badge-bg) !important;
    color: var(--egeok-metric-badge-fg) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.badge.egeok-badge-status-pending-review,
a.badge.egeok-badge-status-pending-review {
    background-color: var(--egeok-badge-pending-review-bg) !important;
    color: var(--egeok-badge-pending-review-fg) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Вертикальное выравнивание текста в бейджах дизайн-системы */
.badge.egeok-badge-status-checked,
.badge.egeok-badge-status-in-progress,
a.badge.egeok-badge-status-in-progress,
.badge.egeok-badge-status-pending-review,
a.badge.egeok-badge-status-pending-review,
.badge.egeok-grade-badge--2,
.badge.egeok-grade-badge--3,
.badge.egeok-grade-badge--4,
.badge.egeok-grade-badge--5,
.badge.egeok-grade-badge--empty,
.badge.egeok-metric-badge,
.badge.egeok-test-type--hw,
.badge.egeok-test-type--pe,
.badge.egeok-test-type--tt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}