/* GestorPro V95.0 — modais, toque, tipografia e listas */
/* ================================================================
   V93.5 — MODAIS E TIPOGRAFIA REFINADA
   - Fechamento compacto por X
   - Modais sempre centralizados no mobile
   - Hierarquia tipográfica menos pesada e mais elegante
   ================================================================ */

/* Base tipográfica: leitura mais leve, mantendo ênfase só onde importa. */
body {
  font-weight: 400;
  letter-spacing: 0;
}

p,
li,
td,
input,
select,
textarea,
.auth-copy,
.auth-note,
.muted,
.help-text,
.sale-cart-line,
.receivable-item,
.stock-movement-item {
  font-weight: 400 !important;
}

label,
.field-label,
.form-grid > label,
.inline-check,
.gift-toggle {
  font-weight: 500 !important;
}

button,
.primary-btn,
.secondary-btn,
.ghost-btn,
.success-btn,
.danger-btn,
.nav-list button,
.mobile-bottom-nav button,
.mobile-menu-grid button,
.mobile-menu-quick-actions button,
.report-filter-btn {
  font-weight: 550 !important;
}

h1 {
  font-weight: 700 !important;
}

h2,
.topbar h2 {
  font-weight: 650 !important;
}

h3,
h4,
.section-head h3,
.modal-head h3,
.dashboard-card-head h3,
.sale-cart-head h3 {
  font-weight: 600 !important;
}

strong,
.sidebar-brand strong,
.settings-version-brand,
.settings-version-meta strong,
.tag,
.badge,
.pill,
.eyebrow,
th {
  font-weight: 600 !important;
}

/* Números e indicadores continuam com presença visual, sem o peso 900 do tema anterior. */
.dashboard-kpi strong,
.metric strong,
.stat-card strong,
.summary-card strong,
.sale-cart-total-card strong,
.money-value,
.total-value,
.amount-value {
  font-weight: 700 !important;
}

.eyebrow {
  letter-spacing: 0.065em;
}

table th {
  letter-spacing: 0.015em;
}

/* Botão universal de fechamento dos modais. */
.modal-close-x {
  flex: 0 0 36px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(17, 24, 32, 0.11);
  border-radius: 999px;
  background: #F7FAFB;
  color: #44505B;
  font-size: 1.4rem;
  font-weight: 400 !important;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(17, 24, 32, 0.05);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.modal-close-x:hover {
  background: rgba(22, 141, 76, 0.08);
  border-color: rgba(22, 141, 76, 0.28);
  color: #0F6E3A;
  transform: scale(1.04);
}

.modal-close-x:focus-visible {
  outline: 3px solid rgba(22, 141, 76, 0.18);
  outline-offset: 2px;
}

.modal-head,
.barcode-scanner-head {
  align-items: flex-start;
}

.modal-head > :first-child,
.barcode-scanner-head > :first-child {
  min-width: 0;
}

/* Mobile e tablets estreitos: todo diálogo abre no centro da viewport. */
@media (max-width: 980px) {
  .modal-root {
    display: grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: auto !important;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(12px, env(safe-area-inset-bottom)) !important;
  }

  .modal-card {
    width: min(680px, 100%) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: auto !important;
    padding: 16px !important;
    border: 1px solid rgba(17, 24, 32, 0.12) !important;
    border-radius: 16px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  .modal-head {
    position: sticky;
    top: -16px;
    z-index: 4;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: -2px -2px 12px !important;
    padding: 8px 2px 10px !important;
    background: linear-gradient(180deg, #FFFFFF 82%, rgba(255, 255, 255, 0)) !important;
  }

  .modal-head > button.modal-close-x {
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
  }

  /* O scanner é um diálogo próprio e segue a mesma regra de centralização. */
  .barcode-scanner-overlay {
    display: grid !important;
    place-items: center !important;
    align-items: center !important;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(12px, env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
  }

  .barcode-scanner-card {
    width: min(560px, 100%) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: auto !important;
    padding-bottom: 0 !important;
    border-radius: 16px !important;
    overflow: auto !important;
  }

  .barcode-scanner-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
  }
}

@media (max-width: 560px) {
  .modal-card {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 14px !important;
  }

  .modal-head h3 {
    font-size: 1rem;
    line-height: 1.28;
  }

  .modal-head .eyebrow {
    font-size: 0.7rem;
  }

  .modal-close-x {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    flex-basis: 34px;
    font-size: 1.3rem;
  }
}

/* ================================================================
   V93.6 — ROLAGEM CONTIDA + FEEDBACK DE TOQUE DE BOTÃO
   - Scrollbars não ultrapassam os cantos arredondados dos modais
   - Toque mobile sem flash azul/aparência de link
   ================================================================ */

/* Todo controle clicável deve responder como botão, não como link do navegador. */
button,
[role="button"],
[data-action],
.dashboard-shortcut,
.customer-pick-card,
.sale-customer-option,
.sale-item-card {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
}

button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[data-action]:focus:not(:focus-visible) {
  outline: none !important;
}

/* Mantém feedback de pressão sem alterar o controle para azul. */
button:active,
[role="button"]:active,
[data-action]:active {
  -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 980px) {
  .modal-root,
  .barcode-scanner-overlay {
    overscroll-behavior: contain;
  }

  /* O próprio cartão continua rolável, mas toda pintura fica recortada
     exatamente no raio da borda. Isso também contém a scrollbar nativa. */
  .modal-card {
    max-width: calc(100vw - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 141, 76, 0.72) transparent;
    scrollbar-gutter: stable;
    clip-path: inset(0 round 16px);
    -webkit-overflow-scrolling: touch;
  }

  .modal-card::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .modal-card::-webkit-scrollbar-track {
    margin-block: 12px;
    background: transparent !important;
  }

  .modal-card::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 1px solid transparent !important;
    border-radius: 999px;
    background: rgba(22, 141, 76, 0.72) !important;
    background-clip: padding-box !important;
  }

  .modal-card::-webkit-scrollbar-corner {
    background: transparent !important;
  }

  /* Listas e regiões roláveis dentro do modal seguem o mesmo padrão discreto. */
  .modal-card * {
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 141, 76, 0.62) transparent;
  }

  .modal-card *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .modal-card *::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .modal-card *::-webkit-scrollbar-thumb {
    border: 1px solid transparent !important;
    border-radius: 999px;
    background: rgba(22, 141, 76, 0.62) !important;
    background-clip: padding-box !important;
  }

  .barcode-scanner-card {
    max-width: calc(100vw - 24px) !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 141, 76, 0.72) transparent;
    clip-path: inset(0 round 16px);
  }

  .barcode-scanner-card::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .barcode-scanner-card::-webkit-scrollbar-track {
    margin-block: 12px;
    background: transparent !important;
  }

  .barcode-scanner-card::-webkit-scrollbar-thumb {
    border: 1px solid transparent !important;
    border-radius: 999px;
    background: rgba(22, 141, 76, 0.72) !important;
    background-clip: padding-box !important;
  }
}

@media (max-width: 560px) {
  .modal-card {
    max-width: calc(100vw - 24px) !important;
    clip-path: inset(0 round 14px);
  }
}


/* ================================================================
   V93.7 — LISTAS COMPACTAS: ROLAGEM A PARTIR DO 6º ITEM
   Mantem ate 5 registros visiveis; do 6º em diante usa rolagem interna.
   A altura e calculada pelo JS ate o fim exato do quinto registro.
   ================================================================ */
.scroll-after-five {
  max-height: var(--five-items-max-height, 360px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 141, 76, 0.62) transparent;
}

/* Tabelas ainda podem rolar horizontalmente quando realmente necessario. */
.table-card.scroll-after-five {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.scroll-after-five::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scroll-after-five::-webkit-scrollbar-track {
  background: transparent !important;
}

.scroll-after-five::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(22, 141, 76, 0.62) !important;
  background-clip: padding-box !important;
}

@media (max-width: 700px) {
  /* Sobrescreve a antiga regra mobile que deixava as listas de entidades sem limite. */
  .entity-table-card.scroll-after-five {
    max-height: var(--five-items-max-height, 430px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  .customer-mobile-list.scroll-after-five {
    max-height: var(--five-items-max-height, 292px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}


/* V95.4 — ações de página sem repetir título/descrição da barra superior. */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 36px;
  margin: 0 0 10px;
}

.page-toolbar > .button-row {
  justify-content: flex-end;
}

.page-toolbar:empty {
  display: none;
}

@media (max-width: 980px) {
  .page-toolbar {
    min-height: 34px;
    margin-bottom: 8px;
  }

  .page-toolbar > button,
  .page-toolbar > .button-row > button {
    min-height: 36px !important;
    padding: 6px 9px !important;
    font-size: 0.76rem !important;
  }
}


/* V95.8 — listas com rolagem interna entregam o gesto à página no limite. */
.scroll-after-five:not(.sale-cart-list),
.customer-mobile-list.scroll-after-five,
.product-mobile-list.scroll-after-five,
.agenda-mobile-list.scroll-after-five {
  overscroll-behavior-y: auto !important;
}