/*
 * Identidade visual do ClickDia — verde petróleo e areia.
 *
 * Um arquivo só, carregado pela página pública E pelo painel, porque cor de
 * marca em dois lugares vira duas marcas: a primeira divergência aparece
 * quando alguém ajusta um tom num template e esquece do outro.
 *
 * A paleta saiu do azul #0d6efd do Bootstrap por um motivo concreto: ele é o
 * padrão de todo produto montado sobre Bootstrap, e era a maior parte do que
 * fazia a página parecer a de um concorrente do mesmo setor.
 *
 * O Bootstrap 5.3 NÃO monta `.btn-primary` a partir de `--bs-primary` — as
 * cores dos componentes são geradas no build e ficam fixas. Por isso aqui se
 * redefine tanto a variável global (para utilitários e o que a lê) quanto as
 * variáveis de cada componente. Mudar só `--bs-primary` deixaria os botões
 * azuis, e o resultado seria pior do que não ter mexido.
 */

:root {
  /* Tokens da marca. Alterar aqui muda a página pública e o painel juntos. */
  --cd-petroleo: #0f4c45;
  --cd-petroleo-escuro: #0a3631;
  --cd-tinta: #11221f;
  --cd-areia: #f2efe6;
  --cd-areia-fundo: #e9e4d5;
  --cd-papel: #fbfaf6;
  --cd-cobre: #b4702a;
  --cd-cobre-escuro: #8d5720;

  /* Texto de apoio. `--cd-legenda` é mais escuro do que a leitura visual
     pediria: no papel claro, um cinza mais leve não alcança 4.5:1. */
  --cd-texto-suave: #3c504c;
  --cd-legenda: #5a6b67;
  --cd-filete: #dad5c6;
  --cd-borda: #c9c2ae;

  --bs-primary: var(--cd-petroleo);
  --bs-primary-rgb: 15, 76, 69;
  --bs-link-color: var(--cd-petroleo);
  --bs-link-hover-color: var(--cd-petroleo-escuro);
  --bs-link-color-rgb: 15, 76, 69;
  --bs-border-color: var(--cd-borda);
  --bs-focus-ring-color: rgba(15, 76, 69, .25);
}

body {
  color: var(--cd-tinta);
}

/* ------------------------------------------------------------- botões --- */

.btn-primary {
  --bs-btn-bg: var(--cd-petroleo);
  --bs-btn-border-color: var(--cd-petroleo);
  --bs-btn-hover-bg: var(--cd-petroleo-escuro);
  --bs-btn-hover-border-color: var(--cd-petroleo-escuro);
  --bs-btn-active-bg: var(--cd-petroleo-escuro);
  --bs-btn-active-border-color: var(--cd-petroleo-escuro);
  --bs-btn-disabled-bg: var(--cd-petroleo);
  --bs-btn-disabled-border-color: var(--cd-petroleo);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--cd-petroleo);
  --bs-btn-border-color: var(--cd-petroleo);
  --bs-btn-hover-bg: var(--cd-petroleo);
  --bs-btn-hover-border-color: var(--cd-petroleo);
  --bs-btn-active-bg: var(--cd-petroleo);
  --bs-btn-active-border-color: var(--cd-petroleo);
  --bs-btn-disabled-color: var(--cd-petroleo);
  --bs-btn-disabled-border-color: var(--cd-petroleo);
}

.btn-link {
  --bs-btn-color: var(--cd-petroleo);
  --bs-btn-hover-color: var(--cd-petroleo-escuro);
}

/* Cantos retos são parte da identidade: o painel é um livro de registro, e a
   pílula arredondada puxa para o visual de aplicativo de consumo. */
.btn,
.form-control,
.form-select,
.card,
.alert,
.badge,
.dropdown-menu {
  border-radius: 5px;
}

/* --------------------------------------------------------- utilitários --- */

.text-primary {
  color: var(--cd-petroleo) !important;
}

.bg-primary {
  background-color: var(--cd-petroleo) !important;
}

.border-primary {
  border-color: var(--cd-petroleo) !important;
}

.text-bg-primary {
  background-color: var(--cd-petroleo) !important;
  color: #fff !important;
}

.link-primary {
  color: var(--cd-petroleo) !important;
}

/* O cinza padrão do Bootstrap sobre areia fica abaixo de 4.5:1 em texto
   pequeno, e o painel usa `text-muted` justamente em legenda. `text-secondary`
   é o mesmo caso na página pública, onde carrega parágrafo inteiro — por isso
   recebe o tom mais escuro dos dois. */
.text-muted {
  color: var(--cd-legenda) !important;
}

.text-secondary {
  color: var(--cd-texto-suave) !important;
}

/* `bg-white` passa a significar "superfície de papel", não branco puro. Os
   templates do painel já o usam para cartão e cabeçalho de tabela; redefinir
   aqui evita percorrer cinco arquivos e, principalmente, evita que o próximo
   `bg-white` escrito sem pensar volte a destoar do fundo areia. */
.bg-white {
  background-color: var(--cd-papel) !important;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: var(--cd-petroleo);
  box-shadow: 0 0 0 .2rem rgba(15, 76, 69, .2);
}

.form-check-input:checked {
  background-color: var(--cd-petroleo);
  border-color: var(--cd-petroleo);
}

/* ---------------------------------------------------- marca e navegação --- */

.navbar-brand {
  font-weight: 600;
  letter-spacing: -.03em;
}

/* A marca do ClickDia: um quadrado de cantos retos com o relógio dentro.
   Substitui o ícone solto, que era o mesmo `bi-clock-history` que qualquer
   sistema de ponto usa. */
.marca {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--cd-petroleo);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  vertical-align: -.35rem;
}

/* Régua pontilhada: o motivo que dá o tom de registro à identidade. Aparece no
   topo da página pública e no topo do painel. */
.regua {
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--cd-petroleo) 0 2px,
    transparent 2px 14px
  );
}

.navbar .nav-link.active {
  color: var(--cd-petroleo);
}