/* Material Symbols Rounded. Variable woff2, ligature-rendered. (Iteration 17:
   swapped from Outlined to Rounded app-wide. Ligature names are identical
   across styles, so every existing icon keeps rendering — just rounder.) */
@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('/static/fonts/MaterialSymbolsRounded.woff2') format('woff2-variations'),
       url('/static/fonts/MaterialSymbolsRounded.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

/* `.material-symbols-outlined` is kept as the class name so the ~85 existing
   template usages don't need editing; `.material-symbols-rounded` is the
   canonical name for new (iteration-17) components. Both point at the Rounded
   font. */
.material-symbols-outlined,
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  /* Variable-axis defaults — fixed (no UI picker for weight/optical size). */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* Size modifiers. Component callers can apply these to scale glyphs without
   poking the font-size value directly. */
.material-symbols-outlined.size-16, .material-symbols-rounded.size-16 { font-size: 16px; }
.material-symbols-outlined.size-20, .material-symbols-rounded.size-20 { font-size: 20px; }
.material-symbols-outlined.size-24, .material-symbols-rounded.size-24 { font-size: 24px; }
.material-symbols-outlined.size-32, .material-symbols-rounded.size-32 { font-size: 32px; }
.material-symbols-outlined.size-40, .material-symbols-rounded.size-40 { font-size: 40px; }
.material-symbols-outlined.size-48, .material-symbols-rounded.size-48 { font-size: 48px; }

/* Icon-picker grid cell. Used in the lens admin form. Class-based so we
   can avoid Alpine's dynamic-style string concatenation, which silently
   no-ops in some edge cases. */
.icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
  font-size: 0.65rem;
  line-height: 1.1;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}
.icon-cell:hover { background: var(--md-sys-color-surface-container); }
.icon-cell.is-selected {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.icon-cell .material-symbols-outlined { color: var(--md-sys-color-on-surface); }
.icon-cell__name { word-break: break-all; }

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  overflow-y: auto;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-small);
  min-height: 0;       /* enable scrolling in flex parents */
  flex: 1 1 auto;
}

/* Circular icon badge. Used for lens icons: color fills the circle, glyph
   renders on top in a contrasting tone. Drives both the admin index and
   the contact show lens headers. Pass color via inline `--lens-color`. */
.lens-badge {
  --lens-color: var(--md-sys-color-primary);
  --lens-icon-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lens-color);
  color: var(--lens-icon-color);
  flex-shrink: 0;
}
/* Center the glyph robustly: a square 1em box, flex-centered. Some Material
   Symbols glyphs have asymmetric side bearings, so centering their default
   inline line-box leaves the ink visually off-center in the circle. Pinning a
   square box + flex centering the glyph node fixes it across icons. */
.lens-badge .material-symbols-outlined,
.lens-badge .material-symbols-rounded {
  color: inherit;
  font-size: 22px;
  width: 1em;
  height: 1em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lens-badge.size-32 { width: 32px; height: 32px; }
.lens-badge.size-32 .material-symbols-outlined,
.lens-badge.size-32 .material-symbols-rounded { font-size: 18px; }
.lens-badge.size-48 { width: 48px; height: 48px; }
.lens-badge.size-48 .material-symbols-outlined,
.lens-badge.size-48 .material-symbols-rounded { font-size: 26px; }

/* Collapsible lens panel for the section admin index. Floating system
   (iteration 18): borderless tonal float-card shell, big radius, soft shadow. */
.lens-panel {
  background: var(--md-sys-color-surface-container-lowest);
  border: none;
  border-radius: var(--r-md);
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: var(--elev-1);
}
.lens-panel__summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lens-panel__summary::-webkit-details-marker { display: none; }
.lens-panel[open] .lens-panel__summary {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.lens-panel__title {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lens-panel__count { font-size: var(--md-sys-typescale-label-medium-size); }
.lens-panel__add { margin-left: auto; }
.lens-panel > .table { border: none; border-radius: 0; }
.lens-panel > p { padding: 1rem; margin: 0; }

/* Filter chip on contact show toolbar. <a> styled like a small pill. */
.lens-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.lens-chip:hover { background: var(--md-sys-color-surface-container); text-decoration: none; }
.lens-chip.is-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.lens-chip .material-symbols-outlined { font-size: 18px; }

/* Toggle chip used on contact edit. Wraps a checkbox; the visual reflects
   checked state via the sibling input. */
.lens-chip-toggle { display: inline-flex; cursor: pointer; user-select: none; }
.lens-chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.lens-chip-toggle__visual {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  background: transparent;
}
.lens-chip-toggle:hover .lens-chip-toggle__visual { background: var(--md-sys-color-surface-container); }
.lens-chip-toggle input:checked + .lens-chip-toggle__visual {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.lens-chip-toggle input:focus-visible + .lens-chip-toggle__visual {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Advanced filter panel. Slide-down card above the contact table. Styled
   to read as an MD3 elevated container — not a modal, since it lives
   inline above the table and the user can keep scrolling. */
.filter-panel {
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level1);
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
}
.filter-panel__header strong { font-weight: 500; }
.filter-panel__lens-scope {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* Each AND group is its own card-within-a-card so the OR / AND visual
   hierarchy reads clearly. */
.filter-panel__group {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.filter-panel__atom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.filter-panel__value {
  flex: 1;
  min-width: 220px;
}
.filter-panel__value md-outlined-text-field,
.filter-panel__value md-outlined-select {
  width: 100%;
}
/* A tag value cell also carries a From–To applied-date range, so it needs a
   bigger floor than a plain value (~220px). With the larger min-width, a narrow
   container (e.g. the webhook conditions card) can't fit Op + Field + this cell
   on one row, so the atom's flex-wrap drops the whole value cluster to its own
   full-width line — where tag + range lay out inline — instead of cramping
   From/To into a ragged stack. Wide containers keep it inline. Scoped via :has()
   to only the tag-range case; plain string/select rows are unaffected. (it-25.3) */
.filter-panel__value:has(.tag-filter) {
  min-width: 500px;
}

/* OR / AND divider rows. */
.filter-panel__or-row {
  padding-left: 0.25rem;
}
.filter-panel__and-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 0.25rem;
}
.filter-panel__and-row > .muted {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--md-sys-typescale-label-medium-size);
}

/* Single-column stack of .field-input controls for admin forms (section
   form, field form, lens form). Reuses the shell so admin + contact forms
   stay visually consistent. */
.admin-form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Vertical stack of checkbox rows, used as the body of a .field-input
   when the field's "value" is a group of flags. No border / padding so
   it doesn't look like a single input control. */
.checkbox-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

/* Small "LENS" prefix tag on the lens panel header so users don't confuse
   the lens name with a section name. */
.lens-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  margin-right: 0.25rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
}

/* Read-only section accordion used on the /admin/custom-sections index.
   Each section row shows a chevron + name + actions on the head; the body
   reveals a list of field summaries (icon, name, type, required, options).
   Click anywhere on the head toggles; action buttons stop propagation. */
.section-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.75rem;
}
.section-accordion {
  background: var(--md-sys-color-surface-container-low);
  border: none;
  border-radius: var(--md-sys-shape-corner-small);
  overflow: hidden;
}
.section-accordion__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  user-select: none;
}
.section-accordion__head:hover {
  background: var(--md-sys-color-surface-container-low);
}
.section-accordion__chevron {
  color: var(--md-sys-color-on-surface-variant);
  transition: transform var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, ease);
}
.section-accordion__chevron.is-open {
  transform: rotate(90deg);
}
.section-accordion__title {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}
.section-accordion__name {
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}
.section-accordion__meta {
  font-size: 0.75rem;
}
.section-accordion__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.section-accordion__body {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
}
.section-accordion__fields {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.section-accordion__field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 1rem;
  font-size: 0.9rem;
  transition: background var(--md-sys-motion-duration-short1, 100ms) ease;
}
.section-accordion__field:hover {
  background: var(--md-sys-color-surface-container-low);
}
.section-accordion__field-icon { color: var(--md-sys-color-primary); flex-shrink: 0; }
.section-accordion__field-name { font-weight: 500; }
.section-accordion__field-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.section-accordion__field-options {
  font-size: 0.75rem;
  margin-left: auto;
  text-align: right;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-accordion__empty { padding: 0.75rem 1rem; margin: 0; }

/* Alpine x-transition classes for the accordion body. Animates the
   max-height + opacity so the reveal feels smooth without measuring the
   content height in JS. */
.section-accordion__transition {
  transition: max-height var(--md-sys-motion-duration-short3, 250ms) var(--md-sys-motion-easing-standard, ease),
              opacity var(--md-sys-motion-duration-short3, 250ms) var(--md-sys-motion-easing-standard, ease);
  overflow: hidden;
}
.section-accordion__transition--enter-start {
  max-height: 0;
  opacity: 0;
}
.section-accordion__transition--enter-end {
  max-height: 600px;
  opacity: 1;
}

/* Lens-grouped section block on show + bulk form pages. The header carries
   the lens badge + name; sections render below. */
.lens-sections {
  margin-bottom: 1.5rem;
}
.lens-sections__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Shared shell around any custom-field control. Header label sits above
   the control with consistent typography across MD components and custom
   ones (chip multiselect). Placeholders inside the control are reserved
   for example data, not the field's name. */
.field-input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.field-input__label {
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
}
/* Force a visible outline on MWC inputs inside our shell — without a
   `label=` attribute, the floating-label notch goes away and MWC switches
   to a lighter outline state by default. Pin both the outline color and a
   transparent container so the input reads as a clean rectangle on any
   parent surface. */
.field-input md-outlined-text-field,
.field-input md-outlined-select {
  --md-outlined-text-field-outline-color: var(--md-sys-color-outline);
  --md-outlined-text-field-hover-outline-color: var(--md-sys-color-on-surface);
  --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
  --md-outlined-select-text-field-outline-color: var(--md-sys-color-outline);
  --md-outlined-select-text-field-hover-outline-color: var(--md-sys-color-on-surface);
  --md-outlined-select-text-field-focus-outline-color: var(--md-sys-color-primary);
}
.field-input__hint {
  font-size: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* Checkbox body matches md-outlined-text-field's nominal 56px height so
   checkbox cells line up vertically with text-field cells in the same row. */
.field-input__body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0 0.75rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  background: transparent;
}

/* Select2-style chip multiselect. The visible "input" is a flex container
   that wraps a row of chips + the real text input. The header label lives
   in the outer .field-input wrapper; the box itself is just the chip row. */
.chip-multiselect {
  position: relative;
}
.chip-multiselect__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  /* Transparent so the parent card surface shows through, matching
     md-outlined-text-field's transparent container. */
  background: transparent;
  /* Match md-outlined-text-field's nominal 56px content height so chip
     multiselects line up with sibling inputs on the same grid row. */
  min-height: 56px;
  cursor: text;
}
.chip-multiselect__box:focus-within {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
.chip-multiselect__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: 0.0625rem 0.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 0.8rem;
  line-height: 1.4;
}
.chip-multiselect__chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0 0 0 0.125rem;
  font-size: 1rem;
  line-height: 1;
}
.chip-multiselect__input {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--md-sys-color-on-surface);
  padding: 0.125rem;
}
.chip-multiselect__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.25rem 0;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: var(--md-sys-elevation-level2);
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}
.chip-multiselect__option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: var(--md-sys-typescale-body-medium-size);
}
.chip-multiselect__option:hover {
  background: var(--md-sys-color-surface-container-highest);
}

/* Autocomplete combobox for freeform_multi_select fields in the filter
   panel. Wraps an md-outlined-text-field; suggestions render in an
   absolutely-positioned popover under the input. */
.autocomplete {
  position: relative;
  width: 100%;
}
.autocomplete > md-outlined-text-field { width: 100%; }
.autocomplete__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.25rem 0;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: var(--md-sys-elevation-level2);
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}
.autocomplete__item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
}
.autocomplete__item:hover {
  background: var(--md-sys-color-surface-container-highest);
}

.filter-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding-top: 0.75rem;
}