/* dflex_stream.css - strumien zdarzen (Przeglad projektu, Moja strona, Przeglad wszystkich projektow).
   Plugin: redmine_dflex. Markup: app/views/dflex_stream/*, logika: dflex_stream.js.
   Wyglad: kierunek A z makiety (karty zwiniete do 3 wierszy) + elementy B (pigulki filtrow, typu i statusu, os czasu
   zdarzen, przyciski akcji). Od TASK-010 #7020 (AC-029) kazda karta jest osobna, zaokraglona powierzchnia z odstepem
   w pionie i delikatnym przyblizeniem przy najechaniu, fokusie i kliknieciu.
   Pasek z lewej karty w kolorze statusu (--dfx-rail ustawia JS z mapy STATUS_COLORS).
   Specyficznosc #content + !important, inaczej wygrywa Opale. */

#content .dfx-stream {
  max-width: 1000px !important;
  font-size: 14px !important;
  color: #18201B !important;
}

/* -- Podprojekty (zwarta nawigacja zamiast bloku rdzenia) -- */
#content .dfx-stream-subprojects {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
  max-width: 1000px !important;
}
#content .dfx-stream-subprojects-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #9AA39D !important;
  margin-right: 4px !important;
}
#content a.dfx-stream-subproject {
  font-size: 0.8rem !important;
  padding: 3px 11px !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #3D4741 !important;
  text-decoration: none !important;
}
#content a.dfx-stream-subproject:hover { border-color: #2D6A4F !important; color: #2D6A4F !important; }

/* -- Pasek: pigulki filtrow + szukanie -- */
#content .dfx-stream-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
#content .dfx-stream-filters { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#content .dfx-stream-filter {
  font: inherit !important;
  font-size: 0.82rem !important;
  padding: 5px 13px !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #66706A !important;
  cursor: pointer !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
}
#content .dfx-stream-filter:hover { color: #18201B !important; border-color: #C9D2CC !important; }
#content .dfx-stream-filter.is-active { background: #2D6A4F !important; border-color: #2D6A4F !important; color: #fff !important; }
#content .dfx-stream-filter:focus-visible,
#content .dfx-stream-act:focus-visible,
#content .dfx-stream-toggle:focus-visible,
#content .dfx-stream-expand-all:focus-visible { outline: 2px solid #2D6A4F !important; outline-offset: 2px !important; }
#content .dfx-stream-search {
  min-width: 220px !important;
  font-size: 0.85rem !important;
  padding: 6px 14px !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#content .dfx-stream-options {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 10px !important;
  font-size: 0.8rem !important;
  color: #66706A !important;
}
#content .dfx-stream-option { display: inline-flex !important; align-items: center !important; gap: 5px !important; cursor: pointer !important; }
/* Chip rodzajow notatek i chip projektow (komponent .dfx-chip-filter z dflex_overrides.css, TASK-007 #7012, TASK-009 #7018).
   Okno chipa ma position fixed liczone od chipa, wiec strumien nie rezerwuje juz wysokosci pod okno. */
#content .dfx-stream-note-filter,
#content .dfx-stream-project-filter { display: inline-flex !important; align-items: center !important; }
#content .dfx-stream-note-filter[hidden],
#content .dfx-stream-project-filter[hidden] { display: none !important; }
#content .dfx-stream-expand-all {
  margin-left: auto !important;
  font: inherit !important;
  font-size: 0.8rem !important;
  border: none !important;
  background: none !important;
  color: #2D6A4F !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* -- Lista: osobne karty z odstepem w pionie (bez overflow:hidden, zeby przyblizenie i cien karty nie byly uciete) -- */
#content .dfx-stream-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
#content .dfx-stream-list:empty { display: none !important; }

/* -- Przypieta ostatnia wersja (pierwszy wiersz listy) -- */
#content .dfx-stream-pin {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 12px !important;
  padding: 10px 16px !important;
  background: #E7F2EC !important;
  border: 1px solid #D3E6DB !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
}
#content .dfx-stream-pin-label { color: #3D4741 !important; }
#content .dfx-stream-pin-title { font-weight: 650 !important; color: #2D6A4F !important; }
#content .dfx-stream-pin-date { color: #66706A !important; }
#content a.dfx-stream-pin-link { margin-left: auto !important; font-weight: 600 !important; color: #2D6A4F !important; text-decoration: none !important; }
#content a.dfx-stream-pin-link:hover { text-decoration: underline !important; }

/* -- Karta: osobna powierzchnia, pasek statusu z lewej (inset), cien spoczynkowy -- */
#content .dfx-stream-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 12px 16px 12px 20px !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: inset 4px 0 0 var(--dfx-rail, transparent), 0 1px 2px rgba(24, 32, 27, 0.05) !important;
  cursor: pointer !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}
/* Przyblizenie: najechanie, fokus wewnatrz karty, klikniecie. Bez skalowania karty z otwartym panelem (formularz
   odpowiedzi): transform tworzy blok zawierajacy dla position:fixed, a popup opisu formularza (.dfx-desc-modal) jest
   jej potomkiem. Okna chipow sa poza kartami (.dfx-stream-options), wiec transform ich nie dotyczy. */
#content .dfx-stream-card:hover,
#content .dfx-stream-card:focus-within,
#content .dfx-stream-card:active {
  border-color: #C9D2CC !important;
  box-shadow: inset 4px 0 0 var(--dfx-rail, transparent), 0 6px 18px rgba(24, 32, 27, 0.10) !important;
}
#content .dfx-stream-card:not(:has(.dfx-stream-panel:not([hidden]))):hover,
#content .dfx-stream-card:not(:has(.dfx-stream-panel:not([hidden]))):focus-within { transform: scale(1.006) !important; }
#content .dfx-stream-card:not(:has(.dfx-stream-panel:not([hidden]))):active { transform: scale(1.003) !important; }
#content .dfx-stream-card-open { cursor: default !important; }

/* Wiersz 1: przelacznik, typ, temat, numer, projekt, status */
#content .dfx-stream-l1 { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
#content .dfx-stream-toggle {
  flex: none !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 5px !important;
  background: none !important;
  color: #9AA39D !important;
  font-size: 16px !important;
  line-height: 18px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 0.15s ease !important;
}
#content .dfx-stream-toggle:hover { background: #F1F4F2 !important; color: #18201B !important; }
#content .dfx-stream-card-open .dfx-stream-toggle { transform: rotate(90deg) !important; }
#content .dfx-stream-l1 .dfx-tracker-badge,
#content .dfx-stream-l1 .dfx-status-badge,
#content .dfx-stream-kind {
  flex: none !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  white-space: nowrap !important;
}
#content .dfx-stream-kind { background: #E7F2EC !important; color: #2D6A4F !important; }
#content .dfx-stream-l1 .dfx-status-badge { border-radius: 999px !important; }
#content a.dfx-stream-title {
  font-weight: 600 !important;
  color: #18201B !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
#content a.dfx-stream-title:hover { color: #2D6A4F !important; text-decoration: underline !important; }
#content a.dfx-stream-key {
  flex: none !important;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  font-size: 0.75rem !important;
  color: #9AA39D !important;
  text-decoration: none !important;
}
#content a.dfx-stream-key:hover { color: #2D6A4F !important; }
#content .dfx-stream-project {
  flex: none !important;
  font-size: 0.75rem !important;
  color: #66706A !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
}
#content .dfx-stream-state { margin-left: auto !important; flex: none !important; }

/* Awatar z inicjalami */
#content .dfx-stream-av {
  flex: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
}

/* Wiersz 2: ostatnie zdarzenie w jednej linii (tylko zwinieta karta) */
#content .dfx-stream-l2 { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; padding-left: 28px !important; font-size: 0.85rem !important; }
#content .dfx-stream-l2-text { color: #3D4741 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; }
#content .dfx-stream-l2-when { flex: none !important; color: #9AA39D !important; font-size: 0.78rem !important; white-space: nowrap !important; }
#content .dfx-stream-l2-when abbr { text-decoration: none !important; border: none !important; cursor: inherit !important; }
#content .dfx-stream-l2-more { flex: none !important; font-size: 0.72rem !important; color: #66706A !important; background: #F1F4F2 !important; border-radius: 999px !important; padding: 0 7px !important; }

/* Rozwiniecie: os czasu zdarzen */
#content .dfx-stream-full { display: none !important; padding-left: 28px !important; flex-direction: column !important; gap: 10px !important; }
#content .dfx-stream-card-open .dfx-stream-full { display: flex !important; }
#content .dfx-stream-card-open .dfx-stream-l2 { display: none !important; }
#content ol.dfx-stream-events { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
#content .dfx-stream-event { display: grid !important; grid-template-columns: 22px 1fr !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; }
#content .dfx-stream-event-body { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
#content .dfx-stream-event-head { font-size: 0.8rem !important; color: #66706A !important; }
#content .dfx-stream-who { color: #18201B !important; font-weight: 600 !important; }
#content .dfx-stream-event-head abbr { text-decoration: none !important; border: none !important; }
#content a.dfx-stream-when { color: #66706A !important; text-decoration: none !important; }
#content a.dfx-stream-when:hover { color: #2D6A4F !important; text-decoration: underline !important; }
#content .dfx-stream-verb { color: #3D4741 !important; }
#content .dfx-stream-private { font-size: 0.7rem !important; margin-left: 6px !important; padding: 0 6px !important; border-radius: 4px !important; background: #FEF3C7 !important; color: #92400E !important; }
#content .dfx-stream-note {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: #18201B !important;
  background: #F4F6F5 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  overflow-wrap: anywhere !important;
}
#content .dfx-stream-note p:first-child { margin-top: 0 !important; }
#content .dfx-stream-note p:last-child { margin-bottom: 0 !important; }
/* Obrazki w notatkach jako podglad (klik otwiera oryginal przez link Redmine) */
#content .dfx-stream-note img { max-height: 220px !important; max-width: 100% !important; width: auto !important; height: auto !important; }
#content .dfx-stream-note-collapsed {
  max-height: 180px !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent) !important;
  mask-image: linear-gradient(to bottom, #000 70%, transparent) !important;
}
#content .dfx-stream-changes { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#content .dfx-stream-change { font-size: 0.78rem !important; color: #3D4741 !important; background: #F4F6F5 !important; border-radius: 6px !important; padding: 2px 8px !important; }
#content .dfx-stream-expand,
#content a.dfx-stream-earlier {
  align-self: flex-start !important;
  display: inline-block !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.8rem !important;
  color: #2D6A4F !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
#content .dfx-stream-expand:hover,
#content a.dfx-stream-earlier:hover { text-decoration: underline !important; }

/* Wiersz 3: powody (tekst) + akcje (przyciski) */
#content .dfx-stream-l3 { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 10px !important; padding-left: 28px !important; }
#content .dfx-stream-reasons { display: inline-flex !important; flex-wrap: wrap !important; gap: 0 !important; font-size: 0.75rem !important; }
#content .dfx-stream-reason { color: #66706A !important; }
#content .dfx-stream-reason + .dfx-stream-reason::before { content: "·" !important; color: #B5BDB8 !important; margin: 0 6px !important; }
#content .dfx-stream-reason-mention,
#content .dfx-stream-reason-assigned,
#content .dfx-stream-reason-awaiting,
#content .dfx-stream-reason-overdue,
#content .dfx-stream-reason-urgent { color: #B45309 !important; font-weight: 600 !important; }
#content .dfx-stream-actions { margin-left: auto !important; display: inline-flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#content .dfx-stream-act {
  font: inherit !important;
  font-size: 0.78rem !important;
  padding: 3px 11px !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #3D4741 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
#content .dfx-stream-act:hover { border-color: #C9D2CC !important; color: #18201B !important; }
#content .dfx-stream-act-primary { background: #18201B !important; border-color: #18201B !important; color: #fff !important; }
#content .dfx-stream-act-primary:hover { background: #2D6A4F !important; border-color: #2D6A4F !important; color: #fff !important; }

/* Panel pod karta (zmiana statusu, formularz odpowiedzi) */
#content .dfx-stream-panel { padding-left: 28px !important; margin-top: 6px !important; cursor: default !important; }
#content .dfx-stream-panel[hidden] { display: none !important; }
#content .dfx-stream-msg { padding-left: 28px !important; font-size: 0.8rem !important; color: #2D6A4F !important; }
#content .dfx-stream-panel .dfx-stream-msg { padding-left: 0 !important; }
#content .dfx-stream-msg-error,
#content .dfx-stream-form-error { color: #991B1B !important; }
#content .dfx-stream-form-error { margin-bottom: 10px !important; padding: 8px 12px !important; border-radius: 6px !important; background: #FEE2E2 !important; font-size: 0.85rem !important; }
#content .dfx-stream-status-form { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
#content .dfx-stream-status-select { font-size: 0.85rem !important; padding: 3px 6px !important; border-radius: 6px !important; }
#content .dfx-stream-status-apply { font-size: 0.8rem !important; padding: 4px 14px !important; border: 1px solid #18201B !important; border-radius: 7px !important; background: #18201B !important; color: #fff !important; cursor: pointer !important; }
#content .dfx-stream-status-cancel { font-size: 0.8rem !important; border: none !important; background: none !important; color: #2D6A4F !important; cursor: pointer !important; box-shadow: none !important; }
#content .dfx-stream-card-read { opacity: 0.55 !important; }
#content .dfx-stream-card-leaving { opacity: 0 !important; transition: opacity 0.25s ease !important; }

/* -- Stan pusty i stopka -- */
#content .dfx-stream-empty { padding: 28px !important; color: #66706A !important; text-align: center !important; background: #fff !important; border: 1px solid #E3E8E5 !important; border-radius: 10px !important; }
#content .dfx-stream-empty strong { display: block !important; color: #18201B !important; margin-bottom: 4px !important; }
#content .dfx-stream-footer { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 10px !important; }
#content .dfx-stream-more,
#content .dfx-stream-older {
  font: inherit !important;
  font-size: 0.82rem !important;
  padding: 6px 16px !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #2D6A4F !important;
  cursor: pointer !important;
}
#content .dfx-stream-more[hidden],
#content .dfx-stream-older[hidden] { display: none !important; }
#content .dfx-stream-footer .dfx-stream-status { font-size: 0.8rem !important; color: #9AA39D !important; }

@media (max-width: 640px) {
  #content .dfx-stream-search { min-width: 0 !important; width: 100% !important; }
  #content .dfx-stream-card { padding: 10px 12px 10px 14px !important; }
  #content .dfx-stream-l2, #content .dfx-stream-l3, #content .dfx-stream-full, #content .dfx-stream-panel { padding-left: 0 !important; }
  #content .dfx-stream-project { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #content .dfx-stream-card, #content .dfx-stream-card-leaving, #content .dfx-stream-toggle { transition: none !important; }
  /* Bez ruchu: przyblizenie tylko cieniem i obramowaniem */
  #content .dfx-stream-card:not(:has(.dfx-stream-panel:not([hidden]))):hover,
  #content .dfx-stream-card:not(:has(.dfx-stream-panel:not([hidden]))):focus-within,
  #content .dfx-stream-card:not(:has(.dfx-stream-panel:not([hidden]))):active { transform: none !important; }
}