/* Minimalna wysokość widoku (dla starszych układów) */
#catview-app { min-height: calc(100vh - 120px); }

/* Lista po lewej */
#catview-list .list-group-item { cursor: pointer; border-left: 3px solid transparent; }

/* Aktywna pozycja – bez bielenia tekstu, pogrubienie i border */
#catview-list .list-group-item.active {
  background: var(--bs-light) !important;
  color: inherit !important;
  border-left: 3px solid var(--bs-primary);
  font-weight: 600;
}

/* Jedna / dwie linie z elipsą (używane w SINGLE po lewej) */
.truncate-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.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 */
#catview-open { white-space: normal; word-break: break-word; }

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

/* Tryb ARCHIVE – pełne streszczenia w liście */
#catview-app[data-mode="archive"] .sum-full { white-space: normal; }

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

/* --- Desktop: dwie niezależne strefy scrollu i pasek między nimi --- */
@media (min-width: 992px){
  /* rząd bez zawijania i ze stretch po wysokości */
  #catview-app{
    display:flex;
    flex-wrap:nowrap;        /* nic nie zawija się pod spód */
    align-items:stretch;     /* lewa, divider i prawa mają tę samą wysokość */
    height: 100vh;           /* pełna wysokość okna dla niezależnych scrolli */
  }

  /* nadpisujemy szerokości siatki Bootstrapa – steruje flex */
  #catview-list-wrap,
  #catview-detail-wrap{
    width:auto !important;
    max-width:none !important;
    min-width:0;             /* zapobiega rozpychaniu prawej kolumny */
  }

  /* LEWA kolumna = kolumna flex (nagłówek + LISTA (scroll) + loader) */
  #catview-list-wrap{
    flex:0 0 35%;
    min-width:260px;
    display:flex;
    flex-direction:column;
    overflow:hidden;         /* ukryj nadmiar, scroll jest tylko w #catview-list */
  }

  /* Sama lista ma WŁASNY scroll i wypełnia wysokość kolumny */
  #catview-list{
    flex:1 1 auto;
    min-height:0;            /* <- klucz, by scroll działał wewnątrz listy */
    overflow:auto;           /* <- przewijamy tylko listę */
  }

  /* PRAWY panel – jak „iframe”: nagłówek na górze + body z własnym scrollem */
  #catview-detail-wrap{
    flex:1 1 65%;
    display:flex;
    flex-direction:column;
    overflow:hidden;         /* scroll tylko w .detail-body */
  }
  #catview-detail-wrap .detail-body{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;           /* niezależny scroll w treści po prawej */
  }

  /* Pasek do przeciągania – pełna wysokość */
  #catview-divider{ flex:0 0 6px; align-self:stretch; }
}

/* Pasek do przeciągania (desktop) */
#catview-divider{
  width:6px;
  cursor:col-resize;
  background:rgba(0,0,0,.06);
}
#catview-divider:hover,
body.resizing #catview-divider{
  background:rgba(0,0,0,.15);
}

/* --- Mobile: klasyczny stack --- */
@media (max-width: 991.98px){
  #catview-app{ display:block; height:auto; }
  #catview-divider{ display:none; }

  /* przełączanie paneli w mobile */
  #catview-detail-wrap { display:none; }
  #catview-detail-wrap.open { display:block; }
  #catview-list-wrap.hidden { display:none; }

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



#catview-list-wrap .sticky-top,
#catview-detail-wrap .sticky-top {
  z-index: 900; /* mniej niż dropdown (1000), więcej niż tło */
}