/* ============================================================================
   public/css/cliente.css
   ----------------------------------------------------------------------------
   Estilos da página de Clientes (cliente.html) e da Ficha do Cliente.
   Complementa base.css + theme-dark.css + Bootstrap 5.

   Convenções:
     • Classes prefixadas .cliente-XXX para não chocar com nomes globais.
     • Cores em hexadecimal directo (sem var() para esta camada).
     • Cada regra tem um comentário curto a explicar a sua razão de ser.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. GRELHA DE KPIs (cartões de estatísticas no topo da listagem)
   --------------------------------------------------------------------------- */

/* Contentor: cartões que se ajustam à largura disponível.
   auto-fit + minmax permite 4 cartões em desktop, 2 em tablet, 1 em mobile. */
.cliente-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Cartão individual: caixa branca com sombra discreta. */
.cliente-kpi {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* Efeito hover: sobe ligeiramente e ganha sombra mais profunda. */
.cliente-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

/* Ícone redondo do cartão (gradiente azul por defeito). */
.cliente-kpi .icone {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: #ffffff;
  background: linear-gradient(135deg, #2691d1, #125f96);
  flex-shrink: 0;
}

/* Rótulo do KPI (texto pequeno em maiúsculas). */
.cliente-kpi .rotulo {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #334155;
}

/* Valor principal (número grande). */
.cliente-kpi .valor {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  margin-top: 2px;
}

/* Subtítulo opcional (ex.: "X dom. · Y com. · Z inst."). */
.cliente-kpi .subtitulo {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 3px;
}

/* Variantes de cor por categoria do KPI.
   Cada classe modifica apenas a cor do ícone. */
.cliente-kpi.kpi-activos    .icone { background: linear-gradient(135deg, #10b981, #059669); }  /* verde */
.cliente-kpi.kpi-suspensos  .icone { background: linear-gradient(135deg, #f59e0b, #d97706); }  /* âmbar */
.cliente-kpi.kpi-cancelados .icone { background: linear-gradient(135deg, #94a3b8, #64748b); }  /* cinza */
.cliente-kpi.kpi-com        .icone { background: linear-gradient(135deg, #19c0d6, #2691d1); }  /* ciano */
.cliente-kpi.kpi-sem        .icone { background: linear-gradient(135deg, #f59e0b, #dc2626); }  /* âmbar→vermelho */
.cliente-kpi.kpi-divida     .icone { background: linear-gradient(135deg, #ef4444, #b91c1c); }  /* vermelho */
.cliente-kpi.kpi-cortados   .icone { background: linear-gradient(135deg, #dc2626, #7f1d1d); }  /* vermelho escuro */


/* ---------------------------------------------------------------------------
   2. BADGES DE ESTADO (na tabela de clientes)
   --------------------------------------------------------------------------- */

/* Badge base: pequena etiqueta colorida em redondinho. */
.cliente-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Variantes por estado do cliente. */
.cliente-estado.estado-activo     { background: #dcfce7; color: #166534; }  /* verde */
.cliente-estado.estado-suspenso   { background: #fef3c7; color: #92400e; }  /* âmbar */
.cliente-estado.estado-cancelado  { background: #f1f5f9; color: #475569; }  /* cinza */
.cliente-estado.estado-em-divida  { background: #fee2e2; color: #991b1b; }  /* vermelho */


/* ---------------------------------------------------------------------------
   3. ETIQUETA DO TIPO DE CLIENTE (doméstico / comercial / institucional)
   --------------------------------------------------------------------------- */

/* Etiqueta arredondada que aparece na coluna "Tipo" da tabela. */
.cliente-tipo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  text-transform: capitalize;
}

/* Variantes por tipo de cliente. */
.cliente-tipo.tipo-domestico     { background: #e0f2fe; color: #075985; }  /* azul claro */
.cliente-tipo.tipo-comercial     { background: #f3e8ff; color: #6b21a8; }  /* roxo claro */
.cliente-tipo.tipo-institucional { background: #fef9c3; color: #854d0e; }  /* amarelo claro */


/* ---------------------------------------------------------------------------
   4. MARCADOR DE LINHA SEM CONTADOR
   --------------------------------------------------------------------------- */

/* Linhas onde o cliente ainda não tem contador associado ganham fundo âmbar
   muito ligeiro para serem rapidamente identificáveis na tabela. */
.cliente-linha-sem-contador {
  background: rgba(245, 158, 11, 0.04);
}


/* ---------------------------------------------------------------------------
   5. FICHA DO CLIENTE (modal extenso)
   --------------------------------------------------------------------------- */

/* Título da ficha: ícone + nome do cliente em negrito. */
.ficha-cliente-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
}

/* Cada campo "rótulo + valor" dentro da ficha. */
.ficha-cliente-campo {
  margin-bottom: 0.5rem;
}

/* Rótulo do campo (texto pequeno cinza por cima do valor). */
.ficha-cliente-campo .rotulo {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Valor do campo (negrito para destacar). */
.ficha-cliente-campo .valor {
  font-weight: 700;
  color: #0f172a;
}


/* ---------------------------------------------------------------------------
   6. DARK MODE (sobrepõe cores quando data-theme="dark" está no <html>)
   --------------------------------------------------------------------------- */

/* Cartões de KPI: fundo escuro e bordas suaves. */
html[data-theme="dark"] .cliente-kpi {
  background: #131c33;
  border-color: rgba(255, 255, 255, 0.10);
  color: #e2e8f0;
}

/* Texto interno em tons claros no tema escuro. */
html[data-theme="dark"] .cliente-kpi .rotulo    { color: #cbd5e1; }
html[data-theme="dark"] .cliente-kpi .valor     { color: #ffffff; }
html[data-theme="dark"] .cliente-kpi .subtitulo { color: #94a3b8; }

/* Badge cancelado tem contraste especial no tema escuro. */
html[data-theme="dark"] .cliente-estado.estado-cancelado {
  background: rgba(148, 163, 184, 0.20);
  color: #cbd5e1;
}

/* Ficha do cliente: rótulos e valores no tema escuro. */
html[data-theme="dark"] .ficha-cliente-campo .rotulo { color: #94a3b8; }
html[data-theme="dark"] .ficha-cliente-campo .valor  { color: #f8fafc; }