/* ============================================
   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.

   Header structure: the header is a clickable <div> bar (click anywhere
   toggles), containing optional icon(s), an optional custom-content span
   (HeaderContentParameter, isolated from the toggle click), the text /
   description, and a dedicated toggle <button> which is the header's
   only focusable element. */

/* Override FluentCard default padding so the header bar fills
   edge-to-edge; child content controls its own spacing.
   Height is content-driven by default. A card only fills its container when
   asked to (height "fill"), because "100%" inside a container with no definite
   height resolves to FluentCard's own default size (300px), producing a tall
   card with a small amount of content in it. */
fluent-card.collapsible-section {
    padding: 0;
    overflow: hidden;
    text-align: start;
    display: flex;
    flex-direction: column;
    height: auto;
    /* Re-anchor Fluent's spacing unit on every card. Custom properties inherit,
       so without this a card nested inside a compact variant would inherit the
       outer card's reduced unit and shrink its own FluentCard padding. */
    --design-unit: 4;
}

/* Opt-in container filling - for a card placed in a container with a definite height. */
fluent-card.collapsible-section-fill {
    height: 100%;
}

/* Expanded + IsResizable: the card itself carries the vertical drag handle. The header
   stays pinned; the body scrolls when the content is taller than the dragged height. */
fluent-card.collapsible-section-resizable {
    resize: vertical;
    overflow: hidden;
    min-height: 60px;
}

    fluent-card.collapsible-section-resizable > .collapsible-section-body {
        overflow: auto;
    }

/* ── Header bar (click anywhere to toggle) ──
   Column: the main row (icons, text, toggle) and an optional full-width bottom row. */
.collapsible-section-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
    cursor: pointer;
    user-select: none;
    width: 100%;
    font-family: inherit;
    text-align: start;
    transition: background 0.15s;
}

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

.collapsible-section-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* ── Custom header content (HeaderContentParameter / HeaderEndContentParameter /
   HeaderBottomContentParameter) ──
   Isolated from the header's toggle click so interactive content
   (checkboxes, buttons) placed here works normally. The holder itself
   ignores pointer events so clicks in the gaps between its items fall
   through to the header and toggle; only its direct children catch clicks. */
.collapsible-section-header-custom {
    display: inline-flex;
    align-items: center;
    cursor: default;
    pointer-events: none;
}

    .collapsible-section-header-custom > * {
        pointer-events: auto;
    }

/* Bottom row: a block-level flex column that stretches its content to the full header width. */
.collapsible-section-header-custom-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 4px;
}

    .collapsible-section-header-custom-bottom > * {
        width: 100%;
    }

    /* Optional grouping wrapper inside header content: also passes gap clicks
       through to the header; only its direct children catch clicks. */
    .collapsible-section-header-custom .collapsible-section-header-group {
        pointer-events: none;
    }

        .collapsible-section-header-custom .collapsible-section-header-group > * {
            pointer-events: auto;
        }

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

/* ── Toggle button (the header's only focusable element) ── */
.collapsible-section-toggle-button {
    background: none;
    border: none;
    padding: 0;
    margin-inline-start: auto;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

    .collapsible-section-toggle-button:disabled {
        cursor: default;
    }

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

/* ── 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;
}

    /* The card's padding is the single source of inset: strip the default
   top/bottom margins of the body's first and last children (e.g. <p>)
   so the whitespace is identical on all four sides. */
    .collapsible-section-body > :first-child {
        margin-top: 0;
    }

    .collapsible-section-body > :last-child {
        margin-bottom: 0;
    }

/* ── Header icons (ImageIdLeft / ImageIdRight) ── */
.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 button 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;
}

/* ============================================
   Density variants (DisplayFlagsEnum.Small / .Medium)
   ============================================
   Large (or no size flag) keeps the rules above untouched; its inset is
   FluentCard's own scoped rule: calc(--design-unit(4) * 5px) = 20px.
   The doubled-class selectors below (0,2,1) intentionally out-rank that
   library rule (0,1,1) so each variant states its padding directly:
   Medium = 10px (half of Large), Small = 3px (minimal).
   All inner selectors use the child combinator off the card so that a
   nested CollapsibleSectionComponent of a different density is never
   styled by its ancestor's variant rules. */

/* ── Medium ── */
fluent-card.collapsible-section.collapsible-section-medium {
    padding: 10px;
}

fluent-card.collapsible-section-medium > .collapsible-section-header {
    padding: 0 0 5px 0;
}

    fluent-card.collapsible-section-medium > .collapsible-section-header > .collapsible-section-header-row {
        gap: 8px;
        align-items: flex-start;
    }

    fluent-card.collapsible-section-medium > .collapsible-section-header .collapsible-section-header-content {
        gap: 1px;
    }

    fluent-card.collapsible-section-medium > .collapsible-section-header .collapsible-section-header-text {
        font-size: 0.845rem;
        line-height: 1.35;
    }

    fluent-card.collapsible-section-medium > .collapsible-section-header .collapsible-section-header-description {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.35;
    }

    fluent-card.collapsible-section-medium > .collapsible-section-header .collapsible-section-toggle {
        font-size: 11px;
        margin-top: 2px;
    }

fluent-card.collapsible-section-medium > .collapsible-section-body {
    padding: 0;
    font-size: 12px;
}

/* ── Small ── */
fluent-card.collapsible-section.collapsible-section-small {
    padding: 3px;
}

fluent-card.collapsible-section-small > .collapsible-section-header {
    padding: 0 0 3px 0;
}

    fluent-card.collapsible-section-small > .collapsible-section-header > .collapsible-section-header-row {
        gap: 6px;
        align-items: flex-start;
    }

    fluent-card.collapsible-section-small > .collapsible-section-header .collapsible-section-header-content {
        gap: 0;
    }

    fluent-card.collapsible-section-small > .collapsible-section-header .collapsible-section-header-text {
        font-size: 10.5px;
        line-height: 1.3;
    }

    fluent-card.collapsible-section-small > .collapsible-section-header .collapsible-section-header-description {
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.3;
    }

    fluent-card.collapsible-section-small > .collapsible-section-header .collapsible-section-toggle {
        font-size: 10px;
        margin-top: 1px;
    }

fluent-card.collapsible-section-small > .collapsible-section-body {
    padding: 0;
    font-size: 11.5px;
}