/* Ajustes compartilhados das telas existentes para uso em smartphones. */
:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-height: calc(72px + var(--mobile-safe-bottom));
}

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

[hidden] {
  display: none !important;
}

/* Menus condicionados as permissoes do usuario logado (Login_Aplicativo).
   O live.js marca o <html> antes da primeira pintura; o JS tambem ajusta
   item a item quando a sessao e atualizada por /auth/me. */
html[data-can-solicitar="false"] [data-nav-key="solicitacao"],
html[data-can-solicitar="false"] nav a[href$="solicitacao.html"],
html[data-can-solicitar="false"] aside a[href$="solicitacao.html"],
html[data-can-aprovar="false"] [data-nav-key="aprovacoes"],
html[data-can-aprovar="false"] nav a[href$="aprovacoes.html"],
html[data-can-aprovar="false"] aside a[href$="aprovacoes.html"],
html[data-can-ver-pedidos="false"] [data-nav-key="pedidos"],
html[data-can-ver-pedidos="false"] nav a[href$="pedidos.html"],
html[data-can-ver-pedidos="false"] aside a[href$="pedidos.html"],
html[data-can-administrar="false"] [data-nav-key="configuracao"] {
  display: none !important;
}

body {
  min-height: 100dvh;
}

@media (max-width: 767px) {
  body.has-mobile-nav {
    padding-top: calc(64px + var(--mobile-safe-top));
    padding-bottom: calc(var(--mobile-nav-height) + 16px);
  }

  body.has-mobile-action {
    padding-bottom: calc(var(--mobile-nav-height) + 88px);
  }

  body.has-mobile-nav > header {
    top: 0;
    height: calc(64px + var(--mobile-safe-top));
    padding-top: var(--mobile-safe-top);
    gap: 8px;
  }

  body.has-mobile-nav > header > .flex:first-child {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  body.has-mobile-nav > .request-list-header > .flex:first-child {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
  }

  .request-list-header > .font-headline-md-mobile {
    flex: 1 1 auto;
    min-width: 0;
  }

  .request-list-header > button:last-child {
    flex: 0 0 auto;
  }

  .request-list-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: start;
    gap: 12px;
  }

  .request-list-heading h1 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.15;
  }

  .request-list-heading > a {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }

  .request-list-heading > a > span:last-child {
    display: none;
  }

  .request-list-search > .material-symbols-outlined {
    pointer-events: none;
  }

  .request-list-search > input[data-request-search] {
    width: 100%;
    padding-left: 48px;
  }

  .request-list-filters > button {
    flex: 0 0 auto;
  }

  body.has-mobile-nav > header h1,
  body.has-mobile-nav > header .font-headline-md-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(16px, 5vw, 20px);
  }

  body.has-mobile-nav > header > .flex:last-child,
  body.has-mobile-nav > header > .font-label-md {
    flex: 0 1 auto;
    max-width: 43%;
  }

  body.has-mobile-nav > header button {
    min-width: 44px;
    min-height: 44px;
  }

  body.has-mobile-nav main {
    padding-top: 16px;
    padding-bottom: 16px;
    width: 100%;
    min-width: 0;
  }

  body.has-mobile-nav main > * {
    max-width: 100%;
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(var(--mobile-nav-count, 5), minmax(0, 1fr));
    align-items: start;
    gap: 2px;
    height: var(--mobile-nav-height);
    padding: 4px 8px calc(4px + var(--mobile-safe-bottom));
  }

  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 60px;
    border-radius: 12px;
    color: #4d555b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }

  .mobile-bottom-nav a[aria-current="page"] {
    background: #fde8eb;
    color: #a51c2b;
  }

  .mobile-bottom-nav a:focus-visible,
  .mobile-action-bar button:focus-visible {
    outline: 2px solid #cd2235;
    outline-offset: -2px;
  }

  .mobile-bottom-nav .material-symbols-outlined {
    font-size: 24px;
  }

  .mobile-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: var(--mobile-nav-height);
    z-index: 45;
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 16px;
    background: rgba(245, 248, 249, .97);
    border-top: 1px solid #d5dde2;
    backdrop-filter: blur(8px);
  }

  .mobile-action-bar button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding-inline: 8px;
    line-height: 1.2;
    white-space: normal;
  }

  body.has-mobile-nav main section.sticky.bottom-24 {
    position: static;
  }

  .mobile-approval-select {
    flex: 0 0 auto;
    min-height: 44px;
    max-width: 122px;
    line-height: 1.2;
  }

  .mobile-approval-select input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
  }

  .approval-card > button {
    width: 100%;
  }

  .approval-card > button > div:first-child {
    padding-left: 28px;
    flex-wrap: wrap;
  }

  .mobile-approval-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    z-index: 1;
  }

  .mobile-approval-item input {
    width: 22px;
    height: 22px;
  }

  body.has-mobile-nav main input,
  body.has-mobile-nav main select,
  body.has-mobile-nav main textarea {
    font-size: 16px;
  }

  body.has-mobile-nav main a,
  body.has-mobile-nav main button[data-live-action$="-filter"] {
    min-height: 44px;
  }

  body.has-mobile-nav main a {
    display: inline-flex;
    align-items: center;
  }

  body.has-mobile-nav main .flex.justify-between.gap-4 {
    flex-wrap: wrap;
  }
}

@media (max-width: 359px) {
  .mobile-sync-status {
    display: none !important;
  }

  .mobile-bottom-nav {
    padding-inline: 4px;
  }

}

@media (max-width: 767px) and (max-height: 450px) {
  :root {
    --mobile-nav-height: calc(60px + var(--mobile-safe-bottom));
  }

  .mobile-bottom-nav a {
    min-height: 48px;
  }

  .mobile-bottom-nav .material-symbols-outlined {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .dark .mobile-bottom-nav {
    background: #2f3033;
    border-color: #7b8389;
  }

  .dark .mobile-bottom-nav a {
    color: #e3e9ed;
  }

  .dark .mobile-bottom-nav a[aria-current="page"] {
    background: #4a0b13;
    color: #ffb3bd;
  }

  .dark .mobile-action-bar {
    background: rgba(47, 48, 51, .97);
    border-color: #7b8389;
  }
}

/* Busca dos cadastros da solicitação: lista rolável e alvos de toque. */
.purchase-search-results {
  position: relative;
  width: 100%;
  max-height: min(240px, 35dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 4px;
  border: 1px solid #ddc1c4;
  border-radius: 8px;
  background: #fff;
  color: #21191a;
}
.purchase-search-results[hidden] { display: none; }
.purchase-search-results [role="option"] {
  min-height: 48px;
  padding: 12px;
  overflow-wrap: anywhere;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.purchase-search-results [role="option"]:hover,
.purchase-search-results [aria-selected="true"] { background: #fce8eb; }
.purchase-search-message { padding: 12px; font-size: 14px; }