/**
 * assets/css/contratos.css - Estilo padronizado e responsivo para o módulo de Contratos.
 * @version 12.0.0 - REFATORADO: Removidas todas as regras de '.locamais-status-badge'
 *                   para herdar 100% do Design System centralizado em 'locamais-common-components.css'.
 *                   O arquivo agora contém apenas estilos exclusivos do módulo de Contratos.
 */

/* ======================================================================== */
/* --- 1. CARDS DE ESTATÍSTICAS (Com Animação Flip 3D) --- */
/* ======================================================================== */

/* Efeito de hover sutil para os cards, específico desta tela */
.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lm-shadow-md);
}

/* 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 para a animação */
    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;
}

/* 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 */
}

/* Estilo para o ícone de loading inicial dentro do card */
.locamais-stat-card .locamais-stat-card__value .dashicons.spin {
    font-size: 1.5rem;
}


/* ======================================================================== */
/* --- 2. BUSCA E FILTROS (CONTRATOS) --- */
/* ======================================================================== */

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-search-wrapper {
    position: relative;
    min-width: 280px;
    flex: 1;
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-search-input {
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.25rem;
    border-radius: var(--lm-border-radius-lg);
    border: 1px solid var(--lm-border);
    background: var(--lm-light);
    color: var(--lm-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-search-input:focus {
    outline: none;
    border-color: var(--lm-primary-dark);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters select.locamais-select {
    min-width: 180px;
    padding: 0.55rem 2.2rem 0.55rem 0.75rem;
    border-radius: var(--lm-border-radius-lg);
    border: 1px solid var(--lm-border);
    background: var(--lm-light);
    color: var(--lm-text);
}

/* TomSelect apenas para filtro de Unidade */
.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-wrapper {
    min-width: 220px;
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-wrapper .ts-control {
    min-height: 42px;
    padding: 0.45rem 2.2rem 0.45rem 0.65rem;
    border-radius: var(--lm-border-radius-lg);
    border: 1px solid var(--lm-border);
    background: var(--lm-light);
    box-shadow: none;
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-wrapper.focus .ts-control {
    border-color: var(--lm-primary-dark);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-dropdown {
    border-radius: var(--lm-border-radius-lg);
    border: 1px solid var(--lm-border);
    box-shadow: var(--lm-shadow-md);
    overflow: hidden;
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-dropdown .option {
    padding: 0.55rem 0.9rem;
}

.locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-dropdown .option.active {
    background: var(--lm-lighter);
    color: var(--lm-dark);
}

/* ======================================================================== */
/* --- 3. ESTILOS DA TABELA DE CONTRATOS (Enterprise Padrão + Responsividade) --- */
/* ======================================================================== */

/* Tabela de contratos herda o design system do data-table base */


/* Definição das larguras das colunas para desktop (Enterprise Padrão) */
.locamais-data-table .col-contrato  { width: 11%; min-width: 90px; }
.locamais-data-table .col-status    { width: 24%; min-width: 180px; text-align: center; }
.locamais-data-table .col-inicio    { width: 12%; min-width: 100px; }
.locamais-data-table .col-nome      { width: 15%; min-width: 110px; }
.locamais-data-table .col-placa     { width: 11%; min-width: 85px; }
.locamais-data-table .col-telefone  { width: 12%; min-width: 100px; }
.locamais-data-table .col-unidade   { width: 8%; min-width: 70px; }
.locamais-data-table .col-tempo     { width: 7%; min-width: 60px; }

/* Truncamento consistente de texto */
.locamais-data-table td.col-nome,
.locamais-data-table td.col-placa,
.locamais-data-table td.col-telefone,
.locamais-data-table td.col-unidade,
.locamais-data-table td.col-contrato,
.locamais-data-table td.col-inicio,
.locamais-data-table td.col-tempo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.locamais-data-table td.col-status {
    white-space: nowrap;
    overflow: visible;
}

/* ======================================================================== */
/* --- SINERGIA: CONTRATOS COM ESTILO DE CLIENTES (BASE DATA-TABLE) --- */
/* ======================================================================== */

.locamais-data-table th.col-status,
.locamais-data-table td.col-status {
    text-align: center;
}

/* ======================================================================== */
/* --- MEDIA QUERIES: TABLET (768px - 1024px) --- */
/* ======================================================================== */

@media (max-width: 1024px) {
    .locamais-data-table .col-contrato  { width: 10%; min-width: 80px; }
    .locamais-data-table .col-status    { width: 22%; min-width: 160px; }
    .locamais-data-table .col-inicio    { width: 11%; min-width: 90px; }
    .locamais-data-table .col-nome      { width: 14%; min-width: 100px; }
    .locamais-data-table .col-placa     { width: 10%; min-width: 75px; }
    .locamais-data-table .col-telefone  { width: 11%; min-width: 90px; }
    .locamais-data-table .col-unidade   { width: 8%; min-width: 65px; }
    .locamais-data-table .col-tempo     { width: 7%; min-width: 55px; }
    
    .locamais-data-table th,
    .locamais-data-table td {
        padding: 0.75rem 0.8rem;
        font-size: 0.8125rem;
    }
}

/* ======================================================================== */
/* --- MEDIA QUERIES: MOBILE (< 768px) --- */
/* ======================================================================== */

@media (max-width: 768px) {
    /* Em mobile, força scroll horizontal mínimo da tabela */
    .locamais-table-responsive-wrapper {
        margin: 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .locamais-data-table .col-contrato  { width: 12%; min-width: 80px; }
    .locamais-data-table .col-status    { width: 20%; min-width: 140px; }
    .locamais-data-table .col-inicio    { width: 13%; min-width: 95px; }
    .locamais-data-table .col-nome      { width: 16%; min-width: 110px; }
    .locamais-data-table .col-placa     { width: 11%; min-width: 80px; }
    .locamais-data-table .col-telefone  { width: 13%; min-width: 100px; }
    .locamais-data-table .col-unidade   { width: 8%; min-width: 70px; }
    .locamais-data-table .col-tempo     { width: 7%; min-width: 60px; }
    
    .locamais-data-table th,
    .locamais-data-table td {
        padding: 0.65rem 0.7rem;
        font-size: 0.75rem;
    }
    
    /* Badges ajustados para mobile */
    .locamais-status-badge {
        padding: 0.35rem 0.6rem;
        font-size: 0.65rem;
    }
}

/* ======================================================================== */
/* --- RESPONSIVIDADE: FILTROS E LAYOUT (MOBILE) --- */
/* ======================================================================== */

@media (max-width: 768px) {
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-search-wrapper {
        min-width: auto;
        flex: 1 1 100%;
        margin-bottom: 0.75rem;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-search-input {
        font-size: 16px; /* Evita zoom em iOS */
        padding: 0.6rem 0.85rem 0.6rem 2.1rem;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters {
        flex-direction: column;
        gap: 0.65rem;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .locamais-form-control-item {
        flex: 1;
        min-width: auto;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters select.locamais-select {
        width: 100%;
        min-width: auto;
        font-size: 16px; /* Evita zoom em iOS */
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-wrapper {
        width: 100%;
        min-width: auto;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-card-filters .ts-wrapper .ts-control {
        font-size: 16px; /* Evita zoom em iOS */
    }
}

@media (max-width: 640px) {
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-portal-page-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-portal-page-title {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-portal-header-actions {
        width: 100%;
    }
    
    .locamais-portal-ui-wrapper[data-module="contratos"] .locamais-button {
        width: 100%;
        font-size: 0.85rem;
    }
}


/* ======================================================================== */
/* --- 4. SKELETON LOADING E ANIMAÇÕES DE FEEDBACK --- */
/* ======================================================================== */

@keyframes skeleton-pulse {
    0% { background-color: var(--lm-border-light); }
    50% { background-color: var(--lm-lighter); }
    100% { background-color: var(--lm-border-light); }
}

.skeleton-loader {
    background-color: var(--lm-border-light);
    border-radius: var(--lm-border-radius);
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}
.skeleton-loader.skeleton-line {
    height: 1em;
    width: 90%;
}
.locamais-data-table.skeleton-table td .skeleton-line {
    margin: 0.25em 0;
}

@keyframes flash-new-row {
    from { background-color: var(--lm-warning); opacity: 0.15; }
    to { background-color: transparent; }
}

.locamais-data-table tbody tr.is-newly-synced {
    animation: flash-new-row 2s ease-out forwards;
}