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

.dashboard-card {
    border-left-width: .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: #777676;
    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;
    }
}