/* ===== Tree Top/Bottom Bars ===== */
.ampol-tree-top-bar {
    padding: var(--spacing-2) !important;
    position: sticky;
    top: 0;
    margin: 0 -3px 0;
    z-index: var(--z-sticky-buttons);
}

.ampol-tree-bottom-bar {
    text-align: start;
    padding: var(--spacing-2) !important;
    position: sticky;
    bottom: 0;
    margin: 0 -3px 1px;
    z-index: var(--z-sticky-buttons);
}

/* ===== Search & Filter Bars ===== */
.ampol-tree-search-bar {
    min-width: 200px;
}

.ampol-tree-search-bar .rz-form-field {
    width: 100%;
}

.ampol-tree-search-bar .rz-form-field-content {
    margin-top: 0;
}

.ampol-tree-search-bar .rz-form-field-label.rz-text-truncate {
    margin-top: 1px;
}

.ampol-tree-category-select-bar .rz-form-field-content {
    border: none !important;
}

/* Category Select Bar - Colorful Buttons */
.ampol-tree-category-select-bar .rz-buttonset .rz-button.rz-state-active:nth-child(1) {
    background: var(--color-tree-category-1) !important;
}

.ampol-tree-category-select-bar .rz-buttonset .rz-button.rz-state-active:nth-child(2) {
    background: var(--color-tree-category-2) !important;
}

.ampol-tree-category-select-bar .rz-buttonset .rz-button.rz-state-active:nth-child(3) {
    background: var(--color-tree-category-3) !important;
}

.ampol-tree-category-select-bar .rz-buttonset .rz-button.rz-state-active:nth-child(4) {
    background: var(--color-tree-category-4) !important;
}

.ampol-tree-category-select-bar .rz-buttonset .rz-button.rz-state-active:nth-child(5) {
    background: var(--color-tree-category-5) !important;
}

.ampol-tree-category-select-bar .rz-buttonset .rz-button.rz-state-active:nth-child(6) {
    background: var(--color-tree-category-6) !important;
}

/* Filter Slider */
.ampol-tree-filter-slider .rz-form-field.rz-variant-outlined.rz-floating-label {
    height: 100%;
    padding-right: 0;
}

.ampol-tree-filter-slider .rz-form-field-label.rz-text-truncate {
    margin-top: 1px;
}

.ampol-tree-filter-slider .rz-form-field-content {
    height: 100%;
    padding-right: var(--spacing-3) !important;
    padding-left: var(--spacing-2) !important;
    margin-top: 0;
}

.ampol-tree-filter-slider .rz-form-field-start {
    padding-left: 0 !important;
    padding-right: var(--spacing-2) !important;
}

.ampol-tree-filter-slider .rz-slider.rz-slider-horizontal {
    border: var(--rz-slider-border) !important;
}

/* ===== Tree Items ===== */
.ampol-tree-item {
    background-color: var(--color-background);
    margin-top: -1px;
}

.ampol-tree-item-level-0 {
    margin-bottom: 11px;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 2px 0 rgb(151, 151, 151);
}

.ampol-tree-item-header {
    margin: 0;
}

.ampol-tree-item-header-title {
    display: flex;
    text-align: left;
    font-size: medium;
    border: 1px solid var(--color-background);
    border-right: 0;
    border-left: 0;
    align-items: center;
    padding: 0;
    /* See AmpolLeaf.razor for "width" & "background-color" */
}

.ampol-tree-item-level-0 > .ampol-tree-item-header > .ampol-tree-item-header-title:first-child {
    border-top: 0;
}

.ampol-tree-item-header-dialog-button {
    border: 0;
    border-left: solid 1px var(--color-background);
    color: var(--color-text) !important;
    font-size: medium;
    font-weight: bold;
    border-radius: 0;
    height: 100%;
    align-content: center;
    min-width: 34px;
    text-align: center;
    padding: 0 var(--spacing-1) 0 var(--spacing-1);
}

.ampol-tree-item-header-indicator {
    width: 60px;
    padding: 0;
    font-weight: var(--font-weight-normal);
    cursor: default;
}

.ampol-tree-item-header-description {
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden !important;
    border: 0 solid var(--color-surface);
    border-left-width: 1px;
    margin: 0;
    text-align: left;
    background: var(--color-background);
    padding: 0;
    height: auto !important;
    align-content: center;
    justify-content: space-between;
}

.ampol-tree-item-header-rating {
    background: var(--color-background);
    margin-right: 1px;
}

.ampol-tree-item-header-rating-hidden {
    visibility: hidden !important;
}

/* Less opacity for calculated rating */
.ampol-tree-item-header-calculated-rating .rzi-star,
.ampol-tree-item-header-calculated-rating .rzi-star-o {
    color: var(--color-accent-faded);
}

/* ===== Compact Leaf ===== */
.ampol-tree-compact-leaf {
    margin: 0;
    font-weight: var(--font-weight-normal);
    font-size: medium;
    border: 1px solid var(--color-background);
    border-bottom-width: 0;
    width: 100%;
    background-color: var(--color-surface) !important;
}

button.ampol-tree-compact-leaf:hover {
    background-color: var(--color-border) !important;
}

/* ===== Tree Item Body ===== */
.ampol-tree-item-body {
    padding: 0 0 0 var(--spacing-3);
    margin-left: 1px;
}

/* ===== Hover States ===== */
.ampol-tree-item-header:hover .ampol-tree-item-header-description,
.ampol-tree-item-header:hover .ampol-tree-item-header-hover-items,
.ampol-tree-item-header:hover .ampol-tree-item-header-rating,
.ampol-tree-item-header:hover .ampol-tree-item-header-hover-items .rz-button {
    background-color: var(--color-surface) !important;
}

.ampol-tree-item-header:hover .hide-on-hover {
    display: none;
}

/* Workaround to use a filled icon for the active state */
.rz-state-active i:first-of-type {
    font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24 !important;
}

/* ===== Hover Items / Select Bar ===== */
.ampol-tree-item-header-hover-items .rz-button {
    margin: 0 !important;
    border-color: var(--color-surface) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
}

.ampol-tree-item-header-hover-items .rz-button:last-child {
    border-right: 0;
}

.ampol-tree-item-header-hover-items {
    display: flex;
    min-width: 101px;
}

.ampol-tree-item-header-additional-content {
    display: none;
}

.ampol-tree-item-header:hover .ampol-tree-item-header-additional-content {
    display: flex;
}

.ampol-tree-item-header:hover .ampol-tree-item-header-display {
    display: none;
}

/* ===== Search Text ===== */
.ampol-tree-search-text {
    font-size: large;
    margin-top: var(--spacing-6) !important;
    text-align: center;
}

/* ===== Accordion Arrow ===== */
.ampol-tree-item-header-title-arrow:not(.collapsed)::after {
    transform: rotate(-180deg);
    padding-right: var(--spacing-1) !important;
}

.ampol-tree-item-header-title-arrow::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform var(--transition-fast);
    margin-right: var(--spacing-1) !important;
}

/* ===== Border Radius (Bootstrap Accordion Style) ===== */
.ampol-tree-item:first-of-type {
    border-top-left-radius: var(--spacing-1);
    border-top-right-radius: var(--spacing-1);
}

.ampol-tree-item:first-of-type.ampol-tree-item-button {
    border-top-left-radius: calc(var(--spacing-1) - 1px);
    border-top-right-radius: calc(var(--spacing-1) - 1px);
}

.ampol-tree-item:last-of-type {
    border-bottom-right-radius: var(--spacing-1);
    border-bottom-left-radius: var(--spacing-1);
}

.ampol-tree-item:last-of-type.ampol-tree-item-button.collapsed {
    border-bottom-right-radius: calc(var(--spacing-1) - 1px);
    border-bottom-left-radius: calc(var(--spacing-1) - 1px);
}

.ampol-tree-item:last-of-type.accordion-collapse {
    border-bottom-right-radius: var(--spacing-1);
    border-bottom-left-radius: var(--spacing-1);
}

/* ===== Validation Override ===== */
/* Override global validation outline for tree items */
.valid.modified:not([type=checkbox]):not(.rz-checkbox-list-vertical):not(.rz-checkbox-list-horizontal) {
    outline: none !important;
}