/* ════════════════════════════════════════════════════════════════
 *  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, var(--t-1a1a1a, #1a1a1a)) !important;
  color: var(--text, var(--t-f5f2ed, #f5f2ed)) !important;
  border: 1px solid var(--t-444444, #444) !important;
  padding: 4px 8px;
  border-radius: 4px;
}
.fp-sel option,
select.fp-sel option,
#mrs-mes option,
#mrs-ano option {
  background-color: var(--t-1a1a1a, #1a1a1a) !important;
  color: var(--t-f5f2ed, #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 auto !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, var(--t-f5f2ed, #f5f2ed));
}

.reat-header h1 small {
  font-size: 14px;
  color: var(--t-888888, #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, var(--t-1a1a1a, #1a1a1a)) !important;
  color: var(--text, var(--t-f5f2ed, #f5f2ed)) !important;
  border: 1px solid var(--t-555555, #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, var(--t-c97c5d, #c97c5d)) !important;
  color: #fff !important;
  border-color: var(--accent, var(--t-c97c5d, #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, var(--t-2a1f1a, #2a1f1a));
  border: 1px solid var(--t-4a3528, #4a3528);
  border-radius: 8px;
  padding: 14px;
}

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

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

.reat-card-resumo.critico .valor { color: var(--t-e74c3c, #e74c3c); }
.reat-card-resumo.alerta  .valor { color: var(--t-f39c12, #f39c12); }
.reat-card-resumo.atencao .valor { color: var(--t-f1c40f, #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, var(--t-2a1f1a, #2a1f1a));
  border: 1px solid var(--t-4a3528, #4a3528);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.reat-grupo-card:hover { border-color: var(--accent, var(--t-c97c5d, #c97c5d)); }
.reat-grupo-card.ativo {
  border-color: var(--accent, var(--t-c97c5d, #c97c5d));
  background: rgba(var(--t-c97c5d-rgb, 201, 124, 93), 0.1);
}
.reat-grupo-card .nome { font-weight: 600; margin-bottom: 6px; }
.reat-grupo-card .stats { font-size: 12px; color: var(--t-aaaaaa, #aaa); }
.reat-grupo-card .stats .v { color: var(--accent, var(--t-c97c5d, #c97c5d)); font-weight: 600; }

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

.reat-filtros input,
.reat-filtros select {
  background: var(--t-1a1a1a, #1a1a1a);
  color: var(--t-f5f2ed, #f5f2ed);
  border: 1px solid var(--t-444444, #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, var(--t-c97c5d, #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, var(--t-c97c5d, #c97c5d));
  border: 1px solid var(--accent, var(--t-c97c5d, #c97c5d));
}

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

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

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

.reat-tabela tr.linha-arq:hover { background: rgba(var(--t-ffffff-rgb, 255,255,255),0.03); }
.reat-tabela tr.linha-orcs { background: var(--t-1a1410, #1a1410); }
.reat-tabela tr.linha-orcs td { padding: 4px 12px; font-size: 12px; color: var(--t-bbbbbb, #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: var(--t-aaaaaa, #aaa); font-size: 12px; }
.reat-tabela .col-vendedor.sem-dono { color: var(--t-f39c12, #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: var(--t-f1c40f, #f1c40f); color: #000; }
.reat-tabela .dias.laranja { background: var(--t-f39c12, #f39c12); color: #fff; }
.reat-tabela .dias.vermelho { background: var(--t-e74c3c, #e74c3c); color: #fff; }
.reat-tabela .dias.cinza { background: var(--t-555555, #555); color: var(--t-dddddd, #ddd); }

.reat-tabela .valor-rs {
  text-align: right;
  font-weight: 600;
  color: var(--accent, var(--t-c97c5d, #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 var(--t-555555, #555);
  color: var(--t-cccccc, #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, var(--t-c97c5d, #c97c5d));
  color: white;
  border-color: var(--accent, var(--t-c97c5d, #c97c5d));
}
.reat-tabela .acao-btn.danger:hover {
  background: var(--t-e74c3c, #e74c3c);
  border-color: var(--t-e74c3c, #e74c3c);
}

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

/* Estado vazio */
.reat-vazio {
  text-align: center;
  padding: 40px;
  color: var(--t-888888, #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, var(--t-2a1f1a, #2a1f1a));
  border: 1px solid var(--accent, var(--t-c97c5d, #c97c5d));
  border-radius: 8px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  color: var(--text, var(--t-f5f2ed, #f5f2ed));
}

.p2-modal h3 {
  margin: 0 0 12px 0;
  color: var(--accent, var(--t-c97c5d, #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, var(--t-c97c5d, #c97c5d));
  color: white;
}
.p2-modal .btn-cancelar {
  background: transparent;
  color: var(--t-aaaaaa, #aaa);
  border: 1px solid var(--t-555555, #555);
}

.p2-modal select,
.p2-modal input {
  width: 100%;
  background: var(--t-1a1a1a, #1a1a1a);
  color: var(--t-f5f2ed, #f5f2ed);
  border: 1px solid var(--t-444444, #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: var(--t-e74c3c, #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; }
}