/**
 * Доска спринта, беклог и ретроспектива.
 *
 * Цвета берутся из темы Filament 4. Важно: там переменные вида --gray-200 —
 * это уже готовые цвета (oklch), а не RGB-тройки, как было в третьей версии.
 * Поэтому используем var(--gray-200) напрямую, а прозрачность делаем через
 * color-mix(). У каждой переменной прописан запасной цвет: если тема их
 * переименует, доска останется читаемой, а не превратится в белые пятна.
 */

.scrum-board,
.scrum-backlog,
.scrum-retro {
    --sb-border: var(--gray-200, #e5e7eb);
    --sb-surface: var(--gray-50, #f9fafb);
    --sb-surface-raised: #fff;
    --sb-text: var(--gray-900, #111827);
    --sb-text-muted: var(--gray-500, #6b7280);
    --sb-accent: var(--primary-600, #1c8437);
    --sb-danger: var(--danger-600, #dc2626);
    --sb-warning: var(--warning-500, #f59e0b);

    /* Скругление панелей, колонок и карточек. Одной переменной, чтобы менять
       вид всего раздела в одном месте, а не в девяти правилах.
       Ноль — прямые углы; счётчики, метки и аватары к ней не относятся: они
       круглые по своей форме, и выпрямлять их значит сломать сам элемент. */
    --sb-radius: 0;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

:is(.dark) .scrum-board,
:is(.dark) .scrum-backlog,
:is(.dark) .scrum-retro {
    --sb-border: var(--gray-700, #374151);
    --sb-surface: var(--gray-900, #111827);
    --sb-surface-raised: var(--gray-800, #1f2937);
    --sb-text: var(--gray-100, #f3f4f6);
    --sb-text-muted: var(--gray-400, #9ca3af);
    --sb-accent: var(--primary-500, #22a34a);
}

/* ── Переключатель проектов ──────────────────────────────────────────────── */

.scrum-board__projects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.scrum-board__projects-label,
.scrum-board__filters-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sb-text-muted);
}

.scrum-board__project {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-surface-raised);
    color: var(--sb-text);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.scrum-board__project:hover {
    border-color: color-mix(in oklab, var(--project-color) 45%, var(--sb-border));
}

/* Выбранный проект должен читаться с одного взгляда: на этом экране всё
   остальное — про него, и спутать его с соседним значит смотреть чужие цифры.
   Поэтому не только рамка, но и заметная заливка цветом проекта. */
.scrum-board__project.is-active {
    border-color: var(--project-color);
    background: color-mix(in oklab, var(--project-color) 32%, var(--sb-surface-raised));
    color: var(--sb-text);
    font-weight: 600;
}

.scrum-board__project.is-active .scrum-board__project-name {
    color: var(--sb-text);
}

.scrum-board__project-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--sb-radius);
    background: var(--project-color);
    flex: none;
}

.scrum-board__project-key {
    font-weight: 700;
    letter-spacing: .02em;
}

.scrum-board__project-name {
    color: var(--sb-text-muted);
}

/* ── Шапка спринта ───────────────────────────────────────────────────────── */

.scrum-board__sprint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-accent);
    border-radius: var(--sb-radius);
    background: var(--sb-surface-raised);
}

.scrum-board__sprint-main {
    flex: 1 1 260px;
    min-width: 0;
}

.scrum-board__sprint-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-text);
}

.scrum-board__sprint-goal {
    font-size: 0.8125rem;
    color: var(--sb-text-muted);
    margin-top: 2px;
}

.scrum-board__sprint-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.scrum-board__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scrum-board__stat-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sb-text-muted);
}

.scrum-board__stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sb-text);
}

.scrum-board__stat-value.is-danger {
    color: var(--sb-danger);
}

.scrum-board__progress {
    flex: 1 1 100%;
    height: 18px;
    border-radius: 999px;
    background: var(--sb-surface);
    overflow: hidden;
}

.scrum-board__progress-bar {
    height: 100%;
    min-width: 2rem;
    background: var(--sb-accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    transition: width .3s;
}

/* ── Сообщения ───────────────────────────────────────────────────────────── */

.scrum-board__notice,
.scrum-board__error,
.scrum-board__empty {
    padding: 0.875rem 1.125rem;
    border: 1px dashed var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-surface);
    color: var(--sb-text-muted);
    font-size: 0.875rem;
}

.scrum-board__error {
    border-style: solid;
    border-color: color-mix(in oklab, var(--sb-danger) 45%, var(--sb-border));
    color: var(--sb-danger);
}

.scrum-board__empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.scrum-board__empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-text);
    margin-bottom: 0.5rem;
}

/* ── Фильтры ─────────────────────────────────────────────────────────────── */

.scrum-board__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.scrum-board__filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.scrum-board__chip {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--sb-border);
    border-radius: 999px;
    background: var(--sb-surface-raised);
    color: var(--sb-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}

.scrum-board__chip:hover {
    border-color: var(--sb-accent);
}

.scrum-board__chip.is-active {
    border-color: var(--sb-accent);
    background: color-mix(in oklab, var(--sb-accent) 14%, var(--sb-surface-raised));
    color: var(--sb-text);
    font-weight: 600;
}

.scrum-board__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--sb-text-muted);
    cursor: pointer;
}

/* ── Колонки ─────────────────────────────────────────────────────────────── */

.scrum-board__columns {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    /* Колонок бывает шесть и больше — по горизонтали прокручиваем сам ряд,
       а не всю страницу. */
    overflow-x: auto;
    padding-bottom: 0.5rem;
    min-height: 12rem;
}

.scrum-board__columns.is-loading {
    opacity: .5;
    pointer-events: none;
}

.scrum-column {
    flex: 0 0 19rem;
    max-width: 19rem;
    border: 1px solid var(--sb-border);
    border-top: 3px solid var(--column-color, var(--sb-accent));
    border-radius: var(--sb-radius);
    background: var(--sb-surface);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 22rem);
    min-height: 8rem;
}

.scrum-column__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--sb-border);
}

.scrum-column__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sb-text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scrum-column__final {
    font-size: 0.8125rem;
    line-height: 1;
    flex: none;
    cursor: help;
}

.scrum-column__count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sb-text-muted);
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--sb-surface-raised);
    border: 1px solid var(--sb-border);
    flex: none;
}

.scrum-column__count.is-over {
    color: #fff;
    background: var(--sb-danger);
    border-color: var(--sb-danger);
}

.scrum-column__add {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--sb-radius);
    border: 1px dashed var(--sb-border);
    background: transparent;
    color: var(--sb-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.scrum-column__add:hover {
    border-color: var(--sb-accent);
    color: var(--sb-accent);
}

.scrum-column__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 4rem;
    transition: background-color .15s;
}

.scrum-column__body.is-over {
    background: color-mix(in oklab, var(--sb-accent) 8%, transparent);
}

.scrum-column__empty {
    padding: 1rem 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--sb-text-muted);
}

/* ── Карточка ────────────────────────────────────────────────────────────── */

.scrum-card {
    border: 1px solid var(--sb-border);
    border-left: 3px solid var(--priority-color, var(--sb-border));
    border-radius: var(--sb-radius);
    background: var(--sb-surface-raised);
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    transition: box-shadow .15s, transform .1s, opacity .15s;
}

.scrum-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.scrum-card.is-dragging {
    opacity: .45;
    transform: rotate(1deg);
}

.scrum-card.is-blocked {
    border-color: color-mix(in oklab, var(--sb-danger) 55%, var(--sb-border));
}

.scrum-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.scrum-card__type {
    font-size: 0.6875rem;
    color: var(--sb-text-muted);
}

.scrum-card__key {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--sb-text-muted);
    text-decoration: none;
    letter-spacing: .02em;
}

.scrum-card__key:hover {
    color: var(--sb-accent);
    text-decoration: underline;
}

.scrum-card__title {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--sb-text);
    font-weight: 500;
}

.scrum-card__epic {
    font-size: 0.6875rem;
    color: var(--epic-color, #7c3aed);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.scrum-card__epic::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--epic-color, #7c3aed);
}

.scrum-card__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.scrum-card__label {
    font-size: 0.625rem;
    font-weight: 600;
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
}

.scrum-card__blocked {
    font-size: 0.6875rem;
    color: var(--sb-danger);
    line-height: 1.3;
}

.scrum-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 2px;
}

.scrum-card__meta {
    font-size: 0.6875rem;
    color: var(--sb-text-muted);
}

.scrum-card__meta.is-danger {
    color: var(--sb-danger);
    font-weight: 600;
}

/* Стопка исполнителя и соисполнителей: кружки заходят друг на друга, как в
   привычных трекерах, — так они занимают место одного. */
.scrum-card__people {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex: none;
}

.scrum-card__people > .scrum-card__avatar + .scrum-card__avatar {
    margin-left: -0.4rem;
}

.scrum-card__avatar--mate {
    background: var(--sb-surface);
    color: var(--sb-text-muted);
    border: 1px solid var(--sb-border);
}

.scrum-card__avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--sb-accent) 18%, var(--sb-surface));
    color: var(--sb-text);
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.scrum-card__avatar.is-empty {
    background: var(--sb-surface);
    color: var(--sb-text-muted);
    border: 1px dashed var(--sb-border);
}

/* ── Беклог ──────────────────────────────────────────────────────────────── */

.scrum-backlog__hints {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.75rem 1.125rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-surface-raised);
}

.scrum-backlog__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .scrum-backlog__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.scrum-backlog__layout.is-loading {
    opacity: .5;
    pointer-events: none;
}

.scrum-backlog__sprints {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.scrum-bucket {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-surface);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scrum-bucket--backlog {
    border-top: 3px solid var(--sb-text-muted);
}

.scrum-bucket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--sb-border);
}

.scrum-bucket__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sb-text);
}

.scrum-bucket__count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sb-text-muted);
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-raised);
}

.scrum-bucket__count.is-over {
    color: #fff;
    background: var(--sb-warning);
    border-color: var(--sb-warning);
}

.scrum-bucket__subtitle,
.scrum-bucket__goal {
    padding: 0.375rem 0.875rem 0;
    font-size: 0.75rem;
    color: var(--sb-text-muted);
}

.scrum-bucket__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem 0.875rem;
    min-height: 5rem;
    max-height: 32rem;
    overflow-y: auto;
    transition: background-color .15s;
}

.scrum-bucket__body.is-over {
    background: color-mix(in oklab, var(--sb-accent) 8%, transparent);
}

/* ── Ретроспектива ───────────────────────────────────────────────────────── */

.scrum-retro__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .scrum-retro__columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.scrum-retro__column {
    border: 1px solid var(--sb-border);
    border-top: 3px solid var(--retro-color, var(--sb-accent));
    border-radius: var(--sb-radius);
    background: var(--sb-surface);
    display: flex;
    flex-direction: column;
}

.scrum-retro__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--sb-border);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sb-text);
}

.scrum-retro__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
}

.scrum-retro__item {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-surface-raised);
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.scrum-retro__item.is-done {
    opacity: .6;
}

.scrum-retro__item.is-overdue {
    border-color: color-mix(in oklab, var(--sb-danger) 55%, var(--sb-border));
}

.scrum-retro__text {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--sb-text);
    white-space: pre-line;
}

.scrum-retro__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--sb-text-muted);
}

.scrum-retro__votes {
    font-weight: 700;
    color: var(--sb-accent);
}

.scrum-retro__empty {
    font-size: 0.75rem;
    color: var(--sb-text-muted);
    text-align: center;
    padding: 1rem 0;
}