/**
 * Form Integration Styles
 * Handles PrestaShop admin form layout overrides
 */

@use '../variables' as *;

// Base border reset for all entity-selector elements
.entity-selector-trait,
.entity-selector-trait *,
.method-dropdown-menu,
.method-dropdown-menu *,
.es-preview-popover,
.es-preview-popover * {
    border-style: solid;
    border-width: 0;
    border-color: $es-border-color;
}

// Full-width form group override using :has()
// Excludes .layout-form-group which uses standard PrestaShop form layout
.form-group:has(.entity-selector-trait:not(.layout-form-group)),
.form-group:has(.entity-selector-trait:not(.layout-form-group)),
.form-group:has(.condition-trait:not(.layout-form-group)) {
    display: block;

    > .control-label {
        display: none;
    }

    > .col-lg-8 {
        width: 100%;
        max-width: 100%;
        padding-left: $es-spacing-md;
        padding-right: $es-spacing-md;
        flex: 0 0 100% !important;
    }
}

// Fallback class for browsers without :has() support
.form-group.condition-trait-fullwidth {
    display: block;

    > .control-label {
        display: none;
    }

    > .col-lg-8 {
        width: 100%;
        max-width: 100%;
        padding-left: $es-spacing-md;
        padding-right: $es-spacing-md;
        flex: 0 0 100% !important;
    }
}

// SAFEGUARD: Force label visibility for form-group layout widgets
// This overrides any conflicting rules (including fallback class rules)
// when the widget has layout-form-group class indicating standard form integration
.form-group:has(.layout-form-group) > .control-label {
    display: flex !important;
}

// Dropdown overflow fix
// When dropdown is open, parent containers must allow overflow
.panel:has(.es-search-dropdown.show),
.card:has(.es-search-dropdown.show),
.form-wrapper:has(.es-search-dropdown.show),
.panel-body:has(.es-search-dropdown.show),
.card-body:has(.es-search-dropdown.show),
.form-group:has(.es-search-dropdown.show),
.col-lg-8:has(.es-search-dropdown.show),
.col-lg-12:has(.es-search-dropdown.show) {
    overflow: visible !important;
}

// Target conditions wrapper hierarchy overflow fix
.entity-selector-trait:has(.es-search-dropdown.show),
.entity-selector-trait:has(.es-search-dropdown.show),
.condition-trait-body:has(.es-search-dropdown.show),
.es-block-content:has(.es-search-dropdown.show),
.es-block-groups:has(.es-search-dropdown.show),
.es-group:has(.es-search-dropdown.show),
.es-group-body:has(.es-search-dropdown.show),
.es-search-wrapper:has(.es-search-dropdown.show) {
    overflow: visible !important;
}

// =============================================================================
// Embedded Layout
// =============================================================================
// Use .layout-embedded for entity selectors nested inside other components
// Removes outer wrapper styling to avoid redundant borders/backgrounds

.entity-selector-trait.layout-embedded,
.entity-selector-trait.layout-embedded {
    background: transparent;
    border: none;
    border-radius: 0;

    // Remove padding from groups container when embedded
    .groups-container {
        padding: 0;
    }

    // Remove block body padding
    .block-body {
        padding: 0;
    }

    // Remove block footer border when embedded
    .block-footer {
        border-top: none;
        padding: $es-spacing-sm 0 0;
    }

    // Simplify selection group when embedded - single thin border only
    .selection-group {
        background: $es-white;
        border: 1px solid $es-slate-200;
        border-radius: $es-radius-md;

        // Lighter group header in embedded mode
        .group-header {
            background: $es-slate-50;
            border-bottom-color: $es-slate-200;
            padding: $es-spacing-xs $es-spacing-sm;
            border-radius: $es-radius-md $es-radius-md 0 0;
        }

        // Reduce group body padding (slightly more than $es-spacing-sm for readability)
        .group-body {
            padding: 0.75rem;
        }

        // Reduce group-include section padding
        .group-include {
            padding: $es-spacing-xs;
            margin-bottom: $es-spacing-sm;
        }

        // Smaller modifiers section
        .group-modifiers {
            padding: $es-spacing-xs $es-spacing-sm;
            margin: $es-spacing-sm (-$es-spacing-sm) (-$es-spacing-sm);
        }
    }

    // Empty state - smaller padding
    .groups-empty-state {
        padding: $es-spacing-md;
    }

    // Smaller add group button
    .btn-add-group {
        padding: 0.375rem 0.625rem;
        font-size: $es-font-size-xs;
    }
}