/* Keep the top header bar visible while scrolling. */
#header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Keep the breadcrumbs bar (Home > ... > Works) visible too, pinned just below
   the header. --admin-header-height is set by a small script in
   admin/base_site.html, since the header's height isn't fixed (e.g. it wraps
   to two lines below the 1024px responsive breakpoint).
   Sticky has to go on the <nav> wrapper itself (a direct child of #container,
   the same flex item level as #header) rather than on div.breadcrumbs inside
   it — a sticky element can only move within the bounds of its own containing
   block, and the <nav> is exactly as tall as div.breadcrumbs already, leaving
   it no room to "stick" as the page scrolls. #container > nav is unambiguous:
   div.breadcrumbs' nav has no id, and the only other <nav> (#nav-sidebar) is
   nested inside .main, not a direct child of #container. */
#container > nav {
    position: sticky;
    top: var(--admin-header-height, 57px);
    z-index: 999;
}

/* Django already makes the left nav sidebar sticky at top: 0 (see .sticky in
   nav_sidebar.css), but that collides with the header/breadcrumbs bars above,
   which are also pinned at top: 0 with a higher z-index — so the sidebar's
   top portion scrolls up and disappears behind them. Push it down below both
   bars, and shrink its own max-height (set to 100vh in nav_sidebar.css) by
   the same amount so it doesn't run off the bottom of the viewport. */
#nav-sidebar {
    top: var(--admin-stickybars-height, 93px);
    max-height: calc(100vh - var(--admin-stickybars-height, 93px));
}

/* The default selected-filter indicator in the right-hand changelist filter
   list is just a 5px var(--hairline-color) bar (#e8e8e8) — barely visible
   against the sidebar background. Reuse the same blue Django already uses
   for the selected filter's link text (var(--link-selected-fg), which is
   theme-aware in dark mode) for the border, plus the "selected" background
   tint already used elsewhere in the admin, so the row reads as selected
   at a glance. */
/* .selected.selected (repeating the class) bumps specificity just enough to
   beat admin/css/changelists.css's own #changelist-filter li.selected rule —
   changelists.css loads after this stylesheet on the changelist page
   specifically (its <link> is appended by change_list.html's own
   extrastyle block, after ours via {{ block.super }}), so plain equal
   specificity would lose the cascade tie to it there. */
#changelist-filter li.selected.selected {
    border-left: 5px solid var(--link-selected-fg);
    background-color: var(--selected-bg);
}

/* Widen the Select2 autocomplete dropdown (used by autocomplete_fields) */
.select2-container {
    min-width: 700px !important;
}

.select2-results__option {
    white-space: normal;
    word-break: break-word;
}

.select2-selection__rendered {
    white-space: normal !important;
}

/* Widen standard form fields on add/edit pages */
.aligned .form-row input[type="text"]:not(.vDateField):not(.vTimeField),
.aligned .form-row input[type="url"],
.aligned .form-row textarea,
.vTextField,
.vURLField,
.vLargeTextField {
    width: 100% !important;
    max-width: 900px;
}

/* Let the content area use more of the page instead of a narrow fixed column */
#content-main {
    max-width: none /*1100px; */
}

#container {
    max-width: none;
    width: 98%;
    /* Django's base.css sets height: 100%, which caps #container at exactly
       one viewport tall (100% of html/body, which are also height: 100%).
       Since #container is the containing block for the sticky #header and
       div.breadcrumbs above, that cap means their sticky range runs out the
       moment a page's content scrolls past the first screenful — the sticky
       positioning stops applying rather than pinning them. height: auto lets
       the container grow to fit all its content instead; min-height keeps
       the sticky-footer flex layout intact on short pages. */
    height: auto;
    min-height: 100%;
}