/* Project "Tree" (WBS) tab — two horizontal cards (canvas + loose tasks). */

.tree-tab {
    width: 100%;
    /* Fill the tab panel so the two cards can own independent inner scroll
       instead of growing the whole page. Offset ≈ page padding + card header
       + tabs + panel padding (re-tuned after the toolbar removal). */
    height: calc(100vh - 185px);
    min-height: 420px;
    display: flex;
}

.tree-empty,
.tree-grid-empty,
.tree-loose-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.tree-cards {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.tree-card {
    /* Standard card surface: white body; the gray band lives on the header. */
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tree-canvas-card { flex: 1 1 0; min-width: 0; }
.tree-loose-card { flex: 0 0 280px; }

.tree-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--card-pad);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.tree-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.tree-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.btn.btn-sm:disabled { opacity: 0.45; cursor: default; }
.btn.btn-primary.btn-sm {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.tree-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Column template, shared by head + rows.
   FLUID tracks (like the task board's percentage grid) so every column shrinks
   continuously as the panel narrows — not just at hard breakpoints. Each
   metadata column is `minmax(floor, fr)`: it gives up width down to its floor
   before the breakpoints drop it entirely. The inner widgets (DateInput,
   SingleSelect) already have `min-width:0`, so they shrink with their cell. */
.tree-grid-head,
.tree-row {
    display: grid;
    grid-template-columns:
        14px                       /* Status (thin color bar) — fixed */
        minmax(38px, 56px)         /* WBS */
        minmax(140px, 2.4fr)       /* Task — takes the slack */
        minmax(84px, 1fr)          /* Priority */
        minmax(92px, 1.2fr)        /* Start */
        minmax(92px, 1.2fr)        /* Finish */
        minmax(56px, 0.7fr)        /* Duration */
        minmax(72px, 1fr)          /* Scope */
        minmax(72px, 1fr)          /* Milestone */
        30px;                      /* actions — fixed */
    align-items: center;
    gap: 4px;
}

/* Coarse step on top of the fluid shrink: once a column hits its floor and the
   panel is still too tight, drop the lowest-priority column entirely and
   re-flow. Priority of removal: Milestone → Scope → Duration. */
.tree-grid.narrow-1 .tcol-ms { display: none; }
.tree-grid.narrow-1 .tree-grid-head,
.tree-grid.narrow-1 .tree-row {
    grid-template-columns:
        14px minmax(38px, 56px) minmax(130px, 2.4fr)
        minmax(84px, 1fr) minmax(92px, 1.2fr) minmax(92px, 1.2fr)
        minmax(56px, 0.7fr) minmax(72px, 1fr) 30px;
}
.tree-grid.narrow-2 .tcol-scope { display: none; }
.tree-grid.narrow-2 .tree-grid-head,
.tree-grid.narrow-2 .tree-row {
    grid-template-columns:
        14px minmax(36px, 52px) minmax(120px, 2.4fr)
        minmax(80px, 1fr) minmax(88px, 1.2fr) minmax(88px, 1.2fr)
        minmax(54px, 0.7fr) 30px;
}
.tree-grid.narrow-3 .tcol-dur { display: none; }
.tree-grid.narrow-3 .tree-grid-head,
.tree-grid.narrow-3 .tree-row {
    grid-template-columns:
        14px minmax(34px, 48px) minmax(110px, 2.4fr)
        minmax(76px, 1fr) minmax(84px, 1.2fr) minmax(84px, 1.2fr) 28px;
}

.tree-grid-head {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Header is the strong band; body sits on a slightly lifted surface below
       so the area reads as a table distinct from the card header above. */
    background: var(--bg-tertiary, color-mix(in srgb, var(--text-primary) 6%, var(--bg-secondary)));
    border-bottom: 2px solid var(--border);
    padding: 8px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

/* Table surface: a hair lighter/darker than the card so rows look tabular. */
.tree-grid-body {
    flex: 1 1 auto;
    min-height: 40px;
    background: var(--bg-primary);
}

.tree-row {
    padding: 4px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: grab;
    background: var(--bg-primary);
}
/* Zebra striping for a clear tabular rhythm. */
.tree-row:nth-child(even) {
    background: color-mix(in srgb, var(--text-primary) 3.5%, var(--bg-primary));
}
.tree-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tree-row.selected { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.tree-row.tree-row-parent { background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary)); }
.tree-row.tree-row-parent .tcol-task .tree-name-input { font-weight: 600; }

/* Subtle vertical separators between cells so columns read as a grid. */
.tree-grid-head .tcol:not(:last-child),
.tree-row .tcol:not(:last-child) {
    border-right: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
/* The status bar is its own visual marker — no separator beside it. */
.tree-grid-head .tcol-status,
.tree-row .tcol-status { border-right: none; }

/* ── Drop feedback while dragging over a row (3 zones) ────────────────────
   "before" → thick line on the TOP edge (insert as sibling above).
   "after"  → thick line on the BOTTOM edge (insert as sibling below).
   "nest"   → the whole row highlighted + left bar (drop becomes child). */
.tree-row.drop-before {
    box-shadow: inset 0 3px 0 0 var(--accent);
}
.tree-row.drop-after {
    box-shadow: inset 0 -3px 0 0 var(--accent);
}
.tree-row.drop-nest {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: inset 4px 0 0 0 var(--accent);
}
/* Hovering a 🔒/🚧 badge highlights the rows connected by a dependency. */
.tree-row.dep-connected {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    box-shadow: inset 3px 0 0 0 #f59e0b;
}

/* Floating preview tooltip following the cursor during a drag. */
.tree-drag-tooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.tree-drag-tooltip-verb { opacity: 0.85; }
.tree-drag-tooltip-wbs { font-weight: 700; font-variant-numeric: tabular-nums; }

.tcol {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tcol-wbs {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.tcol-task { display: flex; align-items: center; gap: 4px; }

/* ── Status: thin color bar that opens a status picker popover ───────────── */
.tcol-status {
    overflow: visible;          /* let the bar fill the cell height */
    padding: 0;
    display: flex;
    align-items: stretch;
}
.tree-status-bar {
    display: block;
    width: 5px;
    align-self: stretch;
    min-height: 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: width 0.1s ease, filter 0.1s ease;
}
.tree-status-bar:hover { width: 8px; filter: brightness(1.1); }

.popover-panel.tree-status-popover {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    min-width: 160px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tree-status-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.tree-status-option:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tree-status-option.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.tree-status-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tree-status-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Scope / Milestone inline pickers (click the cell text → popover) ─────── */
.tree-pick-trigger {
    display: block;
    width: 100%;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent;
}
.tree-pick-trigger:hover {
    border-color: var(--border);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.popover-panel.tree-pick-popover {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tree-pick-option {
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-pick-option:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tree-pick-option.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }

.tree-twisty {
    cursor: pointer;
    width: 14px;
    flex-shrink: 0;
    color: var(--text-secondary);
    user-select: none;
    font-size: 20px;
}

.tree-name-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 3px 6px;
    border-radius: 4px;
}
.tree-name-input:hover { border-color: var(--border); }
.tree-name-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-primary);
}

.tree-row-badges { display: inline-flex; gap: 2px; flex-shrink: 0; }

/* The Tooltip component wraps the name in a .tooltip-trigger div — it must
   take over the name's flex slot so the ellipsis keeps working. */
.tcol-task .tooltip-trigger {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.tcol-task .tooltip-trigger .tree-name-text { display: block; }

.tree-loose-item .tooltip-trigger {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.tree-loose-item .tooltip-trigger .tree-loose-name { display: block; }

/* WBS date popovers: panel chrome comes from .date-cal itself. */
.popover-panel.tree-date-popover {
    padding: 0;
}

/* Title is now display text (click opens the task modal), like the board. */
.tree-name-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.tree-name-text:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    text-decoration: underline;
}
.tree-row-parent .tcol-task .tree-name-text { font-weight: 600; }

/* Compact, click-to-edit cells (date / duration). */
.tree-date-text {
    display: block;
    width: 100%;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent;
}
.tree-date-text:hover { border-color: var(--border); color: var(--text-primary); }

/* Priority: colored dot + label; the label collapses out when narrow. */
.tree-prio-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
}
.tree-prio-trigger:hover { border-color: var(--border); }
.tree-prio-dot { flex-shrink: 0; font-size: 0.7rem; line-height: 1; }
.tree-prio-label {
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-prio-label.hide { display: none; }

.tree-dur-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 3px 6px;
    border-radius: 4px;
    text-align: center;
}
.tree-dur-input:hover { border-color: var(--border); }
.tree-dur-input:focus { outline: none; border-color: var(--accent); background: var(--bg-primary); }

/* ── Compact DateInput inside tree cells ──────────────────────────────────
   The shared DateInput (text field + 36px calendar button) overflows a narrow
   table column and clips the date. Scope a tighter layout to date cells only,
   so the modal/board versions stay untouched. */
.tcol-date { padding-right: 2px; }
.tcol-date .date-input-wrapper { gap: 2px; width: 100%; }
.tcol-date .date-input-text {
    padding: 3px 4px;
    font-size: 0.8rem;
    border-radius: 4px;
}
.tcol-date .date-input-cal-btn {
    width: 22px;
    font-size: 0.8rem;
    border-radius: 4px;
}
/* Rolled-up parent dates already fit; keep them snug too. */
.tcol-date .tree-rollup { padding: 0 2px; }
.tcol-dur .tree-dur-input { padding: 3px 2px; }

/* Rolled-up parent dates / duration are read-only and visually subdued. */
.tree-rollup {
    color: var(--text-secondary);
    font-style: italic;
    padding: 0 6px;
}
.tree-readonly { color: var(--text-secondary); font-size: 0.8rem; padding: 0 4px; }

.tcol-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }
/* Row actions menu (⋯): detach from tree / delete task. */
.tree-row-menu {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 4px;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.1s;
}
/* Reveal row actions on hover/selection to keep the grid clean. */
.tree-row:hover .tree-row-menu,
.tree-row.selected .tree-row-menu { opacity: 1; }
.tree-row-menu:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 10%, transparent); }

/* Destructive option inside the row menu. */
.tree-pick-option.tree-pick-danger { color: #c0392b; }
.tree-pick-option.tree-pick-danger:hover { background: color-mix(in srgb, #c0392b 12%, transparent); }

/* Ghost row at the bottom of the canvas: click to add a root task inline. */
.tree-ghost-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    margin: 2px 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    border: 1px dashed transparent;
    border-radius: 6px;
}
.tree-ghost-row:hover {
    border-color: var(--border);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
/* Active drop target: dropping a dragged node here promotes it to a root. */
.tree-ghost-row.drop-root {
    border-color: var(--accent);
    border-style: solid;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.tree-ghost-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid currentColor;
    font-weight: 600;
    line-height: 1;
}

/* The inline single-select trigger should sit flush in the cell. */
.tcol-prio .multiselect-trigger { width: 100%; font-size: 0.8rem; padding: 3px 6px; }

/* ── Loose tasks card ───────────────────────────────────────────────────── */

.tree-loose-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--border);
}
.tree-loose-search,
.tree-loose-scope-select {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.tree-loose-search:focus,
.tree-loose-scope-select:focus { outline: none; border-color: var(--accent); }

.tree-loose-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

.tree-loose-group { margin-bottom: 12px; }
.tree-loose-scope {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin: 4px 4px 6px;
}

.tree-loose-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: grab;
}
.tree-loose-item:hover { border-color: var(--accent); }
.tree-loose-item:active { cursor: grabbing; }
/* Thin status color bar at the left of a loose item (matches the tree column). */
.tree-loose-status {
    flex: 0 0 auto;
    width: 4px;
    align-self: stretch;
    min-height: 16px;
    border-radius: 3px;
}
.tree-loose-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}