@import "tailwindcss";

/* BEGIN CHANGE: tema base do Novo Portal (dark SaaS clean) + mobile */
:root {
  --background: #0b0d12;
  --foreground: #e6e8ee;
  --muted: #9aa3b2;
  --brand: #43d6a0;
  --panel: #12161f;
  --border: #222836;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand: var(--brand);
  --color-panel: var(--panel);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  overflow-x: clip;
  max-width: 100vw;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* BEGIN CHANGE: iframes (YouTube) nao usam height:auto - quebra embeds aspect-video */
iframe {
  max-width: 100%;
}
/* END CHANGE */

/* Tabelas largas: o wrapper overflow-x-auto nas paginas evita estourar o layout */
table {
  border-collapse: collapse;
}

/* BEGIN CHANGE: tabelas responsivas com rolagem horizontal visivel no smartphone */
/*
 * Algumas tabelas usavam overflow-hidden ou encolhiam as colunas ate ocultar
 * conteudo. O wrapper passa a rolar e a tabela mantem uma largura minima no
 * mobile. A barra fica no rodape da propria tabela.
 */
.overflow-auto:has(> table),
.overflow-x-auto:has(> table),
.overflow-hidden:has(> table) {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-gutter: stable;
  scrollbar-color: var(--brand) var(--border);
  scrollbar-width: thin;
}

/* Mantem rolagem vertical em tabelas admin com max-height. */
.overflow-auto:has(> table) {
  overflow-y: auto;
}

.overflow-x-auto:has(> table),
.overflow-hidden:has(> table) {
  overflow-y: hidden;
}

.overflow-auto:has(> table)::-webkit-scrollbar,
.overflow-x-auto:has(> table)::-webkit-scrollbar,
.overflow-hidden:has(> table)::-webkit-scrollbar {
  height: 10px;
}

.overflow-auto:has(> table)::-webkit-scrollbar-track,
.overflow-x-auto:has(> table)::-webkit-scrollbar-track,
.overflow-hidden:has(> table)::-webkit-scrollbar-track {
  background: var(--border);
  border-radius: 999px;
}

.overflow-auto:has(> table)::-webkit-scrollbar-thumb,
.overflow-x-auto:has(> table)::-webkit-scrollbar-thumb,
.overflow-hidden:has(> table)::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 999px;
}

@media (max-width: 640px) {
  .overflow-auto:has(> table),
  .overflow-x-auto:has(> table),
  .overflow-hidden:has(> table) {
    overflow-x: scroll;
    padding-bottom: 6px;
  }

  .overflow-auto:has(> table) > table,
  .overflow-x-auto:has(> table) > table,
  .overflow-hidden:has(> table) > table {
    min-width: 42rem;
  }
}
/* END CHANGE */

/* Inputs em iOS nao forcam zoom (fonte >= 16px em telas estreitas) */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}
/* END CHANGE */