/**
 * Condition Trait Base Styles
 * Shared styling for all condition trait components
 */

@use '../variables' as *;
@use '../mixins' as *;

// Base condition trait container
.condition-trait {
    background: $es-white;
    border: 1px solid $es-border-color;
    border-radius: $es-radius-lg;
    margin-bottom: $es-spacing-lg;

    &:last-child {
        margin-bottom: 0;
    }
}

// Collapsed state
.condition-trait.collapsed {
    .condition-trait-header {
        border-bottom-color: transparent;
        border-radius: $es-radius-lg;
    }

    .collapse-icon {
        transform: rotate(180deg);
    }
}

// =============================================================================
// Trait Header
// =============================================================================

.condition-trait-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $es-spacing-lg;
    flex-wrap: wrap;
    padding: 0.875rem $es-spacing-lg;
    background: $es-slate-50;
    border-bottom: 1px solid $es-border-color;
    border-radius: $es-radius-lg $es-radius-lg 0 0;
    cursor: pointer;
    transition: background-color $es-transition-fast;

    &:hover {
        background: $es-slate-100;
    }
}

.trait-header-left {
    display: flex;
    align-items: center;
    gap: $es-spacing-md;
    min-width: 0;
    flex: 1;
}

.trait-icon {
    font-size: 1.125rem;
    color: $es-text-muted;
    flex-shrink: 0;
}

.trait-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.trait-title {
    font-size: $es-font-size-sm;
    font-weight: $es-font-weight-semibold;
    color: $es-slate-800;
    white-space: nowrap;
}

.trait-subtitle {
    font-size: $es-font-size-xs;
    color: $es-text-muted;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trait-header-right {
    display: flex;
    align-items: center;
    gap: $es-spacing-md;
    flex-shrink: 0;
    margin-left: auto;
}

.trait-header-actions {
    display: flex;
    align-items: center;
    gap: $es-spacing-sm;
}

// Collapse icon
.collapse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: $es-font-size-sm;
    color: $es-text-muted;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: $es-radius-sm;
    background: transparent;

    &:hover {
        color: $es-primary;
        background: rgba($es-primary, 0.08);
    }
}

// Show all toggle
.trait-show-all-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: $es-font-size-xs;
    color: $es-primary;
    cursor: pointer;

    &:hover {
        text-decoration: underline;
    }
}

// Trait total count badge (global fallback)
.trait-total-count {
    @include count-badge($es-primary);
}

// Required indicator
.trait-required {
    color: $es-danger;
    font-size: $es-font-size-xs;
}

// Validation error
.trait-validation-error {
    color: $es-danger;
    font-size: $es-font-size-xs;
    margin-top: 0.25rem;
}

// Trait toggle button
.trait-toggle {
    @include button-reset;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: $es-font-size-xs;
    font-weight: $es-font-weight-medium;
    color: $es-text-secondary;
    background: $es-white;
    border: 1px solid $es-border-color;
    border-radius: $es-radius-md;
    transition: all $es-transition-fast;

    &:hover {
        background: $es-slate-50;
        border-color: $es-gray-300;
    }

    &.active {
        color: $es-primary;
        border-color: $es-primary;
        background: $es-primary-light;
    }
}

// =============================================================================
// Trait Body
// =============================================================================

.condition-trait-body {
    padding: $es-spacing-lg;
    border-radius: 0 0 $es-radius-lg $es-radius-lg;
    background: $es-white;
    animation: slideDown 0.2s ease-out;
}

// Condition trait collapsed - hide body
.condition-trait.collapsed .condition-trait-body {
    display: none;
}

// =============================================================================
// Section Styles
// =============================================================================

.schedule-section,
.context-section {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid $es-slate-100;

    &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

.section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: $es-font-weight-semibold;
    color: $es-slate-600;
    margin-bottom: $es-spacing-md;

    i {
        font-size: $es-font-size-sm;
        color: $es-slate-400;
        margin-right: 0.25rem;
    }
}

.section-content {
    // Container for section content
}

.section-hint {
    margin-top: 0.5rem;
    font-size: 11px;
    color: $es-slate-400;
}

// =============================================================================
// Full-width Form Group Override
// =============================================================================

.form-group.condition-trait-fullwidth {
    display: block !important;

    > .control-label {
        display: none !important;
    }

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

// Condition traits group label
.condition-traits-group-label {
    font-size: $es-font-size-sm;
    font-weight: $es-font-weight-semibold;
    color: $es-slate-700;
    margin-bottom: $es-spacing-md;
}

.condition-traits-wrapper {
    display: flex;
    flex-direction: column;
    gap: $es-spacing-md;
}

// =============================================================================
// Animations
// =============================================================================

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}