/* ==========================================================================
   Fieldsets — crispy IconFieldset family and collapsible fieldsets.

   Consolidated out of theme.css / theme-override.css. Loads immediately after
   theme-override.css, before components/, so every rule keeps the relative
   cascade position it had before the move.
   ========================================================================== */

/* ----- from theme-override.css ----- */


/* ==========================================================================
   Fieldsets — used by crispy `Fieldset` to group related fields into
   titled sections. Works both inside and outside of forms.
   ========================================================================== */
/* A fieldset is the one component whose fill comes from context rather than
   from its own role: it has no content identity, it is a pure grouping device,
   so it takes its level from whatever it is grouping things inside of.
   Directly on the canvas it stands in for a card. */
fieldset {
    border: 1px solid var(--fieldset-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem 0.25rem;
    margin: 0 0 1.5rem;
    background: var(--bg-surface);
    box-shadow: var(--fieldset-shadow);
    position: relative;
    min-width: 0; /* allow flex/grid children to shrink */
}

/* Inside a card the sheet tone is taken, so the group lifts one step off it.
   The nested case is handled by the `fieldset fieldset` rule further down. */
.card fieldset {
    background: var(--bg-raise);
}

fieldset:hover {
    border-color: var(--fieldset-border-hover);
}

fieldset > legend {
    float: none; /* override bootstrap reboot */
    padding: 0 0.6rem;
    margin-left: 0.4rem;
    margin-bottom: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-quiet);
    background: transparent;
    border: 0;
    display: inline-block;
    width: auto !important;
}

/* Accent bar before the legend text (default when no icon is set) */
fieldset > legend::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.9em;
    margin-right: 0.55rem;
    vertical-align: -0.1em;
    background: var(--color-blue);
    border-radius: 2px;
}

/* Optional Font Awesome icon in the legend, set via IconFieldset(icon="...").
   Replaces the accent bar so the icon acts as the visual anchor. */
fieldset > legend .fieldset-icon {
    display: inline-block;
    margin-right: 0.55rem;
    color: var(--color-blue);
    font-size: 1em;
    vertical-align: -0.05em;
}
fieldset > legend:has(.fieldset-icon)::before {
    display: none;
}

/* Collapsible IconFieldset: clickable legend with a chevron that flips
   based on aria-expanded state (driven by Bootstrap 4 collapse). */
/* Bootstrap 4 reads its collapse duration from the element's CSS transition,
   so overriding the body's `.collapsing` transition here actually retimes the
   open/close — 0.4s gives the expand a little more weight (0.35s felt snappy).
   Keep the card's own padding resize on the same curve so they move together. */
fieldset.collapsible-fieldset {
    transition: padding 0.4s ease;
}
fieldset.collapsible-fieldset > .collapsing {
    transition: height 0.4s ease;
}
fieldset.collapsible-fieldset > legend.collapsible-fieldset-legend {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}
/* While collapsed the whole card is clickable; shrink it to a compact bar with
   small symmetric padding so the stand-in label sits vertically centered. */
fieldset.collapsible-fieldset:has(> legend[aria-expanded="false"]) {
    cursor: pointer;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
/* Title chevron (in either the legend or the collapsed stand-in): pinned right. */
fieldset.collapsible-fieldset .collapsible-fieldset-chevron {
    margin-left: auto;
    font-size: 0.85em;
    color: var(--text-tertiary);
    transition: transform 0.2s ease-in-out;
}
/* The visible legend only ever shows when expanded, so its chevron points up. */
fieldset.collapsible-fieldset > legend[aria-expanded="true"] .collapsible-fieldset-chevron {
    transform: rotate(180deg);
}

/* A native <legend> always notches the fieldset border and can't be moved, so
   the two states swap which label is shown:
   - Expanded: the real <legend> is visible → native look, border notch and all.
   - Collapsed: the <legend> is hidden (no element → no notch → clean rectangle)
     and the stand-in label sits inside the card instead. */
fieldset.collapsible-fieldset:has(> legend[aria-expanded="false"]) > legend.collapsible-fieldset-legend {
    display: none;
}
/* The stand-in label stays in flow but its box collapses to nothing when
   expanded (animatable max-height/opacity, unlike display). It mirrors the
   real <legend>, which swaps via display and so appears/disappears instantly.
   The stand-in is sequenced against the two motions:
   - On open it vanishes instantly the moment the legend takes over, so there's
     never a lingering second title.
   - On close its height slot is reserved instantly (max-height, no transition)
     so the card settles straight to its final size instead of undershooting to
     bare padding and bouncing back up. The label itself then waits for the body
     to finish collapsing (0.4s delay) and drops into that slot with a
     slide+fade, instead of crossing the collapsing content mid-air.
   Match the legend's text styling and horizontal position so it reads the same. */
fieldset.collapsible-fieldset > .collapsible-fieldset-collapsed-label {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-0.4rem);
    margin: 0 0 0 0.4rem;
    padding: 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-quiet);
    transition: none;
}
fieldset.collapsible-fieldset:has(> legend[aria-expanded="false"]) > .collapsible-fieldset-collapsed-label {
    max-height: 3rem;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease 0.4s, transform 0.22s ease 0.4s;
}
fieldset.collapsible-fieldset > .collapsible-fieldset-collapsed-label .fieldset-icon {
    margin-right: 0.55rem;
    color: var(--color-blue);
    font-size: 1em;
}

/* Gated IconFieldset: master switch lives in the legend, pushed right via
   `margin-left: auto`. Body dims and blocks pointer events when off. */
fieldset.gated-fieldset > legend.gated-fieldset-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
/* Bootstrap's `.custom-switch` reserves 0.5rem of empty label space after
   the slider — pull it back so the legend's right padding matches the left. */
fieldset.gated-fieldset > legend .gated-fieldset-switch {
    margin-right: -0.5rem;
}
fieldset.gated-fieldset > legend .gated-fieldset-switch .custom-control-input,
fieldset.gated-fieldset > legend .gated-fieldset-switch .custom-control-label {
    cursor: pointer;
}
fieldset.gated-fieldset > .gated-fieldset-body.gated-off {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
fieldset.gated-fieldset > .gated-fieldset-body.gated-collapsed {
    display: none;
}
fieldset.gated-fieldset > .gated-fieldset-body {
    transition: opacity 0.15s ease-in-out;
}

/* A nested fieldset subdivides a group that already reads as one unit, so it
   takes no fill: a second one fights the outer set, and alternating back to
   the card's tone makes the inner set look like it escaped its parent. Its
   border and tighter padding are enough. Later than `.card fieldset` above at
   equal specificity, so this is the fill that renders when both match. */
fieldset fieldset {
    background: transparent;
    box-shadow: none;
    padding: 0.75rem 1rem 0;
    margin-bottom: 1rem;
}

fieldset fieldset > legend {
    font-size: 0.65rem;
    color: var(--text-quiet);
}

fieldset fieldset > legend::before {
    background: var(--color-gray);
}

/* Keep the last field group inside a fieldset from doubling bottom spacing */
fieldset > .form-group:last-child,
fieldset > .form-row:last-child {
    margin-bottom: 1rem;
}

/* When a fieldset lives inside a modal body, tighten the outer margin so
   the modal doesn't feel spacious-for-no-reason. */
.modal-body > form fieldset,
.modal-body form fieldset {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem 0.25rem;
}