:root {
  /* Tune these to taste */
  --container-inline-padding: clamp(16px, 3vw, 48px);
  /* Global page max for consistent right-edge alignment across pages */
  --page-max: clamp(80rem, 92vw, 120rem);
  /* For text-heavy pages (lists, forms) */
  --container-max: clamp(70ch, 92vw, 1200px);
  /* For app-like pages (dashboards, tables) */
  --container-max-app: clamp(70rem, 92vw, 110rem);
  /* Changelist layout tuning */
  --filter-width: clamp(280px, 22vw, 360px);
  --grid-gap: clamp(16px, 2vw, 24px);
}

/* Center all major page wrappers to ensure a consistent right edge across pages */
/* These selectors cover both stock Django admin and Unfold layouts */
#container,
.container,
.content,
.content-inner,
main,
.main,
.page,
.page-content,
.unfold,
.unfold-content,
.unfold-main,
.layout,
.layout-main {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-inline-padding);
  padding-right: var(--container-inline-padding);
  max-width: var(--page-max);
}

/* Center and widen the main Django admin content area */
/* Works with both default admin and Unfold */
#content {
  margin-inline: auto;
  padding-inline: var(--container-inline-padding);
  /* Do not cap content here; let the .container class (shared with header) define width */
  width: 100%;
}

/* A wider variant you can opt into from templates if needed */
.container--wide,
#content.container--wide {
  max-width: var(--container-max-app);
}

/* Optional full-bleed sections, if you choose to add the class in templates */
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Make standard admin modules respect the centered container */
#content .module,
#content .dashboard,
#content .changeform,
#content .change-list,
#content .app-list,
#content .object-tools {
  max-width: 100%;
}


/* Improve alignment on changelist pages (table, add button, import/export, filters) */
@media (min-width: 1280px) {
  /* Two-column grid: results + right filter */
  #content .change-list {
    display: grid;
    grid-template-columns: 1fr var(--filter-width);
    column-gap: var(--grid-gap);
    align-items: start;
  }
  /* Left column content */
  #content .change-list .changelist-form,
  #content .change-list .results,
  #content .change-list .paginator,
  #content .change-list .actions,
  #content .change-list .search-container,
  #content .change-list .object-tools {
    grid-column: 1;
  }
  /* Right filters panel (handle both class and legacy id, plus generic aside) */
  #content .change-list .changelist-filter,
  #content .change-list #changelist-filter,
  #content .change-list aside[role="complementary"],
  #content .change-list aside[aria-label*="filter" i] {
    grid-column: 2;
    position: sticky;
    top: 24px;
    align-self: start;
    max-width: var(--filter-width);
  }
  /* Align the object-tools (add/import/export) with the results column's right edge */
  #content > .object-tools,
  #content .change-list .object-tools {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-right: calc(var(--filter-width) + var(--grid-gap));
  }
}

/* Ultra-wide desktops: allow slightly larger caps */
@media (min-width: 1536px) {
  :root {
    --page-max: 120rem;          /* ~1920px overall cap */
    --container-max: 80rem;      /* ~1280px */
    --container-max-app: 120rem; /* ~1920px */
  }
}

/* 2.5K+ wide displays (e.g., 2560px) */
@media (min-width: 2560px) {
  :root {
    --page-max: 150rem;          /* ~2400px */
    --container-max: 88rem;      /* ~1408px for text-heavy */
    --container-max-app: 145rem; /* ~2320px for app-like pages */
    --filter-width: clamp(320px, 20vw, 420px);
  }
}

/* 3.4K ultra-wide (e.g., 3440px) */
@media (min-width: 3360px) {
  :root {
    --page-max: 160rem;          /* ~2560px */
    --container-max: 100rem;     /* ~1600px */
    --container-max-app: 158rem; /* ~2528px — slightly wider for ultrawide */
    --filter-width: clamp(360px, 18vw, 500px);
  }
}