/*
  htmx allapotok - ADR-017.

  A htmx reszleges frissiteseknel harom osztalyt tesz ki automatikusan:
    htmx-request     fut a keres
    htmx-swapping    a regi tartalom cserere var
    htmx-settling    az uj tartalom bekerult, de meg nem "ult le"

  Ezek keresztmetszetiek. Ha nincsenek a design systemben, minden fejleszto
  kitalalja a sajat loading allapotat - pedig a Loading kotelezo komponens-state
  (docs/design/components.md).

  CSAK szemantikus token (DS-BRAND-002).
*/

@layer components {
    /*
      Alapelv: a folyamatban levo keres NE ugraljon layoutot.
      Az opacity valtozas nem mozdit el semmit; a spinner igen, ezert az
      csak ott jelenjen meg, ahol szandekosan helyet hagytunk neki.
    */
    .htmx-request {
        opacity: 0.6;
        transition: opacity var(--motion-fast) ease-in-out;
    }

    /*
      Interaktiv elem kozben ne legyen ujra kattinthato.
      Ez nem helyettesiti a szerveroldali idempotenciat (BR-BKG-040):
      a dupla kattintas elleni valodi vedelem a backenden van.
    */
    button.htmx-request,
    .htmx-request button,
    .htmx-request input,
    .htmx-request select {
        pointer-events: none;
    }

    /*
      Indikator: alapertelmezetten rejtett, a keres alatt lathato.
      Hasznalat: hx-indicator="#foglalas-indikator"
    */
    .htmx-indicator {
        opacity: 0;
        transition: opacity var(--motion-fast) ease-in-out;
    }

    .htmx-request .htmx-indicator,
    .htmx-indicator.htmx-request {
        opacity: 1;
    }

    /*
      A csere pillanataban ne villanjon a tartalom.
      Reduced motion eseten a reset reteg amugy is kikapcsolja az atmenetet.
    */
    .htmx-swapping {
        opacity: 0;
        transition: opacity var(--motion-fast) ease-out;
    }

    .htmx-settling {
        opacity: 1;
    }
}