/* Project management workspace: tasks, milestones, projects. Bootstrap does the heavy lifting. */

.pm {
    --pm-surface: #fff;
    --pm-muted: #6c757d;
    --pm-border: rgba(0, 0, 0, .08);
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.pm-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.pm-header h1 { font-size: 1.75rem; margin: 0; line-height: 1.2; }
.pm-header .pm-subtitle { color: var(--pm-muted); margin: .25rem 0 0; }
.pm-breadcrumb { font-size: .875rem; margin-bottom: .25rem; }
.pm-breadcrumb .breadcrumb { margin: 0; }

.pm-tabs { border-bottom: 1px solid var(--pm-border); margin-bottom: 1.25rem; overflow-x: auto; flex-wrap: nowrap; }
.pm-tabs .nav-link { white-space: nowrap; }

.pm-card { background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: .5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.pm-card + .pm-card { margin-top: 1rem; }
.pm-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--pm-border); }
.pm-card-header h2, .pm-card-header h3 { font-size: 1.05rem; margin: 0; }
.pm-card-body { padding: 1rem; }

.pm-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--pm-border); background: rgba(0, 0, 0, .015); }
.pm-toolbar .form-control, .pm-toolbar .form-select { width: auto; min-width: 10rem; }
.pm-toolbar .pm-search { flex: 1 1 14rem; }

.pm-table { margin: 0; }
.pm-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pm-muted); font-weight: 600; white-space: nowrap; }
.pm-table td { vertical-align: middle; }
.pm-table .pm-col-check { width: 2.25rem; }
.pm-table .pm-col-status { width: 11rem; }
.pm-row[data-state="closed"] .pm-title { text-decoration: line-through; color: var(--pm-muted); }
.pm-row.pm-flash { animation: pm-flash 1.2s ease-out; }
@keyframes pm-flash { from { background: rgba(255, 193, 7, .35); } to { background: transparent; } }

.pm-title { font-weight: 600; text-decoration: none; color: inherit; }
.pm-title:hover { text-decoration: underline; }
.pm-meta { font-size: .8rem; color: var(--pm-muted); }
.pm-meta a { color: inherit; }

.pm-status-select { font-size: .8rem; padding-top: .15rem; padding-bottom: .15rem; min-width: 9.5rem; }
.pm-status-select.is-busy { opacity: .6; pointer-events: none; }

.pm-badge-due.is-overdue { color: #fff !important; background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; }
.pm-priority { font-variant-numeric: tabular-nums; }
.pm-progress { height: .4rem; min-width: 5rem; }

.pm-quick-add { display: flex; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--pm-border); }
.pm-quick-add .form-control { flex: 1; }

.pm-bulkbar { position: sticky; bottom: 0; z-index: 5; display: none; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem 1rem; background: #212529; color: #fff; border-radius: 0 0 .5rem .5rem; }
.pm-bulkbar.is-visible { display: flex; }
.pm-bulkbar .form-select { width: auto; }

.pm-empty { text-align: center; color: var(--pm-muted); padding: 2.5rem 1rem; }
.pm-empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; }

.pm-stat { display: flex; flex-direction: column; }
.pm-stat strong { font-size: 1.4rem; line-height: 1.1; }
.pm-stat span { font-size: .75rem; color: var(--pm-muted); text-transform: uppercase; letter-spacing: .03em; }

.pm-form .pm-form-section { padding: 1rem; border-bottom: 1px solid var(--pm-border); }
.pm-form .pm-form-section:last-child { border-bottom: 0; }
.pm-form .pm-form-section > h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pm-muted); margin-bottom: .75rem; }
.pm-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: 1rem; background: rgba(0, 0, 0, .02); border-top: 1px solid var(--pm-border); border-radius: 0 0 .5rem .5rem; }

.pm-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }

.pm-milestone + .pm-milestone { border-top: 1px solid var(--pm-border); }

@media (max-width: 767.98px) {
    .pm-hide-sm { display: none !important; }
    .pm-table .pm-col-status { width: auto; }
    .pm-status-select { min-width: 7.5rem; }
    .pm-toolbar .form-control, .pm-toolbar .form-select { min-width: 0; flex: 1 1 100%; }
}

/* Sortable columns (Stimulus "table-sort"): header buttons with a direction arrow. */
.pm-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; border-radius: .25rem; }
.pm-sort:hover { color: var(--pm-text, #212529); }
.pm-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pm-sort::after { content: "\2195"; opacity: .35; font-size: .85em; }
.pm-sort[data-sort-dir="asc"]::after { content: "\2191"; opacity: 1; }
.pm-sort[data-sort-dir="desc"]::after { content: "\2193"; opacity: 1; }
.pm-sort[data-sort-dir] { color: var(--pm-text, #212529); }
.pm-sortbar { display: flex; flex-wrap: wrap; gap: .75rem; margin-left: auto; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pm-muted); font-weight: 600; }
.pm-card:not(:has([data-table-sort-target="body"])) .pm-sortbar { display: none; }

/* Metrics (templates/project_management/metrics.html.twig). Series colours are validated
   for CVD and contrast on this light surface; text never wears a series colour. */
.pm-viz {
    --viz-surface: #fcfcfb;
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-grid: #e7e5e0;
    --viz-text: #52514e;
    --viz-ink: #0b0b0b;
}
.pm-viz__kpis { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; }
.pm-viz__note { margin: 0; padding: .5rem 1rem .75rem; font-size: .78rem; color: var(--pm-muted); }
.pm-viz__grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }
.pm-viz__card { display: flex; flex-direction: column; padding-bottom: .5rem; background: var(--viz-surface); }
.pm-viz__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1rem .25rem; }
.pm-viz__head--padded { padding-bottom: .5rem; }
.pm-viz__head h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--viz-ink); }
.pm-viz__legend { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--viz-text); }
.pm-viz__legend li { display: flex; align-items: center; gap: .4rem; }
.pm-viz__swatch { width: 10px; height: 10px; border-radius: 2px; }
.pm-viz__swatch--1 { background: var(--viz-1); }
.pm-viz__swatch--2 { background: var(--viz-2); }
.pm-viz__svg { display: block; width: 100%; height: auto; padding: 0 .75rem; overflow: visible; }
.pm-viz__grid { stroke: var(--viz-grid); stroke-width: 1; }
.pm-viz__axis { stroke: #c9c6bf; stroke-width: 1; }
.pm-viz__tick { fill: var(--viz-text); font-size: 11px; }
.pm-viz__value { fill: var(--viz-ink); font-size: 11px; font-weight: 600; }
.pm-viz__mark--1 { fill: var(--viz-1); }
.pm-viz__mark--2 { fill: var(--viz-2); }
.pm-viz__hit { fill: transparent; cursor: default; outline: none; }
.pm-viz__hit.is-active, .pm-viz__hit:focus-visible { fill: rgba(11, 11, 11, .04); }
.pm-viz__table { padding: 0 1rem; font-size: .82rem; }
.pm-viz__table summary { color: var(--pm-muted); cursor: pointer; }
.pm-viz__table table { margin-top: .5rem; }
.pm-viz__empty { padding: 0 1rem; color: var(--pm-muted); font-size: .9rem; }
.pm-viz__ranked { margin: .5rem 0 0; padding: 0 1rem; list-style: none; display: grid; gap: .45rem; }
.pm-viz__ranked li { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; align-items: center; gap: .75rem; font-size: .85rem; color: var(--viz-text); outline: none; border-radius: 4px; }
.pm-viz__ranked li.is-active, .pm-viz__ranked li:focus-visible { background: rgba(11, 11, 11, .04); }
.pm-viz__ranked-track { display: block; height: 14px; }
.pm-viz__ranked-bar { display: block; height: 100%; min-width: 2px; background: var(--viz-1); border-radius: 0 4px 4px 0; }
.pm-viz__ranked-value { color: var(--viz-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pm-viz__projects td, .pm-viz__projects th { font-variant-numeric: tabular-nums; }
.pm-viz__projects th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pm-muted); font-weight: 600; }
.pm-viz__tooltip { position: fixed; z-index: 1090; min-width: 9rem; padding: .5rem .65rem; border-radius: 6px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); border: 1px solid #e7e5e0; font-size: .8rem; pointer-events: none; }
.pm-viz__tooltip-title { color: var(--viz-text); margin-bottom: .25rem; }
.pm-viz__tooltip-row { display: flex; align-items: center; gap: .45rem; color: var(--viz-text); }
.pm-viz__tooltip-row strong { color: var(--viz-ink); font-variant-numeric: tabular-nums; }
.pm-viz__tooltip-key { width: 12px; height: 2px; border-radius: 1px; }
.pm-viz__tooltip-key--1 { background: var(--viz-1); }
.pm-viz__tooltip-key--2 { background: var(--viz-2); }
@media (max-width: 575px) { .pm-viz__grid-2 { grid-template-columns: 1fr; } }
.pm-viz__grid-2 > .pm-card { margin: 0; }