/*
 * Project plan (Gantt), KPI report timeline and trend chart - views/tbproject/_gantt.php, _kpi_timeline.php.
 * Uses the tokens of .viz-root (viz-dashboard.css). Status colours are the fixed status palette
 * (good / critical) and are always paired with a symbol and a label, never used alone.
 */
.viz-root {
    --status-good: #0ca30c;
    --status-critical: #d03b3b;
}

/* ---- Gantt ---- */
.pt-gantt {
    font-size: .85rem;
    --pt-cols: minmax(150px, 26%) 1fr 150px;
}

.pt-gantt-row {
    display: grid;
    grid-template-columns: var(--pt-cols);
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
    border-top: 1px solid var(--grid);
}

.pt-gantt-head {
    border-top: 0;
    border-bottom: 1px solid var(--axis);
    color: var(--text-secondary);
    font-size: .78rem;
}

.pt-gantt-label {
    display: flex;
    gap: .4rem;
    line-height: 1.35;
    min-width: 0;
}

.pt-gantt-label .pt-no {
    flex: 0 0 1.6rem;
    color: var(--text-muted);
    text-align: right;
}

.pt-gantt-label a {
    color: var(--text-primary);
    text-decoration: none;
}

.pt-gantt-label a:hover {
    text-decoration: underline;
}

.pt-gantt-track {
    position: relative;
    height: 24px;
}

.pt-gantt-head .pt-gantt-track {
    height: 18px;
}

.pt-gantt-month {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--grid);
}

.pt-gantt-head .pt-gantt-month {
    border-left-color: var(--axis);
    padding-left: 3px;
    white-space: nowrap;
    overflow: visible;
}

.pt-gantt-bar {
    position: absolute;
    top: 4px;
    height: 16px;
    border-radius: 4px;
    background: var(--tint);
    box-shadow: inset 0 0 0 1px var(--c);
    overflow: hidden;
}

.pt-gantt-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--c);
}

.pt-gantt-today {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--text-primary);
    z-index: 2;
}

.pt-gantt-head .pt-gantt-today {
    top: 0;
    bottom: 0;
}

.pt-gantt-today-label {
    position: absolute;
    top: -1px;
    transform: translateX(-50%);
    padding: 0 4px;
    border-radius: 3px;
    background: var(--text-primary);
    color: var(--surface-1);
    font-size: .7rem;
    line-height: 1.3;
    white-space: nowrap;
    z-index: 3;
}

.pt-gantt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    align-items: center;
}

.pt-status {
    font-weight: 600;
    color: var(--c);
    white-space: nowrap;
}

.st-done { --c: var(--status-good); --tint: rgba(12, 163, 12, .20); }
.st-progress { --c: var(--series-1); --tint: rgba(42, 120, 214, .20); }
.st-late { --c: var(--status-critical); --tint: rgba(208, 59, 59, .20); }
.st-pending { --c: var(--text-muted); --tint: rgba(137, 135, 129, .22); }

.pt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    margin: .25rem 0 .75rem;
    font-size: .78rem;
    color: var(--text-secondary);
}

.pt-legend .pt-swatch {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: .3rem;
    border-radius: 2px;
    background: var(--c);
}

@media (max-width: 767.98px) {
    .pt-gantt-row {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .pt-gantt-head .pt-gantt-label,
    .pt-gantt-head .pt-gantt-meta {
        display: none;
    }
}

/* ---- KPI timeline ---- */
.pt-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: none;
}

.pt-timeline::before {
    content: "";
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: .3rem;
    width: 2px;
    background: var(--grid);
}

.pt-timeline li {
    position: relative;
    padding: 0 0 .85rem .9rem;
}

.pt-timeline li::before {
    content: "";
    position: absolute;
    top: .3rem;
    left: -.95rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c, var(--series-1));
    box-shadow: 0 0 0 2px var(--surface-1);
}

.pt-tl-up { --c: var(--series-1); }
.pt-tl-down { --c: var(--status-critical); }
.pt-tl-same { --c: var(--text-muted); }
.pt-tl-done { --c: var(--status-good); }

.pt-tl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .6rem;
}

.pt-tl-head time {
    color: var(--text-secondary);
    font-size: .8rem;
}

.pt-tl-value {
    font-weight: 600;
    font-size: 1rem;
}

.pt-tl-delta {
    font-size: .8rem;
    color: var(--c);
    white-space: nowrap;
}

.pt-tl-note {
    margin-top: .1rem;
    color: var(--text-muted);
    font-size: .8rem;
}

/* ---- trend chart (inline SVG) ---- */
.pt-trend {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
}

.pt-trend text {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 11px;
    fill: var(--text-secondary);
}

.pt-trend .tr-grid { stroke: var(--grid); stroke-width: 1; }
.pt-trend .tr-axis { stroke: var(--axis); stroke-width: 1; }
.pt-trend .tr-target { stroke: var(--text-secondary); stroke-width: 1.5; }
.pt-trend .tr-deadline { stroke: var(--status-critical); stroke-width: 1; opacity: .7; }
.pt-trend .tr-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pt-trend .tr-proj { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .7; }
.pt-trend .tr-dot { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
.pt-trend .tr-dot-last { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
.pt-trend .tr-dot-goal { fill: var(--surface-1); stroke: var(--series-1); stroke-width: 2; }
.pt-trend .tr-hit { fill: transparent; }
.pt-trend .tr-hit:hover + .tr-dot,
.pt-trend .tr-hit:hover ~ .tr-dot { stroke: var(--text-secondary); }
.pt-trend .tr-value { font-weight: 600; fill: var(--text-primary); }
.pt-trend .tr-muted { fill: var(--text-muted); }
.pt-trend .tr-critical { fill: var(--status-critical); }

.pt-insights {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
}

.pt-insights li {
    padding: .3rem 0;
    border-top: 1px solid var(--grid);
}

.pt-insights li:first-child {
    border-top: 0;
}

.pt-insights .pt-k {
    display: block;
    color: var(--text-muted);
    font-size: .75rem;
}

.pt-issue {
    color: var(--text-secondary);
}

.pt-issue::before {
    content: "⚠ ";
    color: var(--status-critical);
}

/* ---- spread of KPI statuses (views/lutkeyresult/_progress.php) ---- */
.pt-spread {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
}

.pt-spread li {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto) 1fr 5.5rem;
    align-items: center;
    gap: .6rem;
}

.pt-spread .badge {
    justify-self: start;
    white-space: normal;
    text-align: left;
}

.pt-spread .pt-track {
    height: .5rem;
    overflow: hidden;
    border-radius: 4px;
    background: var(--grid);
}

.pt-spread .pt-track > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--series-1);
}

.pt-spread .pt-count {
    text-align: right;
    white-space: nowrap;
}

/* ---- tracking2 adaptation: project summary tiles/panels (views/tbproject/view.php) ---- */
/* Bootstrap utility classes are not loaded in tracking2 (pv2 design system) — a couple of small helpers used
   only on this ported page, kept local to it rather than added to the shared pv2/staff stylesheets. */
.viz-root .mb-4 { margin-bottom: 1.5rem; }
.tbp-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
}
.tbp-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}
.tbp-panels.tbp-panels-wide {
    grid-template-columns: 2fr 1fr;
}
@media (max-width: 767.98px) {
    .tbp-tiles { grid-template-columns: repeat(2, 1fr); }
    .tbp-panels, .tbp-panels.tbp-panels-wide { grid-template-columns: 1fr; }
}