/* ==========================================================================
   pages.css — Small, page-specific rules only (kanban, gantt, calendar, chat, files)
   Shared visuals belong in components.css. Phase 1 contains the foundation
   showcase rules; later phases append their own sections below.
   ========================================================================== */

/* ---- Kanban (used by showcase now, Kanban page in Phase 4) ---------------------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.kanban-col { background: var(--tf-surface-2); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); display: flex; flex-direction: column; min-height: 10rem; }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.875rem; font-weight: 650; }
.kanban-col-head .count { font-weight: 600; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); background: var(--tf-surface-3); padding: 0.0625rem 0.5rem; border-radius: var(--tf-radius-pill); }
.kanban-list { flex: 1; display: grid; align-content: start; gap: 0.625rem; padding: 0 0.625rem 0.75rem; min-height: 4rem; }
.kanban-card { background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: var(--tf-radius-sm); padding: 0.75rem; box-shadow: var(--tf-shadow-sm); cursor: grab; }
.kanban-card:hover { border-color: var(--tf-border-strong); }
.kanban-card .kanban-title { font-weight: 600; line-height: 1.35; margin-bottom: 0.5rem; }
.kanban-card .kanban-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* ==========================================================================
   Phase 2 — Dashboard, Analytics, Workspace, Activity log, Auth, Errors
   ========================================================================== */

/* ---- Activity feed (dashboard, workspace, activity log) ---------------------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; position: relative; }
.feed-item + .feed-item { border-top: 1px solid var(--tf-border); }
.feed-icon {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--stat-c, var(--tf-primary-text)) 14%, transparent);
  color: var(--stat-c, var(--tf-primary-text));
}
.feed-icon .icon { width: 1rem; height: 1rem; }
.feed-body { min-width: 0; }
.feed-text { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.feed-target { font-weight: 550; color: var(--tf-text); }
.feed-text strong { font-weight: 600; }
.feed-meta { margin: 0.125rem 0 0; font-size: var(--tf-fs-xs); color: var(--tf-text-subtle); }
.feed-day { margin: 1.25rem 0 0.25rem; padding: 0 0 0.375rem; font-size: var(--tf-fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tf-text-subtle); border-bottom: 1px solid var(--tf-border); }
.feed-day:first-child { margin-top: 0; }

/* ---- Task rows with checkbox ------------------------------------------------------- */
.task-rows { list-style: none; margin: 0; padding: 0; }
.task-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem var(--tf-card-pad); border-bottom: 1px solid var(--tf-border); }
.task-row:last-child { border-bottom: 0; }
.task-row .form-check-input { margin-top: 0.1875rem; flex: none; }
.task-row .task-main { flex: 1 1 auto; min-width: 0; }
.task-row .task-title { font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.task-row .task-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; margin-top: 0.25rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.task-row.is-done .task-title { text-decoration: line-through; color: var(--tf-text-subtle); font-weight: 450; }
.due-chip.is-overdue { color: var(--tf-danger); font-weight: 600; }
.due-chip.is-soon { color: var(--tf-warning); font-weight: 600; }

/* ---- Project rows (dashboard) -------------------------------------------------------- */
.project-row { display: grid; grid-template-columns: 1fr; gap: 0.625rem; padding: 0.875rem var(--tf-card-pad); border-bottom: 1px solid var(--tf-border); align-items: center; }
.project-row:last-child { border-bottom: 0; }
.project-row .project-name { font-weight: 600; }
.project-row .project-sub { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
@media (min-width: 768px) { .project-row { grid-template-columns: minmax(0, 1.6fr) minmax(7rem, 1fr) auto auto; gap: 1.25rem; } }

/* ---- Schedule timeline ------------------------------------------------------------------ */
.schedule { list-style: none; margin: 0; padding: 0; }
.schedule-item { display: grid; grid-template-columns: 4.25rem 1fr; gap: 0.75rem; padding: 0.625rem 0; }
.schedule-item + .schedule-item { border-top: 1px solid var(--tf-border); }
.schedule-time { font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-text-muted); font-variant-numeric: tabular-nums; }
.schedule-card { border-left: 3px solid var(--ev-c, var(--tf-primary)); padding: 0.125rem 0 0.125rem 0.75rem; min-width: 0; }
.schedule-card .ev-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.schedule-card .ev-sub { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.ev-meeting { --ev-c: var(--tf-primary); }
.ev-deadline { --ev-c: var(--tf-danger); }
.ev-milestone { --ev-c: var(--tf-chart-6); }

/* ---- Workload bars ------------------------------------------------------------------------- */
.workload-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; }
.workload-row .wl-name { font-weight: 550; line-height: 1.2; }
.workload-row .wl-sub { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.workload-row .wl-pct { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Workspace -------------------------------------------------------------------------------- */
.workspace-hero { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: 1.25rem var(--tf-card-pad); }
.workspace-hero h2 { margin: 0; font-size: var(--tf-fs-xl); }
.workspace-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.workspace-stats div { min-width: 5rem; }
.workspace-stats .num { font-size: var(--tf-fs-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.workspace-stats .lbl { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.focus-add { display: flex; gap: 0.5rem; padding: 0.875rem var(--tf-card-pad); border-bottom: 1px solid var(--tf-border); }
.focus-list .task-row { align-items: center; }
.pin-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem var(--tf-card-pad); border-bottom: 1px solid var(--tf-border); }
.pin-card:last-child { border-bottom: 0; }
.pin-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--pin-c, var(--tf-primary)); flex: none; }
.notes-area { resize: vertical; min-height: 11rem; border: 0; border-radius: 0 0 var(--tf-radius) var(--tf-radius); box-shadow: none !important; background: transparent; }
.status-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: var(--tf-card-pad); }
@media (min-width: 576px) { .status-mini { grid-template-columns: repeat(4, 1fr); } }
.status-mini .sm-tile { padding: 0.75rem; border: 1px solid var(--tf-border); border-radius: var(--tf-radius-sm); background: var(--tf-surface-2); }
.status-mini .sm-num { font-size: var(--tf-fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.status-mini .sm-lbl { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); margin-top: 0.25rem; }

/* ---- Analytics filter bar ------------------------------------------------------------------------ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.filter-bar .form-select { width: auto; min-width: 10rem; max-width: 100%; }
.chart-note { font-size: var(--tf-fs-xs); color: var(--tf-text-subtle); margin: 0.75rem 0 0; }

/* ---- Auth (split) ----------------------------------------------------------------------------------- */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--tf-bg); }
.auth-aside { display: none; position: relative; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.5rem; background: #1e1b4b; color: #e0e7ff; overflow: hidden; }
.auth-aside .brand, .auth-aside .brand:hover { color: #fff; }
.auth-aside h2 { color: #fff; font-size: var(--tf-fs-2xl); letter-spacing: -0.025em; line-height: 1.2; max-width: 26rem; }
.auth-aside p { color: #c7d2fe; max-width: 28rem; }
.auth-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.875rem; }
.auth-points li { display: flex; gap: 0.75rem; align-items: flex-start; color: #e0e7ff; }
.auth-points .icon { color: #a5b4fc; margin-top: 0.125rem; }
.auth-aside .demo-note { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #c7d2fe; }
.auth-aside .demo-note strong { color: #fff; }
.auth-aside .demo-note .icon { color: #a5b4fc; }
.auth-aside::after { content: ""; position: absolute; right: -8rem; bottom: -8rem; width: 22rem; height: 22rem; border-radius: 50%; border: 1px solid rgba(165, 180, 252, 0.25); box-shadow: 0 0 0 3rem rgba(165, 180, 252, 0.05), 0 0 0 6rem rgba(165, 180, 252, 0.035); pointer-events: none; }
.auth-main { display: flex; flex-direction: column; min-width: 0; }
.auth-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.auth-body { flex: 1; display: grid; place-items: center; padding: 1rem 1.25rem 2.5rem; }
.auth-panel { width: 100%; max-width: 26rem; }
.auth-panel h1 { font-size: var(--tf-fs-xl); margin-bottom: 0.375rem; }
.auth-panel .lead-text { color: var(--tf-text-muted); margin-bottom: 1.5rem; }
.auth-foot { text-align: center; margin-top: 1.5rem; color: var(--tf-text-muted); }
.auth-demo-banner { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 0.875rem; margin-bottom: 1.25rem; border-radius: var(--tf-radius-sm); background: var(--tf-surface-2); border: 1px dashed var(--tf-border-strong); font-size: var(--tf-fs-sm); color: var(--tf-text-muted); }
.auth-demo-banner .icon { color: var(--tf-primary-text); margin-top: 0.125rem; }
@media (min-width: 992px) { .auth-split { grid-template-columns: minmax(24rem, 5fr) 6fr; } .auth-aside { display: flex; } .auth-topbar .brand { visibility: hidden; } }
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 2.75rem; }
.pw-toggle { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; margin-top: 0.5rem; }
.strength span { height: 0.25rem; border-radius: 2px; background: var(--tf-surface-3); transition: background var(--tf-dur); }
.strength[data-score="1"] span:nth-child(-n+1) { background: var(--tf-danger); }
.strength[data-score="2"] span:nth-child(-n+2) { background: var(--tf-warning); }
.strength[data-score="3"] span:nth-child(-n+3) { background: var(--tf-info); }
.strength[data-score="4"] span { background: var(--tf-success); }
.pw-rules { list-style: none; margin: 0.625rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.pw-rules li { display: flex; align-items: center; gap: 0.375rem; }
.pw-rules .icon { width: 0.875rem; height: 0.875rem; color: var(--tf-text-subtle); }
.pw-rules li.is-met { color: var(--tf-success); }
.pw-rules li.is-met .icon { color: var(--tf-success); }
.success-panel { text-align: center; padding: 0.5rem 0; }
.success-panel .empty-state-icon { margin-inline: auto; background: rgba(var(--tf-success-rgb), 0.14); color: var(--tf-success); }

/* ---- Error pages ------------------------------------------------------------------------------------- */
.error-wrap { width: 100%; max-width: 34rem; margin-inline: auto; }
.error-top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; }
.error-code.is-danger { color: var(--tf-danger); }
.error-links { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.25rem; text-align: left; }
.error-links a { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--tf-radius-sm); color: var(--tf-text); }
.error-links a:hover { background: var(--tf-surface-3); text-decoration: none; }
.error-links .icon { color: var(--tf-primary-text); }
.ref-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--tf-radius-sm); background: var(--tf-surface-2); border: 1px solid var(--tf-border); font-family: var(--tf-font-mono); font-size: var(--tf-fs-sm); }

/* ==========================================================================
   Phase 3 — Projects: list, grid, details, create/edit, timeline
   ========================================================================== */

/* ---- Shared: dots, view switch, chips ----------------------------------------- */
.proj-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--pc, var(--tf-primary)); flex: none; }
.proj-c1 { --pc: var(--tf-chart-1); } .proj-c2 { --pc: var(--tf-chart-2); } .proj-c3 { --pc: var(--tf-chart-3); }
.proj-c4 { --pc: var(--tf-chart-4); } .proj-c5 { --pc: var(--tf-chart-5); } .proj-c6 { --pc: var(--tf-chart-6); }
.name-link { color: var(--tf-text); font-weight: 600; }
.name-link:hover { color: var(--tf-primary-text); }
.view-switch a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.875rem; padding: 0.25rem 0.75rem; border-radius: 5px; color: var(--tf-text-muted); font-size: var(--tf-fs-sm); font-weight: 550; }
.view-switch a:hover { color: var(--tf-text); text-decoration: none; }
.view-switch a[aria-current="page"] { background: var(--tf-surface); color: var(--tf-text); box-shadow: var(--tf-shadow-sm); }
.status-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.status-chips button { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.75rem; border: 1px solid var(--tf-border-strong); border-radius: var(--tf-radius-pill); background: var(--tf-surface); color: var(--tf-text-muted); font-size: var(--tf-fs-sm); font-weight: 550; transition: background var(--tf-dur), color var(--tf-dur), border-color var(--tf-dur); }
.status-chips button:hover { background: var(--tf-surface-3); color: var(--tf-text); }
.status-chips button[aria-pressed="true"] { background: var(--tf-primary-soft); border-color: transparent; color: var(--tf-primary-text); }
.status-chips .n { font-variant-numeric: tabular-nums; color: var(--tf-text-subtle); font-weight: 600; }
.status-chips button[aria-pressed="true"] .n { color: inherit; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.875rem var(--tf-card-pad); border-bottom: 1px solid var(--tf-border); }
.filter-row .search-field { flex: 1 1 15rem; max-width: 24rem; }
.filter-row .form-select { width: auto; max-width: 100%; }

/* ---- Project grid cards --------------------------------------------------------- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.proj-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.proj-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--pc, var(--tf-primary)); }
.proj-card .card-body { display: flex; flex-direction: column; gap: 1rem; padding-top: calc(var(--tf-card-pad) + 4px); flex: 1; }
.proj-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.proj-card-title { margin: 0; font-size: var(--tf-fs-md); line-height: 1.3; }
.proj-card-client { margin: 0.125rem 0 0; font-size: var(--tf-fs-sm); color: var(--tf-text-muted); }
.proj-card-desc { margin: 0; color: var(--tf-text-muted); font-size: var(--tf-fs-sm); }
.proj-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.75rem 0; border-block: 1px solid var(--tf-border); }
.proj-card-stats .v { font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.proj-card-stats .l { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.proj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.proj-card .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.proj-card .dropdown, .proj-card .proj-card-foot > * { position: relative; z-index: 2; }

/* ---- Project details ----------------------------------------------------------------- */
.details-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.details-title { display: flex; align-items: flex-start; gap: 0.875rem; min-width: 0; }
.details-title .proj-badge { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; flex: none; color: #fff; font-weight: 700; font-size: 1.125rem; background: var(--pc, var(--tf-primary)); }
.details-title h1 { margin: 0; overflow-wrap: anywhere; }
.details-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; align-items: center; margin-top: 0.375rem; color: var(--tf-text-muted); font-size: var(--tf-fs-sm); }
.mini-stat { padding: 1rem var(--tf-card-pad); }
.mini-stat .v { font-size: var(--tf-fs-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mini-stat .l { font-size: var(--tf-fs-sm); color: var(--tf-text-muted); }
.ms-list { list-style: none; margin: 0; padding: 0; }
.ms-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem var(--tf-card-pad); border-bottom: 1px solid var(--tf-border); }
.ms-item:last-child { border-bottom: 0; }
.ms-item.is-done .ms-title { text-decoration: line-through; color: var(--tf-text-subtle); font-weight: 450; }
.ms-title { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ms-date { font-size: var(--tf-fs-sm); color: var(--tf-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.member-card { display: flex; align-items: center; gap: 0.875rem; padding: 1rem var(--tf-card-pad); }
.member-card .member-info { flex: 1 1 auto; min-width: 0; }
.member-card .member-name { font-weight: 600; }
.file-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--tf-primary-soft); color: var(--tf-primary-text); flex: none; }
.inline-status { min-width: 8.5rem; }
.kv-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.kv-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--tf-border); }
.kv-list > div:last-child { border-bottom: 0; }
.kv-list dt { font-weight: 500; color: var(--tf-text-muted); }
.kv-list dd { margin: 0; font-weight: 550; text-align: right; overflow-wrap: anywhere; }

/* ---- Create / edit form ------------------------------------------------------------------ */
.form-section + .form-section { margin-top: 1rem; }
.form-section .card-header-title { display: flex; align-items: center; gap: 0.5rem; }
.color-picker { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.color-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.color-picker label { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--pc); cursor: pointer; border: 2px solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--tf-surface); }
.color-picker label .icon { color: #fff; opacity: 0; width: 1rem; height: 1rem; }
.color-picker input:checked + label { border-color: var(--pc); }
.color-picker input:checked + label .icon { opacity: 1; }
.color-picker input:focus-visible + label { outline: 2px solid var(--tf-primary); }
.member-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; }
.member-pick label { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border: 1px solid var(--tf-border); border-radius: var(--tf-radius-sm); cursor: pointer; margin: 0; background: var(--tf-surface); }
.member-pick label:hover { border-color: var(--tf-border-strong); }
.member-pick input:checked + .avatar + span, .member-pick label:has(input:checked) { border-color: var(--tf-primary); }
.member-pick label:has(input:checked) { background: var(--tf-primary-soft); }
.member-pick .form-check-input { margin: 0; flex: none; }
.member-pick small { display: block; color: var(--tf-text-muted); line-height: 1.2; }
.preview-card { position: sticky; top: calc(var(--tf-header-h) + 1rem); }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: center; }

/* ---- Gantt timeline ------------------------------------------------------------------------ */
.gantt-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.875rem var(--tf-card-pad); border-bottom: 1px solid var(--tf-border); }
.gantt-toolbar .form-select { width: auto; max-width: 100%; min-width: 12rem; }
.gantt { --dw: 28px; --row-h: 46px; --label-w: 15rem; position: relative; overflow: auto; max-height: 70vh; background: var(--tf-surface); border-radius: 0 0 var(--tf-radius) var(--tf-radius); }
.gantt-inner { position: relative; width: max-content; min-width: 100%; }
.gantt-head, .gantt-row { display: flex; }
.gantt-head { position: sticky; top: 0; z-index: 6; background: var(--tf-surface-2); border-bottom: 1px solid var(--tf-border); }
.gantt-corner, .gantt-label { position: sticky; left: 0; z-index: 5; width: var(--label-w); flex: none; background: var(--tf-surface); border-right: 1px solid var(--tf-border); }
.gantt-corner { z-index: 7; background: var(--tf-surface-2); display: flex; align-items: flex-end; padding: 0.5rem 0.875rem; font-size: var(--tf-fs-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tf-text-muted); }
.gantt-scale { position: relative; height: 3.25rem; flex: none; }
.gantt-scale .tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--tf-border); padding: 0.25rem 0.375rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gantt-scale .tick.major { font-weight: 650; color: var(--tf-text); }
.gantt-scale .tick.minor { top: auto; height: 1.5rem; border-left-color: color-mix(in srgb, var(--tf-border) 60%, transparent); display: flex; align-items: center; }
.gantt-row { height: var(--row-h); border-bottom: 1px solid var(--tf-border); }
.gantt-row:hover .gantt-label, .gantt-row:hover .gantt-track { background-color: var(--tf-surface-2); }
.gantt-label { display: flex; align-items: center; gap: 0.625rem; padding: 0 0.875rem; min-width: 0; }
.gantt-label .g-title { font-weight: 550; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tf-text); }
.gantt-label a.g-title:hover { color: var(--tf-primary-text); text-decoration: none; }
.gantt-label .g-sub { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.gantt-label .g-text { min-width: 0; display: grid; }
.gantt-track { position: relative; flex: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--tf-border) 55%, transparent) 1px, transparent 1px); background-size: var(--grid-step, var(--dw)) 100%; }
.gantt-bar { --bc: var(--tf-primary); position: absolute; top: 10px; height: calc(var(--row-h) - 20px); min-width: 6px; padding: 0; border: 1px solid color-mix(in srgb, var(--bc) 55%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--bc) 20%, var(--tf-surface)); overflow: hidden; text-align: left; color: var(--tf-text); display: flex; align-items: center; cursor: pointer; transition: box-shadow var(--tf-dur), transform var(--tf-dur); }
.gantt-bar:hover { box-shadow: var(--tf-shadow-md); transform: translateY(-1px); }
.gantt-bar:focus-visible { outline: 2px solid var(--tf-primary); outline-offset: 2px; }
.gantt-bar .fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--bc) 55%, transparent); }
.gantt-bar .pct { position: relative; padding: 0 0.5rem; font-size: var(--tf-fs-xs); font-weight: 650; white-space: nowrap; }
.gantt-bar.st-backlog { --bc: var(--tf-status-backlog); } .gantt-bar.st-todo { --bc: var(--tf-status-todo); }
.gantt-bar.st-progress { --bc: var(--tf-status-progress); } .gantt-bar.st-review { --bc: var(--tf-status-review); }
.gantt-bar.st-done { --bc: var(--tf-status-done); } .gantt-bar.st-blocked { --bc: var(--tf-status-blocked); } .gantt-bar.st-hold { --bc: var(--tf-status-hold); }
.gantt-ms { position: absolute; top: calc(var(--row-h) / 2 - 11px); width: 22px; height: 22px; margin-left: -11px; padding: 0; border: 0; background: transparent; cursor: default; z-index: 2; }
.gantt-ms::before { content: ""; position: absolute; inset: 3px; transform: rotate(45deg); border-radius: 3px; background: var(--tf-surface); border: 2px solid var(--tf-chart-6); }
.gantt-ms.is-done::before { background: var(--tf-chart-6); }
.gantt-ms.is-late::before { border-color: var(--tf-danger); }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--tf-danger); z-index: 4; pointer-events: none; }
.gantt-today::before { content: "Today"; position: absolute; top: 0.25rem; left: 4px; padding: 0.0625rem 0.375rem; border-radius: 4px; background: var(--tf-danger); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
[data-bs-theme="dark"] .gantt-today::before { color: #1a0505; }
.gantt-deps { position: absolute; top: 0; pointer-events: none; z-index: 3; overflow: visible; }
.gantt-deps path { fill: none; stroke: var(--tf-text-subtle); stroke-width: 1.5; }
.gantt-deps path.conflict { stroke: var(--tf-danger); stroke-dasharray: 4 3; }
.gantt-deps marker path { fill: var(--tf-text-subtle); stroke: none; }
.gantt-deps marker.conflict path { fill: var(--tf-danger); }
.gantt-group { height: 2.25rem; border-bottom: 1px solid var(--tf-border); background: var(--tf-surface-2); display: flex; }
.gantt-group .gantt-label { background: var(--tf-surface-2); font-size: var(--tf-fs-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tf-text-muted); }
.gantt-group .gantt-track { background-image: none; flex: 1 1 auto; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0.75rem var(--tf-card-pad); border-top: 1px solid var(--tf-border); font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.gantt-legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.gantt-legend i { display: inline-block; width: 0.875rem; height: 0.625rem; border-radius: 3px; background: color-mix(in srgb, var(--lc) 55%, transparent); border: 1px solid var(--lc); }
.gantt-legend i.ms { width: 0.625rem; height: 0.625rem; transform: rotate(45deg); background: var(--tf-surface); border: 2px solid var(--tf-chart-6); border-radius: 2px; }
.gantt-legend i.dep { width: 1.25rem; height: 0; border: 0; border-top: 1.5px solid var(--tf-text-subtle); border-radius: 0; background: none; }
.gantt-legend i.dep.bad { border-top: 1.5px dashed var(--tf-danger); }
@media (max-width: 575.98px) { .gantt { --label-w: 9.5rem; max-height: 65vh; } .gantt-label .g-sub { display: none; } }

.due.is-overdue { color: var(--tf-danger); font-weight: 600; }
.due.is-soon { color: var(--tf-warning); font-weight: 600; }
.min-w-0 { min-width: 0; }
td .due { white-space: nowrap; }
.badge-count { display: inline-block; min-width: 1.25rem; margin-left: 0.25rem; padding: 0 0.375rem; border-radius: var(--tf-radius-pill); background: var(--tf-surface-3); color: var(--tf-text-muted); font-size: var(--tf-fs-xs); font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.badge-count:empty { display: none; }
.nav-tabs-tf .nav-link .icon { margin-right: 0.375rem; vertical-align: -0.2em; }
.progress-editor { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.progress-editor input[type="range"] { flex: 1 1 10rem; accent-color: var(--tf-primary); }
.chart-box { position: relative; height: 15rem; }
.gantt-today::before { content: none; }
.gantt-scale .today-tag { position: absolute; top: 0.25rem; z-index: 3; transform: translateX(-50%); padding: 0.0625rem 0.375rem; border-radius: 4px; background: var(--tf-danger); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
[data-bs-theme="dark"] .gantt-scale .today-tag { color: #1a0505; }
.gantt-deps { left: 0; }
.gantt-ms { top: calc(var(--row-h) / 2 - 11px); }
.gantt-toolbar .form-switch { display: flex; align-items: center; gap: 0.5rem; padding-left: 0; }
.gantt-toolbar .form-switch .form-check-input { margin: 0; float: none; flex: none; }

/* ---- Phase 4: tasks ---- */
.subtask-list, .comment-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.25rem; }
.subtask-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.5rem; border-radius: var(--tf-radius-sm); }
.subtask-list li:hover { background: var(--tf-surface-2); }
.subtask-list li.is-done .st-title { color: var(--tf-text-muted); text-decoration: line-through; }
.subtask-list .st-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.subtask-add { display: flex; gap: 0.5rem; align-items: flex-start; }
.comment-list li { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--tf-border); }
.comment-list li:last-child { border-bottom: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; font-size: var(--tf-fs-sm); }
.comment-meta .when { color: var(--tf-text-muted); font-size: var(--tf-fs-xs); }
.comment-text { margin: 0.125rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dep-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.375rem; }
.dep-list:last-child { margin-bottom: 0; }
.tag-chip { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: var(--tf-radius-pill); background: var(--tf-surface-3); color: var(--tf-text-muted); font-size: var(--tf-fs-xs); font-weight: 600; }
.kv-list select.form-select-sm { width: auto; max-width: 100%; }
.filter-row .form-select { min-width: 9rem; padding-right: 2rem; }
.kanban-board { grid-auto-columns: minmax(17rem, 1fr); align-items: start; }
.kanban-board .kanban-col-head { gap: 0.5rem; }
.kanban-col-head .col-name { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.kanban-col-head .col-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--cc, var(--tf-text-subtle)); flex: none; }
.kanban-board .kanban-list { min-height: 6rem; }
.kanban-board .kanban-list:empty::before { content: "Drop tasks here"; display: grid; place-items: center; min-height: 4rem; border: 1.5px dashed var(--tf-border-strong); border-radius: var(--tf-radius-sm); color: var(--tf-text-subtle); font-size: var(--tf-fs-sm); }
.kanban-card { position: relative; }
.kanban-card .kanban-top { display: flex; align-items: flex-start; gap: 0.25rem; }
.kanban-card .kanban-title { flex: 1; min-width: 0; margin-bottom: 0.375rem; overflow-wrap: anywhere; }
.kanban-card .kanban-title a { color: inherit; text-decoration: none; }
.kanban-card .kanban-title a:hover { color: var(--tf-primary-text); }
.kanban-card .kanban-proj { display: flex; align-items: center; gap: 0.375rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); margin-bottom: 0.5rem; }
.kanban-card .kanban-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); flex-wrap: wrap; }
.kanban-card.sortable-ghost { opacity: 0.45; border-style: dashed; border-color: var(--tf-primary); }
.kanban-card.sortable-chosen { cursor: grabbing; box-shadow: var(--tf-shadow-md, var(--tf-shadow-sm)); }
.kanban-card.sortable-drag { transform: rotate(1.5deg); }
.kanban-col.is-over .kanban-list { background: color-mix(in srgb, var(--tf-primary) 6%, transparent); border-radius: var(--tf-radius-sm); }
.inline-switch { display: flex; align-items: center; gap: 0.5rem; padding-left: 0; }
.inline-switch .form-check-input { margin: 0; float: none; flex: none; }
.kv-list select.form-select-sm { padding-right: 2rem; }

/* ---- My tasks + backlog ---- */
.task-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-top: 1px solid var(--tf-border); }
.task-row:first-child { border-top: 0; }
.task-row:hover { background: var(--tf-surface-2); }
.task-row.is-done .tr-title { color: var(--tf-text-muted); text-decoration: line-through; }
.task-row .tr-main { flex: 1; min-width: 0; }
.task-row .tr-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.task-row .tr-sub { display: flex; align-items: center; gap: 0.375rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.task-row .tr-due { text-align: right; font-size: var(--tf-fs-sm); white-space: nowrap; }
.task-row .tr-due .due { display: block; font-size: var(--tf-fs-xs); }
.task-row .form-check { margin: 0; }
@media (max-width: 575.98px) { .task-row { flex-wrap: wrap; } .task-row .tr-main { flex-basis: calc(100% - 3rem); } .task-row .tr-side { margin-left: 2.25rem; } }
.task-row .tr-side { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.mini-bar-row { display: grid; gap: 0.25rem; margin-bottom: 0.875rem; }
.mini-bar-row:last-child { margin-bottom: 0; }
.mini-bar-row .lbl { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--tf-fs-sm); }
.backlog-list { list-style: none; margin: 0; padding: 0; }
.backlog-list .task-row { background: var(--tf-surface); }
.backlog-list .rank { width: 1.75rem; text-align: center; color: var(--tf-text-muted); font-weight: 650; font-variant-numeric: tabular-nums; flex: none; }
.drag-handle { cursor: grab; color: var(--tf-text-subtle); display: inline-flex; padding: 0.25rem; border-radius: var(--tf-radius-sm); flex: none; }
.drag-handle:hover { color: var(--tf-text); background: var(--tf-surface-3); }
.is-locked .drag-handle { cursor: not-allowed; opacity: 0.4; }
.backlog-list .sortable-ghost { opacity: 0.4; background: color-mix(in srgb, var(--tf-primary) 10%, transparent); }
.backlog-list .form-select-sm { width: auto; padding-right: 2rem; }
.card-header-title .icon { margin-right: 0.5rem; vertical-align: -0.15em; }
.empty-line { display: flex; align-items: center; gap: 0.625rem; margin: 0; padding: 0.875rem 1rem; color: var(--tf-text-muted); font-size: var(--tf-fs-sm); }
.breadcrumb { flex-wrap: wrap; row-gap: 0.125rem; }
.breadcrumb-item { min-width: 0; overflow-wrap: anywhere; }

/* ---- Phase 5: calendar, agenda, meetings & deadlines ---- */
.ev-meeting { --ec: var(--tf-primary-text); }
.ev-deadline { --ec: var(--tf-danger); }
.ev-milestone { --ec: var(--tf-status-review); }
.ev-task { --ec: var(--tf-status-progress); }
.cat-dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 3px; background: var(--ec, var(--tf-text-subtle)); flex: none; }
.cal-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--tf-border); }
.cal-toolbar .cal-title { margin: 0 0.25rem; font-size: var(--tf-fs-lg, 1.125rem); font-weight: 700; flex: 1 1 10rem; min-width: 0; }
.cal-nav { display: inline-flex; gap: 0.25rem; }
.cal-filter { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; }
.cal-filter:last-child { margin-bottom: 0; }
.cal-filter .form-check-input { margin: 0; flex: none; }
.cal-filter label { display: flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer; font-weight: 550; }
.next-up { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.next-up li { display: flex; gap: 0.625rem; align-items: flex-start; }
.next-up .nu-link { display: flex; gap: 0.625rem; align-items: flex-start; width: 100%; padding: 0.5rem; border: 0; border-radius: var(--tf-radius-sm); background: transparent; color: inherit; text-align: left; text-decoration: none; }
.next-up .nu-link:hover { background: var(--tf-surface-2); }
.next-up .cat-dot { margin-top: 0.4rem; }
.next-up .nu-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.next-up .nu-when { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }

/* FullCalendar themed with Taskflow tokens (light + dark follow automatically) */
.fc { --fc-border-color: var(--tf-border); --fc-page-bg-color: var(--tf-surface); --fc-neutral-bg-color: var(--tf-surface-2); --fc-today-bg-color: color-mix(in srgb, var(--tf-primary) 9%, transparent);
  --fc-now-indicator-color: var(--tf-danger); --fc-list-event-hover-bg-color: var(--tf-surface-2); --fc-event-text-color: var(--tf-text); --fc-more-link-bg-color: transparent; font-family: var(--tf-font-sans); color: var(--tf-text); font-size: var(--tf-fs-sm); }
.fc a { color: inherit; text-decoration: none; }
.fc .fc-col-header-cell { background: var(--tf-surface-2); }
.fc .fc-col-header-cell-cushion { padding: 0.5rem 0.25rem; font-size: var(--tf-fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tf-text-muted); }
.fc .fc-daygrid-day-number, .fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: var(--tf-text-muted); font-weight: 550; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--tf-primary-contrast, #fff); background: var(--tf-primary); border-radius: 999px; min-width: 1.5rem; text-align: center; margin: 0.125rem; padding: 0.0625rem 0.25rem; }
.fc .fc-day-other .fc-daygrid-day-top { opacity: 1; }
.fc .fc-scrollgrid { border-color: var(--tf-border); border-left: 0; border-right: 0; border-bottom: 0; }
.fc .fc-event { border: 0; border-left: 3px solid var(--ec, var(--tf-primary)); border-radius: 4px; background: color-mix(in srgb, var(--ec, var(--tf-primary)) 14%, var(--tf-surface)); color: var(--tf-text); cursor: pointer; margin-bottom: 1px; }
.fc .fc-event .fc-event-main { color: inherit; padding: 1px 4px; }
.fc .fc-event:hover { background: color-mix(in srgb, var(--ec, var(--tf-primary)) 24%, var(--tf-surface)); }
.fc .fc-event:focus-visible { outline: 2px solid var(--tf-primary); outline-offset: 1px; }
.fc .fc-daygrid-event-dot { display: none; }
.fc .fc-daygrid-dot-event { background: color-mix(in srgb, var(--ec, var(--tf-primary)) 14%, var(--tf-surface)); }
.fc .fc-daygrid-dot-event .fc-event-title, .fc .fc-event-time { font-weight: 600; }
.fc .fc-event.is-done { opacity: 0.85; text-decoration: line-through; }
.fc .fc-more-link { color: var(--tf-primary-text); font-weight: 650; }
.fc .fc-popover { background: var(--tf-surface); border-color: var(--tf-border); box-shadow: var(--tf-shadow-md, var(--tf-shadow-sm)); }
.fc .fc-popover-header { background: var(--tf-surface-2); color: var(--tf-text); }
.fc .fc-list { border-color: var(--tf-border); }
.fc .fc-list-day-cushion { background: var(--tf-surface-2) !important; }
.fc .fc-list-event td { border-color: var(--tf-border); }
.fc .fc-list-event-dot { border-color: var(--ec, var(--tf-primary)); }
.fc .fc-list-event:hover td { background: var(--tf-surface-2); }
.fc .fc-list-empty { background: var(--tf-surface); color: var(--tf-text-muted); }
.fc .fc-timegrid-now-indicator-line { border-color: var(--tf-danger); }
.fc .fc-highlight { background: color-mix(in srgb, var(--tf-primary) 14%, transparent); }
.fc-theme-standard .fc-scrollgrid, .fc-theme-standard td, .fc-theme-standard th { border-color: var(--tf-border); }
#calendar { padding: 0; min-height: 24rem; }
@media (max-width: 575.98px) { .cal-toolbar { padding: 0.625rem; } .fc .fc-daygrid-day-number { font-size: 0.75rem; } }

/* agenda */
.agenda-day { margin-bottom: 1.25rem; }
.agenda-day h2 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.5rem; font-size: var(--tf-fs-md, 1rem); }
.agenda-day h2 small { color: var(--tf-text-muted); font-weight: 500; }
.agenda-day.is-today h2 { color: var(--tf-primary-text); }
.agenda-item { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--tf-border); }
.agenda-item:first-child { border-top: 0; }
.agenda-item:hover { background: var(--tf-surface-2); }
.agenda-item .ai-time { font-size: var(--tf-fs-sm); font-weight: 650; color: var(--tf-text-muted); font-variant-numeric: tabular-nums; }
.ai-title { display: inline; padding: 0; border: 0; background: none; color: var(--tf-text); font-weight: 650; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
button.ai-title:hover, a.ai-title:hover { color: var(--tf-primary-text); text-decoration: underline; }
.agenda-item .ai-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); margin-top: 0.125rem; }
.agenda-item.is-done .ai-title { text-decoration: line-through; color: var(--tf-text-muted); }
@media (max-width: 575.98px) { .agenda-item { grid-template-columns: 1fr auto; } .agenda-item .ai-time { grid-column: 1 / -1; } }
.tf-tabs-wrap .nav-tabs-tf { padding: 0 1rem; }

.ai-title { font: inherit; font-weight: 650; cursor: pointer; }
.view-switch { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

/* ===== Phase 6 — Team ===== */
.pres { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-text-muted); }
.pres i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tf-text-subtle); }
.pres-online i { background: var(--tf-success); } .pres-away i { background: var(--tf-warning); }
.member-card .card-body { display: flex; flex-direction: column; gap: 0.25rem; height: 100%; }
.member-card.is-inactive { opacity: 0.8; }
.member-name { font-size: var(--tf-fs-md, 1rem); font-weight: 650; margin: 0.5rem 0 0; }
.member-name a { color: var(--tf-text); text-decoration: none; }
.member-name a:hover { color: var(--tf-primary-text); text-decoration: underline; }
.member-role { margin: 0; color: var(--tf-text-muted); font-size: var(--tf-fs-sm); }
.member-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin: 0.375rem 0; }
.member-loc { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.member-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.625rem 0; padding: 0.625rem 0; border-block: 1px solid var(--tf-border); }
.member-stats dt { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); font-weight: 500; }
.member-stats dd { margin: 0; font-weight: 650; font-size: 1.125rem; }
.member-load { margin-top: auto; }
.profile-head { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.profile-main { min-width: 0; }
.profile-name { margin: 0; font-size: 1.375rem; font-weight: 700; }
.profile-role { margin: 0.25rem 0 0.5rem; color: var(--tf-text-muted); }
.profile-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; padding: 0; margin: 0 0 0.75rem; font-size: var(--tf-fs-sm); color: var(--tf-text-muted); }
.profile-meta li { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; overflow-wrap: anywhere; }
.profile-bio { max-width: 46rem; margin: 0 0 0.75rem; }
.skill-list { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.skill { padding: 0.1875rem 0.625rem; border-radius: var(--tf-radius-pill); background: var(--tf-primary-soft); color: var(--tf-primary-text); font-size: var(--tf-fs-xs); font-weight: 600; }
.profile-load { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--tf-border); }
.profile-load-pct { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
@media (min-width: 992px) { .profile-head { grid-template-columns: auto 1fr 14rem; } .profile-load { grid-column: auto; padding: 0 0 0 1.25rem; border-top: 0; border-left: 1px solid var(--tf-border); } }
.team-list { list-style: none; margin: 0; padding: 0.5rem; display: grid; gap: 0.25rem; }
.team-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid transparent; border-radius: var(--tf-radius-sm); background: transparent; color: var(--tf-text); text-align: left; transition: background var(--tf-dur), border-color var(--tf-dur); }
.team-row:hover { background: var(--tf-surface-3); }
.team-row[aria-pressed="true"] { background: var(--tf-primary-soft); border-color: var(--tf-primary); }
.team-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.team-row-name { font-weight: 650; }
.team-row-sub { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.team-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; margin: 0; }
.team-facts dt { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); font-weight: 500; }
.team-facts dd { margin: 0; font-weight: 650; }
.heatmap { width: 100%; border-collapse: separate; border-spacing: 0.25rem; font-size: var(--tf-fs-sm); }
.heatmap th { font-weight: 600; color: var(--tf-text-muted); font-size: var(--tf-fs-xs); white-space: nowrap; }
.heatmap tbody th { color: var(--tf-text); text-align: left; max-width: 8rem; }
.heatmap tbody th a { color: inherit; text-decoration: none; }
.hm-cell { display: block; min-width: 3.25rem; padding: 0.4375rem 0.25rem; border-radius: var(--tf-radius-sm); text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; border: 1px solid var(--tf-border); }
.hm-0 { background: var(--tf-surface-3); color: var(--tf-text-muted); }
.hm-1 { background: color-mix(in srgb, var(--tf-success) 18%, var(--tf-surface)); color: var(--tf-text); border-color: color-mix(in srgb, var(--tf-success) 40%, var(--tf-border)); }
.hm-2 { background: color-mix(in srgb, var(--tf-info, var(--tf-primary)) 24%, var(--tf-surface)); color: var(--tf-text); border-color: color-mix(in srgb, var(--tf-info, var(--tf-primary)) 45%, var(--tf-border)); }
.hm-3 { background: color-mix(in srgb, var(--tf-warning) 32%, var(--tf-surface)); color: var(--tf-text); border-color: color-mix(in srgb, var(--tf-warning) 60%, var(--tf-border)); }
.hm-4 { background: color-mix(in srgb, var(--tf-danger) 38%, var(--tf-surface)); color: var(--tf-text); border-color: var(--tf-danger); }
.heat-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.75rem; font-size: var(--tf-fs-xs); color: var(--tf-text-muted); }
.heat-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.heat-legend .hm { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; border: 1px solid var(--tf-border); }

.tf-table select.form-select-sm, .table select.form-select-sm { min-width: 8rem; }

/* ===== Phase 7 — Time ===== */
.timer-display { font-size: clamp(2.5rem, 8vw, 3.75rem); font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 0.5rem 0 1.25rem; color: var(--tf-text); }
.timer-card.is-running { border-color: var(--tf-primary); box-shadow: 0 0 0 1px var(--tf-primary); }
.timer-card.is-running .timer-display { color: var(--tf-primary-text); }
.timer-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0; }
.sum-grid dt { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); font-weight: 500; }
.sum-grid dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
.lock-tag { display: inline-flex; color: var(--tf-text-muted); padding: 0.375rem; }
.demo-note { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1px solid color-mix(in srgb, var(--tf-info, var(--tf-primary)) 45%, var(--tf-border)); border-radius: var(--tf-radius); background: color-mix(in srgb, var(--tf-info, var(--tf-primary)) 10%, var(--tf-surface)); color: var(--tf-text); font-size: var(--tf-fs-sm); }
.demo-note svg, .demo-note i { flex: none; margin-top: 0.125rem; }
.week-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.week-label { min-width: 9.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.sheet-grid { margin: 0; font-size: var(--tf-fs-sm); }
.sheet-grid th, .sheet-grid td { padding: 0.5rem 0.625rem; vertical-align: middle; white-space: nowrap; }
.sheet-grid thead th { font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-text-muted); text-align: center; }
.sheet-grid thead th:first-child, .sheet-grid tbody th { text-align: left; white-space: normal; min-width: 11rem; font-weight: 600; }
.sheet-grid td { text-align: center; font-variant-numeric: tabular-nums; }
.sheet-grid td.is-zero { color: var(--tf-text-subtle); }
.sheet-grid td.is-weekend { background: var(--tf-surface-3); }
.sheet-grid tfoot th, .sheet-grid tfoot td { font-weight: 700; border-top: 2px solid var(--tf-border); }
.sheet-grid .sg-total { font-weight: 700; }
.sheet-note { margin: 0.75rem 1.25rem 0; }
.inline-switch { display: inline-flex; align-items: center; }

.custom-range { display: flex; gap: 0.5rem; align-items: center; }
.custom-range[hidden] { display: none; }
.table-footer { flex-wrap: wrap; }
.table-footer .pagination { flex-wrap: wrap; row-gap: 0.25rem; }

/* ===== Phase 8 — Reports ===== */
.attn-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.attn-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--tf-border); border-radius: var(--tf-radius-sm); background: var(--tf-surface-2, var(--tf-surface)); }
.attn-list a { font-weight: 650; }
.attn-list .attn-why { flex-basis: 100%; font-size: var(--tf-fs-sm); color: var(--tf-text-muted); }
.rule-note { font-size: var(--tf-fs-sm); color: var(--tf-text-muted); }
.rule-note summary { cursor: pointer; font-weight: 600; color: var(--tf-text); }
.rule-note p { margin: 0.5rem 0 0; }

/* ===== Phase 9: messages, notifications, files, profile, settings ===== */
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }

/* Chat */
.chat-shell { display: grid; grid-template-columns: minmax(0, 1fr); height: clamp(30rem, calc(100vh - 15rem), 46rem); overflow: hidden; padding: 0; }
.chat-list, .chat-thread { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-list { border-right: 1px solid var(--tf-border); }
.chat-shell[data-view="list"] .chat-thread, .chat-shell[data-view="thread"] .chat-list { display: none; }
@media (min-width: 768px) { .chat-shell { grid-template-columns: 19rem minmax(0, 1fr); } .chat-shell[data-view] .chat-list, .chat-shell[data-view] .chat-thread { display: flex; } .chat-back { display: none !important; } }
@media (min-width: 1200px) { .chat-shell { grid-template-columns: 22rem minmax(0, 1fr); } }
.chat-list-head { padding: 0.875rem; display: grid; gap: 0.625rem; border-bottom: 1px solid var(--tf-border); }
.conv-scroll { overflow-y: auto; flex: 1; }
.conv-item { display: flex; gap: 0.75rem; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--tf-border); }
.conv-item:hover { background: var(--tf-surface-2); }
.conv-item[aria-current="true"] { background: var(--tf-primary-soft); }
.conv-body { min-width: 0; flex: 1; }
.conv-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.conv-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: var(--tf-fs-xs); color: var(--tf-text-muted); white-space: nowrap; }
.conv-preview { font-size: var(--tf-fs-sm); color: var(--tf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item.is-unread .conv-name, .conv-item.is-unread .conv-preview { color: var(--tf-text); font-weight: 650; }
.group-av { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--tf-primary-soft); color: var(--tf-primary-text); flex: none; }
.thread-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--tf-border); }
.thread-head .grow { min-width: 0; flex: 1; }
.thread-scroll { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--tf-surface-2); }
.day-sep { align-self: center; font-size: var(--tf-fs-xs); color: var(--tf-text-subtle); padding: 0.125rem 0.625rem; border-radius: var(--tf-radius-pill); background: var(--tf-surface); border: 1px solid var(--tf-border); margin: 0.25rem 0; }
.msg { display: flex; gap: 0.5rem; max-width: min(36rem, 88%); align-items: flex-end; }
.msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.bubble { padding: 0.5rem 0.75rem; border-radius: 1rem; background: var(--tf-surface); border: 1px solid var(--tf-border); overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.is-mine .bubble { background: var(--tf-primary); color: #fff; border-color: transparent; }
.msg-meta { font-size: var(--tf-fs-xs); color: var(--tf-text-subtle); margin-top: 0.125rem; display: flex; gap: 0.5rem; align-items: center; }
.msg.is-mine .msg-meta { justify-content: flex-end; }
.msg-who { font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-text-muted); }
.msg-del { border: 0; background: transparent; color: inherit; padding: 0; opacity: 0; font-size: var(--tf-fs-xs); text-decoration: underline; }
.msg:hover .msg-del, .msg-del:focus-visible { opacity: 1; }
@media (hover: none) { .msg-del { opacity: 1; } }
.typing { font-size: var(--tf-fs-sm); color: var(--tf-text-muted); padding: 0 1rem 0.5rem; background: var(--tf-surface-2); min-height: 1.5rem; }
.chat-composer { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--tf-border); align-items: flex-end; }
.chat-composer textarea { resize: none; max-height: 8rem; height: 2.5rem; min-height: 2.5rem; overflow-y: auto; }
.chat-empty { margin: auto; }

/* Notifications */
.notif-row { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.875rem 1rem; border-bottom: 1px solid var(--tf-border); }
.notif-row:last-child { border-bottom: 0; }
.notif-row.is-unread { background: var(--tf-primary-soft); }
.notif-row .notif-main { min-width: 0; flex: 1; }
.notif-row .notif-title { display: block; font-weight: 550; overflow-wrap: anywhere; }
.notif-row a.notif-title { color: inherit; text-decoration: none; }
.notif-row a.notif-title:hover { text-decoration: underline; }
.notif-row .notif-actions { display: flex; gap: 0.25rem; flex: none; }
.notif-day { padding: 0.5rem 1rem; font-size: var(--tf-fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tf-text-subtle); background: var(--tf-surface-2); border-bottom: 1px solid var(--tf-border); }
.unread-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tf-primary); display: inline-block; margin-right: 0.375rem; }

/* Files */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.875rem; padding: 1rem; }
.file-card { position: relative; border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1rem; background: var(--tf-surface); display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.file-card:hover { border-color: var(--tf-border-strong, var(--tf-primary)); }
.file-card .file-big { width: 2.75rem; height: 2.75rem; border-radius: var(--tf-radius-sm); display: grid; place-items: center; background: var(--tf-primary-soft); color: var(--tf-primary-text); }
.file-card.is-folder .file-big { background: color-mix(in srgb, var(--fc, var(--tf-primary)) 16%, transparent); color: var(--fc, var(--tf-primary-text)); }
.file-card .file-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.file-card .file-open { color: inherit; text-decoration: none; }
.file-card .file-open::after { content: ""; position: absolute; inset: 0; }
.file-card .file-menu { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; }
.drop-zone { border: 2px dashed var(--tf-border); border-radius: var(--tf-radius); padding: 1.25rem; text-align: center; color: var(--tf-text-muted); }
.drop-zone.is-over { border-color: var(--tf-primary); background: var(--tf-primary-soft); }
.crumbs-inline { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--tf-border); }
.crumbs-inline button { border: 0; background: transparent; color: var(--tf-text-muted); padding: 0.125rem 0.375rem; border-radius: var(--tf-radius-sm); }
.crumbs-inline button:hover { background: var(--tf-surface-2); color: var(--tf-text); }
.crumbs-inline [aria-current] { font-weight: 650; padding: 0.125rem 0.375rem; }

/* Settings */
.settings-tabs { margin-bottom: 1rem; max-width: 100%; overflow-x: auto; }
.settings-tabs.segmented { display: inline-flex; }
.setting-row { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 0.875rem 0; border-bottom: 1px solid var(--tf-border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row > :first-child { min-width: 0; }
.setting-row .setting-label { font-weight: 600; display: block; }
.setting-row .setting-desc { color: var(--tf-text-muted); font-size: var(--tf-fs-sm); display: block; }
.setting-row .form-select, .setting-row input[type="time"] { width: auto; max-width: 100%; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.choice-card { position: relative; border: 2px solid var(--tf-border); border-radius: var(--tf-radius); padding: 0.875rem; background: var(--tf-surface); cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; }
.choice-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--tf-primary); background: var(--tf-primary-soft); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--tf-primary); outline-offset: 2px; }
.choice-card strong { display: block; }
.choice-prev { height: 3rem; border-radius: var(--tf-radius-sm); border: 1px solid var(--tf-border); display: flex; gap: 4px; padding: 6px; }
.choice-prev i { flex: 1; border-radius: 3px; }
.accent-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-block; border: 2px solid var(--tf-surface); box-shadow: 0 0 0 1px var(--tf-border); }
.storage-meter { height: 0.5rem; border-radius: 999px; background: var(--tf-surface-3, var(--tf-border)); overflow: hidden; }
.storage-meter > span { display: block; height: 100%; background: var(--tf-primary); }
.demo-banner { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 1rem; border-radius: var(--tf-radius); background: var(--tf-info-soft, var(--tf-primary-soft)); border: 1px solid var(--tf-border); color: var(--tf-text); margin-bottom: 1rem; font-size: var(--tf-fs-sm); }
.demo-banner .icon { flex: none; margin-top: 0.125rem; }
.setting-row { flex-wrap: wrap; }
.setting-row > span.d-flex { flex-wrap: wrap; max-width: 100%; }
.setting-row input[type="time"] { min-width: 0; width: 7.5rem; }
.setting-row:has(.form-switch) { flex-wrap: nowrap; }
.setting-row .form-switch { flex: none; }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--tf-text-muted); opacity: 1; }
.fc .fc-day-other { background: var(--tf-surface-2); }