/* ============================================
   CollapsibleSectionComponent Styles
   ============================================
   All CSS for CollapsibleSectionComponent.razor lives here as one
   global file. Loaded as a plain stylesheet (NOT Blazor-isolated)
   because:
   - Several rules toggle on a <fluent-card> host element
     (fluent-card.collapsible-section) which is rendered by the
     FluentCard child component — Blazor CSS isolation cannot reach
     elements emitted by child Blazor components.
   - The .collapsible-section-toggle-open rotation rule is applied
     directly to the toggle element (not via a parent descendant
     selector) to prevent CSS leakage when CollapsibleSections are
     nested inside each other — this only works as global CSS.
   FluentCard itself provides card-level theming (background, border,
   box-shadow) via FAST design tokens — no card container CSS needed. */

/* Override FluentCard default padding so the header button fills
   edge-to-edge; child content controls its own spacing. */
fluent-card.collapsible-section {
    padding: 0;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Header (clickable toggle button) ── */
.collapsible-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}

    .collapsible-section-header:hover {
        background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.04));
    }

    .collapsible-section-header:focus-visible {
        outline: 2px solid var(--accent-fill-rest, #4285f4);
        outline-offset: -2px;
    }

/* ── Simple text header (when no HeaderContentParameter) ── */
.collapsible-section-header-text {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: var(--neutral-foreground-rest, #1b1b1f);
}

/* ── Toggle indicator ── */
.collapsible-section-toggle {
    font-size: 1rem;
    color: var(--neutral-foreground-hint, #9ca3af);
    transition: transform 0.3s;
    flex-shrink: 0;
}

/* Rotation when expanded — applied directly to the toggle element
   (not via a parent descendant selector) to prevent CSS leakage
   when CollapsibleSectionComponents are nested inside each other. */
.collapsible-section-toggle-open {
    transform: rotate(180deg);
}

/* ── Body (child content) ── */
.collapsible-section-body {
    padding: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.collapsible-section-header-icon {
    flex-shrink: 0;
    object-fit: contain;
}

/* Path-based images: native size, never enlarge, cap height for label context */
img.collapsible-section-header-icon {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 48px;
}

/* Inline SVG containers: fixed icon size */
span.collapsible-section-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    span.collapsible-section-header-icon svg {
        width: 100%;
        height: 100%;
    }

/* ============================================
   Collapsible Section Header Content (Text + Description)
   ============================================
   Compound header for CollapsibleSectionComponent when
   DescriptionParameter is provided. Wraps header text and
   description subtitle in a flex column while preserving
   flex: 1 to push the toggle arrow to the right. */

.collapsible-section-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collapsible-section-header-description {
    font-weight: 400;
    font-size: 0.82em;
    opacity: 0.72;
    line-height: 1.3;
}

/* When header-text lives inside header-content (compound description mode),
   override flex: 1 from the standalone .collapsible-section-header-text rule
   to prevent vertical stretching inside the column-direction container.
   Source-order specificity is intentional — this rule appears after the base. */
.collapsible-section-header-content > .collapsible-section-header-text {
    flex: initial;
}