@charset "UTF-8";
/**
 * Learning Paths Add/Edit Step selector CSS owner. Extracted in P15.177.
 */


#stepModal .modal-dialog {
    max-width: min(980px, calc(100vw - 2rem));
}

#stepModal .modal-content {
    max-height: min(92vh, 980px);
}

#stepModal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-md);
}

#stepModal .lp-content-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 0 0 auto;
    max-width: 100%;
}

#stepModal .lp-step-content-selected .lp-content-item-side {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}

#stepModal .lp-step-content-section {
    min-height: 0;
}

#stepModal .lp-step-content-search-wrap {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    background: var(--color-bg-card);
}

#stepModal .lp-step-content-list .content-item .form-check-label {
    width: 100%;
    min-width: 0;
}

#stepModal .lp-step-content-list .content-item .form-check-label > .d-flex {
    align-items: flex-start;
    gap: var(--spacing-sm);
    min-width: 0;
}

#stepModal .lp-step-content-list .content-item .form-check-label > .d-flex > div:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    #stepModal .modal-body {
        padding: var(--spacing-sm);
    }

    #stepModal .lp-step-content-list {
        max-height: min(48vh, 360px);
    }
}

#stepModal .lp-step-content-list .content-item .form-check-label > .d-flex > div:last-child {
    flex: 0 1 42%;
    min-width: 0;
}

#stepModal .lp-step-content-list .content-item .lp-content-status-helper,
#stepModal .lp-step-content-selected .lp-content-status-helper {
    margin-top: 0.35rem;
    line-height: 1.35;
}

#stepModal .lp-content-status-wrap,
#stepModal .lp-content-selected-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.3rem;
}

#stepModal .lp-content-status-badge {
    font-size: 0.72rem;
}

#stepModal .lp-content-status--public { background: #198754; }
#stepModal .lp-content-status--unlisted { background: #0d6efd; }
#stepModal .lp-content-status--private { background: #6f42c1; }
#stepModal .lp-content-status--draft { background: #6c757d; }
#stepModal .lp-content-status--inactive { background: #dc3545; }

#stepModal .lp-content-status-helper {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #b02a37;
}

@media (max-width: 991.98px) {
    #stepModal .modal-dialog {
        max-width: calc(100vw - 1.5rem);
    }

    #stepModal .lp-step-content-list {
        max-height: min(48vh, 380px);
    }
}

@media (max-width: 575.98px) {
    #stepModal .modal-dialog {
        max-width: calc(100vw - 1rem);
    }

    #stepModal .lp-step-content-list {
        max-height: min(46vh, 340px);
        padding: var(--spacing-xs);
    }

    #stepModal .lp-step-content-list .content-item {
        padding: var(--spacing-xs);
    }

    #stepModal .lp-step-content-list .content-item .form-check-label > .d-flex {
        flex-direction: column;
    }

    #stepModal .lp-step-content-list .content-item .form-check-label > .d-flex > div:last-child {
        flex-basis: 100%;
        width: 100%;
    }
}


/* Learning Paths Add/Edit Step selector shell foundation (M10.048) */
#stepModal .lp-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-x: hidden;
}

#stepModal .lp-step-type-block,
#stepModal .lp-step-content-section,
#stepModal .lp-step-content-selected,
#stepModal .lp-modal-footer {
    border-radius: var(--radius-card);
}

#stepModal .lp-step-content-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    min-width: 0;
}

#stepModal .lp-step-content-search-wrap {
    position: static;
    z-index: 2;
    margin-bottom: 0;
    padding: var(--spacing-xs);
    border-radius: var(--radius-input);
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
}

#stepModal .lp-step-content-list {
    margin: 0;
    padding: var(--spacing-sm);
    min-height: 14rem;
    max-height: min(54vh, 520px);
    width: 100%;
}

#stepModal .lp-step-content-list .content-item {
    margin-bottom: var(--spacing-xs) !important;
    border-radius: var(--radius-input);
    background: color-mix(in srgb, var(--color-bg-card) 88%, white);
}

#stepModal .lp-step-content-list .content-item:has(.form-check-input:checked) {
    border-color: color-mix(in srgb, var(--color-primary, #0d6efd) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary, #0d6efd) 7%, var(--color-bg-card));
}

#stepModal .lp-step-content-selected {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    display: block;
    clear: both;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#stepModal .lp-modal-footer {
    position: static;
    z-index: 3;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
    background: color-mix(in srgb, var(--color-bg-card) 96%, white);
    backdrop-filter: blur(2px);
}

@media (min-width: 992px) {
    #stepModal .lp-step-content-list {
        max-height: min(56vh, 560px);
    }
}

@media (max-width: 991.98px) {
    #stepModal .lp-step-content-selected {
        position: static;
    }
}

@media (max-width: 575.98px) {
    #stepModal .lp-step-content-section {
        padding: var(--spacing-sm);
    }

    #stepModal .lp-step-content-search-wrap {
        padding: var(--spacing-xs);
    }

    #stepModal .lp-step-content-list {
        min-height: 12rem;
        max-height: min(48vh, 360px);
    }
}

/* Learning Paths selector readability slice (M10.052) */
#stepModal .lp-step-content-section {
    gap: var(--spacing-sm);
}

#stepModal .lp-step-content-list {
    padding: var(--spacing-sm);
}

#stepModal .lp-step-content-list .content-item {
    padding: var(--spacing-sm);
}

#stepModal .lp-step-content-list .content-item .form-check-label > .d-flex {
    gap: var(--spacing-md);
}

#stepModal .lp-step-content-list .content-item .form-check-label > .d-flex > div:first-child {
    line-height: 1.4;
}

#stepModal .lp-step-content-list .content-item .form-check-label > .d-flex > div:first-child strong {
    display: inline;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#stepModal .lp-step-content-list .content-item .form-check-label > .d-flex > div:last-child {
    flex-basis: 40%;
}

#stepModal .lp-content-status-wrap,
#stepModal .lp-content-selected-badges {
    gap: 0.35rem;
    margin-top: 0.4rem;
}

#stepModal .lp-content-status-helper,
#stepModal .lp-step-content-selected .lp-content-status-helper {
    margin-top: 0.45rem;
    line-height: 1.4;
}

#stepModal .lp-step-content-selected {
    padding: var(--spacing-md);
    line-height: 1.45;
}

#stepModal .lp-step-content-selected strong,
#stepModal .lp-step-content-selected .fw-semibold {
    display: inline;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 991.98px) {
    #stepModal .lp-step-content-list .content-item .form-check-label > .d-flex > div:last-child {
        flex-basis: 46%;
    }
}

@media (max-width: 575.98px) {
    #stepModal .lp-step-content-list {
        padding: var(--spacing-xs);
    }

    #stepModal .lp-step-content-list .content-item {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Learning Paths selector dedicated layout phase A (M10.055) */
#stepModal .lp-selector-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}
#stepModal .lp-selector-list-meta {
    margin-left: auto;
}
#stepModal .lp-selector-list-count {
    font-weight: 600;
}
#stepModal .lp-selector-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
#stepModal .lp-selector-search-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}
#stepModal .lp-selector-search-input {
    min-width: 0;
}
#stepModal .lp-selector-search-clear {
    text-decoration: none;
    padding: 0.15rem 0.35rem;
    color: var(--color-text-secondary, #6c757d);
    border-radius: var(--radius-sm, 0.375rem);
}
#stepModal .lp-selector-search-clear:hover {
    background: color-mix(in srgb, var(--color-text-secondary, #6c757d) 10%, transparent);
}
#stepModal .lp-content-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}
#stepModal .lp-content-item-main {
    border-radius: calc(var(--radius-card) - 2px);
    padding: 2px 4px;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}
#stepModal .lp-content-item-title,
#stepModal .lp-content-item-description {
    display: block;
    overflow-wrap: anywhere;
}
#stepModal .lp-content-item-description {
    color: var(--color-text-secondary, #6c757d);
    margin-top: 0.2rem;
}
#stepModal .lp-content-id-badge {
    background: var(--color-text-secondary, #6c757d);
}
#stepModal .lp-content-item--selected {
    border-color: color-mix(in srgb, var(--color-primary, #0d6efd) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary, #0d6efd) 8%, var(--color-bg-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary, #0d6efd) 28%, transparent);
}
#stepModal .lp-content-item--selected .lp-content-item-main {
    background: color-mix(in srgb, var(--color-primary, #0d6efd) 12%, var(--color-bg-card));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary, #0d6efd) 55%, transparent);
    padding-left: 10px;
}
#stepModal .lp-content-item--selected .lp-content-id-badge {
    background: var(--color-primary, #0d6efd);
}
#stepModal .lp-content-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary, #0d6efd) 60%, #ffffff);
    outline-offset: 2px;
}
#stepModal .lp-content-selected-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}
#stepModal .lp-content-selected-id {
    color: var(--color-text-secondary, #6c757d);
}
@media (max-width: 767.98px) {
    #stepModal .lp-selector-search-row {
        flex-wrap: wrap;
    }
    #stepModal .lp-content-item {
        grid-template-columns: minmax(0, 1fr);
    }
    #stepModal .lp-content-item-side {
        width: 100%;
        justify-content: flex-start;
    }
}