/* Collection Tree plugin */
:root {
    --ct-width: 320px;
}

.ct-tab {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 97;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: 0 0;
    padding: 6px 14px;
    border: 0;
    border-radius: 0 0 6px 6px;
    background: var(--colour-brand-primary-default, #0e6dd9);
    color: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.ct-tab:hover,
.ct-tab:focus-visible { background: var(--colour-brand-primary-dark, #053d7d); }
body.ct-open .ct-tab { display: none; }

.ct-panel {
    position: fixed;
    left: 0;
    top: var(--js-header-container-bottom, 80px);
    bottom: 76px;
    width: var(--ct-width);
    max-width: 90vw;
    z-index: 98;
    display: none;
    flex-direction: column;
    background: var(--colour-surface-mode-surface, #fff);
    color: inherit;
    border-right: 1px solid var(--form-form-divider, #c8ccd1);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    text-align: left;
}
body.ct-open .ct-panel { display: flex; }
body:has(.collection-bar-holder.state-actions) .ct-panel { bottom: var(--actions-height, 110px); }
body:has(.collection-bar-holder.state-thumbs) .ct-panel { bottom: calc(var(--actions-height, 110px) + var(--thumbs-height, 184px)); }

@media (min-width: 900px) {
    body.ct-open #UICenter { margin-left: var(--ct-width); }
}

.ct-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 4px 12px;
}
.ct-title { font-size: 15px; }
.ct-tool {
    border: 0;
    background: none;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
}
.ct-tool:hover,
.ct-tool:focus-visible { background: var(--colour-brand-primary-light, #e1eaf5); }

.ct-filter {
    margin: 4px 12px 8px;
    padding: 6px 8px;
    border: 1px solid var(--form-field-border, #6b7280);
    border-radius: 4px;
    background: var(--form-form-field-background, #fff);
    color: inherit;
    font: inherit;
}

.ct-actions {
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--form-form-divider, #c8ccd1);
}
.ct-summary { margin-bottom: 6px; }
.ct-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-btn {
    padding: 5px 10px;
    border: 1px solid var(--colour-brand-primary-default, #0e6dd9);
    border-radius: 4px;
    background: transparent;
    color: var(--colour-brand-primary-default, #0e6dd9);
    font: inherit;
    cursor: pointer;
}
.ct-btn.ct-primary { background: var(--colour-brand-primary-default, #0e6dd9); color: #fff; }
.ct-btn.ct-quiet { border-color: transparent; }
.ct-btn:disabled { opacity: 0.45; cursor: default; }
.ct-busy .ct-btn { opacity: 0.45; pointer-events: none; }

.ct-status { margin-top: 8px; max-height: 120px; overflow-y: auto; }
.ct-status div { padding: 3px 6px; border-radius: 3px; margin-bottom: 2px; }
.ct-ok { background: var(--colour-feedback-success-lighter, #e8f2e6); color: var(--colour-feedback-success-dark, #125c01); }
.ct-problem { background: var(--colour-feedback-warning-lighter, #fef7eb); color: var(--colour-feedback-warning-dark, #7f530d); }

.ct-tree { flex: 1 1 auto; overflow-y: auto; padding: 4px 0 12px; }
.ct-tree.ct-loading { opacity: 0.5; }
.ct-list { list-style: none; margin: 0; padding: 0; }
.ct-group-head {
    display: block;
    width: 100%;
    padding: 8px 12px 4px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ct-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding-right: 10px;
}
.ct-row:hover { background: var(--colour-brand-primary-lightest, #edf4fc); }
.ct-row.ct-drop-hover {
    background: var(--colour-brand-primary-light, #e1eaf5);
    outline: 2px solid var(--colour-brand-primary-default, #0e6dd9);
    outline-offset: -2px;
}
.ct-arrow {
    flex: 0 0 18px;
    width: 18px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 12px;
    padding: 0;
    cursor: pointer;
}
.ct-arrow:disabled { cursor: default; }
.ct-check,
.ct-check-gap { flex: 0 0 16px; width: 16px; margin: 0; }
.ct-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
.ct-name:hover { text-decoration: underline; }
.ct-name.ct-category { font-weight: 600; }
.ct-count { flex: 0 0 auto; opacity: 0.65; font-variant-numeric: tabular-nums; }
.ct-empty { padding: 4px 12px 4px 30px; opacity: 0.65; }
.ct-hint {
    padding: 6px 12px;
    border-top: 1px solid var(--form-form-divider, #c8ccd1);
    font-size: 12px;
    opacity: 0.75;
}

/* v1.0.1: stop ResourceSpace's global button and list styles leaking into the panel */
.ct-panel button {
    box-shadow: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.ct-panel .ct-arrow {
    width: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: none !important;
    font-size: 11px !important;
}
.ct-panel .ct-tool {
    padding: 3px 6px !important;
    border: 0 !important;
    background: none !important;
    font-size: 15px !important;
}
.ct-panel .ct-tool:hover,
.ct-panel .ct-arrow:hover:not(:disabled) {
    background: var(--colour-brand-primary-light, #e1eaf5) !important;
}
.ct-panel .ct-group-head {
    padding: 8px 12px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-weight: 600 !important;
}
.ct-panel .ct-btn {
    padding: 5px 10px !important;
    font-size: 13px !important;
}
.ct-panel .ct-list li {
    margin: 0 !important;
    padding: 0 !important;
}
.ct-panel .ct-row { min-height: 24px; }
.ct-panel .ct-check {
    width: 14px !important;
    height: 14px !important;
    min-height: 0 !important;
    margin: 0 2px 0 0 !important;
}
.ct-panel .ct-name {
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.3;
}