/* ============================================================================
   public/css/contador.css
   ----------------------------------------------------------------------------
   Estilos da página de Contadores (contador.html).
   Complementa base.css + theme-dark.css + Bootstrap 5.

   Convenções:
     • Selectores prefixados .contador-XXX para não chocar com nomes globais.
     • Hex directo (sem CSS variables).
     • Cada regra com comentário curto.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. BADGE DE ESTADO DO CONTADOR
   --------------------------------------------------------------------------- */

/* Base do badge: pílula colorida com texto em maiúsculas (mesma forma da
   badge de fatura e de cliente, para consistência visual). */
.contador-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Variantes por estado do contador. */
.contador-estado.estado-disponivel  { background: #dcfce7; color: #166534; }  /* verde — pronto a usar */
.contador-estado.estado-instalado   { background: #dbeafe; color: #1e40af; }  /* azul — em uso */
.contador-estado.estado-substituido { background: #fce7f3; color: #9d174d; }  /* rosa — já não em uso */
.contador-estado.estado-avariado    { background: #fef3c7; color: #92400e; }  /* âmbar — precisa de reparação */
.contador-estado.estado-removido    { background: #f1f5f9; color: #475569; }  /* cinza — arquivado */


/* ---------------------------------------------------------------------------
   2. DARK MODE
   --------------------------------------------------------------------------- */

/* No tema escuro o badge "removido" precisa de mais contraste para se ler. */
html[data-theme="dark"] .contador-estado.estado-removido {
  background: rgba(148, 163, 184, 0.20);
  color: #cbd5e1;
}


/* ---------------------------------------------------------------------------
   3. RETROCOMPAT — classes antigas .estado-contador.estado-X
   --------------------------------------------------------------------------- */

/* Mantidas enquanto houver páginas que ainda as usem. Em sessões futuras
   serão removidas depois de migrar todos os callers. */
.estado-contador {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.estado-contador.estado-disponivel  { background: #dcfce7; color: #166534; }
.estado-contador.estado-instalado   { background: #dbeafe; color: #1e40af; }
.estado-contador.estado-substituido { background: #fce7f3; color: #9d174d; }
.estado-contador.estado-avariado    { background: #fef3c7; color: #92400e; }
.estado-contador.estado-removido    { background: #f1f5f9; color: #475569; }