/* ============================================================
   PIPE TASK — Componentes compartilhados
   Depende de tokens.css. Nenhuma cor literal: sempre hsl(var()).
   ============================================================ */

/* ── Marca ─────────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.03em;
}

.brand__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Card ──────────────────────────────────────────────── */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  padding: 1.75rem;
}

.card__title {
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}

.card__subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* ── Formulário ────────────────────────────────────────── */
.field { margin-bottom: 1rem; }

.field__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: hsl(var(--secondary-foreground));
}

.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  font-size: 0.9375rem;
  transition: border-color 0.15s ease;
}

.input::placeholder { color: hsl(var(--muted-foreground) / 0.7); }

.input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.input--error { border-color: hsl(var(--destructive)); }

.field__error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: hsl(var(--destructive));
}

.field__hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

/* ── Checkbox ──────────────────────────────────────────── */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1875rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Botões ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):hover { opacity: 0.9; }

.btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn--ghost {
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.btn--ghost:not(:disabled):hover { background: hsl(var(--secondary)); }

.btn--block { width: 100%; }

/* ── Modal compartilhado ────────────────────────────────── */
body.modal-open { overflow: hidden; }

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.modal-layer:target,
.modal-layer.is-open { display: grid; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.7);
  backdrop-filter: blur(5px);
  opacity: 0;
  animation: modal-fade-in 0.18s ease-out forwards;
}

.modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 34rem);
  max-height: min(90vh, 56rem);
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 1.5rem 5rem hsl(0 0% 0% / 0.4);
  animation: modal-rise-in 0.2s ease-out forwards;
}

.modal-dialog--sm { width: min(100%, 28rem); }
.modal-dialog--lg { width: min(100%, 48rem); }
.modal-dialog--xl { width: min(100%, 64rem); }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
}

.modal-head__eyebrow {
  margin-bottom: 0.25rem;
  color: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal-head h2 { font-size: 1.25rem; line-height: 1.25; }

.modal-head p:not(.modal-head__eyebrow) {
  margin-top: 0.35rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  line-height: 1.45;
}

.modal-close {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  color: hsl(var(--muted-foreground));
  font-size: 1.25rem;
  line-height: 1;
}

.modal-close:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

.modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
}

.modal-body > :last-child { margin-bottom: 0; }

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--surface) / 0.7);
}

.modal-foot__hint { margin-right: auto; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }

@keyframes modal-fade-in { to { opacity: 1; } }
@keyframes modal-rise-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .modal-layer { align-items: end; padding: 0; }
  .modal-dialog {
    width: 100%;
    max-height: 94dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0;
  }
  .modal-head, .modal-body, .modal-foot { padding-right: 1rem; padding-left: 1rem; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-dialog { animation: none; opacity: 1; }
}

/* ── Alertas ───────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.alert--error {
  background: hsl(var(--destructive) / 0.1);
  border-color: hsl(var(--destructive) / 0.35);
  color: hsl(0 70% 78%);
}

.alert--success {
  background: hsl(var(--success) / 0.1);
  border-color: hsl(var(--success) / 0.35);
  color: hsl(145 45% 70%);
}

.alert--warning {
  background: hsl(var(--warning) / 0.1);
  border-color: hsl(var(--warning) / 0.35);
  color: hsl(38 80% 72%);
}

.alert__title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.alert code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  word-break: break-all;
}

/* ── Lista de verificação (instalador) ─────────────────── */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid hsl(var(--border));
}

.checklist__item:last-child { border-bottom: 0; }

.checklist__icon {
  flex-shrink: 0;
  width: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.checklist__icon--ok   { color: hsl(var(--success)); }
.checklist__icon--fail { color: hsl(var(--destructive)); }

.checklist__hint {
  display: block;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

/* ── Passos numerados ──────────────────────────────────── */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--secondary-foreground));
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.0625rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 9999px;
  background: hsl(var(--secondary));
  color: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 700;
}

.steps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  background: hsl(var(--secondary));
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
}

/* ── Shell: barra lateral + conteúdo ───────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 1rem;
  background: hsl(var(--surface));
  border-right: 1px solid hsl(var(--border));
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.sidebar__link {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__link:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

.sidebar__link.is-active {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.sidebar__foot {
  border-top: 1px solid hsl(var(--border));
  padding-top: 1rem;
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.sidebar__user-info { min-width: 0; }

.sidebar__user-info strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__user-info small {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.sidebar__logout {
  width: 100%;
  padding: 0.4375rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.sidebar__logout:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

.avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: #000;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.content {
  --content-gutter: 2.5rem;
  padding: 2rem var(--content-gutter);
  max-width: 82rem;
  min-width: 0;
  width: 100%;
}

@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; }
  .content { --content-gutter: 1.25rem; padding: 1.25rem; }
}

/* ── Cabeçalho de página ───────────────────────────────── */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.page-head h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }

.page-head p {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.page-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; }

.btn--sm { padding: 0.4375rem 1rem; font-size: 0.8125rem; }

/* ── Grade de projetos ─────────────────────────────────── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.project-card {
  display: block;
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  padding: 1.25rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.project-card:hover {
  border-color: hsl(var(--primary) / 0.5);
  transform: translateY(-2px);
}

.project-card__client {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}

.project-card__name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.25rem 0 0.75rem;
}

.project-card__stats {
  display: flex;
  gap: 1.25rem;
  margin: 1rem 0 0.75rem;
}

.stat__value { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.stat__label { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }

.stat--overdue .stat__value { color: hsl(var(--destructive)); }
.stat--done .stat__value    { color: hsl(var(--success)); }

/* ── Barra de progresso ────────────────────────────────── */
.progress {
  height: 6px;
  border-radius: 9999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: 9999px;
  background: hsl(var(--primary));
  transition: width 0.3s ease;
}

.progress__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.375rem;
}

/* ── Etiquetas de situação ─────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.status-planejamento { background: hsl(210 40% 55% / 0.18); color: hsl(210 60% 72%); }
.status-em-andamento { background: hsl(var(--primary) / 0.18); color: hsl(var(--primary)); }
.status-pausado      { background: hsl(var(--warning) / 0.18); color: hsl(38 80% 72%); }
.status-concluido    { background: hsl(var(--success) / 0.18); color: hsl(145 45% 70%); }
.status-cancelado    { background: hsl(var(--destructive) / 0.15); color: hsl(0 70% 78%); }

/* ── Tabela ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}

.table td {
  padding: 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: 0; }

/* ── Vazio ─────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  color: hsl(var(--muted-foreground));
}

.empty strong { display: block; color: hsl(var(--foreground)); margin-bottom: 0.375rem; }

/* ── Pipeline (prévia das colunas) ─────────────────────── */
.pipeline {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pipeline__step {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface));
  font-size: 0.8125rem;
}

.pipeline__step.is-done {
  border-color: hsl(var(--success) / 0.4);
  color: hsl(145 45% 70%);
}

/* ── Grade de formulário ───────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 1rem;
}

.form-grid--full { grid-column: 1 / -1; }

.form-disclosure {
  margin-top: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.25);
  background: hsl(var(--surface) / 0.45);
}

.form-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
}

.form-disclosure > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary::after { content: '+'; color: hsl(var(--primary)); font-size: 1.1rem; }
.form-disclosure[open] > summary::after { content: '−'; }
.form-disclosure > summary small { margin-left: auto; color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 400; }
.form-disclosure__body { padding: 0 1rem 1rem; border-top: 1px solid hsl(var(--border)); }
.form-disclosure__body > :first-child { margin-top: 1rem; }

@media (max-width: 520px) {
  .form-disclosure > summary small { display: none; }
}

textarea.input { resize: vertical; min-height: 6rem; font-family: inherit; }

select.input { cursor: pointer; }

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.5rem;
}

/* ── Divisor com rótulo ────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

/* ── Kanban ─────────────────────────────────────────────── */
.project-head__client {
  margin-bottom: 0.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-head__due {
  margin-left: 0.375rem;
  color: hsl(var(--muted-foreground));
}

.project-summary {
  margin: -0.75rem 0 1.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.project-summary summary {
  width: max-content;
  cursor: pointer;
  color: hsl(var(--secondary-foreground));
  font-weight: 600;
}

.project-summary p {
  max-width: 52rem;
  margin-top: 0.625rem;
  padding-left: 0.875rem;
  border-left: 2px solid hsl(var(--border));
}

.kanban-notice { margin-bottom: 1rem; }

.project-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid hsl(var(--border));
  overflow-x: auto;
}

.project-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.project-tabs__item.is-active {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.project-tabs__item.is-disabled { opacity: 0.55; }
.project-tabs__item small { font-size: 0.625rem; font-weight: 500; }

/* ── Filtros compartilhados do Kanban e da Lista ──────── */
.task-filters {
  margin-bottom: 1rem;
  padding: 0.875rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.25);
  background: hsl(var(--surface));
}

.task-filters.is-active {
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: inset 3px 0 0 hsl(var(--primary));
}

.task-filters__form {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) repeat(5, minmax(8rem, 1fr)) auto;
  align-items: end;
  gap: 0.625rem;
}

.task-filters label {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
}

.task-filters .input {
  min-width: 0;
  height: 2.25rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
}

.task-filters__actions {
  display: flex;
  gap: 0.375rem;
  padding-bottom: 0.05rem;
}

.task-filters__summary {
  margin-top: 0.625rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.task-filters__summary strong { color: hsl(var(--primary)); }

/* ── Visão em lista ───────────────────────────────────── */
.task-list__table-wrap { margin-top: 0; }
.task-list__table { min-width: 52rem; }
.task-list__title {
  display: block;
  max-width: 30rem;
  color: hsl(var(--foreground));
  font-weight: 650;
}
.task-list__title:hover { color: hsl(var(--primary)); }
.task-list__meta {
  display: block;
  margin-top: 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
}
.task-list__empty { margin-top: 0; }
.muted { color: hsl(var(--muted-foreground)); }
.text-overdue { color: hsl(var(--danger)); font-weight: 650; }
.badge--done { color: hsl(var(--success)); border-color: hsl(var(--success) / 0.35); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

/* ── Dashboard ─────────────────────────────────────────────── */

.dashboard-head__eyebrow {
  margin: 0 0 .35rem;
  color: hsl(var(--primary));
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-metric {
  display: grid;
  gap: .55rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.dashboard-metric span {
  color: hsl(var(--muted-foreground));
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dashboard-metric strong {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1;
}

.dashboard-metric.is-overdue strong { color: hsl(var(--destructive)); }
.dashboard-metric.is-done strong { color: hsl(var(--success)); }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.dashboard-panel {
  min-width: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  overflow: hidden;
}

.dashboard-panel--wide { grid-column: 1 / -1; }

.dashboard-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
}

.dashboard-panel__head h2 { margin: 0; font-size: 1rem; }
.dashboard-panel__head p { margin: .28rem 0 0; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.dashboard-panel__head > a { color: hsl(var(--primary)); font-size: .8rem; }

.dashboard-panel__count {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: .78rem;
  font-weight: 700;
}

.dashboard-empty { margin: 0; padding: 1.5rem 1.25rem; color: hsl(var(--muted-foreground)); }
.dashboard-task-list,
.dashboard-activity { margin: 0; padding: 0; list-style: none; }

.dashboard-task-list li + li,
.dashboard-activity li + li { border-top: 1px solid hsl(var(--border)); }

.dashboard-task-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  color: inherit;
  text-decoration: none;
}

.dashboard-task-list a:hover { background: hsl(var(--muted) / .42); }
.dashboard-task__main { display: grid; gap: .22rem; min-width: 0; }
.dashboard-task__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.dashboard-task__main small { color: hsl(var(--muted-foreground)); }

.dashboard-due { flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: .76rem; font-weight: 600; }
.dashboard-due.is-overdue { color: hsl(var(--destructive)); }

.dashboard-activity li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.25rem;
}

.dashboard-activity__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: hsl(var(--success) / .13);
  color: hsl(var(--success));
  font-weight: 700;
}

.dashboard-activity__body { display: grid; gap: .2rem; min-width: 0; flex: 1; }
.dashboard-activity__body strong { font-size: .84rem; }
.dashboard-activity__body small { color: hsl(var(--muted-foreground)); }

.dashboard-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: hsl(var(--border));
}

.dashboard-projects > a {
  display: grid;
  gap: .5rem;
  padding: 1.1rem 1.25rem;
  background: hsl(var(--card));
  color: inherit;
  text-decoration: none;
}

.dashboard-projects > a:hover { background: hsl(var(--muted) / .35); }
.dashboard-project__top { display: flex; justify-content: space-between; gap: 1rem; }
.dashboard-project__top > span { color: hsl(var(--primary)); font-size: .82rem; font-weight: 700; }
.dashboard-project__client,
.dashboard-project__numbers { color: hsl(var(--muted-foreground)); font-size: .76rem; }
.dashboard-projects .progress { height: .3rem; margin-top: .2rem; }

@media (max-width: 820px) {
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-panel--wide { grid-column: auto; }
  .dashboard-projects { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .dashboard-metrics { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .dashboard-metric { padding: .9rem; }
  .dashboard-task-list a { align-items: flex-start; }
  .dashboard-activity li { align-items: flex-start; flex-wrap: wrap; }
  .dashboard-activity .btn { margin-left: 2.75rem; }
}

/* ── Tokens MCP ────────────────────────────────────────────── */

.mcp-token-reveal { margin-bottom: 1rem; border-color: hsl(var(--primary)); }
.mcp-token-reveal > code { display: block; padding: 1rem; border-radius: var(--radius); background: hsl(var(--background)); overflow-wrap: anywhere; user-select: all; }
.mcp-setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
.mcp-command-card, .mcp-agent-message { min-width: 0; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); }
.mcp-agent-message { margin-top: .85rem; }
.mcp-command-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.mcp-command-card__head h3 { margin: 0; font-size: .9rem; }
.mcp-command-card__head p { margin: .2rem 0 0; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.mcp-command-card pre, .mcp-agent-message pre { margin: 0; padding: .85rem; overflow-x: auto; border-radius: calc(var(--radius) - 2px); background: hsl(var(--card)); white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-command-card pre code, .mcp-agent-message pre code { font-size: .76rem; user-select: all; }
.mcp-copy-status { min-height: 1.2em; margin-bottom: 0; }
.mcp-settings-grid { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(22rem, 1.2fr); gap: 1rem; align-items: start; }
.mcp-settings-grid--single { grid-template-columns: minmax(0, 1fr); }
.mcp-scopes { display: grid; gap: .75rem; margin: 0 0 1.25rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.mcp-scopes legend { padding: 0 .35rem; font-size: .82rem; font-weight: 700; }
.mcp-scopes .check span { display: grid; gap: .15rem; }
.mcp-scopes small { color: hsl(var(--muted-foreground)); }
.mcp-token-list { margin: 0; padding: 0; list-style: none; border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.mcp-token-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; }
.mcp-token-list li + li { border-top: 1px solid hsl(var(--border)); }
.mcp-token-list li > div { display: grid; gap: .22rem; min-width: 0; }
.mcp-token-list code, .mcp-token-list small { color: hsl(var(--muted-foreground)); font-size: .75rem; }
.mcp-token-list .is-inactive { opacity: .62; }

@media (max-width: 900px) { .mcp-settings-grid, .mcp-setup-grid { grid-template-columns: 1fr; } }

@media (max-width: 1180px) {
  .task-filters__form { grid-template-columns: repeat(3, minmax(9rem, 1fr)); }
  .task-filters__search { grid-column: span 2; }
}

@media (max-width: 700px) {
  .task-filters__form { grid-template-columns: 1fr 1fr; }
  .task-filters__search { grid-column: 1 / -1; }
  .task-filters__actions { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .task-filters__form { grid-template-columns: 1fr; }
  .task-filters__search,
  .task-filters__actions { grid-column: auto; }
}

.kanban-shell {
  min-width: 0;
}

.kanban-page { min-width: 0; }

.kanban-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.kanban-toolbar h2 { font-size: 1rem; }

.kanban-toolbar p {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.kanban-toolbar kbd {
  padding: 0.0625rem 0.3rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
  background: hsl(var(--surface-elevated));
  color: hsl(var(--secondary-foreground));
  font: inherit;
}

/* ── Quadro ────────────────────────────────────────────── */
/* Cinco colunas somam mais de 1500 px e a área de conteúdo tem menos
   que isso. Em vez de setas — que não existem em quadro Kanban —, o
   quadro sangra até a borda direita da tela: a coluna seguinte aparece
   cortada, que é o próprio sinal de que há mais adiante.

   O padding à direita devolve o respiro quando a rolagem chega ao fim,
   e a margem negativa é o que permite passar da área de conteúdo. */
.kanban-board {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.125rem 0.125rem 1rem;
  margin-right: calc(-1 * var(--content-gutter, 2.5rem));
  padding-right: var(--content-gutter, 2.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}

.kanban-board:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .kanban-board { scroll-behavior: auto; }
}

/* A página do quadro ignora o teto de largura do conteúdo: numa tela
   larga, cada pixel a mais é uma etapa a mais visível. */
.content:has(> .kanban-page) { max-width: none; }

.kanban-column {
  display: flex;
  flex: 0 0 18.5rem;
  flex-direction: column;
  max-height: calc(100vh - 15rem);
  min-height: 12rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  background: hsl(var(--surface));
  scroll-snap-align: start;
}

.kanban-column.is-terminal {
  border-color: hsl(var(--success) / 0.35);
}

.kanban-column__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0.875rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}

.kanban-column__title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.5rem;
}

.kanban-column__title h3 {
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-column__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.is-terminal .kanban-column__dot {
  background: hsl(var(--success));
  box-shadow: 0 0 0 3px hsl(var(--success) / 0.12);
}

.kanban-column__count {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
}

.kanban-column__tasks {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 7rem;
  padding: 0.75rem;
  overflow-y: auto;
  transition: background-color 0.15s ease;
}

.kanban-empty {
  display: grid;
  min-height: 5rem;
  place-items: center;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.kanban-card {
  position: relative;
  padding: 0.875rem;
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--prio-media));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: 0 5px 18px hsl(var(--background) / 0.18);
  cursor: grab;
  touch-action: none;

  /* Sem isto, clicar e arrastar começa uma seleção de texto que se
     espalha pelo quadro inteiro enquanto o ponteiro se move. Card de
     Kanban é para arrastar; para copiar o texto, abre-se o drawer. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;

  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

[data-writable="0"] .kanban-card { cursor: pointer; touch-action: auto; }
.kanban-card.prio-baixa { border-left-color: hsl(var(--prio-baixa)); }
.kanban-card.prio-media { border-left-color: hsl(var(--prio-media)); }
.kanban-card.prio-alta { border-left-color: hsl(var(--prio-alta)); }
.kanban-card.prio-urgente { border-left-color: hsl(var(--prio-urgente)); }

.kanban-card:hover,
.kanban-card:focus-visible {
  border-top-color: hsl(var(--primary) / 0.5);
  border-right-color: hsl(var(--primary) / 0.5);
  border-bottom-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 8px 24px hsl(var(--background) / 0.32);
}

.kanban-card.is-done h4 { color: hsl(var(--muted-foreground)); }
/* O card original não sai da lista: ele é o indicador de onde a tarefa
   vai cair. A 25% de opacidade ele praticamente sumia, e a pessoa
   perdia a referência do destino. Agora ele fica legível e claramente
   marcado como espaço reservado, enquanto o fantasma sólido acompanha
   o ponteiro. */
.kanban-card.is-dragging {
  opacity: 0.5;
  background: hsl(var(--primary) / 0.07);
  border-color: hsl(var(--primary) / 0.55);
  border-style: dashed;
  border-left-style: solid;
  box-shadow: none;
  cursor: grabbing;
}
.kanban-card.is-saving { opacity: 0.6; cursor: progress; }

.kanban-card--ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 1;
  transform: rotate(1.5deg);
  box-shadow: 0 16px 36px hsl(var(--background) / 0.7);
}

.kanban-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.kanban-card h4 {
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.kanban-card__internal {
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: hsl(var(--warning) / 0.14);
  color: hsl(var(--warning));
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
}

.kanban-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.375rem;
  margin-top: 0.75rem;
}

.priority-badge {
  padding: 0.125rem 0.4375rem;
  border-radius: 9999px;
  background: hsl(var(--prio-media) / 0.14);
  color: hsl(var(--prio-media));
  font-size: 0.625rem;
  font-weight: 700;
}

.priority-badge.prio-baixa { background: hsl(var(--prio-baixa) / 0.14); color: hsl(var(--prio-baixa)); }
.priority-badge.prio-alta { background: hsl(var(--prio-alta) / 0.14); color: hsl(var(--prio-alta)); }
.priority-badge.prio-urgente { background: hsl(var(--prio-urgente) / 0.14); color: hsl(var(--prio-urgente)); }

.kanban-card__due,
.kanban-card__checklist {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
}

.kanban-card__due.is-overdue { color: hsl(var(--destructive)); }

.kanban-card__assignee {
  display: grid;
  width: 1.375rem;
  height: 1.375rem;
  margin-left: auto;
  place-items: center;
  border-radius: 9999px;
  color: hsl(var(--primary-foreground));
  font-size: 0.5rem;
  font-weight: 800;
}

.kanban-create {
  padding: 0 0.75rem 0.75rem;
}

.kanban-create__toggle {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
}

.kanban-create__toggle:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.kanban-create__form {
  padding-top: 0.25rem;
}

.kanban-create__form textarea.input {
  min-height: 4.25rem;
  font-size: 0.8125rem;
}

.kanban-create__error {
  min-height: 1rem;
  margin-top: 0.25rem;
  color: hsl(var(--destructive));
  font-size: 0.6875rem;
}

.kanban-create__actions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

@media (max-width: 800px) {
  .kanban-toolbar { align-items: flex-start; }
  .kanban-toolbar__hint { display: none; }
  .kanban-column { max-height: 68vh; }
}

/* ── Drawer da tarefa ───────────────────────────────────── */
body.drawer-open { overflow: hidden; }

.drawer-layer {
  position: fixed;
  z-index: 100;
  inset: 0;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: hsl(var(--background) / 0.68);
  opacity: 0;
  cursor: default;
  transition: opacity 0.18s ease;
}

.task-drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(36rem, 100vw);
  height: 100%;
  border-left: 1px solid hsl(var(--border));
  background: hsl(var(--surface));
  box-shadow: -18px 0 50px hsl(var(--background) / 0.55);
  transform: translateX(100%);
  transition: transform 0.18s ease;
}

.drawer-layer.is-open .drawer-backdrop { opacity: 1; }
.drawer-layer.is-open .task-drawer { transform: translateX(0); }

.task-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
}

.task-drawer__head p {
  margin-bottom: 0.25rem;
  color: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.task-drawer__head h2 {
  overflow-wrap: anywhere;
  font-size: 1.125rem;
}

.task-drawer__close {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  color: hsl(var(--muted-foreground));
  font-size: 1.5rem;
  line-height: 1;
}

.task-drawer__close:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.task-drawer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  flex: 1;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.task-drawer__loading.is-error { color: hsl(var(--destructive)); }

.task-drawer__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 9999px;
  animation: drawer-spin 0.75s linear infinite;
}

@keyframes drawer-spin { to { transform: rotate(360deg); } }

.task-drawer__body {
  flex: 1;
  min-height: 0;
  padding: 1.25rem 1.5rem 2rem;
  overflow-y: auto;
}

.task-drawer__status {
  min-height: 1.25rem;
  margin-bottom: 0.625rem;
  color: hsl(var(--primary));
  font-size: 0.75rem;
}

.task-drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.task-drawer__description { min-height: 7rem; }

.task-drawer__visibility {
  margin: 0.25rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.task-drawer__visibility strong {
  display: block;
  font-size: 0.8125rem;
}

.task-drawer__visibility small {
  display: block;
  margin-top: 0.125rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
}

.task-drawer__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
}

.task-drawer__save-row {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 1.25rem;
}

.task-drawer input:disabled,
.task-drawer textarea:disabled,
.task-drawer select:disabled {
  cursor: default;
  opacity: 0.72;
}

.task-drawer.is-saving::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  background: hsl(var(--background) / 0.08);
  pointer-events: none;
}

.drawer-checklist {
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--border));
}

.drawer-checklist__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.drawer-checklist__head h3 { font-size: 0.9375rem; }

.drawer-checklist__head p {
  margin-top: 0.125rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
}

.drawer-checklist__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-checklist__empty {
  padding: 1rem;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  text-align: center;
}

.drawer-checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.drawer-checklist__item > input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
}

.drawer-checklist__title {
  width: 100%;
  min-width: 0;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  font-size: 0.75rem;
}

.drawer-checklist__title:focus {
  outline: 1px solid hsl(var(--ring));
  background: hsl(var(--background));
}

.drawer-checklist__item.is-done .drawer-checklist__title {
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
}

.drawer-checklist__controls { display: flex; gap: 0.125rem; }

.drawer-checklist__controls button {
  display: grid;
  width: 1.625rem;
  height: 1.625rem;
  place-items: center;
  border-radius: 0.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.drawer-checklist__controls button:hover:not(:disabled) {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.drawer-checklist__controls button:disabled { opacity: 0.25; cursor: default; }

.drawer-checklist__create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.drawer-checklist__create .input { font-size: 0.75rem; }

.task-drawer__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
}

.task-drawer__delete {
  border-color: hsl(var(--destructive) / 0.45);
  color: hsl(var(--destructive));
}

@media (max-width: 600px) {
  .task-drawer { width: 100vw; }
  .task-drawer__head { padding: 1rem 1.125rem; }
  .task-drawer__body { padding: 1rem 1.125rem 1.5rem; }
  .task-drawer__grid { grid-template-columns: 1fr; gap: 0; }
  .task-drawer__meta { flex-direction: column; gap: 0.125rem; }
}

/* ── Drawer: documentos ────────────────────────────────── */
.drawer-docs,
.drawer-comments {
  border-top: 1px solid hsl(var(--border));
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}

.drawer-docs__list,
.drawer-comments__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drawer-docs__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--surface));
}

.drawer-docs__info { flex: 1; min-width: 0; }

.drawer-docs__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  overflow-wrap: anywhere;
}

.drawer-docs__name:hover { color: hsl(var(--primary)); text-decoration: underline; }

.drawer-docs__meta {
  display: block;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.125rem;
}

.drawer-docs__badge {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.16);
  color: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 600;
}

.drawer-docs__remove {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1;
}

.drawer-docs__remove:hover {
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

.drawer-docs__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.drawer-docs__upload { cursor: pointer; }
.drawer-docs__upload .btn { pointer-events: none; }

/* O input some, mas o foco por teclado precisa continuar visível. */
.drawer-docs__upload:focus-within .btn {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.drawer-docs__link {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 14rem;
}

.drawer-docs__link .input { flex: 1; padding: 0.4375rem 0.625rem; font-size: 0.8125rem; }

.drawer-docs__error {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: hsl(var(--destructive));
}

.drawer-docs__error:empty { display: none; }

/* ── Drawer: comentários ───────────────────────────────── */
.drawer-comments__item {
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  border-left: 2px solid hsl(var(--border));
  background: hsl(var(--surface));
}

/* Comentário que o cliente enxerga fica marcado: quem escreve precisa
   ver de relance o que saiu da conversa interna. */
.drawer-comments__item.is-public { border-left-color: hsl(var(--primary)); }

.drawer-comments__block { flex: 1; min-width: 0; }

.drawer-comments__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.drawer-comments__tag {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  padding: 0.0625rem 0.4375rem;
}

.is-public .drawer-comments__tag {
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary));
}

.drawer-comments__body {
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.drawer-comments__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.375rem;
}

.drawer-comments__actions button {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.drawer-comments__actions button:hover { color: hsl(var(--primary)); }

.drawer-comments__create textarea { resize: vertical; }

.drawer-comments__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ── Drawer: concluir e reabrir ────────────────────────── */
.task-drawer__save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.task-drawer__done,
.task-drawer__reopen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-drawer__reopen .input {
  padding: 0.4375rem 0.625rem;
  font-size: 0.8125rem;
  max-width: 12rem;
}

/* ── Arrasto em andamento ──────────────────────────────── */
/* Enquanto um card está sendo movido, nada na página pode ser
   selecionado: o ponteiro passa por cima de títulos de coluna e de
   outros cards, e sem isto o navegador vai grifando tudo no caminho. */
body.is-dragging-board,
body.is-dragging-board * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.is-dragging-board {
  cursor: grabbing;
}

/* ── Tela de etapas ────────────────────────────────────── */
/* Escolha única entre as etapas, então o controle é redondo como um
   rádio em vez de um botão com rótulo repetido linha a linha. */
.stage-flag {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1.5px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--primary-foreground));
  font-size: 0.75rem;
  line-height: 1;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.stage-flag:not(:disabled):hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.15);
}

button.stage-flag:disabled { opacity: 0.4; cursor: not-allowed; }

.stage-flag.is-on {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
}

.stage-flag.is-inline {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.625rem;
  vertical-align: -0.2em;
}

.stage-remove {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.stage-remove__move {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.stage-remove__move strong { color: hsl(var(--foreground)); font-weight: 600; }

.stage-remove .input {
  width: auto;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
}

.stage-remove__button { color: hsl(var(--destructive)); }
.stage-remove__button:not(:disabled):hover { background: hsl(var(--destructive) / 0.1); }

/* Nova tentativa depois de falha de envio. Fica dentro da mensagem de
   erro porque só existe enquanto ela existir. */
.drawer-docs__retry {
  margin-left: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: underline;
}

.drawer-docs__retry:hover { opacity: 0.85; }

/* ── Pipeline no formulário de criação ─────────────────── */
.pipeline-draft {
  list-style: none;
  counter-reset: etapa;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pipeline-draft__row {
  counter-increment: etapa;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.pipeline-draft__row::before {
  content: counter(etapa);
  flex-shrink: 0;
  width: 1.5rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  text-align: right;
}

.pipeline-draft__row .input {
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
}

/* O rádio é escondido e o rótulo vira o alvo, para o controle ficar
   igual ao da tela de etapas. O foco por teclado continua visível. */
.pipeline-draft__terminal {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 1.5px solid hsl(var(--border));
  color: transparent;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pipeline-draft__terminal input { position: absolute; opacity: 0; pointer-events: none; }

.pipeline-draft__terminal:hover { border-color: hsl(var(--primary)); }

.pipeline-draft__terminal:has(input:checked) {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.pipeline-draft__terminal:has(input:focus-visible) {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ── Central de Documentos ─────────────────────────────── */
.docs-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 56rem) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ── Árvore ── */
.docs-tree {
  position: sticky;
  top: 1.5rem;
  padding: 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

@media (max-width: 56rem) {
  .docs-tree { position: static; }
}

.docs-tree__empty {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.docs-tree__folder,
.docs-tree__child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.docs-tree__folder { font-weight: 600; }

.docs-tree__folder:hover,
.docs-tree__child:hover { background: hsl(var(--secondary)); }

.docs-tree__folder.is-open {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.docs-tree__name { overflow-wrap: anywhere; }

.docs-tree__count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

.docs-tree__children {
  display: flex;
  flex-direction: column;
  margin: 0.125rem 0 0.375rem 0.625rem;
  padding-left: 0.625rem;
  border-left: 1px solid hsl(var(--border));
}

.docs-tree__child { font-size: 0.8125rem; }

.docs-tree__child.is-on { color: hsl(var(--primary)); font-weight: 600; }

/* ── Conteúdo ── */
.docs-main { min-width: 0; }

.docs-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.docs-crumb a { color: inherit; text-decoration: none; }
.docs-crumb a:hover { color: hsl(var(--primary)); }
.docs-crumb strong { color: hsl(var(--foreground)); font-weight: 600; }

.docs-filters,
.docs-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.docs-filters__field,
.docs-upload__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 9rem;
}

.docs-filters__field > span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.docs-filters .input,
.docs-upload .input {
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
}

.docs-upload__field { flex: 1 1 18rem; }

.docs-upload__blocked { margin: 0 0 1rem; }

/* ── Linhas ── */
.docs-file {
  color: hsl(var(--foreground));
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.docs-file:hover { color: hsl(var(--primary)); text-decoration: underline; }

.docs-file__meta {
  display: block;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.badge--team {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

.badge--client {
  background: hsl(210 40% 55% / 0.18);
  color: hsl(210 60% 72%);
}

.badge--muted {
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
}

.docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
}

.docs-actions form { display: contents; }

.btn--danger { color: hsl(var(--destructive)); }

.btn--danger:hover {
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

.docs-move { position: relative; }

.docs-move > summary {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border-radius: calc(var(--radius) - 0.125rem);
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  list-style: none;
}

.docs-move > summary::-webkit-details-marker { display: none; }
.docs-move > summary:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

.docs-move[open] > summary { color: hsl(var(--primary)); }

.docs-move > form {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.375rem;
}

.docs-move .input {
  padding: 0.3125rem 0.5rem;
  font-size: 0.8125rem;
  max-width: 12rem;
}

/* ── Ações da linha de cliente ─────────────────────────── */
.client-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}

.client-edit { width: 100%; }

.client-edit > summary {
  display: inline-flex;
  padding: 0.3125rem 0.625rem;
  border-radius: calc(var(--radius) - 0.125rem);
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  list-style: none;
}

.client-edit > summary::-webkit-details-marker { display: none; }
.client-edit > summary:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.client-edit[open] > summary { color: hsl(var(--primary)); }

.client-edit > form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.875rem;
  min-width: 16rem;
  text-align: left;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
}

.client-edit .field__label { margin-top: 0.375rem; }
.client-edit .field__label:first-of-type { margin-top: 0; }
.client-edit .input { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
.client-edit .btn { margin-top: 0.625rem; align-self: flex-start; }

/* ── Pular para o conteúdo ─────────────────────────────── */
/* Fica fora da tela até receber foco. É o primeiro elemento tabulável da
   página, para quem navega por teclado não percorrer a barra lateral
   inteira em toda tela. */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 200;
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus-visible {
  top: 0.75rem;
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* O alvo recebe foco por programa; a moldura seria ruído visual. */
.content:focus { outline: none; }