/*
 * Identidade do Finance sobre o admin do Django.
 * As variáveis são as mesmas do landing.css, para o sistema e a página
 * pública serem visivelmente o mesmo produto.
 */

/*
 * Os três seletores são necessários: o Django declara as mesmas variáveis em
 * html[data-theme="light"] e ["dark"], que vencem :root por especificidade.
 * Sem eles, o tema claro volta ao azul padrão.
 */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --bode-roxo: #7c4dda;
  --bode-roxo-escuro: #6941a4;
  --bode-fundo: #280822;
  --bode-fundo-claro: #3a1132;
  --bode-roxo-claro: #a98ae8;
  --bode-verde: #2ecc71;
  --bode-vermelho: #e74c3c;

  --primary: var(--bode-roxo);
  --secondary: var(--bode-roxo);
  --accent: var(--bode-roxo);
  --link-fg: var(--bode-roxo-escuro);
  --link-hover-color: var(--bode-roxo);
  --link-selected-fg: var(--bode-roxo);

  /* O cabeçalho fica escuro nos dois temas: é onde a marca aparece. */
  --header-bg: var(--bode-fundo);
  --header-color: #f5f5f5;
  --header-branding-color: #ffffff;
  --header-link-color: #ffffff;

  --breadcrumbs-bg: var(--bode-fundo-claro);
  --breadcrumbs-fg: #cfc3e8;
  --breadcrumbs-link-fg: #ffffff;

  --default-button-bg: var(--bode-roxo);
  --default-button-hover-bg: var(--bode-roxo-escuro);
  --object-tools-bg: var(--bode-roxo-escuro);
  --object-tools-hover-bg: var(--bode-roxo);
}

@media (prefers-color-scheme: dark) {
  :root {
    --link-fg: var(--bode-roxo-claro);
    --link-hover-color: #c4aef0;
  }
}

html[data-theme="dark"] {
  --link-fg: var(--bode-roxo-claro);
  --link-hover-color: #c4aef0;
}

/* Marca no cabeçalho */
#branding-bode {
  display: flex;
  align-items: center;
}

#branding-bode img {
  height: 30px;
  width: auto;
  display: block;
}

/* Dinheiro entrando e saindo usa a mesma leitura da logo e da conciliação. */
.conc-entrada { color: var(--bode-verde); }
.conc-saida { color: var(--bode-vermelho); }

/*
 * O admin aplica padding e line-height aos seus input[type=submit], mas não
 * alcança <button class="button"> — sobra o padrão do navegador (2px 3px), e
 * o botão fica visivelmente menor ao lado dos nativos. Igualamos aos valores
 * que o próprio admin usa.
 */
button.button,
a.button,
input[type="button"].button {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 15px;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-fg);
  text-decoration: none;
  transition: background 0.15s;
}

button.button:hover,
a.button:hover,
input[type="button"].button:hover {
  background: var(--button-hover-bg);
}

button.button.default,
a.button.default {
  background: var(--default-button-bg);
  font-weight: 600;
}

button.button.default:hover,
a.button.default:hover {
  background: var(--default-button-hover-bg);
}

button.button:disabled,
button.button[disabled] {
  opacity: 0.55;
  cursor: default;
}

/*
 * A home do admin ocupa só a largura das duas colunas do Django e deixa o
 * resto vazio. Vira grade de três colunas para os atalhos caberem ao lado, e
 * fica restrito a body.dashboard: as demais telas mantêm o layout original.
 */
body.dashboard #content {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) 280px minmax(260px, 1fr);
  grid-template-areas:
    "titulo   titulo    titulo"
    "apps     recentes  atalhos";
  gap: 0 28px;
  width: auto;
  margin-right: 0;
  /* Sem isto o grid estica as colunas até a altura da mais alta, e o bloco de
     ações recentes vira uma caixa vazia descendo a página inteira. */
  align-items: start;
}

body.dashboard #content > h1 { grid-area: titulo; }
body.dashboard #content-main { grid-area: apps; float: none; width: auto; }
body.dashboard #content-related { grid-area: recentes; float: none; width: auto; margin: 0; }
body.dashboard .atalhos-coluna { grid-area: atalhos; }
body.dashboard #content > br.clear { display: none; }

@media (max-width: 1200px) {
  body.dashboard #content {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "atalhos" "apps" "recentes";
  }
}

/* Painel de atalhos na home do admin */
.atalhos { margin-bottom: 20px; }

.atalhos-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--body-quiet-color);
  margin: 0 0 12px;
  background: none;
  padding: 0;
}

.atalhos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 10px;
}

.atalho {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--darkened-bg);
  text-decoration: none;
  color: var(--body-fg);
  transition: border-color 0.15s, transform 0.15s;
}

.atalho:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.atalho-destaque {
  border-left: 4px solid var(--primary);
}

.atalho-titulo { font-weight: 600; font-size: 14px; }

.atalho-descricao { font-size: 12px; color: var(--body-quiet-color); line-height: 1.35; }

.atalho-contador {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}

/* Nada pendente não merece destaque: vira informação, não chamada. */
.atalho-contador-zerado {
  background: transparent;
  color: var(--body-quiet-color);
  font-weight: 400;
  padding-left: 0;
}

/* Faixa de totais acima das listagens */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--darkened-bg);
}

.resumo-bloco {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  padding: 14px 18px;
  border-left: 1px solid var(--border-color);
}

.resumo-bloco:first-child { border-left: none; }

.resumo-destaque { background: var(--selected-bg); }

.resumo-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--body-quiet-color);
}

.resumo-valor { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }

.resumo-valor.aberto { color: #d99a2b; }
.resumo-valor.concluido { color: var(--bode-verde); }
.resumo-valor.vencido { color: var(--bode-vermelho); }
.resumo-valor.total { color: var(--bode-roxo-claro); }