/* Saved filters: the list + editor screens. Follows the settings aesthetic —
   hairline separators, square-ish corners, accent green for actions, raspberry
   only via the shared .danger role. */

.saved-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hairline-separated rows, not boxes — matches the notifications index (its
   sibling list) so the two read as one family. The notifying-vs-silent state is
   already legible in the row itself (the summary line says "Silent" or the
   schedule, and notifying rows carry channel chips), so the old green left-border
   — which read as meaningless decoration in the walkthrough — is dropped. */
.saved-filter-card {
  padding: var(--gap-medium) 0;
  border-bottom: var(--border-width) solid var(--rule-color);
}

.saved-filter-list > .saved-filter-card:first-child {
  padding-top: 0;
}

.saved-filter-list > .saved-filter-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* The card title is the link to the editor. Styled as a heading (bold, normal
   foreground — not an accent link) so the row reads title-first; a persistent
   muted underline is the at-rest clickability cue, which sharpens to the accent
   on hover/focus. align-self keeps the hit area to the text, not the full row
   width. */
.saved-filter-card__name {
  align-self: flex-start;
  font-weight: bold;
  color: var(--theme-fg-color);
  text-decoration: underline;
  text-decoration-color: var(--theme-fg-muted);
  text-underline-offset: 0.2em;
}

.saved-filter-card__name:hover,
.saved-filter-card__name:focus-visible {
  text-decoration-color: var(--theme-accent-color);
}

.saved-filter-card__chips,
.saved-filter-card__actions {
  flex-wrap: wrap;
  align-items: center;
}

/* button_to wraps each action in its own <form>; keep them inline + flush. */
.saved-filter-card__actions form {
  margin: 0;
}

/* The .chip info-label family now lives in tags.css (shared, beside .tag), since
   it's used app-wide for read-only badges, not just here. */

/* The button ladder (.button-small / .danger) and .text-link now live in
   controls.css — they're the app-wide secondary-button + link vocabulary, not
   specific to this page. */

/* Builder form: reuse .account-form field styling; these add the grouping. */
.saved-filter-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* The section legend (Filter / Benachrichtigungen) is the page's h2 tier — a step
   LARGER than the bold .field-label ("Wann" / "Wie oft") so it reads as a section
   header, not just another field label. (Size, not a rule line: an earlier hairline
   divider here read as one more input underline and muddied the split — see the
   adjacent-sibling spacing below, which now separates the sections with whitespace
   alone.) */
.saved-filter-fieldset legend {
  padding: 0;
  font-weight: bold;
  font-size: var(--font-size-lg);
  margin-bottom: var(--gap-medium);
}

/* Set the two builder sections (Filter / Benachrichtigungen) apart with generous
   whitespace alone — the larger legend above carries the "new section" signal, so
   no divider line is needed (and a line here looked like a stray field underline).
   This margin stacks on the form's own gap, giving the Notifications section clear
   footing below the Filter block. */
.saved-filter-fieldset + .saved-filter-fieldset {
  margin-top: var(--gap-large);
}

.saved-filter-row {
  flex-wrap: wrap;
  align-items: flex-end;
}

.saved-filter-row > label {
  flex: 1 1 8rem;
  min-width: 0;
}

/* The notification time is two selects (hour : minute) sharing one row cell, so
   the group takes the same flex basis as a sibling label and the two selects split
   it; align-end + a padded colon keep all three baselines on the underline. */
.saved-filter-row > .saved-filter-time {
  flex: 1 1 8rem;
  min-width: 0;
  align-items: flex-end;
}

.saved-filter-time > label {
  flex: 1 1 0;
  min-width: 0;
}

.saved-filter-time__colon {
  padding: var(--gap-small) 0;
  line-height: var(--filter-input-line-height);
}

.saved-filter-custom {
  padding-left: var(--gap-medium);
  border-left: var(--border-width) solid var(--theme-bg-muted);
}

.saved-filter-check {
  align-items: center;
}

/* Push + e-mail depend on the in-app master above them — a small indent shows the
   hierarchy (and they grey out via :disabled when in-app is off). */
.saved-filter-check--sub {
  padding-left: var(--gap-medium);
}

.saved-filter-check--sub:has(:disabled) {
  opacity: 0.55;
}

/* A channel whose prerequisite is missing (e-mail with no address saved) is
   disabled; dim it so it reads as unavailable. */
.saved-filter-check--disabled {
  opacity: 0.55;
}

/* The form is an .account-form, which underlines bare text inputs — but the
   what/where comboboxes already carry their own .input-wrapper underline, so
   strip the account-form one off the combobox input to avoid a double line. */
.account-form .input-wrapper .hw-combobox__input {
  border-bottom: 0;
  padding: 0;
}

/* Give EVERY select in the form the same line metrics as the what/where
   comboboxes, so all fields are exactly the same height in every browser (some
   render a bare <select> shorter by default). Applying it only to the window
   select left the schedule selects (cadence/weekday/monthday) shorter — enough to
   clip a descender (the "g" in "Freitag") while the taller window select didn't. */
.saved-filter-form select {
  line-height: var(--filter-input-line-height);
}

/* The base flex utilities ship small/medium/large but not xsmall; define it so
   the tight label/value stacks read as intended rather than collapsing to 0. */
.gap-xsmall {
  gap: var(--gap-xsmall);
}

/* The conditional schedule fields (weekday / monthday) carry .flex
   (display:flex), which overrides the UA `[hidden]` rule that the saved-filter-form
   Stimulus controller toggles — so without this they'd never hide. Re-assert
   [hidden] at higher specificity (same trick as events.css). */
.saved-filter-form [hidden] {
  display: none;
}

/* "Save this filter" — an icon-only, opt-in action pinned to the right of the
   applied-filter chips (both the inline filter and the mobile sheets). The accent
   funnel signals it's interactive; its context (sitting at the end of the filter you
   just built) carries the meaning, so it needs no label. Padding gives a
   finger-sized (~40px) hit area; the matching negative top/bottom margin cancels
   the vertical growth so the star rides the chip row's reserved one-line height
   rather than making the row (and so the whole page) taller. */
.save-filter-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 9px;
  margin: -9px 0;
  color: var(--theme-accent-color);
  text-decoration: none;
}

.save-filter-link .ph {
  font-size: 1.35rem;
  line-height: 1;
}

/* Hover/focus reveals the tap target as a soft pill — the state cue an icon-only
   control otherwise lacks (Phosphor is an icon font, so a bolder glyph isn't an
   option). */
.save-filter-link:hover,
.save-filter-link:focus-visible {
  background: var(--theme-bg-emphasis);
  border-radius: 999px;
  outline: none;
}

.filter-actions {
  flex: 0 0 auto;
  gap: 2px;
}

/* "Add this filter": a funnel with a small + badge tucked into its corner — the
   not-saved state of the single save control. The badge rides the glyph (relative
   wrapper), accent disc with a bg-coloured +, so it reads as "add". */
.save-filter-icon {
  position: relative;
  display: inline-flex;
}

.save-filter-plus {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 0.72rem;
  height: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--theme-accent-color);
  color: var(--theme-bg-color);
  font-size: 0.62rem;
  font-weight: bold;
  line-height: 1;
}

/* Saved: a solid (filled) funnel (masked SVG, accent-painted) — the strong
   filled-vs-outline state cue against the not-saved outline funnel. Links to the
   existing saved filter's editor. Sized to match the 1.35rem outline funnel; the
   flex link centres it vertically. */
.save-filter-link.active .funnel-fill {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  background-color: var(--theme-accent-color);
  -webkit-mask: var(--funnel-fill) center / contain no-repeat;
  mask: var(--funnel-fill) center / contain no-repeat;
}


/* A non-blocking heads-up inside the editor (another rule already covers this
   exact filter). Accent-bordered like a flash, not warn-red like .form-errors —
   nothing's wrong, the duplicate is allowed; it's just worth knowing. */
.saved-filter-notice {
  border: var(--border-width) solid var(--theme-accent-color);
  padding: var(--gap-small) var(--gap-medium);
  /* Breathing room above/below so it isn't crammed between the intro and the
     "Worüber" legend (the turbo frame stacks these with no gap). */
  margin: var(--gap-medium) 0;
  line-height: 1.5;
}