/* Global pilot spacing pass. Keeps buttons visually separated without changing workflow behavior. */
:root{--ui-gap:10px;--ui-gap-lg:14px;--ui-stack:16px}

/* Shared button/action groups used across Inventory, Cost Engine, MPL, Peptide, Settings, Integrations, Shopping, Count, Used Items, and Receiving. */
.backrow,.tabs,.legend,.integration-actions,.recvchoices,.cat-attn,.attention-strip,.resource-actions,.tools{gap:var(--ui-gap)!important;row-gap:var(--ui-gap)!important}
.backrow{margin-top:14px;margin-bottom:18px}
.tabs{margin-top:12px;margin-bottom:16px}
.integration-actions,.resource-actions,.recvchoices{margin-top:14px}
.legend{margin-top:4px;margin-bottom:4px}

/* Search controls need breathing room from adjacent actions and results. */
.searchbox{gap:var(--ui-gap)!important;margin-top:14px;margin-bottom:18px}
.searchbox>button,.searchbox>.btn{flex:0 0 auto}

/* Form actions should not visually touch the last field or explanatory copy. */
.action-card>.btn,.action-card>.backrow,.modal .field+.btn,.modal .field+.backrow,.settings-section>.btn,.settings-section>.backrow{margin-top:10px}
.confirmbox .btn,.note .btn{margin-top:10px}

/* Adjacent standalone buttons that are not inside a flex action group. */
.page>.btn+.btn,.card>.btn+.btn,.action-card>.btn+.btn,.modal>.btn+.btn{margin-left:8px}

/* Section transitions: prevent controls from feeling glued to the content above/below. */
.section+.backrow,.section+.tabs{margin-top:10px}
.backrow+.grid,.backrow+.card,.backrow+.searchbox,.tabs+.card,.tabs+.grid{margin-top:4px}
.card+.backrow,.grid+.backrow,.note+.backrow{margin-top:16px}

/* Cost Engine hub and feature cards use a slightly more generous action rhythm. */
.cost-hub-actions,.cost-feature-actions{display:flex;flex-wrap:wrap;gap:10px;row-gap:10px;margin-top:14px}
.cost-feature-card .btn{margin-top:12px}

/* Tiny interaction polish across the app. */
.btn,.tab,.theme-choice,.workflow-item{transition:background .15s ease,border-color .15s ease,transform .1s ease,box-shadow .15s ease}
.btn:hover,.tab:hover{transform:translateY(-1px)}
.btn:active,.tab:active{transform:translateY(0)}

@media(max-width:700px){
  .backrow,.tabs,.integration-actions,.recvchoices,.resource-actions{gap:8px!important;row-gap:8px!important}
  .backrow{margin-bottom:14px}
  .searchbox{gap:8px!important}
  .page>.btn+.btn,.card>.btn+.btn,.action-card>.btn+.btn,.modal>.btn+.btn{margin-left:0;margin-top:8px}
}