/* ════════════════════════════════════════════════════════════════
 *  ExcFlow CRM v44.5.1 — Reativação CONSOLIDADO (CSS)
 * ════════════════════════════════════════════════════════════════
 *
 *  Este arquivo SUBSTITUI 2 anteriores:
 *    - style-patch2.css            (CSS principal da tela)
 *    - reativacao-layout-fix.css   (fix layout + botões superiores)
 *
 *  E inclui:
 *    ✓ FIX 1: Dropdown Metas R$ branco-sobre-branco
 *    ✓ FIX 2 (BUG #2 do QA): Botões "⚙ Configurar" e "⬇ Exportar CSV"
 *      no header da Reativação (eram white-on-white)
 *    ✓ FIX 3: Tela Reativação não cobre mais o header da topbar
 *
 *  Estrutura:
 *    1. FIXES GLOBAIS (Metas R$ dropdown)
 *    2. TELA REATIVAÇÃO (layout, cards, grupos, filtros, tabela, ações)
 *    3. MODAL GENÉRICO (p2-modal)
 *    4. BADGE NO MENU
 *    5. RESPONSIVO
 *
 * ════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
 * 1. FIXES GLOBAIS
 * ──────────────────────────────────────────────────────────────── */

/* Dropdown .fp-sel (Metas R$) — fix do bug white-on-white */
.fp-sel,
select.fp-sel,
#mrs-mes,
#mrs-ano {
  background-color: var(--bg-input, #1a1a1a) !important;
  color: var(--text, #f5f2ed) !important;
  border: 1px solid #444 !important;
  padding: 4px 8px;
  border-radius: 4px;
}
.fp-sel option,
select.fp-sel option,
#mrs-mes option,
#mrs-ano option {
  background-color: #1a1a1a !important;
  color: #f5f2ed !important;
}


/* ────────────────────────────────────────────────────────────────
 * 2. TELA REATIVAÇÃO
 * ──────────────────────────────────────────────────────────────── */

/* Reset de posicionamento — não cobre o header (FIX 3) */
#tela-reativacao {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  max-width: 1600px;
}

/* Header com título e ações */
.reat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.reat-header h1 {
  margin: 0;
  font-size: 24px;
  color: var(--text, #f5f2ed);
}

.reat-header h1 small {
  font-size: 14px;
  color: #888;
  font-weight: normal;
  margin-left: 12px;
}

/* Botões "Configurar" e "Exportar CSV" no header (FIX BUG #2) */
.reat-header button,
#tela-reativacao .reat-header .acao-btn,
#reat-btn-config,
#reat-btn-export {
  background-color: var(--bg-input, #1a1a1a) !important;
  color: var(--text, #f5f2ed) !important;
  border: 1px solid #555 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.reat-header button:hover,
#tela-reativacao .reat-header .acao-btn:hover,
#reat-btn-config:hover,
#reat-btn-export:hover {
  background-color: var(--accent, #c97c5d) !important;
  color: #fff !important;
  border-color: var(--accent, #c97c5d) !important;
}

/* ── Cards-resumo no topo ─────────────────────────────────────── */
.reat-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.reat-card-resumo {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #4a3528;
  border-radius: 8px;
  padding: 14px;
}

.reat-card-resumo .label {
  font-size: 11px;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.reat-card-resumo .valor {
  font-size: 22px;
  font-weight: 600;
  color: var(--accent, #c97c5d);
}

.reat-card-resumo.critico .valor { color: #e74c3c; }
.reat-card-resumo.alerta  .valor { color: #f39c12; }
.reat-card-resumo.atencao .valor { color: #f1c40f; }

/* ── Grupos por vendedor (cards clicáveis) ────────────────────── */
.reat-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.reat-grupo-card {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #4a3528;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.reat-grupo-card:hover { border-color: var(--accent, #c97c5d); }
.reat-grupo-card.ativo {
  border-color: var(--accent, #c97c5d);
  background: rgba(201, 124, 93, 0.1);
}
.reat-grupo-card .nome { font-weight: 600; margin-bottom: 6px; }
.reat-grupo-card .stats { font-size: 12px; color: #aaa; }
.reat-grupo-card .stats .v { color: var(--accent, #c97c5d); font-weight: 600; }

/* ── Filtros ──────────────────────────────────────────────────── */
.reat-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-card, #2a1f1a);
  border-radius: 8px;
  border: 1px solid #3a2820;
}

.reat-filtros input,
.reat-filtros select {
  background: #1a1a1a;
  color: #f5f2ed;
  border: 1px solid #444;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.reat-filtros input { min-width: 220px; }
.reat-filtros button {
  padding: 6px 14px;
  background: var(--accent, #c97c5d);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.reat-filtros button:hover { opacity: 0.9; }
.reat-filtros button.secundario {
  background: transparent;
  color: var(--accent, #c97c5d);
  border: 1px solid var(--accent, #c97c5d);
}

/* ── Tabela ───────────────────────────────────────────────────── */
.reat-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg-card, #2a1f1a);
  border-radius: 8px;
  overflow: hidden;
}

.reat-tabela th {
  background: #3a2820;
  padding: 10px 8px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ddd;
  position: sticky;
  top: 0;
}

.reat-tabela td {
  padding: 8px;
  border-bottom: 1px solid #3a2820;
  color: var(--text, #f5f2ed);
}

.reat-tabela tr.linha-arq:hover { background: rgba(255,255,255,0.03); }
.reat-tabela tr.linha-orcs { background: #1a1410; }
.reat-tabela tr.linha-orcs td { padding: 4px 12px; font-size: 12px; color: #bbb; }

.reat-tabela .col-expand {
  width: 30px;
  cursor: pointer;
  text-align: center;
}
.reat-tabela .col-expand .seta {
  display: inline-block;
  transition: transform 0.15s;
}
.reat-tabela .col-expand.aberto .seta { transform: rotate(90deg); }

.reat-tabela .col-codigo { width: 70px; font-family: monospace; }
.reat-tabela .col-vendedor { color: #aaa; font-size: 12px; }
.reat-tabela .col-vendedor.sem-dono { color: #f39c12; font-style: italic; }

.reat-tabela .dias {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 12px;
  min-width: 36px;
  text-align: center;
}
.reat-tabela .dias.amarelo { background: #f1c40f; color: #000; }
.reat-tabela .dias.laranja { background: #f39c12; color: #fff; }
.reat-tabela .dias.vermelho { background: #e74c3c; color: #fff; }
.reat-tabela .dias.cinza { background: #555; color: #ddd; }

.reat-tabela .valor-rs {
  text-align: right;
  font-weight: 600;
  color: var(--accent, #c97c5d);
  font-family: monospace;
}

.reat-tabela .col-acoes {
  white-space: nowrap;
  text-align: right;
}

/* Botões de ação dentro da tabela (linhas) */
.reat-tabela .acao-btn {
  background: transparent;
  border: 1px solid #555;
  color: #ccc;
  padding: 3px 8px;
  margin-left: 4px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.reat-tabela .acao-btn:hover {
  background: var(--accent, #c97c5d);
  color: white;
  border-color: var(--accent, #c97c5d);
}
.reat-tabela .acao-btn.danger:hover {
  background: #e74c3c;
  border-color: #e74c3c;
}

.reat-tabela .perdido {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Estado vazio */
.reat-vazio {
  text-align: center;
  padding: 40px;
  color: #888;
}


/* ────────────────────────────────────────────────────────────────
 * 3. MODAL GENÉRICO (p2-modal)
 *    Usado pra Configurar, Realocar, Confirmações
 * ──────────────────────────────────────────────────────────────── */

.p2-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p2-modal {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid var(--accent, #c97c5d);
  border-radius: 8px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  color: var(--text, #f5f2ed);
}

.p2-modal h3 {
  margin: 0 0 12px 0;
  color: var(--accent, #c97c5d);
}

.p2-modal p { margin: 8px 0; line-height: 1.5; }

.p2-modal .acoes {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.p2-modal button {
  padding: 8px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.p2-modal .btn-confirmar {
  background: var(--accent, #c97c5d);
  color: white;
}
.p2-modal .btn-cancelar {
  background: transparent;
  color: #aaa;
  border: 1px solid #555;
}

.p2-modal select,
.p2-modal input {
  width: 100%;
  background: #1a1a1a;
  color: #f5f2ed;
  border: 1px solid #444;
  padding: 8px;
  border-radius: 4px;
  margin-top: 6px;
  font-size: 14px;
}


/* ────────────────────────────────────────────────────────────────
 * 4. BADGE NO MENU (contador de inativos)
 * ──────────────────────────────────────────────────────────────── */

.menu-badge-reativacao {
  display: inline-block;
  background: #e74c3c;
  color: white;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}


/* ────────────────────────────────────────────────────────────────
 * 5. RESPONSIVO
 * ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .reat-tabela { font-size: 11px; }
  .reat-tabela .col-vendedor,
  .reat-tabela .col-cidade,
  .reat-tabela .col-email { display: none; }
}