/* ====================================================================
 * sheet-filter.css — sticky sheet-wide rig-row filter bar
 * (public/js/sheet-filter.js → window.SheetFilter.renderBar)
 *
 * CSS class prefix: `hd-sheet-filter__` (BEM)
 * Layer: components
 *
 * The bar mounts at the top of the karakterark content and sticks to the top
 * of the player-portal content-mount scroll container (which already starts
 * below the player top-bar — see player-content-zoom.css). Hence `top: 0`.
 *
 * Token-only: no raw px font-size, no raw font-weight literals, no hex.
 * Chip + search text follow content-zoom via --hd-text-* tokens (zoom-scaled).
 * Touch-targets ≥44px (WCAG 2.5.5) for the search input and every chip.
 *
 * Safari 16.6 / iPadOS 16: no @container-required features here; flex-wrap +
 * position:sticky are fully supported.
 * ==================================================================== */

@layer components {

  /* F6c — the bar sits directly on the sheet background (no gold-edged fg-card
   * frame). The default sticky variant keeps an opaque --hd-surface-base fill so
   * scrolled content does not bleed through it; compact character-sheet search
   * overrides that fill so only the input/buttons paint their own surfaces. */
  .hd-sheet-filter {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3);
    background: var(--hd-surface-base);
    box-sizing: border-box;
  }

  .hd-sheet-filter[hidden],
  .hd-sheet-filter__compact-toggle[hidden] {
    display: none;
  }

  .hd-sheet-filter--compact-enabled {
    padding: 0;
    background: transparent;
  }

  /* ---- Search row -------------------------------------------------- */
  /* Merged search bar (normalized to the Regler reference design): the Ryd
   * button, the input and the gear toggle sit flush against each other as one
   * continuous control — no gaps, shared borders. The outer buttons round only
   * on their outer edge. */
  .hd-sheet-filter__search {
    display: flex;
    align-items: stretch;
    gap: 0;
  }

  .hd-sheet-filter__search-input {
    flex: 1;
    min-width: 0;
    /* Positioning context for the absolutely-placed visible-count circle (F6b). */
    position: relative;
  }

  /* ---- "Ryd" (clear) button — left, square w/ rounded LEFT corners only --- */
  .hd-sheet-filter__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--hd-border-medium);
    border-right: none;            /* merged flush against the input */
    border-radius: var(--hd-radius-sm) 0 0 var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui);
    cursor: pointer;
  }

  .hd-sheet-filter__clear-icon-glyph {
    --hd-player-icon-size: 1.1em;
  }

  .hd-sheet-filter__clear:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: -2px;
  }

  /* ---- Gear toggle button — right, square w/ rounded RIGHT corners only --- */
  .hd-sheet-filter__toggle {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--hd-border-medium);
    border-left: none;             /* merged flush against the input */
    border-radius: 0 var(--hd-radius-sm) var(--hd-radius-sm) 0;
    background: var(--hd-surface-1);
    font-size: var(--hd-text-h3);
    color: var(--hd-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
  }

  .hd-sheet-filter--compact-enabled .hd-sheet-filter__toggle {
    border-radius: 0;
  }

  .hd-sheet-filter__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--hd-border-medium);
    border-left: none;
    border-radius: 0 var(--hd-radius-sm) var(--hd-radius-sm) 0;
    background: var(--hd-surface-1);
    color: var(--hd-text-secondary);
    cursor: pointer;
  }

  .hd-sheet-filter__collapse:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: -2px;
  }

  .hd-sheet-filter__collapse-icon {
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("../img/karakterark/plain-arrow.svg") no-repeat center / 90%;
    mask: url("../img/karakterark/plain-arrow.svg") no-repeat center / 90%;
  }

  .hd-sheet-filter__compact-toggle {
    --hd-chip-icon-url: url("../img/karakterark/magnifying-glass.svg");
    gap: var(--hd-space-1);
  }

  .hd-sheet-filter__compact-icon {
    --hd-chip-icon-url: url("../img/karakterark/magnifying-glass.svg");
  }

  .hd-sheet-filter__compact-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hd-radius-full, 999px);
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    line-height: var(--hd-leading-icon);
  }

  .hd-sheet-filter__compact-count[hidden] {
    display: none;
  }

  .hd-sheet-filter__toggle:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: -2px;
  }

  /* ---- Collapsible chip-rows wrapper -------------------------------- */
  .hd-sheet-filter__chip-rows {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }

  /* Safari 16.6 safe: [hidden] attribute sets display:none natively.
   * The explicit rule guards any CSS-reset that overrides the UA default. */
  .hd-sheet-filter__chip-rows[hidden] {
    display: none;
  }

  /* ---- Active-filter count badge (shown on gear when collapsed) ----- */
  .hd-sheet-filter__toggle-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    font-size: var(--hd-sheet-filter-badge-size, 10px);
    line-height: var(--hd-sheet-filter-badge-leading, 16px);
    text-align: center;
    pointer-events: none;
  }

  /* The shared FilterUIComponents search input renders an inner
   * `.filter-search-input`. Lift it to a ≥44px touch-target and let its text
   * scale with content-zoom (the shared factory ships a small inline px size;
   * this override wins for the sheet-filter context). */
  .hd-sheet-filter__search-input .filter-search-input {
    width: 100%;
    min-height: 44px;
    font-size: var(--hd-text-ui);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    border: 1px solid var(--hd-border-medium);
    /* Flat corners — the input is merged between the Ryd button (left) and the
     * gear toggle (right); those carry the outer rounding. */
    border-radius: 0;
    /* Room at the right for the visible-count circle (F6b) so typed text never
     * slides under it. */
    padding-right: 2.5rem;
    box-sizing: border-box;
  }

  .hd-sheet-filter__search-input .filter-search-input::placeholder {
    /* AAA: --hd-text-secondary is ≥7:1 on surface-3 i begge temaer; tertiary
     * faldt til ~5.9:1 (AA) på lyst pergament og fik placeholder til at virke
     * uklar. */
    color: var(--hd-text-secondary);
  }

  /* Focus ring for keyboard navigation — filter-ui.css is not loaded in the
   * player portal, so we provide the ring here instead. */
  .hd-sheet-filter__search-input .filter-search-input:focus,
  .hd-sheet-filter__search-input input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--hd-accent-primary);
  }

  /* ---- Chip groups ------------------------------------------------- */
  .hd-sheet-filter__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2);
  }

  /* Merged segmented-pill band: no gap, shared borders collapsed via the
   * negative inline-margin on chips, outer corners rounded on first/last. */
  .hd-sheet-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  /* ---- Facet chip (toggle) ----------------------------------------- */
  .hd-sheet-filter__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;            /* WCAG 2.5.5 touch-target */
    min-width: 44px;
    padding: var(--hd-space-1) var(--hd-space-3);
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-tight);
    color: var(--hd-text-secondary);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    /* Segmented: square inner edges; outer corners rounded on first/last below. */
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background var(--hd-motion-fast) var(--hd-ease-ui), color var(--hd-motion-fast) var(--hd-ease-ui), border-color var(--hd-motion-fast) var(--hd-ease-ui);
  }

  /* Collapse the shared border between adjacent segments. */
  .hd-sheet-filter__chip:not(:first-child) {
    margin-left: -1px;
  }
  /* Round only the outer ends of the band (LTR UI). */
  .hd-sheet-filter__chip:first-child {
    border-top-left-radius: var(--hd-radius-full);
    border-bottom-left-radius: var(--hd-radius-full);
  }
  .hd-sheet-filter__chip:last-child {
    border-top-right-radius: var(--hd-radius-full);
    border-bottom-right-radius: var(--hd-radius-full);
  }

  .hd-sheet-filter__chip:hover {
    background: var(--hd-surface-3);
    color: var(--hd-text-primary);
    /* Lift so the hovered segment's border isn't hidden by a neighbour's overlap. */
    position: relative;
    z-index: 1;
  }

  .hd-sheet-filter__chip:focus-visible {
    outline: 2px solid var(--hd-border-accent);
    outline-offset: 2px;
    position: relative;
    z-index: 2;
  }

  /* Active (selected) state — clearly distinct accent fill. Raised so the
   * accent border outlines the whole segment (not clipped by the -1px overlap). */
  .hd-sheet-filter__chip--on {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-semibold);
    position: relative;
    z-index: 1;
  }

  .hd-sheet-filter__chip--on:hover {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
  }

  /* ---- Visible-count badge (Task 19 · F6b) --------------------------------
   * A small circle pinned to the right end of the search input — shows the
   * number of currently-visible rows (the full "N viste" phrasing is on its
   * title/aria-label). pointer-events:none so it never blocks the input. When
   * empty (before the first count) it collapses to nothing via :empty. */
  .hd-sheet-filter__count {
    position: absolute;
    top: 50%;
    right: var(--hd-space-2);
    transform: translateY(-50%);
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hd-radius-full, 999px);
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    line-height: var(--hd-leading-icon);
    pointer-events: none;
  }

  .hd-sheet-filter__count:empty {
    display: none;
  }
}