/* ════════════════════════════════════════════════════════════════
   Transparência — Polish v20
   Camada final de elevação profissional + dinamismo + responsividade.
   Carregada por último: refina (não substitui) o design existente.
   - Tipografia profissional (render suave, numerais tabulares)
   - Micro-interações (hover/lift, press, entrada animada)
   - Grelha de Acesso Rápido (quick actions) por ícones
   - Refinamentos responsivos (tablet / telemóvel / toque)
   - Respeita prefers-reduced-motion
════════════════════════════════════════════════════════════════ */

/* ── 1. TIPOGRAFIA & RENDER ──────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1, h2, h3, .view-title, .widget-title, .kpi-value, .stat-value {
  letter-spacing: -0.012em;
}
/* Numerais tabulares — valores monetários e métricas alinham na vertical */
.stat-value, .kpi-value, .valor-entrada, .valor-saida,
td .valor, .w-count, .info-val, .ic-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 2. MICRO-INTERAÇÕES ─────────────────────────────────────── */
.stat-card, .kpi-card, .widget, .qa-btn, .btn,
.tab-btn, .info-chip {
  transition: transform .16s cubic-bezier(.34,1.2,.64,1),
              box-shadow .2s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease;
}
/* Cards clicáveis ganham elevação no hover (apenas dispositivos com rato) */
@media (hover: hover) and (pointer: fine) {
  .stat-card[onclick]:hover, .kpi-card[onclick]:hover,
  .widget[onclick]:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px -10px rgba(15, 42, 80, .28);
  }
  .stat-card[onclick], .kpi-card[onclick], .widget[onclick] { cursor: pointer; }
}
/* Feedback de toque/clique */
.btn:active, .qa-btn:active, .stat-card[onclick]:active,
.kpi-card[onclick]:active { transform: translateY(0) scale(.985); }

/* Realce de foco acessível e consistente */
.btn:focus-visible, .qa-btn:focus-visible, .tab-btn:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary, #0d4279);
  outline-offset: 2px;
  border-radius: var(--r-sm, 6px);
}

/* ── 3. ENTRADA ANIMADA DAS VISTAS ───────────────────────────── */
/* A entrada do próprio .view-in usa @keyframes viewIn de app.css
   (token --t-slow/--ease-out) — fica como única fonte, sem redefinir
   aqui (evita 2 animações concorrentes na mesma classe). tpFadeUp
   mantém-se só para o escalonamento de .stats-grid/.kpi-grid abaixo,
   que app.css não cobre (só cobre .stat-card/.hier-card/etc., não
   .kpi-card). */
@keyframes tpFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Escalonamento subtil dos cards de estatística/KPI */
.stats-grid > *, .kpi-grid > * { animation: tpFadeUp var(--t-slow) var(--ease-out) both; }
.stats-grid > *:nth-child(2), .kpi-grid > *:nth-child(2) { animation-delay: .04s; }
.stats-grid > *:nth-child(3), .kpi-grid > *:nth-child(3) { animation-delay: .08s; }
.stats-grid > *:nth-child(4), .kpi-grid > *:nth-child(4) { animation-delay: .12s; }
.stats-grid > *:nth-child(5) { animation-delay: .16s; }
.stats-grid > *:nth-child(6) { animation-delay: .20s; }

/* ── 4. GRELHA DE ACESSO RÁPIDO (quick actions) ──────────────── */
.qa-section { margin: 4px 0 18px; }
.qa-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted, #64748b); font-weight: 700; margin: 0 2px 10px;
}
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.qa-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 10px; min-height: 92px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-lg, 14px);
  cursor: pointer; text-align: center; position: relative;
  color: var(--text, #0f172a); font-family: inherit;
  box-shadow: 0 1px 2px rgba(15,42,80,.04);
}
@media (hover: hover) and (pointer: fine) {
  .qa-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -12px rgba(15,42,80,.3);
    border-color: color-mix(in srgb, var(--primary, #0d4279) 40%, var(--border, #e2e8f0));
  }
  .qa-btn:hover .qa-ico { transform: scale(1.08); }
}
.qa-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
  background: var(--primary-lt, #e8f0fb);
  transition: transform .18s cubic-bezier(.34,1.4,.64,1);
}
.qa-label { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.qa-badge {
  position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px; background: var(--red, #dc2626); color: #fff;
  font-size: .64rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--surface, #fff);
}

/* ── 5. GRÁFICOS ─────────────────────────────────────────────── */
.chart-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-lg, 14px);
  padding: 16px;
}
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { max-width: 100%; }

/* ── 6. REFINAMENTOS RESPONSIVOS ─────────────────────────────── */
/* Tablet (≤ 900px) — colapsa grelhas largas e ajusta layout */
@media (max-width: 900px) {
  .kpi-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  /* Chat — sidebar e painel passam a coluna única */
  .chat-grid, [style*="grid-template-columns:240px 1fr"] {
    display: block !important;
  }
}
/* Telemóvel (≤ 640px) — coluna única, alvos de toque ≥ 44px */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .kpi-grid   { grid-template-columns: 1fr !important; }
  .qa-grid    { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .qa-btn     { min-height: 88px; padding: 12px 6px; }
  .qa-ico     { width: 40px; height: 40px; font-size: 1.25rem; }
  /* Alvos de toque ≥ 44px (recomendação WCAG/AAA) */
  .btn, .tab-btn, .btn-icon, button { min-height: 44px; }
  .btn-sm, .btn-icon-sm { min-height: 36px; }
  /* Tabelas largas — scroll horizontal suave */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* Modais — ocupam quase toda a tela em mobile, com scroll interno */
  .modal-content, .drawer-content {
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  /* Cabeçalhos de vista empilham ação por baixo do título */
  .view-header, .view-header-row { flex-wrap: wrap !important; gap: 10px !important; }
  .view-header > *, .view-header-row > * { min-width: 0; }
  /* Form grids viram coluna única em mobile */
  .form-grid, .form-grid-2, .form-grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* Widget headers e tabs com quebra natural */
  .widget-header { flex-wrap: wrap; gap: 8px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
  /* Texto principal não fica colado às bordas */
  .view-in { padding-left: 12px; padding-right: 12px; }
  /* Sidebar de chat fica em cima da conversa em mobile */
  [style*="grid-template-columns:240px 1fr"] { display: block !important; }
  [style*="grid-template-columns:240px 1fr"] > div:first-child {
    max-height: 200px; overflow-y: auto; margin-bottom: 10px;
  }
}
/* Smartphone pequeno (≤ 380px) */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .qa-grid    { grid-template-columns: repeat(2, 1fr); }
  .view-in    { padding-left: 8px; padding-right: 8px; }
}
/* Sem hover em ecrãs táteis: remove "tooltips por hover" e dependências */
@media (hover: none) {
  .stat-card[onclick]:active, .kpi-card[onclick]:active, .qa-btn:active {
    transform: scale(.97);
  }
}

/* ── 7. POLIMENTO DE TABELAS & BOTÕES ────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  tbody tr { transition: background-color .12s ease; }
  tbody tr:hover { background: color-mix(in srgb, var(--primary, #0d4279) 4%, transparent); }
}
.btn { font-weight: 600; }

/* ── 8. ACESSIBILIDADE — movimento reduzido ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .view-in, .stats-grid > *, .kpi-grid > * { animation: none !important; }
}