/* Camada do tema: login, admin, menus, galeria e estados — só variáveis. */

#screen-login,
#screen-pendente,
#screen-proprio {
  background: var(--t-chat-bg);
}
.login-card {
  background: var(--t-card-bg);
  color: var(--t-text);
}
.login-logo {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.login-logo img,
img.login-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.field input {
  background: var(--t-input-bg);
  color: var(--t-text);
  border-color: var(--t-input-border);
}
.field input:focus {
  border-color: var(--t-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-primary) 22%, transparent);
}
.notice.info {
  background: color-mix(in srgb, var(--t-primary) 12%, var(--t-card-bg));
  color: var(--t-primary2);
  border-color: color-mix(in srgb, var(--t-primary) 28%, var(--t-card-bg));
}
.tag.admin {
  background: color-mix(in srgb, var(--t-primary) 14%, var(--t-card-bg));
  color: var(--t-primary2);
}
.banner-fake {
  background: color-mix(in srgb, var(--t-accent) 12%, var(--t-card-bg));
  color: var(--t-primary2);
}

/* Headers admin / sheets / galeria */
.adm-header,
.fwd-header,
.galeria-header {
  color: var(--t-header-fg);
}
.adm-header .adm-back,
.galeria-header .adm-back,
.fwd-header .adm-back { color: var(--t-header-icon); }
.adm-tabs,
.galeria-tabs {
  background: var(--t-header-bg);
  border-bottom: 1px solid var(--t-header-border);
}
.adm-tabs button,
.galeria-tabs button { color: var(--t-muted); }
.adm-tabs button.on,
.galeria-tabs button.on {
  color: var(--t-header-fg);
  border-bottom-color: var(--t-header-fg);
  background: transparent;
}
.galeria-tabs button.on {
  background: color-mix(in srgb, var(--t-primary) 18%, transparent);
  color: var(--t-primary2);
}
html[data-tema="escuro"] .galeria-tabs button.on {
  color: var(--t-accent);
}
.adm-acoes-topo .btn-mini:not(.sec),
.par-tabs button.on { background: var(--t-primary); color: #fff; }
.galeria-sel-btn { color: var(--t-header-fg); }
.galeria-card,
.fwd-card {
  background: var(--t-card-bg);
  color: var(--t-text);
}
.chat-item:active,
.chat-item.active { background: var(--t-item-active); }
/* Seletor de WhatsApp: selecionado = fundo primary + texto claro; demais = texto do tema. */
.inst-item.atual { background: var(--t-primary); color: #fff; }
.inst-item.atual .inst-item-nome { color: #fff; }
.inst-item.atual .inst-item-sub { color: rgba(255,255,255,.78); }
.inst-item.atual .inst-check { color: #fff; }
.inst-painel {
  background: var(--t-card-bg);
  color: var(--t-text);
}
.inst-item-nome { color: var(--t-text); }
.inst-item-sub { color: var(--t-muted); }
.msg-menu,
.sheet-card {
  background: var(--t-card-bg);
  color: var(--t-text);
}
@media (min-width: 768px) {
  #screen-app.active { background: var(--t-desktop-bg); }
  .chat-item.active { background: var(--t-item-active); }
}

/* Menus e toasts */
.menu-pop {
  background: var(--t-panel);
  color: var(--t-text);
  border: 1px solid var(--t-border);
  box-shadow: 0 8px 28px rgba(5, 4, 69, .14);
}
.menu-pop button.on,
.menu-pop button[aria-checked="true"] {
  color: var(--t-primary);
  font-weight: 600;
}
.msg-menu {
  background: var(--t-panel);
  color: var(--t-text);
  border: 1px solid var(--t-border);
}
.react-bar button.on {
  outline: 2px solid var(--t-primary);
}
/* Realce amarelo da busca / “Ver mensagem” (depois do tema para não perder o box-shadow). */
.row.msg-destaque > .bubble {
  border: 2px solid #f6e05e !important;
  box-shadow: 0 0 0 4px rgba(246, 224, 94, .45) !important;
}
html[data-tema="escuro"] .row.msg-destaque > .bubble {
  border-color: #c9a227 !important;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .45) !important;
}
.toast {
  background: var(--t-toast-bg);
  color: #fff;
}

/* Mensagem apagada / editada */
.bubble.apagada .text-apagada {
  font-style: italic;
  color: var(--t-muted);
}
.row.out .bubble.apagada .text-apagada {
  color: var(--t-out-meta);
  opacity: .9;
}
.meta .editada {
  font-style: italic;
  font-weight: 500;
  opacity: .9;
}
.msg-acoes .ma-perigosa { color: var(--danger, #ea4335); }

/* Confirm sheet */
.confirm-card {
  background: var(--t-panel);
  color: var(--t-text);
  border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(16px + var(--safe-bottom));
  width: 100%; max-width: 480px;
}
.confirm-card h2 { margin: 0 0 6px; font-size: 1.05rem; }
.confirm-card p { margin: 0 0 14px; color: var(--t-muted); font-size: .9rem; }
.confirm-acoes { display: flex; gap: 8px; }
.confirm-acoes button {
  flex: 1; padding: 12px; border-radius: 10px; font-weight: 600;
  background: var(--t-border); color: var(--t-text);
}
.confirm-acoes button.ok {
  background: var(--t-mic-bg); color: #fff;
}
.confirm-acoes button.perigosa {
  background: var(--danger, #ea4335); color: #fff;
}
@media (min-width: 900px) {
  .confirm-card { border-radius: 16px; }
}

/* Preview de anexo / composer sheets */
.preview-sheet {
  background: var(--t-composer-bg);
  color: var(--t-text);
  border-top-color: var(--t-border);
}
.preview-sheet input[type=text] {
  background: var(--t-input-bg);
  color: var(--t-text);
  border-color: var(--t-input-border);
}
.preview-sheet .send {
  background: var(--t-mic-bg);
  color: var(--t-mic-fg);
}
.fwd-msg {
  background: var(--t-panel);
  color: var(--t-muted);
  border-bottom-color: var(--t-border);
}
.fwd-msg-rot { color: var(--t-primary); }
.fwd-item.sel { background: var(--t-item-active); }
.fwd-footer {
  background: var(--t-composer-bg);
  border-top-color: var(--t-border);
}
.fwd-footer .send { background: var(--t-mic-bg); color: var(--t-mic-fg); }
.adm-footer {
  background: var(--t-list-bg);
  border-top-color: var(--t-border);
}
.adm-grupo, .adm-sec { color: var(--t-primary); }
.login-switch button { color: var(--t-primary); }
.cv-item {
  background: var(--t-list-bg);
  border-bottom-color: var(--t-border);
  color: var(--t-text);
}

/* Ícone da marca no topo (quadrado arredondado) */
.inst-foto .avatar.brand-icon,
img.avatar.brand-icon {
  border-radius: 11px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none !important;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--t-avatar-ring);
}
.inst-dot.ok { background: #2BB56A; }

.empty-pane {
  background: var(--t-chat-bg);
  color: var(--t-muted);
  border-bottom-color: var(--t-primary);
}

/* Cabeçalhos: reforço no ficheiro que carrega por último — degradê diagonal
   mockup B. Não usar shorthand `background` (apagaria a imagem).
   Status bar iOS = default + theme-color (como antes do PR #8): evita a
   faixa morta embaixo; o degradê cobre o cabeçalho até o topo do conteúdo. */
.side-header,
.chat-header,
.adm-header,
.fwd-header,
.galeria-header {
  background-color: var(--t-header-edge, #050445);
  background-image: var(--t-header-gradient);
}