/* FJN System — E1-20 order list and photo preview (block 4). Tokens from fjn-tokens.css. */

.fjn-olist { max-width: 1320px; }
.fjn-olist__table td { height: 56px; }
.fjn-olist__sorted { display: inline-flex; align-items: center; gap: 4px; }
.fjn-olist__col-photo { width: 66px; }
.fjn-olist__col-route { white-space: normal; }
.fjn-olist__number { font-family: var(--fjn-font-mono); font-size: 14px; font-weight: var(--fjn-fw-bold); white-space: nowrap; }
.fjn-olist__client { min-width: 0; max-width: 300px; }
.fjn-olist__name { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fjn-olist__ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fjn-olist__due { font-size: 14px; white-space: nowrap; }
.fjn-olist__late .fjn-olist__due, .fjn-olist__card--late .fjn-olist__due { color: var(--fjn-danger-700); font-weight: var(--fjn-fw-bold); }
.fjn-olist__late-note { display: block; font-size: 12px; font-weight: var(--fjn-fw-bold); color: var(--fjn-danger-700); }
.fjn-olist__table tbody tr.fjn-olist__late { background: #FFF7F6; }
.fjn-olist__table tbody tr.fjn-olist__late:hover { background: var(--fjn-brand-50); }
.fjn-olist__urgent { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fjn-fw-bold); color: var(--fjn-danger-700); }
.fjn-olist__route { font-size: 13px; color: var(--fjn-text-2); }

/* Photo thumbnail with the count (above the stretched row link) */
.fjn-olist__thumb {
  position: relative; z-index: 1; display: block; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--fjn-border); border-radius: var(--fjn-r-md); cursor: zoom-in;
  background: repeating-linear-gradient(135deg, #EEF0F2 0 5px, #E1E4E8 5px 10px);
}
.fjn-olist__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.fjn-olist__thumb:hover { box-shadow: 0 0 0 2px var(--fjn-brand-600); }
.fjn-olist__thumb:focus-visible { outline: none; box-shadow: var(--fjn-focus-btn); }
.fjn-olist__thumb-count {
  position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  border: 2px solid var(--fjn-surface); border-radius: var(--fjn-r-full); background: var(--fjn-text); color: var(--fjn-text-inverse);
  font-size: 10px; font-weight: var(--fjn-fw-bold); line-height: 16px; text-align: center;
}
.fjn-olist__nophoto {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box;
  border: 1.5px dashed #AEB5BE; border-radius: var(--fjn-r-md); color: var(--fjn-text-disabled);
}

/* Status chips as designed: realisation with a dot, payment with a ring */
.fjn-olist__chip--new { background: var(--fjn-neutral-100); color: var(--fjn-neutral-700); }
.fjn-olist__chip--progress { background: var(--fjn-info-100); color: var(--fjn-info-700); }
.fjn-olist__chip--qc { background: var(--fjn-brand-100); color: var(--fjn-brand-700); }
.fjn-olist__chip--ready { background: var(--fjn-success-100); color: var(--fjn-success-700); }
.fjn-olist__chip--released { background: var(--fjn-neutral-100); color: var(--fjn-text); }
.fjn-olist__chip--shortage { background: var(--fjn-danger-100); color: var(--fjn-danger-700); }
.fjn-olist__chip--waiting { background: var(--fjn-warning-100); color: var(--fjn-warning-700); }
.fjn-olist__states { white-space: nowrap; }
/* The draft marker goes under the status chip, so the table keeps its width */
.fjn-olist__states .fjn-olist__intake { display: flex; width: max-content; margin-top: 4px; }
/* D118 pt 5: „Przyjęcie niedokończone” opens the unfinished intake (above the stretched row link) */
.fjn-olist__intake { position: relative; z-index: 1; text-decoration: none; }
.fjn-olist__intake:hover { color: var(--fjn-warning-700); text-decoration: underline; }
.fjn-olist__intake:focus-visible { outline: none; box-shadow: var(--fjn-focus-btn); }
.fjn-olist__chip--unpaid { background: var(--fjn-warning-100); color: var(--fjn-warning-700); }
.fjn-olist__chip--deposit { background: var(--fjn-info-100); color: var(--fjn-info-700); }
.fjn-olist__chip--paid { background: var(--fjn-success-100); color: var(--fjn-success-700); }
.fjn-olist__chip--overdue { background: var(--fjn-danger-100); color: var(--fjn-danger-700); }

/* Filter set (D118 design): the text filter gets the blue border like an active dropdown */
.fjn-olist__toolbar .fjn-input-group:has(.fjn-input-group__control:not(:placeholder-shown)) { border-color: var(--fjn-brand-600); }
.fjn-olist__clear:empty { display: none; }

/* Filter without results (D118, E1-20_{M,T}_brak-wynikow-filtra) */
.fjn-olist__empty { gap: 10px; padding: 40px 24px; border-radius: 10px; }
.fjn-olist__empty .fjn-olist__empty-icon { width: 52px; height: 52px; border-radius: 12px; background: #EEF0F2; color: var(--fjn-text-2); }
.fjn-olist__empty-title { margin: 0; font-size: 18px; line-height: 24px; }
.fjn-olist__empty-text { margin: 0; max-width: 460px; font-size: 15px; line-height: 22px; color: var(--fjn-text-2); }
.fjn-olist__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* Phone cards */
.fjn-olist__count-m { margin: 0; font-size: 14px; }
.fjn-olist__card { gap: 8px; }
.fjn-olist__card--late { border-color: #E8B4AF; }
.fjn-olist__card-head { align-items: center; }
.fjn-olist__card-id { display: flex; align-items: center; gap: 10px; }
.fjn-olist__card .fjn-olist__thumb { width: 48px; height: 48px; flex: none; }
.fjn-olist__card .fjn-olist__number { font-size: 15px; }
.fjn-olist__card-who { display: flex; flex-direction: column; gap: 2px; }
.fjn-olist__card-client { font-size: 16px; line-height: 22px; }
.fjn-olist__card-chips { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1279px) {
  .fjn-olist .fjn-table-wrap { overflow-x: auto; }
}
@media (max-width: 767px) {
  .fjn-olist__toolbar .fjn-filter { flex: 0 0 auto; }
}

/* Photo preview (lightbox): dark full screen, arrows 48 px, thumbnails; Esc closes */
/* Covers the content area only: the top bar and the menu stay visible (E1-20 design) */
.fjn-olightbox, .fjn-olightbox:modal {
  position: fixed; inset: var(--fjn-topbar-h) 0 0 var(--fjn-sidebar-w); width: auto; height: auto;
  max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0;
  background: rgba(10, 12, 14, .9); color: var(--fjn-text-inverse); box-shadow: none;
}
.fjn-olightbox::backdrop { background: transparent; }
@media (max-width: 1279px) {
  .fjn-olightbox, .fjn-olightbox:modal { left: var(--fjn-rail-w); }
}
.fjn-olightbox__inner { display: flex; flex-direction: column; height: 100%; }
.fjn-olightbox__head { flex: none; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 20px; }
.fjn-olightbox__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fjn-olightbox__title b { font-size: 15px; white-space: nowrap; }
.fjn-olightbox__title span { font-size: 13px; color: #C9CED5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fjn-olightbox__close, .fjn-olightbox__nav {
  display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px;
  border: 0; background: rgba(255, 255, 255, .14); color: var(--fjn-text-inverse); cursor: pointer;
}
.fjn-olightbox__close { border-radius: 8px; }
.fjn-olightbox__nav { border-radius: 50%; }
.fjn-olightbox__close:hover, .fjn-olightbox__nav:hover { background: rgba(255, 255, 255, .26); color: var(--fjn-text-inverse); }
.fjn-olightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; }
.fjn-olightbox__photo {
  flex: 1; min-width: 0; max-width: 960px; height: 100%; max-height: 620px; object-fit: contain; border-radius: 8px;
  background: repeating-linear-gradient(135deg, #2A3038 0 14px, #323943 14px 28px);
}
.fjn-olightbox__thumbs { flex: none; display: flex; gap: 8px; justify-content: center; padding: 14px 12px 18px; overflow-x: auto; }
.fjn-olightbox__thumb { flex: none; width: 56px; height: 42px; border-radius: 4px; overflow: hidden; background: #3A414B; }
.fjn-olightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fjn-olightbox__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--fjn-text-inverse); }
@media (max-width: 767px) {
  .fjn-olightbox, .fjn-olightbox:modal, .fjn-app-page .fjn-olightbox:modal {
    inset: var(--fjn-topbar-h-m) 0 var(--fjn-bottomnav-h) 0; width: auto; height: auto; max-height: none; margin: 0; border-radius: 0;
  }
  .fjn-olightbox__stage { position: relative; padding: 0; }
  .fjn-olightbox__photo { max-width: 246px; }
  .fjn-olightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .fjn-olightbox__nav[data-fjn-lightbox-prev] { left: 12px; }
  .fjn-olightbox__nav[data-fjn-lightbox-next] { right: 12px; }
  .fjn-olightbox__thumbs { justify-content: flex-start; padding: 14px 6px 18px; }
}