/**
 * Estilos para o módulo de Gestão de Frota (Administrativo).
 * @version 3.2.0
 *
 * CHANGELOG v3.2.0:
 * - ✅ CORREÇÃO: Ícone de expandir descrição agora sempre fica visível ao lado do texto truncado.
 * - ✅ UI/UX: Estilo do "Pill" da placa redesenhado para um visual mais profissional e consistente com o plugin.
 * - ✅ UI/UX: Estilo dos "Badges" de tipo (Multa/Notificação) agora usam as cores padrão do Design System do plugin.
 * - ✅ ACESSIBILIDADE: Adicionados estados de foco (`:focus-visible`) para melhor navegação com teclado.
 */

/* ========================================================================
   1. LAYOUT DE ABAS E ESTRUTURA GERAL
   ======================================================================== */
.locamais-tabs-mobile-nav {
    display: none;
    margin-bottom: 1.5rem;
}

.locamais-tabs-mobile-nav .locamais-select {
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
}

#tab-content-ocorrencias .locamais-data-table td {
    vertical-align: middle;
    padding: 1rem 0.75rem;
}

#tab-content-veiculos .locamais-data-table td {
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    .locamais-tabs-nav {
        display: none !important;
    }
    .locamais-tabs-mobile-nav {
        display: block !important;
    }
}

/* ========================================================================
   2. PILL DA PLACA (Estilo Profissional e Sutil)
   ======================================================================== */
.locamais-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 9999px; /* Totalmente arredondado */
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.locamais-pill--placa {
    background-color: var(--lm-lighter, #F3F4F6);
    color: var(--lm-text-muted, #6B7280);
    border: 1px solid var(--lm-border, #E5E7EB);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.locamais-pill--placa:hover {
    background-color: var(--lm-primary-light, #eff6ff);
    border-color: var(--lm-primary-dark, #2563EB);
    color: var(--lm-primary-dark, #2563EB);
    transform: translateY(-1px);
}

/* ========================================================================
   3. BADGES DE TIPO (Usando o Padrão do Design System)
   ======================================================================== */
.locamais-badge.badge-multa {
    background-color: var(--lm-error-bg, #fee2e2);
    color: var(--lm-error-text, #991b1b);
    border: 1px solid var(--lm-error-border, #fecaca);
}

.locamais-badge.badge-notificacao {
    background-color: var(--lm-warning-bg, #fef3c7);
    color: var(--lm-warning-text, #92400e);
    border: 1px solid var(--lm-warning-border, #fde68a);
}

/* ========================================================================
   4. SISTEMA DE DESCRIÇÃO COM ÍCONE SEMPRE VISÍVEL
   ======================================================================== */
.descricao-cell {
    position: relative;
    white-space: normal; /* Permite que o conteúdo interno se ajuste */
}

.descricao-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%; /* Ocupa toda a largura da célula */
}

.descricao-text {
    /* Estas 3 propriedades são essenciais para o truncamento com "..." */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* A propriedade mágica que permite ao flex item encolher */
    min-width: 0;
    
    /* Estilos de aparência */
    font-size: 0.875rem;
    color: var(--lm-text, #1e293b);
    line-height: 1.5;
}

.locamais-button-icon--expand {
    flex-shrink: 0; /* Impede que o botão encolha */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--lm-primary-light, #eff6ff);
    border: 1px solid var(--lm-border, #E5E7EB);
    border-radius: 0.375rem;
    color: var(--lm-secondary, #64748B);
    cursor: pointer;
    transition: all 0.2s ease;
}

.locamais-button-icon--expand:hover {
    background: var(--lm-primary-dark, #2563EB);
    border-color: var(--lm-primary-dark, #2563EB);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

.locamais-button-icon--expand .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* ========================================================================
   5. MODAL DE DESCRIÇÃO COMPLETA
   ======================================================================== */
#modal-descricao-expand.locamais-modal {
    max-width: 600px;
}

.locamais-modal__content--compact .locamais-modal__body {
    padding: 1.25rem 1.5rem;
}

.descricao-completa-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.descricao-completa-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--lm-text, #1e293b);
    background: var(--lm-lighter, #f8fafc);
    border: 1px solid var(--lm-border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0;
    white-space: pre-wrap; /* Mantém quebras de linha do texto original */
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

#btn-copy-descricao {
    align-self: flex-end;
    min-width: 120px;
}

#btn-copy-descricao.success {
    background: var(--lm-success, #10b981) !important;
    border-color: var(--lm-success, #10b981) !important;
    color: #ffffff !important;
}

#btn-copy-descricao .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ========================================================================
   6. RESPONSIVIDADE E ACESSIBILIDADE
   ======================================================================== */
@media screen and (max-width: 768px) {
    .locamais-pill {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }
    .locamais-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
    }
    .descricao-text {
        font-size: 0.8125rem;
    }
    .locamais-button-icon--expand {
        width: 24px;
        height: 24px;
    }
    .locamais-button-icon--expand .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
    #modal-descricao-expand.locamais-modal {
        max-width: 95%;
    }
    .descricao-completa-text {
        font-size: 0.875rem;
        padding: 0.875rem;
        max-height: 250px;
    }
}

.locamais-pill--placa:focus-visible,
.locamais-badge:focus-visible,
.locamais-button-icon--expand:focus-visible {
    outline: 2px solid var(--lm-primary, #3b82f6);
    outline-offset: 2px;
}