/* Atmosphere overlay modal — layout (load last; overrides flex centering) */

#atmosphereModal .axm-atmo-modal-dialog {

  --bs-modal-width: 85vw;

  width: 85vw !important;

  max-width: 85vw !important;

}



#atmosphereModal .axm-atmo-modal-dialog.modal-dialog-centered {

  display: flex;

  align-items: center;

  min-height: calc(100% - var(--bs-modal-margin) * 2);

}



#atmosphereModal .axm-atmo-modal-content {

  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;

  justify-content: flex-start !important;

  width: 100%;

  min-height: 75vh !important;

  max-height: 80vh !important;

  height: 75vh;

  overflow: hidden !important;

}



#atmosphereModal .axm-atmo-modal-header {

  flex: 0 0 auto !important;

}



#atmosphereModal .axm-atmo-modal-body {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;

  padding: 0 !important;

}



#atmosphereModal .axm-atmo-modal-footer {

  flex: 0 0 auto !important;

  display: flex !important;

  justify-content: flex-end !important;

  align-items: center !important;

  padding: 0.65rem 1rem !important;

  border-top: 1px solid var(--axm-border, #30363d) !important;

  background: var(--axm-surface, #1a2332) !important;

}



#atmosphereModal .axm-atmo-apply-btn--footer {

  width: auto !important;

  min-width: 120px !important;

  padding: 0.45rem 1.25rem !important;

}



#atmosphereModal .axm-atmo-layout {

  display: flex !important;

  flex-direction: row !important;

  align-items: stretch !important;

  width: 100% !important;

  height: 100% !important;

  min-height: 0 !important;

  overflow: hidden !important;

}



#atmosphereModal .axm-atmo-sidebar-col {

  position: relative !important;

  flex: 0 0 260px !important;

  width: 260px !important;

  min-width: 260px !important;

  max-width: 260px !important;

  display: flex !important;

  flex-direction: column !important;

  min-height: 0 !important;

  overflow: hidden !important;

  padding: 0.85rem 0.85rem 0.85rem 0.9rem !important;

  border-right: 1px solid var(--axm-border, #30363d) !important;

  gap: 0.65rem !important;

}



#atmosphereModal .axm-atmo-sidebar-body {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  display: grid !important;

  grid-template-rows: minmax(0, 1fr) !important;

  overflow: hidden !important;

}



#atmosphereModal .axm-atmo-categories-top {

  grid-row: 1 !important;

  min-height: 0 !important;

  overflow-y: auto !important;

}



/* Preview box is out of grid flow (desktop): absolutely positioned against

   .axm-atmo-sidebar-col and vertically aligned to the active list row by

   positionPreview() in assets/js/atmosphere-library.module.js, which sets the

   inline `top`. NOTE: do not add an !important `top` here or it would override

   the JS-set inline style. left/right mirror the column padding so the box

   keeps its former width inside the padded sidebar. */

#atmosphereModal .axm-atmo-sidebar-preview {

  position: absolute !important;

  left: 0.9rem !important;

  right: 0.85rem !important;

  display: none !important;

  z-index: 5 !important;

}



#atmosphereModal .axm-atmo-sidebar-preview.is-active {

  display: block !important;

}



#atmosphereModal .axm-atmo-sidebar-preview .axm-atmo-preview-wrap {

  width: 100% !important;

  height: 140px !important;

}



#atmosphereModal .axm-atmo-list-col {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  min-height: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;

  padding: 0.85rem 0.85rem 0.85rem 0.65rem !important;

}



#atmosphereModal .axm-atmo-list {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  height: 100% !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-start !important;

  align-items: stretch !important;

  align-content: flex-start !important;

}



#atmosphereModal .axm-atmo-preview-wrap {

  position: relative !important;

  width: 100% !important;

  overflow: hidden !important;

  background: #0d1117 !important;

  border-radius: 8px !important;

  border: 1px solid var(--axm-border, #30363d) !important;

}



#atmosphereModal .axm-atmo-preview-stage {

  position: relative !important;

  width: 100% !important;

  height: 100% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  overflow: hidden !important;

  background: #0d1117 !important;

}



#atmosphereModal .axm-atmo-preview-placeholder.is-hidden {

  display: none !important;

}



#atmosphereModal .axm-atmo-preview-video {

  display: none !important;

}



#atmosphereModal .axm-atmo-preview-video.is-active {

  display: block !important;

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  max-width: 100% !important;

  max-height: 100% !important;

  margin: 0 !important;

  object-fit: contain !important;

  object-position: center center !important;

  background: transparent !important;

  z-index: 2 !important;

}



#atmosphereModal .axm-atmo-preview-placeholder {

  position: absolute !important;

  inset: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 0.35rem !important;

  padding: 0.5rem !important;

  text-align: center !important;

  color: var(--axm-text-muted, #8b949e) !important;

  font-size: 0.72rem !important;

  z-index: 1 !important;

}



@media (max-width: 767.98px) {

  #atmosphereModal .axm-atmo-layout {

    flex-direction: column !important;

  }



  #atmosphereModal .axm-atmo-sidebar-col {

    flex: 0 0 auto !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    max-height: 42vh !important;

    border-right: none !important;

    border-bottom: 1px solid var(--axm-border, #30363d) !important;

  }



  /* Mobile: stacked layout — restore the preview to normal grid flow below the

     categories (position:static ignores the JS-set inline top/left/right). */

  #atmosphereModal .axm-atmo-sidebar-body {

    grid-template-rows: minmax(0, 1fr) auto !important;

  }



  #atmosphereModal .axm-atmo-sidebar-preview {

    position: static !important;

    grid-row: 2 !important;

  }



  #atmosphereModal .axm-atmo-list-col {

    flex: 1 1 auto !important;

    min-height: 0 !important;

  }

}