/* Android browser and installed-PWA shell. Desktop and tablet layouts above
   720px keep their existing geometry. */
@media (max-width:720px),
       (max-width:960px) and (orientation:landscape) and (max-height:560px) {
  html,
  body {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }

  body #app.app:not(.hidden),
  body.v76-sidebar-collapsed #app.app:not(.hidden) {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100svh!important;
    min-height:100dvh!important;
    overflow-x:clip!important;
  }

  body #app.app:not(.hidden) > .sidebar,
  body.v76-sidebar-collapsed #app.app:not(.hidden) > .sidebar {
    position:fixed!important;
    inset:0 0 auto 0!important;
    z-index:2147481000!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:64px!important;
    min-height:64px!important;
    max-height:none!important;
    padding:env(safe-area-inset-top) 8px 0!important;
    overflow:visible!important;
    border-right:0!important;
    border-bottom:1px solid var(--line,#1e293b)!important;
    background:var(--sidebar,#02070b)!important;
    box-sizing:border-box!important;
  }

  body #app.app:not(.hidden) .sidebar-head {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    width:112px!important;
    height:64px!important;
    min-height:64px!important;
    margin:0!important;
  }

  body #app.app:not(.hidden) .sidebar-head .atsrs-sidebar-mark {
    flex:0 0 56px!important;
    width:56px!important;
    min-width:56px!important;
    height:52px!important;
    min-height:52px!important;
    background-position:center!important;
    background-size:contain!important;
  }

  body #app.app:not(.hidden) .sidebar-head #sidebarToggleBtn {
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
  }

  body #app.app:not(.hidden) .sidebar > .sub { display:none!important; }

  body #app.app:not(.hidden) .sidebar.v76-mobile-closed > .nav {
    display:none!important;
  }

  body #app.app:not(.hidden) .sidebar:not(.v76-mobile-closed) {
    height:100svh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body #app.app:not(.hidden) .sidebar:not(.v76-mobile-closed) > .nav {
    position:absolute!important;
    inset:calc(64px + env(safe-area-inset-top)) 0 0 0!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 12px max(12px,env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:var(--sidebar,#02070b)!important;
    box-sizing:border-box!important;
  }

  body #app.app:not(.hidden) .sidebar:not(.v76-mobile-closed) :is(.nav-primary,.nav-utility-group) {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    overflow:visible!important;
  }

  body #app.app:not(.hidden) .sidebar:not(.v76-mobile-closed) .nav-utility-group {
    margin-top:8px!important;
  }

  body #app.app:not(.hidden) .sidebar:not(.v76-mobile-closed) .nav button,
  body.v76-sidebar-collapsed #app.app:not(.hidden) .sidebar:not(.v76-mobile-closed) .nav button {
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:48px!important;
    padding:9px 10px!important;
    gap:8px!important;
    text-align:left!important;
  }

  body #app.app:not(.hidden) .sidebar:not(.v76-mobile-closed) .nav button .atsrs-nav-label {
    width:auto!important;
    min-width:0!important;
    font-size:11px!important;
    line-height:1.2!important;
    text-align:left!important;
  }

  body #app.app:not(.hidden) > .main {
    display:block!important;
    grid-column:1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100svh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:calc(76px + env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom))!important;
    overflow-x:clip!important;
    box-sizing:border-box!important;
  }

  body #app.app:not(.hidden) > .main > :is(#pageTitle,section) {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body #app.app:not(.hidden) .main #atsrsGlobalControls,
  body #app.app:not(.hidden) > .main > #atsrsGlobalControls {
    position:fixed!important;
    inset:calc(10px + env(safe-area-inset-top)) 8px auto auto!important;
    z-index:2147482000!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    width:auto!important;
    max-width:calc(100vw - 124px)!important;
    height:44px!important;
    min-height:44px!important;
  }

  body #app.app:not(.hidden) #atsrsGlobalControls > .atsrs-locale-control,
  body #app.app:not(.hidden) #atsrsGlobalControls > #atsrsNotificationButton,
  body #app.app:not(.hidden) #atsrsGlobalControls > #atsrsThemeToggle {
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    height:44px!important;
    min-height:44px!important;
  }

  body #app.app:not(.hidden) #atsrsGlobalControls .atsrs-locale-control summary {
    width:40px!important;
    height:44px!important;
  }

  body #app.app:not(.hidden) #atsrsGlobalControls .atsrs-locale-options {
    position:fixed!important;
    top:calc(60px + env(safe-area-inset-top))!important;
    right:8px!important;
    left:auto!important;
    width:min(208px,calc(100vw - 16px))!important;
    min-width:0!important;
  }

  body #app.app:not(.hidden) #atsrsGlobalControls > #workspaceSwitcher {
    position:relative!important;
    inset:auto!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    margin:0!important;
  }

  body #app.app:not(.hidden) #workspaceSwitcherButton {
    display:grid!important;
    grid-template-columns:36px!important;
    place-items:center!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:4px!important;
    border-radius:13px!important;
  }

  body #app.app:not(.hidden) #workspaceSwitcherButton :is(.workspace-switcher-copy,.workspace-switcher-chevron) {
    display:none!important;
  }

  body #app.app:not(.hidden) #workspaceSwitcherAvatar {
    width:34px!important;
    height:34px!important;
  }

  body #app.app:not(.hidden) #workspaceSwitcherMenu {
    position:fixed!important;
    top:calc(62px + env(safe-area-inset-top))!important;
    right:8px!important;
    left:auto!important;
    width:min(280px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
  }

  body #app.app:not(.hidden) :is(.panel,.card,.table-wrap,.grid,form,fieldset) {
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body #app.app:not(.hidden) :is(.table-wrap,.atsrs-document-table-wrap,.account-table-wrap) {
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  body #app.app:not(.hidden) :is(.file-preview-dialog,.job-detail-dialog,.jobs-admin-dialog,.cv-generator-dialog) {
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
  }

  body #app.app:not(.hidden) :is(input,select,textarea,button) {
    max-width:100%;
  }
}

@media (max-width:380px) {
  body #app.app:not(.hidden) .sidebar-head {
    width:104px!important;
  }

  body #app.app:not(.hidden) .sidebar-head .atsrs-sidebar-mark {
    flex-basis:50px!important;
    width:50px!important;
    min-width:50px!important;
  }

  body #app.app:not(.hidden) .main #atsrsGlobalControls,
  body #app.app:not(.hidden) > .main > #atsrsGlobalControls {
    max-width:calc(100vw - 112px)!important;
    gap:2px!important;
  }

  body #app.app:not(.hidden) #atsrsGlobalControls > .atsrs-locale-control,
  body #app.app:not(.hidden) #atsrsGlobalControls > #atsrsNotificationButton,
  body #app.app:not(.hidden) #atsrsGlobalControls > #atsrsThemeToggle {
    flex-basis:38px!important;
    width:38px!important;
    min-width:38px!important;
  }
}

@media (display-mode:standalone) and (max-width:720px),
       (display-mode:fullscreen) and (max-width:720px) {
  body #app.app:not(.hidden) > .sidebar {
    padding-top:max(8px,env(safe-area-inset-top))!important;
  }

  body #app.app:not(.hidden) > .main {
    padding-top:calc(84px + env(safe-area-inset-top))!important;
  }

  body #app.app:not(.hidden) .main #atsrsGlobalControls,
  body #app.app:not(.hidden) > .main > #atsrsGlobalControls {
    top:max(14px,env(safe-area-inset-top))!important;
  }
}

@media (max-width:960px) and (orientation:landscape) and (max-height:560px) {
  body #app.app:not(.hidden),
  body.v76-sidebar-collapsed #app.app:not(.hidden) {
    display:block!important;
    grid-template-columns:1fr!important;
  }

  body #app.app:not(.hidden) > .main {
    grid-column:1!important;
    width:100%!important;
    padding-top:calc(72px + env(safe-area-inset-top))!important;
  }
}