body {
  --app-main-left: 310px;
  --app-main-top: 8px;
  --app-main-right: 8px;
  --app-main-bottom: 48px;
  --mobile-bottom-nav-height: 48px;
}

body.sidebar-collapsed {
  --app-main-left: 125px;
}

body.secondary-sidebar-open {
  --app-main-left: calc(302px + 340px + 8px);
}

body.secondary-sidebar-open.sidebar-collapsed {
  --app-main-left: calc(117px + 340px + 8px);
}

.app-main {
  min-height: 100vh;
  padding: var(--app-main-top) var(--app-main-right) var(--app-main-bottom) var(--app-main-left);
  transition: padding 0.4s ease;
}

.app-update-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-raised, var(--surface));
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
  color: var(--page-text, var(--text-main));
  font-size: 0.9rem;
  font-weight: 700;
}

.app-update-banner[hidden] {
  display: none;
}

@media (min-width: 1025px) {
  body.attendance-quick-active {
    --app-main-top: 2px;
    --app-main-right: 2px;
    --app-main-bottom: 2px;
  }
}

@media (max-width: 1024px) {
  body,
  body.sidebar-collapsed,
  body.secondary-sidebar-open,
  body.secondary-sidebar-open.sidebar-collapsed {
    --app-main-left: 8px;
    --app-main-top: 8px;
    --app-main-right: 8px;
    --app-main-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  body.attendance-quick-active {
    --app-main-left: 2px;
    --app-main-top: 2px;
    --app-main-right: 2px;
    --app-main-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
  }

  .app-update-banner {
    right: 8px;
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}