/* =============================================================================
   Iktató — ÁLLAPOTJELZÉSEK: iratállapot-jelvény és határidő-pötty.
   Átvéve a far360 badges.css-éből: a far360 állapotjelvény-tokenjeit (--f-badge-*,
   tokens.css) az IKTATÁSI ÁLLAPOTOKRA képezzük le.

   Feliratuk DM Mono kisnagybetűs. A formaszínek (coral, mustard, mint, sky) ITT — és
   csak itt — színkódolnak; mindegyik alatt SÖTÉT felirat áll, fehér SOHA.

   AKADÁLYMENTESSÉG: a szín SOHA nem az egyetlen jelzés. A jelvény mindig kiírja az
   állapot nevét; a sztornózott áthúzott, az irattárban lévő szaggatott szegélyű, a
   határidő-pötty jele pedig alakban is különbözik (a lejárt négyzetes, nem kerek).
   Hogy melyik állapot melyik tokenhármast kapja:
     érkeztetve, irattárban .... szürke   (--f-badge-generalva-*)
     iktatva, szignálva ........ kék      (--f-badge-far-*)
     ügyintézés alatt, határidő közel ... borostyán (--f-badge-var-*)
     határidő lejárt, sztornózva ....... piros (--f-badge-lejart-*)
     expediálva ................ zöld     (--f-badge-alairva-*)
   ============================================================================= */
.f-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.32em 0.85em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.f-badge--erkeztetve,
.f-badge--irattarban {
  background: var(--f-badge-generalva-bg);
  color: var(--f-badge-generalva-fg);
  border-color: rgba(107, 114, 128, 0.22);
}
.f-badge--irattarban { border-style: dashed; border-color: var(--f-badge-generalva-fg); }

.f-badge--iktatva,
.f-badge--szignalva {
  background: var(--f-badge-far-bg);
  color: var(--f-badge-far-fg);
  border-color: rgba(29, 78, 216, 0.25);
}

.f-badge--ugyintezes,
.f-badge--hatarido-kozel {
  background: var(--f-badge-var-bg);
  color: var(--f-badge-var-fg);
  border-color: rgba(180, 83, 9, 0.25);
}

.f-badge--hatarido-lejart,
.f-badge--sztornozva {
  background: var(--f-badge-lejart-bg);
  color: var(--f-badge-lejart-fg);
  border-color: rgba(138, 36, 24, 0.28);
}
.f-badge--sztornozva { text-decoration: line-through; }

.f-badge--expedialva {
  background: var(--f-badge-alairva-bg);
  color: var(--f-badge-alairva-fg);
  border-color: rgba(21, 128, 61, 0.25);
}

/* Jelvény közvetlenül egy felirat MELLETT (nem önálló sorban). */
.f-badge--mellette { margin-left: 0.4rem; }

/* -----------------------------------------------------------------------------
   Határidő-pöttyök (zöld = rendben, sárga = közeleg, piros = lejárt, szürke = nincs)
   ----------------------------------------------------------------------------- */
.f-potty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1;
  cursor: help;
}
.f-potty--zold  { background: var(--f-badge-alairva-bg); color: var(--f-badge-alairva-fg); border-color: var(--f-badge-alairva-fg); }
.f-potty--sarga { background: var(--f-badge-var-bg); color: var(--f-badge-var-fg); border-color: var(--f-badge-var-fg); }
/* PIROS: a szín MELLETT az alak is jelez: lekerekített négyzet, nem kör. */
.f-potty--piros { background: var(--f-badge-lejart-bg); color: var(--f-badge-lejart-fg); border-color: var(--f-badge-lejart-fg); border-radius: 5px; }
.f-potty--szurke { background: var(--f-badge-generalva-bg); color: var(--f-badge-generalva-fg); border-color: var(--f-badge-generalva-fg); border-style: dashed; }

.f-pottysor {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Telefonon a jelvény funkcionális szöveg (állapotot közöl), nem dekoráció: 11,2 px
   helyett 12,8 px. Asztali méret változatlan. */
@media (max-width: 700px) {
  .f-badge { font-size: 0.8rem; }
}