/* ============================================================
   TASKS — filter bar + two-column layout: table + slide panel
   ============================================================ */

.tasks-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tasks-filter-bar .form-control { max-width: 200px; font-size: 13px; }
.tasks-filter-spacer { flex: 1; }

.tasks-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - var(--header-h) - 109px);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.tasks-table-wrap {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
}

/* Scoped panel width for tasks */
.tasks-layout .slide-panel.open {
  width: 420px;
  min-width: 420px;
}
.tasks-layout .slide-panel-inner { width: 420px; }

/* ---- Approval action row -------------------------------- */
.approval-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---- Task meta row in panel ----------------------------- */
.task-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 0;
  margin-top: 6px;
}
.task-meta-item { display: flex; flex-direction: column; gap: 2px; }
.task-meta-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-2);
}
.task-meta-val { font-size: 13.5px; color: var(--text-1); }

/* ---- Description block ---------------------------------- */
.task-description {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Overdue highlight ---------------------------------- */
.due-overdue { color: var(--danger); font-weight: 600; }

/* ---- Why a task came back (audit G48) ---------------------
   Above the description in the panel: somebody opening a rejected task needs
   to read this before they re-read the brief. */
.task-rejection {
  background: #FEF2F2;
  border-left: 3px solid var(--danger);
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
  font-size: 13px;
  color: #7F1D1D;
  line-height: 1.5;
  white-space: pre-wrap;
}
.task-rejection-meta {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 6px;
}

/* ---- Task comments and files (3.1) -------------------------
   A thread reads top to bottom and a file list reads as rows. Neither needs a
   card: the panel is already a surface, and boxing every comment inside it
   spends border and radius on separation the whitespace already provides. */

.task-comment-composer,
.task-comment-editor,
.task-file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.task-comment-composer .btn,
.task-comment-editor .btn,
.task-file-upload .btn {
  align-self: flex-start;
}
.task-comment-editor {
  margin: 4px 0 8px;
}

.task-comment {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.task-comment:last-child {
  border-bottom: none;
}
.task-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.task-comment-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1);
}
.task-comment-when {
  font-size: 11.5px;
  color: var(--text-2);
  white-space: nowrap;
}
.task-comment-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-1);
  /* The body is stored as typed, so newlines are part of what was said and
     collapsing them would change the message. wrap, not pre, so a long line
     still fits the 400px panel. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.task-comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.task-file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.task-file-row:last-child {
  border-bottom: none;
}
.task-file-name {
  font-size: 13px;
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.task-file-meta {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 2px;
}
.task-file-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ---- Assignment notice (3.6) ----------------------------- */
.task-notice {
  font-size: 12.5px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.45;
}
.task-notice-bad { color: var(--danger); }