/* ========================================================================
   V75.9 — Paginação Frota + Topbar mobile Liquid Glass real
   ======================================================================== */

/* Paginação igual ao padrão visual da Pesquisa SAP */
.op-frota-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  margin:20px 0;
  scroll-margin-top:110px;
}
.op-frota-pagination-top{margin:16px 0 20px}
.op-frota-pagination-bottom{margin:24px 0 8px}
.op-frota-pagination button{
  min-width:42px;
  height:42px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--panel-solid) 88%,transparent);
  color:var(--text);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 5px 14px color-mix(in srgb,var(--text) 7%,transparent);
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
}
.op-frota-pagination button:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 65%,var(--line));
  color:var(--accent);
  box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 18%,transparent);
}
.op-frota-pagination button.is-current{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--accent-contrast,var(--on-accent,#fff));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 32%,transparent);
}
.op-frota-pagination button:disabled{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none;
}
.op-frota-pagination .op-page-direction{
  font-size:24px;
  line-height:1;
}
.op-frota-pagination .op-page-ellipsis{
  min-width:24px;
  color:var(--muted);
  text-align:center;
  font-weight:900;
  letter-spacing:.08em;
}

/* Mobile web/iPhone: topbar com vidro real, mesmo princípio da sidebar */
@media (max-width:820px){
  html:not(.op-apk) .app-shell > .workspace > .topbar{
    isolation:auto!important;
    overflow:visible!important;
    background:rgba(245,252,251,.18)!important;
    background-image:linear-gradient(155deg,rgba(255,255,255,.20),rgba(238,251,248,.08))!important;
    border-bottom:1px solid rgba(29,86,80,.08)!important;
    -webkit-backdrop-filter:blur(34px) saturate(1.55) contrast(1.03)!important;
    backdrop-filter:blur(34px) saturate(1.55) contrast(1.03)!important;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.18),0 12px 36px rgba(15,73,66,.05)!important;
  }
  html:not(.op-apk)[data-theme="dark"] .app-shell > .workspace > .topbar{
    background:rgba(3,22,24,.28)!important;
    background-image:linear-gradient(155deg,rgba(16,44,43,.28),rgba(3,18,20,.16))!important;
    border-bottom-color:rgba(220,255,248,.07)!important;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.035),0 12px 36px rgba(0,0,0,.10)!important;
  }

  /* Remove a dupla película antiga; o próprio topbar faz o blur do backdrop real */
  html:not(.op-apk) .app-shell > .workspace > .topbar::before,
  html:not(.op-apk) .app-shell > .workspace > .topbar::after{
    background:transparent!important;
    background-image:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    box-shadow:none!important;
    border:0!important;
  }

  .op-frota-pagination{gap:6px;margin:16px 0}
  .op-frota-pagination button{
    min-width:36px;
    height:36px;
    padding:0 9px;
    border-radius:11px;
    font-size:13px;
  }
}

@supports (-webkit-touch-callout:none){
  @media (max-width:820px){
    html:not(.op-apk) .app-shell > .workspace > .topbar{
      background-color:rgba(244,252,250,.16)!important;
      -webkit-backdrop-filter:blur(36px) saturate(1.60) contrast(1.03)!important;
      backdrop-filter:blur(36px) saturate(1.60) contrast(1.03)!important;
    }
    html:not(.op-apk)[data-theme="dark"] .app-shell > .workspace > .topbar{
      background-color:rgba(3,20,22,.27)!important;
    }
  }
}

@media (prefers-reduced-motion:reduce){
  .op-frota-pagination button{transition:none}
}