/* Projects module. Every selector is prefixed prj- so nothing leaks into other pages. Colours use the theme variables
   from app.css, so light and dark both work; print forces the light palette. */
:root { --prj-amber: #F2A000; --prj-amber-bg: #FFF1D6; --prj-weekend: rgba(94, 94, 89, .07); --prj-phase-row: rgba(94, 94, 89, .06); }
@media (prefers-color-scheme: dark) { :root { --prj-amber: #F2C467; --prj-amber-bg: #3A3020; --prj-weekend: rgba(255, 255, 255, .04); --prj-phase-row: rgba(255, 255, 255, .04); } }

.prj-nowrap { white-space: nowrap; }
.prj-grow { flex: 1 1 160px; min-width: 0; }
.prj-block { display: block; }
.prj-gap { margin-top: 1rem; }
.prj-inline { display: inline; margin: 0; }
.prj-narrow { width: 9rem; }
.prj-check-pad { margin-top: 1.6rem; }
.prj-neg { color: var(--bad); font-weight: 600; }
.prj-pos { color: var(--ok); }
.prj-health-on_track { color: var(--ok); } .prj-health-at_risk { color: var(--warn); }
.prj-health-over_budget, .prj-health-late { color: var(--bad); } .prj-health-closed { color: var(--muted); }
.prj-stats .stat strong { font-size: 1.45rem; }
.prj-stats .stat span { overflow-wrap: anywhere; }
.prj-reasons { margin: 0; padding-left: 1.1rem; font-size: .87rem; }
.prj-head h1 .ref { font-size: 1rem; margin-right: .25rem; }

/* progress meter (width via class, no inline styles) */
.prj-meter { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); vertical-align: middle; overflow: hidden; }
.prj-meter-fill { display: block; height: 100%; background: var(--brand); }
.prj-w-0 { width: 0% } .prj-w-5 { width: 5% } .prj-w-10 { width: 10% } .prj-w-15 { width: 15% } .prj-w-20 { width: 20% } .prj-w-25 { width: 25% } .prj-w-30 { width: 30% } .prj-w-35 { width: 35% } .prj-w-40 { width: 40% } .prj-w-45 { width: 45% } .prj-w-50 { width: 50% } .prj-w-55 { width: 55% } .prj-w-60 { width: 60% } .prj-w-65 { width: 65% } .prj-w-70 { width: 70% } .prj-w-75 { width: 75% } .prj-w-80 { width: 80% } .prj-w-85 { width: 85% } .prj-w-90 { width: 90% } .prj-w-95 { width: 95% } .prj-w-100 { width: 100% }

/* list: health edge */
.prj-list td:first-child { border-left: 4px solid transparent; }
.prj-list tr.prj-h-on_track td:first-child { border-left-color: var(--ok); }
.prj-list tr.prj-h-at_risk td:first-child { border-left-color: var(--prj-amber); }
.prj-list tr.prj-h-over_budget td:first-child, .prj-list tr.prj-h-late td:first-child { border-left-color: var(--brand); }

/* tasks page */
.prj-phase-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-bottom: .75rem; }
.prj-phase-head h2 { margin: 0; }
.prj-phase-head .prj-move { margin-left: auto; }
.prj-move { display: inline-flex; gap: .25rem; }
.prj-move form { margin: 0; }
.prj-icon-btn { padding: .25rem .6rem; font-size: 1rem; line-height: 1; }
.prj-handle { cursor: grab; color: var(--muted); user-select: none; letter-spacing: -2px; font-weight: 700; padding: 0 .2rem; }
.prj-col-handle { width: 1.6rem; padding-right: 0 !important; }
.prj-dragging { opacity: .45; }
.prj-saving { cursor: progress; }
.prj-tasks tr.prj-overdue td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.prj-tasks tr.prj-done td { color: var(--muted); }
.prj-tasks select { width: auto; padding: .25rem .4rem; font-size: .82rem; }
.prj-st-blocked { border-color: var(--bad); color: var(--bad); }
.prj-st-done { border-color: var(--ok); color: var(--ok); }
.prj-st-in_progress { border-color: var(--blue); color: var(--blue); }
.prj-diamond { display: inline-block; width: 9px; height: 9px; background: var(--ink); transform: rotate(45deg); margin: 0 .45rem 1px .1rem; vertical-align: middle; }
.prj-diamond.big { width: 13px; height: 13px; margin-right: .6rem; }
.table tr.prj-sub td { font-size: .84rem; color: var(--muted); padding-top: .35rem; padding-bottom: .35rem; }
.table tr.prj-sub td:first-child { padding-left: 1.8rem; }
.table tr.prj-total td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--line); }
.prj-timesheet th small { display: block; font-weight: 400; }
.prj-timesheet .prj-we { background: var(--prj-weekend); }
.prj-timesheet th.prj-today { color: var(--brand-strong); box-shadow: inset 0 -3px 0 var(--brand); }

/* segmented links (zoom / paper) */
.prj-seg { margin-bottom: 0; }
.prj-seg a { padding: .4rem .85rem; font-size: .85rem; color: var(--ink); text-decoration: none; border-right: 1px solid var(--line); }
.prj-seg a:last-child { border-right: 0; }
.prj-seg a.active { background: var(--ink); color: var(--paper); font-weight: 600; }
.prj-toolbar { align-items: center; }

/* legend */
.prj-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .82rem; color: var(--muted); margin: .4rem 0; }
.prj-legend .sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-left: .5rem; border: 1px solid var(--muted); }
.prj-legend .sw:first-child { margin-left: 0; }
.prj-legend .sw.st-todo { background: var(--surface-2); }
.prj-legend .sw.st-in_progress { background: var(--blue); border-color: var(--blue); }
.prj-legend .sw.st-blocked { background: var(--bad); border-color: var(--bad); }
.prj-legend .sw.st-done { background: var(--ok); border-color: var(--ok); }
.prj-legend .sw.late { background: transparent; border: 2px solid var(--brand); }
.prj-legend .sw.dep { height: 0; border: 0; border-top: 2px solid var(--muted); border-radius: 0; }
.prj-legend .sw.today { width: 0; height: 12px; border: 0; border-left: 2px solid var(--brand); border-radius: 0; }
.prj-legend .sw.actual { height: 0; border: 0; border-top: 3px solid var(--brand-strong); border-radius: 0; }
.prj-legend .sw.planned { height: 0; border: 0; border-top: 3px solid var(--blue); border-radius: 0; }
.prj-legend .sw.budget, .prj-legend .sw.ideal { height: 0; border: 0; border-top: 2px dashed var(--muted); border-radius: 0; }
.prj-legend .sw.h-on_track { background: var(--ok); border-color: var(--ok); }
.prj-legend .sw.h-at_risk { background: var(--prj-amber); border-color: var(--prj-amber); }
.prj-legend .sw.h-over_budget { background: var(--bad); border-color: var(--bad); }
.prj-legend .sw.h-closed { background: var(--muted); }
.prj-legend .prj-diamond { margin-left: .6rem; }

/* ---------- Gantt (inline SVG) ---------- */
.prj-gantt-wrap { overflow-x: auto; padding: 0; }
.prj-gantt { display: block; font-family: var(--font); font-size: 12px; }
.prj-gantt text { fill: var(--ink); }
.prj-g-bg { fill: var(--surface); }
.prj-g-row { fill: transparent; }
.prj-g-row.odd { fill: var(--prj-weekend); }
.prj-g-row.is-phase { fill: var(--prj-phase-row); }
.prj-g-weekend { fill: var(--prj-weekend); }
.prj-g-line { stroke: var(--line); stroke-width: 1; }
.prj-g-headbg { fill: var(--surface-2); }
.prj-g-sep { stroke: var(--line); stroke-width: 1; }
.prj-gantt .prj-g-month { font-weight: 600; font-size: 12px; }
.prj-gantt .prj-g-day, .prj-gantt .prj-g-wk { font-size: 10px; fill: var(--muted); }
.prj-gantt .prj-g-day { text-anchor: middle; }
.prj-gantt .prj-g-day.we { fill: var(--line); }
.prj-gantt .prj-g-col { font-size: 11px; font-weight: 600; fill: var(--muted); }
.prj-gantt .prj-g-label { font-size: 12px; }
.prj-gantt .prj-g-label.phase, .prj-gantt .prj-g-label.project { font-weight: 700; }
.prj-gantt .prj-g-label.milestone { font-style: italic; }
.prj-gantt .prj-g-sub { fill: var(--muted); font-weight: 400; font-size: 11px; }
.prj-gantt a:hover .prj-g-label { fill: var(--brand-strong); text-decoration: underline; }
.prj-gantt .prj-g-val { font-size: 10.5px; fill: var(--muted); }
/* task bars: light base, solid progress fill */
.prj-g-bar .base { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1; }
.prj-g-bar .fill { fill: var(--muted); }
.prj-g-bar.st-in_progress .base { fill: var(--blue-bg); stroke: var(--blue); } .prj-g-bar.st-in_progress .fill { fill: var(--blue); }
.prj-g-bar.st-blocked .base { fill: var(--bad-bg); stroke: var(--bad); } .prj-g-bar.st-blocked .fill { fill: var(--bad); }
.prj-g-bar.st-done .base { fill: var(--ok-bg); stroke: var(--ok); } .prj-g-bar.st-done .fill { fill: var(--ok); }
.prj-g-bar.late .base { stroke: var(--brand); stroke-width: 2; }
/* portfolio bars by health */
.prj-g-bar.h-on_track .base { fill: var(--ok-bg); stroke: var(--ok); } .prj-g-bar.h-on_track .fill { fill: var(--ok); }
.prj-g-bar.h-at_risk .base { fill: var(--prj-amber-bg); stroke: var(--prj-amber); } .prj-g-bar.h-at_risk .fill { fill: var(--prj-amber); }
.prj-g-bar.h-over_budget .base, .prj-g-bar.h-late .base { fill: var(--bad-bg); stroke: var(--bad); } .prj-g-bar.h-over_budget .fill, .prj-g-bar.h-late .fill { fill: var(--bad); }
.prj-g-bar.h-closed .base { fill: var(--surface-2); stroke: var(--muted); } .prj-g-bar.h-closed .fill { fill: var(--muted); }
/* phase summary bars */
.prj-g-phase .base { fill: var(--line); }
.prj-g-phase .fill, .prj-g-phase .cap { fill: var(--ink); }
.prj-g-phase.ph-completed .fill, .prj-g-phase.ph-completed .cap { fill: var(--ok); }
/* milestones */
.prj-g-ms path { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.prj-g-ms.st-done path { fill: var(--ok); }
.prj-g-ms.late path { fill: var(--brand); }
.prj-g-ms.st-blocked path { fill: var(--bad); }
/* dependencies & today */
.prj-g-dep { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.prj-g-dep.bad { stroke: var(--bad); stroke-dasharray: 4 3; }
.prj-g-arrowhead { fill: var(--muted); }
.prj-g-arrowhead.bad { fill: var(--bad); }
.prj-g-today line { stroke: var(--brand); stroke-width: 2; }
.prj-g-today rect { fill: var(--brand); }
.prj-gantt .prj-g-today text { fill: #fff; font-size: 9px; font-weight: 700; text-anchor: middle; }

/* ---------- burn charts ---------- */
.prj-charts { gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1250px) { .prj-charts { grid-template-columns: minmax(0, 1fr); } }
.prj-figure { margin: 0; min-width: 0; }
.prj-figure figcaption { font-weight: 600; font-size: .87rem; margin-bottom: .3rem; }
.prj-chart-wrap { overflow-x: auto; }
.prj-chart { display: block; width: 100%; height: auto; max-width: 640px; font-family: var(--font); }
.prj-chart text { fill: var(--muted); font-size: 11px; }
.prj-c-grid { stroke: var(--line); stroke-width: 1; }
.prj-c-axis { stroke: var(--muted); stroke-width: 1; }
.prj-chart .prj-c-tick, .prj-chart .prj-c-unit { text-anchor: end; }
.prj-chart .prj-c-xt { text-anchor: middle; }
.prj-chart .prj-c-end { fill: var(--ink); font-weight: 600; }
.prj-chart .prj-c-note { fill: var(--muted); font-style: italic; }
.prj-c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.prj-c-line.actual { stroke: var(--brand-strong); }
.prj-c-line.planned { stroke: var(--blue); }
.prj-c-line.budget, .prj-c-line.ideal { stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 1.5; }
.prj-c-pt circle { stroke: var(--surface); stroke-width: 2; }
.prj-c-pt.actual circle { fill: var(--brand-strong); }
.prj-c-pt.planned circle { fill: var(--blue); }
.prj-c-pt circle.hit { fill: transparent; stroke: none; }
.prj-c-pt:hover circle:not(.hit) { stroke: var(--ink); }

/* ---------- report / print header ---------- */
.prj-print-head { display: none; align-items: center; gap: 1.2rem; border-bottom: 3px solid var(--brand); padding-bottom: .8rem; margin-bottom: 1rem; }
.prj-print-head.on-screen { display: flex; }
.prj-print-head img { width: 56px; height: 56px; }
.prj-print-title { flex: 1; min-width: 0; }
.prj-print-title h1 { margin: 0; font-size: 1.4rem; }
.prj-print-title p { margin: .15rem 0 0; color: var(--muted); }
.prj-print-meta { display: grid; grid-template-columns: auto auto; gap: .1rem .8rem; margin: 0; font-size: .82rem; }
.prj-print-meta dt { color: var(--muted); } .prj-print-meta dd { margin: 0; }
.prj-report-bar { margin-bottom: 1rem; }
.prj-report section { margin-bottom: 1.25rem; }
.prj-report h2 { border-bottom: 1px solid var(--line); padding-bottom: .25rem; }
.prj-print-table { background: var(--surface); border: 1px solid var(--line); }
.prj-print-table tr.prj-group th { background: var(--surface); color: var(--ink); font-size: .85rem; padding-top: .8rem; }
.prj-print-foot { display: none; }

@media (max-width: 860px) {
  .prj-phase-head .prj-move { margin-left: 0; }
  .prj-print-head.on-screen { flex-wrap: wrap; }
  .prj-print-meta { grid-template-columns: auto 1fr; }
  .prj-legend { font-size: .78rem; }
}

/* ---------- print (only pages that contain .prj-printable) ---------- */
/* Named pages so only project printouts are landscape (other modules keep their own @page). */
@page prj-a4 { size: A4 landscape; margin: 10mm; }
@page prj-a3 { size: A3 landscape; margin: 10mm; }
@media print {
  :root:has(.prj-printable) {
    --ink: #1B201F; --paper: #fff; --surface: #fff; --surface-2: #F4F4F1; --line: #CFCFC8; --muted: #55554F;
    --ok: #2F7D3B; --ok-bg: #E5F2E6; --warn: #8A5A00; --warn-bg: #FFF1D6; --bad: #B3261E; --bad-bg: #FCE4E2;
    --blue: #1F5FA8; --blue-bg: #E3EDF9; --purple: #6A3FA0; --purple-bg: #EEE7F7; --brand-strong: #CC3400;
    --prj-amber: #C98500; --prj-amber-bg: #FFF1D6; --prj-weekend: rgba(94, 94, 89, .08); --prj-phase-row: rgba(94, 94, 89, .07);
    color-scheme: light;
  }
  body:has(.prj-printable) { background: #fff !important; color: #1B201F; font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:has(.prj-printable) .sidebar, body:has(.prj-printable) .topbar, body:has(.prj-printable) .flash, body:has(.prj-printable) .skip { display: none !important; }
  body.has-shell:has(.prj-printable) { display: block; }
  body:has(.prj-printable) main { padding: 0; max-width: none; }
  .prj-printable .prj-noprint, .prj-printable .filters, .prj-printable .head-actions, .prj-printable .btn, .prj-printable form, .prj-printable .view-tabs { display: none !important; }
  .prj-printable .prj-print-head { display: flex; }
  .prj-printable { page: prj-a4; }
  .prj-printable.prj-paper-a3 { page: prj-a3; }
  .prj-printable .card { border: 0; padding: 0; background: transparent; }
  .prj-printable .prj-gantt-wrap { overflow: visible; border: 0; }
  .prj-printable .prj-gantt { width: 100% !important; height: auto !important; max-height: 170mm; }
  .prj-printable .prj-chart { max-width: 140mm; }
  .prj-printable .stat-row { break-inside: avoid; }
  .prj-printable .stat-row.prj-stats { grid-template-columns: repeat(6, 1fr); }
  .prj-printable .table-wrap { overflow: visible; border: 0; }
  .prj-printable table { font-size: 8.5pt; }
  .prj-printable thead { display: table-header-group; }
  .prj-printable tfoot { display: table-footer-group; }
  .prj-printable tr, .prj-printable td, .prj-printable th { break-inside: avoid; page-break-inside: avoid; }
  .prj-printable .table th, .prj-printable .table td { padding: .3rem .5rem; }
  .prj-printable .prj-r-gantt, .prj-printable .prj-r-chart { break-inside: avoid; }
  .prj-printable .prj-r-tasks { break-before: page; }
  .prj-printable h2 { break-after: avoid; }
  .prj-printable a { color: inherit; text-decoration: none; }
  .prj-printable .prj-print-foot { display: block; margin-top: 1rem; }
}

.table td:has(> .prj-meter) { white-space: nowrap; }

.prj-split > * { min-width: 0; }
.prj-phase .table-wrap { position: relative; }
.prj-split .filters select { max-width: 100%; min-width: 0; flex: 1 1 200px; }