/* ============================================================
   MONARCHA — css/offline-ui.css
   ------------------------------------------------------------
   Badge de sincronização, FAB de Lançamento Rápido (arrastável,
   Premium), toasts e alguns campos de formulário compartilhados.
   Reusa 100% dos design tokens já definidos em :root (app.css) —
   nenhuma cor/fonte nova é introduzida aqui, só composição.
   (Renomeado de expedicao.css — o Modo Expedição foi removido;
   apague o css/expedicao.css antigo depois de subir este.)
   ============================================================ */

/* Utilitário genérico que faltava: no app.css, "hidden" só existe
   combinado (.modal.hidden, .tier-price-wrap.hidden etc.) — alguns
   elementos usam a classe sozinha, então precisam dessa regra de base. */
.hidden { display: none !important; }

/* ============================================================
   🔵 BADGE DE STATUS DE SINCRONIZAÇÃO (#syncStatusBadge)
   Sempre visível, fixo perto do burger (mobile) ou do avatar do
   perfil (desktop). Controlado por js/offline/sync-status.js.
   ============================================================ */
.sync-badge {
  position: fixed;
  top: 16px;
  left: 66px; /* mobile: ao lado do burger flutuante (46px + 14px + gap) */
  z-index: 209;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--text-2);
  transition: border-color 0.3s var(--ease-out), color 0.3s, box-shadow 0.3s;
  max-width: calc(100vw - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Desktop (≥901px): a sidebar fixa ocupa a coluna esquerda inteira —
   não existe burger flutuante aí (ver .btn-burger-floating em app.css),
   então o badge não pode ficar ancorado nele. Move pro canto direito,
   ao lado do avatar do perfil. */
@media (min-width: 901px) {
  .sync-badge { left: auto; right: 68px; max-width: 280px; }
}

.sync-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor, 0 0 2px currentColor;
  flex-shrink: 0;
}

.sync-badge-sincronizado {
  border-color: rgba(74,222,128,0.25);
  color: var(--success);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 1px rgba(74,222,128,0.06) inset;
}
.sync-badge-pendente { border-color: var(--border-gold); color: var(--gold-soft); }
.sync-badge-sincronizando {
  border-color: var(--border-gold);
  color: var(--gold-soft);
}
.sync-badge-sincronizando .sync-dot { animation: syncDotPulse 1.3s ease-in-out infinite; }
.sync-badge-falha {
  border-color: rgba(248,113,113,0.32);
  color: var(--danger);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 1px rgba(248,113,113,0.08) inset;
}

@keyframes syncDotPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

@media (max-width: 480px) {
  .sync-badge { font-size: 0.68rem; padding: 5px 11px 5px 9px; left: 60px; top: 15px; }
}

/* ============================================================
   👤 AVATAR DO PERFIL (#btnAvatarPerfil) — canto superior direito,
   sempre visível. Substitui o antigo botão "Perfil" da sidebar.
   ============================================================ */
.btn-avatar-perfil {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 210;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  background: var(--bg-2);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, border-color 0.2s;
}
.btn-avatar-perfil:hover {
  transform: scale(1.07);
  box-shadow: var(--shadow-gold);
  border-color: var(--gold);
}
.btn-avatar-perfil:active { transform: scale(0.95); }
.btn-avatar-perfil img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.btn-avatar-perfil #avatarPerfilEmoji { font-size: 1.25rem; line-height: 1; }

@media (max-width: 480px) {
  .btn-avatar-perfil { width: 38px; height: 38px; top: 14px; right: 14px; }
  .btn-avatar-perfil #avatarPerfilEmoji { font-size: 1.1rem; }
}

/* ============================================================
   ⚡ FAB — LANÇAMENTO RÁPIDO (Premium, opcional via sidebar)
   Tamanho 3/4 do padrão anterior (56px → 42px) e posição arrastável
   (padrão: canto inferior direito). JS controla left/top inline
   quando o usuário arrasta; os valores abaixo são só o ponto de
   partida antes da 1ª escolha salva.
   ============================================================ */
.fab-lancamento {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 209;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--grad-gold);
  box-shadow: var(--shadow-gold), var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
  touch-action: manipulation; /* toque nativo, sem arraste */
  -webkit-touch-callout: none; /* tira o menu de "salvar imagem/copiar" do toque longo do iOS */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* tira o flash cinza padrão do toque no Android/iOS */
}
.fab-lancamento:hover  { transform: scale(1.06); }
.fab-lancamento:active { transform: scale(0.92); }
.fab-lancamento.is-armed {
  animation: fabArmedPulse 0.6s ease-in-out infinite;
  box-shadow: 0 0 0 4px var(--gold-glow), var(--shadow-md);
}
.fab-lancamento.is-dragging {
  transition: none; /* segue o dedo/cursor sem atraso enquanto arrasta */
  cursor: grabbing;
}
@keyframes fabArmedPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.fab-ico { font-size: 1.15rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

@media (max-width: 480px) {
  .fab-lancamento { width: 38px; height: 38px; right: 14px; bottom: 20px; }
  .fab-ico { font-size: 1rem; }
}

/* ── Toggle "Lançamento Automático" na sidebar ── */
.nav-item-toggle { cursor: default; }
.nav-toggle-switch {
  position: relative; display: inline-block;
  width: 38px; height: 21px; margin-left: auto; flex-shrink: 0;
}
.nav-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.nav-toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(255,255,255,0.15); border-radius: 999px;
  transition: background 0.2s var(--ease-out);
}
.nav-toggle-slider::before {
  content: ""; position: absolute; height: 15px; width: 15px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.2s var(--ease-out);
}
.nav-toggle-switch input:checked + .nav-toggle-slider { background: var(--grad-gold); }
.nav-toggle-switch input:checked + .nav-toggle-slider::before { transform: translateX(17px); }
.nav-toggle-switch input:disabled + .nav-toggle-slider { opacity: 0.35; cursor: not-allowed; }

/* ============================================================
   ⚡ Campos de formulário compartilhados (usado pelo modal de
   Lançamento Rápido)
   ============================================================ */
.exp-campo { margin-bottom: var(--sp-4); }
.exp-campo > label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--sp-2);
}

/* ============================================================
   ⚡ MODAL: LANÇAMENTO RÁPIDO
   ============================================================ */
#modalLancamentoRapido input,
#modalLancamentoRapido select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text);
  font-size: var(--fs-base);
}
#modalLancamentoRapido input:focus,
#modalLancamentoRapido select:focus {
  outline: none;
  border-color: var(--border-gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
#formLancamentoRapido .btn { width: 100%; justify-content: center; margin-top: var(--sp-2); }

/* ============================================================
   🍞 TOASTS (atualização de versão / resumo / conclusão)
   ============================================================ */
.exp-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 18px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: var(--fs-sm);
  max-width: calc(100vw - 32px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}
.exp-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.exp-toast-update { border-color: var(--gold); }
.exp-toast-btn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--grad-gold);
  color: #1a1400;
  font-weight: 700;
  font-size: var(--fs-xs);
  cursor: pointer;
  white-space: nowrap;
}
.exp-toast-dismiss {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: var(--fs-sm); padding: 2px 4px;
}

.exp-toast-resumo { flex-direction: column; align-items: flex-start; gap: 4px; }
.exp-toast-linha1 { font-weight: 700; }
.exp-toast-linha2 { color: var(--muted); font-size: var(--fs-xs); max-width: 320px; }

.exp-toast-concluido {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-elev));
  border-color: var(--gold);
  font-weight: 700;
  color: var(--gold-soft);
}

@media (max-width: 480px) {
  .exp-toast { font-size: var(--fs-xs); padding: 10px 14px; }
  .exp-toast-linha2 { max-width: 220px; }
}

/* ============================================================
   🧪 Ajustes de usabilidade do Simulador (entrou neste arquivo pra
   não criar um CSS novo só por causa de uma classe pequena).
   ============================================================ */
.sim-field-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 0.72rem;
}
/* Faixa superior: centro comum para menu, sincronização e perfil. */
.sync-badge { top: calc(env(safe-area-inset-top, 0px) + 37px); transform: translateY(-50%); line-height: 1.2; max-width: calc(100vw - 132px); }
.btn-avatar-perfil { top: calc(env(safe-area-inset-top, 0px) + 16px); }
.btn-burger-floating { top: calc(env(safe-area-inset-top, 0px) + 14px); }
.app-main > .hero-bar { margin-top: calc(env(safe-area-inset-top, 0px) + 74px); }
@media (min-width: 901px) {
  .sync-badge { left: calc(var(--sidebar-w) + var(--sp-4)); right: auto; max-width: 280px; }
}
@media (max-width: 480px) {
  .sync-badge { left: 66px; }
  .btn-avatar-perfil { top: calc(env(safe-area-inset-top, 0px) + 18px); }
}
.fab-lancamento { width: 48px; height: 48px; }
.fab-lancamento.is-dragging { transform: none; }

/* Versão da sessão carregada, abaixo da marca na sidebar. */
.app-version {
  margin: 0 20px 12px;
  color: #94a3b8;
  font: 500 11px/1.5 Inter, sans-serif;
  letter-spacing: .02em;
  user-select: text;
}