/* Shared mobile safe-area rules, applied at structural edges. */
:root {
  --ss-safe-top: env(safe-area-inset-top, 0px);
  --ss-safe-right: env(safe-area-inset-right, 0px);
  --ss-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ss-safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 767px) {
  /* Dashboard headers are the first fixed/sticky surface below the system area. */
  .dashboard-header,
  #dashboardSection > nav.neo-nav,
  .onboarding-topbar {
    padding-top: var(--ss-safe-top);
  }

  .dashboard-header > div,
  #dashboardSection > nav.neo-nav > div {
    padding-left: max(1rem, var(--ss-safe-left)) !important;
    padding-right: max(1rem, var(--ss-safe-right)) !important;
  }

  #customerSidebar,
  #workerSidebar {
    position: fixed !important;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    z-index: 1100;
    box-sizing: border-box;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: calc(0.75rem + var(--ss-safe-bottom)) !important;
    padding-left: max(0.5rem, var(--ss-safe-left));
    padding-right: max(0.5rem, var(--ss-safe-right));
  }

  #customerSidebar .tab-btn,
  #workerSidebar .tab-btn {
    min-height: 2.75rem;
  }

  main {
    scroll-padding-top: calc(4.5rem + var(--ss-safe-top));
  }

  /* Full-screen surfaces need edge clearance without changing their desktop sizing. */
  .modal-overlay,
  .login-modal-overlay,
  .profile-completion-overlay {
    padding-top: var(--ss-safe-top);
    padding-bottom: var(--ss-safe-bottom);
    padding-left: var(--ss-safe-left);
    padding-right: var(--ss-safe-right);
  }

  #site-nav,
  .navbar {
    height: calc(64px + var(--ss-safe-top));
  }

  #site-nav .nav-container,
  .navbar .nav-container {
    padding-left: max(1rem, var(--ss-safe-left)) !important;
    padding-right: max(1rem, var(--ss-safe-right)) !important;
  }

  #workerNoticeContainer,
  .notification-container {
    top: calc(1rem + var(--ss-safe-top)) !important;
    right: max(1rem, var(--ss-safe-right)) !important;
    left: max(1rem, var(--ss-safe-left)) !important;
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  .dashboard-header > div,
  #dashboardSection > nav.neo-nav > div {
    padding-left: max(1rem, var(--ss-safe-left)) !important;
    padding-right: max(1rem, var(--ss-safe-right)) !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  #customerSidebar,
  #workerSidebar {
    position: fixed !important;
    inset: auto 0 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    flex-direction: row !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0.35rem max(0.5rem, var(--ss-safe-left)) calc(0.35rem + var(--ss-safe-bottom)) !important;
  }

  #customerSidebar > .hidden,
  #workerSidebar > .hidden {
    display: none !important;
  }

  #customerSidebar > div,
  #workerSidebar > div {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    gap: 0.25rem;
  }

  #customerSidebar .tab-btn,
  #workerSidebar .tab-btn {
    flex: 1 1 0% !important;
    flex-direction: column !important;
    min-height: 2.75rem;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.2rem 0.1rem;
    font-size: 0.7rem;
  }

  #customerSidebar .tab-btn > span:last-child,
  #workerSidebar .tab-btn > span:last-child {
    white-space: nowrap;
  }

  .dashboard-header,
  #dashboardSection > nav.neo-nav {
    padding-left: 0 !important;
  }

  #customerSidebar + div > main,
  #workerSidebar + div > main {
    margin-left: 0 !important;
    padding-bottom: calc(5.5rem + var(--ss-safe-bottom)) !important;
  }
}