/*
PZTS PEDIRFACIL v543 — Responsivo mobile e links sempre acessíveis

Escopo:
- Corrige cabeçalho interno em telas pequenas sem alterar regra de negócio.
- Elimina dependência de hover no menu principal mobile: ao abrir o hamburger,
  os links internos dos grupos ficam visíveis e tocáveis.
- Evita vazamento de largura no body; tabelas continuam rolando dentro do
  próprio container responsivo.
*/

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.app-main,
.app-main > .container-fluid,
.lp-body-public,
.lp-body-public .container,
.lp-body-public .container-fluid {
  max-width: 100%;
  min-width: 0;
}

.app-main img,
.app-main svg,
.app-main video,
.lp-body-public img,
.lp-body-public svg,
.lp-body-public video {
  max-width: 100%;
  height: auto;
}

.app-main canvas,
.lp-body-public canvas {
  max-width: 100%;
}

/* Links de atalhos: o estado normal precisa ser legível; hover é bônus, não requisito. */
.app-main .pf-dashboard-shortcut-link,
.app-main a.btn.pf-dashboard-shortcut-link {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.2;
}

.app-main .pf-dashboard-shortcut-link:hover,
.app-main .pf-dashboard-shortcut-link:focus,
.app-main .pf-dashboard-shortcut-link:active {
  color: #ffffff !important;
  background-color: var(--btn-primary-bg, #dc2626) !important;
  border-color: var(--btn-primary-bg, #dc2626) !important;
}

@media (hover: none) {
  .app-main .pf-dashboard-shortcut-link:hover {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
  }
}

/* Tabelas: a rolagem deve ficar dentro do bloco, nunca empurrando a página inteira. */
.app-main .table-responsive,
.lp-body-public .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.app-main .table-responsive > .table,
.lp-body-public .table-responsive > .table {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .app-main .table-responsive,
  .lp-body-public .table-responsive {
    border-radius: .75rem;
    overscroll-behavior-x: contain;
  }

  .app-main .table-responsive > .table,
  .lp-body-public .table-responsive > .table {
    min-width: 680px;
  }

  .app-main .table-responsive .table th,
  .app-main .table-responsive .table td,
  .lp-body-public .table-responsive .table th,
  .lp-body-public .table-responsive .table td {
    vertical-align: middle;
  }

  .app-main .table-responsive .table th:last-child,
  .app-main .table-responsive .table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--table-bg, var(--card-bg, #ffffff));
    box-shadow: -8px 0 12px rgba(15, 23, 42, .08);
  }

  .app-main .table-responsive .table thead th:last-child {
    background-color: var(--table-bg, #f8fafc);
    z-index: 3;
  }

  .app-main .table-responsive .table td:last-child .btn {
    margin: .1rem 0 .1rem .2rem;
    white-space: nowrap;
  }
}

/* Cabeçalhos de página com ação à direita: no celular viram pilha legível. */
@media (max-width: 575.98px) {
  .app-main > .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-center,
  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-start {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
  }

  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-center > .text-end,
  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-start > .text-end {
    text-align: left !important;
  }

  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-center > .btn,
  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-start > .btn,
  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-center > a.btn,
  .app-main > .container-fluid > .d-flex.justify-content-between.align-items-start > a.btn {
    width: 100%;
  }

  .app-main .btn,
  .lp-body-public .btn {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }

  .app-main .btn-sm,
  .lp-body-public .btn-sm {
    min-height: 2.25rem;
  }
}

/* Header interno: corrige estouro horizontal com nome, badge, loja, modo e botões. */
@media (max-width: 767.98px) {
  .app-header {
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: .55rem;
    padding: .65rem .75rem !important;
  }

  .app-header > div:first-child {
    width: 100%;
    font-size: .95rem;
    line-height: 1.2;
    word-break: break-word;
  }

  .app-header > .d-flex {
    width: 100%;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .4rem !important;
    min-width: 0;
  }

  .app-header .small.me-2,
  .app-header .small.me-3 {
    flex: 1 1 100%;
    margin-right: 0 !important;
    line-height: 1.2;
  }

  .app-header .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  .app-header .btn,
  .app-header .btn-group,
  .app-header form {
    max-width: 100%;
  }

  .app-header .btn {
    min-height: 2.25rem;
  }

  .app-header form {
    width: 100%;
    flex-wrap: wrap;
    margin-right: 0 !important;
  }

  .app-header form .small,
  .app-header form span.small {
    flex: 1 1 100%;
  }

  .app-header .pf-header-store-select {
    width: 100%;
    min-width: 0 !important;
  }

  .app-header .dropdown-menu {
    max-width: calc(100vw - 1rem);
    min-width: min(22rem, calc(100vw - 1rem)) !important;
  }
}

/* Menu interno: em mobile, hamburger aberto = links visíveis, sem depender de hover. */
@media (max-width: 991.98px) {
  .app-menu .container-fluid {
    align-items: stretch;
  }

  .app-menu .navbar-toggler {
    min-width: 3rem;
    min-height: 2.75rem;
    border-color: rgba(255, 255, 255, .45);
  }

  .app-menu .navbar-collapse {
    width: 100%;
    padding-top: .55rem;
  }

  .app-menu .navbar-nav {
    width: 100%;
    gap: .35rem;
  }

  .app-menu .navbar-nav .nav-item,
  .app-menu .navbar-nav .dropdown,
  .app-menu .navbar-nav .btn-group {
    width: 100%;
  }

  .app-menu .navbar-nav .nav-link,
  .app-menu .navbar-nav .btn.dropdown-toggle,
  .app-menu .navbar-nav button.dropdown-toggle,
  .app-menu .navbar-nav a.dropdown-toggle {
    width: 100%;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: .65rem .8rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: .75rem;
    color: var(--menu2-link, #ffffff) !important;
    background-color: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .app-menu .navbar-nav .nav-link:hover,
  .app-menu .navbar-nav .nav-link:focus,
  .app-menu .navbar-nav .btn.dropdown-toggle:hover,
  .app-menu .navbar-nav .btn.dropdown-toggle:focus,
  .app-menu .navbar-nav button.dropdown-toggle:hover,
  .app-menu .navbar-nav button.dropdown-toggle:focus,
  .app-menu .navbar-nav a.dropdown-toggle:hover,
  .app-menu .navbar-nav a.dropdown-toggle:focus {
    color: var(--menu2-hover-text, #ffffff) !important;
    background-color: var(--menu2-hover-bg, rgba(255,255,255,.18)) !important;
    border-color: rgba(255,255,255,.45);
  }

  .app-menu .navbar-collapse.show .dropdown-menu,
  .app-menu .navbar-collapse.collapsing .dropdown-menu {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: .35rem 0 .75rem 0;
    padding: .35rem;
    border-radius: .75rem;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
  }

  .app-menu .navbar-collapse.show .dropdown-menu .dropdown-menu,
  .app-menu .navbar-collapse.collapsing .dropdown-menu .dropdown-menu {
    margin: .35rem 0 .65rem .75rem;
    width: calc(100% - .75rem);
  }

  .app-menu .navbar-collapse.show .dropdown-item,
  .app-menu .navbar-collapse.collapsing .dropdown-item {
    min-height: 2.55rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .65rem .75rem;
    color: #0f172a !important;
    background: transparent !important;
    border-radius: .55rem;
    white-space: normal;
    line-height: 1.2;
  }

  .app-menu .navbar-collapse.show .dropdown-item:hover,
  .app-menu .navbar-collapse.show .dropdown-item:focus,
  .app-menu .navbar-collapse.show .dropdown-item:active,
  .app-menu .navbar-collapse.collapsing .dropdown-item:hover,
  .app-menu .navbar-collapse.collapsing .dropdown-item:focus,
  .app-menu .navbar-collapse.collapsing .dropdown-item:active {
    color: #7f1d1d !important;
    background: #fee2e2 !important;
  }

  .app-menu .navbar-collapse.show .dropdown-divider,
  .app-menu .navbar-collapse.collapsing .dropdown-divider {
    border-color: #e2e8f0 !important;
    opacity: 1;
  }

  .app-menu .navbar-collapse.show .dropdown-header,
  .app-menu .navbar-collapse.collapsing .dropdown-header {
    color: #475569 !important;
    font-weight: 700;
  }
}

/* Menu público: mesmo princípio touch-first, sem esconder links úteis em tela pequena. */
@media (max-width: 991.98px) {
  .lp-navbar-theme .navbar-collapse.show,
  .lp-navbar-theme .navbar-collapse.collapsing {
    width: 100%;
  }

  .lp-navbar-theme .navbar-collapse.show .navbar-nav,
  .lp-navbar-theme .navbar-collapse.collapsing .navbar-nav {
    width: 100%;
    gap: .25rem;
  }

  .lp-navbar-theme .navbar-collapse.show .nav-link,
  .lp-navbar-theme .navbar-collapse.collapsing .nav-link {
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    padding: .65rem .75rem;
    border-radius: .75rem;
    background-color: rgba(255,255,255,.08);
    white-space: normal;
  }

  .lp-navbar-theme .navbar-collapse.show .btn,
  .lp-navbar-theme .navbar-collapse.collapsing .btn {
    min-height: 2.35rem;
  }
}