/* Table view. Every row is a CSS grid sharing --cols, so columns line up across groups. */
pm-table-view { display: block; min-width: max-content; padding: 4px 20px 80px; }
.tbl { --cols: var(--name-col-w) 1fr; }
.t-row { display: grid; grid-template-columns: var(--cols); align-items: stretch; min-height: var(--row-h); }
.t-cell { display: flex; align-items: center; min-width: 0; padding: 0 3px; border-left: 1px solid var(--surface); }
.t-cell:first-child { border-left: 0; }

/* group */
.group { margin-bottom: 22px; --g: #0ea5a4; }
.group.sortable-ghost { opacity: .45; }
.g-head { margin-bottom: 4px; background: var(--row-bg); border-radius: var(--radius); box-shadow: inset 4px 0 0 var(--g); }
.g-head .t-cell { padding: 0 8px; font-weight: 600; font-size: 13px; color: var(--text-2); justify-content: center; position: relative; }
.g-head .c0 { justify-content: flex-start; gap: 6px; color: var(--text); padding-left: 12px; }
.g-head .g-name { font-size: 14px; font-weight: 700; border: 0; background: transparent; padding: 3px 6px; border-radius: 6px; color: var(--text); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-head .g-name:hover { background: var(--surface-3); }
input.g-name { background: var(--surface); box-shadow: var(--focus-ring); }
.g-count { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); font-size: 12px; font-weight: 500; white-space: nowrap; }
.g-chev { transition: transform .12s; }
.g-chev.closed { transform: rotate(-90deg); }
.g-toggle { width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--g); color: #fff; display: grid; place-items: center; flex: none; }
.g-grip { cursor: grab; color: var(--text-3); opacity: 0; }
.g-head:hover .g-grip { opacity: 1; }
.col-head { gap: 4px; }
.col-head .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-head .i { color: var(--text-3); }
.col-head .col-menu { opacity: 0; position: absolute; right: 2px; }
.col-head:hover .col-menu { opacity: 1; }
.col-head.type-timeline .nm, .col-head.type-date .nm { text-align: center; }
.col-resize { position: absolute; right: -3px; top: 6px; bottom: 6px; width: 6px; cursor: col-resize; z-index: 3; }
.col-resize:hover, .col-resize.on { background: var(--accent); border-radius: 3px; opacity: .6; }
.add-col { justify-content: center; }
.add-col .icon-btn { width: 32px; height: 32px; background: var(--surface-3); }

/* item rows */
.items { min-height: 4px; }
.item-block { margin-bottom: 4px; }
.item-block.sortable-ghost { opacity: .4; }
.i-row { background: var(--row-bg); border-radius: var(--radius); box-shadow: inset 4px 0 0 var(--g); position: relative; }
.i-row:hover { background: var(--row-hover); }
.i-row.selected { background: var(--row-selected); }
.i-row.tinted { background: color-mix(in srgb, var(--tint) 17%, var(--row-bg)); }
.i-row.tinted:hover { background: color-mix(in srgb, var(--tint) 24%, var(--row-bg)); }
.i-row .c0 { gap: 4px; padding-left: 10px; position: sticky; left: 0; z-index: 2; background: inherit; border-radius: var(--radius) 0 0 var(--radius); }
.i-row .c0 .grip { cursor: grab; color: var(--text-3); opacity: 0; width: 18px; height: 26px; display: grid; place-items: center; flex: none; border-radius: 4px; }
.i-row:hover .c0 .grip { opacity: 1; }
.i-row .c0 .nm { flex: 1; min-width: 0; padding: 4px 6px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.i-row .c0 .nm:hover { background: var(--surface-3); }
.i-row .c0 .nm.untitled { color: var(--text-3); font-style: italic; }
.i-row .c0 input.nm { background: var(--surface); box-shadow: var(--focus-ring); border: 0; width: 100%; }
.i-row .c0 .acts { display: flex; opacity: 0; }
.i-row:hover .c0 .acts, .i-row.selected .c0 .acts { opacity: 1; }
.exp { width: 20px; height: 20px; border: 0; background: transparent; border-radius: 4px; display: grid; place-items: center; color: var(--text-2); flex: none; }
.exp:hover { background: var(--surface-3); }
.exp.closed svg { transform: rotate(-90deg); }
.exp-spacer { width: 20px; flex: none; }
.sub-count { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); font-size: 12px; padding: 0 4px; }
.subs { margin-top: 3px; }
.i-row.sub { min-height: 34px; background: color-mix(in srgb, var(--row-bg) 65%, var(--surface)); }
.i-row.sub .c0 { padding-left: 32px; }
.i-row.sub:hover { background: var(--row-hover); }
.i-row.sub .c0::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 50%; width: 8px; border-left: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); border-bottom-left-radius: 6px; opacity: .6; }

/* cells */
.cell { display: flex; align-items: center; width: 100%; height: 100%; min-height: 32px; border-radius: 6px; padding: 0 6px; cursor: pointer; overflow: hidden; gap: 4px; }
.cell:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.cell.center { justify-content: center; }
.cell.status, .cell.dropdown-single { padding: 0; }
.cell .pill.fill { width: 100%; height: 30px; justify-content: center; border-radius: 6px; }
.cell .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .ph { color: var(--text-3); opacity: 0; }
.cell:hover .ph { opacity: 1; }
.cell.rich .rich { max-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cell.rich .rich * { display: inline; margin: 0; }
.cell .chips { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.cell a { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell a:hover { text-decoration: underline; }
.cell input.edit { width: 100%; height: 30px; border: 0; border-radius: 6px; padding: 0 8px; background: var(--surface); box-shadow: var(--focus-ring); outline: none; }
.cell .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.cell.num-cell { justify-content: flex-end; }
.range-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--surface-3); font-size: 12.5px; font-weight: 600; }
.range-pill.overdue { background: var(--danger-soft); color: var(--danger); }
.range-pill.done { opacity: .6; }

/* add item row */
.add-row { background: var(--row-bg); border-radius: var(--radius); box-shadow: inset 4px 0 0 var(--g); opacity: .85; }
.add-row:hover { opacity: 1; }
.add-row .c0 { position: sticky; left: 0; z-index: 2; background: inherit; border-radius: var(--radius) 0 0 var(--radius); padding-left: 10px; }
.add-row .c0 button.add-btn { display: flex; align-items: center; gap: 8px; height: 100%; width: 100%; border: 0; background: transparent; color: var(--text-2); text-align: left; padding: 0 4px; }
.add-row .c0 button.add-btn:hover { color: var(--text); }
.add-row.sub { min-height: 30px; }
.add-row.sub .c0 { padding-left: 32px; }
.add-row input { width: 100%; height: 30px; margin: 0 4px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--surface); box-shadow: var(--focus-ring); outline: none; }

/* summary */
.sum-row { margin-top: 4px; }
.sum-row .t-cell { justify-content: center; padding: 0 8px; }
.sum-bar { display: flex; width: 100%; height: 22px; border-radius: 5px; overflow: hidden; background: var(--surface-3); }
.sum-bar > i { display: block; height: 100%; }
.sum-lbl { display: grid; text-align: center; line-height: 1.1; font-size: 13px; font-weight: 600; }
.sum-lbl small { font-size: 11px; font-weight: 500; color: var(--text-3); }
.sum-dash { color: var(--text-3); }

.new-group { margin: 4px 0 40px; }
.drag-fallback { opacity: .9; }
.no-results { padding: 40px; text-align: center; color: var(--text-3); }

/* sticky first column for group headers too */
.g-head .c0 { position: sticky; left: 0; z-index: 2; background: var(--row-bg); border-radius: var(--radius) 0 0 var(--radius); }
.sub-block { margin-top: 3px; }
.sum-row .t-cell:first-child { position: sticky; left: 0; background: var(--bg); z-index: 2; }

/* the sticky name cell paints over the row's inset color bar, so draw the bar on the cell itself */
.i-row, .add-row, .g-head { box-shadow: none; }
.i-row .c0, .add-row .c0, .g-head .c0 { box-shadow: inset 4px 0 0 var(--g); }