/* css/08-tasks-kanban.css — Task creation, kanban, critical path, activity feed, quick update. Load order matters: files are cut from one stylesheet, in cascade order. */
/* ─── PHASE A: TASK CREATION SYSTEM ─── */
.tmpl-chooser { padding:4px 0; }
.tmpl-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
@media(max-width:500px) { .tmpl-options { grid-template-columns:1fr; } }
.tmpl-option {
  border:1.5px solid var(--border-mid); border-radius:10px; padding:18px 16px;
  cursor:pointer; text-align:center; transition:all .15s;
}
.tmpl-option:hover { border-color:var(--red); background:var(--red-light); }
.tmpl-option-icon  { font-size:28px; margin-bottom:10px; }
.tmpl-option-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; }
.tmpl-option-desc  { font-size:12px; color:var(--text-muted); line-height:1.5; }

.template-card {
  border:1px solid var(--border); border-radius:8px; padding:12px 14px;
  cursor:pointer; transition:all .15s;
}
.template-card:hover { border-color:var(--red); background:var(--red-light); }
.template-name { font-size:13px; font-weight:500; }
.template-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
.tmpl-section-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin:16px 0 8px; grid-column:1/-1; }

/* Task editor rows */
.task-edit-row   { border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
.task-edit-header { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg); border-bottom:1px solid var(--border); }
.task-edit-num   { width:22px; height:22px; border-radius:50%; background:var(--red-light); color:var(--red); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.task-edit-title { flex:1; font-weight:500; }
.task-edit-body  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px 12px; }
.task-edit-col   { display:flex; flex-direction:column; gap:4px; }
.task-edit-col-wide { grid-column:span 2; }
@media(max-width:500px) { .task-edit-body { grid-template-columns:1fr; } .task-edit-col-wide { grid-column:1; } }

.task-locked-row { opacity:.65; }
.tracker-row-blocked { background:rgba(251,191,36,.04); }

/* ─── PHASE B: KANBAN BOARD ─── */
.kb-board { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; min-width:480px; }
@media(max-width:700px) { .kb-board { grid-template-columns:1fr; } }

.kb-col { border-radius:10px; min-height:200px; max-height:calc(100vh - 400px); display:flex; flex-direction:column; }
.kb-col-todo     { background:#F3F4F6; }
.kb-col-progress { background:#FEF3C7; }
.kb-col-done     { background:#DCFCE7; }

.kb-col-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:10px 10px 0 0; }
.kb-col-label  { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mid); }
.kb-col-count  { font-size:11px; background:rgba(0,0,0,.08); color:var(--text-mid); padding:2px 8px; border-radius:99px; font-weight:600; }
.kb-col-body   { flex:1; min-height:0; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:8px; }
.kb-empty      { font-size:12px; color:var(--text-muted); text-align:center; padding:20px 0; }

.kb-card {
  background:white; border-radius:8px; padding:12px 12px 8px;
  box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:grab; border:1.5px solid transparent;
  transition:box-shadow .15s, border-color .15s;
}
.kb-card:hover      { box-shadow:0 3px 10px rgba(0,0,0,.12); border-color:var(--border-mid); }
.kb-card:active     { cursor:grabbing; }
.kb-card-blocked    { opacity:.6; cursor:not-allowed; border-color:var(--amber); }
.kb-card-title      { font-size:13px; font-weight:500; color:var(--text); margin-bottom:6px; line-height:1.4; }
.kb-card-meta       { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.kb-card-owner      { font-size:11px; color:var(--text-muted); background:var(--bg); padding:2px 7px; border-radius:99px; }
.kb-card-actions    { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; padding-top:6px; border-top:1px solid var(--border); }
.kb-move-btn        { font-size:10px; padding:3px 8px; border:1px solid var(--border-mid); border-radius:5px; background:none; cursor:pointer; color:var(--text-mid); font-family:'Poppins',sans-serif; transition:background .1s; }
.kb-move-btn:hover  { background:var(--bg); }
.kb-move-done       { color:var(--green); border-color:var(--green); }
.kb-move-done:hover { background:var(--green-light); }

/* ─── PHASE B: TRACKER GANTT (task bars) ─── */
.tg-bar {
  position:absolute; top:6px; bottom:6px; border-radius:4px;
  min-width:6px; cursor:pointer; transition:opacity .15s;
}
.tg-bar:hover { opacity:.8; }
.tg-bar:hover .gantt-tooltip { display:block; }
.tg-bar-ontrack  { background:var(--green); }
.tg-bar-delayed  { background:var(--red); }
.tg-bar-complete { background:var(--blue); }
.tg-bar-blocked  { background:var(--amber); }

.tg-link {
  position:absolute; top:50%; height:2px; margin-top:-1px;
  background:var(--border-mid); border-radius:99px;
  z-index:0; pointer-events:none;
}

.tg-status-dot { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; font-size:9px; font-weight:700; margin-right:4px; flex-shrink:0; }
.tg-dot-complete    { background:var(--blue);  color:white; }
.tg-dot-delayed     { background:var(--red);   color:white; }
.tg-dot-on-track    { background:var(--green); color:white; }
.tg-dot-on\\-track { background:var(--green); color:white; }
.tg-dot-blocked     { background:var(--amber); color:white; }

/* ─── PHASE C/D/E: MISC ─── */
.tg-dot-on-track { background:var(--green); color:white; }

/* ─── ITEM 4: ACTIVITY FEED ─── */
.activity-feed    { display:flex; flex-direction:column; gap:0; max-height:520px; overflow-y:auto; }
.activity-row     { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.activity-row:last-child { border-bottom:none; }
.activity-icon    { font-size:16px; flex-shrink:0; margin-top:1px; }
.activity-body    { flex:1; min-width:0; }
.activity-msg     { font-size:13px; font-weight:500; color:var(--text); line-height:1.4; }
.activity-detail  { font-size:12px; color:var(--text-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-meta    { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* ─── ITEM 5: CRITICAL PATH ─── */
.tg-bar-critical { background:var(--amber); }
.tg-bar-label    { position:absolute; top:50%; left:4px; transform:translateY(-50%); font-size:9px; font-weight:700; color:white; white-space:nowrap; pointer-events:none; }

/* ─── ITEM 6: QUICK UPDATE ─── */
.qu-task-row  { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.qu-task-row:last-child { border-bottom:none; }
.qu-task-info { flex:1; min-width:0; }
.qu-task-name { font-size:13px; font-weight:500; color:var(--text); }
.qu-task-meta { font-size:11px; color:var(--text-muted); margin-top:3px; display:flex; align-items:center; gap:6px; }
.qu-task-btns { display:flex; gap:4px; flex-shrink:0; align-items:center; }
.qu-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px; padding-top:4px; }
.qu-label-red     { color:var(--red); }

.tracker-toolbar { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.tracker-toolbar-label { font-size:13px; font-weight:500; color:var(--text-mid); }

.stat-value.red { animation: pulse-red 2.5s ease-in-out infinite; }
@keyframes pulse-red { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* Status dropdown menu */
.status-dropdown-menu { background:white; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden; min-width:150px; }
.status-dropdown-item { display:flex; align-items:center; gap:9px; padding:9px 14px; font-size:13px; cursor:pointer; color:var(--text); transition:background .1s; }
.status-dropdown-item:hover { background:var(--bg); }
.status-dropdown-item.sdi-active { background:var(--bg); font-weight:600; }
.sdi-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sdi-current { margin-left:auto; font-size:10px; color:var(--text-muted); font-weight:400; }
.task-status-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 11px; border-radius:99px; border:1.5px solid; cursor:pointer; white-space:nowrap; transition:opacity .12s; user-select:none; }
.task-status-badge:hover { opacity:.82; }

/* Subtle calendar day-status fills */
.cal-cell-fill-red    { background:rgba(192,40,45,.07); }
.cal-cell-fill-red:hover    { background:rgba(192,40,45,.12); }
.cal-cell-fill-amber  { background:rgba(217,119,6,.07); }
.cal-cell-fill-amber:hover  { background:rgba(217,119,6,.12); }
.cal-cell-fill-green  { background:rgba(22,163,74,.06); }
.cal-cell-fill-green:hover  { background:rgba(22,163,74,.11); }
.cal-cell-fill-blue   { background:rgba(37,99,235,.05); }
.cal-cell-fill-blue:hover   { background:rgba(37,99,235,.10); }

/* Unified status pills — used across milestone list, tracker, cards */
.status-pill { font-size:11px; font-weight:600; padding:3px 10px; border-radius:99px; flex-shrink:0; white-space:nowrap; }
.status-pill.st-complete  { background:var(--blue-light);  color:var(--blue);  }
.status-pill.st-delayed   { background:var(--red-light);   color:var(--red);   }
.status-pill.st-overdue   { background:var(--red-light);   color:var(--red);   }
.status-pill.st-due-soon  { background:var(--amber-light); color:var(--amber); }
.status-pill.st-on-track  { background:var(--green-light); color:var(--green); }