/* Tasks feature styles. Split out of theme.css; loaded via index.html.
 * Shared tokens/UI-kit/layout live in theme.css. */

/* ---- list: filter bar ---- */
.task-filters {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
 margin-top: 8px;
 color: var(--muted-foreground);
}

.task-filter {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 10px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--muted-foreground);
 font: inherit;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
}

.task-filter:hover {
 color: var(--foreground);
}

.task-filter.active {
 background: var(--accent);
 color: var(--foreground);
}

.task-filter-count {
 color: var(--muted-foreground);
 font-size: 12px;
}

.task-filter.active .task-filter-count {
 color: var(--primary);
}

/* ---- list: rows ---- */
.task-list {
 margin-top: 4px;
 padding: 0;
 overflow: hidden;
}

.task-row {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 width: 100%;
 padding: 14px 16px;
 border: 0;
 border-top: 1px solid var(--border);
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.task-row:first-child {
 border-top: 0;
}

.task-row:hover {
 background: var(--muted);
}

.task-row-main {
 flex: 1;
 min-width: 0;
}

.task-row-title {
 font-size: 14px;
 font-weight: 500;
 color: var(--foreground);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.task-row.done .task-row-title {
 color: var(--muted-foreground);
 text-decoration: line-through;
}

.task-row-body {
 margin-top: 2px;
 font-size: 12px;
 color: var(--muted-foreground);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.task-row-meta {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 8px;
 font-size: 11px;
 color: var(--muted-foreground);
}

.task-row-due,
.task-row-files {
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

.task-row-chevron {
 display: inline-flex;
 align-items: center;
 color: var(--border);
 margin-top: 2px;
}

/* ---- status dot ---- */
.task-dot {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 16px;
 height: 16px;
 margin-top: 1px;
}

.task-dot.is-open {
 color: var(--border);
}

.task-dot.is-complete {
 color: #16a34a;
}

.task-dot.is-progress {
 box-sizing: border-box;
 border: 2px solid var(--primary);
 border-radius: 999px;
}

.task-dot.is-progress::after {
 content: '';
 width: 6px;
 height: 6px;
 border-radius: 999px;
 background: var(--primary);
}

/* ---- list: empty + footer ---- */
.task-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 padding: 48px 16px;
 color: var(--muted-foreground);
 font-size: 14px;
}

.task-empty svg {
 color: var(--border);
}

.task-foot {
 margin-top: 16px;
 font-size: 11px;
 line-height: 1.5;
}

/* ---- detail ---- */
.task-detail {
 display: flex;
 flex-direction: column;
 gap: 12px;
 max-width: 48rem;
 width: 100%;
 margin: 0 auto;
}

.task-detail-card {
 padding: 0;
 overflow: hidden;
 gap: 0;
}

.task-detail-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 padding: 20px;
 border-bottom: 1px solid var(--border);
}

.task-detail-head-main {
 min-width: 0;
}

.task-detail-status {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
}

.task-detail-title {
 font-size: 18px;
 font-weight: 600;
}

.task-detail-body {
 margin-top: 8px;
 font-size: 14px;
 line-height: 1.5;
 color: var(--muted-foreground);
 white-space: pre-wrap;
}

.task-section-label {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted-foreground);
 margin-bottom: 8px;
}

/* ---- detail: files ---- */
.task-files {
 padding: 20px;
 border-bottom: 1px solid var(--border);
}

.task-file {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 8px 10px;
 border-radius: var(--radius-md);
 background: var(--muted);
}

.task-file + .task-file {
 margin-top: 6px;
}

.task-file-main {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
 font-size: 14px;
}

.task-file-name {
 font-weight: 500;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.task-file-dl {
 display: inline-flex;
 align-items: center;
 color: var(--muted-foreground);
}

a.task-file-dl:hover {
 color: var(--foreground);
}

/* ---- detail: conversation ---- */
.task-convo {
 padding: 20px;
 background: var(--muted);
}

.task-convo-empty {
 font-size: 14px;
 font-style: italic;
}

.task-thread {
 gap: 16px;
}

.task-comment {
 display: flex;
 gap: 12px;
}

.task-comment-main {
 flex: 1;
 min-width: 0;
}

.task-comment-head {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
 margin-bottom: 2px;
}

.task-comment-who {
 font-weight: 500;
 color: var(--foreground);
}

.task-comment-text {
 font-size: 14px;
 line-height: 1.5;
 color: var(--foreground);
 white-space: pre-wrap;
}

/* ---- detail: composer ---- */
.task-composer {
 margin-top: 16px;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.task-composer .textarea {
 border: 0;
 border-radius: 0;
 resize: none;
}

.task-composer .textarea:focus-visible {
 outline: none;
 box-shadow: none;
}

.task-composer-bar {
 display: flex;
 justify-content: flex-end;
 padding: 8px;
 border-top: 1px solid var(--border);
}