/* ADS Premium — design system */

:root {
  /* TEMA PADRAO DO SISTEMA: Dasho (Phoenixcoded, Bootstrap 5)
     https://html.phoenixcoded.net/dasho/bootstrap/default/
     Paleta oficial do template: primary #2196f3 (azul), success #4caf50,
     danger #f44336, warning #ff9800, info #00acc1, secondary #7e858e,
     dark #263238 (grafite azulado material). Bootstrap 5.3.8 vendorado em
     static/vendor/bootstrap e carregado antes deste arquivo no base.html --
     este arquivo e a camada de tema Dasho por cima do Bootstrap. */
  --bg: #f4f7fa;
  --bg-alt: #f8fafc;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --border: #e3e8ee;
  --border-strong: #cfd8dc;

  --brand: #2196f3;
  --brand-dark: #1976d2;
  --brand-soft: #e3f2fd;
  --brand-glow: rgba(33, 150, 243, 0.25);

  /* Neutro/secundario (botoes de cancelar e acoes de apoio). */
  --neutral: #7e858e;
  --neutral-dark: #6c757d;
  --neutral-soft: #eceff1;

  /* Danger (excluir/sair/confirmacoes destrutivas). */
  --danger: #f44336;
  --danger-dark: #d32f2f;

  --ink: #263238;
  /* Menu lateral: grafite escuro azulado (dark oficial do Dasho). */
  --dark: #263238;
  --dark-alt: #2f3e46;
  --dark-soft: #455a64;

  --text: #37474f;
  --text-muted: #78909c;
  --text-faint: #b0bec5;

  --success-bg: #e8f5e9;
  --success-text: #2e7d32;
  --error-bg: #fdecea;
  --error-text: #c62828;
  --info-bg: #e0f7fa;
  --info-text: #00838f;
  --warning-bg: #fff3e0;
  --warning-text: #ef6c00;

  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(33, 37, 41, 0.06);
  --shadow-md: 0 4px 16px rgba(33, 37, 41, 0.07);
  --shadow-lg: 0 12px 32px rgba(33, 37, 41, 0.16);

  /* Tokens de movimento -- toda transicao/animacao do sistema usa essas
     curvas/duracoes pra manter o mesmo "sentimento" de movimento em todas
     as telas (consistencia de primeira qualidade). */
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur-fast: 0.14s;
  --dur-base: 0.22s;
  --dur-slow: 0.38s;

  /* Altura padrao unica de controle (input/select/button) usada em todo o
     sistema -- qualquer input e qualquer botao devem ter exatamente essa
     altura sempre que estiverem lado a lado, pra nunca ficar um maior que
     o outro. Nao aplicada a textarea (altura variavel por design/rows). */
  --field-h: 2.35rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

::selection {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

/* Scrollbar tematizada (WebKit) -- detalhe de acabamento premium. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(33, 37, 41, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(33, 37, 41, 0.32); }

/* Entrada suave dos blocos principais ao carregar a pagina -- movimento
   curto e discreto (nao atrapalha o uso), mesmo easing em tudo. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Acessibilidade: quem prefere menos movimento nao ve nenhuma animacao. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
}

h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 700; }
h4 { font-size: 0.95rem; font-weight: 700; }

p { color: var(--text-muted); margin: 0 0 0.6rem; }

a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

a:hover { color: var(--brand-dark); }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

/* Buttons */

button,
input,
textarea,
select {
  font: inherit;
}

/* Hierarquia de botoes estilo Bootstrap:
   - padrao (sem classe) = PRIMARIO verde solido (confirmar/acao principal)
   - .secondary-dark     = NEUTRO cinza solido (cancelar/acoes de apoio)
   - .button-danger      = DANGER vermelho solido (excluir/sair/destrutivo)
   Todos flat (sem gradiente), borda 1px na propria cor, mesmo raio e mesma
   altura --field-h. */
button,
.button-link {
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  /* Altura padrao do sistema (--field-h) -- so padding horizontal aqui, a
     vertical fica por conta da altura fixa, garantindo que todo botao meca
     exatamente o mesmo que um input ao lado dele. */
  height: var(--field-h);
  padding: 0 1.2rem;
  background: var(--brand);
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

button:hover,
.button-link:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: white;
}

button:active,
.button-link:active {
  transform: scale(0.98);
}

button:focus-visible,
.button-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-glow);
}

button.secondary {
  background: transparent;
  color: #eef3ee;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

button.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Botao NEUTRO (cinza Bootstrap #6c757d) -- cancelar, fechar, acoes de
   apoio. O nome .secondary-dark e historico (era um botao escuro), mantido
   pra nao tocar em todos os templates. */
.secondary-dark {
  background: var(--neutral);
  border-color: var(--neutral);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.secondary-dark:hover {
  background: var(--neutral-dark);
  border-color: var(--neutral-dark);
}

.secondary-dark:focus-visible {
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.3);
}

.button-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

/* Layout */

.layout {
  display: grid;
  grid-template-columns: 268px 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-base) var(--ease-out);
}

.layout.no-sidebar {
  grid-template-columns: 1fr;
}

.sidebar {
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.07), transparent 45%),
    radial-gradient(circle at 100% 105%, rgba(33, 150, 243, 0.14), transparent 55%),
    linear-gradient(200deg, var(--dark-alt) 0%, var(--dark) 68%);
  color: #e9ecef;
  padding: 1.75rem 1.35rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: padding var(--dur-base) var(--ease-out);
}

/* Menu lateral recolhido (pedido do usuario, 2026-07-19): classe fica no
   <body> (aplicada por JS antes da pintura, ver base.html) -- reduz a
   coluna do grid, encolhe o padding do sidebar, empilha icone+rotulo dos
   nav-link na vertical com fonte menor, e gira a setinha do botao. */
body.sidebar-collapsed .layout {
  /* Pedido do usuario (2026-07-19): 84px deixava o botao de recolher
     parecendo descentralizado (coluna estreita demais pra folga em volta
     do circulo de 26px) -- aumentado pra dar mais respiro. */
  grid-template-columns: 108px 1fr;
}

body.sidebar-collapsed .sidebar {
  padding: 1.75rem 0.65rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

body.sidebar-collapsed .brand {
  justify-content: center;
}

body.sidebar-collapsed .brand-logo {
  display: none;
}

.brand-logo-mark {
  display: none;
  height: 30px;
  width: auto;
}

body.sidebar-collapsed .brand-logo-mark {
  display: block;
}

.sidebar-collapse-btn {
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(233, 236, 239, 0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: none;
  box-shadow: none;
}

.sidebar-collapse-btn svg {
  width: 14px;
  height: 14px;
}

body.sidebar-collapsed .sidebar-collapse-btn {
  /* margin:0 auto (em vez de so margin-left:0) e' um reforco -- centraliza
     de verdade mesmo se algum ajuste futuro tirar o justify-content:center
     do .brand pai. */
  margin: 0 auto;
  transform: rotate(180deg);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--brand);
  display: grid;
  place-items: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.brand-text strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.brand-text span {
  font-size: 0.72rem;
  color: rgba(233, 236, 239, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.brand-logo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}

.sidebar nav {
  display: grid;
  gap: 0.25rem;
  margin-bottom: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.68rem 0.75rem;
  border-radius: var(--radius-sm);
  color: rgba(233, 236, 239, 0.72);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.nav-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateX(3px);
}

.nav-link.active {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Efeito "glass" diagonal no item ativo (pedido do usuario, 2026-07-19) --
   pseudo-elemento com um brilho diagonal por cima do fundo azul solido,
   nunca troca a cor de fundo em si (so soma um verniz de vidro por cima). */
.nav-link.active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 38%, transparent 60%);
  pointer-events: none;
}

.nav-link.active:hover { transform: none; }

/* Nav-link no modo recolhido: icone em cima, rotulo embaixo, fonte menor --
   pedido explicito ("deixando fonte abaixo do icone e reduzida"). */
body.sidebar-collapsed .nav-link {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.55rem 0.25rem;
  font-size: 0.6rem;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

body.sidebar-collapsed .nav-link:hover {
  transform: none;
}

body.sidebar-collapsed .nav-link svg {
  width: 15px;
  height: 15px;
}

body.sidebar-collapsed .nav-count-badge {
  margin-left: 0;
}

/* Contagem de perguntas sem resposta no menu lateral: 0 fica discreto (mesma
   cor apagada do texto do sidebar), >0 ganha .highlight (pill de destaque). */
.nav-count-badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(233, 236, 239, 0.6);
}

.nav-count-badge.highlight {
  background: var(--warning, #ff9800);
  color: #fff;
}

.sidebar-footer {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 0.75rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.user-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}

.user-chip .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.user-chip .email {
  font-size: 0.78rem;
  color: rgba(233, 236, 239, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer form button {
  width: 100%;
}

.content {
  padding: 2rem 2.25rem 3rem;
  min-width: 0;
}

.content.full {
  display: grid;
  place-items: center;
  padding: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.9rem 0;
  margin: -2rem -2.25rem 1.5rem;
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  border-bottom: 1px solid var(--border);
}

.topbar-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.meli-status-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.meli-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.meli-status-pill.connected {
  color: var(--success-text);
  border-color: rgba(30, 107, 49, 0.2);
  background: var(--success-bg);
}

.meli-status-pill.connected .meli-status-dot {
  background: var(--success-text);
  box-shadow: 0 0 0 rgba(30, 107, 49, 0.5);
  animation: meli-pulse 1.8s infinite;
}

.meli-status-pill.disconnected {
  color: var(--error-text);
  border-color: rgba(163, 49, 42, 0.2);
  background: var(--error-bg);
}

@keyframes meli-pulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 107, 49, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(30, 107, 49, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 107, 49, 0); }
}

/* Card seletor de empresa no topbar (substitui o pill do ML quando ha empresa
   cadastrada) -- filtro visual dos anuncios; a bolinha segue mostrando o
   status da conexao (classes connected/disconnected direto no dot, ja que
   aqui nao existe o pill pai). Botao custom: precisa neutralizar o estilo do
   button global (fundo brand, sombra, lift no hover). */
.company-menu { position: relative; }

.company-card-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  height: auto;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: none;
}

.company-card-btn:hover {
  background: var(--bg);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.company-card-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meli-status-dot.connected {
  background: var(--success-text);
  animation: meli-pulse 1.8s infinite;
}

.meli-status-dot.disconnected { background: var(--error-text); }

.company-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  padding: 0.4rem;
}

.company-dropdown.open { display: block; }

.company-dropdown form { margin: 0; }

.company-dropdown .company-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0.5rem 0.6rem;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.company-dropdown .company-option:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  transform: none;
  box-shadow: none;
}

.company-dropdown .company-option.current {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.company-dropdown-hint {
  margin: 0.35rem 0.6rem 0.25rem;
  font-size: 0.72rem;
}

/* Popup "Acessar catalogo" (rodape da barra lateral) -- lista de empresas com
   catalogo publico ativo pra escolher qual visualizar. */
.catalog-picker-item {
  display: block;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.catalog-picker-item:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-color: var(--brand);
}

/* Notificacoes */

.notif-menu { position: relative; }

.notif-btn { position: relative; }

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--brand);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 3px;
}

.notif-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.notif-dropdown.open { display: block; }

.notif-dropdown-head {
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.75rem 1rem 0.5rem;
}

.notif-empty {
  padding: 0 1rem 0.9rem;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem 0.5rem;
}

.notif-list li { margin: 0; }

.notif-list a {
  display: block;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text);
  text-decoration: none;
}

.notif-list a:hover {
  background: var(--bg-alt);
}

/* Card do usuario + dropdown no header */

.user-menu { position: relative; }

.user-card-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem 0.35rem 0.35rem;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}

.user-card-btn .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.user-card-btn img.avatar.avatar-photo {
  object-fit: cover;
  background: var(--bg-alt);
}

/* Foto de perfil no popup "Meu perfil" (pedido do usuário, 2026-07-19):
   círculo grande clicável com badge de lápis no canto -- clique abre o
   input file escondido. */
.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}

.profile-photo-btn {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  overflow: visible;
  cursor: pointer;
  box-shadow: none;
}

.profile-photo-btn:hover {
  transform: none;
  box-shadow: none;
}

.profile-photo-btn img,
.profile-photo-btn .profile-photo-initials {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
}

.profile-photo-edit-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
}

.user-card-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  padding: 0.4rem;
}

.user-dropdown.open { display: block; }

.user-dropdown button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}

.user-dropdown button:hover {
  background: var(--bg-alt);
}

.user-dropdown-danger {
  color: var(--error-text) !important;
}

.button-danger {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
  border-radius: var(--radius-sm);
  height: var(--field-h);
  padding: 0 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.button-danger:hover {
  background: var(--danger-dark);
  border-color: var(--danger-dark);
  filter: none;
}

.button-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
}

@media (max-width: 900px) {
  .topbar {
    margin: -1.25rem -1.1rem 1.25rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .user-card-name { display: none; }
}

.topbar h1 {
  font-size: 1.55rem;
  font-weight: 800;
}

.topbar .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.25rem;
}

/* Surfaces */

.hero,
.panel,
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* fill "backwards" (nunca "both/forwards"): o transform some quando a
     animacao termina -- transform residual criaria stacking context
     permanente no painel e dropdowns internos ficariam por baixo dos
     paineis seguintes. */
  animation: rise-in var(--dur-slow) var(--ease-out) backwards;
}

/* Entrada escalonada dos cards de estatistica -- um atras do outro, efeito
   de sistema vivo sem atrasar o uso (delays curtos). */
.stats .card:nth-child(1) { animation-delay: 0.03s; }
.stats .card:nth-child(2) { animation-delay: 0.09s; }
.stats .card:nth-child(3) { animation-delay: 0.15s; }
.stats .card:nth-child(4) { animation-delay: 0.21s; }

.card {
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(33, 150, 243, 0.4);
}

.hero,
.panel {
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.panel-head p {
  margin: 0;
}

/* Sincronização (Configurações > Configurações gerais) -- pedido do
   usuário 2026-07-13: seção unificada (sync automática + escopo por grupo
   + pós-venda + revalidação), separadores discretos entre os 3 blocos e
   lista do popup de histórico. */
.sync-panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.sync-subsection-title {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  color: var(--text);
}

.sync-history-list {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.sync-history-row {
  border: 1px solid var(--border);
  border-left: 3px solid var(--neutral);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  background: var(--bg-alt);
}

.sync-history-row.is-success { border-left-color: var(--brand); }
.sync-history-row.is-error { border-left-color: var(--danger); }
.sync-history-row.is-skip { border-left-color: var(--warning); }

.sync-history-row-top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sync-history-target {
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--text);
}

.sync-history-message {
  margin-top: 0.15rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.panel > h2:first-child,
.panel > h3:first-child,
.panel-head:first-child {
  margin-top: 0;
}

.narrow {
  max-width: 520px;
}

.pill-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}

.hero {
  background:
    linear-gradient(120deg, rgba(38, 50, 56, 0.97), rgba(55, 71, 79, 0.92)),
    radial-gradient(600px 260px at 100% 0%, rgba(33, 150, 243, 0.4), transparent 60%);
  color: #e9ecef;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero h2 { color: #fff; }
.hero p { color: rgba(233, 236, 239, 0.78); max-width: 46ch; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e9ecef;
  white-space: nowrap;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.card {
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.card .card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
  margin-bottom: 0.6rem;
}

.card .card-icon svg { width: 17px; height: 17px; }

.card strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--ink);
}

.card span {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Forms */

.form-grid {
  display: grid;
  gap: 1.05rem;
}

label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

input,
textarea,
select {
  width: 100%;
  padding: 0.78rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-alt);
  color: var(--text);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

/* input/select (nao textarea, que tem altura variavel por design) seguem a
   mesma altura padrao dos botoes (--field-h) -- padding vertical vira 0,
   so horizontal, pra centralizar o texto dentro da altura fixa. Mesmo
   principio usado em .form-grid.compact-3col mais abaixo. */
input:not([type="file"]),
select {
  height: var(--field-h);
  padding-top: 0;
  padding-bottom: 0;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-solid);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

input[type="file"] {
  padding: 0.6rem 0.7rem;
  cursor: pointer;
}

.field-hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-faint);
}

/* Tooltip tematizado (bolha com o visual do app, nao o title nativo do
   navegador) -- usado no icone "i" ao lado do texto do label, tanto pros
   atributos de categoria (.attr-tooltip) quanto pras descricoes de campo
   dos dados comerciais (.field-tooltip). Ambos usam data-tooltip em vez de
   title, e essa mesma regra generica cuida da bolha/seta/posicionamento. */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--dark);
  color: #fff;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 60;
}

[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 60;
}

[data-tooltip]:hover::after, [data-tooltip]:focus::after,
[data-tooltip]:hover::before, [data-tooltip]:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.field-tooltip {
  display: inline-flex;
  color: var(--text-faint);
  cursor: help;
  vertical-align: middle;
}

.field-tooltip svg { width: 13px; height: 13px; }

.field-tooltip:hover, .field-tooltip:focus { color: var(--brand-dark); outline: none; }

.label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Linha de resultado dinamico (liquido estimado, aviso de frete, resultado
   de consulta) fora da grade de 3 colunas -- assim nao desalinha as outras
   celulas quando aparece/some ou muda de tamanho. */
.form-row-banner {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-faint);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  margin-top: -0.35rem;
}

.form-row-banner.field-hint-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: transparent;
}

.form-row-banner:empty { display: none; }

.diag-log {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.diag-log summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.diag-log summary::-webkit-details-marker {
  display: none;
}

.diag-log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--error-text, #c0392b);
  display: inline-block;
  flex: none;
}

.diag-log-error {
  margin: 0.5rem 0 0;
  color: var(--error-text, #c0392b);
}

.diag-log-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.photo-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upload-box {
  min-height: 120px;
  border: 1.5px dashed #90caf9;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--brand-dark);
  background: var(--brand-soft);
  margin: 0.5rem 0;
  text-align: center;
  padding: 1rem;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Dashboard charts */

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.chart-card {
  margin-bottom: 0;
}

.chart-card canvas {
  max-height: 260px;
  padding: 0.5rem 1.75rem 1.5rem;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .charts-row { grid-template-columns: 1fr; }
}

/* Tables */

/* PADRAO DE LISTAGEM (regra permanente, 2026-07-20): toda tela de lista nova
   (produtos, anuncios, grupos, categorias ML, marcas, etc.) deve reusar
   exatamente este conjunto de classes -- .products-toolbar (busca +
   .toolbar-actions-right com botao Filtrar/menu "...") + opcional .bulk-bar
   + .table-card > .panel-head (h3 + .pill-count) > .table-scroll table
   (thead/tbody, tr.row-clickable, td.row-actions > div.row-actions-inner
   com os .icon-btn) + macro pagination() de _macros.html. Mudar essas
   classes aqui vale pra TODAS as listas do sistema de uma vez -- nunca
   criar uma classe nova de lista paralela (ex. .ai-model-list era usado
   pra grupos e foi trocado por essa mesma tabela em 2026-07-20). */

.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
  /* fill "backwards" (nunca "both/forwards"): o transform some quando a
     animacao termina -- transform residual criaria stacking context
     permanente no painel e dropdowns internos ficariam por baixo dos
     paineis seguintes. */
  animation: rise-in var(--dur-slow) var(--ease-out) backwards;
}

.table-card .panel-head {
  padding: 1.5rem 1.75rem 0.75rem;
  margin-bottom: 0;
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

thead th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 700;
  padding: 0.9rem 1.2rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table-card table thead th:first-child { padding-left: 1.75rem; }
.table-card table thead th:last-child { padding-right: 1.75rem; }
.table-card table tbody td:first-child { padding-left: 1.75rem; }
.table-card table tbody td:last-child { padding-right: 1.75rem; }

/* Coluna "Categoria" da lista de categorias do ML (meli_categories.html) --
   breadcrumb completo (ex. "Autopeças > Elétrica > Alternadores") ficava
   espremido/quebrando em várias linhas nas demais colunas mais estreitas
   (pedido do usuário, 2026-07-20). */
.category-name-col { min-width: 340px; max-width: 480px; white-space: normal; }

td,
tbody th {
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  text-align: left;
  font-weight: 600;
}

tbody th { font-weight: 700; white-space: nowrap; }
tbody td { font-weight: 500; }

tbody tr:last-child td { border-bottom: none; }

tbody tr {
  transition: background 0.12s ease;
}

tbody tr:hover {
  background: rgba(33, 150, 243, 0.05);
}

td.empty-cell {
  text-align: center;
  color: var(--text-faint);
  padding: 2.75rem 1rem;
  font-weight: 500;
}

/* Status icons (products / ads lists) */

.ad-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.ad-status-icon svg { width: 15px; height: 15px; }

.ad-status-icon.done { background: var(--success-bg); color: var(--success-text); }
.ad-status-icon.pending { background: var(--warning-bg); color: var(--warning-text); }
.ad-status-icon.none { background: var(--neutral-soft); color: var(--text-faint); }

/* Status do produto no catálogo (lista de produtos, coluna "Status") --
   pedido do usuario 2026-07-19: clique abre popup de atalho pra habilitar
   /desabilitar por empresa. Botao em vez de badge estatico pra deixar claro
   que e' clicavel, mesma altura --field-h do resto do sistema. */
.catalog-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: auto;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: none;
}
.catalog-status-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
.catalog-status-badge.visible { background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg); }
.catalog-status-badge.linked { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-bg); }
.catalog-status-badge.none { background: var(--neutral-soft); color: var(--text-faint); border-color: var(--neutral-soft); }
.catalog-status-badge:hover { transform: none; box-shadow: none; filter: brightness(0.96); }

.photo-count-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--warning-text);
}

.photo-count-icon svg { width: 15px; height: 15px; }
.photo-count-icon.ready { color: var(--success-text); }

/* Status badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-info { background: var(--info-bg); color: var(--info-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-error { background: var(--error-bg); color: var(--error-text); }
.badge-neutral { background: var(--neutral-soft); color: var(--text-muted); }

/* Tipo de anuncio (lista de anuncios): Premium vs Classico com cor/fundo
   proprios, distintos dos badges de status -- pedido explicito do usuario
   ("deixar a cara do tipo de anuncio com uma cor e fundo diferentes"). */
.listing-type-badge.premium { background: var(--brand-soft); color: var(--brand-dark); }
.listing-type-badge.classico { background: var(--neutral-soft); color: var(--text-muted); }

/* Faixa do atalho de atencao, agora fora da linha de busca/filtro (que so
   pode ter busca + botao Filtrar + menu "..." -- pedido explicito do
   usuario) -- vira uma segunda linha discreta abaixo da toolbar. */
/* Banner de atencao (pedido 2026-07-20: mover pra dentro do cabecalho da
   lista, ao lado do titulo "Anuncios", em vez de ficar solto acima da
   toolbar) -- margin-bottom removido, agora e' um item inline num flex row
   junto do <h2>. */
.ads-attention-banner { display: inline-flex; }
.ads-panel-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ads-panel-title-row h2 { margin: 0; }

/* Flash messages */

.flash-list {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 80;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
  width: 320px;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}

.flash {
  pointer-events: auto;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  animation: flash-in 0.2s ease-out;
}

.flash.flash-out { animation: flash-out 0.25s ease-in forwards; }

@keyframes flash-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flash-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

.flash.success { background: var(--success-bg); color: var(--success-text); border-color: rgba(30, 107, 49, 0.15); }
.flash.error { background: var(--error-bg); color: var(--error-text); border-color: rgba(163, 49, 42, 0.15); }

.flash-close {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  box-shadow: none;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
}

.flash-close:hover { background: rgba(0, 0, 0, 0.16); transform: none; box-shadow: none; }

@media (max-width: 620px) {
  .flash-list { left: 1rem; right: 1rem; width: auto; bottom: 1rem; }
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  color: var(--text-muted);
  max-height: 360px;
  overflow-y: auto;
}

.description-preview {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Login screen */

.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  width: 100%;
}

.auth-brand {
  background:
    linear-gradient(150deg, rgba(38, 50, 56, 0.97), rgba(55, 71, 79, 0.94)),
    radial-gradient(700px 340px at 100% 100%, rgba(33, 150, 243, 0.45), transparent 60%);
  color: #e9ecef;
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.auth-brand .brand { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.auth-brand .brand-mark { width: 46px; height: 46px; font-size: 1.2rem; }
.auth-brand .brand-text strong { font-size: 1.2rem; }
.auth-brand .brand-logo { max-width: 300px; }

.auth-copy h1 {
  color: #fff;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 2.25rem 0 0.9rem;
  max-width: 13ch;
}

.auth-copy p {
  color: rgba(233, 236, 239, 0.78);
  font-size: 1rem;
  max-width: 40ch;
}

.auth-features {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}

.auth-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(233, 236, 239, 0.88);
  font-size: 0.88rem;
  font-weight: 500;
}

.auth-features .feature-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #90caf9;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.auth-features svg { width: 14px; height: 14px; }

.auth-foot {
  font-size: 0.76rem;
  color: rgba(233, 236, 239, 0.5);
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: var(--bg-alt);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 2.1rem;
}

.auth-card h2 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.auth-card > p {
  margin-bottom: 1.4rem;
  font-size: 0.88rem;
}

.auth-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.4rem;
}

.auth-status.ok { background: var(--success-bg); color: var(--success-text); }
.auth-status.down { background: var(--error-bg); color: var(--error-text); }

.auth-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* CTA de login: nao esta ao lado de nenhum input, pode ficar mais alto que
   o padrao --field-h dos botoes de linha/tabela sem quebrar a regra de
   "botao ao lado de input tem que ter a mesma altura" (aqui nao ha input
   ao lado). height:auto opta para fora da altura fixa global. */
.auth-card button { width: 100%; height: auto; padding: 0.85rem 1.1rem; margin-top: 0.25rem; }

/* Photo drag zone */

.photo-dragzone {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.photo-square-wrap {
  cursor: grab;
  position: relative;
}

.photo-square-wrap:active { cursor: grabbing; }

.photo-square-wrap form { margin: 0; }

.photo-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 1 / 1;
  border: 2px dashed #90caf9;
  border-radius: var(--radius-md);
  background-color: var(--brand-soft);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.photo-square:hover { border-color: var(--brand); }

.photo-square.filled {
  border-style: solid;
  border-color: var(--border-strong);
}

.photo-square-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem;
}

.photo-square-empty svg { width: 26px; height: 26px; }

.drag-handle {
  position: absolute;
  top: 0.4rem;
  left: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(33, 37, 41, 0.55);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  letter-spacing: 0.1em;
}

/* Lupa/zoom nas fotos do anuncio (mesma ideia do lightbox ja usado nas
   listas de produtos/anuncios, so que aqui ao lado do drag-handle). */
.photo-zoom-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(33, 37, 41, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
}

.photo-zoom-btn svg { width: 12px; height: 12px; }

.photo-zoom-btn:hover { background: rgba(33, 37, 41, 0.8); }

.photo-square-wrap:not(:first-child) .photo-square-primary-badge {
  display: none;
}

.photo-square-primary-badge {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Checkbox de selecionar foto pra usar no popup "Melhorar com IA" -- fica
   no canto inferior direito do quadrado (o inferior-centro ja e ocupado
   pelo badge "Principal", o superior ja tem drag-handle + lupa). */
.photo-square-select {
  position: absolute;
  bottom: 0.4rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(33, 37, 41, 0.55);
  cursor: pointer;
}

.photo-square-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Varinha magica de remover fundo com IA (@imgly/background-removal,
   2026-07-13) -- canto inferior esquerdo do quadrado (unico canto livre:
   superior tem drag-handle+lupa, inferior-direito tem o checkbox de selecao,
   inferior-centro tem o badge "Principal" na primeira foto). */
.photo-wand-btn {
  position: absolute;
  bottom: 0.4rem;
  left: 0.5rem;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(33, 37, 41, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
}

.photo-wand-btn svg { width: 12px; height: 12px; }

.photo-wand-btn:hover { background: rgba(33, 37, 41, 0.8); }

/* Popup "Melhorar fotos com IA" (ad_detail.html) -- barra de modo (fotos
   selecionadas / gerar novas), lista de resultados com comparacao
   antes/depois empilhada (a foto original menor em cima, o resultado da IA
   maior embaixo, como pedido) e checkbox por card pra escolher o que
   aplicar. */
.photo-ai-mode-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.photo-ai-mode-btn {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 0.9rem;
  height: auto;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.photo-ai-mode-btn:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-color: var(--brand);
  transform: none;
  box-shadow: none;
}

.photo-ai-mode-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

#photo-ai-generate-options {
  margin-bottom: 0.75rem;
}

.photo-ai-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  max-height: 420px;
  overflow-y: auto;
}

.photo-ai-result-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem;
}

.photo-ai-before-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.photo-ai-before,
.photo-ai-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.photo-ai-before img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  opacity: 0.8;
}

.photo-ai-after img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
}

@media (max-width: 620px) {
  .photo-ai-after img { width: 100%; height: auto; max-width: 240px; }
}

.photo-remove-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
}

.error-hint {
  color: var(--error-text);
  font-weight: 600;
  margin-top: 0.4rem;
}

/* Compatibility rows */

.compat-rows {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.compat-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr 0.8fr 0.8fr 0.7fr auto;
  gap: 0.5rem;
  align-items: center;
}

.compat-row input {
  padding: 0.6rem 0.7rem;
  font-size: 0.85rem;
}

.compat-remove {
  background: var(--error-bg);
  color: var(--error-text);
  border: none;
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  padding: 0;
  box-shadow: none;
  font-weight: 700;
}

.compat-remove:hover {
  filter: none;
  transform: none;
  background: var(--error-bg);
}

/* Attributes grid */

.attributes-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.attr-tag {
  margin-left: 0.4rem;
  vertical-align: middle;
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
}

/* Compact table variant */

.table-compact td,
.table-compact tbody th,
.table-compact thead th {
  padding: 0.6rem 1.1rem;
}

.preview-cell {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

/* Checklist */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.checklist-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.checklist-icon svg { width: 13px; height: 13px; }

.checklist li.ok .checklist-icon {
  background: var(--success-bg);
  color: var(--success-text);
}

.checklist li.pending .checklist-icon {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.checklist li.pending { color: var(--text-muted); }

/* Category search */

.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.75rem;
}

.category-results {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.category-dropdown {
  max-height: 360px;
  overflow-y: auto;
}

.category-dropdown:empty {
  margin-top: 0;
}

.category-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}

.category-result strong {
  display: block;
  font-size: 0.9rem;
}

.category-result button {
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.current-category {
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/* Responsive */

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    padding: 2.25rem;
  }

  .auth-copy h1 { max-width: none; margin-top: 1.5rem; }
}

@media (max-width: 620px) {
  .content { padding: 1.25rem 1.1rem 2rem; }
  .hero, .panel { padding: 1.25rem; }
  .stats { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .category-result { flex-direction: column; align-items: flex-start; }
  .compat-row { grid-template-columns: 1fr 1fr; }
  .attributes-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .photo-dragzone { grid-template-columns: 1fr; }
}

/* Products toolbar (search + filter + upload) */

.products-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.toolbar-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.toolbar-search input[type="text"] {
  width: 260px;
  max-width: 60vw;
}

/* Lista de anuncios (pedido do usuario, 2026-07-12): botao de busca so com
   icone (reusa .icon-btn, mesmo quadrado var(--field-h) dos demais icones
   do sistema) + input de busca um pouco mais largo -- escopado por id pra
   nao afetar o toolbar-search de products.html, que compartilha as mesmas
   classes base. Os botoes "Filtrar"/"Limpar filtros"/menu "..." agrupados
   em .toolbar-actions-right, empurrados pro canto direito pelo
   justify-content: space-between de .products-toolbar (2 filhos diretos:
   o form de busca e este wrapper). */
#ads-search-form input[type="text"] {
  width: 320px;
}

.toolbar-actions-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Botao de filtro "precisa de atencao" (lista de anuncios) -- pedido do
   usuario (2026-07-12) de conseguir filtrar quem exige atencao e o porque.
   Usa a paleta de warning (nao error) porque nem todo ponto de atencao e
   bloqueante -- so o badge por linha diferencia error/warning de verdade. */
.attention-filter-toggle {
  background: var(--warning-bg);
  border-color: rgba(239, 108, 0, 0.35);
  color: var(--warning-text);
}
.attention-filter-toggle:hover {
  background: var(--warning-bg);
  filter: brightness(0.96);
}
.attention-filter-toggle.active {
  background: var(--warning-text);
  border-color: var(--warning-text);
  color: white;
}

.attention-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 220px;
}
.attention-badge-list {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  width: fit-content;
}
.attention-badge-list.severity-error { background: var(--error-bg); color: var(--error-text); }
.attention-badge-list.severity-warning { background: var(--warning-bg); color: var(--warning-text); }
.attention-badge-list.severity-ok { background: var(--success-bg); color: var(--success-text); }

/* Aba de Perguntas e Respostas (ad_detail.html, pedido do usuario 2026-07-12) */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.35rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 0.7rem;
  font-weight: 700;
}
.question-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.question-text {
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.question-answer {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.question-answer p {
  margin: 0.3rem 0 0;
}
.question-answer-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.5rem;
}
.question-answer-form textarea {
  flex: 1;
  resize: vertical;
}

/* Características do produto (Cadastro de Produto, ad_detail.html, pedido
   do usuario 2026-07-12) -- lista dinamica de pares label/valor. */
.characteristics-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.characteristic-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.characteristic-row input {
  height: var(--field-h);
}
.characteristic-label-input {
  flex: 0 0 220px;
}
.characteristic-value-input {
  flex: 1;
}
.characteristic-row .icon-btn {
  flex: 0 0 auto;
}

/* Produtos semelhantes (Cadastro de Produto, ad_detail.html, pedido do
   usuario 2026-07-13) -- lista de produtos casados por OEM/codigo, mais
   entradas manuais. Reusa .characteristic-row como base de layout (mesma
   altura/alinhamento), so acrescenta o wrapper de info + badges. */
.similar-products-panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.similar-product-panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.1rem 0 0.75rem;
}
.similar-product-panel-row {
  align-items: center;
}
.similar-product-group-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0.6rem 0 0.1rem;
}
.similar-product-group-heading:first-child {
  margin-top: 0;
}
.similar-product-panel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.similar-product-panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.similar-product-panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.1rem;
}
.similar-product-reason-badge {
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.similar-product-reason-badge.manual {
  background: var(--neutral-soft);
  color: var(--text-muted);
}
.attention-flag-line {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Lista de anuncios reorganizada (pedido do usuario, 2026-07-20): titulo +
   codigo/ID ML/loja numa celula so, metricas de visitas/vendidos, valor de
   venda x valor liquido recebido do ML com percentual vs. o valor do
   produto (cadastro), tipo de anuncio + comissao numa celula so. */
.ad-cell-title {
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.ad-cell-subline {
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.3;
  margin-top: 0.15rem;
  font-weight: 400;
}
.ad-cell-subline.muted {
  font-size: 0.76rem;
  opacity: 0.85;
}
.ad-cell-metric {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.ad-cell-metric svg { flex: 0 0 auto; color: var(--text-faint); }
.ad-cell-value {
  font-weight: 600;
  color: var(--text);
}
.text-danger { color: var(--danger); }
.text-success { color: var(--success-text); }

.toolbar-search select {
  width: auto;
}

.toolbar-search button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Paginacao das listagens (produtos/anuncios) */

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.75rem;
  border-top: 1px solid var(--border);
}

.pagination-info {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pagination-links {
  display: flex;
  gap: 0.5rem;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
}

.page-btn:hover { background: var(--brand-soft); color: var(--brand-dark); }

.page-btn.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.page-btn.current {
  background: var(--brand);
  color: var(--brand-contrast, #fff);
  border-color: var(--brand);
  cursor: default;
}

.page-btn.ellipsis {
  border: none;
  background: none;
  padding: 0.45rem 0.2rem;
  color: var(--text-faint);
  font-weight: 400;
}

/* Bulk selection bar */

.bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--dark);
  color: #e9ecef;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}

.bulk-bar.visible { display: flex; }

.bulk-bar .button-row { margin: 0; }

.bulk-bar .secondary-dark {
  background: rgba(255, 255, 255, 0.12);
  color: #e9ecef;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.bulk-bar .secondary-dark:hover { background: rgba(255, 255, 255, 0.2); }

/* Row icon actions -- IMPORTANTE: display:flex nunca vai direto no <td>.
   Um <td> com display:flex deixa de se comportar como celula de tabela de
   verdade (perde a participacao no algoritmo de layout da tabela), entao a
   altura da linha calculada pelo navegador nao bate mais com a dos outros
   <td> da mesma <tr> -- era a causa raiz do "botao desalinhado com a
   linha"/"linha de botoes em desencontro" reportado nas listas de produtos
   e anuncios. O flex fica num <div class="row-actions-inner"> DENTRO do
   <td>, que continua um table-cell normal (vertical-align:middle herdado
   de `td`, mesma altura de linha que as outras colunas). */
.row-actions {
  white-space: nowrap;
}

.row-actions-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem;
}

/* Checkbox das listas (selecionar linha / selecionar tudo) no tema do
   sistema, em vez do checkbox padrao (cinza) do navegador. */
table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  accent-color: var(--brand);
  cursor: pointer;
  border-radius: 4px;
}

.table-card table thead th:first-child,
.table-card table tbody td:first-child {
  width: 40px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 0;
}

.icon-btn svg { width: 15px; height: 15px; }

.icon-btn:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  transform: none;
  box-shadow: none;
}

.icon-btn.danger:hover {
  background: var(--error-bg);
  color: var(--error-text);
}

/* Pausar/ativar na lista de anuncios (2026-07-12): cor permanente (nao so
   no hover) pra diferenciar de cara os dois botoes, que antes eram
   identicos ao resto dos icones cinza da linha. */
.icon-btn.warn {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-bg);
}
.icon-btn.warn:hover {
  background: var(--warning-text);
  color: #fff;
}
.icon-btn.success {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-bg);
}
.icon-btn.success:hover {
  background: var(--success-text);
  color: #fff;
}

/* Aba de metricas de desempenho (ad_detail.html, 2026-07-12) -- grafico de
   barras simples em CSS puro (sem lib de charts nova, so pra 30 pontos de
   visitas/dia). */
.metrics-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.metrics-bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 6px;
}
.metrics-bar {
  width: 100%;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.metrics-bar-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  writing-mode: vertical-rl;
}

.icon-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.icon-btn.disabled:hover {
  background: var(--bg-alt);
  color: var(--text-muted);
}

.icon-btn.icon-btn-busy svg { animation: icon-btn-spin 0.8s linear infinite; }

@keyframes icon-btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ad-nav-arrows {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.ad-jump-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.9rem;
  max-height: 55vh;
  overflow-y: auto;
}

.ad-jump-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: inherit;
  text-decoration: none;
}

.ad-jump-row:hover {
  background: var(--brand-soft);
}

.ad-jump-row.current {
  border: 1px solid var(--brand-dark);
}

.ad-jump-title {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ad-jump-search {
  width: 100%;
}

/* Miniatura de foto principal nas listagens de produtos/anúncios */

.row-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-faint);
  flex-shrink: 0;
}

.row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.row-thumb.empty svg {
  width: 18px;
  height: 18px;
}

/* Modals (delete confirmation, upload) */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(33, 37, 41, 0.55);
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--surface-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  width: 100%;
  padding: 1.75rem;
  /* Bug real corrigido 2026-07-19: mensagem longa (ex. lista de causas do
     Mercado Livre ao publicar) nao tinha limite de altura nem rolagem --
     o popup "estourava" pra fora da tela sem jeito de ler o resto nem de
     fechar o botao OK, que ficava empurrado alem do viewport. Agora todo
     modal-box (inclusive as variantes .wide/.xwide/.editor-box, que ja
     tinham max-height proprio e continuam valendo por especificidade)
     tem um teto de altura com rolagem interna. */
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

/* Mensagem do popup de aviso (window.AdsPremiumModal.alert) e do popup de
   confirmacao (window.AdsPremiumModal.confirm) podem ter varias linhas
   (ex.: lista de pendencias do checklist, ou causas do Mercado Livre
   separadas uma por linha) -- preserva as quebras de linha do texto e
   quebra palavra longa em vez de estourar a largura do popup. */
#app-confirm-message,
#app-alert-message {
  white-space: pre-line;
  overflow-wrap: break-word;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.modal-head h3 { margin: 0; }

.modal-close {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  padding: 0.3rem 0.6rem;
  width: auto;
}

.modal-close:hover {
  background: var(--bg-alt);
  transform: none;
  box-shadow: none;
}

.upload-dropcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 2px dashed #90caf9;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  padding: 2rem 1rem;
  cursor: pointer;
  text-align: center;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 1.1rem;
}

.upload-dropcard input[type="file"] { display: none; }

.upload-file-info { margin-top: 0.3rem; }
.upload-file-info strong { display: block; color: var(--text); }

@media (max-width: 620px) {
  .products-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-search input[type="text"] { width: 100%; max-width: none; }
  #ads-search-form input[type="text"] { width: 100%; }
  .toolbar-actions-right { justify-content: flex-end; }
}

/* Floating checklist (ad_detail) -- sempre expandido, sem minimizar; a
   posicao "top" e recalculada via JS pra sempre ficar logo abaixo da base
   do cabecalho fixo (#ad-header-panel), que tem altura variavel. */

.floating-checklist {
  position: fixed;
  top: 96px;
  right: 1.5rem;
  width: 270px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.1rem;
  z-index: 40;
  transition: top 0.12s ease;
}

.floating-checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark);
  margin-bottom: 0.7rem;
}

.floating-checklist.checklist-hidden { display: none; }

#checklist-visibility-btn.active { background: var(--brand-soft); color: var(--brand-dark); }

/* Cabecalho do anuncio: fixo/flutuante (sticky) logo abaixo da topbar global,
   pra manter o menu de acoes (salvar/validar/concluir/preencher com IA)
   sempre acessivel mesmo com a pagina rolada bem pra baixo. */
.ad-header-panel {
  position: sticky;
  top: 76px;
  z-index: 39;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1180px) {
  .ad-header-panel { position: static; }
}

/* Menu suspenso "mais acoes" no header do anuncio -- mesmo padrao visual do
   user-dropdown (sem shadow nos botoes individuais, lista limpa estilo
   Google, so o painel em si tem borda/sombra sutil). */
.header-menu {
  position: relative;
}

.header-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0.2rem;
}

.header-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  padding: 0.35rem;
}

.header-menu-dropdown.open { display: block; }

/* Menu de clique-na-linha (products.html) -- mesmo visual do
   .header-menu-dropdown, mas fixed no ponto do clique do mouse em vez de
   absolute relativo a um botao pai. */
.row-click-menu {
  position: fixed;
  right: auto;
  top: auto;
  min-width: 240px;
}

/* Forca o mesmo visual em TODOS os itens do menu, nao importa a classe extra
   que cada botao carregue (fill-missing-btn, ou nenhuma) nem o estado
   (hover/disabled) -- padroniza icone, fonte, alinhamento e espaçamento. */
/* Regra permanente do sistema (2026-07-19): ícone + texto de QUALQUER item
   de menu suspenso sempre alinhados à ESQUERDA -- nunca space-between/
   center/flex-end, que empurraria o texto pra longe do ícone. Declarado
   explicitamente aqui (mesmo já sendo o default de flex-direction:row) pra
   nenhuma regra futura sobrescrever sem querer. */
.header-menu-dropdown button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 0.6rem 0.65rem;
  margin: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  letter-spacing: normal;
}

.header-menu-dropdown button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.header-menu-dropdown button:hover {
  background: var(--bg-alt);
  filter: none;
  transform: none;
  box-shadow: none;
  color: var(--text);
}

.header-menu-dropdown button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.header-menu-dropdown button.danger { color: var(--error-text); }
.header-menu-dropdown button.danger:hover { background: var(--error-bg); color: var(--error-text); }

@media (max-width: 1180px) {
  .floating-checklist { position: static; width: auto; max-height: none; margin-bottom: 1.1rem; box-shadow: var(--shadow-sm); }
}

/* Layout lado a lado: fotos (coluna menor) + dados comerciais (coluna maior) */

.ad-tab-bar {
  display: flex;
  gap: 0.25rem;
  margin: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--border-strong);
}

.ad-tab-btn {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  margin-bottom: -1px;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* IMPORTANTE: precisa declarar `background` explicitamente aqui (nao so
   `color`) -- senao o hover herda `background: var(--brand-dark)` do
   `button:hover` global (a base do sistema), deixando o texto escuro
   (var(--text)) sobre um fundo verde escuro tambem, quase ilegivel. Usa o
   mesmo par claro/escuro do hover dos .icon-btn (--brand-soft de fundo +
   --brand-dark no texto) pra manter contraste bom e consistencia visual. */
.ad-tab-btn:hover {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-dark);
  transform: none;
  box-shadow: none;
}

.ad-tab-btn.active {
  background: none;
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}

.ad-tab-btn.active:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}

.ad-main-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.ad-photos-panel, .ad-commercial-panel, .ad-product-panel { margin-bottom: 0; }

/* Coluna esquerda (fotos + referencia visual de caracteristicas/OEM) --
   pedido do usuario, 2026-07-19, itens 7 e 9: as duas secoes viram UM
   wrapper so (grid-column 1 do .ad-main-layout), pra poder ficar fixa
   (sticky) junto durante o scroll da pagina sem sobrepor o cabecalho. O
   `top`/`max-height` reais sao calculados em JS (mesma tecnica ja usada
   pelo checklist flutuante, medindo a altura de #ad-header-panel, que
   tambem e sticky e varia de altura) -- os valores abaixo sao so o
   fallback inicial antes do JS rodar. */
.ad-left-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100vh - 76px - 1rem);
  overflow-y: auto;
}
@media (max-width: 980px) {
  /* Empilhado (grid vira 1 coluna nessa largura, ver .ad-main-layout logo
     abaixo) -- sticky nao faz sentido mais aqui, senao a coluna de fotos
     "gruda" no topo escondendo o resto do anuncio em telas estreitas. */
  .ad-left-column {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.ad-product-reference-panel { margin-bottom: 0; }
.product-reference-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.product-reference-list li {
  padding: 0.35rem 0.6rem;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.product-reference-list li strong { color: var(--text); }

/* Painel "Valores do anuncio" (secao separada abaixo de Dados comerciais,
   dentro da mesma coluna de abas) -- respiro entre os dois paineis, ja que
   .ad-commercial-panel zera o margin-bottom. */
.ad-values-panel {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.ad-values-panel > h3 { margin-bottom: 0.9rem; }

/* Secoes novas do anuncio (2026-07-14): Categoria / Produto de catalogo /
   Dimensoes -- mesmo tratamento visual/largura do painel de Valores (que
   zera o margin-bottom), entao cada uma abre com margin-top proprio e a
   ultima (Dimensoes) volta pro margin-bottom padrao de .panel pra dar
   respiro antes das Caracteristicas da categoria logo abaixo. */
.ad-category-panel,
.ad-catalog-panel,
.ad-dimensions-panel { margin-top: 1.5rem; margin-bottom: 0; }
.ad-dimensions-panel { margin-bottom: 1.5rem; }
.ad-category-panel > h3,
.ad-catalog-panel > h3,
.ad-dimensions-panel > h3 { margin-bottom: 0.9rem; }

.ad-commercial-panel > h3,
.ad-product-panel .panel-head { margin-bottom: 0.9rem; }

/* Cadastro de Produto pediu margem lateral um pouco maior que o padrao de
   painel do sistema (1.75rem) -- respiro extra pros campos nao ficarem
   colados na borda do card. */
.ad-product-panel {
  padding-left: 2.3rem;
  padding-right: 2.3rem;
}

/* Pedido do usuario (2026-07-19, item 8): a secao "Caracteristicas do
   produto" deve ter a MESMA largura visual da secao "Dados comerciais do
   anuncio" (.ad-commercial-panel, dentro do padding padrao de .panel,
   1.75rem) -- mas ela vive dentro de .ad-product-panel, que tem padding
   lateral MAIOR (2.3rem, pedido de rodada anterior). Compensa a diferenca
   (0.55rem de cada lado) com margem negativa so nesse bloco, sem mexer no
   padding do painel inteiro (que continua valendo pros demais campos do
   Cadastro de Produto). */
.characteristics-panel-inset {
  margin-left: -0.55rem;
  margin-right: -0.55rem;
  width: calc(100% + 1.1rem);
}

.ai-field-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.ai-field-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Variante pra quando o texto do toggle e uma frase longa (ex.: aviso no
   popup de importar planilha) em vez de um rotulo curto -- a regra base
   usa white-space:nowrap de proposito (rotulos curtos tipo "Preco
   personalizado" ficam melhor numa linha so), mas isso cortava/nao
   quebrava frases longas. */
.ai-field-toggle.wrap {
  white-space: normal;
  align-items: flex-start;
}

.ai-field-toggle.wrap input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

/* Codigo original duplicado (ja usado em outro produto) */
.field-duplicate {
  border-color: var(--warning-text) !important;
  background: var(--warning-bg) !important;
  color: var(--warning-text);
}

@media (max-width: 980px) {
  .ad-main-layout { grid-template-columns: 1fr; }
}

/* Compact photo gallery (ad_detail) */

.photo-dragzone.compact {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.7rem;
}

.photo-dragzone.compact.two-col-photos {
  grid-template-columns: repeat(2, 1fr);
}

.photo-dragzone.compact .photo-square {
  border-radius: var(--radius-sm);
}

.photo-add-tile { cursor: pointer; }

.photo-add-tile .photo-square {
  background: var(--brand-soft);
  border-style: dashed;
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.3rem;
}

.photo-add-tile .photo-square svg { width: 20px; height: 20px; }

/* Pedido do usuario (2026-07-19, item 6): botao de adicionar foto do
   Cadastro de Produto mais resumido -- reduz ainda mais o icone/texto
   dentro do quadrado tracejado. Ja ficava por ultimo no DOM (depois do
   loop de fotos existentes, ver product_detail.html), entao "apos as
   fotos" ja era satisfeito -- essa regra so encolhe o visual, como pedido. */
.two-col-photos .photo-add-tile .photo-square svg { width: 16px; height: 16px; }
.two-col-photos .photo-add-tile .photo-square { font-size: 0.65rem; gap: 0.2rem; }

.photo-remove-x {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  border: 2px solid var(--surface-solid);
  box-shadow: var(--shadow-sm);
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  z-index: 2;
}

.photo-remove-x:hover { background: var(--error-text); transform: none; box-shadow: var(--shadow-sm); }

.photo-url-list {
  font-size: 0.72rem;
  color: var(--text-faint);
  word-break: break-all;
  margin-top: 0.6rem;
}

/* Compact 2-column ad form */

.form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.form-grid.two-col .span-2 { grid-column: 1 / -1; }

/* Grid compacta de 3 colunas usada nos dados comerciais do anuncio (titulo,
   preco, categoria, sku etc.) -- deixa mais campos visiveis por linha e
   reduz o espacamento vertical entre eles. */
.form-grid.compact-3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

.form-grid.compact-3col .span-2 { grid-column: span 2; }
.form-grid.compact-3col .span-3 { grid-column: 1 / -1; }

.form-grid.compact-3col label {
  gap: 0.3rem;
  font-size: 0.78rem;
}

.form-grid.compact-3col input,
.form-grid.compact-3col select {
  /* So padding horizontal -- a altura vem de --field-h (regra global de
     input/select), nunca da padding vertical, senao volta a ficar maior
     que os botoes ao lado (mesmo problema de especificidade documentado
     acima pro overlap do R$: uma regra mais especifica redefinindo
     padding-vertical destrava a altura fixa por baixo). */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  font-size: 0.85rem;
}

.form-grid.compact-3col textarea {
  font-size: 0.88rem;
}

/* Popup de detalhes completos da categoria (ad_detail) */

.category-details-body { line-height: 1.4; }

.category-details-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

.category-details-header h4 { margin: 0 0 0.15rem; }

.category-details-picture {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 0.3rem;
}

.category-details-breadcrumb { margin: 0 0 1rem; }

.category-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem 1.2rem;
  margin-bottom: 1rem;
}

.category-details-grid strong {
  display: block;
  font-size: 1rem;
  color: var(--ink);
}

.category-details-grid span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.category-details-subhead {
  margin: 0.4rem 0 0.5rem;
  font-size: 0.85rem;
}

.category-details-children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 620px) {
  .category-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Popup "produtos parecidos no Mercado Livre" (ao lado do Preço de venda) --
   reusa .category-details-body/.category-details-subhead do popup de
   detalhes de categoria, só a lista de resultados é nova. */
.similar-products-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 380px;
  overflow-y: auto;
}

.similar-product-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.similar-product-row:hover {
  border-color: var(--brand);
  background: rgba(0, 0, 0, 0.02);
}

.similar-product-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}

.similar-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.similar-product-title {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.similar-product-price {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.input-with-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input-with-action input { flex: 1; }

/* Botao de acao (lupa etc.) ao lado de um input -- trava em --field-h nos
   dois eixos (mesma altura E largura do input/botao padrao do sistema),
   nunca "auto"/stretch: isso e o que deixava o botao maior/desproporcional
   quando o input ao lado ficava mais alto por qualquer motivo. Com os dois
   fixos no mesmo valor, o botao nunca passa da altura do input. */
.input-with-action .icon-btn {
  width: var(--field-h);
  height: var(--field-h);
  flex: 0 0 auto;
}

/* Input monetario (R$) / percentual (%) -- prefixo/sufixo fixo dentro do
   proprio campo, em vez de deixar "(R$)" solto no texto do label (que
   nao escala com o valor digitado e fica desalinhado entre campos). */
.currency-input, .percent-input, .unit-input {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: var(--field-h);
}

.currency-input .currency-affix, .percent-input .currency-affix, .unit-input .currency-affix {
  position: absolute;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  pointer-events: none;
}

.currency-input .currency-affix { left: 0.75rem; }

/* CAUSA REAL do overlap do "R$" que persistiu mesmo depois de aumentar o
   padding: ".form-grid.compact-3col input" (2 classes + elemento) tem
   especificidade MAIOR que ".currency-input input" (1 classe + elemento) --
   o navegador ignorava esse padding-left inteiro e usava o padding generico
   do grid por baixo, nao importa o valor que a gente colocasse aqui.
   Especificidade de CSS nao depende da ordem no arquivo. !important aqui e
   intencional: e um ajuste estreito e sempre correto (espaco reservado pro
   prefixo/sufixo nunca deve perder pra um padding de grid generico). Valor
   reduzido pra 2.3rem (era 3rem) -- espaco justo pro "R$" sem sobrar
   demais, a pedido do usuario. */
.currency-input input { padding-left: 2.3rem !important; }

/* .percent-input (%) e .unit-input (kg/cm) colocam o sufixo do lado
   direito -- por padrao o navegador desenha as setinhas de incremento de
   input[type=number] bem nesse canto, o que fazia o sufixo aparecer
   espremido/sobreposto em cima delas. As regras abaixo removem essas
   setinhas nativas (nao fazem falta aqui, ninguem usa pra digitar preco/
   peso) e dao espaco reservado suficiente pro sufixo nunca encostar no
   numero digitado. Mesmo !important acima, e pelo mesmo motivo. Valor
   reduzido pra 1.9rem (era 2.4rem). */
.percent-input .currency-affix, .unit-input .currency-affix { right: 0.65rem; }
.percent-input input, .unit-input input { padding-right: 1.9rem !important; }

.currency-input input[type="number"],
.percent-input input[type="number"],
.unit-input input[type="number"] {
  -moz-appearance: textfield;
}

.currency-input input[type="number"]::-webkit-outer-spin-button,
.currency-input input[type="number"]::-webkit-inner-spin-button,
.percent-input input[type="number"]::-webkit-outer-spin-button,
.percent-input input[type="number"]::-webkit-inner-spin-button,
.unit-input input[type="number"]::-webkit-outer-spin-button,
.unit-input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Peso/dimensoes do pacote -- linha compacta de 4 campos pequenos usada
   so pra consultar o frete real (nao sao atributos do Mercado Livre em
   si, ficam junto do campo de frete). */
.package-dims-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.package-dims-row .package-dim-field {
  /* Nao usa flex:1 -- campo pequeno (peso/cm) nao precisa esticar pra
     preencher a largura toda da linha, fica proporcional ao conteudo. */
  flex: 0 1 120px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.package-dims-row .package-dim-field span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.shipping-cost-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.shipping-cost-controls .currency-input { flex: 1; min-width: 0; }

.shipping-cost-controls .icon-btn {
  width: var(--field-h);
  height: var(--field-h);
  flex: 0 0 auto;
}

/* Grupo de dois campos lado a lado (ex.: comissao %/R$, margem %/R$) --
   substitui um input unico dentro de .input-with-action/.pricing-field sem
   quebrar o alinhamento com o botao de lupa ao lado. */
.pricing-dual-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.pricing-dual-group .currency-input,
.pricing-dual-group .percent-input {
  flex: 1;
  min-width: 0;
}

/* Select de unidade (%/R$) dentro de um pricing-dual-group (ex.: Encargos)
   -- mesma altura padrao do sistema, nunca maior/menor que os inputs
   vizinhos no mesmo grupo. */
.pricing-dual-group select {
  flex: 0 0 auto;
  width: 62px;
  height: var(--field-h);
  padding: 0 0.4rem;
}

/* Linha da formula de precificacao no Cadastro de Produto (custo -> valor
   do produto) e "Total do anuncio e lucro" no anuncio -- mesmo padrao
   visual de .package-dims-row. Todos os campos ficam na mesma linha
   horizontal (nowrap) dentro do painel; so quebra em telas realmente
   estreitas (ver media query mais abaixo), nunca no meio de uma coluna do
   grid por causa de um campo largo demais. */
.pricing-formula-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pricing-formula-row .pricing-field {
  /* Nao usa flex:1 -- cada campo fica do tamanho do conteudo (numero +
     prefixo/sufixo), nao esticado pra preencher a linha toda. Campos com
     um unico input (Custo, Imposto) ficam mais estreitos; campos com
     .pricing-dual-group (Margem, Encargos -- 2 inputs lado a lado) usam
     .pricing-field-wide, que reserva espaco suficiente pros dois sem
     cortar o valor digitado. */
  flex: 0 1 145px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pricing-formula-row .pricing-field span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Campo que carrega um .pricing-dual-group (2 inputs lado a lado, ex.:
   Margem %/R$, Encargos %/R$/select) precisa de mais largura que um campo
   de input unico -- sem isso os 2 subcampos ficavam espremidos demais e
   cortavam o valor digitado. */
.pricing-formula-row .pricing-field.pricing-field-wide {
  flex-basis: 235px;
}

/* Botao de acao dentro de uma pricing-formula-row (ex.: "Usar esse valor
   no preco") nao deve ser espremido pela largura fixa dos campos vizinhos
   -- fica do tamanho do proprio texto/padding, nunca cortado/quebrado. */
.pricing-formula-row .pricing-field.pricing-field-action {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.pricing-formula-row .pricing-field.pricing-field-action button {
  white-space: nowrap;
}

/* Campo estreito dentro da grade compacta (ex.: NF %) -- a celula do grid
   de 3 colunas reserva 1/3 do painel, mas o conteudo (percentual de 2-3
   digitos) nao precisa de tudo isso; trava a largura maxima no tamanho do
   conteudo em vez de esticar (o grid item por padrao tenta preencher a
   coluna toda -- max-width sem justify-self:stretch alterado ja resolve,
   o proprio grid posiciona o item encolhido no inicio da celula). */
.field-narrow { max-width: 150px; }

#venda-sugerida-hint,
#valor-produto-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Switch/toggle deslizante (ex.: "Preco personalizado") -- usado ao lado
   de um input, nunca como checkbox solto abaixo dele. Sibling selector
   (input ~ .switch-slider) troca a aparencia via :checked, sem JS extra
   alem do onchange que ja disparava no checkbox antigo. */
.switch-toggle {
  --switch-w: 34px;
  --switch-h: 18px;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: var(--switch-w);
  height: var(--switch-h);
  cursor: pointer;
}

.switch-toggle input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.switch-toggle .switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background 0.15s ease;
  pointer-events: none;
}

.switch-toggle .switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--switch-h) - 4px);
  height: calc(var(--switch-h) - 4px);
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}

.switch-toggle input:checked ~ .switch-slider {
  background: var(--brand);
}

.switch-toggle input:checked ~ .switch-slider::before {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
}

.switch-toggle input:focus-visible ~ .switch-slider {
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.modal-box.wide { max-width: 640px; }

/* Popup de categoria do Mercado Livre (pedido do usuario, 2026-07-19,
   repetido: "aumentar largura popup de categoria") -- mais largo que o
   .wide padrao pra caber breadcrumb comprido + botao "Usar esta
   categoria" sem quebrar linha feio. */
.modal-box.category-modal-box { max-width: 820px; }

.category-locked-banner {
  background: var(--warning-bg, rgba(255, 152, 0, 0.12));
  color: var(--warning-text, #b25e00);
  border: 1px solid var(--warning, #ff9800);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: -0.2rem 0 0.9rem;
}

/* Campo "Categoria no Mercado Livre" agora se comporta como um dropdown de
   verdade -- readonly mas clicavel (abre o popup), com cursor/hover
   deixando isso claro visualmente. */
.category-dropdown-trigger {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(1.1em + 1px), calc(100% - 7px) calc(1.1em + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.category-dropdown-trigger:hover {
  border-color: var(--brand);
}

/* Popup "Adicionar veiculos compativeis" (2026-07-14): pedido explicito de
   aumentar altura/largura do popup atual -- bem maior que .wide, com teto de
   altura + scroll proprio pra nunca estourar a tela em resolucao menor. */
.modal-box.xwide {
  max-width: 960px;
  max-height: 88vh;
  overflow-y: auto;
}

/* Lupa/zoom de foto (listas de produtos/anuncios) -- so a imagem, sem
   cabecalho de texto, com um X flutuante no canto pra fechar. */
.modal-box.lightbox-box {
  max-width: 90vw;
  width: auto;
  padding: 0.75rem;
  background: var(--dark);
  position: relative;
}
.modal-box.lightbox-box .modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 1;
}
.modal-box.lightbox-box img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-sm);
  margin: 0 auto;
}

/* Linhas de tabela clicaveis (produtos/anuncios): clicar na linha abre a
   edicao; clicar na miniatura da foto abre a lupa (stopPropagation evita
   que os dois cliques disparem juntos); clicar em checkbox/botoes tambem
   nao deve navegar (marcado via .no-row-click). */
.table-card table tbody tr.row-clickable {
  cursor: pointer;
}
.table-card table tbody tr.row-clickable:hover td {
  background: var(--bg-alt);
}
.row-thumb.clickable { cursor: zoom-in; }

.ai-model-current {
  font-weight: 600;
  margin-right: 0.75rem;
}

.ai-model-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.ai-model-card {
  border: 1px solid var(--border, #e2ddd0);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ai-model-card.current {
  border-color: var(--brand);
  background: rgba(33, 150, 243, 0.06);
}

.ai-model-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ai-model-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Aba "Usuários" de Configurações (pedido do usuário, 2026-07-19). */
.user-row-avatar,
.user-row-avatar-initials {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.68rem;
  flex-shrink: 0;
}

.user-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
}

.user-log-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}

.user-log-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Aba "IA" de Configuracoes: lista de pontos de uso da IA (titulo,
   descricao, fotos, etc.), cada linha com toggle + seletor de conexao +
   icone de ver prompt. Layout em wrapper interno (nao direto no td, essa
   linha nao e uma tabela mesmo, mas mantem o mesmo espirito de nunca
   depender de display:flex desalinhar algo -- aqui e so um <div>). */
.settings-touchpoint-section-title {
  margin: 1rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.settings-touchpoint-section-title:first-of-type { margin-top: 0.25rem; }

.touchpoint-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.touchpoint-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.touchpoint-label {
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.touchpoint-connection-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 170px;
  max-width: 220px;
}

@media (max-width: 700px) {
  .touchpoint-row { flex-wrap: wrap; }
  .touchpoint-connection-select { max-width: none; flex: 1 1 100%; order: 3; }
}

@media (max-width: 900px) {
  .form-grid.compact-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.compact-3col .span-2 { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .form-grid.two-col { grid-template-columns: 1fr; }
  .form-grid.compact-3col { grid-template-columns: 1fr; }
  .form-grid.compact-3col .span-2,
  .form-grid.compact-3col .span-3 { grid-column: 1 / -1; }
}

/* Global loading overlay (uploads, geracao de anuncios, etc.) */

/* Carregamento padronizado no canto inferior direito (mesmo estilo do
   #save-toast/#corner-toast) -- era um overlay de tela cheia bloqueante,
   trocado por um card pequeno e nao-bloqueante pra todas as acoes com
   carregamento do sistema (regra do CLAUDE.md: sempre canto inferior
   direito, com barra de progresso). Mantem os mesmos ids/estrutura HTML
   (global-loading-label/bar-track/bar-fill/percent) usados por
   AdsPremiumLoading -- so muda a apresentacao visual. */
.loading-overlay {
  display: none;
  position: fixed;
  inset: auto;
  bottom: 1.5rem;
  right: 1.5rem;
  background: transparent;
  z-index: 90;
  padding: 0;
  pointer-events: none;
}

.loading-overlay.open { display: block; }

.loading-overlay-box {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 300px;
  max-width: calc(100vw - 2rem);
  padding: 1rem 1.1rem;
  text-align: left;
  pointer-events: auto;
}

.loading-overlay-spinner {
  width: 20px;
  height: 20px;
  margin: 0 0 0.6rem;
  border-radius: 50%;
  border: 3px solid var(--brand-soft);
  border-top-color: var(--brand);
  animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.loading-overlay-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark);
  margin-bottom: 0.7rem;
}

@media (max-width: 620px) {
  .loading-overlay { left: 1rem; right: 1rem; bottom: 1rem; }
  .loading-overlay-box { width: auto; }
}

.loading-overlay-bar-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative;
}

.loading-overlay-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
  transition: width 0.2s ease;
}

.loading-overlay-bar-track.indeterminate .loading-overlay-bar-fill {
  width: 40% !important;
  transition: none;
  animation: loading-indeterminate 1.1s ease-in-out infinite;
}

@keyframes loading-indeterminate {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}

#global-loading-percent {
  margin: 0;
  font-weight: 600;
}

/* Validar/concluir anuncio no Mercado Livre */

.checklist-validate-btn {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.checklist-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.checklist-actions form { width: 100%; }

.checklist-actions .secondary-dark {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.panel-head-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Cabecalho do anuncio: title row + acoes alinhados no centro (sem o
   desalinhamento do button-row padrao, que tem margin-top pensado pra
   ficar embaixo de labels de formulario) e a linha de SKU/tipo/marca mais
   discreta, separada por uma linha sutil. */
.ad-header-panel .panel-head {
  align-items: center;
}

.ad-header-panel .panel-head .button-row {
  margin-top: 0;
  align-items: center;
}

/* Botoes primarios (Salvar/Publicar/Republicar/Sincronizar) do header do
   anuncio -- pedido do usuario, 2026-07-12: tirar do menu "..." e deixar
   sempre visiveis, alinhados a esquerda (abaixo do titulo/badges), em vez
   de escondidos dentro do dropdown de "mais acoes". */
.ad-header-panel .ad-header-actions {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.ad-header-panel > p {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.validation-ok {
  border: 1px solid rgba(30, 107, 49, 0.35);
  background: var(--success-bg);
}

.validation-ok h3 { color: var(--success-text); }

/* Resumo de "pontos de atencao" do anuncio (compute_ad_attention_flags) --
   pedido do usuario (2026-07-12): sinalizar sempre que o anuncio precisa de
   melhora, com o motivo. So aparece quando ha algum flag salvo (calculado na
   validacao). */
.attention-summary-panel {
  border: 1px solid rgba(239, 108, 0, 0.35);
  background: var(--warning-bg);
}
.attention-summary-panel .panel-head { margin-bottom: 0.6rem; }
.attention-summary-panel h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--warning-text);
}
.attention-summary-list {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.attention-summary-item {
  background: var(--surface-solid);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--warning-text);
}
.attention-summary-item.severity-error { border-left-color: var(--error-text); }
.attention-summary-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.attention-summary-hint {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Metricas do anuncio (visitas/vendidos/status real no ML) -- pedido do
   usuario (2026-07-12), mostradas como chips logo abaixo do SKU no
   cabecalho do anuncio, so quando ja existe meli_item_id. */
.ad-metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.ad-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--text-muted);
  text-decoration: none;
}
a.ad-metric-chip:hover { filter: brightness(0.96); }
.ad-metric-chip.severity-ok { background: var(--success-bg); color: var(--success-text); }
.ad-metric-chip.severity-error { background: var(--error-bg); color: var(--error-text); }

/* Loja (conta do Mercado Livre) dona do anuncio, na linha de SKU do
   cabecalho -- pedido do usuario, 2026-07-12: "mostrar no header qual loja
   esse anuncio pertence" (multiplas contas ML cadastradas). Mesmo espirito
   visual dos badges de tipo de anuncio (.listing-type-badge), pill pequena
   com a cor da marca pra se destacar sem competir com o resto da linha. */
.store-owner-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.82rem;
}

.ml-item-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--neutral-soft, #eef1f4);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  font-family: monospace;
  letter-spacing: 0.01em;
}

.ml-item-id-chip-empty {
  font-family: inherit;
  font-weight: 500;
  color: var(--text-muted);
}

.ml-item-id-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
}

.ml-item-id-copy:hover {
  color: var(--brand-dark);
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* Resumo de valores do anuncio (pedido do usuario, 2026-07-12) -- painel
   full-width acima da secao de fotos, espelho somente-leitura de tudo que ja
   e calculado nas duas abas (custo/margem/encargos/imposto/valor do produto
   no Cadastro de Produto; preco/comissao/frete/NF/venda total/lucro no
   Anuncio). Grid de cards pequenos, mesmo espirito visual dos .stats do
   dashboard -- .value-summary-highlight destaca os 3 totais (valor do
   produto, venda total, lucro) com fundo levemente tintado de --brand;
   lucro tambem ganha severity-error (vermelho) quando fica negativo, via JS
   (syncValueSummaryPanel). */
.value-summary-panel .panel-head { margin-bottom: 0.6rem; }
.value-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}
.value-summary-item {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
}
.value-summary-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.value-summary-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.value-summary-item.value-summary-highlight {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.value-summary-item.value-summary-highlight .value-summary-value { color: var(--brand-dark); }
.value-summary-item.severity-error { background: var(--error-bg); border-color: var(--error-text); }
.value-summary-item.severity-error .value-summary-value { color: var(--error-text); }
.value-summary-item.severity-ok.value-summary-highlight { background: var(--success-bg); border-color: var(--success-text); }
.value-summary-item.severity-ok.value-summary-highlight .value-summary-value { color: var(--success-text); }

/* Versao compacta do resumo de valores -- pedido do usuario pra ficar DENTRO
   do card de fotos (antes da grade de fotos), so com lucro/valor de
   venda/comissao/frete, em vez do painel full-width com os 11 campos de
   antes. Reusa .value-summary-item/label/value/highlight/severity-* (mesmo
   componente visual), só troca o grid pai por 2 colunas estreitas pra caber
   na largura da coluna de fotos (260-320px). */
.value-summary-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.value-summary-compact .value-summary-item { padding: 0.4rem 0.55rem; }
.value-summary-compact .value-summary-value { font-size: 0.88rem; }

.validation-error {
  border: 1px solid rgba(163, 49, 42, 0.3);
  background: var(--error-bg);
}

.validation-error h3 { color: var(--error-text); }

.validation-issues {
  margin: 0.8rem 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text);
}

.validation-issues li {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--error-text);
  background: rgba(163, 49, 42, 0.06);
}

.validation-issues li.validation-issue-info {
  border-left-color: var(--text-faint);
  background: var(--bg-alt);
}

.validation-issue-badge {
  display: inline-block;
  width: fit-content;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--error-text);
  color: #fff;
}

.validation-issue-info .validation-issue-badge {
  background: var(--text-faint);
}

.validation-issue-message {
  font-weight: 600;
  color: var(--text);
}

.validation-issue-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Popup de validacao (pontos de correcao persistentes) e o icone/badge no
   header que sinaliza pendencia. */

.icon-btn.has-badge { position: relative; }

.icon-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--error-text);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.validation-corrections-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
  max-height: 55vh;
  overflow-y: auto;
}

.ad-change-log-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  max-height: 55vh;
  overflow-y: auto;
}
.ad-change-log-item {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.ad-change-log-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ad-change-log-field {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.ad-change-log-diff {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  word-break: break-word;
}
.ad-change-log-old {
  text-decoration: line-through;
  color: var(--text-faint);
}
.ad-change-log-new {
  color: var(--brand-dark);
  font-weight: 600;
}

.validation-correction-item {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--error-text);
  background: rgba(163, 49, 42, 0.06);
}

.validation-correction-item.severity-info {
  border-left-color: var(--text-faint);
  background: var(--bg-alt);
}

.validation-correction-item.status-corrigido {
  border-left-color: var(--success-text);
  background: var(--success-bg);
  opacity: 0.85;
}

.validation-correction-head {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.validation-correction-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.5rem;
  cursor: pointer;
}

.validation-correction-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

.validation-error details {
  margin-top: 0.9rem;
}

.validation-error summary {
  cursor: pointer;
  font-weight: 600;
}

.validation-error pre {
  margin-top: 0.6rem;
}

/* Compatibilidade em cascata (catalogo Mercado Livre) */

.compat-builder-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.compat-builder-select {
  padding: 0.6rem 0.7rem;
  font-size: 0.85rem;
  min-width: 160px;
  flex: 1 1 160px;
}

/* Linha "+" de adicionar veiculo agora e uma <tr> real, com uma <td> por
   coluna do dominio (marca/modelo/ano/...) alinhada ao cabecalho da tabela
   -- cada select nasce vazio na sua celula e so aparece quando a coluna
   anterior ja foi escolhida (dependencia em cascata visualmente clara). */
.compat-builder-cell {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
  background: var(--bg-alt);
}

.compat-builder-cell .compat-builder-select {
  width: 100%;
  min-width: 0;
}

.compat-chip-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.compat-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.82rem;
  font-weight: 600;
}

.compat-chip form { margin: 0; }

.compat-chip .compat-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.6rem;
}

/* Compatibilidade em formato de tabela (visual tipo planilha) */

/* Cabecalho da secao (2026-07-13): titulo a esquerda, os 3 botoes de acao
   (IA / colunas / salvar) agrupados a direita junto com a seta de
   expandir/recolher -- os botoes de acao (nao a seta) so aparecem quando a
   secao esta aberta, via a regra :not([open]) abaixo. Removido o resumo
   "aplicacao cadastrada" (pedido explicito do usuario, virou redundante com
   a propria tabela). */
.panel-head-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.compat-head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.collapsible-panel:not([open]) .compat-head-actions {
  display: none;
}

#compat-save-status {
  margin: 0 0 0.6rem;
}

#compat-save-status:empty {
  display: none;
}

/* Header/corpo/builder da tabela de compatibilidade agora SEMPRE usam a
   MESMA lista de colunas (dominio completo do veiculo, ver
   sort_vehicle_domain_attributes em app.py) -- antes o header/corpo usavam
   so as colunas "com dado" e o builder do "+" usava o dominio completo,
   podendo ter contagens diferentes e desalinhar o builder por baixo do
   cabecalho errado. Colunas "principais" (marca/modelo/ano/versao,
   .compat-col-core) ficam sempre visiveis; as demais (.compat-col-extra)
   ficam escondidas por padrao -- JS (applyCompatColumnVisibility, no fim do
   <script> do template) revela as que ja tem dado cadastrado ou que o
   usuario escolheu no seletor "Colunas" (preferencia salva em localStorage
   por anuncio). Scroll horizontal em vez de deixar a tabela espremer o
   layout quando muitas colunas estao visiveis. */
.compat-table-scroll {
  overflow-x: auto;
  margin-top: 0.75rem;
  /* Pedido do usuario, 2026-07-19: limitar a altura da lista de veiculos
     compativeis e usar scroll vertical alem do horizontal ja existente
     (mesmo container, os dois scrolls convivem sem conflito). */
  max-height: 560px;
  overflow-y: auto;
}

.compat-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.compat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.compat-table thead th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}

.compat-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.compat-table tbody tr:last-child td { border-bottom: none; }

/* Bug real corrigido 2026-07-12 ("dropdown muito espremido"): as celulas de
   atributo de veiculo nao tinham piso de largura nenhum, e o select dentro
   delas usava min-width:0 -- com table-layout:auto e muitas colunas, o
   navegador dividia a largura do painel igualzinho entre todas, sobrando
   pouquissimo espaco por coluna. Um min-width por celula de atributo forca
   o navegador a dar espaco de verdade (e a estourar pro scroll horizontal
   do .compat-table-scroll quando nao cabe, em vez de espremer). Nao aplica
   na coluna de acoes (sem data-attr-id), que continua estreita de proposito. */
.compat-table td[data-attr-id],
.compat-table th[data-attr-id] {
  min-width: 160px;
}

.compat-col-extra {
  display: none;
}

.compat-table-actions { width: 70px; text-align: right; white-space: nowrap; }
.compat-table-actions form { margin: 0; display: inline-flex; }
.compat-table-actions .compat-edit.icon-btn {
  width: 26px;
  height: 26px;
  margin-right: 0.3rem;
}

/* Popup "Editar veiculo compativel" (2026-07-20) -- cascata sequencial de
   selects, um por coluna do dominio (marca -> modelo -> ano -> ...),
   carregados um de cada vez conforme o anterior e escolhido. */
.compat-edit-selects {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.75rem 0;
}
.compat-edit-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.compat-edit-row label {
  flex: 0 0 110px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.compat-edit-row select {
  flex: 1;
}

/* "..." no cabecalho da ultima coluna da tabela (2026-07-14, pedido
   explicito) -- mesmo lugar onde ja fica o botao de remover linha por
   linha, so o CABECALHO ganha esse botao pra abrir o popup de colunas sem
   precisar do icone separado no cabecalho do painel (que continua existindo
   tambem, redundante de proposito -- fica acessivel mesmo com a tabela
   rolada bem pra direita). */
.compat-col-configure-btn {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  height: auto;
}
.compat-col-configure-btn:hover { color: var(--brand-dark); background: var(--brand-soft); }

/* Popup de escolher colunas (2026-07-13): virou modal do sistema
   (#compat-columns-modal, mesmo .modal-overlay/.modal-box de todo o resto)
   em vez do dropdown posicionado a mao que existia antes -- so falta o
   estilo da lista de checkboxes em si. */
.compat-columns-modal-list {
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 0.15rem;
  margin: 0.75rem 0 1rem;
}

.compat-columns-modal-list .ai-field-toggle { padding: 0.3rem 0; }

/* Caminho oficial do ML pra "veiculo nao existe no catalogo" (excecao de
   compatibilidade) -- caixa discreta abaixo da tabela, so expande o form
   quando o vendedor clica (ou quando o builder detecta um passo sem
   opcoes). */
.compat-exception-box {
  margin-top: 0.75rem;
}

.compat-exception-box #compat-exception-form {
  margin-top: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.compat-exception-box textarea {
  width: 100%;
  resize: vertical;
}

/* Popup "Adicionar veiculos compativeis" (reescrito 2026-07-13): tabela com
   cabecalho clicavel por coluna -- clicar abre um popover com checkboxes de
   multi-selecao (paginado de 20 em 20, com busca) -- ver openCompatManualModal
   / openCompatManualFilter no <script>. */
.compat-manual-table-scroll {
  max-height: 520px;
  overflow: auto;
  margin: 0.75rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.compat-manual-table-scroll table.compat-table { margin: 0; }

.compat-manual-th-cell { padding: 0.3rem; white-space: nowrap; }

.compat-manual-th-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  box-shadow: none;
  height: auto;
  white-space: nowrap;
}

.compat-manual-th-btn.applied {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-color: var(--brand-soft);
}

.compat-manual-th-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Popup do filtro por coluna (Marca/Modelo/Ano...) -- overlay proprio por
   cima do popup de adicionar veiculo (z-index maior), fecha/aplica e "volta"
   sozinho pro popup de baixo sem nunca empurrar o layout dele. */
#compat-manual-filter-modal.modal-overlay { z-index: 65; }
#compat-manual-filter-modal .modal-box { max-width: 460px; }
#compat-manual-filter-modal input[type="text"] { margin-bottom: 0.5rem; }

.compat-manual-filter-options {
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.1rem 0.6rem;
  margin: 0.5rem 0;
}

.compat-manual-filter-options .ai-field-toggle { padding: 0.25rem 0; }

.compat-manual-filter-pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Diferente do filtro por coluna (mostra tudo de uma vez, so busca) -- a
   lista de veiculos gerada e' que pagina de 20 em 20 quando passa disso
   (pedido explicito, 2026-07-13). */
.compat-manual-results-pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -0.5rem 0 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.compat-add-plus {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: none;
}

.compat-add-plus:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-color: var(--brand-soft);
  transform: none;
  box-shadow: none;
}

/* Atributos: subtitulos e tooltip */

.attributes-subhead {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 1.1rem 0 0.7rem;
}

.attributes-subhead:first-child { margin-top: 0; }

.attributes-group-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand-dark);
  background: var(--brand-soft);
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin: 0.6rem 0 0.5rem;
}

.attr-label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.attr-tooltip {
  display: inline-flex;
  color: var(--text-faint);
  cursor: help;
}

.attr-tooltip svg { width: 13px; height: 13px; }

.attr-tooltip:hover, .attr-tooltip:focus { color: var(--brand-dark); outline: none; }

.attr-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.attr-input-row input[type="text"] { flex: 1; min-width: 0; }
.attr-input-row input[type="text"]:disabled { opacity: 0.45; background: var(--bg-alt); }

.attr-na-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.attr-na-toggle input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }

/* Secoes colapsaveis (caracteristicas da categoria, compatibilidade) --
   carregam fechadas por padrao; clique no cabecalho abre/fecha. */
.collapsible-panel > summary.panel-head {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}

.collapsible-panel > summary.panel-head::-webkit-details-marker { display: none; }
.collapsible-panel > summary.panel-head::marker { content: ""; }

.collapse-chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.collapsible-panel[open] > summary .collapse-chevron { transform: rotate(90deg); }

.collapsible-body { margin-top: 1rem; }

/* Campo com botao de acao (descricao + IA) */

.field-with-button {
  display: grid;
  gap: 0.4rem;
}

.field-with-button-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.field-with-button-head label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.compat-domain-form {
  max-width: 260px;
  margin-bottom: 1rem;
}

/* Toast flutuante nao-bloqueante (fila de geracao com IA) */

.corner-toast {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 300px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.1rem;
  z-index: 70;
}

.corner-toast.open { display: block; }

.corner-toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark);
  margin-bottom: 0.7rem;
}

.corner-toast.done .corner-toast-head { color: var(--success-text); }
.corner-toast.done.error .corner-toast-head { color: var(--warning-text); }

.corner-toast-close {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
  box-shadow: none;
  padding: 0;
  font-size: 0.65rem;
  line-height: 1;
}

.corner-toast-close:hover { background: var(--brand-soft); color: var(--brand-dark); transform: none; box-shadow: none; }

.corner-toast-status {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .corner-toast { left: 1rem; right: 1rem; width: auto; bottom: 1rem; }
}

/* #save-toast usa a mesma cara do #corner-toast (fila de IA), so que um
   pouco mais alto -- assim os dois nao se sobrepoem se acontecerem juntos. */
#save-toast { bottom: 7rem; }
@media (max-width: 620px) {
  #save-toast { bottom: 6.5rem; }
}

.warranty-input-row {
  display: flex;
  gap: 0.5rem;
}
.warranty-input-row select { flex: 1; }

.field-hint-warning {
  color: var(--warning-text);
}

/* ============================================================
   Animações do sistema (tema verde premium)
   Todo elemento que abre/fecha (dropdown, popup, toast, secao
   colapsavel) entra com o mesmo movimento suave -- consistencia
   visual em todas as telas. Como esses elementos alternam
   display none/block, a animacao reinicia sozinha a cada
   abertura (nao precisa de JS novo).
   ============================================================ */

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.notif-dropdown.open,
.user-dropdown.open,
.header-menu-dropdown.open {
  animation: dropdown-in var(--dur-base) var(--ease-spring);
  transform-origin: top right;
}

.modal-overlay.open {
  animation: overlay-in var(--dur-base) var(--ease-out);
}

.modal-overlay.open .modal-box {
  animation: pop-in var(--dur-slow) var(--ease-spring);
}

.corner-toast.open,
.loading-overlay.open .loading-overlay-box,
.flash {
  animation: toast-in var(--dur-slow) var(--ease-spring);
}

.floating-checklist {
  animation: toast-in var(--dur-slow) var(--ease-out);
}

/* Conteudo de secao colapsavel (<details>) desliza ao abrir. */
.collapsible-panel[open] > .collapsible-body {
  animation: rise-in var(--dur-base) var(--ease-out);
}

/* Troca de aba (Anuncio / Cadastro de Produto) com fade suave --
   switchAdTab() so alterna display, a animacao reinicia sozinha a cada
   troca (ids reais usados em ad_detail.html). Os dois paineis ja recebem
   rise-in por serem .panel; aqui so garante que a animacao reinicie na
   troca de display tambem. */
#tab-content-ad,
#tab-content-product {
  animation: rise-in var(--dur-base) var(--ease-out);
}

/* Miniaturas e fotos respondem ao toque (zoom sutil na miniatura). */
.row-thumb img {
  transition: transform var(--dur-base) var(--ease-out);
}

.row-thumb.clickable:hover img {
  transform: scale(1.12);
}

.photo-square {
  transition: border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.photo-square:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Linhas de tabela clicaveis com transicao mais rica no hover. */
.table-card table tbody tr.row-clickable td {
  transition: background var(--dur-fast) var(--ease-out);
}

/* Icones de acao ganham leve "lift" no hover, mantendo a altura fixa. */
.icon-btn {
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  border-color: rgba(33, 150, 243, 0.4);
}

/* Barra de progresso com brilho animado (carregamentos longos parecem
   vivos, nao travados). */
.loading-overlay-bar-fill {
  position: relative;
  overflow: hidden;
}

.loading-overlay-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: bar-shine 1.4s var(--ease-out) infinite;
}

@keyframes bar-shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Menu suspenso de autocomplete de placeholder ({ dentro de textarea de
   prompt de IA) -- pedido do usuario 2026-07-13: digitar "{" abre lista dos
   placeholders disponiveis (nome + descricao em fonte menor), filtra
   conforme digita, Enter/clique insere "{nome}". Posicionado via
   position:fixed com coordenadas calculadas em JS (tecnica de mirror-div
   pra achar o pixel do cursor dentro do textarea). */
.placeholder-suggest-dropdown {
  position: fixed;
  z-index: 200;
  min-width: 260px;
  max-width: 360px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.3rem;
  animation: dropdown-in var(--dur-fast) var(--ease-out);
}

.placeholder-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--text);
  height: auto;
  box-shadow: none;
  transform: none;
}

.placeholder-suggest-item:hover,
.placeholder-suggest-item.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: none;
  transform: none;
}

.placeholder-suggest-item-name {
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 600;
}

.placeholder-suggest-item-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  white-space: normal;
}

.placeholder-suggest-item.active .placeholder-suggest-item-desc {
  color: var(--brand-dark);
  opacity: 0.85;
}

.placeholder-suggest-empty {
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Editor de fotos completo (TOAST UI Image Editor, headless -- 2026-07-14):
   menu de contexto (clique direito na foto) + popup do editor com toolbar
   100% custom nos moldes do sistema (a lib nao carrega o skin dela, so o
   motor -- ver static/js/photo_editor.js). */
.icon-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.icon-btn.active:hover {
  background: var(--brand-dark);
  color: #fff;
}

.modal-box.editor-box {
  max-width: 960px;
  width: 96vw;
}

.photo-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem;
  margin-bottom: 0.75rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.photo-editor-toolbar-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 0.2rem;
}

.photo-editor-toolbar label.field-inline-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.photo-editor-toolbar input[type="color"] {
  width: var(--field-h);
  height: var(--field-h);
  padding: 2px;
  cursor: pointer;
}

.photo-editor-toolbar input[type="range"] {
  width: 90px;
  height: var(--field-h);
}

.photo-editor-toolbar select {
  width: auto;
  min-width: 110px;
}

.photo-editor-canvas-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  max-height: 62vh;
  background: repeating-conic-gradient(#f1f3f5 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
}

.photo-editor-tui-container {
  position: relative;
}

.photo-editor-overlay-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  cursor: crosshair;
}

.photo-editor-overlay-canvas.active {
  pointer-events: auto;
}

.photo-editor-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

.photo-editor-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  color: var(--text-muted);
  z-index: 5;
}