/*
 * Visual próprio do Armazém (decisão 0016). CSS simples, sem build: mira as classes do Filament (fi-*)
 * e define as nossas (armazem-*). As cores vêm das variáveis do Filament (--primary-500, --gray-200...).
 * O teste VisualTest confere que cada classe fi-* daqui ainda existe no Filament.
 */

/* B2: menu lateral com fundo próprio, distinto da área principal nos dois modos. */
.fi-sidebar {
    background-color: var(--gray-100);
    border-inline-end: 1px solid var(--gray-200);
}

.dark .fi-sidebar {
    background-color: color-mix(in oklab, var(--gray-950) 70%, black);
    border-inline-end-color: rgb(255 255 255 / 0.08);
}

.fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid var(--gray-200);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.dark .fi-sidebar-group + .fi-sidebar-group {
    border-top-color: rgb(255 255 255 / 0.08);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-400) 30%, transparent);
    box-shadow: inset 3px 0 0 var(--primary-500);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--primary-800);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--primary-300);
}

/* B4: avisos com fundo colorido por tipo e contraste AA nos dois modos. */
.fi-no-notification.fi-status-success,
.fi-no-notification.fi-status-danger,
.fi-no-notification.fi-status-info,
.fi-no-notification.fi-status-warning {
    border: 0;
    box-shadow: 0 12px 28px -6px rgb(0 0 0 / 0.35);
    font-size: 0.95rem;
}

.fi-no-notification.fi-status-success { background-color: var(--success-700); }
.fi-no-notification.fi-status-danger { background-color: var(--danger-600); }
.fi-no-notification.fi-status-info { background-color: var(--info-600); }
.fi-no-notification.fi-status-warning { background-color: var(--warning-400); }

.fi-no-notification.fi-status-success :is(.fi-no-notification-title, .fi-no-notification-body, .fi-no-notification-icon, .fi-no-notification-close-btn, .fi-no-notification-date),
.fi-no-notification.fi-status-danger :is(.fi-no-notification-title, .fi-no-notification-body, .fi-no-notification-icon, .fi-no-notification-close-btn, .fi-no-notification-date),
.fi-no-notification.fi-status-info :is(.fi-no-notification-title, .fi-no-notification-body, .fi-no-notification-icon, .fi-no-notification-close-btn, .fi-no-notification-date) {
    color: white;
}

.fi-no-notification.fi-status-warning :is(.fi-no-notification-title, .fi-no-notification-body, .fi-no-notification-icon, .fi-no-notification-close-btn, .fi-no-notification-date) {
    color: var(--gray-950);
}

/* Tabelas das nossas views (dashboard e fechamento de mês). */
.armazem-tabela-rolagem {
    overflow-x: auto;
}

.armazem-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.armazem-tabela th {
    text-align: start;
    font-weight: 600;
    color: var(--gray-500);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.armazem-tabela td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

.dark .armazem-tabela th {
    color: var(--gray-400);
    border-bottom-color: rgb(255 255 255 / 0.1);
}

.dark .armazem-tabela td {
    border-bottom-color: rgb(255 255 255 / 0.05);
}

.armazem-tabela .armazem-numero {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.armazem-tabela tfoot td {
    font-weight: 600;
    border-top: 2px solid var(--gray-300);
    border-bottom: 0;
}

.dark .armazem-tabela tfoot td {
    border-top-color: rgb(255 255 255 / 0.2);
}

.armazem-mutado {
    color: var(--gray-500);
    font-size: 0.875rem;
}

.dark .armazem-mutado {
    color: var(--gray-400);
}

/* Texto pré-formatado (notificações, pilha de chamadas e contexto dos logs). */
.armazem-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}