/* Estilos da casca do painel (antes inline em painel.html). Servidos em
   /design-prototipos/frontend-painel/painel-extra.css pelo Next (pages/_document.jsx). */
/* hover de linha (não inline-able por causa do pseudo) */
.sx-rowhover { transition: background 120ms var(--mpvpc-motion-ease); }
.sx-rowhover:hover { background: var(--sx-surface-2); }
body.theme-dark .sx-rowhover:hover { background: var(--sx-surface-2); }
/* top amber band primitiva (caso o token não cubra a classe inline) */
.mpvpc-top-amber-band { width: 40px; height: 4px; background: var(--mpvpc-brand-ember); border-radius: 2px; }
/* loading splash */
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--sx-canvas); z-index: 9999; transition: opacity 300ms; }
#boot.gone { opacity: 0; pointer-events: none; }
/* AIDEV-NOTE: o splash aparece ANTES do JS que liga o tema (src/sistema/app/tema.js) e é sempre CLARO: o padrão do
   dono é claro (01/10 13:40), então nada de prefers-color-scheme aqui (seria o piscar escuro no aparelho escuro).
   Quem escolheu escuro vê o splash claro por um instante: ele é pintado antes do JS do painel; ler o cookie antes
   exigiria um script externo bloqueante (a CSP só barra o inline), não feito nesta frente. */

/* ---- Dropdown / popover: hover com NOSSOS tokens (não o do SO) ---- */
.sx-dd-item:hover { background: var(--sx-surface-2) !important; color: var(--sx-ink) !important; }
.sx-dd-item:hover .sx-dd-sub { color: var(--sx-ink-mut) !important; }
.sx-cal-day:hover { background: var(--sx-st-amber-bg) !important; }
.sx-pop { animation: sxPop 140ms var(--mpvpc-motion-ease); transform-origin: top; }
@keyframes sxPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sx-modal-overlay { animation: sxFade 160ms ease; }
.sx-modal-panel { animation: sxRise 200ms var(--mpvpc-motion-ease); }
@keyframes sxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sxRise { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
/* camada de contratos — ocultável via Tweak */
body.hide-contracts .sx-contract { display: none !important; }

/* ---- Estados: shimmer + spinner (discretos, respeitam reduced-motion) ---- */
.sx-skel { position: relative; overflow: hidden; }
.sx-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: sx-shimmer 1.4s ease-in-out infinite; }
body.theme-dark .sx-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); }
@keyframes sx-shimmer { 100% { transform: translateX(100%); } }
.sx-spinner { width: 26px; height: 26px; border-radius: 999px; border: 2.5px solid var(--sx-line-strong);
  border-top-color: var(--mpvpc-brand-ember); animation: sx-spin 720ms linear infinite; }
@keyframes sx-spin { 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sx-skel::after { animation: none; } .sx-spinner { animation-duration: 1.6s; }
}

/* ---- Drawer mobile (backdrop) ---- */
.sx-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(15,15,14,0.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 200ms var(--mpvpc-motion-ease); }
.sx-backdrop.open { opacity: 1; pointer-events: auto; }
.sx-hamburger { display: none; }

/* ---- Responsivo ---- */
@media (max-width: 1080px) {
  .sx-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 920px) {
  .sx-hamburger { display: grid !important; }
  .sx-shell { grid-template-columns: 1fr !important; }
  .sx-sidebar { position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 100;
    width: var(--sx-sidebar-w) !important; transform: translateX(-100%);
    transition: transform 220ms var(--mpvpc-motion-ease); box-shadow: var(--sx-shadow-pop); }
  .sx-sidebar.open { transform: translateX(0); }
  .sx-two-col { grid-template-columns: 1fr !important; }
  .sx-aside-320 { grid-template-columns: 1fr !important; }
  .sx-approvals-layout { grid-template-columns: 1fr !important; }
  /* Inbox até 920 px: lista → detalhe. Até 25/09/2026 a leitura SUMIA entre 681 e 920 px. A tela
     marca data-leitura="aberta" só quando uma mensagem é aberta; "Voltar para a lista" desfaz. */
  .sx-inbox-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .sx-inbox-grid[data-leitura="lista"] > :last-child { display: none !important; }
  .sx-inbox-grid[data-leitura="aberta"] > :not(:last-child) { display: none !important; }
  .sx-inbox-voltar { display: block !important; }
  .sx-inbox-resize-handle { display: none !important; }
}
@media (min-width: 681px) and (max-width: 920px) {
  .sx-inbox-grid[data-leitura="lista"] { grid-template-columns: clamp(180px, 30%, 240px) minmax(0, 1fr) !important; }
  .sx-inbox-grid[data-leitura="lista"][data-rail="recolhida"] { grid-template-columns: 52px minmax(0, 1fr) !important; }
}
@media (max-width: 680px) {
  .sx-kpi-grid { grid-template-columns: 1fr !important; }
  .sx-login { grid-template-columns: 1fr !important; }
  .sx-login-editorial { display: none !important; }
  main.sx-main { padding: 18px 16px 104px !important; }
  .sx-topbar-search { display: none !important; }
}

/* ============================================================
   RESPONSIVO MOBILE — frente de responsividade (auditoria 2026-06-18).
   AIDEV-NOTE: reaproveita a cascata acima; ataca o que o estilo INLINE
   das telas nao alcanca. Detalhe/evidencia em output/mobile-audit/.
   ============================================================ */

/* Regra-BASE das classes de grid. AIDEV-NOTE: antes NAO existia — o desktop
   vinha do estilo inline de cada tela e o colapso mobile do @media !important.
   Com a base: telas que tiveram o gridTemplateColumns inline removido mantem o
   layout no desktop; telas que mantiveram o inline seguem com a razao original
   (inline vence a base, sem !important); e o mobile colapsa pelo @media em ambos. */
.sx-two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sx-aside-320 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 18px; align-items: start; }
.sx-approvals-layout { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.sx-preview-close-label { display: none; }
.sx-preview-details[open] > .sx-preview-summary { position: fixed; top: 30px; right: 36px; z-index: 72; box-shadow: var(--sx-shadow-pop); }
.sx-preview-details[open] > .sx-preview-summary .sx-preview-open-label { display: none; }
.sx-preview-details[open] > .sx-preview-summary .sx-preview-close-label { display: inline; }
.sx-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

/* Tabela larga -> cards rotulo:valor no celular (dor "dados nao aparecem
   por completo"). Uso: className="sx-table-cards" na <table> + data-label
   em cada <td>; data-acoes na celula de acoes. */
@media (max-width: 680px) {
  .sx-table-cards { min-width: 0 !important; display: block !important; }
  .sx-table-cards thead { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sx-table-cards tbody, .sx-table-cards tr, .sx-table-cards td { display: block !important; width: auto !important; }
  .sx-table-cards tr { border: 1px solid var(--sx-line); border-radius: var(--sx-radius); margin-bottom: 12px; padding: 4px 0; background: var(--sx-surface); }
  .sx-table-cards td { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; text-align: right; padding: 8px 14px !important; border: 0 !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; overflow-wrap: anywhere; }
  /* badges/pills/codigos com nowrap proprio devem QUEBRAR no card em vez de estourar */
  .sx-table-cards td, .sx-table-cards td * { white-space: normal !important; }
  .sx-table-cards td::before { content: attr(data-label); font-weight: 700; color: var(--sx-ink-weak); text-align: left; flex: 0 0 auto; }
  .sx-table-cards td > * { min-width: 0; max-width: 100%; }
  .sx-table-cards td[data-label=""]::before, .sx-table-cards td:not([data-label])::before { content: none; }
  .sx-table-cards td[data-acoes] { justify-content: stretch; gap: 8px; }
  .sx-table-cards td[data-acoes]::before { content: none; }
  .sx-table-cards td[data-acoes] .sx-btn, .sx-table-cards td[data-acoes] button { flex: 1 1 auto; min-height: 44px; }
  .sx-table-cards-wrap { overflow-x: visible !important; }
}

/* Barra de abas que nao cabe -> scroll horizontal com snap (em vez de cortar). */
@media (max-width: 680px) {
  .sx-tabs-scroll { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
  .sx-tabs-scroll::-webkit-scrollbar { height: 0; }
  .sx-tabs-scroll > * { flex: 0 0 auto !important; scroll-snap-align: start; }
}

/* Linha (icone + conteudo + botoes) que nao cabe -> empilha; botoes full-width. */
@media (max-width: 680px) {
  .sx-line-collapse { flex-direction: column !important; align-items: stretch !important; }
  .sx-line-collapse > * { width: 100% !important; }
  .sx-line-collapse .sx-btn, .sx-line-collapse > button { width: 100% !important; min-height: 44px; }
}

/* Grid de chat do WhatsApp (classe era orfa, sem breakpoint). */
@media (max-width: 680px) {
  .sx-wa-grid { grid-template-columns: 1fr !important; height: auto !important; }
}

/* Inbox: no celular empilha os 3 paineis (lista / leitura / compositor) em vez
   de ESCONDER o compositor — recupera responder e o gate de envio da proposta.
   AIDEV-NOTE: a lista fica com altura limitada e rolavel p/ nao empurrar o resto. */
@media (max-width: 680px) {
  .sx-inbox-grid { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .sx-inbox-grid > * { min-width: 0; }
  .sx-inbox-grid > :last-child { display: block !important; }
  .sx-inbox-grid > :first-child { max-height: 300px; overflow-y: auto; }
}

/* Grid auto-ajustavel sem media query (StageBoard, grades de criativos, KPIs soltos). */
.sx-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--sx-auto-min, 150px), 1fr)); gap: var(--sx-auto-gap, 12px); }

/* Topbar no celular: esconder pills redundantes; CTA vira icone-only (o botão de recolher o menu saiu em 01/10). */
@media (max-width: 680px) {
  .sx-topbar-pill { display: none !important; }
  .sx-hide-mobile { display: none !important; }
  .sx-topbar { padding-left: 12px !important; padding-right: 12px !important; gap: 10px !important; }
}

/* Popover/calendario/menu: nunca vazar a borda da tela (clamp a viewport). */
@media (max-width: 520px) {
  .sx-pop { max-width: calc(100vw - 16px) !important; }
  .sx-menu-pop { max-width: calc(100vw - 16px) !important; }
}

/* Trava o scroll do body enquanto um overlay (modal/sheet/drawer) esta aberto. */
html.sx-scroll-lock, body.sx-scroll-lock { overflow: hidden !important; }

/* Degrau de CELULAR (480px): toque, fonte anti-zoom iOS, modais e densidade. */
@media (max-width: 480px) {
  input, select, textarea { font-size: 16px !important; }
  .sx-touch { min-height: 44px !important; min-width: 44px !important; }
  .sx-modal-overlay { padding: 10px !important; }
  .sx-modal-actions { flex-direction: column-reverse !important; align-items: stretch !important; }
  .sx-modal-actions > * { width: 100% !important; min-height: 44px; }
  .sx-table-cards td { padding: 7px 12px !important; }
}

/* No Next.js o painel monta em #__next (antes #root, que app.css ja estica a 100%). */
#__next { height: 100%; }