/**
 * Componente de Cards - Design System Locamais Portal
 * @version 1.0.0
 *
 * Fonte única da verdade para todos os estilos de cards do sistema.
 * Inclui o layout principal da página, cards de conteúdo e os cards de estatísticas
 * com a animação "flip 3D" padronizada e reutilizável.
 */

/* ========================================================================
 * 1. ESTRUTURA GERAL DA PÁGINA E CABEÇALHO
 * ======================================================================== */

.locamais-portal-ui-wrapper {
    background-color: var(--lm-light) !important;
    padding: 20px 15px !important;
    margin: 20px 0 !important;
}

.locamais-portal-page-header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
}

.locamais-portal-page-title {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    color: var(--lm-dark) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    flex-grow: 1 !important;
}

.locamais-portal-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ========================================================================
 * 2. CARD DE CONTEÚDO (Wrapper para tabelas, filtros, etc.)
 * ======================================================================== */

.locamais-content-card {
    background-color: var(--lm-background-main, #FFFFFF) !important;
    border-radius: var(--lm-border-radius-lg) !important;
    box-shadow: var(--lm-shadow) !important;
    padding: 1.5rem !important;
    border: 0.5px solid var(--lm-border) !important;
}

.locamais-card-header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1.25rem !important;
    gap: 1rem !important;
}

.locamais-card-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--lm-dark) !important;
    margin: 0 !important;
}

.locamais-card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.locamais-card-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--lm-border) !important;
}

/* ========================================================================
 * 3. CARDS DE ESTATÍSTICAS (COM ANIMAÇÃO "FLIP 3D" PADRONIZADA)
 * ======================================================================== */

/* --- Container dos Cards --- */
.locamais-stats-cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

/* --- Estilo Base do Card de Estatística --- */
.locamais-stat-card {
    background-color: var(--lm-background-main, #FFFFFF) !important;
    border-radius: var(--lm-border-radius-lg) !important;
    padding: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    box-shadow: var(--lm-shadow) !important;
    border: 1px solid var(--lm-border) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.locamais-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lm-shadow-md);
}

/* --- Ícones dos Cards --- */
.locamais-stat-card__icon-bg {
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
}
.locamais-stat-card__icon-bg .dashicons {
    font-size: 24px !important;
}

/* Variações de cor dos ícones */
.locamais-stat-card__icon-bg--total { background-color: var(--lm-blue-icon-bg) !important; }
.locamais-stat-card__icon-bg--total .dashicons { color: var(--lm-blue-icon-fg) !important; }
.locamais-stat-card__icon-bg--ativo { background-color: var(--lm-teal-light) !important; }
.locamais-stat-card__icon-bg--ativo .dashicons { color: var(--lm-teal) !important; }
.locamais-stat-card__icon-bg--inativo { background-color: var(--lm-purple-light) !important; }
.locamais-stat-card__icon-bg--inativo .dashicons { color: var(--lm-purple) !important; }

/* --- Conteúdo textual do Card --- */
.locamais-stat-card__content {
    flex-grow: 1 !important;
    text-align: left !important;
}
.locamais-stat-card__label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--lm-text-muted) !important;
    text-transform: uppercase !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
}
.locamais-stat-card__subtext {
    font-size: 0.8125rem !important;
    color: var(--lm-text-muted) !important;
}


/* --- ✅ ANIMAÇÃO "FLIP 3D" PADRONIZADA --- */
/* Wrapper para os números que animam. Essencial para a perspectiva 3D. */
.locamais-stat-card__value-wrapper {
    position: relative;
    height: 2.2rem; /* Altura fixa para garantir espaço para a animação */
    perspective: 800px; /* Ativa o "ambiente" 3D */
    display: block;
    width: 100%;
}

/* Estilo para os spans de número (o valor atual e o próximo que vai entrar) */
.locamais-stat-card .locamais-stat-card__value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--lm-dark);
    line-height: 1.1;
    /* Propriedades cruciais para a animação 3D funcionar corretamente */
    position: absolute !important;
    display: block !important;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease;
    backface-visibility: hidden; /* Evita que o "verso" do elemento apareça durante a rotação */
    transform-origin: center;
}

/* Ícone de loading inicial (quando ainda não há valor) */
.locamais-stat-card .locamais-stat-card__value .dashicons.spin {
    font-size: 1.5rem;
}

/* Estado inicial dos contadores */
.locamais-stat-card .locamais-stat-card__value--current {
    transform: rotateX(0deg); /* Visível, de frente para o usuário */
    opacity: 1;
}
.locamais-stat-card .locamais-stat-card__value--next {
    transform: rotateX(-90deg); /* "Deitado" para trás, esperando para entrar */
    opacity: 0;
}

/* Estado durante a animação (quando o JS adiciona a classe '.is-updating') */
.locamais-stat-card.is-updating .locamais-stat-card__value--current {
    transform: rotateX(90deg); /* Gira o valor atual para fora da vista (para cima) */
    opacity: 0;
}
.locamais-stat-card.is-updating .locamais-stat-card__value--next {
    transform: rotateX(0deg); /* Gira o novo valor para a vista, vindo de baixo */
    opacity: 1;
    transition-delay: 0.1s; /* Pequeno atraso para uma transição mais suave */
}