/* ============================================================
   M4QNA One — UI kit (P4). Componentes compartilhados por desktop
   e mobile: marca, luz, canais (lista contínua) e gráfico de colunas.
   Regra: nenhuma cor literal aqui; tudo vem de tokens.css.
   ============================================================ */

/* 01. Luz de fundo: uma poça verde fixa, atrás de todo o conteúdo */
body::before {
  content: "";
  position: fixed; z-index: -1;
  top: -24vw; right: -24vw;
  width: 72vw; height: 72vw; max-width: 900px; max-height: 900px;
  background: var(--glow-brand);
  opacity: .32;
  pointer-events: none;
}

/* 02. Placa da marca: o logotipo é preto + branco, então vive sobre o verde de marca com aro de luz fria */
.brand-plate {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background: var(--brand-gradient);
  box-shadow: var(--rim-light), var(--shadow-tint);
}
.brand-plate::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  padding: 1px; border-radius: inherit;
  background: var(--edge-light);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.brand-plate img { display: block; width: auto; max-width: 100%; height: auto; }
.brand.brand-plate { align-self: center; }
.brand.brand-plate .brand__logo { width: 190px; height: auto; max-width: 100%; object-position: center; }
.brand-plate--login { margin-bottom: var(--space-l); padding: var(--space-m) var(--space-l); border-radius: var(--radius-l); }
.brand-plate--login img { width: 220px; }

/* 03. Camadas de luz nos componentes que já existem (paleta incumbente) */
.kpi-card, .bi-panel { box-shadow: var(--rim-light), var(--shadow-soft); }
.bi-panel:hover { border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.m-hero { box-shadow: var(--rim-light), var(--shadow-deep); }
.m-hero::before {
  content: "";
  position: absolute; z-index: -1;
  top: -46%; right: -24%;
  width: 78%; height: 100%;
  background: var(--glow-brand);
  opacity: .5;
  pointer-events: none;
}
.m-hero__tab.is-active { box-shadow: var(--rim-light), var(--shadow-tint); }
.m-shortcut, .m-card, .m-metric { box-shadow: var(--rim-light); }
.m-bottomnav { box-shadow: var(--rim-light); }

/* 04. Áreas só de desktop: o mobile mostra leitura, não edição */
.mobile-only { display: none; }
@media (max-width: 820px) {
  body .desktop-only { display: none; }
  body .mobile-only { display: block; }
}
.m4-note { margin: 0 0 var(--space-m); padding: var(--space-s) var(--space-m); border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--surface-low); color: var(--text-soft); font-size: var(--fs-s); line-height: 1.5; }
.marketplace-logo-mark { background: var(--tile-surface); border-color: var(--brand); box-shadow: var(--rim-light), var(--shadow-tint); }
.marketplace-logo-mark img { display: block; width: auto; height: auto; max-width: 36px; max-height: 36px; object-fit: contain; }

/* 04b. Telas nativas do mobile: o contêiner do layout desktop fica vazio e não pode ocupar altura (era uma tela preta extra no fim do dashboard). */
@media (max-width: 820px) {
  body.m-native .app-shell, body.m-native .main-content { min-height: 0; }
}

/* 04c. Login no mobile: tela cheia, sem cartão. Faixa verde com o logo no topo (mesma linguagem do cabeçalho do app) e formulário direto no fundo escuro. */
@media (max-width: 700px) {
  body.auth-page { display: block; padding: 0; }
  .auth-page .auth-card { width: 100%; min-height: 100dvh; max-height: none; display: flex; flex-direction: column; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .auth-page .auth-form-panel { flex: 1 1 auto; justify-content: flex-start; padding: 0 var(--space-l) var(--space-l); }
  .auth-page .brand-plate--login {
    margin: 0 calc(var(--space-s) * -1) var(--space-m);
    padding: max(var(--space-m), env(safe-area-inset-top)) var(--space-s) var(--space-m);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
  .auth-page .brand-plate--login::before { display: none; }
  .auth-page .brand-plate--login img { width: min(220px, 72vw); }
  .auth-page .auth-form-panel { padding: 0 var(--space-s) var(--space-s); }
  .auth-page .auth-form-panel > .auth-eyebrow { margin: 0 0 var(--space-s); }
  .auth-page .auth-form-panel > h1 { margin: 0; }
  .auth-page .auth-form-panel > .auth-muted { margin: var(--space-s) 0 0; line-height: 1.4; }
  .auth-page form { margin-top: var(--space-m); gap: var(--space-s); }
  .auth-page label { gap: 4px; }
  .auth-page input, .auth-page button { min-height: 44px; padding: var(--space-s) var(--space-m); border-radius: var(--radius-m); }
  .auth-page #auth-captcha-widget { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
  .auth-page #auth-captcha-status, .auth-page .auth-error { min-height: 0; }
}
/* 05. Canais e integrações: lista contínua que pausa ao passar o mouse */
.m4-channels { position: relative; display: grid; gap: var(--space-s); min-width: 0; padding: var(--space-s) 0 0; }
.m4-channels__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); padding: 0 var(--space-m); }
.m4-channels__head h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-m); letter-spacing: -.03em; color: var(--text-strong); }
.m4-channels__head small { color: var(--text-soft); font-size: var(--fs-xs); opacity: .7; }
.m4-hint-touch { display: none; }
.m4-channels__viewport {
  overflow: hidden;
  -webkit-mask-image: var(--fade-edge);
  mask-image: var(--fade-edge);
}
.m4-channels__viewport:focus-visible { outline: 2px solid var(--brand-light); outline-offset: -2px; }
.m4-channels__track { display: flex; width: max-content; animation: m4-marquee 60s linear infinite; will-change: transform; }
.m4-channels__viewport:hover .m4-channels__track,
.m4-channels__viewport:focus-within .m4-channels__track,
.m4-channels__viewport:active .m4-channels__track { animation-play-state: paused; }
.m4-channels__set { display: flex; flex: none; gap: var(--space-m); margin: 0; padding: var(--space-s) var(--space-m) var(--space-m) 0; list-style: none; }
@keyframes m4-marquee { to { transform: translateX(-50%); } }
.m4-channel { display: grid; justify-items: center; align-content: start; gap: 6px; width: 88px; }
.m4-channel__tile {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-m);
  background: var(--tile-surface);
  box-shadow: var(--rim-light), var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.m4-channel__tile img { display: block; width: auto; height: auto; max-width: 38px; max-height: 38px; object-fit: contain; }
.m4-channel:hover .m4-channel__tile { transform: translateY(-3px) scale(1.06); box-shadow: var(--shadow-tint), var(--rim-light); }
.m4-channel__name { color: var(--text-body); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; text-align: center; }
.m4-channel__state { color: var(--text-soft); font-size: var(--fs-xs); opacity: .6; }
.m4-channel[data-status="live"] .m4-channel__tile { box-shadow: 0 0 0 2px var(--brand), var(--shadow-tint); }
.m4-channel[data-status="live"] .m4-channel__state { color: var(--positive); opacity: 1; font-weight: 700; }
@media (hover: none) {
  .m4-hint-hover { display: none; }
  .m4-hint-touch { display: inline; }
}
.m4-channels.page-section { margin: 0 0 var(--space-m); padding: var(--space-s) 0 0; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--surface-low); }
.m-section.m4-channels { margin: var(--space-m) 0 0; padding: 0; }

/* 06. Gráfico de colunas responsivo (Dia | Semana | Mês) — nunca rola na horizontal */
.m4-chart { display: grid; gap: var(--space-m); min-width: 0; padding: var(--space-m) var(--space-m) var(--space-l); color: var(--text-body); font-variant-numeric: tabular-nums; }
.m4-chart__empty { margin: 0; padding: var(--space-l) 0; color: var(--text-soft); font-size: var(--fs-s); text-align: center; }
.m4-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: var(--surface-low); }
.m4-seg button { min-height: 40px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-soft); font-family: var(--font-display); font-size: var(--fs-s); font-weight: 700; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.m4-seg button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); box-shadow: var(--rim-light), var(--shadow-tint); }
.m4-seg button:focus-visible, .m4-chart__nav button:focus-visible, .m4-chart__hits button:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.m4-chart__period { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
.m4-chart__period h3 { min-width: 0; margin: 0; font-family: var(--font-display); font-size: var(--fs-l); letter-spacing: -.03em; line-height: 1.2; color: var(--text-strong); }
.m4-chart__nav { display: flex; flex: none; gap: var(--space-s); }
.m4-chart__nav button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--surface-high); color: var(--text-strong); }
.m4-chart__nav button:disabled { opacity: .35; }
.m4-chart__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m4-chart__rows { display: grid; margin: 0; }
.m4-chart__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); padding: 10px 0; border-bottom: 1px solid var(--line-faint); }
.m4-chart__row dt { color: var(--text-soft); font-size: var(--fs-s); }
.m4-chart__row dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; letter-spacing: -.02em; }
.m4-chart .is-pos { color: var(--positive); }
.m4-chart .is-neg { color: var(--negative); }
.m4-chart .is-soft { color: var(--neutral-bar); }
.m4-chart__plot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px; }
.m4-chart__canvas { position: relative; min-width: 0; touch-action: pan-y; }
.m4-chart__canvas svg { display: block; width: 100%; height: 190px; overflow: visible; }
.m4-chart__axis { position: relative; height: 190px; }
.m4-chart__axis span { position: absolute; right: 0; transform: translateY(-50%); color: var(--neutral-bar); font-size: var(--fs-xs); white-space: nowrap; }
.m4-grid { stroke: var(--line-soft); stroke-dasharray: 4 5; stroke-width: 1; }
.m4-zero { stroke: var(--neutral-bar); stroke-width: 1; opacity: .5; }
.m4-bar { opacity: .38; }
.m4-bar.is-sel { opacity: 1; }
.m4-bar--up { fill: var(--positive); transform-box: fill-box; transform-origin: 50% 100%; }
.m4-bar--down { fill: var(--neutral-bar); transform-box: fill-box; transform-origin: 50% 0; }
.m4-bar--neg { fill: var(--negative); transform-box: fill-box; transform-origin: 50% 0; }
.m4-bar--vol { fill: var(--info); transform-box: fill-box; transform-origin: 50% 100%; }
.m4-chart--animate .m4-bar { animation: m4-rise 520ms var(--ease-out) both; }
@keyframes m4-rise { from { transform: scaleY(0); } }
.m4-line { fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.m4-dot { fill: var(--bg-base); stroke: var(--text-strong); stroke-width: 2; }
.m4-dot.is-sel { fill: var(--text-strong); }
.m4-chart__hits { position: absolute; inset: 0; display: grid; }
.m4-chart__hits button { min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.m4-chart__tip { position: absolute; z-index: 2; padding: 6px 10px; border-radius: var(--radius-m); background: var(--surface-high); box-shadow: var(--shadow-deep), var(--rim-light); color: var(--text-strong); font-size: var(--fs-s); font-weight: 700; white-space: nowrap; pointer-events: none; }
.m4-chart__tip::after { content: ""; position: absolute; bottom: -5px; left: var(--tip-arrow, 50%); width: 10px; height: 10px; margin-left: -5px; background: var(--surface-high); transform: rotate(45deg); }
.m4-chart__xrow { display: grid; grid-template-columns: minmax(0, 1fr) 64px; }
.m4-chart__x { display: grid; }
.m4-chart__x span { display: grid; justify-items: center; min-width: 0; color: var(--text-soft); font-size: var(--fs-xs); line-height: 1.3; text-align: center; opacity: .7; }
.m4-chart__x span.is-sel { color: var(--text-strong); font-weight: 700; opacity: 1; }
.m4-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); color: var(--text-soft); font-size: var(--fs-s); }
.m4-chart__legend span { display: inline-flex; align-items: center; gap: 8px; }
.m4-chart__legend i { display: inline-block; width: 14px; height: 14px; border-radius: var(--radius-pill); }
.m4-chart__legend .is-up { background: var(--positive); }
.m4-chart__legend .is-down { background: var(--neutral-bar); }
.m4-chart__legend .is-neg { background: var(--negative); }
.m4-chart__legend .is-vol { background: var(--info); }
.m4-chart__legend .is-line { height: 2px; border-radius: var(--radius-pill); background: var(--text-soft); }
.m4-chart-card .bi-panel__header { padding: var(--space-m); }

/* 07. Profundidade ao rolar (mobile): cada bloco sobe e ganha foco ao entrar na tela.
   Só onde o navegador suporta animação ligada à rolagem; sem suporte, o bloco já aparece pronto. */
@media (max-width: 820px) {
  @supports (animation-timeline: view()) {
    .m-page .m-section, .m-page .m-shortcuts {
      animation: m4-depth linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes m4-depth { from { opacity: .15; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }

/* 08. Pilha de cartões do dashboard mobile (estilo Mercado Pago): o próximo cobre o anterior, que recua e escurece */
.m4-stack { display: grid; gap: var(--space-m); margin: var(--space-l) 14px 0; }
.m4-stack__card {
  position: sticky; top: 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--surface-high), var(--surface-low));
  box-shadow: var(--rim-light), var(--shadow-lift);
  transform: scale(calc(1 - var(--stack-p, 0) * .05));
  transform-origin: 50% 0;
}
.m4-stack__card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--bg-base);
  opacity: calc(var(--stack-p, 0) * .6);
  pointer-events: none;
}
.m4-stack__head { display: grid; gap: 4px; padding: var(--space-l) var(--space-l) 0; }
.m4-stack__head p { margin: 0; color: var(--brand-light); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.m4-stack__head h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-l); letter-spacing: -.03em; line-height: 1.2; color: var(--text-strong); }
.m4-stack__card .m4-chart { padding: var(--space-m) var(--space-m) var(--space-l); }

/* 09. Tabelas viram cartões no mobile (rótulo = cabeçalho da coluna) */
@media (max-width: 820px) {
  .table-wrap.m4-cards-wrap { max-height: none; overflow: visible; border: 0; background: transparent; }
  .table-wrap.m4-cards-wrap::after { display: none; }
  table.m4-cards, table.m4-cards tbody, table.m4-cards tfoot { display: block; width: 100%; min-width: 0; }
  table.m4-cards thead { display: none; }
  table.m4-cards tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--space-m);
    margin: 0 0 var(--space-s); padding: var(--space-m);
    border: 1px solid var(--line-soft); border-radius: var(--radius-m);
    background: var(--surface-mid); box-shadow: var(--rim-light);
  }
  table.m4-cards td { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; color: var(--text-body); font-size: var(--fs-s); text-align: left; white-space: normal; overflow-wrap: anywhere; }
  table.m4-cards td::before { content: attr(data-label); color: var(--text-soft); font-size: var(--fs-xs); font-weight: 600; opacity: .7; }
  table.m4-cards td[data-m4="title"] { grid-column: 1 / -1; order: -2; font-family: var(--font-display); font-size: var(--fs-m); color: var(--text-strong); }
  table.m4-cards td[data-m4="sub"] { grid-column: 1 / -1; order: -1; margin-top: -8px; color: var(--text-soft); font-size: var(--fs-xs); }
  table.m4-cards td[data-m4="title"]::before, table.m4-cards td[data-m4="sub"]::before { content: none; }
  table.m4-cards td * { max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; text-align: left; }
  table.m4-cards td[data-m4="hide"] { display: none; }
  table.m4-cards tfoot tr { border-color: var(--brand); }
  table.m4-cards tr.m4-row-empty { display: block; color: var(--text-soft); }
  table.m4-cards tr.m4-row-empty td { display: block; }
}
/* 09b. Tipografia legível (piso 12px) pede mais respiro: cartões do Mercado Livre Oficial crescem com o conteúdo e o selo repetido sai (o painel já diz "Mercado Livre Oficial"). */
/* 4 colunas em telas largas (7 cartões = 4 + 3); o auto-fit antigo espremia 6 colunas e cortava os valores. */
.ml-official-grid { grid-template-columns: repeat(auto-fit, minmax(max(220px, calc((100% - 30px) / 4)), 1fr)); }
.ml-official-grid .kpi-card.kpi-card--ml-official { height: auto; min-height: 138px; padding-bottom: var(--space-m); }
.ml-official-grid .kpi-card--ml-official .metric-source { display: none; }
.ml-official-grid .kpi-card--ml-official strong { margin-bottom: var(--space-s); overflow: visible; font-size: var(--fs-l); text-overflow: clip; white-space: nowrap; }
.ml-official-grid .kpi-card--ml-official small { margin-top: auto; overflow: visible; text-overflow: clip; line-height: 1.35; }
/* 10. Carregando: esqueleto no lugar de "R$ 0,00", que parece dado real. A classe sai quando os pedidos chegam (ou falham, ou após 12s). */
html.is-loading :is(.kpi-card strong, .dre-card strong, .m-hero__headline strong, .m-metric strong, .m-hero__delta) {
  color: transparent;
  border-radius: var(--radius-m);
  background: linear-gradient(90deg, var(--surface-high) 25%, var(--line-soft) 50%, var(--surface-high) 75%);
  background-size: 200% 100%;
  animation: m4-shimmer 1.4s linear infinite;
  pointer-events: none;
  user-select: none;
}
html.is-loading :is(.kpi-card strong, .dre-card strong, .m-hero__headline strong, .m-metric strong) { max-width: 7em; }
.kpi-card--skeleton :is(span, small) { display: block; width: 55%; color: transparent; border-radius: var(--radius-m); background: linear-gradient(90deg, var(--surface-high) 25%, var(--line-soft) 50%, var(--surface-high) 75%); background-size: 200% 100%; animation: m4-shimmer 1.4s linear infinite; user-select: none; }
.kpi-card--skeleton small { width: 35%; }
html.is-loading :is([data-m4-chart], .stacked-chart, .profit-bars):empty {
  min-height: 240px;
  border-radius: var(--radius-m);
  background: linear-gradient(90deg, var(--surface-low) 25%, var(--surface-high) 50%, var(--surface-low) 75%);
  background-size: 200% 100%;
  animation: m4-shimmer 1.4s linear infinite;
}
@keyframes m4-shimmer { to { background-position: -200% 0; } }

/* Números alinhados em coluna: valores de KPI, DRE e tabelas */
.kpi-card strong, .dre-card strong, .m-hero__headline strong, .m-metric strong, .profit-table td, table.m4-cards td { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .m4-channels__track { animation: none; }
  .m4-channels__viewport { overflow-x: auto; }
  .m4-channels__set[aria-hidden="true"] { display: none; }
  .m4-channel__tile, .m4-seg button { transition: none; }
  html.is-loading :is(.kpi-card strong, .dre-card strong, .m-hero__headline strong, .m-metric strong, .m-hero__delta, [data-m4-chart], .stacked-chart, .profit-bars, .kpi-card--skeleton span, .kpi-card--skeleton small) { animation: none; }
  .m4-chart--animate .m4-bar { animation: none; }
  .m-page .m-section, .m-page .m-shortcuts { animation: none; }
  .m4-stack__card { transform: none; }
}