/* Zap Mágico · painel do cliente, tema branco no padrão dos painéis de WhatsApp em nuvem
   (WhatsApp Web, Z-API, Evolution Manager). Carregado depois do style.css. */
:root {
  --bg-main: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f6f6;
  --border-color: #e9edef;
  --primary: #00a884;
  --primary-hover: #008069;
  --primary-light: #e7f8f3;
  --text-main: #111b21;
  --text-muted: #667781;
  --danger: #ea0038;
  --warning: #ffb02e;
  --radius: 10px;
  --font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-chat-bg: #efeae2;
  --wa-bubble-out: #d9fdd3;
  --wa-bubble-in: #ffffff;
  --wa-header: #f0f2f5;
}

body.light-theme { background: #ffffff; color: var(--text-main); font-family: var(--font-family); }

/* Barra lateral */
body.light-theme .sidebar { background: #ffffff; border-right: 1px solid var(--border-color); }
body.light-theme .brand { border-bottom: 1px solid var(--border-color); }
body.light-theme .brand-text h1 { color: var(--text-main); font-weight: 700; font-size: 18px; }
body.light-theme .logo-icon { background: var(--primary); color: #fff; border-radius: 10px; }
body.light-theme .nav-item { color: #3b4a54; border-radius: 8px; font-weight: 500; }
body.light-theme .nav-item:hover { background: var(--bg-card-hover); color: var(--text-main); }
body.light-theme .nav-item.active { background: var(--primary-light); color: var(--primary-hover); font-weight: 600; }

/* Topo */
body.light-theme .topbar { background: #ffffff; border-bottom: 1px solid var(--border-color); box-shadow: none; }
body.light-theme .content-body { background: #ffffff; }

/* Cartões */
body.light-theme .card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 1px 2px rgba(11, 20, 26, 0.06); }
body.light-theme h2, body.light-theme h3 { color: var(--text-main); }
body.light-theme .card h2 { font-size: 18px; font-weight: 600; }
body.light-theme .subtitle, body.light-theme .card p { color: var(--text-muted); }

/* Botões e campos */
body.light-theme .btn { border-radius: 24px; font-weight: 600; }
body.light-theme .btn-primary { background: var(--primary); color: #ffffff; border: 0; box-shadow: none; }
body.light-theme .btn-primary:hover { background: var(--primary-hover); }
body.light-theme .btn-secondary, body.light-theme .btn-outline { background: #ffffff; color: var(--primary-hover); border: 1px solid #d1d7db; }
body.light-theme .btn-secondary:hover, body.light-theme .btn-outline:hover { background: var(--bg-card-hover); }
body.light-theme input, body.light-theme select, body.light-theme textarea,
body.light-theme .form-select, body.light-theme .form-input, body.light-theme .form-control {
  background: #ffffff; color: var(--text-main); border: 1px solid #d1d7db; border-radius: 8px;
}
body.light-theme input:focus, body.light-theme select:focus, body.light-theme textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.15);
}

/* QR e status */
body.light-theme .qr-container { background: #ffffff; border: 1px solid var(--border-color); border-radius: 12px; }
body.light-theme .connection-status-pill { border-radius: 999px; font-weight: 600; }
body.light-theme .connection-status-pill.connected { background: #e7f8f3; color: #008069; }
body.light-theme .connection-status-pill.connecting { background: #fff7e6; color: #9a6700; }
body.light-theme .connection-status-pill.disconnected { background: #fdecef; color: #c4002b; }

/* Atendimento no formato WhatsApp Web */
body.light-theme .inbox-layout { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: #ffffff; }
body.light-theme .chat-list-sidebar { background: #ffffff; border-right: 1px solid var(--border-color); }
body.light-theme .chat-search { background: #ffffff; border-bottom: 1px solid var(--border-color); }
body.light-theme .chat-search input { background: var(--wa-header); border: 0; border-radius: 8px; }
body.light-theme .chat-conv-item { border-bottom: 1px solid #f0f2f5; color: var(--text-main); }
body.light-theme .chat-conv-item:hover { background: var(--bg-card-hover); }
body.light-theme .chat-conv-item.active { background: #f0f2f5; }
body.light-theme .chat-header { background: var(--wa-header); border-bottom: 1px solid var(--border-color); color: var(--text-main); }
body.light-theme .chat-messages { background: var(--wa-chat-bg); }
body.light-theme .chat-bubble { box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); color: var(--text-main); border-radius: 8px; }
body.light-theme .chat-bubble.from-me { background: var(--wa-bubble-out); }
body.light-theme .chat-bubble.from-them { background: var(--wa-bubble-in); }
body.light-theme .chat-input-area { background: var(--wa-header); border-top: 1px solid var(--border-color); }
body.light-theme .chat-input-area .chat-input { background: #ffffff; border: 0; border-radius: 8px; }
body.light-theme .empty-state { color: var(--text-muted); }

body.light-theme table th { color: var(--text-muted); background: #f8f9fa; }
body.light-theme table td { border-color: var(--border-color); }
body.light-theme a { color: var(--primary-hover); }

/* Modo cliente: só o essencial para quem vai atender. */
body.client-mode .badge-vps,
body.client-mode #tokenBadge,
body.client-mode #btnNewAccount,
body.client-mode [data-tab="tab-webhooks"],
body.client-mode [data-tab="tab-api"],
body.client-mode [data-tab="tab-campaigns"],
body.client-mode .zm-hide-client { display: none !important; }

/* Lista de conversas legível no tema branco */
body.light-theme .chat-conv-name { color: var(--text-main); font-weight: 600; }
body.light-theme .chat-conv-last-msg { color: var(--text-muted); }
body.light-theme .chat-conv-time { color: var(--text-muted); }
body.light-theme .chat-bubble-text { color: var(--text-main); }
body.light-theme .chat-bubble-time { color: #667781; }
body.light-theme .chat-header h3, body.light-theme #currentContactName { color: var(--text-main); }

/* Aba Conectar IA */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 14px 0 22px; }
.agent-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; background: #fff; min-width: 0; margin-bottom: 14px; }
.agent-card h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-main); }
.agent-card pre { margin: 0 0 10px; white-space: pre-wrap; word-break: break-all; background: #f0f2f5; border-radius: 8px; padding: 12px; font-size: 12.5px; line-height: 1.6; color: var(--text-main); max-height: 420px; overflow: auto; }
.agent-actions { display: flex; gap: 8px; }
#agentContent h3 { margin: 18px 0 4px; font-size: 16px; color: var(--text-main); }

/* Logo oficial v1.5.6 */
body.light-theme .logo-icon.zm-logo { width: 40px; height: 40px; border-radius: 10px; background: transparent; object-fit: cover; padding: 0; }