/*
 * Active Projects — the active book of work.
 *
 * Everything structural comes from projects/index.css and shared.css. This file only adds
 * what this screen has that the All Projects grid does not: the header summary strip, the
 * schedule-health segmented filter, and the schedule column's badges.
 */

/* ---------- header summary ---------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.page-header-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--proj-muted);
}

.header-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-summary-item i {
    color: var(--proj-notstarted);
    font-size: 12px;
}

.header-summary-item strong {
    color: var(--proj-navy);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* The two figures that carry a warning meaning colour themselves when they are non-zero,
   set from the script rather than baked in — zero behind schedule is good news and must
   not render red. */
.header-summary-item strong.hours-over,
.header-summary-item strong.is-warning { color: var(--proj-over); }

/* ---------- schedule health filter ---------- */

.health-filter {
    display: inline-flex;
    border: 1px solid var(--proj-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.health-btn {
    border: none;
    background: transparent;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--proj-muted);
    cursor: pointer;
    border-left: 1px solid var(--proj-border);
    white-space: nowrap;
}

.health-btn:first-child { border-left: none; }

.health-btn:hover { background-color: #f1f5f9; }

.health-btn.active {
    background-color: var(--proj-navy);
    color: #fff;
}

/* ---------- schedule column ---------- */

.schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.schedule-badge i { font-size: 10px; }

.schedule-late {
    background-color: #fee2e2;
    color: #991b1b;
}

.schedule-soon {
    background-color: #fef3c7;
    color: #92400e;
}

.schedule-ontrack {
    background-color: #dcfce7;
    color: #166534;
}

/* An active project with no estimated completion date is a real gap, not a neutral state —
   it is the one badge that says something is missing rather than something is late. */
.schedule-none {
    background-color: #f1f5f9;
    color: #475569;
}