/* ==========================================================================
   Planning views — shared (pl-*) + Gantt chart (gantt-*)
   Loaded on every page: all selectors are prefixed.
   ========================================================================== */

/* ---------- Shared planning page chrome ---------- */
body.planning-page .content { padding-bottom: 12px; }
.pl-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pl-header .page-actions { margin-left: auto; }
.pl-header-meta { white-space: nowrap; }
.pl-views { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; }
.pl-views > .dropdown { min-width: 0; }
.pl-views-title {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 8px 2px 2px; margin-left: -2px; border-radius: var(--radius);
  color: var(--text); cursor: pointer; font: inherit; min-width: 0;
}
.pl-views-title:hover { background: var(--bg-hover); }
.pl-views-title h1 { margin: 0; font-size: 1.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-views-title > .icon { color: var(--text-muted); }
.pl-star .icon { color: var(--warning); fill: var(--warning); }
.pl-views-menu { min-width: 260px; }
.pl-views-menu a .truncate { min-width: 0; }

.pl-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.pl-toolbar .btn.active, .pl-toolbar .btn-group > .btn.active { background: var(--bg-active); border-color: var(--primary); color: var(--primary); position: relative; z-index: 1; }
.pl-toolbar .btn.is-auto { box-shadow: inset 0 -2px 0 var(--primary); }
.pl-toolbar .counter { background: var(--primary); color: var(--primary-text); min-width: 18px; height: 18px; font-size: .72rem; }
.pl-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.pl-spacer { flex: 1 1 auto; }
.pl-toolbar .input-sm { min-height: 28px; }

/* Tooltip */
.pl-tooltip {
  position: fixed; z-index: 500; pointer-events: none; max-width: 340px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: .88rem; line-height: 1.4;
}
.pl-tip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.pl-tip-title { font-weight: 600; margin-bottom: 6px; word-break: break-word; }
.pl-tip-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; }
.pl-tip-list dt { color: var(--text-muted); }
.pl-tip-list dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pl-tip-list .progress { width: 70px; }
.pl-tip-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .82rem; }

/* Full screen */
.pl-fullscreen { position: fixed; inset: 0; z-index: 260; background: var(--bg); padding: 10px 16px; display: flex; flex-direction: column; overflow: auto; }
body.pl-has-fullscreen { overflow: hidden; }
.print-only { display: none; }

/* ---------- Gantt ---------- */
.gantt {
  --gantt-row: 34px; --gantt-head: 56px;
  position: relative; display: flex; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  overflow: hidden; min-height: 320px; height: 70vh; user-select: none; -webkit-user-select: none;
}
.pl-fullscreen .gantt { flex: 1 1 auto; height: auto !important; min-height: 0; }
.gantt-loading { margin: auto; }
.gantt-left { flex: 0 0 auto; min-width: 0; position: relative; border-right: 1px solid var(--border); background: var(--surface); }
.gantt.table-hidden .gantt-left { display: none; }
.gantt.table-hidden .gantt-splitter { display: none; }
.gantt-left-scroll { height: 100%; overflow: auto; scrollbar-width: thin; }
.gantt-left-scroll::-webkit-scrollbar { height: 10px; width: 0; }
.gantt-thead {
  position: sticky; top: 0; z-index: 3; display: grid; height: var(--gantt-head); background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.gantt-th {
  display: flex; align-items: flex-end; padding: 0 10px 8px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .35px;
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.gantt-tbody { position: relative; }
.gantt-tr { position: absolute; left: 0; right: 0; display: grid; height: var(--gantt-row); border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); align-items: center; }
.gantt-tr.is-odd, .gantt-row.is-odd { background: color-mix(in srgb, var(--bg-subtle) 55%, transparent); }
.gantt-tr.is-hover, .gantt-row.is-hover { background: var(--bg-hover); }
.gantt-tr.is-flash, .gantt-row.is-flash { animation: gantt-flash 1.2s ease; }
@keyframes gantt-flash { 0% { background: color-mix(in srgb, var(--success) 22%, transparent); } 100% { background: transparent; } }
.gantt-td { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; min-width: 0; }
.gantt-td a { color: var(--text); }
.gantt-td a:hover { color: var(--link); }
.gantt-col-id a { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gantt-col-start_date, .gantt-col-due_date, .gantt-col-duration, .gantt-col-estimated_hours, .gantt-col-remaining_hours { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.gantt-tr.is-closed-row .gantt-subject-link { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-faint) 70%, transparent); }
.gantt-subject { display: flex; align-items: center; gap: 4px; min-width: 0; }
.gantt-subject-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gantt-subject-link.is-parent { font-weight: 600; }
.gantt-toggle, .gantt-toggle-spacer { flex: 0 0 20px; width: 20px; height: 20px; }
.gantt-toggle { display: inline-grid; place-items: center; border: 0; background: none; padding: 0; color: var(--text-muted); border-radius: 4px; cursor: pointer; }
.gantt-toggle:hover { background: var(--bg-muted); color: var(--text); }
.gantt-toggle .icon { width: 14px; height: 14px; transition: transform .12s ease; }
.gantt-toggle.is-collapsed .icon { transform: rotate(-90deg); }
.gantt-ms-icon { width: 9px; height: 9px; background: var(--c); transform: rotate(45deg); flex: 0 0 9px; margin: 0 4px 0 1px; border-radius: 1px; }
.gantt-user { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.gantt-td .progress { width: 60px; }

.gantt-splitter {
  flex: 0 0 6px; margin-left: -3px; margin-right: -3px; z-index: 6; cursor: col-resize; position: relative; background: transparent;
}
.gantt-splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: transparent; transition: background .12s; }
.gantt-splitter:hover::after, .gantt.is-resizing .gantt-splitter::after, .gantt-splitter:focus-visible::after { background: var(--primary); }
.gantt.is-resizing { cursor: col-resize; }

.gantt-right { flex: 1 1 auto; min-width: 0; position: relative; }
.gantt-right-scroll { height: 100%; overflow: auto; position: relative; }
.gantt-header {
  position: sticky; top: 0; z-index: 4; height: var(--gantt-head); background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.gantt-hrow { position: relative; height: 28px; }
.gantt-hrow-top { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.gantt-hrow-bottom { height: 27px; }
.gantt-hcell {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; font-size: .8rem; color: var(--text-muted);
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); white-space: nowrap; overflow: hidden; overflow: clip;
}
.gantt-hcell > span { overflow: hidden; text-overflow: ellipsis; position: sticky; left: 6px; }
.gantt-hcell-top { font-weight: 600; color: var(--text); font-size: .84rem; }
.zoom-days .gantt-hcell { justify-content: center; padding: 0; flex-direction: column; line-height: 1; font-size: .78rem; }
.zoom-days .gantt-hcell > span { display: flex; flex-direction: column; align-items: center; gap: 1px; position: static; }
.gantt-wd { font-size: .64rem; text-transform: uppercase; color: var(--text-faint); }
.gantt-hcell.is-off { background: color-mix(in srgb, var(--text-faint) 11%, transparent); color: var(--text-faint); }
.gantt-hcell.is-today { color: var(--primary); font-weight: 700; }
.zoom-days .gantt-hcell.is-today > span { background: var(--primary); color: var(--primary-text); border-radius: 4px; padding: 1px 3px; }
.zoom-days .gantt-hcell.is-today .gantt-wd { color: inherit; }

.gantt-canvas { position: relative; min-height: 100%; }
.gantt-bg { position: absolute; inset: 0 auto auto 0; width: 100%; pointer-events: none; }
.gantt-off { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--text-faint) 11%, transparent); }
.gantt-off.is-holiday { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-faint) 18%, transparent) 0 4px, transparent 4px 8px); }
.gantt-grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
.gantt-grid-major { border-left-color: var(--border); }
.gantt-rows { position: absolute; inset: 0; }
.gantt-row { position: absolute; left: 0; right: 0; height: var(--gantt-row); border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.gantt-row.can-draw { cursor: crosshair; }
.gantt-row.can-draw.is-hover::after {
  content: attr(title); position: absolute; left: 8px; top: 8px; font-size: .78rem; color: var(--text-faint); pointer-events: none; position: sticky;
}
.gantt-today { position: absolute; top: 0; width: 0; border-left: 2px solid var(--danger); z-index: 2; pointer-events: none; opacity: .85; }
.gantt-today::before { content: ""; position: absolute; top: -1px; left: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* Bars */
.gantt-bar {
  position: absolute; top: 8px; height: 18px; border-radius: 4px; background: var(--c); color: var(--fg, #fff); display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18); text-decoration: none; overflow: visible; z-index: 2; transition: box-shadow .12s, filter .12s;
}
.gantt-bar:hover { text-decoration: none; filter: brightness(1.06); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent), 0 2px 6px rgba(0, 0, 0, .22); }
.gantt-bar.is-draggable { cursor: grab; touch-action: none; }
.gantt-bar.is-dragging { cursor: grabbing; opacity: .88; box-shadow: 0 0 0 2px var(--primary), 0 6px 14px rgba(0, 0, 0, .25); z-index: 5; transition: none; }
.gantt-bar.is-saving { opacity: .6; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px); background-size: 200% 100%; animation: gantt-saving 1s linear infinite; }
@keyframes gantt-saving { to { background-position: 34px 0; } }
.gantt-progress { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px 0 0 4px; background: rgba(0, 0, 0, .28); pointer-events: none; }
.gantt-bar.gantt-auto { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 3px, transparent 3px 7px); }
.gantt-bar.gantt-auto::before { content: ""; position: absolute; left: -1px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--c); transform: translate(-50%, -50%); }
.gantt-bar.is-closed { opacity: .45; filter: saturate(.45); }
.gantt-bar.gantt-open-start { border-top-left-radius: 0; border-bottom-left-radius: 0; background: linear-gradient(to right, transparent, var(--c) 85%); box-shadow: none; }
.gantt-bar.gantt-open-end { border-top-right-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(to left, transparent, var(--c) 85%); box-shadow: none; }

/* Parent (summary) bars: bracket style */
.gantt-bar.gantt-parent {
  top: 11px; height: 8px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--c) 92%, var(--text)); box-shadow: none;
}
.gantt-bar.gantt-parent::before, .gantt-bar.gantt-parent::after {
  content: ""; position: absolute; bottom: -6px; width: 0; height: 0; border-top: 6px solid color-mix(in srgb, var(--c) 92%, var(--text)); background: none;
  border-radius: 0; transform: none; top: auto;
}
.gantt-bar.gantt-parent::before { left: 0; border-right: 6px solid transparent; border-left: 0; }
.gantt-bar.gantt-parent::after { right: 0; border-left: 6px solid transparent; }
.gantt-bar.gantt-parent.is-draggable { cursor: grab; }

/* Milestones */
.gantt-bar.gantt-milestone { width: 0; height: 0; top: 17px; background: none; box-shadow: none; }
.gantt-diamond {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; background: var(--c); transform: rotate(45deg); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: box-shadow .12s;
}
.gantt-bar.gantt-milestone:hover .gantt-diamond { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }
.gantt-bar.gantt-milestone.is-dragging .gantt-diamond { box-shadow: 0 0 0 2px var(--primary); }

/* Resize handles */
.gantt-handle { position: absolute; top: -3px; bottom: -3px; width: 9px; cursor: ew-resize; z-index: 3; }
.gantt-handle-l { left: -4px; }
.gantt-handle-r { right: -4px; }
.gantt-handle::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 3px; width: 3px; border-radius: 2px; background: var(--fg, #fff); opacity: 0; transition: opacity .1s; }
.gantt-bar:hover .gantt-handle::after { opacity: .75; }
.gantt-bar.gantt-parent .gantt-handle { top: -6px; bottom: -8px; }
.gantt-bar.gantt-parent .gantt-handle::after { display: none; }

/* Labels */
.gantt-label {
  position: absolute; top: 0; height: var(--gantt-row); display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: .84rem;
  color: var(--text); pointer-events: none; z-index: 1;
}
.gantt-label-left { justify-content: flex-end; color: var(--text-muted); }
.gantt-label-far { color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.gantt-label .status-badge { height: 19px; font-size: .78rem; }
.gantt-row.is-closed-row .gantt-label { color: var(--text-faint); }

/* Relations */
.gantt-relations { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; overflow: visible; }
.gantt-rel { fill: none; stroke: color-mix(in srgb, var(--text-muted) 75%, transparent); stroke-width: 1.4; pointer-events: stroke; }
.gantt-rel:hover { stroke: var(--primary); stroke-width: 2.2; }
.gantt-rel.is-violated { stroke: var(--danger); stroke-dasharray: 4 3; }
.gantt-arrow-head { fill: color-mix(in srgb, var(--text-muted) 75%, transparent); }

.gantt-empty { position: sticky; left: 0; width: min(100%, 520px); padding-top: 40px; }
.gantt.is-dragging, .gantt.is-dragging * { cursor: grabbing !important; }

/* Labels menu */
.gantt-labels-menu { min-width: 280px; padding: 6px; }
.gantt-label-row { display: grid !important; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; padding: 4px 8px; }
.gantt-label-row.checkbox { display: flex !important; grid-template-columns: none; white-space: normal; }
.gantt-colcfg-list { border: 1px solid var(--border); border-radius: var(--radius); max-height: 50vh; overflow: auto; }
.gantt-colcfg-item { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-bottom: 1px solid var(--border); }
.gantt-colcfg-item:last-child { border-bottom: 0; }

/* Narrow screens */
@media (max-width: 900px) {
  .pl-views-title h1 { font-size: 1.2rem; }
  .pl-toolbar [data-gantt-zooms] .btn { padding: 0 7px; }
  .pl-header-meta { display: none; }
  .gantt { height: 65vh; }
}
@media (max-width: 560px) {
  .pl-toolbar .btn-sm .icon + span, .pl-toolbar [data-zoom="auto"] { font-size: 0; }
  [data-gantt-zooms] .btn { font-size: .78rem; }
}

/* Print */
@media print {
  body.planning-page .pl-toolbar, body.planning-page .pl-header, body.planning-page .wp-filters, body.planning-page .breadcrumbs { display: none !important; }
  .print-only { display: block; margin: 0 0 8px; font-weight: 600; font-size: 1.1rem; }
  .gantt { border: 1px solid #999; height: auto !important; overflow: hidden; display: flex; break-inside: auto; }
  .gantt-left { overflow: hidden; }
  /* Both panes keep their horizontal scroll position (what is on screen is printed) but grow vertically */
  .gantt-left-scroll, .gantt-right-scroll { overflow: hidden; height: auto; }
  .gantt-right { overflow: hidden; }
  .gantt-header, .gantt-thead { position: static; }
  .gantt-bar, .gantt-diamond, .gantt-off, .gantt-hcell.is-off, .gantt-tr.is-odd, .gantt-row.is-odd { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gantt-splitter, .gantt-handle { display: none; }
  .pl-fullscreen { position: static; }
}