html.zinet-needs-login .app,
html.zinet-needs-login .sidebar-backdrop,
html.zinet-boot-pending .app,
html.zinet-boot-pending .sidebar-backdrop,
html.zinet-logging-out .app,
html.zinet-logging-out .sidebar-backdrop,
html.zinet-validating .app,
html.zinet-validating .sidebar-backdrop,
html.zinet-auth-pending:not(.zinet-authed) .app {
  display: none !important;
}
html.zinet-needs-login #loginOverlay {
  display: flex !important;
}
html.zinet-needs-login .page--launcher,
html.zinet-validating .page--launcher,
html.zinet-route-login .app,
html.zinet-route-login .sidebar-backdrop {
  display: none !important;
}
html.zinet-route-login.zinet-needs-login #loginOverlay {
  display: flex !important;
}
html.zinet-route-login.zinet-authed .app,
html.zinet-route-login.zinet-authed:not(.zinet-needs-login) .app {
  display: none !important;
}
html.zinet-authed:not(.zinet-needs-login):not(.zinet-route-login) .app {
  display: grid !important;
}
html.zinet-authed:not(.zinet-needs-login) .sidebar-backdrop:not(.is-visible) {
  display: none !important;
}
html.zinet-authed:not(.zinet-needs-login) #appBootSplash {
  display: none !important;
}
html.zinet-authed:not(.zinet-needs-login):not(.zinet-route-login) #loginOverlay {
  display: none !important;
}

/* Portal boot — layar loading sebelum bottom nav + konten siap */
.portal-app-boot-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0b1220;
  color: #f0f4f8;
  font-family: system-ui, -apple-system, sans-serif;
  padding: max(1.5rem, env(safe-area-inset-top, 0px)) 1.5rem
    max(1.5rem, env(safe-area-inset-bottom, 0px));
}

html.zinet-portal-app:not(.zinet-portal-ready):not(.zinet-needs-login):not(.zinet-route-login)
  #portalAppBootScreen {
  display: flex;
}

html.zinet-portal-app:not(.zinet-portal-ready):not(.zinet-needs-login):not(.zinet-route-login) .app,
html.zinet-portal-app:not(.zinet-portal-ready):not(.zinet-needs-login):not(.zinet-route-login)
  #sidebarBackdrop {
  visibility: hidden !important;
  pointer-events: none !important;
}

.portal-app-boot-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.portal-app-boot-screen__logo img {
  display: block;
  width: min(160px, 52vw);
  height: auto;
  opacity: 0.95;
}

.portal-app-boot-screen__loader {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 174, 239, 0.2);
  border-top-color: #00aeef;
  animation: portal-app-boot-spin 0.85s linear infinite;
}

.portal-app-boot-screen__text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(240, 244, 248, 0.88);
}

@keyframes portal-app-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner kecil pada tombol refresh — layout tetap */
.zinet-btn-refreshing {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.zinet-btn-refreshing::after {
  content: '';
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.4rem;
  vertical-align: -0.1em;
  border-radius: 50%;
  border: 2px solid rgba(0, 174, 239, 0.25);
  border-top-color: #00aeef;
  animation: portal-app-boot-spin 0.75s linear infinite;
}

/* Refresh halus — spinner kecil di header tabel, baris tetap tampil */
.zinet-table-refreshing {
  position: relative;
}

.zinet-table-refreshing::after {
  content: '';
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 174, 239, 0.2);
  border-top-color: #00aeef;
  animation: portal-app-boot-spin 0.75s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.login-card__install {
  margin: 1rem 0 0;
  text-align: center;
}

.login-install-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
  color: #7dd3fc;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.login-install-link:hover,
.login-install-link:focus-visible {
  background: rgba(56, 189, 248, 0.16);
  color: #bae6fd;
}

html.zinet-login-portal-app .login-install-link {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.14);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12);
}