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

    // Available widgets styling
    #wrap-widget-1 {
        .widget-item {
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease, box-shadow 0.2s ease;

            form {
                height: 100%;
            }

            .card {
                min-height: 100px;
                height: 100%;
                overflow: hidden; // Ensure content respects border-radius
            }

            .card-header {
                cursor: move;
                min-height: 100px;
                border-radius: 0; // Remove duplicate border-radius

                &:active {
                    cursor: grabbing;
                }
            }

            .widget-description-truncate {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4;
                max-height: 2.8em; // 2 lines * line-height
            }

            &:hover {
                .card {
                    transform: translateY(-2px);
                }
            }

            &.sortable-ghost {
                opacity: 0.5;
            }

            &.sortable-chosen {
                opacity: 1;

                .card {
                    transform: scale(1.02);
                }
            }

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

    // Widget items in sidebars
    .widget-item {
        cursor: pointer;

        .card {
            overflow: hidden; // Ensure content respects border-radius
        }

        .card-header {
            transition: background-color 0.2s ease;
            border-radius: 0; // Remove duplicate border-radius

            &:hover {
                background-color: var(--bs-gray-100);
            }

            button {
                transition: transform 0.2s ease;
                box-shadow: none !important;
                background: none !important;
                color: var(--bb-body-color) !important;

                svg {
                    margin: 0;
                }
            }

            &.collapsed button {
                transform: rotate(180deg);
            }
        }

        .widget-content {
            display: none;
            border-top: 1px solid var(--bs-border-color);
            border-radius: 0; // Remove duplicate border-radius

            &.show {
                display: block;
            }

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

    // Sidebar areas
    .sidebar-item {
        .card {
            transition: transform 0.2s ease;
        }

        .card-body {
            min-height: 80px;

            .widget-description {
                display: none;
            }

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

            .sortable-ghost {
                opacity: 0.5;

                ~ .dropzone,
                + .dropzone {
                    display: none;
                }

                .btn-action {
                    i {
                        display: block !important;
                    }
                }
            }
        }
    }

    // Dropzone styling
    .dropzone {
        transition: all 0.3s ease;

        .card {
            background: var(--bs-gray-50);
            border-style: dashed;
            opacity: 0.8;
            transition: all 0.3s ease;

            &:hover {
                opacity: 1;
                border-color: var(--bs-primary);
                background: var(--bs-primary-bg-subtle);
            }
        }

        &.active {
            .card {
                border-color: var(--bs-primary);
                background: var(--bs-primary-bg-subtle);
                animation: pulse 1.5s infinite;
            }
        }
    }

    // Animations
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
        }
    }

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

    // Button improvements
    .btn-ghost-primary {
        color: var(--bs-primary);
        background-color: transparent;
        border-color: transparent;

        &:hover {
            color: var(--bs-primary);
            background-color: var(--bs-primary-bg-subtle);
            border-color: transparent;
        }
    }

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

        &:hover {
            color: var(--bs-secondary);
            background-color: var(--bs-gray-100);
            border-color: transparent;
        }
    }
}