.divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 10px 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }

/* ======================================================
   FEX - Universal Animated Toggle
   Use: .slide-down-closed / .slide-down-open
   ====================================================== */

.slide-down-closed {
    overflow: hidden;
    max-height: 0 !important;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        transform 0.35s ease;
}

.slide-down-open {
    overflow: visible;
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        transform 0.35s ease;
}

/* ==========================================================
   FEX - UNIVERSAL SECTION HEADER
   Use for: block titles such as filters, groups or subsections
   ========================================================== */
.fex-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
    font-weight: 600;
    color: var(--color-dark);
}

/* FEX standard icon style (Task, Menu, Config, etc.) */
.fex-section-header i {
    background: var(--color-blue-primary);
    color: #fff;
    font-size: 12px;
    padding: 6px;
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-tiny);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* =========================[ SECTION TITLE - CARD HEADER ]========================= */

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;

    background: linear-gradient(
        135deg,
        var(--color-blue-primary),
        var(--color-blue-light)
    );

    color: var(--color-text-light);

    border-top-left-radius: var(--radius-tiny);
    border-top-right-radius: var(--radius-tiny);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: var(--font-size-medium);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

    margin-bottom: 0;
}

/* Icon wrapper (perfect alignment, FEX standard) */
.section-title i {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-gray-light);
    color: var(--color-blue-primary);
    line-height: 1;
}

.section-title i::before {
    display: block;

    transform: translate(1px, -1px);
}

/* == DOCUMENTATION ==

.fex-section-header
Use when a simple inline section title is needed.

HTML example:
<div class="fex-section-header">
    <i class="fa-solid fa-sliders"></i>
    <span>Filter Fields</span>
</div>

----------------------------------------------------------

.section-title
Use as a visual header for highlighted sections such as:
- Create
- Edit
- View
- Detail blocks

HTML example:
<div class="section-title">
    <i class="fa-solid fa-pen"></i>
    Edit item
</div>

Notes:
- Global utility (no dependency on form, JS or module)
- Icon is optional but recommended
- Designed to visually group content below it

*/