/* Стиль-гайд проекта — см. STYLEGUIDE.md. Только внешний вид, поверх Bootstrap. */

:root {
    --bs-body-font-family: 'Manrope', sans-serif;
    --bs-font-sans-serif: 'Manrope', sans-serif;
    --bs-body-color: #1F2933;

    --brand: #98A2B3;        /* нежно-серый — акценты, бейджи, обводки */
    --brand-strong: #5B6472; /* тёмный оттенок бренда — шапка, заливка кнопок */
    --brand-strong-hover: #47505C;

    --status-new: #9CA3AF;
    --status-in-progress: #0891B2;
    --status-done: #34D399;
    --status-cancelled: #F87171;
    --status-overdue: #EF4444;
    --status-late: #FBBF24;   /* выполнена, но позже плана (fact_end > plan_end) */

    --radius-soft: 0.6rem;
}

body {
    font-family: var(--bs-body-font-family);
}

/* Обычные ссылки — брендовый серый вместо яркого синего Bootstrap
   (см. STYLEGUIDE.md). Компонентные ссылки (кнопки, пункты меню, алерты,
   активный пункт шапки) переопределяют это своими более специфичными
   классами и не затронуты. */
a {
    color: var(--brand-strong);
    text-decoration: none;
    font-weight: 500;
}
a:hover {
    color: var(--brand-strong-hover);
    text-decoration: underline;
}

/* Мягкие скругления вместо стандартных углов Bootstrap */
.btn,
.card,
.form-control,
.form-select,
.alert,
.badge,
.dropdown-menu,
.list-group-item {
    border-radius: var(--radius-soft) !important;
}

/* Шапка сайта — тёмный оттенок бренда вместо стандартного bg-dark */
.navbar.bg-dark {
    background-color: var(--brand-strong) !important;
}

/* Основные кнопки — нежно-серый бренд (тёмный оттенок для читаемости белого текста) */
.btn-primary {
    background-color: var(--brand-strong);
    border-color: var(--brand-strong);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-strong-hover);
    border-color: var(--brand-strong-hover);
}

.btn-outline-primary {
    color: var(--brand-strong);
    border-color: var(--brand);
}
.btn-outline-primary:hover {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Кружок статуса задачи (см. STYLEGUIDE.md, «Статус задачи») */
.status-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.status-dot-new { background-color: var(--status-new); }
.status-dot-in_progress { background-color: var(--status-in-progress); }
.status-dot-done { background-color: var(--status-done); }
.status-dot-cancelled { background-color: var(--status-cancelled); }
.status-dot-overdue { background-color: var(--status-overdue); }
.status-dot-late { background-color: var(--status-late); }

/* Упрощённая схема кружка задачи — 3 цвета (см. STYLEGUIDE.md):
   серый — не в работе, зелёный — всё хорошо, красный — просрочка/нарушение. */
.status-dot-idle { background-color: #9CA3AF; }
.status-dot-good { background-color: #34D399; }
.status-dot-bad  { background-color: #EF4444; }

/* Активный пункт меню в шапке — подсветка бренд-акцентом (см. STYLEGUIDE.md) */
.nav-link-top {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}
.nav-link-top:hover {
    color: #fff;
}
.nav-link-top.active {
    color: #fff;
    border-bottom-color: #fff;
}

/* Нейтральный бейдж статуса проекта (без своего цветового кода — см. STYLEGUIDE.md) */
.badge-status {
    display: inline-block;
    background-color: #EEF0F3;
    color: var(--brand-strong);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-soft);
    white-space: nowrap;
}

/* Тонкий прогресс-бар «% выполнения» в реестре проектов */
.progress-mini {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.progress-mini-track {
    flex: 1;
    min-width: 3.5rem;
    height: 7px;
    background-color: #EEF0F3;
    border-radius: 20px;
    overflow: hidden;
}
.progress-mini-bar {
    height: 100%;
    background-color: var(--brand);
}
.progress-mini-value {
    min-width: 2.2rem;
    font-size: 0.8rem;
    color: var(--brand-strong);
}

/* Отклонение от плана: отставание — красным, опережение — зелёным */
.deviation-behind { color: #D6453D; font-weight: 500; }
.deviation-ahead  { color: #2E9E59; font-weight: 500; }

/* Реестр проектов: шапка по центру, «Название» шире, даты в одну строку */
.table-registry thead th {
    text-align: center;
    vertical-align: middle;
}
.table-registry th.col-name {
    min-width: 16rem;
}
.table-registry td.col-date {
    white-space: nowrap;
    text-align: center;
}

/* Таблица задач проекта — единая CSS-grid сетка на весь список (один общий
   заголовок сверху + сводные строки этапов + строки задач). Заголовок,
   сводная строка и строка задачи используют один grid-template-columns,
   поэтому колонки совпадают пиксель-в-пиксель независимо от содержимого
   (в отличие от нескольких независимых <table>, см. STYLEGUIDE.md). */
.task-grid { min-width: 60rem; font-size: 0.875rem; }
.task-grid-row {
    display: grid;
    grid-template-columns: 1.1rem 24fr 13fr 9fr 10fr 11fr 9fr 13fr 6fr 4.5rem;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.5rem 0.6rem;
}
.tg-name { text-align: left; overflow-wrap: anywhere; }
.tg-resp, .tg-date, .tg-dev, .tg-pct { text-align: center; overflow-wrap: anywhere; }
.tg-status { text-align: left; }
.tg-action { text-align: right; white-space: nowrap; }
/* «Статус» — только заголовок по центру; данные строк остаются слева
   (кружки стоят в одну вертикаль, см. STYLEGUIDE.md) */
.task-grid-header .tg-status { text-align: center; }

/* Общий заголовок колонок — один на всю таблицу задач */
.task-grid-header {
    background-color: #F7F7F8;
    color: var(--brand-strong);
    font-weight: 500;
    border-radius: var(--radius-soft);
    margin-bottom: 0.3rem;
}

/* Сводная сворачиваемая строка этапа — та же 3-цветная логика, что у
   кружка статуса задачи (см. STYLEGUIDE.md). */
.stage-bar {
    background-color: #F3F4F6;
    border-radius: var(--radius-soft);
    cursor: pointer;
    user-select: none;
    margin-top: 0.5rem;
}
.stage-bar:hover { background-color: #EAEBEE; }
.stage-bar .tg-name { font-weight: 600; }
.stage-chev {
    color: var(--brand-strong);
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.stage-bar.stage-collapsed .stage-chev { transform: rotate(-90deg); }
/* Действия этапа свёрнуты в меню «⋮» — иначе 3 ссылки не помещаются
   в общую с задачами колонку действия (см. STYLEGUIDE.md). */
.stage-actions-menu {
    display: flex;
    justify-content: flex-end;
}
.stage-actions-menu > .btn {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--brand-strong);
    text-decoration: none;
}
.stage-actions-menu > .btn:hover { color: var(--brand-strong-hover); }

/* Строка задачи */
.task-row { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.task-row.is-overdue-row { background-color: #FBEAEA; }
.task-row.is-archived-row { color: var(--brand-strong); }
.stage-tasks-wrap.d-none { display: none; }
.task-grid-empty { grid-column: 1 / -1; text-align: center; }

/* Сводка по проекту в целом — первая строка общей сетки таблицы задач
   (см. STYLEGUIDE.md), выровнена по тем же колонкам, что и строки этапов/
   задач ниже. Те же метрики, что в реестре проектов и паспорте. */
.project-summary-row {
    margin-bottom: 0.3rem;
}
.project-summary-row .tg-name {
    font-weight: 600;
    color: var(--brand-strong);
    font-style: italic;
}
.project-summary-row .tg-status {
    text-align: center;
}