/* ===========================================================================
   Browse — flat category list (browse/show, non-tree branch).
   Simple vertical "facet under facet" list adapted from the facet sidebar
   look, tuned for a full-width page. Scoped under .browse-list so it never
   collides with the index page's pohrana__objekta boxes.
   =========================================================================== */

.browse-list {
    --browse-red: #961300;
    --browse-red-50: #fef2f2;
    --browse-red-100: #fee2e2;
    --browse-red-200: #fecaca;
    --browse-gray-200: #e5e5e5;
    --browse-text: #404040;

    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--browse-gray-200);
}

.browse-list__item {
    border-bottom: 1px solid var(--browse-gray-200);
}

/* Full-width row: label left, count pill right. */
.browse-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--browse-text);
    text-decoration: none;
    transition: background-color .15s ease;
}

.browse-list__link:hover,
.browse-list__link:focus-visible {
    background: var(--browse-red-50);
    color: var(--browse-red);
    outline: none;
}

.browse-list__label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: .95rem;
}

/* Count pill mirrors the sidebar facet count. */
.browse-list__count {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .75rem;
    color: var(--browse-red);
    background: var(--browse-red-100);
    border: 1px solid var(--browse-red-200);
    padding: 1px 8px;
    border-radius: 9999px;
}

/* ===========================================================================
   Browse Tree — hierarchical display with collapsible children.
   =========================================================================== */

.browse-tree {
    --browse-red: #961300;
    --browse-red-50: #fef2f2;
    --browse-red-100: #fee2e2;
    --browse-red-200: #fecaca;
    --browse-gray-200: #e5e5e5;
    --browse-text: #404040;
    --browse-tree-indent: 1.5rem;

    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--browse-gray-200);
}

.browse-tree__item {
    border-bottom: 1px solid var(--browse-gray-200);
}

.browse-tree__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--browse-text);
    text-decoration: none;
    transition: background-color .15s ease;
}

.browse-tree__link:hover,
.browse-tree__link:focus-visible {
    background: var(--browse-red-50);
    color: var(--browse-red);
    outline: none;
}

.browse-tree__toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--browse-gray-200);
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
    padding: 0;
}

.browse-tree__toggle:hover {
    background: var(--browse-red-50);
    border-color: var(--browse-red);
    color: var(--browse-red);
}

.browse-tree__toggle .bi {
    transition: transform 0.2s ease;
}

.browse-tree__toggle.expanded .bi {
    transform: rotate(90deg);
}

.browse-tree__label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: .95rem;
    color: var(--browse-text);
    text-decoration: none;
}

.browse-tree__label:hover {
    color: var(--browse-red);
}

.browse-tree__count {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .75rem;
    color: var(--browse-red);
    background: var(--browse-red-100);
    border: 1px solid var(--browse-red-200);
    padding: 1px 8px;
    border-radius: 9999px;
}

.browse-tree__children {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--browse-gray-200);
}

.browse-tree__children .browse-tree__item {
    border-bottom: none;
}

.browse-tree__children .browse-tree__item:not(:last-child) {
    border-bottom: 1px solid var(--browse-gray-200);
}

.browse-tree__children .browse-tree__link {
    padding-left: calc(14px + var(--browse-tree-indent));
}

.browse-tree__children .browse-tree__children .browse-tree__link {
    padding-left: calc(14px + var(--browse-tree-indent) * 2);
}

/* Collapsed state */
.browse-tree__children.collapsed {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .browse-list__link,
    .browse-tree__link,
    .browse-tree__toggle,
    .browse-tree__toggle .bi {
        transition: none;
    }
}

/* ===========================================================================
   Browse — toolbar (total count / per-page).
   Same components as search-results.css's .results__toolbar (.toolbar-control,
   .toolbar-label, .per-page-segment), reused here under browse.css's own
   variable fallbacks since --browse-red/--browse-gray-200 are scoped to
   .browse-list/.browse-tree only, not this sibling toolbar.
   =========================================================================== */

.browse__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.browse__count {
    margin: 0;
    font-size: .875rem;
    color: #6b7280;
}

.browse__count strong {
    color: var(--browse-text, #404040);
}

.browse__toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.browse__toolbar .toolbar-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.browse__toolbar .toolbar-label {
    font-size: .8125rem;
    color: #525252;
    white-space: nowrap;
}

.browse__toolbar .per-page-segment {
    box-sizing: border-box;
    display: inline-flex;
    height: 30px;
    border: 1px solid var(--browse-gray-200, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
}
.browse__toolbar .per-page-segment a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 100%;
    border-right: 1px solid var(--browse-gray-200, #e5e5e5);
    color: #525252;
    font-size: .75rem;
    line-height: 1;
    padding: 0 10px;
    text-decoration: none;
}
.browse__toolbar .per-page-segment a:last-child {
    border-right: none;
}
.browse__toolbar .per-page-segment a:hover {
    background: #f9fafb;
    text-decoration: none;
}
.browse__toolbar .per-page-segment a.is-active {
    background: var(--browse-red, #961300);
    color: #fff;
    font-weight: 600;
}

/* ===========================================================================
   Browse — pagination. Same technique as search-results.css: text-below-links,
   centered, no color/border overrides on .pagination/.page-link/.page-item —
   left to inherit whatever styles that component elsewhere on the site.
   =========================================================================== */

.browse__pagination {
    margin-top: 20px;
}

.browse__pagination nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.browse__pagination nav > div.d-sm-flex {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100%;
}
.browse__pagination nav > div.d-sm-flex > div {
    display: flex;
    justify-content: center;
    width: 100%;
}
.browse__pagination nav > div.d-sm-flex > div:first-child {
    order: 2;
}
.browse__pagination nav > div.d-sm-flex > div:last-child {
    order: 1;
}

.browse__pagination nav > div.d-sm-none {
    justify-content: center !important;
    width: 100%;
}

.browse__pagination .pagination {
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.browse__pagination .small.text-muted {
    text-align: center;
    margin: 0;
}