/* ==========================================================================
   admin.css - Estilos específicos com Escopo Correto
   ========================================================================== */

#admin-container {
    width: 100%;
}

/* =========================================
   1. KPIS (Herdando visual da Home)
   ========================================= */
#admin-container .kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* =========================================
   2. INPUTS E BOTÕES
   ========================================= */

#admin-container .btn-save-primary {
    background-color: var(--brand-neon);
    color: #000;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

#admin-container .config-card.flush-card {
    padding: 0;
    overflow: hidden;
}

#admin-container .btn-save-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 224, 131, 0.25);
    background-color: var(--brand-neon-hover);
}


/* =========================================
   3. TABELA DE ADMINISTRAÇÃO
   ========================================= */
.admin-toolbar {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.search-admin {
    max-width: 350px;
    width: 100%;
}

.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 800px;
}

.admin-table th {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9rem;
    color: var(--text-primary);
    vertical-align: middle;
}

.admin-table tbody tr {
    transition: background-color 0.2s;
}

.admin-table tbody tr:hover {
    background-color: rgba(255,255,255,0.02);
}


/* =========================================
   4. BADGES E AÇÕES DA TABELA
   ========================================= */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-badge i { font-size: 10px; }

.admin-badge.status-ativo { background-color: rgba(0, 224, 131, 0.1); color: var(--brand-neon); border: 1px solid rgba(0, 224, 131, 0.3); }
.admin-badge.status-pendente { background-color: rgba(255, 193, 7, 0.1); color: var(--status-warning); border: 1px solid rgba(255, 193, 7, 0.3); }
.admin-badge.status-suspenso { background-color: var(--danger-bg); color: var(--status-danger); border: 1px solid var(--status-danger); }
.admin-badge.status-trial { background-color: rgba(0, 163, 255, 0.1); color: #00A3FF; border: 1px solid rgba(0, 163, 255, 0.2); }
/* Etiqueta de Trial Vencido */
.admin-badge.status-vencido { 
    background-color: rgba(255, 77, 77, 0.1); 
    color: #ff4d4d; /* Vermelho/Coral de urgência */
    border: 1px solid rgba(255, 77, 77, 0.2); 
}

.admin-action-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Herda o formato dos botões pequenos do configs.css */
.admin-action-group .btn-icon {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.admin-action-group .btn-icon:hover { color: #fff; background-color: rgba(255,255,255,0.1); }
.admin-action-group .btn-icon.edit:hover { color: #FFC107; background-color: rgba(255, 193, 7, 0.1); }
.admin-action-group .btn-icon.delete:hover { color: var(--status-danger); background-color: rgba(221, 0, 0, 0.1); }
.admin-action-group .admin-btn-pix { color: #FFC107; }
.admin-action-group .admin-btn-pix:hover { background-color: rgba(255, 193, 7, 0.1); color: #FFC107; }
.admin-action-group .btn-icon.suspend:hover { color: #FFC107; background-color: rgba(255, 193, 7, 0.1); }
.admin-action-group .btn-icon.activate:hover { color: var(--brand-neon); background-color: rgba(0, 224, 131, 0.1); }
.admin-action-group .btn-icon.confirm { color: var(--brand-neon); }
.admin-action-group .btn-icon.confirm:hover { background-color: rgba(0, 224, 131, 0.1); transform: scale(1.1); }

/* =========================================
   5. MODAL DE PLANOS
   ========================================= */
.admin-plan-cards { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.admin-plan-option { flex: 1; cursor: pointer; }
.admin-plan-option input { display: none; }

/* 👇 NOVA VERSÃO: Menor e Horizontal */
.admin-plan-card-ui {
    background-color: #09090b;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem; 
    text-align: center;
    display: flex; 
    flex-direction: row; /* Elementos lado a lado */
    align-items: center; 
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary); 
    transition: all 0.2s;
    font-weight: 600;
    font-size: 0.9rem;
}
.admin-plan-card-ui i { font-size: 1.2rem; } /* Ícone menor */

.admin-plan-option input:checked + .admin-plan-card-ui {
    background-color: rgba(0, 224, 131, 0.05);
    border-color: var(--brand-neon);
    color: var(--brand-neon);
}
.admin-plan-config {
    background-color: #09090b;
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
/* =========================================
   6. CORREÇÃO DOS INPUTS E CALENDÁRIO NATIVO
   ========================================= */
#modal-add-client .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

#modal-add-client .input-wrapper > i:first-child {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 1.15rem;
    pointer-events: none; 
    z-index: 2;
}

#modal-add-client .config-input {
    width: 100%;
    padding: 12px 12px 12px 42px; 
}

#modal-add-client .password-wrapper .toggle-password {
    pointer-events: all; 
}

/* 👇 O TRUQUE: Deixa o ícone de calendário nativo do navegador BRANCO e clicável */
#modal-add-client input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
}
#modal-add-client input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* =========================================
   7. AJUSTES FINOS DO CALENDÁRIO E BOTÕES
   ========================================= */

/* Remove o buraco na esquerda exclusivo do calendário */
#modal-add-client input[type="datetime-local"] {
    padding-left: 14px;
}

/* Deixa os atalhos de tempo como pílulas clicáveis */
.admin-quick-times { 
    display: flex; 
    gap: 0.5rem; 
    margin-top: 0.75rem; 
}

.btn-quick-time {
    background-color: #09090b;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quick-time:hover {
    border-color: var(--brand-neon);
    color: var(--brand-neon);
    background-color: rgba(0, 224, 131, 0.05);
}

/* =========================================
   ESTILOS DOS CARDS DE PLANO (Trial / Mensal)
   ========================================= */
.plan-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.plan-card {
    flex: 1;
    cursor: pointer;
}

/* Esconde a bolinha azul padrão do HTML */
.plan-card input[type="radio"] {
    display: none; 
}

/* O visual do botão de plano apagado */
.plan-card .card-content {
    background: #121214;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #8E8E8E;
    transition: all 0.2s;
}

.plan-card .card-content i {
    font-size: 1.5rem;
}

/* O visual do botão de plano QUANDO SELECIONADO */
.plan-card input[type="radio"]:checked + .card-content {
    border-color: var(--brand-neon);
    color: var(--brand-neon);
    background: rgba(0, 224, 131, 0.05);
}

/* =========================================
   BARRA DE ROLAGEM DO MODAL (Evita o Esmagamento)
   ========================================= */
.fipefy-modal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.fipefy-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}
.fipefy-modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.fipefy-modal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* =========================================
   FIX: ESCONDER WIDGET MOBILE NO DESKTOP
   ========================================= */
@media (min-width: 1024px) {
    .mobile-widget {
        display: none !important;
    }
}

/* Transformando o card em um botão em linha única */
.billing-widget.compact-widget {
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 12px;
}

/* Efeito ao passar o mouse por cima do card inteiro */
.billing-widget.compact-widget:hover {
    background-color: rgba(255, 193, 7, 0.05);
    border-color: #FFC107;
    transform: translateY(-2px);
}

.billing-widget.compact-widget .bw-icon {
    width: 26px; height: 26px;
    font-size: 0.9rem;
}

/* Joga a setinha lá pro canto direito */
.billing-widget.compact-widget .action-arrow {
    margin-left: auto; 
    color: #FFC107;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.billing-widget.compact-widget:hover .action-arrow {
    transform: translateX(3px); /* Setinha anda um pouco pro lado no hover */
}

/* =========================================
   ESTILOS DO WIDGET DE TESTE (AZUL TIPO CRONÔMETRO)
   ========================================= */
.billing-widget.trial-widget {
    border-color: rgba(0, 163, 255, 0.2);
}
.billing-widget.trial-widget .bw-icon {
    background-color: rgba(0, 163, 255, 0.1);
    color: #00A3FF;
}
.billing-widget.trial-widget .bw-desc,
.billing-widget.trial-widget .action-arrow {
    color: #00A3FF;
}
.billing-widget.trial-widget:hover {
    background-color: rgba(0, 163, 255, 0.05);
    border-color: #00A3FF;
}
.billing-widget.trial-widget .bw-btn {
    background-color: #00A3FF;
    color: #FFF;
}
.billing-widget.trial-widget .bw-btn:hover {
    background-color: #0081CC;
}

/* =========================================
   MÁGICA DE POSICIONAMENTO E GRAVIDADE
   ========================================= */
#sidebar-billing-widget:not(.hidden),
#sidebar-trial-widget:not(.hidden) {
    margin-top: auto;
    margin-bottom: 1rem;
}

/* Usamos o ~ (til) para garantir que empurre o perfil não importa qual card esteja aparecendo */
#sidebar-billing-widget:not(.hidden) ~ .account-details,
#sidebar-trial-widget:not(.hidden) ~ .account-details {
    margin-top: 0;
}

/* =========================================
   CORES DOS BOTÕES DE AÇÃO (ADMIN)
   ========================================= */
.admin-action-group .btn-icon {
    transition: all 0.2s ease;
}

/* Gerar Fatura (Azul) */
.admin-action-group .btn-icon.charge { color: #00A3FF; }
.admin-action-group .btn-icon.charge:hover { background-color: rgba(0, 163, 255, 0.1); transform: scale(1.1); }

/* Confirmar Pagamento / Play (Verde) */
.admin-action-group .btn-icon.confirm,
.admin-action-group .btn-icon.activate { color: #00E083; }
.admin-action-group .btn-icon.confirm:hover,
.admin-action-group .btn-icon.activate:hover { background-color: rgba(0, 224, 131, 0.1); transform: scale(1.1); }

/* Suspender / Pausa (Laranja/Amarelo) */
.admin-action-group .btn-icon.suspend { color: #FFC107; }
.admin-action-group .btn-icon.suspend:hover { background-color: rgba(255, 193, 7, 0.1); transform: scale(1.1); }

/* Editar (Cinza Claro para Branco) */
.admin-action-group .btn-icon.edit { color: #A0A0A0; }
.admin-action-group .btn-icon.edit:hover { color: #FFF; background-color: rgba(255, 255, 255, 0.1); transform: scale(1.1); }

/* Excluir (Vermelho) */
.admin-action-group .btn-icon.delete { color: #FF4D4D; }
.admin-action-group .btn-icon.delete:hover { background-color: rgba(255, 77, 77, 0.1); transform: scale(1.1); }

/* ==========================================================================
   ✨ SKELETON LOADERS — variações específicas do admin
========================================================================== */

/* Variações de tamanho para imitar diferentes textos (IDs, nomes, preços) */
.skeleton-item.w-id { width: 40px; }
.skeleton-item.w-name { width: 140px; height: 18px; } /* Nome é maior */
.skeleton-item.w-email { width: 110px; height: 14px; margin-top: 4px; } /* Email é menor */
.skeleton-item.w-plano { width: 60px; }
.skeleton-item.w-badge { width: 80px; height: 26px; border-radius: 13px; } /* Formato de badge */
.skeleton-item.w-price { width: 90px; height: 18px; }
.skeleton-item.w-date { width: 100px; }
.skeleton-item.w-icon { width: 34px; height: 34px; border-radius: 8px; } /* Formato de botão */

/* Alinhamento para os botões fantasma no final */
.skeleton-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}