/* ============================================================================
   Fit-to-screen — applied ONLY in fullscreen (the ⛶ button). paintScreen adds
   .tvmain--fit to #screen only when (screen === 'board' && fullscreen).
   Everything flex-fills its share so the whole board fits with no page scroll;
   overflow rotates (auto-slide). Normal (non-fullscreen) view is untouched.

   Two things make the flex chain actually bound (not grow to content):
   • min-height: 0 on every flex item down the chain
   • flex row + height:100% on the columns so they clip to the allocated height.
   ========================================================================== */
.tvmain--fit { overflow: hidden !important; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 6px; }

/* Fullscreen board is a fixed 1920×1080 canvas scaled to fit (see applyFsScale in app.js).
   The letterbox around it uses the page background so it blends on any screen. */
html:fullscreen, html:fullscreen body { background: var(--bg); }
html:fullscreen body { overflow: hidden; }

/* top info band + task list. Fullscreen layout is more compact up top, so the
   task list gets the larger share. */
/* Top band sizes to its content (KPI + 4-row panels); the task list flex-fills the rest. */
.tvmain--fit > .board-topgrid { flex: 0 0 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.tvmain--fit > .board-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 0; padding-top: 6px; border-top: none; }

/* --- fullscreen rearrangement: KPI + 3 horizontal panels (left, 4 rows each) · events list (right) --- */
.tvmain--fit .board-topgrid--fs { grid-template-columns: 1fr 440px; align-items: stretch; }
.tvmain--fit .board-topgrid--fs .board-left { display: flex; flex-direction: column; gap: 10px; }
/* all three panels equal height (bottoms aligned) — stretch to the tallest, bodies stay 4 rows */
.tvmain--fit .fs-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; min-height: 0; }
.tvmain--fit .fs-panels > .panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tvmain--fit .fs-panels .slidebody { flex: 0 0 auto; min-height: 0; }   /* fitRows(4) sets the height → 4 rows, then rotates */
/* events list occupies the whole right column, stretched to the top-band height */
.tvmain--fit .fs-evcol { display: flex; flex-direction: column; }
.tvmain--fit .fs-evcol > .ev-panel { flex: 1 1 0; min-height: 0; }
.tvmain--fit .fs-evcol .ev-panel .panel__body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
/* Denser fullscreen — every section is tightened so more rows/data are visible. */
/* KPI strip */
.tvmain--fit .kpis { padding: 5px 9px; gap: 7px; }
.tvmain--fit .kpis__ic { width: 26px; height: 26px; }
.tvmain--fit .kpis__ic svg { width: 14px; height: 14px; }
.tvmain--fit .kpis__txt b { font-size: 16px; }
.tvmain--fit .kpis__txt span { font-size: 9.5px; }
/* Panel headers + info-panel rows (urgent / by-assignee / deadlines) */
.tvmain--fit .panel__head { padding: 7px 12px; }
.tvmain--fit .panel__title { font-size: 12.5px; }
.tvmain--fit .fs-panels .dl-item, .tvmain--fit .fs-panels .asg-row { padding-top: 4px; padding-bottom: 4px; }
.tvmain--fit .fs-panels .dl-title, .tvmain--fit .fs-panels .asg-name { font-size: 11.5px; }
.tvmain--fit .fs-panels .asg-name { min-width: 96px; }
.tvmain--fit .fs-panels .asg-bar { height: 13px; }
/* Calendar/holidays rows */
.tvmain--fit .fs-evcol .ev-row { padding-top: 5px; padding-bottom: 5px; }
/* Tighter overall gaps */
.tvmain--fit { gap: 6px; padding: 8px 16px 5px; }
.tvmain--fit .board-topgrid--fs .board-left { gap: 8px; }
.tvmain--fit .fs-panels { gap: 10px; }
.tvmain--fit > .tvfoot { flex: 0 0 auto; margin: 0; padding: 2px 0 0; font-size: 11px; }

/* --- top band fills --- */
.tvmain--fit .board-left, .tvmain--fit .board-right { min-height: 0; }
.tvmain--fit .kpi-strip { flex: 0 0 auto; }
.tvmain--fit .board-right > .panel { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tvmain--fit .board-right .panel__body.slidebody { flex: 1; height: auto; min-height: 0; }
.tvmain--fit .ev-panel { display: flex; flex-direction: column; }
.tvmain--fit .ev-panel .panel__body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; scrollbar-width: none; }
.tvmain--fit .ev-panel .panel__body::-webkit-scrollbar { width: 0; height: 0; }
.tvmain--fit .cal-grid2 { min-height: 100px; }

/* --- task band fills --- */
.tvmain--fit .board-section__head { flex: 0 0 auto; margin-bottom: 8px; }
.tvmain--fit .board-section > .board-top { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; gap: 16px; align-items: start; }
.tvmain--fit .board-section > .swimboard { flex: 1 1 0; min-height: 0; overflow: hidden; align-items: start; }
.tvmain--fit .board-top > .bcol { flex: 1 1 0; align-self: start; max-height: 100%; min-height: 0; overflow: hidden; }
.tvmain--fit .board-top > .bcol:last-child { flex: 2 1 0; }
/* left stack: New column (content height) + Upcoming Project (fills the rest) */
.tvmain--fit .board-top > .bcol-stack { flex: 1 1 0; align-self: stretch; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.tvmain--fit .bcol-stack > .bcol { flex: 0 0 auto; align-self: stretch; max-height: none; min-height: 0; overflow: hidden; }
/* New/Unassigned becomes 2 columns in fullscreen (2 rows each → 4 cards, then rotates) */
.tvmain--fit .bcol-stack .bcol__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.tvmain--fit .bcol-stack .bcol__track > * { min-width: 0; }
.tvmain--fit .bcol-stack > .upj-panel { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tvmain--fit .upj-panel .panel__body { flex: 1; min-height: 0; }
/* body height is set by fitRows(5) → each column shows 5 rows then rotates */
.tvmain--fit .board-top .bcol__body { flex: 0 0 auto; min-height: 0; }
.tvmain--fit .swimboard .pcol { align-self: start; max-height: 100%; min-height: 0; overflow: hidden; }
.tvmain--fit .swimboard .pcol__body { flex: 0 0 auto; min-height: 0; }

/* Fullscreen: compact task cards so 5 rows genuinely fit the column height.
   In-progress cards are the tallest (owner+status, title, tags, progress, dates,
   update note) — trim them hard: 1-line title, hide the update note. */
.tvmain--fit .tcard-tv { padding: 6px 9px; box-shadow: none; }
.tvmain--fit .tcard-tv__head { margin-bottom: 4px; }
.tvmain--fit .tcard-tv__title { font-size: 12.5px; line-height: 1.28; margin-bottom: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.tvmain--fit .tcard-tv__tags { margin-bottom: 4px; gap: 5px; }
.tvmain--fit .tvprog { margin: 3px 0; }
.tvmain--fit .tcard-tv__note { display: none; }   /* drop the latest-update line to fit 5 rows */
.tvmain--fit .tcard-tv__foot { margin-top: 4px; }
.tvmain--fit .board-top { gap: 12px; }
.tvmain--fit .bcol__body .slidetrack, .tvmain--fit .bcol__body .track--2col { gap: 6px; }
/* In-progress fills the task area down to the bottom: 3 columns of compact cards,
   packed into as many rows as fit the full column height (overflow rotates). */
.tvmain--fit .board-top > .bcol--wide { align-self: stretch; max-height: none; }
.tvmain--fit .board-top > .bcol--wide .bcol__body { flex: 1 1 0; height: auto; min-height: 0; overflow: hidden; }
.tvmain--fit .bcol--wide .track--2col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.tvmain--fit .bcol--wide .track--2col > * { min-width: 0; }
.tvmain--fit .tcard-tv .minidates { display: none; }
/* Fullscreen: hide the Completed section entirely (free the space for active work) */
.tvmain--fit .bcol--full { display: none !important; }

/* task-list toolbar stays tidy and never overlaps the panels above/below */
.tvmain--fit .board-section__head { flex: 0 0 auto; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.tvmain--fit .board-section__head .boardbar { flex-wrap: wrap; justify-content: flex-end; }
/* every region clips its own content so nothing spills into another box */
.tvmain--fit .kpis, .tvmain--fit .cal-panel, .tvmain--fit .ev-panel, .tvmain--fit .board-right > .panel { overflow: hidden; }
.tvmain--fit .board-left { overflow: hidden; }