/* Minimalna wysokość */
#urlcat-app { min-height: calc(100vh - 120px); }

/* Lista po lewej */
#urlcat-list .list-group-item { cursor: pointer; border-left: 3px solid transparent; }
#urlcat-list .list-group-item.active {
  background: var(--bs-light) !important;
  color: inherit !important;
  border-left: 3px solid var(--bs-primary);
  font-weight: 600;
}

/* Elipsy – wyłącznie w obrębie URLCAT */
#urlcat-app .truncate-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
#urlcat-app .truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Przycisk „Otwórz stronę” – może zawijać długi URL */
#urlcat-open { white-space: normal; word-break: break-word; }

/* Tryb SINGLE – ograniczamy linie po lewej */
#urlcat-app[data-mode="single"] .truncate-1,
#urlcat-app[data-mode="single"] .truncate-2 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
#urlcat-app[data-mode="single"] .truncate-1 { -webkit-line-clamp:1; }
#urlcat-app[data-mode="single"] .truncate-2 { -webkit-line-clamp:2; }

/* ARCHIVE – pełne streszczenia (gdybyś użył) */
#urlcat-app[data-mode="archive"] .sum-full { white-space: normal; }

/* Summary po prawej – pogrubione */
#urlcat-sum { font-weight: 600; }

/* Desktop: dwie niezależne strefy scrollu i pasek */
@media (min-width: 992px){
  #urlcat-app{
    display:flex; flex-wrap:nowrap; align-items:stretch; height:100vh;
  }
  #urlcat-list-wrap, #urlcat-detail-wrap{ width:auto !important; max-width:none !important; min-width:0; }

  /* LEWA kolumna */
  #urlcat-list-wrap{
    flex:0 0 35%; min-width:260px; display:flex; flex-direction:column; overflow:hidden;
  }

  /* LISTA – tu musi być scroll */
  #urlcat-list{
    flex:1 1 auto;
    min-height:0;
    overflow:auto !important;          /* <- WYMUSZAMY scroll listy */
    -webkit-overflow-scrolling: touch;
  }

  /* PRAWY panel */
  #urlcat-detail-wrap{ flex:1 1 65%; display:flex; flex-direction:column; overflow:hidden; }
  #urlcat-detail-wrap .detail-body{ flex:1 1 auto; min-height:0; overflow:auto; }

  /* Pasek do przeciągania */
  #urlcat-divider{ flex:0 0 6px; align-self:stretch; }
}

#urlcat-divider{ width:6px; cursor:col-resize; background:rgba(0,0,0,.06); }
#urlcat-divider:hover, body.resizing #urlcat-divider{ background:rgba(0,0,0,.15); }

/* Mobile: klasyczny stack */
@media (max-width: 991.98px){
  #urlcat-app{ display:block; height:auto; }
  #urlcat-divider{ display:none; }
  #urlcat-detail-wrap { display:none; }
  #urlcat-detail-wrap.open { display:block; }
  #urlcat-list-wrap.hidden { display:none; }

  #urlcat-list-wrap, #urlcat-detail-wrap{
    flex: initial !important; width: auto !important; max-width: none !important;
  }
}

/* Sticky i dropdowny tylko w obrębie URLCAT */
#urlcat-list-wrap .sticky-top { z-index: 1; }
#urlcat-list-wrap .dropdown { position: relative; z-index: 2001; }
#urlcat-list-wrap .dropdown-menu { z-index: 2002; }

/* NIE dotykamy overflow na kontenerze listy ani na .list-group!
   Jeśli coś ma wychodzić poza item (np. dropdown), ustaw widoczność tylko na elementach potomnych: */
#urlcat-list-wrap .list-group-item,
#urlcat-list-wrap .card,
#urlcat-list-wrap .col-12 {
  overflow: visible;
}

/* (opcjonalnie) Safari – jawnie oś Y */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 992px){
    #urlcat-list { overflow-y:auto !important; overflow-x:hidden; }
  }
}