/**
 * ✅ REATORADO E CORRIGIDO: Estilos para o dashboard de Flow-up.
 * @version 13.0.0
 * - NOVO (Responsividade): Adicionadas regras para transformar a navegação de abas
 *   em um <select> em telas menores, melhorando a UX mobile.
 * - MANTIDO: Correção do layout Flexbox do modal para evitar que os botões fiquem escondidos.
 */

/* ----------------------------------------------------
   1. TOKENS DE DESIGN (Variáveis Globais)
   ---------------------------------------------------- */
:root {
    /* Cores */
    --lm-bg-modal: #fff;
    --lm-bg-subtle: #f8fafc;
    --lm-border: #e2e8f0;
    --lm-text-primary: #1e293b;
    --lm-text-secondary: #64748b;
    --lm-primary: #0f172a;
    --lm-primary-dark: #2563EB;
    --lm-success: #10B981;
    --lm-error: #EF4444;
    --lm-status-approved-bg: #eff6ff;
    --lm-status-approved-text: #2563eb;
    --lm-status-pending-bg: #fefce8;
    --lm-status-pending-text: #ca8a04;

    /* Tipografia */
    --lm-font-sans: "Inter", -apple-system, sans-serif;
    --lm-font-size-xs: 0.75rem;   /* 12px */
    --lm-font-size-sm: 0.875rem;  /* 14px */

    /* Espaçamento e Layout */
    --lm-spacing-xs: 0.25rem;
    --lm-spacing-sm: 0.5rem;
    --lm-spacing-md: 1rem;
    --lm-spacing-lg: 1.5rem;
    --lm-radius-md: 0.5rem;
    --lm-radius-lg: 0.75rem;
    --lm-breakpoint-mobile: 768px;

    /* Sombras e Transições */
    --lm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --lm-transition: 200ms ease-in-out;
}

/* ======================================= */
/* 2. NAVEGAÇÃO POR ABAS (Desktop e Mobile) */
/* ======================================= */

/* Navegação por abas para Desktop (visível por padrão) */
.locamais-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--lm-border, #E5E7EB);
    margin-bottom: 1.5rem;
    gap: 0;
}
.locamais-tab-button {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 0.8rem 1.5rem !important; font-size: 0.95rem !important; font-weight: 500 !important;
    color: var(--lm-text-secondary, #64748B) !important; background-color: var(--lm-lighter, #F3F4F6) !important;
    border: 1px solid var(--lm-border, #E5E7EB) !important; border-bottom: none !important;
    cursor: pointer !important; transition: all 0.2s ease-in-out !important;
    margin-bottom: -2px !important; border-radius: 6px 6px 0 0 !important;
    position: relative !important; top: 2px;
}
.locamais-tab-button:not(.is-active):hover {
    color: var(--lm-primary-dark, #2563EB) !important; background-color: #e9eff6 !important;
    transform: translateY(-2px); z-index: 1;
}
.locamais-tab-button.is-active {
    color: var(--lm-primary, #0F172A) !important; font-weight: 600 !important;
    background-color: var(--lm-background-main, #FFFFFF) !important;
    border-top: 3px solid var(--lm-primary-dark, #2563EB) !important;
    border-left: 1px solid var(--lm-border, #E5E7EB) !important;
    border-right: 1px solid var(--lm-border, #E5E7EB) !important;
    border-bottom: 2px solid var(--lm-background-main, #FFFFFF) !important;
    top: 0; transform: translateY(0); z-index: 2;
}
.locamais-tab-button .dashicons, .locamais-tab-button .fa-solid {
    font-size: 1.2em !important; color: inherit !important;
}

.locamais-tab-content { display: none; }
.locamais-tab-content.is-active { display: block; animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ✅ NOVO: Navegação por <select> para Mobile (escondida por padrão) */
.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;
}


/* ----------------------------------------------------
   3. ESTILOS DA LISTA DE PENDÊNCIAS (Layout Desktop)
   ---------------------------------------------------- */
.locamais-flowup-list { display: flex; flex-direction: column; gap: var(--lm-spacing-md); }
.flowup-item { background-color: var(--lm-bg-modal); border: 1px solid var(--lm-border); border-radius: var(--lm-radius-lg); padding: var(--lm-spacing-lg); display: grid; align-items: center; transition: transform var(--lm-transition), box-shadow var(--lm-transition); }
.locamais-flowup-list--contas .flowup-item { grid-template-columns: 1fr auto; gap: var(--lm-spacing-lg); }
.locamais-flowup-list:not(.locamais-flowup-list--contas) .flowup-item { grid-template-columns: auto 1fr auto; gap: var(--lm-spacing-lg); }
.flowup-item:hover { transform: translateY(-3px); box-shadow: var(--lm-shadow-md); }
.flowup-item-valor { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--lm-spacing-lg) 0 0; border-right: 1px solid var(--lm-border); min-width: 150px; }
.flowup-item-valor .valor-label { font-size: var(--lm-font-size-xs); font-weight: 500; color: var(--lm-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.flowup-item-valor .valor-value { font-size: 1.75rem; font-weight: 700; color: var(--lm-success); line-height: 1.2; }
.flowup-item-details { display: flex; flex-direction: column; gap: var(--lm-spacing-xs); line-height: 1.6; }
.flowup-item-details .detail-line { font-size: var(--lm-font-size-sm); color: var(--lm-text-secondary); }
.flowup-item-details .detail-line strong { color: var(--lm-text-primary); font-weight: 500; }
.flowup-item-actions { display: flex; gap: 0.75rem; }
.flowup-item-actions .locamais-button--small { width: 40px; height: 40px; font-size: 1rem; }

/* ----------------------------------------------------
   4. ESTILOS DO MODAL DE PAGAMENTO (CORREÇÃO DE RESPONSIVIDADE)
   ---------------------------------------------------- */
#modal-confirmar-pagamento.locamais-modal { max-width: 960px !important; width: 95vw !important; max-height: 95vh; display: flex; flex-direction: column; }
#modal-confirmar-pagamento .locamais-modal__content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#modal-confirmar-pagamento .locamais-modal__header { flex-shrink: 0; font-size: 1.25rem; padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
#modal-confirmar-pagamento .locamais-modal__body { flex-grow: 1; overflow-y: auto; }
#modal-confirmar-pagamento .locamais-form-actions { flex-shrink: 0; background: var(--lm-bg-subtle); border-top: 1px solid var(--lm-border); }
.locamais-payment-modal-form-body { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: flex-start; }
@media (min-width: 992px) { .locamais-payment-modal-form-body { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.locamais-payment-form-section { display: flex; flex-direction: column; gap: var(--lm-spacing-sm); }
.locamais-upload-section { margin-top: 1rem; }
.locamais-saque-valor-display { background-color: var(--lm-bg-subtle); border: 1px solid var(--lm-border); padding: 0.75rem 1rem; border-radius: var(--lm-radius-lg); text-align: center; margin-bottom: 1.25rem; }
.saque-valor-label { display: block; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lm-text-secondary); }
.saque-valor-value { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; color: var(--lm-text-primary); }
.locamais-banking-preview { background: var(--lm-bg-subtle); border-radius: var(--lm-radius-lg); padding: var(--lm-spacing-md); border: 1px solid var(--lm-border); display: flex; flex-direction: column; gap: var(--lm-spacing-sm); height: 100%; }
.locamais-banking-preview-title { font-size: 0.9rem; font-weight: 600; color: var(--lm-text-primary); margin: 0; padding-bottom: var(--lm-spacing-sm); border-bottom: 1px solid var(--lm-border); }
.locamais-banking-preview .bank-info-content { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.locamais-banking-preview .bank-info-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--lm-font-size-xs); padding: 0.35rem 0; border-bottom: 1px dotted #e5e7eb; }
.locamais-banking-preview .bank-info-row:last-child { border-bottom: none; }
.locamais-banking-preview .bank-info-label { color: var(--lm-text-secondary); }
.locamais-banking-preview .bank-info-value { color: var(--lm-text-primary); font-weight: 500; text-align: right; }
.locamais-banking-preview .pix-value-wrapper { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--lm-border); text-align: center; }
.pix-value-wrapper .bank-info-label { font-size: 0.7rem; font-weight: 600; color: var(--lm-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; display: block; }
.locamais-banking-preview .pix-value-container { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.locamais-banking-preview .pix-value { background-color: #eef2ff; color: #4338ca; padding: 0.3rem 0.5rem; border-radius: var(--lm-radius-md); font-weight: 500; font-family: monospace; word-break: break-all; display: inline-block; font-size: 0.75rem; }
.btn-copy-pix { background: none; border: none; cursor: pointer; color: #cbd5e1; padding: 0.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; }
.btn-copy-pix:hover { background-color: var(--lm-lighter); color: var(--lm-primary-dark); }
.btn-copy-pix .dashicons { font-size: 16px; line-height: 1; }
.locamais-file-upload-wrapper { position: relative; width: 100%; }
.locamais-input-file--hidden { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.locamais-file-upload-label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 120px; padding: 1.5rem 1rem; border: 2px dashed var(--lm-border); border-radius: var(--lm-radius-lg); background-color: var(--lm-bg-subtle); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; text-align: center; }
.locamais-file-upload-label:hover, .locamais-file-upload-label:focus { border-color: var(--lm-primary-dark); background-color: #eef2ff; }
.locamais-input-file--hidden:focus + .locamais-file-upload-label { border-color: var(--lm-primary-dark); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
.locamais-file-upload-label .dashicons { font-size: 2rem; color: var(--lm-primary-dark); margin-bottom: 0.75rem; }
.locamais-file-upload-label .file-upload-text { font-size: 0.9rem; font-weight: 500; color: var(--lm-text-secondary); }
.locamais-file-upload-label .file-upload-name { font-size: 0.8rem; font-weight: 600; color: var(--lm-success); margin-top: 0.75rem; display: block; word-break: break-all; }
.locamais-badge.status--pendente-analise, .locamais-badge.status--pendente-aprovacao { background-color: var(--lm-status-pending-bg); color: var(--lm-status-pending-text); }
.locamais-badge.status--aprovada { background-color: var(--lm-status-approved-bg); color: var(--lm-status-approved-text); }

/* ----------------------------------------------------
   5. RESPONSIVIDADE
   ---------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* ✅ NOVO: Esconde as abas de desktop e mostra o select mobile */
    .locamais-tabs-nav { display: none !important; }
    .locamais-tabs-mobile-nav { display: block !important; }

    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item { grid-template-columns: 1fr !important; gap: var(--lm-spacing-md) !important; padding: var(--lm-spacing-md) !important; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-valor { grid-row: 1 !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; border-right: none !important; border-bottom: 1px solid var(--lm-border) !important; padding: 0 0 var(--lm-spacing-md) 0 !important; min-width: auto !important; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-valor .valor-label { margin-bottom: 0 !important; font-size: 0.8rem !important; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-valor .valor-value { font-size: 1.3rem !important; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-details { grid-row: 2 !important; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-details .detail-line { display: flex !important; justify-content: space-between !important; padding: 0.35rem 0 !important; align-items: center !important; font-size: 0.8rem; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-details .detail-line strong { color: var(--lm-text-secondary) !important; font-weight: 500 !important; margin-right: 1rem !important; white-space: nowrap; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-details .detail-line span:not(.locamais-badge) { font-weight: 600; color: var(--lm-text-primary); text-align: right; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-details .detail-line .locamais-badge { font-size: 0.65rem; padding: 0.25em 0.6em; }
    .locamais-portal-ui-wrapper[data-module="flowup-dashboard"] .flowup-item-actions { grid-row: 3 !important; justify-content: flex-end !important; margin-top: var(--lm-spacing-xs) !important; }
    
    /* ✅ CORREÇÃO RESPONSIVA DO MODAL */
    #modal-confirmar-pagamento .locamais-payment-modal-form-body { grid-template-columns: 1fr !important; }
    #modal-confirmar-pagamento .locamais-modal__content { padding: 1rem; }
    #modal-confirmar-pagamento .locamais-file-upload-label { min-height: 100px; padding: 1rem; }
    #modal-confirmar-pagamento .locamais-form-actions { flex-direction: column-reverse; gap: 0.75rem; align-items: stretch; }
    #modal-confirmar-pagamento .locamais-form-actions .locamais-button { width: 100%; justify-content: center; }
}