/* Scoped styles for NxAccordion - updated to use nx-theme.css variables */
/* Using  to override Blazor CSS isolation scoped styles */

.nx-accordion {
    background: var(--nx-primary-bg);

    border: var(--nx-border-width) solid var(--nx-border-color) ;
    border-radius: var(--nx-border-radius) ;
    box-shadow: var(--nx-box-shadow) ;
    overflow: hidden ;
    margin: var(--nx-space-small) 0 ;
    grid-column: -1 / 1;

}

/* Header button - use system variables, keep it keyboard-friendly */
.nx-accordion-header {
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    width: 100% ;
    padding: var(--nx-space-small) var(--nx-space) ;
    background: var(--nx-tertiary-bg) ;
    border: var(--nx-border-width) solid var(--nx-border-color) ;
    border-radius: var(--nx-border-radius) ;
    color: inherit ;
    cursor: pointer ;
    text-align: left ;
    gap: var(--nx-space-small) ;
    box-shadow: none ;
    margin: 0 ;
}

    .nx-accordion-header:focus,
    .nx-accordion-header:focus-visible {
        outline: none ;
        box-shadow: 0 0 0 2px var(--nx-accent-bg) ;
        border-radius: calc(var(--nx-border-radius) - 1px) ;
    }

/* Header content area */
.nx-accordion-header-content {
    display: flex;
    align-items: center;
    gap: var(--nx-space-small);
    min-width: 0;
    flex: 1;
}

.nx-accordion-title {
    white-space: nowrap ;
    overflow: hidden ;
    text-overflow: ellipsis ;
}

/* Chevron rotates when open */
.nx-accordion-chevron {
    display: inline-flex ;
    align-items: center ;
    justify-content: center ;
    color: var(--nx-muted-fg) ;
    transition: transform 0.22s ease ;
}

.nx-accordion.open {
    box-shadow: none;
}
.nx-accordion.open .nx-accordion-chevron {
    transform: rotate(180deg) ;
    /* color: var(--nx-highlight-fg) ; */
}

/* Content area: smooth collapse using max-height */ 
.nx-accordion-content {
    max-height: 0;
    overflow: hidden ;
    transition: max-height 0.28s ease, padding 0.18s ease ;
    padding: 0 var(--nx-space) ;
    border-top: var(--nx-border-width) solid var(--nx-border-color) ;

}

/* When open, allow content to expand; max-height set large enough for most content */
.nx-accordion.open .nx-accordion-content {
    max-height: 2000px ;
    padding: var(--nx-space-small) var(--nx-space) ;
    /*box-shadow: inset 0 0 0 1px var(--nx-accent-bg) ;*/
}

/* Allow nested controls to fill horizontally */
.nx-accordion > .nx-accordion-content > * {
    box-sizing: border-box ;
}