/* Club hierarchy — custom CSS only where Bootstrap has no equivalent (sales tree grid/lines). */



/* Sales statistics tree — readable columns (label | amount). */

.hierarchy-sales-breakdown {

    width: 100%;

    max-width: 36rem;

}



.hierarchy-sales-breakdown .hierarchy-sales-header,

.hierarchy-sales-breakdown .hierarchy-sales-row,

.hierarchy-sales-breakdown .hierarchy-sales-grand-total {

    display: grid;

    grid-template-columns: 1.25rem minmax(0, 1fr) 4.5rem;

    column-gap: 0.75rem;

    align-items: center;

    width: 100%;

}



.hierarchy-sales-breakdown .hierarchy-sales-header {

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--bs-secondary-color);

    border-bottom: 1px solid var(--bs-border-color);

    padding-bottom: 0.35rem;

    margin-bottom: 0.35rem;

}



.hierarchy-sales-breakdown .hierarchy-sales-header .hierarchy-sales-amount-header,

.hierarchy-sales-breakdown .hierarchy-sales-row .hierarchy-sales-amount,

.hierarchy-sales-breakdown .hierarchy-sales-grand-total .hierarchy-sales-amount {

    min-width: 4.5rem;

    text-align: right;

    font-variant-numeric: tabular-nums;

    justify-self: end;

}



.hierarchy-sales-breakdown .hierarchy-sales-label {

    min-width: 0;

    overflow-wrap: anywhere;

    word-break: break-word;

}



.hierarchy-sales-breakdown .hierarchy-sales-tree .hierarchy-sales-toggle {

    width: 1.25rem;

    padding: 0;

    text-decoration: none;

    line-height: 1;

    color: var(--bs-body-color);

}



.hierarchy-sales-breakdown .hierarchy-sales-toggle-spacer {

    display: inline-block;

    width: 1.25rem;

    flex-shrink: 0;

}



.hierarchy-sales-breakdown .hierarchy-sales-grand-total {

    grid-template-columns: 1.25rem minmax(0, 1fr) 4.5rem;

    color: var(--bs-body-color);

}



.hierarchy-sales-breakdown .hierarchy-sales-tree {

    display: flex;

    flex-direction: column;

    gap: 0.125rem;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;

}



.hierarchy-sales-breakdown .hierarchy-sales-tree ul {

    list-style: none;

    margin: 0;

    padding: 0;

    width: 100%;

}



.hierarchy-sales-node.hierarchy-tree-node {

    --tree-indent: 24px;

    --tree-line-color: #c0c0c0;

    --tree-line-width: 1px;

    position: relative;

    padding-left: var(--tree-indent);

    list-style: none;

    width: 100%;

}



.hierarchy-sales-tree > .hierarchy-sales-node.hierarchy-tree-node {

    padding-left: 0;

}



.hierarchy-sales-breakdown .hierarchy-tree-lines {

    position: absolute;

    left: 0;

    top: 0;

    width: var(--tree-indent);

    height: 100%;

    pointer-events: none;

}



.hierarchy-sales-breakdown .hierarchy-line-vertical {

    position: absolute;

    left: calc(var(--tree-indent) / 2);

    top: 0;

    width: var(--tree-line-width);

    height: 100%;

    background-color: var(--tree-line-color);

}



.hierarchy-sales-breakdown .hierarchy-tree-node.is-last-child > .hierarchy-tree-lines > .hierarchy-line-vertical {

    height: 14px;

}



.hierarchy-sales-breakdown .hierarchy-line-horizontal {

    position: absolute;

    left: calc(var(--tree-indent) / 2);

    top: 14px;

    width: calc(var(--tree-indent) / 2 - 2px);

    height: var(--tree-line-width);

    background-color: var(--tree-line-color);

}



.hierarchy-sales-breakdown .hierarchy-children {

    position: relative;

    width: 100%;

}



.hierarchy-sales-member.hierarchy-tree-node {

    position: relative;

    padding-left: var(--tree-indent);

    width: 100%;

    list-style: none;

}