/* ============================================================
   Mapa Local SDR — Light Theme (design system hq.growth)
   ============================================================
   Aplica EXATAMENTE o design system hq.growth Material 3:
   - Background light (#f8f9ff)
   - Texto azul escuro (#0b1c30)
   - Cards branco (#fff)
   - Accents azul (#00288e family)
   - Fonte Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

:root {
    /* Paleta hq.growth Material 3 — exato */
    --ml-primary: #00288e;
    --ml-primary-container: #1e40af;
    --ml-on-primary: #fff;
    --ml-on-primary-container: #a8b8ff;
    --ml-primary-fixed: #dde1ff;
    --ml-primary-fixed-dim: #b8c4ff;
    --ml-on-primary-fixed: #001453;

    --ml-secondary: #0058be;
    --ml-secondary-container: #2170e4;
    --ml-on-secondary: #fff;

    --ml-tertiary: #003564;
    --ml-tertiary-container: #004c8b;

    --ml-error: #ba1a1a;
    --ml-error-container: #ffdad6;
    --ml-on-error: #fff;

    --ml-surface: #f8f9ff;
    --ml-surface-bright: #f8f9ff;
    --ml-surface-dim: #cbdbf5;
    --ml-surface-container: #e5eeff;
    --ml-surface-container-low: #eff4ff;
    --ml-surface-container-high: #dce9ff;
    --ml-surface-container-highest: #d3e4fe;
    --ml-surface-container-lowest: #fff;
    --ml-surface-variant: #d3e4fe;

    --ml-text-primary: #0b1c30;
    --ml-text-secondary: #475569;
    --ml-text-muted: #6b7280;
    --ml-border: rgba(0, 40, 142, 0.2);
}

/* ===== Tipografia Inter (igual hq.growth) ===== */
html, body, * {
    font-family: Inter, "Inter Fallback", system-ui, -apple-system, sans-serif !important;
}

/* ===== Body LIGHT ===== */
html, body {
    background-color: var(--ml-surface) !important;
    color: var(--ml-text-primary) !important;
}

#root, main, [class*="App"], [class*="Layout"] {
    background-color: var(--ml-surface) !important;
    color: var(--ml-text-primary) !important;
}

/* ===== Inverter cores DARK específicas → LIGHT ===== */

/* Slate / Gray dark BACKGROUNDS → tons claros hq.growth */
[class*="bg-slate-9"], [class*="bg-slate-800"], [class*="bg-slate-7"],
[class*="bg-gray-9"], [class*="bg-gray-800"], [class*="bg-gray-7"],
[class*="bg-zinc-9"], [class*="bg-zinc-8"], [class*="bg-zinc-7"],
[class*="bg-neutral-9"], [class*="bg-neutral-8"],
[class*="bg-stone-9"], [class*="bg-stone-8"] {
    background-color: var(--ml-surface-container-lowest) !important;
    color: var(--ml-text-primary) !important;
}

/* Slate / Gray meio → containers level high */
[class*="bg-slate-6"], [class*="bg-slate-5"],
[class*="bg-gray-6"], [class*="bg-gray-5"],
[class*="bg-zinc-6"], [class*="bg-zinc-5"] {
    background-color: var(--ml-surface-container) !important;
    color: var(--ml-text-primary) !important;
}

/* Backgrounds com gradient escuro/teal → branco/surface
   APENAS pra cards e containers (DIV/SECTION), NÃO pra buttons */
div[class*="bg-gradient"], section[class*="bg-gradient"],
article[class*="bg-gradient"] {
    background: var(--ml-surface-container-lowest) !important;
    color: var(--ml-text-primary) !important;
}

/* dashboardBg / glassBg / mainBg variantes do tema dark original */
[class*="bg-dashboardBg"], [class*="bg-glassBg"], [class*="bg-mainBg"],
[class*="bg-darkBg"], [class*="bg-cardBg"] {
    background-color: var(--ml-surface) !important;
    color: var(--ml-text-primary) !important;
}

/* Cards principais */
[class*="card"], [class*="Card"],
[class*="rounded"][class*="bg-"],
[class*="border"][class*="rounded"] {
    background-color: var(--ml-surface-container-lowest) !important;
    color: var(--ml-text-primary) !important;
    border-color: var(--ml-border) !important;
    box-shadow: 0 2px 8px rgba(0, 40, 142, 0.06);
}

/* ===== Texto: forçar contraste TODO escuro ===== */
/* Previously: textos claros do dark theme caíam em cinza-claro/azul-claro
   no light theme. Agora forçamos AZUL ESCURO em tudo que era claro. */
[class*="text-white"],
[class*="text-gray-"], [class*="text-slate-"], [class*="text-zinc-"],
[class*="text-textHead"], [class*="text-textBody"],
[class*="text-emerald"], [class*="text-teal"], [class*="text-cyan"],
[class*="text-blue-1"], [class*="text-blue-2"], [class*="text-blue-3"],
p, span, div {
    color: var(--ml-text-primary) !important;
}

/* Fallback geral pra elementos com classe genérica e cor herdada clara */
* {
    color: inherit;
}
body * {
    color: var(--ml-text-primary);
}

/* Textos muted específicos */
[class*="opacity-5"], [class*="opacity-6"], [class*="opacity-7"],
small, [class*="text-sm"][class*="text-gray"] {
    color: var(--ml-text-secondary) !important;
}

/* ===== Headings em primary blue ===== */
h1, h2, h3, h4 {
    color: var(--ml-primary) !important;
    font-weight: 700;
}
h5, h6 {
    color: var(--ml-secondary) !important;
}

/* ===== Inputs ===== */
input, select, textarea {
    background-color: #fff !important;
    color: var(--ml-text-primary) !important;
    border: 1px solid var(--ml-border) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--ml-text-muted) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--ml-primary) !important;
    outline: 2px solid var(--ml-primary-fixed-dim) !important;
}

/* ===== Botões ===== */

/* Botão Logout — vermelho gradient (FIRST! antes do azul pra não ser sobrescrito) */
button[class*="from-red"], button[class*="from-redBase"],
button[class*="bg-red"], button[class*="bg-error"],
button[class*="logout" i] {
    background: linear-gradient(135deg, #ba1a1a 0%, #93000a 100%) !important;
    background-image: linear-gradient(135deg, #ba1a1a 0%, #93000a 100%) !important;
    color: #fff !important;
    border: none !important;
}
button[class*="from-red"] *, button[class*="bg-red"] * {
    color: #fff !important;
}

/* Botões primary azul: gradient teal/emerald/cyan/blue → AZUL Mapa Local */
button[class*="from-emerald"],
button[class*="from-teal"],
button[class*="from-cyan"],
button[class*="from-blue"],
button[class*="bg-blue"],
button[class*="primary"],
button[type="submit"] {
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-secondary) 100%) !important;
    background-image: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-secondary) 100%) !important;
    color: var(--ml-on-primary) !important;
    border: none !important;
}
button[class*="from-emerald"] *,
button[class*="from-teal"] *,
button[class*="from-cyan"] *,
button[class*="from-blue"] *,
button[class*="primary"] *,
button[type="submit"] * {
    color: var(--ml-on-primary) !important;
}

/* Botões neutros (slateButton/slateContent) → secondary container */
button[class*="from-slate"], button[class*="from-slateButton"],
button[class*="bg-slate"][class*="rounded"] {
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-primary-container) 100%) !important;
    background-image: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-primary-container) 100%) !important;
    color: var(--ml-on-primary) !important;
    border: none !important;
}
button[class*="from-slate"] *, button[class*="from-slateButton"] * {
    color: var(--ml-on-primary) !important;
}

/* Hover state */
button[class*="from-emerald"]:hover, button[class*="from-blue"]:hover,
button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--ml-primary-container) 0%, var(--ml-secondary-container) 100%) !important;
}

/* Botões secundários outline (text-only) */
button[class*="outline"], button[class*="ghost"] {
    background: transparent !important;
    color: var(--ml-primary) !important;
    border: 1px solid var(--ml-primary) !important;
}

/* ===== Bottom nav ===== */
[class*="bottom-0"], footer, [class*="footer"] {
    background-color: var(--ml-surface-container-lowest) !important;
    border-top: 1px solid var(--ml-border) !important;
    color: var(--ml-text-primary) !important;
}

/* Tab ativo no bottom nav */
[aria-selected="true"], [class*="active"][class*="tab"] {
    background-color: var(--ml-primary-container) !important;
    color: var(--ml-on-primary) !important;
}

/* ===== Toggle switches — visíveis em light theme ===== */
[role="switch"], [class*="switch"], [class*="toggle"],
input[type="checkbox"] + [class*="slider"],
[class*="rounded-full"][class*="bg-gray"] {
    background-color: #cbd5e1 !important;  /* slate-300 — base off */
}

[role="switch"][aria-checked="true"],
[class*="switch"][aria-checked="true"],
[class*="toggle"][aria-checked="true"],
input[type="checkbox"]:checked + [class*="slider"] {
    background-color: var(--ml-primary) !important;  /* azul ON */
}

/* Bolinha do switch */
[role="switch"] > [class*="rounded-full"]::before,
[class*="switch"] [class*="thumb"] {
    background-color: #fff !important;
    border: 1px solid var(--ml-border);
}

/* ===== Status badges ===== */
[class*="status"][class*="online" i],
[class*="badge"][class*="online" i] {
    background-color: var(--ml-secondary-container) !important;
    color: var(--ml-on-primary) !important;
}

/* ===== Esconder marca ZapGPT ===== */

/* Tela de login: 3 botões inferiores */
a[href*="wa.me/55519"],
a[href*="instagram.com/ogrowthbot"],
a[href*="instagram.com/zap"],
a[href*="youtube.com/channel/UCUVZplseV8XQubXCUK2UYTQ"],
a[href*="youtu.be"],
a[href*="ozapgpt.com.br"] {
    display: none !important;
}

/* Footer "Compre" e variações */
[class*="footer-cta"],
a[href*="#pricing"],
a[href*="ozapgpt.com.br/#pricing"] {
    display: none !important;
}

/* Tab Tutorial — esconder via JS injection (ver index.html) */

/* Logos ZapGPT */
img[src*="zap-gpt"], img[src*="zapgpt"],
img[alt*="Zap" i], img[alt*="ZapGPT" i] {
    display: none !important;
}

/* ===== Scroll bars consistentes ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--ml-surface-container-low);
}
::-webkit-scrollbar-thumb {
    background: var(--ml-primary-fixed-dim);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ml-primary-container);
}

/* ===== Linhas, separadores, bordas ===== */
hr, [class*="divider"], [class*="border-gray"], [class*="border-slate"] {
    border-color: var(--ml-border) !important;
}

/* ===== Modal/Dropdown overlays ===== */
[class*="modal"], [class*="dropdown"], [class*="popup"], [role="dialog"] {
    background-color: var(--ml-surface-container-lowest) !important;
    color: var(--ml-text-primary) !important;
    border: 1px solid var(--ml-border) !important;
    box-shadow: 0 8px 32px rgba(0, 40, 142, 0.12);
}

/* ===== Override final fallback (any inline dark bg) ===== */
[style*="rgb(15, 23, 42)"],
[style*="rgb(17, 24, 39)"],
[style*="rgb(30, 41, 59)"],
[style*="rgb(31, 41, 55)"],
[style*="background-color:#0"],
[style*="background-color:#1"] {
    background-color: var(--ml-surface-container-lowest) !important;
    color: var(--ml-text-primary) !important;
}