/* Container Component Styles */
/* Wrapper around Dash Mantine Components Container with responsive padding */

.custom-container {
  /* Responsive padding for data-heavy apps */
  /* Minimal horizontal padding, comfortable vertical padding */
  
  /* Full width of parent; min-width 0 so it can shrink on resize without overflowing */
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  
  /* Base (mobile/small screens) */
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* Small screens (sm breakpoint - typically 576px+) */
@media (min-width: 576px) {
  .custom-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* Medium screens (md breakpoint - typically 768px+) */
@media (min-width: 768px) {
  .custom-container {
    padding-left: 36px !important;
    padding-right: 36px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Large screens (lg breakpoint - typically 992px+) */
@media (min-width: 992px) {
  .custom-container {
    padding-left: 48px !important;
    padding-right: 48px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}