/* Cards do dashboard no mesmo padrão visual da taskboard. */

.dashboard-card {
  border-left-width: 0.25rem;
  border-left-color: var(--dashboard-card-accent, var(--bs-secondary));
}

.dashboard-card-primary {
  --dashboard-card-accent: var(--bs-primary);
}

.dashboard-card-success {
  --dashboard-card-accent: var(--bs-success);
}

.dashboard-card-danger {
  --dashboard-card-accent: var(--bs-danger);
}

.dashboard-card-warning {
  --dashboard-card-accent: var(--bs-warning);
}

.dashboard-card-info {
  --dashboard-card-accent: var(--bs-info);
}

/* Dashboard Monetary Values Visibility */

.dashboard-monetary-value.hidden-value {
  position: relative;
  color: transparent;
  user-select: none;
}

.dashboard-monetary-value.hidden-value::after {
  content: "••••••";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bs-secondary-color);
  letter-spacing: 2px;
  font-weight: inherit;
  white-space: nowrap;
}

/* Tipografia responsiva dos valores do dashboard.
   Substitui as classes `display-4`/`display-5` (3.5rem/3rem), que ficam
   enormes no celular e quebram a altura dos cards em uma coluna. Em <md
   usamos 1.5rem para caber em uma linha em 375 px; em ≥md aproximamos
   do visual anterior com um tamanho grande e peso leve. */
.dashboard-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
  display: inline-block;
}

@media (min-width: 768px) {
  .dashboard-value {
    font-size: 3rem;
    font-weight: 300;
  }
}