/* MwAccordion — Global Stylesheet
   Prefix: mw-ac-*
   Components: MwAccordion, MwAccordionItem
   ========================================================================= */

/* =========================================================================
   NOTE: Root container
   ========================================================================= */

.mw-ac-root {
    display: flex;
    flex-direction: column;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.02);
}

/* NOTE: Divider between adjacent items within a container */
.mw-ac-root > .mw-ac-item + .mw-ac-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================================================================
   NOTE: Item root
   ========================================================================= */

.mw-ac-item {
    --mw-ac-duration: 300ms;
    position: relative;
}

/* NOTE: Expanded items get a subtle left accent bar */
.mw-ac-item--expanded {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

/* NOTE: Standalone items (outside MwAccordion) get their own border and radius */
:not(.mw-ac-root) > .mw-ac-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.02);
}

:not(.mw-ac-root) > .mw-ac-item.mw-ac-item--expanded {
    border-color: rgba(255, 255, 255, 0.12);
}

.mw-ac-item--disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* =========================================================================
   NOTE: Header
   ========================================================================= */

.mw-ac-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--mud-palette-text-primary);
    transition: background-color 150ms ease;
}

.mw-ac-header:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.mw-ac-header:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 2px;
}

.mw-ac-item--disabled .mw-ac-header {
    cursor: default;
}

/* NOTE: Expanded header has a subtle bottom separator before the content */
.mw-ac-item--expanded > .mw-ac-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* =========================================================================
   NOTE: Header icon — rounded square with tinted background
   ========================================================================= */

.mw-ac-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.06);
    transition: background-color 200ms ease;
}

.mw-ac-item--expanded .mw-ac-header-icon {
    background-color: rgba(255, 255, 255, 0.10);
}

/* =========================================================================
   NOTE: Header content — title and subtitle
   ========================================================================= */

.mw-ac-header-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.mw-ac-header-title {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-ac-header-subtitle {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   NOTE: Header actions slot
   ========================================================================= */

.mw-ac-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* =========================================================================
   NOTE: Expand/collapse chevron
   ========================================================================= */

.mw-ac-header-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: transform var(--mw-ac-duration) cubic-bezier(0.25, 0.8, 0.5, 1),
                background-color 200ms ease;
    color: var(--mud-palette-text-secondary);
}

.mw-ac-header:hover .mw-ac-header-chevron {
    background-color: rgba(255, 255, 255, 0.06);
}

.mw-ac-header-chevron--expanded {
    transform: rotate(180deg);
    color: var(--mud-palette-primary);
}

/* =========================================================================
   NOTE: Body — expand/collapse animation via CSS grid
   The grid-template-rows trick transitions from 0fr to 1fr,
   which animates height from 0 to auto without needing a fixed max-height.
   ========================================================================= */

.mw-ac-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--mw-ac-duration) cubic-bezier(0.25, 0.8, 0.5, 1);
}

.mw-ac-item--expanded .mw-ac-body {
    grid-template-rows: 1fr;
}

/* NOTE: Hidden state — used by LazyOnce and Eager modes when collapsed.
   Content stays in DOM but grid rows collapse to zero. */
.mw-ac-body--hidden {
    grid-template-rows: 0fr;
}

/* =========================================================================
   NOTE: Body clip layer — overflow:hidden with NO padding.
   This is the direct child of the grid. It MUST have no padding so the
   grid row can fully collapse to zero height. The 0fr trick relies on
   overflow:hidden to make the element's min-content contribution zero.
   Padding on this element would create an irreducible minimum height.
   ========================================================================= */

.mw-ac-body-clip {
    overflow: hidden;
}

/* NOTE: Prevent text selection and tab focus on invisible content */
.mw-ac-body--hidden .mw-ac-body-clip {
    visibility: hidden;
}

.mw-ac-item--expanded .mw-ac-body .mw-ac-body-clip {
    visibility: visible;
}

/* =========================================================================
   NOTE: Body inner — actual content with padding.
   Lives inside the clip layer so its padding doesn't interfere
   with the grid collapse animation.
   ========================================================================= */

.mw-ac-body-inner {
    padding: 16px 20px 20px 20px;
}

/* =========================================================================
   NOTE: Loading indicator
   ========================================================================= */

.mw-ac-body-loading {
    padding: 0 20px 12px 20px;
}