/* =========================================================
   SWC PMO · timesheets.css
   Apontamento de Horas (Sprint E).
========================================================= */

.ts-topbar select {
  background: var(--swm-input, #0f1117);
  border: 1px solid var(--swm-border, #1a1d27);
  color: var(--swm-text, #e8eaf0);
  padding: 6px 10px; border-radius: 6px; font-size: 13px;
  margin-right: 8px;
}

.ts-tabs {
  display: flex; gap: 4px; padding: 0 28px;
  border-bottom: 1px solid var(--swm-border, #1a1d27);
}
.ts-tab {
  background: transparent; border: none; color: var(--swm-muted, #8892a4);
  padding: 10px 16px; cursor: pointer; font-size: 14px;
  border-bottom: 2px solid transparent;
}
.ts-tab:hover { color: var(--swm-text, #e8eaf0); }
.ts-tab.active {
  color: var(--swm-gold, #f59e0b);
  border-bottom-color: var(--swm-gold, #f59e0b);
}

.ts-body { padding: 20px 28px; }

.ts-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.kpi-card {
  background: var(--swm-card, #14171f);
  border: 1px solid var(--swm-border, #1a1d27);
  border-radius: 8px; padding: 14px 16px;
}
.kpi-card span {
  display: block; font-size: 11px; text-transform: uppercase;
  color: var(--swm-muted, #8892a4); letter-spacing: .4px; margin-bottom: 6px;
}
.kpi-card strong { font-size: 18px; }

.ts-section { margin-bottom: 28px; }
.ts-section h3 {
  font-size: 13px; text-transform: uppercase;
  color: var(--swm-muted, #8892a4); margin-bottom: 10px;
  letter-spacing: .6px;
}
.ts-section table { width: 100%; }
.ts-section .num { text-align: right; }
.ts-section .small { font-size: 11px; color: var(--swm-muted); }

.ts-empty {
  text-align: center; padding: 48px 24px;
  color: var(--swm-muted, #8892a4); font-size: 14px;
}

.ts-emp-pick {
  display: flex; gap: 16px; align-items: flex-end;
  margin-bottom: 16px;
}
.ts-emp-pick label {
  display: block; font-size: 12px; color: var(--swm-muted);
}
.ts-emp-pick select {
  display: block; min-width: 320px; padding: 8px 10px;
  background: var(--swm-input, #0f1117);
  border: 1px solid var(--swm-border, #1a1d27);
  border-radius: 6px; color: var(--swm-text, #e8eaf0);
  font-size: 13px; margin-top: 4px;
}
.ts-emp-pick .muted { font-size: 11px; padding-bottom: 10px; }
.ts-emp-pick code { background: rgba(245, 158, 11, .1); color: #f59e0b; padding: 1px 5px; border-radius: 3px; }

/* ── Badge RH ──────────────────────────────────── */
.ts-rh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px;
  font-weight: 700;
}
.ts-rh.ok   { background: rgba(52,211,153,.15);  color: #34d399; }
.ts-rh.warn { background: rgba(248,113,113,.15); color: #f87171; }
.ts-rh.nul  { background: rgba(148,163,184,.10); color: #94a3b8; }

/* ── Form do modal ─────────────────────────────── */
.ts-form { padding: 16px 20px; }
.ts-form .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ts-form label {
  display: block; margin-bottom: 12px; font-size: 12px;
  color: var(--swm-muted, #8892a4);
}
.ts-form input, .ts-form textarea, .ts-form select {
  display: block; width: 100%; padding: 8px 10px;
  background: var(--swm-input, #0f1117);
  border: 1px solid var(--swm-border, #1a1d27);
  border-radius: 6px; color: var(--swm-text, #e8eaf0);
  font-size: 13px; margin-top: 4px; font-family: inherit;
}
.ts-form .req { color: #f87171; }
.ts-form-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 12px;
}

.btn-link {
  background: transparent; border: none; color: var(--swm-gold, #f59e0b);
  cursor: pointer; font-size: 12px; padding: 0; text-decoration: underline;
}