/* Navigation has one owner. Keep this stylesheet last in index.html.
   On phones the workspace scrolls inside a bounded frame; navigation is a
   separate grid row, outside that scroller. Never position it with JS pixels.
   See docs/UI_DESIGN_SYSTEM.md and tests/browser/mobile-navigation*.test.cjs. */
.mobile-nav-viewport, .mobile-nav { display: none; }
.office-mobile-shell { display: contents; }
:root { --mobile-nav-height: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* Tablet/small-window navigation is off canvas in both orientations. The
   original sidebar moves into a native modal, so authorization and handlers
   stay attached. This is independent of the phone's 900px bottom-nav frame. */
@media (max-width: 1366px), (pointer: coarse) {
  :root { --sidebar: 0px; }
  body > .sidebar { display: none; }
  .app-shell { margin-left: 0; min-width: 0; }
  .mobile-menu {
    display: grid; place-content: center; flex: 0 0 44px; gap: 4px;
    width: 44px; height: 44px; padding: 0; margin: 0;
    border: 1px solid #315b83; border-radius: 12px; background: #17375a;
    background-image: linear-gradient(145deg,#244e78,#17375a);
    box-shadow: 0 3px 10px #17375a24; cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  .mobile-menu span { width: 18px; height: 2px; border-radius: 2px; background: #fff; }
  .mobile-menu:hover { border-color: #6daede; box-shadow: 0 4px 14px #17375a40; }
  .mobile-menu:active { box-shadow: inset 0 2px 5px #06192d66; }
  .mobile-menu:focus-visible { outline: 3px solid #73b6e8; outline-offset: 3px; }
  #quickSwitchButton { display: none; }
  .app-shell > :is(.topbar,.dashboard-workspace,.schedule-workspace,.customers-workspace,.parts-workspace,.reports-workspace,.accounting-workspace,.settings-workspace,#jobsWorkspace,#jobMetrics) { max-width: none; }
}
@media (min-width: 901px) and (max-width: 1366px), (min-width: 901px) and (pointer: coarse) {
  .app-shell { padding: 0 20px 24px; }
  .topbar {
    position: sticky; top: 0; z-index: 35; flex-wrap: wrap;
    margin: 0 -20px 20px; padding: calc(12px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));
    gap: 12px; background: #f4f6fa; border-bottom: 1px solid #d2dce8;
  }
  .page-title { flex: 1 1 200px; min-width: 0; }
  .page-title .eyebrow { display: none; }
  .page-title h1 { margin: 0; font-size: 28px; }
  .page-title p { margin: 6px 0 0; }
  .top-actions { flex-wrap: wrap; max-width: 100%; }
  .top-actions > * { min-width: 0; }
  .app-shell :is(button,.button,input,select) { scroll-margin-top: 140px; }
}

html body dialog#workspaceNavigationDialog[open] {
  position: fixed; display: flex; flex-direction: column;
  top: var(--overlay-top) !important; left: var(--overlay-left) !important; right: auto !important; bottom: auto !important;
  width: min(340px,calc(var(--overlay-width) - 44px)) !important; max-width: calc(var(--overlay-width) - 44px) !important;
  height: var(--overlay-height); max-height: var(--overlay-height) !important;
  margin: 0 !important; padding: 0; transform: none !important;
  border: 0; border-radius: 0 18px 18px 0; background: #14223b; color: #fff;
  overflow: hidden; box-shadow: 12px 0 40px #071b2640;
  animation: workspace-menu-enter 180ms ease-out;
}
#workspaceNavigationDialog::backdrop { background: #10253b66; backdrop-filter: none; }
#workspaceNavigationDialog > header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#workspaceNavigationDialog > .sidebar {
  position: static; display: flex; flex: 1 1 auto; width: 100%; min-height: 0;
  padding: 16px 14px max(20px,env(safe-area-inset-bottom,0px));
  overflow-y: auto; overscroll-behavior: contain; border: 0; box-shadow: none;
}
#workspaceNavigationDialog .brand { height: 82px; margin-bottom: 16px; }
#workspaceNavigationDialog .brand img { width: 100%; height: 100%; }
#workspaceNavigationDialog :is(.main-nav a,.main-nav .nav-action,.settings-link) {
  justify-content: flex-start; min-height: 46px; padding: 10px 12px; gap: 12px;
}
#workspaceNavigationDialog :is(.main-nav a,.main-nav .nav-action,.settings-link) span { display: block; }
#workspaceNavigationDialog .main-nav :is(b,i) { display: inline-flex; margin-left: auto; }
#workspaceNavigationDialog .profile-card { grid-template-columns: 36px minmax(0,1fr) 44px; }
#workspaceNavigationDialog .profile-card :is(div,button) { display: block; }
#workspaceNavigationDialog :is(.density-toggle,#accountSecurityButton,#logoutButton) { min-height: 44px; }
#workspaceNavigationDialog #logoutButton { min-width: 44px; }
@keyframes workspace-menu-enter { from { translate: -100% 0; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  html body dialog#workspaceNavigationDialog[open] { animation: none; }
  .mobile-menu { transition: none; }
}

@media (max-width: 900px) {
  /* Scope the scroll boundary to the authenticated office. Login, customer
     portal and technician pages keep their own scrolling. No document gesture
     moves Chrome's toolbar and a sticky/fixed footer in different frames. */
  html:has(.office-mobile-shell .mobile-nav:not([hidden])),
  body:has(.office-mobile-shell .mobile-nav:not([hidden])) {
    height: 100%; overflow: hidden; overscroll-behavior: none;
  }
  .office-mobile-shell:has(.mobile-nav:not([hidden])) {
    position: absolute; inset: 0; display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0; min-height: 0; overflow: hidden;
  }
  .office-mobile-shell > .app-shell {
    min-width: 0; min-height: 0; margin: 0;
    overflow: auto; overscroll-behavior: contain;
    scroll-padding: 126px 0 20px;
    padding-bottom: 20px;
  }
  .mobile-nav-viewport:has(.mobile-nav:not([hidden])) {
    display: block; position: relative; inset: auto;
    height: auto; margin: 0; z-index: 40; pointer-events: none;
  }
  .mobile-nav {
    position: relative; inset: auto; display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    width: auto; height: auto; min-height: calc(72px + env(safe-area-inset-bottom, 0px)); margin: 0;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    border-top: 1px solid #cdd9e6; background: #fff; box-shadow: 0 -2px 10px #162c4808;
    -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1;
    transform: none; transition: none; animation: none; pointer-events: auto;
  }
  .mobile-nav :is(a, button) {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: auto; min-width: 0; height: auto; min-height: 56px;
    margin: 0; padding: 4px 2px; border: 0; border-radius: 10px;
    background: transparent; box-shadow: none; color: #4b607a; font-size: 11px; font-weight: 600; line-height: 1.25;
    text-align: center; text-decoration: none; overflow-wrap: anywhere;
  }
  .mobile-nav svg { width: 22px; height: 22px; }
  .mobile-nav :is(.active, [aria-expanded="true"]) { color: #174ea6; background: #e9f1ff; }
  #mobileCreate, #mobileAccountingNav { display: none; }
  html[data-keyboard-open] .mobile-nav, html[data-overlay-open] .mobile-nav { visibility: hidden; pointer-events: none; }
}