/* ==========================================================================
   Time Entry — Native-style grid (project x day) + selected-cell detail bar.
   Sticky header/footer per .claude/rules/sticky-table-headers.md: sticky on the
   thead/tfoot ELEMENT (not th/td), border-collapse: separate, and zero vertical
   padding on the scroll container so rows never bleed past the pinned edges.
   ========================================================================== */

.grid-card{background:#fff;border:1px solid var(--gray-200);display:flex;flex-direction:column}
.grid-head{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--gray-200);background:var(--gray-50)}
.grid-head h2{font-size:13px;font-weight:700;color:var(--gray-800)}
.grid-head .gh-sub{font-size:11px;color:var(--gray-500);font-variant-numeric:tabular-nums}
.grid-empty{padding:28px 14px;text-align:center;font-size:12px;color:var(--gray-500)}
.grid-empty.hidden{display:none}

.tsgrid-scroll{overflow:auto;max-height:calc(100vh - 340px);min-height:160px;padding:0}
.tsgrid{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;font-size:12px}
.tsgrid thead{position:sticky;top:0;z-index:3}
.tsgrid tfoot{position:sticky;bottom:0;z-index:3}
.tsgrid th,.tsgrid td{border-bottom:1px solid var(--gray-200);background:#fff;padding:0}
.tsgrid thead th{background:var(--gray-100);color:var(--gray-600);font-size:9px;font-weight:700;
    letter-spacing:.4px;text-transform:uppercase;padding:7px 8px;text-align:center;white-space:normal;vertical-align:bottom}
.tsgrid thead th:first-child{text-align:left;min-width:220px}
.tsgrid th.num,.tsgrid td.num{text-align:right;font-variant-numeric:tabular-nums}
.tsgrid .daycol{width:52px}
.tsgrid .daycol.wknd{background:var(--gray-50)}
.tsgrid .daycol.today{background:var(--primary-light)}
.tsgrid .hd-dow{font-size:8px;color:var(--gray-500)}
.tsgrid .hd-num{font-size:12px;color:var(--gray-800);font-weight:700}

.tsgrid .rowhead{padding:6px 10px;text-align:left;vertical-align:top}
.tsgrid .rowhead .cell-clamp{width:fit-content;max-width:210px;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.tsgrid .rowhead .lg-proj{font-size:12px;font-weight:600;color:var(--gray-800)}
.tsgrid .rowhead .lg-sub{font-size:9.5px;color:var(--gray-500);margin-top:1px}
.tsgrid .rowhead .lg-holi{display:inline-block;margin-left:5px;font-size:8.5px;font-weight:700;letter-spacing:.3px;
    text-transform:uppercase;color:var(--warning-dark);background:var(--warning-light);padding:1px 5px;vertical-align:middle}
.tsgrid .rowdel{background:transparent;border:0;color:var(--gray-400);cursor:pointer;font-size:11px;padding:1px 4px;margin-left:4px}
.tsgrid .rowdel:hover{color:var(--danger)}

.tsgrid .hcell{position:relative;text-align:center;padding:2px;vertical-align:middle}
.tsgrid .hcell.wknd{background:var(--gray-50)}
.tsgrid .hcell.today{background:var(--primary-bg)}
.tsgrid .hcell input{width:100%;text-align:center;border:1px solid transparent;background:transparent;
    font:inherit;font-variant-numeric:tabular-nums;padding:5px 2px;color:var(--gray-900)}
.tsgrid .hcell input:focus{outline:none;border-color:var(--primary);background:#fff}
.tsgrid .hcell input[readonly]{color:var(--gray-400);cursor:default}
.tsgrid .ot-mark{position:absolute;top:1px;right:2px;font-size:8px;font-weight:700;color:var(--warning-dark)}
.tsgrid .cmt-dot{position:absolute;bottom:0;right:2px;background:transparent;border:0;cursor:pointer;
    font-size:8px;color:var(--primary);padding:1px;line-height:1}
.tsgrid .cmt-dot.none{color:var(--gray-300)}
.tsgrid td.rowtot{padding:6px 10px;font-weight:700;color:var(--gray-800)}

.tsgrid tfoot td{padding:6px 10px;font-weight:700;color:var(--gray-700);background:var(--gray-50)}
.tsgrid tfoot td.miss{color:var(--gray-300)}
.tsgrid tfoot td.grand{color:var(--primary-dark)}

/* Selected-cell detail bar, below the grid */
.cellbar{border-top:1px solid var(--gray-200);padding:10px 14px;display:flex;align-items:center;gap:12px;background:var(--gray-50)}
.cellbar.idle{color:var(--gray-400)}
.cellbar .cb-main{flex:1;min-width:0}
.cellbar .cb-ctx{font-size:11px;color:var(--gray-600)}
.cellbar .cb-ctx b{color:var(--gray-800)}
.cellbar .cb-cmt{font-size:12px;color:var(--gray-800);margin-top:2px}
.cellbar .cb-cmt.none{color:var(--gray-400);font-style:italic}
.cellbar .cb-act{flex:0 0 auto}

@media (max-width:680px){
    .tsgrid-scroll{max-height:none}
}