/* ===========================================================================
   Filters as a popover instead of a column
   ===========================================================================
   Django lays the filters out as a fixed-width panel beside the results
   table, and that width comes straight out of the table. With the nav
   sidebar (~230px) and this panel (~200px) both standing, a 1366px laptop -
   an ordinary one - had 430px gone before the table got any room, and
   "Fatture di saldo" was clipping its last column behind an inner
   scrollbar.

   So the panel comes out of the flow entirely and opens over the page from
   a round button in the toolbar. The table gets the full width at every
   size, and no column has to be hidden to make that happen.

   Nothing here changes what the filters DO - it is the same <nav> Django
   renders, with the same links, just parked somewhere else. With
   JavaScript off the button never appears and the panel stays in the flow
   exactly as Django built it (see the :has() guard below).
   =========================================================================== */

/* The button is injected by filter-popover.js, so the panel is only pulled
   out of the flow once that has actually happened. */
#changelist.has-filter-popover #changelist-filter {
  position: fixed;
  z-index: 1200;
  top: auto;
  width: 288px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  margin: 0;
  /* Even top and bottom. Django's own spacing inside the panel is
     lopsided: the first block sat 1px under the top edge, while each
     filter's <ul> carries 15px of bottom padding and 5px of margin that
     the last one keeps, leaving a ~26px drop below "Dicembre". Read as a
     panel that had slipped upwards. */
  padding: 14px 0;
  border: 1px solid var(--border-color);
  border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg);

  /* Hidden state. Kept as opacity/transform rather than display:none so the
     panel can be measured and positioned before it is shown. */
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

#changelist.has-filter-popover.filters-open #changelist-filter {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Django's own "Filtra" heading is redundant once the panel is attached to
   a button that says the same thing. */
#changelist.has-filter-popover #changelist-filter > h2 {
  display: none;
}

#changelist.has-filter-popover #changelist-filter h3 {
  margin-top: 0;
}

/* The trailing space the padding above is meant to balance: the last
   filter's list keeps the bottom padding, margin and rule that separate it
   from a filter that isn't there. */
#changelist.has-filter-popover #changelist-filter > *:last-child ul:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#changelist.has-filter-popover #changelist-filter > *:first-child {
  margin-top: 0;
}

/* The results container is the only child left, so it takes the row. */
#changelist.has-filter-popover {
  display: block;
}

#changelist.has-filter-popover .changelist-form-container {
  float: none;
  width: auto;
  margin-right: 0;
}

/* --- The button ---------------------------------------------------------- */

/* Django's #toolbar is a plain block holding the search form. Making it a
   flex row puts the filter button on the same line, right-aligned - the two
   controls that narrow a list, side by side. */
#changelist #toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#changelist #toolbar #changelist-search {
  flex: 1 1 auto;
  min-width: 0;
}

.filter-toggle-host {
  flex: none;
  margin-left: auto;
}

/* No search box on this list, so the button leads the card on its own row
   and needs the padding the toolbar would have given it. */
.filter-toggle-host-bare {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline-color);
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--md-surface);
  color: var(--body-fg);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filter-toggle:hover {
  background: var(--darkened-bg);
}

.filter-toggle[aria-expanded="true"] {
  background: var(--md-accent-soft);
  border-color: var(--md-accent);
  color: var(--md-accent-strong);
}

/* Funnel, drawn rather than fetched: an <img> here would be one more
   request and one more file to theme for dark mode. currentColor means it
   follows the button's own text colour in every state. */
.filter-toggle-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

/* How many filters are actually on. The point of moving the panel off the
   page is that you stop seeing it - so the state it used to show by just
   being there has to be said out loud. */
.filter-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--md-accent);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
}

/* --- Backdrop ------------------------------------------------------------ */

/* Catches the click that closes the panel, and on a phone dims the list
   behind it so the panel reads as being on top rather than part of it. */
.filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0);
  transition: background-color 0.14s ease;
}

@media (max-width: 767px) {
  .filters-open ~ .filter-backdrop,
  body.filters-open .filter-backdrop {
    background: rgba(0, 0, 0, 0.32);
  }

  /* On a phone the panel is a sheet: full width, anchored low, thumb-side. */
  #changelist.has-filter-popover #changelist-filter {
    width: auto;
    left: 12px !important;
    right: 12px;
    max-height: 62vh;
  }
}