/* ── Timesheets Module ─────────────────────────────────────────────────────── */

/* Cores semânticas de timesheets — mais suaves que as variáveis globais */
:root {
  --ts-cor-faturavel: #4e87c7;   /* azul faturável */
  --ts-cor-nf:        #c87830;   /* laranja não faturável */
}

/* ── Tabs (shared: Timesheets + Tarefas + Planeamento) ────────────── */
.ts-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--g-200, #E5E6EA);
  margin-bottom: 22px;
}

.ts-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 4px 12px;
  margin-right: 20px;
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--g-500, #6E7178);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.ts-tab-btn:hover   { color: var(--red, #D81F2A); }
.ts-tab-btn.ativo   {
  color: var(--red, #D81F2A);
  border-bottom-color: var(--red, #D81F2A);
  font-weight: 600;
}

/* ── KPI Strip — faixa horizontal num único card ──────────────────── */
.ts-cards {
  display: flex;
  background: var(--white, #fff);
  border: 1px solid var(--g-200, #E5E6EA);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-1);
  margin-bottom: 20px;
  overflow: hidden;
}

.ts-card {
  flex: 1;
  min-width: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid var(--g-200, #E5E6EA);
  background: transparent;
}

.ts-card:last-child { border-right: none; }

.ts-card-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--g-500, #6E7178);
  min-height: 26px;
  display: flex;
  align-items: flex-start;
}

.ts-card-valor {
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g-900, #1A1C20);
  line-height: 1.05;
}

.ts-card-sub {
  font-family: var(--f-data, 'Open Sans', sans-serif);
  font-size: 11.5px;
  color: var(--g-500, #6E7178);
  margin-top: 2px;
}

.ts-card.alerta   .ts-card-valor { color: var(--red,   #D81F2A); }
.ts-card.aviso    .ts-card-valor { color: var(--amber, #E8920C); }
.ts-card.positivo .ts-card-valor { color: var(--green, #1E9E57); }

/* ── Barra de progresso de utilização ────────────────────────────── */
.ts-progress-bar-wrap {
  height: 4px;
  background: var(--g-100, #EFF0F3);
  border-radius: 99px;
  margin: 0 0 20px;
  overflow: hidden;
}

.ts-progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
  background: var(--green, #1E9E57);
}

.ts-progress-bar.aviso   { background: var(--amber, #E8920C); }
.ts-progress-bar.alerta  { background: var(--red,   #D81F2A); }
.ts-progress-bar.positivo{ background: var(--green, #1E9E57); }

/* Dashboard two-column grid */
.ts-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

@media (max-width: 800px) {
  .ts-dashboard-grid { grid-template-columns: 1fr; }
}

/* ── Dashboard panels (Horas em Falta + Por Aprovar) ─────────────────── */
.ts-panel {
  background: var(--white, #fff);
  border: 1px solid var(--g-200, #E5E6EA);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.ts-panel-header {
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid var(--g-100, #EFF0F3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--g-700, #474747);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-ui, 'Poppins', sans-serif);
}

.ts-panel-header .badge {
  background: var(--red, #D81F2A);
  color: #fff;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--f-data, 'Open Sans', sans-serif);
  min-width: 20px;
  text-align: center;
}

.ts-panel-header .badge.alerta { background: var(--red,   #D81F2A); }
.ts-panel-header .badge.aviso  { background: var(--amber, #E8920C); }
.ts-panel-header .badge.positivo { background: var(--green, #1E9E57); }

.ts-panel-body {
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
}

.ts-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 13.5px;
  border-top: 1px solid var(--g-100, #EFF0F3);
  gap: 8px;
  font-family: var(--f-ui, 'Poppins', sans-serif);
}

.ts-panel-row:first-child { border-top: none; }
.ts-panel-row:hover { background: var(--g-50, #F6F7F9); }

.ts-panel-nome {
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--g-900, #1A1C20);
}

.ts-panel-info {
  font-size: 12.5px;
  color: var(--g-500, #6E7178);
  white-space: nowrap;
  font-family: var(--f-data, 'Open Sans', sans-serif);
}

.ts-panel-vazio {
  padding: 40px 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--g-500, #6E7178);
  font-family: var(--f-data, 'Open Sans', sans-serif);
}

/* ── Monthly evolution matrix ─────────────────────────────────────────────── */

.ts-matrix-section {
  margin-bottom: 1.75rem;
}

.ts-matrix-titulo {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cor-texto-sec);
  margin-bottom: .75rem;
}
/* Título + pesquisa rápida na mesma linha */
.ts-matrix-titulo-com-pesquisa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ts-matrix-pesquisa {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: .8rem; padding: 5px 10px; width: 220px; max-width: 45%;
  border: 1px solid var(--cor-borda); border-radius: 8px;
  background: var(--cor-superficie); color: var(--cor-texto, inherit);
}

.ts-matrix-wrap {
  overflow-x: auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.ts-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  white-space: nowrap;
}

.ts-matrix th,
.ts-matrix td {
  padding: .45rem .7rem;
  border: 1px solid var(--cor-borda);
  text-align: right;
}

.ts-matrix th {
  background: var(--cor-fundo);
  font-weight: 600;
  color: var(--cor-texto-sec);
  text-align: center;
  position: sticky;
  top: 0;
}

.ts-matrix td:first-child,
.ts-matrix th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--cor-superficie);
  min-width: 160px;
  /* Nomes de cliente/projeto longos quebram linha em vez de alargar a tabela */
  width: 300px;      /* células de tabela ignoram max-width sozinho */
  max-width: 300px;
  white-space: normal;
  line-height: 1.3;
  font-weight: 500;
  z-index: 1;
}

.ts-matrix th:first-child {
  background: var(--cor-fundo);
  z-index: 2;
}

.ts-matrix .ts-matrix-total {
  font-weight: 700;
  background: var(--cor-fundo);
}

/* Heatmap coloring for cells (via inline style --heat: 0..1) */
.ts-matrix td.ts-heat {
  color: var(--cor-texto);
}
.ts-matrix td.ts-heat-low  { background: color-mix(in srgb, var(--cor-primaria) 12%, var(--cor-superficie)); }
.ts-matrix td.ts-heat-mid  { background: color-mix(in srgb, var(--cor-primaria) 30%, var(--cor-superficie)); }
.ts-matrix td.ts-heat-high { background: color-mix(in srgb, var(--cor-primaria) 55%, var(--cor-superficie)); color: #fff; }

/* Fallback for browsers without color-mix */
[data-tema="escuro"] .ts-matrix td.ts-heat-low  { background: rgba(99,179,237,.15); }
[data-tema="escuro"] .ts-matrix td.ts-heat-mid  { background: rgba(99,179,237,.35); }
[data-tema="escuro"] .ts-matrix td.ts-heat-high { background: rgba(99,179,237,.65); color: #fff; }

[data-tema="claro"] .ts-matrix td.ts-heat-low  { background: rgba(66,153,225,.1); }
[data-tema="claro"] .ts-matrix td.ts-heat-mid  { background: rgba(66,153,225,.3); }
[data-tema="claro"] .ts-matrix td.ts-heat-high { background: rgba(66,153,225,.6); color: #fff; }

.ts-matrix td.ts-zero { color: var(--cor-borda); }

/* ── Dashboard toolbar (month picker + last import) — sem card ────────── */

.ts-dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.ts-dash-mes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-dash-mes input[type="month"] {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--g-200, #E5E6EA);
  border-radius: var(--r-sm, 8px);
  background: var(--g-50, #F6F7F9);
  color: var(--g-900, #1A1C20);
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color .15s;
}

.ts-dash-mes input[type="month"]:focus {
  border-color: var(--red, #D81F2A);
  box-shadow: 0 0 0 3px rgba(216,31,42,.1);
}

.ts-import-info {
  font-family: var(--f-data, 'Open Sans', sans-serif);
  font-size: 12px;
  color: var(--g-400, #9A9CA3);
}

/* ── Alertas de regras de registo ─────────────────────────────────────────── */

.ts-alertas-section {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.ts-alerta-bloco {
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
  overflow: hidden;
}

.ts-alerta-bloco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  font-size: .825rem;
  font-weight: 600;
}

.ts-alerta-bh .ts-alerta-bloco-header {
  background: color-mix(in srgb, #d69e2e 10%, var(--cor-superficie));
  border-bottom: 1px solid color-mix(in srgb, #d69e2e 25%, var(--cor-borda));
  color: #744210;
}
[data-tema="escuro"] .ts-alerta-bh .ts-alerta-bloco-header {
  background: rgba(214,158,46,.12);
  color: #fbd38d;
}

.ts-alerta-np .ts-alerta-bloco-header {
  background: color-mix(in srgb, #718096 10%, var(--cor-superficie));
  border-bottom: 1px solid color-mix(in srgb, #718096 25%, var(--cor-borda));
  color: var(--cor-texto);
}
[data-tema="escuro"] .ts-alerta-np .ts-alerta-bloco-header {
  background: rgba(113,128,150,.12);
}

.ts-alerta-sr .ts-alerta-bloco-header {
  background: color-mix(in srgb, #e53e3e 10%, var(--cor-superficie));
  border-bottom: 1px solid color-mix(in srgb, #e53e3e 25%, var(--cor-borda));
  color: #9b2c2c;
}
[data-tema="escuro"] .ts-alerta-sr .ts-alerta-bloco-header {
  background: rgba(229,62,62,.12);
  color: #feb2b2;
}

.ts-alerta-corpo {
  padding: .4rem 0;
  max-height: 260px;
  overflow-y: auto;
}

.ts-alerta-grupo {
  padding: .4rem .75rem .2rem;
  border-bottom: 1px solid var(--cor-borda);
}

.ts-alerta-grupo:last-child  { border-bottom: none; }
.ts-alerta-grupo[data-gid]:hover { background: var(--cor-fundo); }

.ts-alerta-grupo-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  margin-bottom: .25rem;
}

.ts-alerta-cnt {
  font-size: .75rem;
  color: var(--cor-texto-sec);
  margin-left: auto;
}

.ts-alerta-linha {
  display: flex;
  gap: .75rem;
  font-size: .78rem;
  padding: .2rem .5rem;
  border-radius: 4px;
}

.ts-alerta-linha:hover { background: var(--cor-fundo); }

.ts-alerta-linha-clicavel {
  cursor: pointer;
  transition: background .12s;
}
.ts-alerta-linha-clicavel:hover {
  background: color-mix(in srgb, #b45309 8%, var(--cor-superficie));
}

.ts-alerta-data   { color: var(--cor-texto-sec); min-width: 70px; }
.ts-alerta-pessoa { flex: 1; }
.ts-alerta-horas  { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cor-texto-sec); }

.ts-alerta-mais {
  font-size: .75rem;
  color: var(--cor-texto-sec);
  padding: .15rem .5rem .35rem;
  font-style: italic;
}

/* ── Painel "por submeter/aprovar" — split Open / Pending ────────────────── */
.ts-pend-split {
  display: flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .85rem;
}
/* Open = laranja-âmbar */
.ts-pend-open { color: #b45309; }
/* Pending Approval = azul */
.ts-pend-pend { color: var(--cor-primaria, #2563eb); }
/* Zero = mais discreto */
.ts-pend-zero { opacity: .4; font-weight: 400; }

/* Legenda em baixo do painel */
.ts-pend-legenda {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
  font-size: .72rem;
  color: var(--cor-texto-sec);
  border-top: 1px solid var(--borda);
  margin-top: 2px;
}
.ts-pend-open-dot::before { content: '●'; color: #b45309; margin-right: 2px; }
.ts-pend-pend-dot::before { content: '●'; color: var(--cor-primaria, #2563eb); margin-right: 2px; }

/* ── Matrix completion cells (verde / azul / laranja) ─────────────────────── */

.ts-matrix td.ts-cell-verde   { background: color-mix(in srgb, #38a169 18%, var(--cor-superficie)); }
.ts-matrix td.ts-cell-azul    { background: color-mix(in srgb, #3182ce 22%, var(--cor-superficie)); }
.ts-matrix td.ts-cell-laranja { background: color-mix(in srgb, #dd6b20 22%, var(--cor-superficie)); }

[data-tema="escuro"] .ts-matrix td.ts-cell-verde   { background: rgba(56,161,105,.22); }
[data-tema="escuro"] .ts-matrix td.ts-cell-azul    { background: rgba(49,130,206,.22); }
[data-tema="escuro"] .ts-matrix td.ts-cell-laranja { background: rgba(221,107,32,.28); }

[data-tema="claro"] .ts-matrix td.ts-cell-verde   { background: rgba(56,161,105,.18); }
[data-tema="claro"] .ts-matrix td.ts-cell-azul    { background: rgba(49,130,206,.18); }
[data-tema="claro"] .ts-matrix td.ts-cell-laranja { background: rgba(221,107,32,.20); }

/* ── Import tab ───────────────────────────────────────────────────────────── */

.ts-import-area {
  border: 2px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: 2.5rem;
  text-align: center;
  transition: border-color .2s, background .2s;
  cursor: pointer;
  margin-bottom: 1.25rem;
}

.ts-import-area.drag-over {
  border-color: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 6%, transparent);
}

[data-tema="escuro"] .ts-import-area.drag-over {
  background: rgba(99,179,237,.08);
}

.ts-import-icone {
  font-size: 2.5rem;
  margin-bottom: .5rem;
  opacity: .5;
}

.ts-import-texto {
  font-size: .9rem;
  color: var(--cor-texto-sec);
  margin-bottom: .75rem;
}

.ts-import-input { display: none; }

.ts-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.ts-preview-titulo {
  font-size: .875rem;
  font-weight: 600;
  color: var(--cor-texto);
}

.ts-preview-sub {
  font-size: .8rem;
  color: var(--cor-texto-sec);
}

/* Alert box for auto-create projects */
.ts-alert-criar {
  background: #fffbeb;
  border: 1px solid #f6e05e;
  border-left: 4px solid #d69e2e;
  border-radius: var(--raio);
  padding: .75rem 1rem;
  font-size: .855rem;
  margin-bottom: 1rem;
  color: #744210;
}

[data-tema="escuro"] .ts-alert-criar {
  background: #3d2e08;
  border-color: #b7791f;
  color: #fbd38d;
}

.ts-alert-criar ul { padding-left: 1.1rem; }
.ts-alert-criar li { margin-top: .2rem; }

.ts-import-acoes {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

/* ── Registos: barra de filtros (sem card — só flex row) ─────────── */

.ts-filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.ts-filtros select,
.ts-filtros input[type="month"] {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--g-200, #E5E6EA);
  border-radius: var(--r-sm, 8px);
  background: var(--g-50, #F6F7F9);
  color: var(--g-900, #1A1C20);
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color .15s;
}

.ts-filtros select:focus,
.ts-filtros input[type="month"]:focus {
  border-color: var(--red, #D81F2A);
  box-shadow: 0 0 0 3px rgba(216,31,42,.1);
}

.ts-filtros .ts-filtro-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-500, #6E7178);
  font-family: var(--f-ui, 'Poppins', sans-serif);
}

.ts-count {
  font-family: var(--f-data, 'Open Sans', sans-serif);
  font-size: 13px;
  color: var(--g-500, #6E7178);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Registos: tabela ──────────────────────────────────────────────── */

.ts-tabela-wrap {
  overflow-x: auto;
  background: var(--white, #fff);
  border: 1px solid var(--g-200, #E5E6EA);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-1);
}

.ts-tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 13.5px;
}

.ts-tabela th {
  background: transparent;
  padding: 16px 16px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--g-400, #9A9CA3);
  border-bottom: 1px solid var(--g-100, #EFF0F3);
  white-space: nowrap;
}

.ts-tabela td {
  padding: 12px 16px;
  border-top: 1px solid var(--g-100, #EFF0F3);
  vertical-align: middle;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g-900, #1A1C20);
}

.ts-tabela tbody tr:first-child td { border-top: none; }
.ts-tabela tr:hover td { background: var(--g-50, #F6F7F9); }

.ts-tabela .ts-horas {
  font-weight: 700;
  text-align: right;
  font-family: var(--f-data, 'Open Sans', sans-serif);
  font-variant-numeric: tabular-nums;
}

/* Sortable column headers */
.ts-tabela th.ts-th-ord {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.ts-tabela th.ts-th-ord:hover { color: var(--g-700, #3A3C42); }
.ts-tabela th.ts-th-ord.on    { color: var(--red, #D81F2A); }

/* Approval status badge */
.ts-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--f-ui, 'Poppins', sans-serif);
}

.ts-badge.aprovado  { background: var(--green-soft, #E4F5EC); color: #157a41; }
.ts-badge.pendente  { background: var(--amber-soft, #FCF0DC); color: #9a6207; }
.ts-badge.rejeitado { background: var(--red-soft,   #FCE9EA); color: var(--red-deep, #B0151F); }
.ts-badge.aberto    { background: var(--g-100,      #EFF0F3); color: var(--g-600, #55585F); }

/* Link badge (pessoa/projeto resolved) */
.ts-linked   { color: var(--red, #D81F2A); font-weight: 500; }
.ts-unlinked { color: var(--g-500, #6E7178); font-style: italic; }

/* Empty state */
.ts-vazio {
  padding: 48px 24px;
  text-align: center;
  color: var(--g-500, #6E7178);
  font-size: 13.5px;
  font-family: var(--f-data, 'Open Sans', sans-serif);
}

/* ── Bulk selection ──────────────────────────────────────────────── */

.ts-bulk-bar {
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--red-soft, #FCE9EA);
  border: 1px solid rgba(216,31,42,.2);
  border-radius: var(--r-md, 12px);
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--f-ui, 'Poppins', sans-serif);
  color: var(--red-deep, #B0151F);
}

.ts-bulk-remover {
  background: var(--red, #D81F2A);
  color: #fff;
  border: none;
  border-radius: 8px;
}
.ts-bulk-remover:hover { background: var(--red-deep, #B0151F); }

/* Coluna de checkbox */
.ts-chk-col {
  width: 36px;
  text-align: center;
  padding: 4px 6px !important;
}

/* Linha seleccionada */
tr.ts-row-selected td {
  background: var(--red-soft, #FCE9EA);
}
[data-tema="escuro"] tr.ts-row-selected td {
  background: color-mix(in srgb, var(--cor-primaria, #2563eb) 18%, var(--cor-superficie));
}

/* Loading overlay do modal de importação */
.ts-import-loader {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  z-index: 10;
}
[data-tema="escuro"] .ts-import-loader { background: rgba(30,30,30,0.85); }
.ts-import-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  color: var(--texto-principal);
}
.ts-import-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--borda);
  border-top-color: var(--cor-primaria, #2563eb);
  border-radius: 50%;
  animation: ts-spin 0.75s linear infinite;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }