/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * What holds for every page. What belongs to a component lives in a stylesheet
 * of its name, which the layout loads alongside this one: Propshaft serves
 * files as they are, without bundling them, so each is a `<link>`.
 */
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body > .fr-container {
  flex-grow: 1;
}

/*
 * The DSFR fieldset aligns its elements on `last baseline`, and the baseline of
 * a native `input[type=date]` is not that of a text field: left alone, the
 * period fields ride ten-odd pixels above the others. Aligning on the bottom
 * depends on nothing each control places where.
 *
 * Restricted to fieldsets that carry a date, so nothing changes for the others.
 * `:has` is a given: `allow_browser versions: :modern` already requires it.
 */
.fr-fieldset:has(input[type="date"]) {
  align-items: flex-end;
}

.fr-fieldset .row-break {
  flex-basis: 100%;
  height: 0;
}

/*
 * The DSFR gives its cards a `display`, which wins over the one the browser's
 * own stylesheet attaches to `[hidden]`: without this, an entry hidden by the
 * filter in `filter.js` would stay on screen.
 */
[hidden] {
  display: none !important;
}