/* DEVNOOD macOS UI v17 - docs mobile overlay + auction header cleanup */

/* ============ Docs mobile: make hamburger menu neat and not overblocking ============ */
@media (max-width: 1023px){
  body.macos-ui.macos-page-docs #docsBackdrop{
    background: rgba(0,0,0,.38)!important;
    backdrop-filter: blur(2px)!important;
    -webkit-backdrop-filter: blur(2px)!important;
  }
  body.macos-ui.macos-page-docs #docsSidebar{
    top: 10px!important;
    left: 10px!important;
    bottom: 10px!important;
    width: min(78vw, 310px)!important;
    max-width: calc(100vw - 44px)!important;
    height: calc(100dvh - 20px)!important;
    border: 1px solid rgba(255,255,255,.08)!important;
    border-radius: 20px!important;
    background: rgba(14,14,18,.995)!important;
    box-shadow: 18px 0 52px rgba(0,0,0,.42)!important;
    overflow: hidden!important;
  }
  body.macos-ui.macos-page-docs #docsSidebar .docs-sidebar-body{
    height: calc(100% - 72px)!important;
    overflow-y: auto!important;
    overflow-x: hidden!important;
    padding-bottom: 18px!important;
  }
  body.macos-ui.macos-page-docs #docsSidebar .docs-sidebar-titlebar{
    min-height: 72px!important;
    padding: 12px 52px 12px 54px!important;
    border-bottom: 1px solid rgba(255,255,255,.06)!important;
  }
  body.macos-ui.macos-page-docs .docs-sidebar-title strong,
  body.macos-ui.macos-page-docs .docs-sidebar-title small{
    opacity: 1!important;
  }
  body.macos-ui.macos-page-docs .docs-menu-button{
    top: 16px!important;
    left: 16px!important;
    width: 44px!important;
    height: 44px!important;
    border-radius: 14px!important;
    background: rgba(34,34,38,.92)!important;
    border: 1px solid rgba(255,255,255,.08)!important;
    box-shadow: 0 12px 28px rgba(0,0,0,.24)!important;
  }
}

/* ============ Auction: clean colors and tidy 3 dots ============ */
body.macos-ui #auctionModal .auction-shell{
  background: linear-gradient(160deg, rgba(22,22,28,.985), rgba(12,12,16,.995))!important;
}
body.macos-ui #auctionModal .auction-header{
  background: linear-gradient(180deg, rgba(28,28,34,.98), rgba(22,22,28,.96))!important;
  border-bottom-color: rgba(255,255,255,.08)!important;
}
body.macos-ui #auctionModal .auction-window-controls{
  align-self:center!important;
}
body.macos-ui #auctionModal .auction-header-inner{
  gap: 14px!important;
}
body.macos-ui #auctionModal .auction-header-icon{
  background: linear-gradient(135deg, rgba(60,60,68,.95), rgba(26,26,31,.96))!important;
  color: #f5f5f7!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.18)!important;
}
body.macos-ui #auctionModal #auction-system-badge{
  background: rgba(34,197,94,.14)!important;
  border-color: rgba(34,197,94,.18)!important;
  color: #86efac!important;
}
body.macos-ui #auctionModal .auction-tab.active{
  color: #fff!important;
  background: linear-gradient(135deg, rgba(37,99,235,.92), rgba(59,130,246,.78))!important;
  border-color: rgba(96,165,250,.22)!important;
  box-shadow: 0 12px 28px rgba(37,99,235,.18)!important;
}
body.macos-ui #auctionModal .auction-tab{
  color: #b8b8c5!important;
  background: rgba(10,10,14,.34)!important;
}
body.macos-ui #auctionModal .auction-secondary{
  background: rgba(255,255,255,.04)!important;
  border-color: rgba(255,255,255,.08)!important;
}

@media (max-width: 767px){
  body.macos-ui #auctionModal .auction-header-inner{
    grid-template-columns: auto 1fr auto!important;
    align-items:center!important;
    gap:10px!important;
  }
  body.macos-ui #auctionModal .auction-window-controls{
    grid-column:auto!important;
    justify-content:flex-start!important;
    min-width:max-content!important;
  }
  body.macos-ui #auctionModal .auction-header-main{
    align-items:center!important;
    gap:10px!important;
  }
  body.macos-ui #auctionModal .auction-header-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  body.macos-ui #auctionModal .auction-header-copy p{
    margin-top: 3px!important;
    color: #9b9bab!important;
  }
  body.macos-ui #auctionModal .auction-header-close{
    width: 42px!important;
    height: 42px!important;
    min-width: 42px!important;
    border-radius: 14px!important;
  }
}