/* Apenas Regular e Medium existem em /public/fonts.
   Os demais pesos apontavam para arquivos inexistentes: cada 404 gerava
   uma troca de fonte depois do load e a tela "tremia" ao abrir a página. */
@font-face {
  font-family: 'Moderat';
  font-weight: 100 450;
  font-style: normal;
  src: url('./fonts/moderat-regular.otf') format('opentype');
  font-display: block;
}

@font-face {
  font-family: 'Moderat';
  font-weight: 451 900;
  font-style: normal;
  src: url('./fonts/moderat-medium.otf') format('opentype');
  font-display: block;
}


@font-face {
  font-family: 'value-serif-regular';
  src: url('./fonts/Value\ Serif\ Pro\ Regular.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* Badge Novo! no botão Agents da sidebar */
[data-sidebar="menu"] span.ml-auto.rounded-md {
  background-color: #5F16D4 !important;
  color: #1E0840 !important;
}

/* ===== Otimização mobile (global) ===== */
#zc-mnav-btn { display: none; }
.zc-tablewrap { width: 100%; }

@media (max-width: 767px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  html[data-mnav="open"], html[data-mnav="open"] body { overflow: hidden; }

  /* Sidebar vira drawer off-canvas */
  .group\/sidebar-wrapper > .group.peer { display: block !important; }
  .group\/sidebar-wrapper > .group.peer > div:first-child { display: none !important; }
  .group\/sidebar-wrapper > .group.peer > div:nth-child(2) {
    display: flex !important;
    position: fixed !important;
    top: 0; bottom: 0; left: 0 !important;
    width: 16rem !important;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  html[data-mnav="open"] .group\/sidebar-wrapper > .group.peer > div:nth-child(2) {
    transform: translateX(0);
  }
  [data-sidebar="rail"] { display: none !important; }

  #zc-mnav-backdrop {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  html[data-mnav="open"] #zc-mnav-backdrop { opacity: 1; pointer-events: auto; }

  #zc-mnav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 auto;
    margin-right: 4px; border-radius: 8px;
    color: hsl(var(--foreground));
    background: transparent;
  }

  main { width: 100% !important; max-width: 100vw !important; overflow-x: hidden; }
  main > header { padding-left: .75rem !important; padding-right: .75rem !important; }

  /* Densidade */
  main .px-8, main .px-10, main .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
  main .p-8, main .p-10 { padding: 1rem !important; }
  main .gap-8, main .gap-10 { gap: 1rem !important; }

  /* Tabelas com rolagem horizontal */
  .zc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .zc-tablewrap > table { min-width: 720px; }

  /* Grades colapsam em 1 coluna */
  main [class*="grid-cols-2"],
  main [class*="grid-cols-3"],
  main [class*="grid-cols-4"],
  main [class*="grid-cols-5"],
  main [class*="grid-cols-6"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Painéis de largura fixa (construtor de checkout, editor de tema) */
  main aside,
  main [class*="w-[2"], main [class*="w-[3"], main [class*="w-[4"],
  main [class*="w-\[2"], main [class*="w-\[3"], main [class*="w-\[4"] {
    width: 100% !important; max-width: 100% !important; flex-basis: auto !important;
  }
  main [class*="min-w-["] { min-width: 0 !important; }
  main [class*="lg:flex-row"], main [class*="md:flex-row"] { flex-direction: column !important; }

  /* Linhas com filtros/ações quebram em várias linhas */
  main .flex.items-center.justify-between { flex-wrap: wrap; gap: .5rem; }
  main .whitespace-nowrap { white-space: normal; }

  /* Popovers e diálogos flutuantes */
  .dashboard-copy-floating { max-width: calc(100vw - 24px) !important; }
  [role="dialog"] { max-width: calc(100vw - 24px) !important; }

  /* Preview / iframes do construtor e do editor de tema */
  main iframe { max-width: 100% !important; }
}

/* ===== Construtor de checkout no mobile ===== */
@media (max-width: 767px) {
  [data-checkout-builder] [data-cb-tabs] { display: flex !important; }
  [data-checkout-builder] [data-cb-tabs] button {
    border: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
  }
  html[data-cbtab="preview"] [data-checkout-builder] [data-cb-tabs] [data-cb-tab="preview"],
  html:not([data-cbtab="preview"]) [data-checkout-builder] [data-cb-tabs] [data-cb-tab="edit"] {
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
    background: color-mix(in oklab, hsl(var(--primary)) 12%, transparent);
  }
  [data-checkout-builder] [data-cb-body] { flex-direction: column; }
  [data-checkout-builder] [data-cb-side] {
    width: 100% !important; border-right: 0; border-bottom: 1px solid hsl(var(--border));
  }
  [data-checkout-builder] [data-cb-preview] { padding: .75rem !important; }
  html:not([data-cbtab="preview"]) [data-checkout-builder] [data-cb-preview] { display: none !important; }
  html[data-cbtab="preview"] [data-checkout-builder] [data-cb-side] { display: none !important; }
  html[data-cbtab="preview"] [data-checkout-builder] [data-cb-preview] { flex: 1 1 auto; min-height: 0; }
  /* topo do construtor */
  [data-checkout-builder] [data-cb-top] { flex-wrap: wrap; height: auto !important; padding: .5rem .75rem; gap: .5rem; }
  [data-checkout-builder] [data-cb-top] > div:last-child { margin-left: auto; }
  [data-checkout-builder] [data-cb-top] > div:nth-child(2) { flex-basis: 100%; order: 3; }
  [data-checkout-builder] select[data-theme] { max-width: 100% !important; }
}

/* ===== Editor de tema no mobile ===== */
#zc-te-bar { display: none; }
@media (max-width: 767px) {
  #zc-te-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    gap: .5rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
  }
  #zc-te-bar button {
    flex: 1; border: 1px solid hsl(var(--border)); border-radius: 8px;
    padding: .5rem; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground));
  }
  #zc-te-bar button[data-on="1"] {
    border-color: hsl(var(--primary)); color: hsl(var(--primary));
    background: color-mix(in oklab, hsl(var(--primary)) 12%, transparent);
  }
  html[data-tesheet="sections"] [data-theme-sidebar],
  html[data-tesheet="settings"] [data-settings-panel],
  html[data-tesheet="ai"] [data-ai-panel] {
    display: flex !important;
    position: fixed !important; left: 0; right: 0; bottom: 56px; top: 20%;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    flex-basis: auto !important; z-index: 79;
    border-left: 0; border-right: 0; border-top: 1px solid hsl(var(--border));
    box-shadow: 0 -12px 32px rgba(0,0,0,.35);
    overflow-y: auto;
  }
  html[data-tesheet="ai"] [data-ai-panel][hidden] { display: flex !important; }
}

.zk-dialog-enter[data-state="open"] {
  animation: zk-dialog-enter 0.2s ease-out;
}

@keyframes zk-dialog-enter {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 1rem)) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ===== Anti-tremor na troca de página (global) ===== */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
  scroll-behavior: auto;
}
body {
  min-height: 100dvh;
  overflow-x: hidden;
}
body[data-scroll-locked] {
  padding-right: 0 !important;
  margin-right: 0 !important;
}
/* páginas montadas por script não devem "pular" antes de pintar o conteúdo */
main, [data-page-host] { min-height: 60dvh; }
@media (prefers-reduced-motion: no-preference) {
  main { animation: none; }
}

/* Sem flash branco entre documentos ao navegar */
html { background-color: #ffffff; color-scheme: light; }
html.dark { background-color: #020817; color-scheme: dark; }

/* ===== Compat Tailwind v4: classes v3 `w-[--var]` não são geradas =====
   Sem isso a sidebar fica com largura de conteúdo e "salta" quando as
   fontes carregam (principal causa do tremor ao trocar de página). */
.w-\[--sidebar-width\] { width: var(--sidebar-width, 16rem); }
.w-\[--sidebar-width-icon\] { width: var(--sidebar-width-icon, 5rem); }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\],
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] * :where(.w-\[--sidebar-width\]) { width: var(--sidebar-width-icon, 5rem); }
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 { width: 0; }