/* Connection banner (see app/javascript/offline.js) */
#connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top));
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#connection-banner[data-state="offline"] {
  /* #ff9800 original só dava 2.16:1 com texto branco (abaixo do mínimo
     WCAG AA de 4.5:1 pra texto de 14px) -- escurecido pra 5.40:1. */
  background: #995c00;
}

#connection-banner[data-state="online"] {
  background: var(--brand-hero-to);
}

/* Push the page down so the banner never covers the navbar */
body.has-connection-banner {
  padding-top: calc(36px + env(safe-area-inset-top));
}

/* An expense that only exists in this browser until the queue is flushed */
.expense-pending {
  background: #fff8e1;
  border-left: 3px solid #ff9800;
  /* Fundo claro fixo de propósito -- força texto escuro (ver draft.css). */
  color: #212529;
}

.expense-pending .expense-share {
  font-weight: 500;
  font-style: italic;
}