/* FJN System — D225 „Zgłoś problem” (SPEC par. 5.11): the top-bar button (T/K 40 px, M 44 px icon)
   with the orange count, the report window (M sheet, T/K 520 px), the lists and the detail,
   the states, the menu rows (K under the departments, T a rail icon, M in the account block). */
.fjn-zgl__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #F5B54A; color: #15181C; font-size: 12px; font-weight: 700; line-height: 1; }
.fjn-zgl-top { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid #AEB5BE; border-radius: 6px; background: var(--fjn-surface); color: var(--fjn-text); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fjn-zgl-top:hover { background: var(--fjn-surface-2); }
.fjn-zgl-topm { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--fjn-text); cursor: pointer; }
.fjn-zgl-topm .fjn-zgl__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 11px; }
/* the window */
/* No flex on the <dialog> itself and no `flex: 1` (basis 0) in it: iOS Safari collapsed such a
   column to 0 px — only the dark backdrop was visible (4.30.1). The form scrolls its body. */
.fjn-dialog.fjn-zgl { width: min(520px, calc(100vw - 32px)); max-height: 92vh; overflow: hidden; }
.fjn-zgl__form { display: flex; flex-direction: column; max-height: calc(92vh - 2px); }
.fjn-zgl__head, .fjn-zgl__foot { flex: none; }
.fjn-zgl__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--fjn-border); }
.fjn-zgl__title { flex: 1; margin: 0; font-size: 19px; line-height: 26px; }
.fjn-zgl__mine { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; text-decoration: none; }
.fjn-zgl__x { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: none; color: var(--fjn-text-2); cursor: pointer; }
.fjn-zgl__body { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; gap: 18px; padding: 18px 20px; overflow-y: auto; }
.fjn-zgl__field { display: flex; flex-direction: column; gap: 8px; }
.fjn-zgl__label { font-size: 15px; font-weight: 700; color: var(--fjn-text); }
.fjn-zgl__req { color: #B3261E; }
.fjn-zgl__opt { font-weight: 400; color: var(--fjn-text-2); }
.fjn-zgl__text { min-height: 120px; resize: vertical; font-size: 16px; }
.fjn-zgl__text[aria-invalid="true"], .fjn-zgl__reason[aria-invalid="true"] { border: 2px solid #B3261E; }
.fjn-zgl__error { display: flex; align-items: center; gap: 6px; margin: 0; color: #B3261E; font-size: 14px; font-weight: 700; }
.fjn-zgl__error.is-plain { font-weight: 400; }
.fjn-zgl__error[hidden] { display: none; }
.fjn-zgl__hint, .fjn-zgl__lead { margin: 0; font-size: 13px; color: var(--fjn-text-2); }
.fjn-zgl__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fjn-zgl__pick[hidden], .fjn-zgl__photo[hidden] { display: none; }
.fjn-zgl__btn { position: relative; height: 56px; justify-content: center; gap: 8px; font-size: 16px; cursor: pointer; }
.fjn-zgl__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fjn-zgl__photo { display: flex; align-items: flex-start; gap: 14px; }
.fjn-zgl__thumb { width: 96px; height: 96px; flex: none; border-radius: 6px; object-fit: cover; background: var(--fjn-surface-2); }
.fjn-zgl__meta { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; font-size: 14px; }
.fjn-zgl__remove { align-self: flex-start; padding: 0; border: 0; background: none; color: #B3261E; font: inherit; font-weight: 700; cursor: pointer; }
.fjn-zgl__auto { padding: 12px 14px; border-radius: 8px; background: var(--fjn-surface-2); font-size: 14px; }
.fjn-zgl__autohead { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--fjn-text-2); }
.fjn-zgl__auto dl, .fjn-zgl-box__dl { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.fjn-zgl__auto dl > div, .fjn-zgl-box__dl > div { display: grid; grid-template-columns: 126px 1fr; gap: 10px; }
.fjn-zgl__auto dt, .fjn-zgl-box__dl dt { color: var(--fjn-text-2); }
.fjn-zgl__auto dd, .fjn-zgl-box__dl dd { margin: 0; font-weight: 700; color: var(--fjn-text); }
.fjn-zgl__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--fjn-border); background: var(--fjn-surface); }
.fjn-zgl__foot .fjn-btn { height: 56px; gap: 8px; }
.fjn-zgl__done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 24px 24px; text-align: center; }
.fjn-zgl__done b { font-size: 17px; }
.fjn-zgl__done p { margin: 4px 0 10px; color: var(--fjn-text-2); font-size: 14px; }
.fjn-zgl__ok { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #E2F2E8; color: #1B6B41; }
.fjn-zgl__donebtns { display: flex; gap: 10px; }
.fjn-zgl__donebtns .fjn-btn { height: 56px; }
.fjn-zgl--reject .fjn-zgl__body { gap: 10px; }
.fjn-zgl--reject .fjn-zgl__title { flex: none; }
@media (max-width: 767px) {
  .fjn-dialog.fjn-zgl { width: 100%; border-radius: 14px 14px 0 0; }
  .fjn-zgl__form { max-height: calc(100vh - var(--fjn-bottomnav-h) - var(--fjn-topbar-h-m) - 2px); }
  @supports (height: 100dvh) {
    .fjn-zgl__form { max-height: calc(100dvh - var(--fjn-bottomnav-h) - var(--fjn-topbar-h-m) - 2px); }
  }
  .fjn-zgl__foot { flex-direction: row; }
  .fjn-zgl__foot .fjn-btn { width: auto; flex: 1; }
  .fjn-zgl__foot .fjn-btn--primary, .fjn-zgl__foot .fjn-btn--danger { flex: 2; }
  .fjn-zgl--reject .fjn-zgl__foot { flex-direction: column-reverse; }
  .fjn-zgl--reject .fjn-zgl__foot .fjn-btn { width: 100%; }
}
/* the states */
.fjn-zgl-state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fjn-zgl-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fjn-zgl-state--new { background: #E3ECF7; color: #173F6F; }
.fjn-zgl-state--repair { background: #FCEFD6; color: #6B4100; }
.fjn-zgl-state--fixed { background: #E2F2E8; color: #1B6B41; }
.fjn-zgl-state--rejected { background: #FBE6E4; color: #B3261E; }
.fjn-zgl-state--closed { background: #ECEEF1; color: #454D57; }
/* the lists */
.fjn-zgl-page__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.fjn-zgl-page__sub { font-size: 14px; color: var(--fjn-text-2); }
.fjn-zgl-page__filters { display: flex; align-items: center; gap: 10px; }
.fjn-zgl-list { display: flex; flex-direction: column; gap: 14px; }
.fjn-zgl-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--fjn-border); border-radius: 10px; background: var(--fjn-surface); color: var(--fjn-text); font-weight: 400; text-decoration: none; }
.fjn-zgl-card:hover { border-color: var(--fjn-border-strong); text-decoration: none; color: var(--fjn-text); }
.fjn-zgl-card.is-attention { border-color: #F5B54A; }
.fjn-zgl-card__top { display: flex; align-items: center; gap: 10px; }
.fjn-zgl-card__top > b { font-size: 15px; }
.fjn-zgl-card__pic { display: flex; color: var(--fjn-text-2); }
.fjn-zgl-card__when { margin-left: auto; font-size: 14px; color: var(--fjn-text-2); white-space: nowrap; }
.fjn-zgl-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 22px; }
.fjn-zgl-card__meta { font-size: 13px; color: var(--fjn-text-2); }
.fjn-zgl-card__note { font-size: 13px; font-weight: 700; }
.fjn-zgl-card__note.is-warn { color: #8A5300; }
.fjn-zgl-card__note.is-danger { color: #B3261E; }
.fjn-zgl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; border: 1px solid var(--fjn-border); border-radius: 10px; background: var(--fjn-surface); color: var(--fjn-text-2); text-align: center; }
.fjn-zgl-empty b { font-size: 17px; color: var(--fjn-text); }
.fjn-zgl-empty > span:not(.fjn-zgl-empty__icon) { max-width: 420px; font-size: 14px; }
.fjn-zgl-empty__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fjn-surface-2); color: var(--fjn-text); }
.fjn-zgl-empty__btn { height: 56px; }
/* the detail */
.fjn-zgl-back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; text-decoration: none; }
.fjn-zgl-detail__head { display: flex; align-items: center; gap: 12px; }
.fjn-zgl-detail__no { margin: 0; font-size: 24px; }
.fjn-zgl-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 400; line-height: 21px; }
.fjn-zgl-banner > svg { flex: none; margin-top: 1px; }
.fjn-zgl-banner.is-ok { background: #E2F2E8; color: #1B6B41; }
.fjn-zgl-banner.is-danger { background: #FBE6E4; color: #8C1D18; }
.fjn-zgl-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 472px); gap: 14px; align-items: start; }
.fjn-zgl-detail__main, .fjn-zgl-detail__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fjn-zgl-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--fjn-border); border-radius: 10px; background: var(--fjn-surface); }
.fjn-zgl-box h2 { margin: 0; font-size: 16px; }
.fjn-zgl-box__text { margin: 0; font-size: 15px; line-height: 23px; }
.fjn-zgl-box__photo img { display: block; max-width: 322px; max-height: 242px; border: 1px solid var(--fjn-border); border-radius: 6px; }
.fjn-zgl-box__none, .fjn-zgl-box__lead, .fjn-zgl-box__note { margin: 0; font-size: 13px; color: var(--fjn-text-2); }
.fjn-zgl-box__dl { gap: 10px; font-size: 15px; }
.fjn-zgl-act__btns { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.fjn-zgl-act__btns .fjn-btn { height: 56px; justify-content: center; font-size: 16px; }
.fjn-zgl-act__btns .fjn-btn[disabled] { background: #E1E4E8; border-color: #E1E4E8; color: #8A929C; cursor: not-allowed; }
.fjn-zgl-history { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.fjn-zgl-history li { display: grid; grid-template-columns: 106px 1fr; gap: 8px; }
.fjn-zgl-history .fjn-mono { white-space: nowrap; }
.fjn-zgl-history .fjn-mono { color: var(--fjn-text-2); }
@media (max-width: 1023px) { .fjn-zgl-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 376px); } }
@media (max-width: 767px) {
  .fjn-zgl-detail { grid-template-columns: 1fr; }
  .fjn-zgl-detail__side { display: contents; }
  .fjn-zgl-act { order: -1; }  /* M: the action box above the description */
  .fjn-zgl-detail__main { display: contents; }
  .fjn-zgl-card__top { flex-wrap: wrap; }
}
/* the menu: K under the departments, T a rail icon with the count, M in the account block */
.fjn-nav--mine { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fjn-nav-divider); }
.fjn-nav__badge { display: none; }
.fjn-navdrawer__account .fjn-nav__note { margin-left: auto; }
@media (max-width: 767px) { .fjn-navdrawer .fjn-nav--mine { display: none; } }
@media (max-width: 1279px) and (min-width: 768px) {
  .fjn-sidebar .fjn-nav--mine { margin-top: 0; padding-top: 0; border-top: 0; }
  .fjn-sidebar .fjn-nav__head { position: relative; }
  .fjn-sidebar .fjn-nav__badge { display: flex; position: absolute; top: 4px; right: 14px; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #F5B54A; color: #15181C; font-size: 11px; font-weight: 700; }
}