/*
 * EasyWeek R360 — Mobile Cross-Browser Stability Layer
 * Camada final de compatibilidade para iOS Safari, Chrome/Edge Android e Firefox mobile.
 * Objetivo: preservar o design de cada tela e impedir diferenças estruturais do navegador.
 */

/* Base segura em todos os navegadores */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
body {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
:where(img, svg, video, canvas, iframe) { max-width: 100%; }
:where(img, video) { height: auto; }
:where(main, section, article, aside, header, footer, nav, form, fieldset, div) { min-width: 0; }
:where(p, span, small, strong, b, label, a, button, td, th, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: anywhere;
}
:where(button, input, select, textarea) { font-family: inherit; }
:where(button, [role="button"], a) { touch-action: manipulation; }

/* Evita diferenças nativas que deformam campos e botões */
:where(input, select, textarea, button) {
  max-width: 100%;
}
:where(input[type="search"]) {
  -webkit-appearance: none;
  appearance: none;
}
:where(input[type="number"]) { min-width: 0; }
:where(textarea) { resize: vertical; }

/* Tabelas continuam utilizáveis sem estourar a página */
:where(.table-responsive, .table-wrapper, .table-container, [class*="table-wrap"], [class*="table-container"]) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dialogs/overlays respeitam viewport dinâmica e notch */
:where(dialog, [role="dialog"], .modal, [class$="-modal"], [class*=" modal"], [class*="-dialog"]) {
  max-width: calc(100vw - 24px);
}
:where(.modal-backdrop, [class*="backdrop"], [class*="overlay"]) {
  overscroll-behavior: contain;
}

@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; }

  /* O Safari dá zoom automático em campos abaixo de 16px. */
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    font-size: 16px !important;
    line-height: 1.25;
  }

  /* Mantém controles clicáveis e consistentes sem impor cor/tema. */
  :where(button, input, select, textarea, [role="button"]) {
    min-width: 0;
  }
  :where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
    min-height: 40px;
  }

  /* Proteção contra grids/flex antigos com filhos que não encolhem. */
  :where([class*="grid"], [class*="row"], [class*="cols"], [class*="columns"], .d-flex, .flex) > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Qualquer bloco estrutural legado com width fixo continua dentro da viewport. */
  :where(div, section, article, aside, header, footer, nav, form, fieldset) {
    max-width: 100%;
  }

  /* Containers comuns nunca podem exceder a tela. */
  :where(.container, .container-fluid, .page, .page-content, .content, .main, .card,
         [class*="-page"], [class*="-content"], [class*="-card"], [class*="-panel"], [class*="-shell"], [class*="-workspace"]) {
    max-width: 100%;
  }

  /* Elementos com largura inline/legada não criam scroll horizontal. */
  :where(form, fieldset, table, pre, code) { max-width: 100%; }
  :where(pre) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Modais/painéis: altura real do celular, inclusive barra do Safari. */
  :where(dialog, [role="dialog"], .modal, [class$="-modal"], [class*=" modal"], [class*="-dialog"]) {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  @supports not (height: 100dvh) {
    :where(dialog, [role="dialog"], .modal, [class$="-modal"], [class*=" modal"], [class*="-dialog"]) {
      max-height: calc(100vh - 16px);
    }
  }

  /* Rodapés/CTAs fixos ganham área segura do iPhone sem mudar posição normal. */
  :where(.mobile-bottom-nav, .mobile-bottom-navigation, [class*="bottom-nav"], [class*="mobile-nav"]) {
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }

  /* Imagens e avatares não deformam por regras nativas/legadas. */
  :where(.avatar, [class*="avatar"], [class*="photo"], [class*="foto"]) img {
    max-width: 100%;
    object-fit: cover;
  }

  /* Selects mantêm largura e texto interno sem extrapolar o card. */
  :where(select) {
    width: 100%;
    text-overflow: ellipsis;
  }

  /* Inputs de data/hora: dimensões externas ficam sob controle do sistema. */
  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]) {
    min-height: 44px;
    width: 100%;
  }
  :where(input[type="date"]::-webkit-date-and-time-value,
         input[type="time"]::-webkit-date-and-time-value,
         input[type="datetime-local"]::-webkit-date-and-time-value) {
    text-align: left;
    min-height: 1.25em;
  }

  /* Scroll horizontal somente onde ele é funcional (tabs/tabelas), não na página inteira. */
  :where([class*="tabs"], [class*="tab-list"], [class*="chips"], [class*="filters-scroll"]) {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  :where([class*="tabs"], [class*="tab-list"], [class*="chips"], [class*="filters-scroll"])::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 520px) {
  /* Área útil de aparelhos estreitos sem tocar na paleta/identidade visual. */
  :where(.page-content, [class*="-page"], [class*="page-"]) {
    min-width: 0;
  }

  /* Evita palavras/badges longos empurrarem ações para fora dos cards. */
  :where(.badge, [class*="badge"], [class*="status"], [class*="pill"]) {
    max-width: 100%;
  }
}

/* iOS: evita cantos/inputs nativos alterarem o layout quando a página definiu sua própria aparência. */
@supports (-webkit-touch-callout: none) {
  :where(input, select, textarea, button) { -webkit-font-smoothing: antialiased; }
  :where(input[type="date"], input[type="time"], input[type="datetime-local"]) { min-width: 0; }
}