.widget-main {
    li {
        list-style: none;
    }

    .list-languages-chooser {
        margin-bottom: 20px;
    }

    // Widget Source Panel (Available Widgets)
    .widget-source-panel {
        .card-header {
            background: transparent;
            border-bottom: 1px solid var(--bb-border-color);
        }
    }

    .widget-source-search {
        background: var(--bb-bg-surface-secondary);

        .form-control {
            background: var(--bb-bg-surface);
            border-color: rgba(var(--bb-body-color-rgb), 0.15);

            &:focus {
                border-color: var(--bb-primary);
                box-shadow: 0 0 0 0.2rem rgba(var(--bb-primary-rgb), 0.15);
            }
        }
    }

    .widget-source-list {
        max-height: calc(100vh - 380px);
        min-height: 300px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .widget-source-item {
        transition: transform 0.2s ease, opacity 0.2s ease;

        &:hover {
            .widget-source-card {
                border-color: var(--bb-primary);
                background: rgba(var(--bb-primary-rgb), 0.02);
            }

            .widget-source-drag {
                opacity: 1;
                color: var(--bb-primary);
            }

            .widget-source-add {
                opacity: 1;
            }
        }

        &.sortable-ghost {
            opacity: 0.4;
        }

        &.sortable-chosen {
            .widget-source-card {
                transform: scale(1.02);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                border-color: var(--bb-primary);
            }
        }

        &.sortable-drag {
            opacity: 0.9;
        }
    }

    .widget-source-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: var(--bb-bg-surface);
        border: 1px solid var(--bb-border-color);
        border-radius: var(--bb-border-radius);
        cursor: grab;
        transition: all 0.2s ease;

        &:active {
            cursor: grabbing;
        }
    }

    .widget-source-drag {
        flex-shrink: 0;
        color: var(--bb-secondary);
        opacity: 0.5;
        transition: opacity 0.2s ease, color 0.2s ease;
    }

    .widget-source-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bb-primary-lt);
        border-radius: var(--bb-border-radius);
        color: var(--bb-primary);
    }

    .widget-source-info {
        flex-grow: 1;
        min-width: 0;
        overflow: hidden;
    }

    .widget-source-name {
        font-size: 0.875rem;
        font-weight: 600;
        margin: 0;
        color: var(--bb-body-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .widget-source-desc {
        font-size: 0.75rem;
        color: var(--bb-secondary);
        margin: 2px 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .widget-source-add {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--bb-border-color);
        border-radius: var(--bb-border-radius);
        color: var(--bb-secondary);
        cursor: pointer;
        opacity: 0.6;
        transition: all 0.2s ease;

        &:hover {
            background: var(--bb-primary);
            border-color: var(--bb-primary);
            color: white;
            transform: scale(1.1);
        }

        &:focus {
            outline: 2px solid var(--bb-primary);
            outline-offset: 2px;
        }
    }

    // Widget Areas Panel
    .widget-areas-panel {
        .card-header {
            background: transparent;
            border-bottom: 1px solid var(--bb-border-color);
        }
    }

    .widget-area-card {
        border: 1px solid var(--bb-border-color);
        border-radius: var(--bb-border-radius);
        overflow: hidden;
        transition: box-shadow 0.2s ease;

        &:has(.sortable-ghost) {
            box-shadow: 0 0 0 2px var(--bb-primary);
        }
    }

    .widget-area-header {
        background: var(--bb-bg-surface-secondary);
        border-bottom: 1px solid var(--bb-border-color);
        padding: 12px 16px;

        .card-title {
            font-size: 0.9375rem;
        }
    }

    .widget-area-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bb-azure-lt);
        border-radius: var(--bb-border-radius);
        color: var(--bb-azure);
        margin-right: 12px;
        flex-shrink: 0;
    }

    .widget-area-count {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .widget-area-body {
        padding: 12px;
        min-height: 120px;
        background: var(--bb-bg-surface);
    }

    .widget-area-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 80px;

        &:has(.sortable-ghost) {
            .widget-dropzone {
                display: none;
            }
        }
    }

    // Widget Items (in sidebar areas)
    .widget-item {
        transition: transform 0.2s ease, opacity 0.2s ease;

        &.sortable-ghost {
            opacity: 0.4;
        }

        &.sortable-chosen {
            .widget-item-card {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
        }

        &.is-expanded {
            .widget-item-toggle svg {
                transform: rotate(180deg);
            }

            .widget-item-card {
                border-color: var(--bb-primary);
            }
        }
    }

    .widget-item-card {
        background: var(--bb-bg-surface);
        border: 1px solid var(--bb-border-color);
        border-radius: var(--bb-border-radius);
        overflow: hidden;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .widget-item-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: var(--bb-bg-surface-secondary);
        cursor: grab;
        transition: background-color 0.2s ease;

        &:hover {
            background: var(--bb-bg-surface-tertiary);
        }

        &:active {
            cursor: grabbing;
        }
    }

    .widget-item-drag {
        flex-shrink: 0;
        color: var(--bb-secondary);
        opacity: 0.5;
    }

    .widget-item-icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bb-primary-lt);
        border-radius: var(--bb-border-radius-sm);
        color: var(--bb-primary);
    }

    .widget-item-title {
        flex-grow: 1;
        min-width: 0;

        h5 {
            font-size: 0.8125rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .widget-item-toggle {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: var(--bb-border-radius-sm);
        color: var(--bb-secondary);
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;

        &:hover {
            background: var(--bb-bg-surface);
            color: var(--bb-body-color);
        }

        svg {
            transition: transform 0.3s ease;
        }
    }

    .widget-item-content {
        display: none;
        border-top: 1px solid var(--bb-border-color);

        &.show {
            display: block;
        }
    }

    .widget-item-body {
        padding: 16px;

        .form-group:not(:first-child) {
            margin-top: 12px;
        }
    }

    .widget-item-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--bb-border-color);
        gap: 8px;
    }

    // Widget Dropzone (empty state)
    .widget-dropzone {
        transition: all 0.3s ease;
    }

    .widget-dropzone-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
        background: var(--bb-bg-surface-secondary);
        border: 2px dashed var(--bb-border-color);
        border-radius: var(--bb-border-radius);
        text-align: center;
        transition: all 0.3s ease;

        .widget-dropzone:hover &,
        .widget-area-list:has(.sortable-ghost) & {
            background: rgba(var(--bb-primary-rgb), 0.05);
            border-color: var(--bb-primary);
        }
    }

    .widget-dropzone-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bb-bg-surface);
        border-radius: 50%;
        color: var(--bb-secondary);
        margin-bottom: 12px;

        svg {
            width: 24px;
            height: 24px;
        }
    }

    .widget-dropzone-text {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--bb-body-color);
        margin: 0 0 4px;
    }

    .widget-dropzone-hint {
        font-size: 0.75rem;
        color: var(--bb-secondary);
    }

    // Drag animation
    @keyframes pulse-border {
        0% {
            border-color: var(--bb-primary);
        }
        50% {
            border-color: rgba(var(--bb-primary-rgb), 0.3);
        }
        100% {
            border-color: var(--bb-primary);
        }
    }

    .dragging-active {
        .widget-dropzone-inner {
            animation: pulse-border 1.5s ease-in-out infinite;
        }
    }

    // TomSelect overrides
    .ts-control {
        .item {
            width: calc(100% - 15px) !important;
        }
    }

    // Ghost button variants
    .btn-ghost-primary {
        color: var(--bb-primary);
        background-color: transparent;
        border-color: transparent;

        &:hover {
            color: var(--bb-primary);
            background-color: var(--bb-primary-lt);
            border-color: transparent;
        }
    }

    .btn-ghost-secondary {
        color: var(--bb-secondary);
        background-color: transparent;
        border-color: transparent;

        &:hover {
            color: var(--bb-body-color);
            background-color: var(--bb-bg-surface-secondary);
            border-color: transparent;
        }
    }

    // Dark mode adjustments
    [data-bs-theme='dark'] & {
        .widget-source-card,
        .widget-item-card {
            background: var(--bb-bg-surface);
        }

        .widget-source-search {
            background: var(--bb-bg-surface-secondary);
        }

        .widget-dropzone-inner {
            background: var(--bb-bg-surface-secondary);
        }

        .widget-area-header {
            background: var(--bb-bg-surface-secondary);
        }
    }
}

// Widget Add Modal Styles
#widget-add-modal {
    .widget-sidebar-list {
        max-height: 350px;
        overflow-y: auto;
        border-radius: var(--bb-border-radius);
        border: 1px solid var(--bb-border-color);
    }

    .widget-sidebar-option {
        padding: 12px 16px;
        border: none;
        border-bottom: 1px solid var(--bb-border-color);
        transition: all 0.2s ease;

        &:last-child {
            border-bottom: none;
        }

        &:hover,
        &:focus {
            background-color: var(--bb-primary-lt);
            z-index: 1;
        }

        &:active {
            transform: scale(0.99);
        }
    }

    .widget-sidebar-option-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bb-azure-lt);
        border-radius: var(--bb-border-radius);
        color: var(--bb-azure);
        margin-right: 12px;
        flex-shrink: 0;
    }

    .widget-sidebar-option-arrow {
        color: var(--bb-secondary);
        transition: transform 0.2s ease;
    }

    .widget-sidebar-option:hover .widget-sidebar-option-arrow {
        transform: translateX(4px);
        color: var(--bb-primary);
    }

    .widget-add-step-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--bb-border-color);
    }

    .widget-add-back-btn {
        flex-shrink: 0;
    }

    .widget-add-step-info {
        flex-grow: 1;
    }

    .widget-add-form-container {
        background: var(--bb-bg-surface-secondary);
        border-radius: var(--bb-border-radius);
        padding: 16px;
        margin-bottom: 16px;
        max-height: 400px;
        overflow-y: auto;
    }

    .widget-add-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

    .widget-add-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 16px;
        border-top: 1px solid var(--bb-border-color);
    }
}

// Responsive adjustments
@media (max-width: 991.98px) {
    .widget-main {
        .widget-source-list {
            max-height: 400px;
        }

        .widget-source-panel {
            margin-bottom: 1rem;
        }
    }
}

@media (max-width: 575.98px) {
    .widget-main {
        .widget-source-card {
            padding: 10px;
            gap: 8px;
        }

        .widget-source-icon {
            width: 32px;
            height: 32px;
        }

        .widget-item-header {
            padding: 8px 10px;
        }

        .widget-item-body {
            padding: 12px;
        }

        .widget-item-actions {
            flex-direction: column-reverse;
            gap: 8px;

            .btn {
                width: 100%;
            }
        }
    }
}