/* TaskBoard — Kanban + Gantt styles.
   Served as a file rather than an inline <style> so a stricter style-src
   directive cannot silently strip the layout, as CSP did with the scripts. */

/* ---------- shared notices / filter bar ---------- */

.tb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
             padding: 0 0 12px; font-size: 12px; }
.tb-filter-label { color: #6b778c; margin-right: 4px; }
.tb-chip { display: inline-block; padding: 3px 10px; border-radius: 12px;
           background: #f4f5f7; color: #42526e; text-decoration: none; border: 1px solid transparent; }
.tb-chip:hover { background: #e4e6ea; color: #172b4d; text-decoration: none; }
.tb-chip-active { background: #0052cc; color: #fff; border-color: #0052cc; }
.tb-chip-active:hover { background: #0747a6; color: #fff; }

.tb-filter-note { background: #fffae6; border-left: 3px solid #ffab00; padding: 8px 12px;
                  border-radius: 3px; font-size: 12px; color: #5e4200; margin-bottom: 12px; }
.tb-completed-note { background: #f4f5f7; border-left: 3px solid #a5adba; padding: 8px 12px;
                     border-radius: 3px; font-size: 12px; color: #42526e; margin-bottom: 12px; }

/* ---------- Kanban ---------- */

.tb-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.tb-column { flex: 1 1 0; min-width: 220px; background: #f4f5f7; border-radius: 6px; padding: 8px; }
.tb-column-head { font-weight: 600; font-size: 13px; padding: 4px 6px 10px; color: #42526e; }
.tb-count { float: right; background: #dfe1e6; border-radius: 10px; padding: 0 8px; font-size: 11px; }
.tb-cards { min-height: 60px; }
.tb-card { background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(9,30,66,.25);
           padding: 10px; margin-bottom: 8px; cursor: grab; position: relative; }
.tb-card.tb-dragging { opacity: .4; }
.tb-cards.tb-over { background: #e4e6ea; border-radius: 4px; }
.tb-color { display: block; height: 4px; border-radius: 2px; margin-bottom: 6px; }
.tb-title { display: block; font-size: 13px; color: #172b4d; text-decoration: none; }
.tb-title:hover { text-decoration: underline; }
.tb-meta { margin-top: 6px; font-size: 11px; color: #6b778c; }
.tb-overdue { border-left: 3px solid #de350b; }
.tb-nodate { color: #a5adba; font-style: italic; }

/* ---------- Gantt ---------- */

.tb-rangebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tb-nav { display: flex; align-items: center; gap: 6px; }
.tb-window-label { font-size: 13px; font-weight: 600; color: #42526e; min-width: 130px; text-align: center; }

.tb-gantt-wrap { display: flex; gap: 12px; align-items: flex-start; }

.tb-rail { flex: 0 0 220px; background: #f4f5f7; border-radius: 6px; padding: 10px; }
.tb-rail-head { font-weight: 600; font-size: 13px; color: #42526e; margin-bottom: 6px; }
.tb-rail .tb-count { float: right; background: #ffab00; color: #fff; border-radius: 10px;
                     padding: 0 8px; font-size: 11px; }
.tb-rail-hint { font-size: 11px; color: #6b778c; margin-bottom: 10px; }
.tb-rail-empty { font-size: 12px; color: #6b778c; font-style: italic; }
.tb-rail-card { background: #fff; border-left: 3px solid #ffab00; border-radius: 3px;
                padding: 8px; margin-bottom: 6px; font-size: 12px; cursor: grab;
                box-shadow: 0 1px 2px rgba(9,30,66,.2); }
.tb-rail-dimmed { opacity: .3; }

.tb-chart-scroll { flex: 1 1 auto; overflow-x: auto; border: 1px solid #dfe1e6; border-radius: 6px; }
.tb-chart { position: relative; }
.tb-empty { padding: 24px; text-align: center; color: #6b778c; font-size: 13px; }

.tb-days { display: flex; border-bottom: 1px solid #dfe1e6; background: #fafbfc; }
.tb-day { flex: 0 0 auto; text-align: center; padding: 4px 0; font-size: 10px;
          border-right: 1px solid #f0f1f3; color: #6b778c; overflow: hidden; }
.tb-day.tb-weekend { background: #f4f5f7; }
.tb-day.tb-today { background: #deebff; font-weight: 700; color: #0052cc; }
.tb-dow { display: block; text-transform: uppercase; }
.tb-dom { display: block; font-size: 11px; }

.tb-rows { position: relative; }
.tb-arrows { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; }
.tb-todayline { position: absolute; top: 0; bottom: 0; width: 2px; background: #de350b;
                opacity: .5; z-index: 3; pointer-events: none; }
.tb-row { position: absolute; left: 0; right: 0; }
.tb-bar { position: absolute; top: 6px; height: 20px; border-radius: 3px; z-index: 2;
          display: flex; align-items: center; padding: 0 6px; overflow: hidden;
          cursor: grab; user-select: none; }
.tb-bar.tb-bar-dragging { opacity: .75; cursor: grabbing; z-index: 5; }
.tb-bar-overdue { box-shadow: 0 0 0 2px #de350b; }
.tb-bar-label { color: #fff; font-size: 11px; white-space: nowrap; text-overflow: ellipsis;
                overflow: hidden; pointer-events: none; }

/* Clipped edges: the bar continues beyond the visible window. */
.tb-clip-left { border-top-left-radius: 0; border-bottom-left-radius: 0;
                border-left: 3px dotted rgba(255,255,255,.9); }
.tb-clip-right { border-top-right-radius: 0; border-bottom-right-radius: 0;
                 border-right: 3px dotted rgba(255,255,255,.9); }

.tb-handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize;
             background: rgba(255,255,255,.35); }
.tb-handle-start { left: 0; border-radius: 3px 0 0 3px; }
.tb-handle-end { right: 0; border-radius: 0 3px 3px 0; }
.tb-bar:hover .tb-handle { background: rgba(255,255,255,.7); }

.tb-ghost { position: fixed; z-index: 999; background: #172b4d; color: #fff;
            font-size: 11px; padding: 4px 8px; border-radius: 3px; pointer-events: none; }

.tb-bar-dimmed { opacity: .18; }
.tb-bar-dimmed:hover { opacity: .45; }