/* ============================================================
   MESTRA — identidade visual oficial
   Azul #0047FF · Marinho #10162B · Marfim #F7F4ED
   DM Serif Display (destaques) + DM Sans (interface)
   Carregado DEPOIS de style.css: só sobrescreve, não remove nada.
   ============================================================ */

:root{
  --m-azul:#0047FF;
  --m-azul-claro:#2D69FF;
  --m-azul-suave:#E6EDFF;
  --m-marinho:#10162B;
  --m-marfim:#F7F4ED;
  --m-marfim-2:#EFEBE1;
  --m-serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --m-sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Inter var', 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── Tema CLARO (padrão): marfim + azul ── */
body.theme-light{
  --bg:#F7F4ED; --bg1:#F7F4ED; --bg2:#FFFFFF; --bg3:#EFEBE1;
  --border:rgba(16,22,43,.10);
  --text:#10162B; --text1:#10162B; --text2:#59607A; --text3:#9AA0B3;
  --accent:#0047FF; --accent-bright:#2D69FF; --accent-ink:#FFFFFF;
  --accent-dim:rgba(0,71,255,.08); --accent-border:rgba(0,71,255,.28);
  --blue:#0047FF;
}

/* ── Tema ESCURO (opcional pelo botão): marinho + azul ── */
body:not(.theme-light){
  --bg:#0C1122; --bg1:#10162B; --bg2:#151C36; --bg3:#1D2645;
  --border:rgba(247,244,237,.10);
  --text:#F7F4ED; --text1:#F7F4ED; --text2:#A7AEC4; --text3:#6C7391;
  --accent:#3D6BFF; --accent-bright:#6C8EFF; --accent-ink:#FFFFFF;
  --accent-dim:rgba(61,107,255,.14); --accent-border:rgba(61,107,255,.38);
  --blue:#6C8EFF;
}

/* ── Tipografia ── */
body, button, input, select, textarea{ font-family:var(--m-sans); }
/* Títulos das telas: DM Serif Display (a letra aprovada) */
.ws-top h2, .odash-head h1, .ads-brand-modal h3{
  font-family:var(--m-serif) !important;
  font-weight:400 !important;
  letter-spacing:.01em;
}
.m-destaque{ font-family:var(--m-serif); font-weight:400; color:var(--m-azul); }

/* ── Logo real da Mestra ── */
.connect-box h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* nome só para leitores de tela */
.sidebar-wolf{ height:32px !important; width:32px !important; border-radius:8px; filter:none !important; }
.sidebar-wordmark{ display:block; height:20px; width:auto; }
body:not(.theme-light) .sidebar-wordmark{ filter:brightness(0) invert(1); }

/* ── Botões primários: azul sólido, texto branco ── */
.btn-primary,
.cfg-save, .disp-cta, .aa-save, .aa-test-row button,
.ca-new, .ca-btn-primary, .aa-fnum,
#btn-request-pairing-code{
  background:var(--m-azul) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:10px;
  font-weight:600;
}
.btn-primary:hover,
.cfg-save:hover, .disp-cta:hover, .aa-save:hover, .ca-new:hover,
#btn-request-pairing-code:hover{
  background:var(--m-azul-claro) !important;
  filter:none !important;
  box-shadow:0 6px 18px rgba(0,71,255,.25) !important;
}
.disp-cta, .ca-new{ box-shadow:0 4px 14px rgba(0,71,255,.22) !important; }
.fin-add-btn:hover, .aa-add:hover{ background:var(--m-azul) !important; color:#fff !important; }

/* ── Estados ativos e badges ── */
.crm-act-tab.active, .crm-label-btn.active, .nav-badge,
.crm-comment-item::before{
  background:var(--m-azul) !important; color:#fff !important;
}
body .crm-act-tab.active, body .crm-label-btn.active{ color:#fff !important; }

/* ── Menu lateral ── */
body.theme-light .sidebar{ background:#FFFFFF !important; border-right:1px solid var(--border) !important; }
body.theme-light .nav-item{ color:var(--text2) !important; }
body.theme-light .nav-item:hover{ background:var(--m-azul-suave) !important; color:var(--m-azul) !important; }
body.theme-light .nav-item.active{
  background:var(--m-azul-suave) !important;
  color:var(--m-azul) !important;
  box-shadow:inset 3px 0 0 var(--m-azul);
}
body:not(.theme-light) .sidebar{ background:#10162B !important; }
body:not(.theme-light) .nav-item.active{
  background:rgba(61,107,255,.16) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 var(--m-azul-claro);
}

/* ── Telas de login/conexão ── */
body.theme-light #screen-login,
body.theme-light #screen-connect{
  background:radial-gradient(ellipse at center, #FFFFFF 0%, var(--m-marfim) 70%) !important;
}
body:not(.theme-light) #screen-login,
body:not(.theme-light) #screen-connect{
  background:radial-gradient(ellipse at center, #1D2645 0%, #0C1122 70%) !important;
}

/* ── Dashboard (laranja/bronze -> azul Mestra) ── */
#dashboard-root{
  --d-brand:#0047FF !important;
  --d-bsoft:#E6EDFF !important;
  --d-blue:#0047FF !important;
  --d-bluesoft:#E6EDFF !important;
  --d-bg:#F7F4ED !important;
  --d-ink:#10162B !important;
  --d-ink2:#59607A !important;
  font-family:var(--m-sans) !important;
}

/* ── Foco e seleção ── */
:focus-visible{ outline:2px solid var(--m-azul); outline-offset:2px; }
::selection{ background:var(--m-azul); color:#fff; }

/* ── Marca nas telas de login/conexão: nome + ícone pequeno ao lado ── */
.connect-brand{ display:inline-flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 10px; }
.connect-brand-icon{ width:44px; height:44px; border-radius:11px; display:block; }
.connect-brand-name{ height:30px; width:auto; display:block; }
body:not(.theme-light) .connect-brand-name{ filter:brightness(0) invert(1); }