/* ============================================================
 * DARVIGO — Desktop Clean (Atera-inspired light theme)
 *
 * SUBSTITUI dv-desktop-dark.css (que ficou problemático).
 *
 * Filosofia: SaaS limpo tipo Atera/Linear/Vercel
 *  - Sidebar dark com accent dourado
 *  - Content branco/cinza claro
 *  - Cards limpos com borda sutil
 *  - KPIs Atera-style: ícone colorido + número grande + label
 *  - Mínimo de !important — só pra sobrescrever inline styles
 *
 * Carrega APÓS dv-desktop-fixes.css.
 * ============================================================ */

:root {
  --dv-gold: #d4af37;
  --dv-gold-dark: #b8941f;
  --dv-gold-light: #f4d97e;
  --dv-bg: #f8fafc;
  --dv-card: #ffffff;
  --dv-border: #e2e8f0;
  --dv-border-strong: #cbd5e1;
  --dv-text: #0f172a;
  --dv-muted: #64748b;
  --dv-muted-light: #94a3b8;
  --dv-sidebar-bg: #0f1419;
  --dv-sidebar-text: #cbd5e1;
  --dv-sidebar-hover: rgba(212,175,55,.08);
  --dv-sidebar-active: rgba(212,175,55,.16);
}

/* ============== TIPOGRAFIA INTER ============== */
body, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  letter-spacing: -.1px;
  -webkit-font-smoothing: antialiased;
}

/* ============== SIDEBAR DARK ============== */
aside.tab-bar {
  background: var(--dv-sidebar-bg);
  border-right: 1px solid #1f2937;
  padding: 10px 8px;
}

.menu-topo {
  background: transparent;
  padding: 6px;
  margin-bottom: 4px;
}
.menu-topo-titulo {
  color: #475569;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  margin-bottom: 6px;
}
#menuBusca {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #f5f5f5;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  width: 100%;
}
#menuBusca::placeholder { color: #475569; }
#menuBusca:focus {
  border-color: var(--dv-gold);
  outline: none;
}

.menu-group {
  border: none;
  margin-top: 12px;
}
.menu-title {
  color: #475569;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0 10px 6px;
}

/* Sidebar buttons — clean Atera-style */
.tab-btn {
  color: var(--dv-sidebar-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: background .12s, color .12s;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.tab-btn:hover {
  background: var(--dv-sidebar-hover);
  color: #fff;
  border-color: transparent;
}
.tab-btn.ativa {
  background: var(--dv-sidebar-active);
  color: var(--dv-gold);
  border-color: rgba(212,175,55,.25);
  font-weight: 600;
}
.tab-btn.ativa::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--dv-gold);
  border-radius: 0 2px 2px 0;
  display: none; /* desabilitado, accent fica no fundo */
}
.tab-btn { position: relative; }

/* Tab icons — clean style sem caixinha */
.tab-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--dv-muted-light);
  flex-shrink: 0;
}
.tab-btn:hover .tab-ico {
  color: var(--dv-gold);
}
.tab-btn.ativa .tab-ico {
  color: var(--dv-gold);
}
.tab-ico svg { width: 18px; height: 18px; }

.tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

/* ============== TOPBAR ============== */
header,
#topbar,
.header {
  background: #ffffff;
  border-bottom: 1px solid var(--dv-border);
  padding: 10px 18px;
}

/* ============== CONTENT AREA LIGHT ============== */
main,
#appWrapper > main {
  background: var(--dv-bg);
  color: var(--dv-text);
}

.aba {
  background: transparent;
  padding: 0;
}

/* ============== KPI CARDS (Atera-style) — FORÇA WHITE ============== */
.dv-kpi,
.dv-kpi.kpi-receita,
.dv-kpi.kpi-despesa,
.dv-kpi.kpi-resultado,
.dv-kpi.kpi-clientes {
  background: var(--dv-card) !important;
  background-color: var(--dv-card) !important;
  background-image: none !important;
  border: 1px solid var(--dv-border) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  transition: transform .12s, box-shadow .15s !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  position: relative !important;
  overflow: hidden !important;
}
.dv-kpi::before, .dv-kpi::after { display: none !important; }
.dv-kpi:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
  border-color: var(--dv-border-strong) !important;
}

/* Top accent bar (substitui o header preto antigo) */
.dv-kpi { border-top: 3px solid var(--dv-gold) !important; }
.dv-kpi.kpi-receita   { border-top-color: #10b981 !important; }
.dv-kpi.kpi-despesa   { border-top-color: #ef4444 !important; }
.dv-kpi.kpi-resultado { border-top-color: var(--dv-gold) !important; }
.dv-kpi.kpi-clientes  { border-top-color: #3b82f6 !important; }

/* Ícone colorido em círculo (Atera style) */
.dv-kpi-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  background: transparent !important;
}
.dv-kpi-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(212,175,55,.12) !important;
  color: var(--dv-gold) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
}
.dv-kpi-icon svg { width: 17px !important; height: 17px !important; }

/* Variações de cor por tipo de KPI */
.dv-kpi.kpi-receita .dv-kpi-icon  { background: rgba(16,185,129,.12); color: #10b981; }
.dv-kpi.kpi-despesa .dv-kpi-icon  { background: rgba(239,68,68,.12);  color: #ef4444; }
.dv-kpi.kpi-resultado .dv-kpi-icon{ background: rgba(212,175,55,.12); color: var(--dv-gold); }
.dv-kpi.kpi-clientes .dv-kpi-icon { background: rgba(59,130,246,.12); color: #3b82f6; }

.dv-kpi-delta {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dv-bg);
  color: var(--dv-muted);
}
.dv-kpi-delta.delta-up,
.dv-kpi-delta[class*="positive"] { background: rgba(16,185,129,.1); color: #10b981; }
.dv-kpi-delta.delta-down,
.dv-kpi-delta[class*="negative"] { background: rgba(239,68,68,.1); color: #ef4444; }

.dv-kpi-label {
  color: var(--dv-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}
.dv-kpi-val {
  color: var(--dv-text) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  line-height: 1.1 !important;
}
.dv-kpi.kpi-receita .dv-kpi-val   { color: #10b981; }
.dv-kpi.kpi-despesa .dv-kpi-val   { color: #ef4444; }
.dv-kpi.kpi-resultado .dv-kpi-val { color: var(--dv-gold); }
.dv-kpi.kpi-clientes .dv-kpi-val  { color: var(--dv-text); }
.dv-kpi-sub {
  color: var(--dv-muted-light) !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}

/* ============== MINI METRICS ============== */
.dv-mini {
  background: var(--dv-card) !important;
  border: 1px solid var(--dv-border) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  transition: border-color .15s !important;
}
.dv-mini:hover { border-color: var(--dv-border-strong) !important; }
.dv-mini-label {
  color: var(--dv-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  margin-bottom: 2px !important;
}
.dv-mini-val {
  color: var(--dv-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  line-height: 1.1 !important;
}
.dv-mini-sub {
  color: var(--dv-muted-light) !important;
  font-size: 10px !important;
  margin-top: 2px !important;
}

/* ============== GREETING ============== */
.dv-dash-greeting {
  padding: 14px 0 !important;
}
.dv-dash-greeting h2,
#dashGreeting {
  color: var(--dv-text) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.4px !important;
  margin: 0 !important;
}
.dv-dash-greeting p,
#dashGreetingSub {
  color: var(--dv-muted) !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* Banner azul escuro "Base pronta..." — fica clean */
.dv-dash-headline,
#dashResumoInteligente {
  background: linear-gradient(135deg, #fffbf0, #fef9e7) !important;
  border: 1px solid rgba(212,175,55,.2) !important;
  color: #92400e !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  margin: 10px 0 !important;
}
.dv-dash-headline b,
#dashResumoInteligente b {
  color: var(--dv-gold-dark) !important;
}

/* ============== CARDS GENÉRICOS ============== */
.card,
.panel,
.module-panel,
.dv-card {
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: 12px;
  color: var(--dv-text);
}

/* ============== INPUTS LIMPOS ============== */
input:not([type=checkbox]):not([type=radio]):not(.dv-cmdk-input):not(.dv-pix-modal *),
select,
textarea {
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  color: var(--dv-text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  transition: border-color .12s, box-shadow .15s;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--dv-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}

/* ============== BOTÕES PRIMÁRIOS ============== */
button.primary,
.btn-primary,
.btn-gold,
button[class*="primary"]:not(.dv-cmdk-trigger):not(.dv-imp-foot *):not(.dv-onb-btn *) {
  background: linear-gradient(135deg, var(--dv-gold), var(--dv-gold-dark));
  color: #000;
  border: none;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 18px;
  transition: transform .1s, box-shadow .15s, opacity .12s;
  box-shadow: 0 2px 8px rgba(212,175,55,.25);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
button.primary:hover,
.btn-primary:hover,
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,175,55,.35);
}

/* ============== TABELAS LIMPAS ============== */
table {
  border-collapse: collapse;
  background: transparent;
  width: 100%;
}
table th {
  background: var(--dv-bg);
  color: var(--dv-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dv-border);
  text-align: left;
}
table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--dv-border);
  color: var(--dv-text);
  font-size: 13px;
}
table tr:hover td {
  background: rgba(212,175,55,.03);
}

/* ============== STATUS BADGES (pill style) ============== */
.badge,
[class*="status-"]:not([class*="status-card"]) {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.1px;
}
.badge-pendente, [class*="status-pendente"] {
  background: rgba(245,158,11,.12);
  color: #d97706;
  border: 1px solid rgba(245,158,11,.25);
}
.badge-andamento, [class*="status-execucao"], [class*="status-andamento"] {
  background: rgba(59,130,246,.12);
  color: #2563eb;
  border: 1px solid rgba(59,130,246,.25);
}
.badge-concluido, [class*="status-finalizada"], [class*="status-conclu"] {
  background: rgba(16,185,129,.12);
  color: #059669;
  border: 1px solid rgba(16,185,129,.25);
}

/* ============== TÍTULOS COMPACTOS ============== */
h1, h2, h3, h4, h5 {
  color: var(--dv-text);
  letter-spacing: -.3px;
}
h1 { font-size: 20px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
h4 { font-size: 13px; font-weight: 600; }
h5 { font-size: 12px; font-weight: 600; }

/* ============== DENSIDADE GLOBAL — Atera style ============== */
body { font-size: 13px; }
.aba { padding: 0 !important; }
.dv-dash-kpis,
.dv-dash-minis {
  gap: 10px !important;
}
.dv-dash-main {
  gap: 10px !important;
}
/* Cards de chart mais compactos */
.card, .panel, .module-panel, .dv-card {
  padding: 14px !important;
  border-radius: 10px !important;
}
/* Form fields menores */
label { font-size: 11px !important; font-weight: 600 !important; color: var(--dv-muted) !important; }
.form-group { margin-bottom: 10px !important; }

/* ============== SCROLLBAR DISCRETA ============== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============== WHATSAPP WIDGET DISCRETO ============== */
@media (min-width: 1025px) {
  #darvigoWhatsappBtn,
  #darvigoWaButton,
  .dv-wa-fab,
  [id*="whatsapp"][class*="float"],
  [class*="wa-float"]:not(.modal *) {
    width: 44px;
    height: 44px;
    bottom: 18px;
    right: 18px;
    opacity: .55;
    transition: opacity .2s, transform .15s;
    animation: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
  #darvigoWhatsappBtn:hover, .dv-wa-fab:hover {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* ============== BRIDGE CARDS (config aba) ============== */
.dv-bridge-card {
  background: var(--dv-card) !important;
  border: 1px solid var(--dv-border) !important;
  color: var(--dv-text) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.dv-bridge-card h3 {
  color: var(--dv-text) !important;
}
.dv-bridge-card h3 svg {
  color: var(--dv-gold);
}
.dv-bridge-card p {
  color: var(--dv-muted) !important;
}
.dv-bridge-card label {
  color: var(--dv-muted) !important;
}
.dv-bridge-card input {
  background: var(--dv-bg) !important;
  border-color: var(--dv-border) !important;
  color: var(--dv-text) !important;
}
.dv-bridge-card input::placeholder {
  color: var(--dv-muted-light) !important;
}
.dv-bridge-card input:focus {
  border-color: var(--dv-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.12) !important;
}

/* Card "Indique e ganhe" tem leve fundo dourado */
#dv-bridge-config-cards .dv-bridge-card:last-child {
  background: linear-gradient(135deg, #fffdf5, #fef9e7) !important;
  border-color: rgba(212,175,55,.3) !important;
}

/* ============== ESCONDE PLACEHOLDER VÍDEO ============== */
.placeholder-video,
[class*="placeholder-video"],
[id*="placeholder-video"] {
  display: none !important;
}

/* ============== TOGGLE THEME REMOVIDO (não precisa mais) ============== */
.dv-theme-toggle { display: none !important; }

/* ============== CMD+K TRIGGER NO HEADER (mais visível) ============== */
#dv-cmdk-hint-desk {
  background: linear-gradient(135deg, rgba(212,175,55,.1), rgba(212,175,55,.04)) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  color: var(--dv-gold-dark) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all .15s !important;
  margin-left: 12px !important;
}
#dv-cmdk-hint-desk:hover {
  border-color: var(--dv-gold) !important;
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.08)) !important;
  color: var(--dv-gold-dark) !important;
  transform: translateY(-1px);
}
#dv-cmdk-hint-desk kbd {
  background: #fff !important;
  border: 1px solid rgba(212,175,55,.4) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  font-family: 'SF Mono', 'Courier New', monospace !important;
  color: var(--dv-gold-dark) !important;
  margin-left: 4px !important;
  font-weight: 700 !important;
}

/* ============== POLISH FINAL ============== */
hr, .divider {
  border: none;
  border-top: 1px solid var(--dv-border);
  margin: 16px 0;
}

a:not(.tab-btn):not(.dv-btn):not(.btn) {
  color: var(--dv-gold);
  text-decoration: none;
}
a:not(.tab-btn):hover {
  color: var(--dv-gold-dark);
  text-decoration: underline;
}


/* ===== V3 OVERRIDE: Cmd+K hint MAIS VISIVEL ===== */
#dv-cmdk-hint-desk,
button#dv-cmdk-hint-desk,
header #dv-cmdk-hint-desk,
.header #dv-cmdk-hint-desk,
#topbar #dv-cmdk-hint-desk {
  background: linear-gradient(135deg, #d4af37, #b8941f) !important;
  background-color: #d4af37 !important;
  border: 2px solid #b8941f !important;
  color: #000 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 12px !important;
  box-shadow: 0 3px 10px rgba(212,175,55,.4) !important;
  transition: transform .1s, box-shadow .15s !important;
}
#dv-cmdk-hint-desk:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(212,175,55,.55) !important;
  background: linear-gradient(135deg, #f4d97e, #d4af37) !important;
}
#dv-cmdk-hint-desk svg {
  color: #000 !important;
  width: 14px !important;
  height: 14px !important;
}
#dv-cmdk-hint-desk kbd {
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  font-family: 'SF Mono', 'Courier New', monospace !important;
  color: #000 !important;
  margin-left: 4px !important;
  font-weight: 800 !important;
}