/* ╔══════════════════════════════════════╗
   ║ 🗂️ CONSART – Tarefas (UI + Tabelas)  ║
   ╚══════════════════════════════════════╝ */

/* ===== Cartões ===== */
.card{
  background:#fff;
  border:1px solid var(--c-input-bd);
  border-radius:var(--radius);
  padding:var(--c-space-6);
  box-shadow:0 1px 0 rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.6);
}
.card-title{
  font-weight:700;
  margin-bottom:var(--c-space-4);
  color:#0f172a;
}

/* ===== Tabs ===== */
.tabs{
  display:flex; gap:8px;
  border-bottom:1px solid var(--c-input-bd);
  padding-bottom:8px; margin-bottom:var(--c-space-4);
}
.tab{
  -webkit-appearance:none; appearance:none;
  background:#fff;
  border:1px solid var(--c-input-bd);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:8px 12px;
  cursor:pointer; font-weight:600;
}
.tab:hover{ background:var(--c-input-bg); }
.tab.active{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px var(--c-ring);
}

/* Panes */
.tabpane[hidden]{ display:none !important; }
.tabpane.active{ display:block; }

/* ===== Form nova tarefa ===== */
.new-task .row + .row{ margin-top:var(--c-space-3); }
label{ display:block; margin-bottom:6px; font-weight:600; color:#34495e; }
.actions .btn{ height:40px; }

/* ===== Tabelas =====
   Dica: mantenha dentro de .c-scroll.c-scroll--table (do theme) */
.tbl{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
  min-width:800px; /* para não “amassar” em telas estreitas */
}
.tbl thead th{
  position:sticky; top:0; z-index:1;
  background:#fff;
  border-bottom:1px solid var(--c-input-bd);
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
.tbl th, .tbl td{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tbl tbody tr:hover{ background:#f8fbff; }

/* Botões dentro da tabela */
.tbl td .btn{
  height:auto; padding:6px 10px;
  border-radius:6px;
}

/* ===== Responsivo ===== */
@media (max-width: 640px){
  .card{ padding: var(--c-space-4); }
  .tbl{ min-width:680px; }
}

/* Utilitários de largura para colunas em tabelas */
th.w-5,  td.w-5  { width: 5%;  }
th.w-10, td.w-10 { width: 10%; }
th.w-15, td.w-15 { width: 10%; }
th.w-20, td.w-20 { width: 25%; }
th.w-25, td.w-25 { width: 25%; }
th.w-30, td.w-30 { width: 60%; }
th.w-35, td.w-35 { width: 35%; }
th.w-40, td.w-40 { width: 40%; }
th.w-50, td.w-50 { width: 50%; }