/* =====================================================
   Admin v3 — Utilitários compartilhados
   Use estas classes em todas as páginas reskinadas em vez
   de redeclarar valores em CSS específico de página.
   ===================================================== */

/* Fontes especiais */
.mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}

.tnum {
    font-variant-numeric: tabular-nums;
}

.display {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Cores de texto mute */
.muted {
    color: var(--text-mute);
}

.faint {
    color: var(--text-faint);
}

/* Acessibilidade — esconde visualmente mas mantém para SR */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Espaçadores rápidos */
.flex-1 { flex: 1 1 auto; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Visibilidade por breakpoint */
.hide-mobile { display: initial; }
.show-mobile { display: none; }

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: initial !important; }
}

.hide-desktop { display: initial; }
.show-desktop { display: none; }

@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
    .show-desktop { display: initial !important; }
}

/* Truncate com ellipsis — single-line */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Container responsivo padrão */
.container-app {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-left: var(--s-4);
    padding-right: var(--s-4);
}

@media (min-width: 768px) {
    .container-app {
        padding-left: var(--s-6);
        padding-right: var(--s-6);
    }
}

@media (min-width: 1024px) {
    .container-app {
        padding-left: var(--s-7);
        padding-right: var(--s-7);
    }
}