/* ============================================================
   OO Fieldset Component
   Präfix: oo-fieldset
   ============================================================ */

.oo-fieldset {
    box-sizing:    border-box;
    display:       block;
    margin:        0;
    padding:       0;
    min-width:     0;
    border:        var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-md);
    overflow:      visible;
    background:    var(--oo-color-surface);
}

/* ── Legend / Header ──────────────────────────────────────── */

.oo-fieldset__legend {
    display:         flex;
    align-items:     center;
    gap:             var(--oo-space-2);
    font-size:       var(--oo-font-size-md);
    color:           var(--oo-color-text);
    padding-block:   0;
    padding-inline:  var(--oo-space-2);
    margin-inline:   var(--oo-space-3) 0;
    float:           none;
    line-height:     1.4;
}

.oo-fieldset__legend-icon {
    font-family: 'Material Symbols', 'Material Symbols Outlined', sans-serif;
    font-size:   1.1em;
    line-height: 1;
    color:       var(--oo-color-text-subtle);
}

.oo-fieldset__legend-text {
    flex: 1;
    font-weight: 600;
}

/* ── Clickable Legend (Collapsible) ───────────────────────── */

.oo-fieldset__legend--clickable {
    cursor:     pointer;
    transition: background var(--oo-transition-fast), color var(--oo-transition-fast);
    border-radius: var(--oo-radius-sm);
    user-select: none;
}

.oo-fieldset__legend--clickable:hover {
    color: var(--oo-color-text);
}

.oo-fieldset__legend--clickable:hover .oo-fieldset__legend-icon,
.oo-fieldset__legend--clickable:hover .oo-fieldset__toggle-icon {
    color: var(--oo-color-text);
}

.oo-fieldset__toggle-icon {
    font-family: 'Material Symbols', 'Material Symbols Outlined', sans-serif;
    font-size:   1.2em;
    line-height: 1;
    color:       var(--oo-color-text-subtle);
    transition:  transform var(--oo-transition), color var(--oo-transition-fast);
    margin-inline-start: auto;
}

.oo-fieldset--collapsed .oo-fieldset__toggle-icon {
    transform: rotate(-90deg);
}

/* ── Content ──────────────────────────────────────────────── */

.oo-fieldset__content {
    padding: var(--oo-space-3) var(--oo-space-4) var(--oo-space-4);
}

.oo-fieldset__content[hidden] {
    display: none;
}