/* ══════════════════════════════════════════════════════════════════════
   GANTT COMPACT VIEW — "zoom-out" density
   ----------------------------------------------------------------------
   The Gantt table + chart felt zoomed-in / oversized. This trims the
   typography and header heights so the whole grid reads smaller and more
   rows / more timeline fit on screen.

   IMPORTANT: density is driven mainly by the row-height values in the
   renderer (tabs/gantt/plugins/017-v9-gantt-refresh-js.js → `rh`). We do
   NOT use CSS `zoom`/`transform` on the chart, because the relationship
   arrows (#ga-svg) are a sibling layer drawn in unscaled coordinates and
   would drift out of alignment. Reducing sizes at the source keeps bars,
   arrows and the virtual layout perfectly consistent.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hide the color legend row (WBS / Activity / Critical / Milestone) ── */
#ganttOut .p6-legend { display: none !important; }

/* ── Use the empty space below the Gantt: grow the chart + trim bottom
      padding so the scroll area fills the card instead of leaving a gap.
      Offset reduced (legend removed → more room for the chart). ── */
#ganttOut #v9-gantt-outer { max-height: calc(100vh - 60px) !important; }
#ganttOut { padding-bottom: 0 !important; }
#tab-panels-root:has(#tp-gantt.active) { padding-bottom: 16px !important; }

/* ── Left table typography (smaller, tighter) ───────────────────────────
   Note: the v12/v17/v18 polish plugins set .p6-name-main size inline, so we
   do NOT override it here (that is tuned in 024/025/026). We only trim the
   pieces the plugins don't size aggressively. */
/* Tight vertical + right padding, but DON'T clobber the name cell's LEFT
   padding — the renderer sets `padding-left:<indent>px` inline on .p6-c-name
   for the WBS/activity hierarchy (L0=0, L1=18, L2=36 … activities +1 level).
   A blanket `padding:… !important` here was overriding that and flattening
   the tree, so we leave .p6-c-name's left padding to the inline indent. */
#ganttOut .p6-cell { padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 6px !important; }
#ganttOut .p6-cell:not(.p6-c-name) { padding-left: 6px !important; }
#ganttOut .p6-name-sub { font-size: 8px !important; }
#ganttOut .p6-c-date { font-size: 8.5px !important; }

/* Name sizes — override the 015 premium-tuning !important rules. These match
   015's exact selectors (equal specificity) and load later, so they win. */
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-name-main { font-size: 11px !important; }
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"] .p6-name-main { font-size: 10.6px !important; }
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="2"] .p6-name-main { font-size: 10.2px !important; }
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="3"] .p6-name-main,
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="4"] .p6-name-main,
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="5"] .p6-name-main,
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="6"] .p6-name-main { font-size: 9.8px !important; }
#ganttOut .p6-row[data-rowkind="activity"] .p6-name-main { font-size: 9.8px !important; }

/* ── Uniform activity/milestone text colour (NO red for critical) ───────
   Critical rows (.p6-act-row.crit) are forced red by 008/010/017/018 css
   (#7b1621 name, #d73743 id/dur/date) and milestones inherit it too. The
   user wants one consistent colour + weight in the TABLE regardless of
   criticality. We match those selectors' specificity, add !important and
   load later (145 > 018) so we win. The chart bars stay red — this only
   normalises the left-table typography. */
#ganttOut .p6-act-row .p6-name-main,
body[data-gantt-theme="light"] #ganttOut .p6-act-row.crit .p6-name-main {
  color: #1b2b3d !important;
  font-weight: 650 !important;
}
body[data-gantt-theme="light"] #ganttOut .p6-act-row .p6-c-id,
body[data-gantt-theme="light"] #ganttOut .p6-act-row .p6-c-dur,
body[data-gantt-theme="light"] #ganttOut .p6-act-row .p6-c-date,
body[data-gantt-theme="light"] #ganttOut .p6-act-row.crit .p6-c-id,
body[data-gantt-theme="light"] #ganttOut .p6-act-row.crit .p6-c-dur,
body[data-gantt-theme="light"] #ganttOut .p6-act-row.crit .p6-c-date {
  color: #5b6e83 !important;
  font-weight: 600 !important;
}

/* ── Tighten the two-line name/meta block so shorter rows actually apply ─ */
#ganttOut .p6-name-wrap { gap: 0 !important; line-height: 1.05 !important; }
#ganttOut .p6-name-main { line-height: 1.15 !important; }
#ganttOut .p6-name-sub { line-height: 1.05 !important; }

/* ── Chart bar labels ───────────────────────────────────────────────── */
#ganttOut .p6-bar-lbl { font-size: 8px !important; }
#ganttOut .p6-side-lbl { font-size: 9px !important; }

/* ── Slimmer activity bars + tighter timeline header to match shorter rows ─ */
#ganttOut .p6-act-bar { height: 9px !important; }
#ganttOut .p6-hdr-left,
#ganttOut .p6-hdr-right { height: 32px !important; }

/* ── Header: split the height EQUALLY between the year strip and the month
   strip. By default .p6-year-row is a fixed 22px and .p6-mo-row takes the
   leftover (≈8px), which looks lopsided. Make both flex 1 → 50% each. */
#ganttOut .p6-hdr-right .p6-year-row,
#ganttOut .p6-hdr-right .p6-mo-row {
  height: 50% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

/* ── Shorter rows ("zoom-out" density) ──────────────────────────────────
   Row heights are NOT set by the renderer's `rh`; the post-render polish
   plugins (024/025/026) overwrite them with inline `el.style.height`
   (WBS lvl0≈26, activity≈23). Those inline styles carry NO !important, so
   we win here with !important — same pattern as the font rules above. The
   relationship arrows (030) measure each row's real rect height, so they
   follow these sizes automatically and stay aligned.
   We must pin .p6-row AND its .p6-left / .p6-right children (the plugins
   set height + min-height on all three). */
#ganttOut .p6-row[data-rowkind="activity"],
#ganttOut .p6-row[data-rowkind="activity"] .p6-left,
#ganttOut .p6-row[data-rowkind="activity"] .p6-right {
  height: 20px !important; min-height: 20px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"],
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-left,
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-right {
  height: 26px !important; min-height: 26px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"],
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"] .p6-left,
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"] .p6-right {
  height: 24px !important; min-height: 24px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="2"],
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="2"] .p6-left,
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="2"] .p6-right {
  height: 22px !important; min-height: 22px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="3"],
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="3"] .p6-left,
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="3"] .p6-right {
  height: 21px !important; min-height: 21px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"]:not([data-rowlevel="0"]):not([data-rowlevel="1"]):not([data-rowlevel="2"]):not([data-rowlevel="3"]),
#ganttOut .p6-row[data-rowkind="wbs"]:not([data-rowlevel="0"]):not([data-rowlevel="1"]):not([data-rowlevel="2"]):not([data-rowlevel="3"]) .p6-left,
#ganttOut .p6-row[data-rowkind="wbs"]:not([data-rowlevel="0"]):not([data-rowlevel="1"]):not([data-rowlevel="2"]):not([data-rowlevel="3"]) .p6-right {
  height: 20px !important; min-height: 20px !important;
}

/* Professional WBS hierarchy: summary bars taper with the row level too. */
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-sum-bar {
  height: 5px !important;
  border-radius: 3px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"] .p6-sum-bar {
  height: 4px !important;
  border-radius: 3px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="2"] .p6-sum-bar {
  height: 3px !important;
  border-radius: 2px !important;
}
#ganttOut .p6-row[data-rowkind="wbs"]:not([data-rowlevel="0"]):not([data-rowlevel="1"]):not([data-rowlevel="2"]) .p6-sum-bar {
  height: 2px !important;
  border-radius: 2px !important;
}