/* ═══════════════════════════════════════════════════════════════════════
   BARRA DO TOPO ÚNICA (.mf-topbar) — Raylook, 07/10/2026
   Porte da jessicacerqueira (5134100), na marca ONYX & OURO (§6 do CLAUDE.md).
   Mesmo HTML em todas as telas da loja; a lógica está em js/topbar.js.
   Arquivo AUTOSSUFICIENTE (configurações, whatsapp e envios não carregam o
   app.css) e com classes próprias + !important porque cada tela ainda tem o
   seu .topbar antigo no <style> (altura, padding, título em degradê...).
   Texto sobre ouro é ONYX, nunca branco (contraste).
   ═══════════════════════════════════════════════════════════════════════ */
:root { --mf-topbar-h: 60px; }

header.topbar.mf-topbar {
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important; height: var(--mf-topbar-h) !important; min-height: var(--mf-topbar-h) !important;
  padding: 0 20px !important; margin: 0 !important; box-sizing: border-box !important; width: 100% !important;
  flex-shrink: 0 !important;
  background: #14110d !important;
  border: 0 !important; border-bottom: 1px solid rgba(201, 160, 99, .28) !important;
  box-shadow: 0 1px 0 rgba(201, 160, 99, .10), 0 4px 14px rgba(0, 0, 0, .18) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}
.mf-topbar .mf-topbar__brand {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  text-decoration: none !important; cursor: pointer;
}
.mf-topbar .mf-topbar__badge.logo-badge {
  width: 34px !important; height: 34px !important; border-radius: 9px !important; flex-shrink: 0;
  display: grid !important; place-items: center !important; margin: 0 !important;
  background: rgba(201, 160, 99, .12) !important; border: 1.5px solid rgba(201, 160, 99, .5) !important;
  color: #e8d3a3 !important; -webkit-text-fill-color: #e8d3a3 !important;
  font: 800 14px/1 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important; letter-spacing: -.02em;
}
.mf-topbar .mf-topbar__brand:hover .mf-topbar__badge.logo-badge { border-color: #e8d3a3 !important; }
.mf-topbar .mf-topbar__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
/* Wordmark: degradê metálico recortado no texto (fallback = ouro chapado) */
.mf-topbar .mf-topbar__name {
  font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #e8d3a3;
  background: linear-gradient(100deg, #8a6a3b 0%, #c9a063 28%, #f3e4bf 50%, #c9a063 72%, #8a6a3b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mf-topbar .mf-topbar__sub {
  font-size: 10px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #a89e8a !important; -webkit-text-fill-color: #a89e8a !important;
}
.mf-topbar .mf-topbar__right { display: flex !important; align-items: center !important; gap: 12px !important; margin-left: auto; flex-shrink: 0; }
.mf-topbar .mf-topbar__greet {
  font-size: 14px !important; font-weight: 700 !important; white-space: nowrap;
  color: #e8d3a3 !important; -webkit-text-fill-color: #e8d3a3 !important;
}

/* Switch claro/escuro: trilho de vidro dourado; bolinha champanhe com sol âmbar
   (claro) / bolinha onyx com lua dourada (escuro) */
.mf-topbar .theme-toggle.theme-toggle {
  width: 54px !important; height: 28px !important; border-radius: 999px !important; margin: 0 !important;
  position: relative !important; padding: 0 !important; cursor: pointer; flex-shrink: 0;
  background: rgba(201, 160, 99, .16) !important;
  border: 1.5px solid rgba(201, 160, 99, .55) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35) !important;
  transition: background .2s, border-color .2s;
}
.mf-topbar .theme-toggle.theme-toggle::after, .mf-topbar .theme-toggle.theme-toggle::before { content: none !important; display: none !important; }
.mf-topbar .theme-toggle.theme-toggle:hover { background: rgba(201, 160, 99, .28) !important; border-color: #e8d3a3 !important; }
.mf-topbar .theme-toggle.theme-toggle:focus-visible { outline: 2px solid #e8d3a3; outline-offset: 2px; }
.mf-topbar .theme-toggle .theme-toggle__knob {
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  position: absolute !important; top: 1.5px !important; left: 2px !important;
  display: grid !important; place-items: center !important;
  background: #fdfaf4 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .45) !important;
  transform: translateX(0) !important; transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .2s !important;
}
[data-theme="dark"] .mf-topbar .theme-toggle .theme-toggle__knob {
  transform: translateX(26px) !important; background: #1c1c20 !important;
  box-shadow: 0 0 0 1px rgba(201, 160, 99, .6), 0 2px 6px rgba(0, 0, 0, .5) !important;
}
[data-theme="dark"] .mf-topbar .theme-toggle.theme-toggle { background: rgba(0, 0, 0, .35) !important; }
.mf-topbar .theme-toggle__knob svg {
  width: 14px !important; height: 14px !important; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  color: #d97706 !important; -webkit-text-fill-color: #d97706 !important;
}
.mf-topbar .theme-toggle__knob svg circle { fill: #FCD34D; }
[data-theme="dark"] .mf-topbar .theme-toggle__knob svg {
  color: #e8d3a3 !important; -webkit-text-fill-color: #e8d3a3 !important; fill: #c9a063;
}

/* Botão Sair: pílula de vidro dourada; no hover vira ouro com texto onyx */
.mf-topbar button.btn-sair.btn-sair {
  display: inline-flex !important; align-items: center !important; gap: 6px; height: 32px !important;
  padding: 0 12px 0 10px !important; border-radius: 999px !important; cursor: pointer; margin: 0 !important;
  font: 700 13px/1 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important; letter-spacing: .2px;
  background: rgba(201, 160, 99, .12) !important; border: 1.5px solid rgba(201, 160, 99, .55) !important;
  box-shadow: none !important; transition: background .18s, border-color .18s, transform .18s;
}
.mf-topbar button.btn-sair.btn-sair, .mf-topbar button.btn-sair.btn-sair * { color: #e8d3a3 !important; -webkit-text-fill-color: #e8d3a3 !important; }
.mf-topbar button.btn-sair.btn-sair svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.mf-topbar button.btn-sair.btn-sair:hover { background: #c9a063 !important; border-color: #e8d3a3 !important; transform: translateY(-1px); }
.mf-topbar button.btn-sair.btn-sair:hover, .mf-topbar button.btn-sair.btn-sair:hover * { color: #14110d !important; -webkit-text-fill-color: #14110d !important; }
.mf-topbar button.btn-sair.btn-sair:hover svg { transform: translateX(2px); }
.mf-topbar button.btn-sair.btn-sair:focus-visible { outline: 2px solid #e8d3a3; outline-offset: 2px; }

/* Ações próprias da tela (+ Novo Cliente, Histórico do PDV, status do WhatsApp) — abaixo da barra */
.mf-pagebar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 20px 0; }

@media (max-width: 640px) {
  :root { --mf-topbar-h: 56px; }
  header.topbar.mf-topbar { padding: 0 12px !important; gap: 8px !important; }
  .mf-topbar .mf-topbar__greet { display: none !important; }
  .mf-topbar .mf-topbar__name { font-size: 15px !important; }
  .mf-topbar .mf-topbar__sub { display: none; }
  .mf-topbar button.btn-sair.btn-sair { width: 32px; padding: 0 !important; justify-content: center; }
  .mf-topbar .btn-sair__txt { display: none; }
  .mf-pagebar { padding: 10px 12px 0; }
}

@media print { header.topbar.mf-topbar, .mf-pagebar { display: none !important; } }