.app-pivot {
    --app-pivot-border: #3a3e49;
    --app-pivot-panel: #292d38;
    --app-pivot-surface: #1f222b;
    --app-pivot-text: var(--text-color, #f3f4f6);
    --app-pivot-muted: #aeb4c1;
    --app-pivot-accent: var(--accent-color, #dca54a);
    border: 1px solid var(--app-pivot-border);
    border-radius: .4rem;
    background: var(--app-pivot-surface);
    color: var(--app-pivot-text);
    overflow: hidden;
}

.app-pivot-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .65rem;
    border-bottom: 1px solid var(--app-pivot-border);
    background: var(--app-pivot-panel);
}

.app-pivot-button,
.app-pivot-mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.25rem;
    border: 1px solid #505666;
    border-radius: .3rem;
    background: #343946;
    color: inherit;
}

.app-pivot-button { padding: .4rem .7rem; }
.app-pivot-mini-button { width: 1.85rem; min-height: 1.85rem; padding: 0; }
.app-pivot-button:hover,
.app-pivot-mini-button:hover:not(:disabled) { border-color: var(--app-pivot-accent); color: var(--app-pivot-accent); }
.app-pivot-mini-button:disabled { opacity: .35; }

.app-pivot-layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
.app-pivot-configurator { max-height: 42rem; overflow: auto; padding: .85rem; border-right: 1px solid var(--app-pivot-border); background: #252934; }
.app-pivot-configurator[hidden] { display: none; }
.app-pivot-configurator[hidden] + .app-pivot-table-wrap { grid-column: 1 / -1; }

.app-pivot-config-section + .app-pivot-config-section { margin-top: 1.1rem; }
.app-pivot-config-section h3 { margin: 0 0 .5rem; color: var(--app-pivot-accent); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.app-pivot-config-check { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; cursor: pointer; }
.app-pivot-config-check input { accent-color: var(--app-pivot-accent); }

.app-pivot-zone-order { display: grid; gap: .35rem; margin-top: .55rem; }
.app-pivot-zone-chip { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, auto); align-items: center; gap: .2rem; padding: .3rem; border: 1px solid var(--app-pivot-border); border-radius: .3rem; background: var(--app-pivot-surface); }
.app-pivot-zone-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }

.app-pivot-filter { margin: .35rem 0; border: 1px solid var(--app-pivot-border); border-radius: .3rem; background: var(--app-pivot-surface); }
.app-pivot-filter summary { padding: .5rem; cursor: pointer; font-size: .88rem; }
.app-pivot-filter-actions { display: flex; gap: .3rem; padding: 0 .5rem .45rem; }
.app-pivot-filter-search { margin: 0 .5rem .45rem; width: calc(100% - 1rem); }
.app-pivot-filter-values { max-height: 12rem; overflow: auto; padding: 0 .5rem .5rem; }
.app-pivot-filter-option { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; font-size: .85rem; cursor: pointer; }

.app-pivot-table-wrap { max-height: 42rem; overflow: auto; }
.app-pivot-table { min-width: 100%; border-spacing: 0; border-collapse: separate; font-size: .9rem; }
.app-pivot-table th,
.app-pivot-table td { min-width: 7rem; padding: .55rem .65rem; border-right: 1px solid var(--app-pivot-border); border-bottom: 1px solid var(--app-pivot-border); text-align: right; white-space: nowrap; }
.app-pivot-table thead { position: sticky; top: 0; z-index: 3; }
.app-pivot-table thead th { background: #303542; color: #f2f3f5; text-align: center; }
.app-pivot-table .app-pivot-corner,
.app-pivot-table .app-pivot-row-heading { position: sticky; left: 0; z-index: 2; min-width: 15rem; text-align: left; }
.app-pivot-table .app-pivot-corner { z-index: 4; background: #303542; }
.app-pivot-table .app-pivot-row-heading { padding-left: calc(.65rem + var(--pivot-depth, 0) * 1.15rem); background: var(--app-pivot-surface); }
.app-pivot-row-label { vertical-align: middle; }
.app-pivot-node-toggle { min-height: 1.7rem; width: 1.7rem; margin-right: .3rem; padding: 0; border: 0; background: transparent; }
.app-pivot-node-toggle span { display: none; }
.app-pivot-node-spacer { display: inline-block; width: 2rem; }
.app-pivot-table tbody tr:hover td,
.app-pivot-table tbody tr:hover .app-pivot-row-heading { background: #2a2e39; }
.app-pivot-table .is-subtotal td,
.app-pivot-table .is-subtotal .app-pivot-row-heading { font-weight: 650; background: #272c37; }
.app-pivot-total-heading,
.app-pivot-total-cell { font-weight: 700; background: #2d3240; }
.app-pivot-grand-total th,
.app-pivot-grand-total td { position: sticky; bottom: 0; z-index: 2; font-weight: 700; background: #343946; color: var(--app-pivot-accent); }
.app-pivot-grand-total .app-pivot-row-heading { z-index: 3; background: #343946; }
.app-pivot-empty { padding: 3rem !important; color: var(--app-pivot-muted); text-align: center !important; }

@media (max-width: 900px) {
    .app-pivot-layout { display: block; }
    .app-pivot-configurator { max-height: none; border-right: 0; border-bottom: 1px solid var(--app-pivot-border); }
    .app-pivot-table-wrap { max-height: 34rem; }
}